fix(notification): Button text is truncated when hovering over "Clear all" in English environment with 20 font size

[electricface]

• Added OpacityMask to the title container for a smooth fade-out
  effect on the right side
• Enabled gradient effect only when text overflows (using width +
  5px threshold)
• Made the last 10% of the text fade to transparent for a natural
  visual transition

---

fix(notification): 英文环境且字体为20号，展开通知面板后，鼠标
hover到“清除全部”，此按钮未全部显示。

• 为标题容器添加 OpacityMask 实现右侧平滑淡出
• 仅在文字溢出时启用渐变（宽度 + 5px 阈值）
• 最后 10% 文字渐变透明以实现自然视觉过渡

Log: 修复通知中心在英文环境且字体为20号，展开通知面板后，鼠标hover到“清除全部”，此按钮未全部显示问题
Influence: 通知中心-顶部按钮
PMS: BUG-335143

Summary by Sourcery

Enhancements:

• Wrap the notification center header title in a container with a conditional horizontal opacity mask that smoothly fades out overflowing text instead of truncating it.

[sourcery-ai]

Reviewer's Guide

Implements a fade-out opacity mask for the notification center header title so the text appears smoothly truncated when constrained by right-side buttons, only activating the effect when the text actually overflows.

Flow diagram for enabling opacity mask on notification title

flowchart LR
  A[Header layout created] --> B[Compute titleText.implicitWidth]
  B --> C[Compute titleContainer.width]
  C --> D{titleText.implicitWidth > titleContainer.width + 5}
  D -- Yes --> E[Enable layer on titleContainer]
  E --> F[Apply OpacityMask effect]
  F --> G[Use Rectangle as maskSource]
  G --> H[Apply horizontal gradient
0.0: opaque
0.9: opaque
1.0: transparent]
  D -- No --> I[Disable layer on titleContainer]
  I --> J[Render full title without fade]
  H --> K[Render title with smooth right-side fade]
  K --> L[Clear_all button remains fully visible]
  J --> L

Loading

File-Level Changes

Change	Details	Files
Add a gradient-based opacity mask to the notification header title so long text smoothly fades out on the right instead of being hard-clipped.	Wrap the header title in a new Item container that controls layout, width, and clipping for the title text. Enable a layer with an OpacityMask effect using a horizontal gradient that stays opaque for the first 90% and fades to transparent in the last 10% of the container width. Conditionally enable the opacity mask layer only when the title text’s implicit width exceeds the container width plus a 5px threshold. Adjust layout properties (spacing, margins, fillWidth, maximumWidth, implicitHeight) so the title container expands correctly but is constrained by surrounding buttons, and remove the previous dummy Item used for layout spacing. Ensure the title text does not use built‑in eliding (Text.ElideNone) so the custom fade-out handles the overflow behavior.	panels/notification/center/NotifyHeader.qml

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• Consider avoiding the hard-coded + 5 width threshold and the 0.9 gradient stop magic numbers by extracting them into named constants or properties to make the intent clearer and easier to tweak in future layout changes.
• Using OpacityMask with layer.enabled can be relatively expensive; if this header is used in a highly dynamic context, it may be worth profiling and, if needed, constraining when layer.enabled can toggle (e.g., only on width/text changes) or exploring a lighter-weight fade implementation.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Consider avoiding the hard-coded `+ 5` width threshold and the `0.9` gradient stop magic numbers by extracting them into named constants or properties to make the intent clearer and easier to tweak in future layout changes.
- Using `OpacityMask` with `layer.enabled` can be relatively expensive; if this header is used in a highly dynamic context, it may be worth profiling and, if needed, constraining when `layer.enabled` can toggle (e.g., only on width/text changes) or exploring a lighter-weight fade implementation.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[deepin-ci-robot]

deepin pr auto review

这段代码实现了在通知中心标题栏中，当空间不足时对标题文本应用渐隐淡出效果的功能。以下是对该代码的审查意见，包括语法逻辑、代码质量、性能和安全方面的建议：

1. 语法逻辑

• 问题：layer.enabled 的绑定条件 titleText.implicitWidth > titleContainer.width + 5 存在潜在逻辑风险。
  • 分析：titleContainer 的宽度依赖于父布局 RowLayout 的分配。在布局计算的初始阶段或窗口大小调整过程中，width 可能尚未确定或为 0。此时 implicitWidth > width 恒为真，导致不必要的图层开启。虽然 + 5 是为了留出缓冲，但在极端情况下（如宽度极小），逻辑依然成立。
• 改进建议：增加对宽度的有效性检查，确保宽度大于 0 后再进行判断。或者使用 width > 0 && titleText.width > width（注意比较 width 而非 implicitWidth，因为 width 才是实际渲染尺寸，虽然在此场景下两者接近，但逻辑上更严谨）。

2. 代码质量

