From 13eccb13ca241758b180d2df402a962580033936 Mon Sep 17 00:00:00 2001
From: electricface <songwentai@uniontech.com>
Date: Wed, 4 Feb 2026 11:27:41 +0800
Subject: [PATCH] fix(notification): Button text is truncated when hovering
 over "Clear all" in English environment with 20 font size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 panels/notification/center/NotifyHeader.qml | 36 +++++++++++++++++----
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/panels/notification/center/NotifyHeader.qml b/panels/notification/center/NotifyHeader.qml
index 8f2fcf3b3..cfc2b7d4f 100644
--- a/panels/notification/center/NotifyHeader.qml
+++ b/panels/notification/center/NotifyHeader.qml
@@ -5,6 +5,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
 import org.deepin.dtk 1.0
 import org.deepin.ds.notification
 import org.deepin.ds.notificationcenter
@@ -45,16 +46,37 @@ FocusScope {
 
     RowLayout {
         anchors.fill: parent
-        NotifyHeaderTitleText {
-            text: qsTr("Notification Center")
+        spacing: 8
+        // Title container with fade-out effect when compressed by buttons
+        Item {
+            id: titleContainer
             Layout.alignment: Qt.AlignLeft
             Layout.leftMargin: 18
-            tFont: DTK.fontManager.t4
-        }
-
-        Item {
             Layout.fillWidth: true
-            Layout.preferredHeight: 1
+            implicitHeight: titleText.implicitHeight
+
+            // Enable opacity mask only when text overflows container
+            layer.enabled: titleText.implicitWidth > titleContainer.width + 5
+            layer.effect: OpacityMask {
+                maskSource: Rectangle {
+                    width: titleContainer.width
+                    height: titleContainer.height
+                    // Horizontal gradient: fully visible on left, fade to transparent on right
+                    gradient: Gradient {
+                        orientation: Gradient.Horizontal
+                        GradientStop { position: 0.0; color: "#FFFFFFFF" }  // Fully opaque
+                        GradientStop { position: 0.9; color: "#FFFFFFFF" }  // Still opaque at 90%
+                        GradientStop { position: 1.0; color: "#00FFFFFF" }  // Fully transparent
+                    }
+                }
+            }
+
+            NotifyHeaderTitleText {
+                id: titleText
+                text: qsTr("Notification Center")
+                elide: Text.ElideNone
+                tFont: DTK.fontManager.t4
+            }
         }
 
         AnimationSettingButton {