From 7b2ec7cf2793353eee9462e820db346d83414a7a Mon Sep 17 00:00:00 2001 From: wjyrich Date: Mon, 23 Mar 2026 16:19:58 +0800 Subject: [PATCH] feat: adjust notification center UI styling and layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Changed crystal theme background color from pure white to light gray (240/255) for better visual comfort 2. Added text color handling for notification header using DStyle control selectColor 3. Reduced content padding from 20 to 10 and adjusted window margins for tighter layout 4. Removed left margin from content area and right margin from header 5. Updated blendColor function to use local blendColorAlpha instead of dock.blendColorAlpha 6. Modified blur background colors and opacity values for better visual integration 7. Added clipItems property to OverlapIndicator to control clipping behavior 8. Adjusted close button position in NotifyItemContent (rightMargin: -width/2 + 6) 9. Changed gradient background opacity from 1.0 to 0.5 for crystal theme 10. Reduced leftMargin in NotifyStyle from 20 to 10 11. Disabled drop shadow effect on DropShadowText for cleaner appearance Log: Improved notification center visual design with adjusted colors, spacing, and effects Influence: 1. Verify notification center appearance in both light and dark themes 2. Test overlapping notifications display with new clipping behavior 3. Check close button positioning in notification items 4. Verify window margins and padding in different screen configurations 5. Test notification header text color in various theme conditions 6. Validate blur effect and transparency in crystal theme 7. Check notification item background opacity in overlap mode feat: 调整通知中心UI样式和布局 1. 将水晶主题背景色从纯白色改为浅灰色(240/255)，提升视觉舒适度 2. 为通知标题添加使用DStyle控制选择颜色的文本颜色处理 3. 将内容内边距从20减少到10，调整窗口边距实现更紧凑的布局 4. 移除内容区域的左边距和标题的右边距 5. 更新混合颜色函数使用本地blendColorAlpha替代dock.blendColorAlpha 6. 修改模糊背景颜色和透明度值以实现更好的视觉融合 7. 为重叠指示器添加clipItems属性以控制裁剪行为 8. 调整通知项内容中关闭按钮的位置(rightMargin: -width/2 + 6) 9. 将渐变背景透明度从1.0改为0.5（水晶主题） 10. 将NotifyStyle中的左边距从20减少到10 11. 禁用DropShadowText的阴影效果以获得更简洁的外观 Log: 优化通知中心视觉设计，调整颜色、间距和效果 Influence: 1. 验证通知中心在浅色和深色主题下的外观 2. 测试重叠通知显示与新裁剪行为 3. 检查通知项中关闭按钮的定位 4. 验证不同屏幕配置下的窗口边距和内边距 5. 测试各种主题条件下通知标题文本颜色 6. 验证水晶主题下的模糊效果和透明度 7. 检查重叠模式下通知项背景透明度 --- panels/notification/center/NormalNotify.qml | 2 +- .../center/NotifyHeaderTitleText.qml | 7 ++-- panels/notification/center/OverlapNotify.qml | 4 ++- panels/notification/center/package/main.qml | 35 +++++++++++++------ panels/notification/plugin/DropShadowText.qml | 9 +---- .../plugin/NotifyItemBackground.qml | 1 + .../notification/plugin/NotifyItemContent.qml | 8 ++--- panels/notification/plugin/NotifyStyle.qml | 4 +-- .../notification/plugin/OverlapIndicator.qml | 4 ++- .../plugin/SettingActionButton.qml | 8 ++--- 10 files changed, 47 insertions(+), 35 deletions(-) diff --git a/panels/notification/center/NormalNotify.qml b/panels/notification/center/NormalNotify.qml index 77324eef8..2d577a85b 100644 --- a/panels/notification/center/NormalNotify.qml +++ b/panels/notification/center/NormalNotify.qml @@ -64,7 +64,7 @@ NotifyItem { backgroundColor: Palette { normal { common: ("transparent") - crystal: Qt.rgba(255 / 255.0, 255 / 255.0, 255 / 255.0, 0.7) + crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.7) } normalDark { crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 0.7) diff --git a/panels/notification/center/NotifyHeaderTitleText.qml b/panels/notification/center/NotifyHeaderTitleText.qml index 7ae5d4d3f..c7d9d1909 100644 --- a/panels/notification/center/NotifyHeaderTitleText.qml +++ b/panels/notification/center/NotifyHeaderTitleText.qml @@ -1,15 +1,18 @@ -// SPDX-FileCopyrightText: 2025 UnionTech Software Technology Co., Ltd. +// SPDX-FileCopyrightText: 2025 - 2026 UnionTech Software Technology Co., Ltd. // // SPDX-License-Identifier: GPL-3.0-or-later import QtQuick import Qt5Compat.GraphicalEffects -import org.deepin.dtk 1.0 +import org.deepin.dtk 1.0 import org.deepin.ds.notification import org.deepin.ds.notificationcenter DropShadowText { property font tFont: DTK.fontManager.t4 + color: DTK.themeType === ApplicationHelper.DarkType ? + Qt.rgba(255, 255, 255, 0.7) : + Qt.rgba(0, 0, 0, 0.75) font { pixelSize: tFont.pixelSize family: tFont.family diff --git a/panels/notification/center/OverlapNotify.qml b/panels/notification/center/OverlapNotify.qml index 817297340..b5a4d6005 100644 --- a/panels/notification/center/OverlapNotify.qml +++ b/panels/notification/center/OverlapNotify.qml @@ -125,7 +125,7 @@ NotifyItem { backgroundColor: Palette { normal { common: ("transparent") - crystal: Qt.rgba(255 / 255.0, 255 / 255.0, 255 / 255.0, 0.7) + crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.7) } normalDark { crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 0.7) @@ -137,6 +137,7 @@ NotifyItem { OverlapIndicator { id: indicator enableAnimation: root.ListView.view.panelShown + clipItems: true anchors { bottom: parent.bottom left: parent.left @@ -147,6 +148,7 @@ NotifyItem { z: -1 count: root.count background: NotifyItemBackground { + opacity: realIndex === 0 ? 0.6 : 0.4 backgroundColor: Palette { normal { common: ("transparent") diff --git a/panels/notification/center/package/main.qml b/panels/notification/center/package/main.qml index affe721f0..ec129f95d 100644 --- a/panels/notification/center/package/main.qml +++ b/panels/notification/center/package/main.qml @@ -67,7 +67,7 @@ Window { switch (position) { case 0: { // DOCK_TOP let visibleHeight = Math.max(0, dockGeometry.y + dockGeometry.height - screenGeometry.y) - return Math.min(visibleHeight, dockGeometry.height) + return Math.min(visibleHeight, dockGeometry.height) } case 1: { // DOCK_RIGHT let visibleWidth = Math.max(0, screenGeometry.x + screenGeometry.width - dockGeometry.x) @@ -84,14 +84,14 @@ Window { visible: Panel.visible flags: Qt.Tool - property int contentPadding: 20 - width: NotifyStyle.contentItem.width + NotifyStyle.leftMargin +contentPadding * 2 + property int contentPadding: 10 + width: NotifyStyle.contentItem.width + contentPadding * 2 // height: 800 DLayerShellWindow.layer: DLayerShellWindow.LayerOverlay DLayerShellWindow.anchors: DLayerShellWindow.AnchorRight | DLayerShellWindow.AnchorTop | DLayerShellWindow.AnchorBottom - DLayerShellWindow.topMargin: windowMargin(0) - DLayerShellWindow.rightMargin: windowMargin(1) - DLayerShellWindow.bottomMargin: windowMargin(2) + DLayerShellWindow.topMargin: windowMargin(0) + contentPadding + DLayerShellWindow.rightMargin: windowMargin(1) + contentPadding + DLayerShellWindow.bottomMargin: windowMargin(2) + contentPadding DLayerShellWindow.exclusionZone: -1 DLayerShellWindow.keyboardInteractivity: DLayerShellWindow.KeyboardInteractivityOnDemand palette: DTK.palette @@ -103,6 +103,8 @@ Window { DWindow.enabled: true color: "transparent" DWindow.enableBlurWindow: true + DWindow.borderColor: DTK.themeType === ApplicationHelper.DarkType ? Qt.rgba(0, 0, 0, 0.8) : Qt.rgba(0, 0, 0, 0.06) + // 修复：通知中心屏幕跟随任务栏屏幕，而不是硬编码为第一个屏幕 screen: getDockScreen() // TODO `Qt.application.screens[0]` maybe invalid, why screen is changed. @@ -135,17 +137,32 @@ Window { } } + + function blendColorAlpha(fallback) { + var appearance = DS.applet("org.deepin.ds.dde-appearance") + if (!appearance || appearance.opacity < 0) + return fallback + return appearance.opacity + } + // only add blendColor effect when DWindow.enableBlurWindow is true, // avoid to updating blur area frequently.-- StyledBehindWindowBlur { + InsideBoxBorder { + anchors.fill: parent + radius: DTK.platformTheme.windowRadius + color: DTK.themeType === ApplicationHelper.DarkType ? + Qt.rgba(1, 1, 1, 0.1) : + Qt.rgba(0, 0, 0, 0.1) + } control: parent anchors.fill: parent cornerRadius: 0 blendColor: { if (valid) { return DStyle.Style.control.selectColor(undefined, - Qt.rgba(235 / 255.0, 235 / 255.0, 235 / 255.0, dock.blendColorAlpha(0.6)), - Qt.rgba(10 / 255, 10 / 255, 10 /255, dock.blendColorAlpha(85 / 255))) + Qt.rgba(238 / 255.0, 238 / 255.0, 238 / 255.0, blendColorAlpha(0.8)), + Qt.rgba(20 / 255, 20 / 255, 20 /255, blendColorAlpha(0.8))) } return DStyle.Style.control.selectColor(undefined, DStyle.Style.behindWindowBlur.lightNoBlurColor, @@ -161,7 +178,6 @@ Window { top: parent.top topMargin: contentPadding left: parent.left - leftMargin: contentPadding right: parent.right bottom: parent.bottom } @@ -172,7 +188,6 @@ Window { top: parent.top left: parent.left right: parent.right - rightMargin: contentPadding } // Tab navigation: staging -> header onGotoHeaderFirst: notifyCenter.focusHeaderFirst() diff --git a/panels/notification/plugin/DropShadowText.qml b/panels/notification/plugin/DropShadowText.qml index 4a96d5f6a..f1098b886 100644 --- a/panels/notification/plugin/DropShadowText.qml +++ b/panels/notification/plugin/DropShadowText.qml @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2025 UnionTech Software Technology Co., Ltd. +// SPDX-FileCopyrightText: 2025 - 2026 UnionTech Software Technology Co., Ltd. // // SPDX-License-Identifier: GPL-3.0-or-later @@ -9,11 +9,4 @@ import org.deepin.ds.notificationcenter Text { color: Qt.rgba(1, 1, 1, 1) - layer.enabled: true - layer.effect: DropShadow { - color: Qt.rgba(0, 0, 0, 0.6) - radius: 4 - samples: 9 - verticalOffset: 1 - } } diff --git a/panels/notification/plugin/NotifyItemBackground.qml b/panels/notification/plugin/NotifyItemBackground.qml index 85fc54cf7..fb46a193c 100644 --- a/panels/notification/plugin/NotifyItemBackground.qml +++ b/panels/notification/plugin/NotifyItemBackground.qml @@ -11,6 +11,7 @@ Control { padding: radius / 2 + property int realIndex: 0 property int radius: 12 property Palette borderColor: Palette { normal { diff --git a/panels/notification/plugin/NotifyItemContent.qml b/panels/notification/plugin/NotifyItemContent.qml index b0fb50e4f..8b583f688 100644 --- a/panels/notification/plugin/NotifyItemContent.qml +++ b/panels/notification/plugin/NotifyItemContent.qml @@ -104,7 +104,7 @@ NotifyItem { top: parent.top topMargin: -height / 2 right: parent.right - rightMargin: -width / 2 + rightMargin: -width / 2 + 6 } width: 20 height: 20 @@ -149,12 +149,10 @@ NotifyItem { color1: Palette { normal { common: ("transparent") - // TODO crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.5) - crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 1.0) + crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.5) } normalDark { - // TODO crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.5) - crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 1.0) + crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 0.5) } } color2: color1 diff --git a/panels/notification/plugin/NotifyStyle.qml b/panels/notification/plugin/NotifyStyle.qml index a6f91804b..759f95d55 100644 --- a/panels/notification/plugin/NotifyStyle.qml +++ b/panels/notification/plugin/NotifyStyle.qml @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd. +// SPDX-FileCopyrightText: 2024 - 2026 UnionTech Software Technology Co., Ltd. // // SPDX-License-Identifier: GPL-3.0-or-later @@ -15,5 +15,5 @@ QtObject { property int width: 360 } property int scrollBarPadding: 2 - property int leftMargin: 20 + property int leftMargin: 10 } diff --git a/panels/notification/plugin/OverlapIndicator.qml b/panels/notification/plugin/OverlapIndicator.qml index df94424d6..12007e0b6 100644 --- a/panels/notification/plugin/OverlapIndicator.qml +++ b/panels/notification/plugin/OverlapIndicator.qml @@ -15,6 +15,7 @@ Item { property int overlapHeight: 8 property bool revert: false property bool enableAnimation: false + property bool clipItems: false implicitHeight: layout.height implicitWidth: 360 @@ -35,7 +36,7 @@ Item { Layout.preferredWidth: root.width - (realIndex) * radius * 2 Layout.alignment: Qt.AlignHCenter z: -realIndex - clip: true + clip: root.clipItems Loader { id: contentLoader @@ -52,6 +53,7 @@ Item { sourceComponent: root.background onLoaded: function() { + contentLoader.item.realIndex = Qt.binding(function() { return item.realIndex; }) if (root.enableAnimation) { fadeInAnimation.start() } else { diff --git a/panels/notification/plugin/SettingActionButton.qml b/panels/notification/plugin/SettingActionButton.qml index a696ef9aa..7651ecb96 100644 --- a/panels/notification/plugin/SettingActionButton.qml +++ b/panels/notification/plugin/SettingActionButton.qml @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd. +// SPDX-FileCopyrightText: 2024 - 2026 UnionTech Software Technology Co., Ltd. // // SPDX-License-Identifier: GPL-3.0-or-later @@ -36,12 +36,10 @@ ActionButton { color1: Palette { normal { common: ("transparent") - // TODO crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.5) - crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 1.0) + crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.5) } normalDark { - // TODO crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.5) - crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 1.0) + crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 0.5) } }