• 问题 1：硬编码的颜色值。
  • 分析：代码中使用了 #FFFFFFFF 和 #00FFFFFF。如果应用支持深色模式或主题切换，这些硬编码的白色可能导致在深色背景下显示异常（例如渐变区域出现白边）。
  • 改进建议：使用 DTK 的主题颜色，例如 DTK.colorType.highlight 或文本颜色 palette.text，或者至少使用半透明的黑色/白色组合以适应不同背景。考虑到这是一个遮罩，通常使用白色作为遮罩源配合 OpacityMask 的 maskSource 是标准的，但需确保 layer.effect 的行为符合预期。实际上，OpacityMask 的 maskSource 中 alpha 通道决定透明度，这里使用白色渐变是正确的，但建议定义一个常量或复用系统颜色以提高可维护性。
• 问题 2：注释中的 "Horizontal gradient" 描述准确，但代码中的 GradientStop 位置设置（0.0, 0.9, 1.0）意味着最后 10% 的区域会急剧渐变。
  • 改进建议：目前的设置（90%不透明，100%透明）是可以接受的，但可以根据 UI 设计规范微调这些比例值，最好定义为常量。

3. 代码性能

• 问题：layer.enabled 的动态切换和 OpacityMask 的使用。
  • 分析：开启 layer.enabled 会导致该 Item 被渲染到一个离屏纹理（FBO）中，这会带来额外的内存和 GPU 开销。虽然代码中仅在文本溢出时开启，但如果用户频繁调整窗口大小导致该属性频繁切换，或者布局频繁重排，可能会引起性能抖动。
  • 改进建议：
    1. 确保 layer.enabled 的绑定表达式尽量简单稳定。
    2. 考虑使用 ShaderEffect 替代 OpacityMask，虽然复杂度增加，但有时能提供更好的性能控制。
    3. 如果性能敏感，可以考虑仅在布局稳定后再开启渐变（虽然这会增加代码复杂度）。目前的实现作为 UI 组件通常是可接受的。

4. 代码安全

• 问题：Qt5Compat.GraphicalEffects 的使用。
  • 分析：该模块在 Qt 6 中被标记为兼容性模块，主要用于从 Qt 5 迁移。官方推荐使用新的 QtQuick.Effects 模块（基于 Multi-effect），因为 GraphicalEffects 在某些硬件或驱动上可能存在性能问题或不再维护。
  • 改进建议：如果项目计划长期基于 Qt 6 开发，建议逐步迁移到 QtQuick.Effects。如果必须使用 Qt5Compat，请确保目标环境支持该模块。

5. 其他细节

• 布局：titleContainer 设置了 Layout.fillWidth: true，这意味着它会占据除按钮外的所有空间。当空间不足时，文本会被压缩。配合 layer.enabled 的逻辑，这能实现预期的“压缩时淡出”效果。
• 文本属性：elide: Text.ElideNone 配合渐隐效果是正确的做法，避免了文本被截断的同时还能通过渐变提示用户还有内容。

改进后的代码示例

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects // 或者考虑迁移到 QtQuick.Effects
import org.deepin.dtk 1.0
import org.deepin.ds.notification
import org.deepin.ds.notificationcenter

// ... 其他代码 ...

    RowLayout {
        anchors.fill: parent
        spacing: 8
        
        // 定义常量或从样式文件中读取
        readonly property real fadeStartRatio: 0.9
        
        Item {
            id: titleContainer
            Layout.alignment: Qt.AlignLeft
            Layout.leftMargin: 18
            Layout.fillWidth: true
            implicitHeight: titleText.implicitHeight

            // 优化：确保容器宽度有效且文本实际宽度超出容器时才开启
            // 使用 titleText.width 而非 implicitWidth 进行比较，因为 layout 可能会压缩 width
            layer.enabled: width > 0 && titleText.width > width + 5
            layer.effect: OpacityMask {
                maskSource: Rectangle {
                    width: titleContainer.width
                    height: titleContainer.height
                    gradient: Gradient {
                        orientation: Gradient.Horizontal
                        GradientStop { position: 0.0; color: "#FFFFFFFF" }
                        GradientStop { position: titleContainer.fadeStartRatio; color: "#FFFFFFFF" }
                        GradientStop { position: 1.0; color: "#00FFFFFF" }
                    }
                }
            }

            NotifyHeaderTitleText {
                id: titleText
                text: qsTr("Notification Center")
                elide: Text.ElideNone
                tFont: DTK.fontManager.t4
                // 确保文本宽度不超过容器太多，避免布局计算过于复杂
                // 如果需要限制最大宽度，可以在这里设置
            }
        }
        
        // ... 其他按钮代码 ...
    }
// ... 其他代码 ...

总结

这段代码整体逻辑清晰，能够实现预期的 UI 效果。主要的改进点在于优化 layer.enabled 的判断逻辑以适应布局的动态变化，以及考虑 Qt 版本兼容性和性能开销。如果项目长期使用 Qt 6，建议关注 QtQuick.Effects 的迁移。

[deepin-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: 18202781743, electricface

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• debian/deepin/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[electricface]

/forcemerge

[deepin-bot]

This pr force merged! (status: behind)