From 866f1272362287c152a125129005dbd80f7136b0 Mon Sep 17 00:00:00 2001 From: Mengci Cai Date: Mon, 9 Feb 2026 16:51:52 +0800 Subject: [PATCH] style: replace shadows with borders in OSD notifications 1. Replaced D.BoxShadow and D.BoxInsetShadow components with D.InsideBoxBorder and D.OutsideBoxBorder in display mode and window effect panels 2. Added new color palette properties for inside and outside borders with checked and normal states 3. Adjusted background color darkness in dark mode from 0.6 to 0.5 for better contrast 4. Added D.OutsideBoxBorder component to main OSD window 5. Removed obsolete dropShadowColor and innerShadowColor palette properties This change transitions from shadow-based visual effects to border-based effects for clearer definition of UI elements while maintaining visual hierarchy. Border effects provide better visibility across different themes and improve rendering performance. Log: Updated OSD notification visual style with borders replacing shadows for better clarity and theme consistency Influence: 1. Test OSD notifications in both light and dark modes to verify border visibility 2. Verify selected and unselected states show proper border colors 3. Check display mode switching and ensure visual consistency 4. Test window effects and notification popups for proper border rendering 5. Verify that the changes don't affect touch interactions or responsiveness 6. Confirm that the visual hierarchy remains clear with the new border effects PMS: BUG-311255 --- .../osd/displaymode/package/main.qml | 51 +++++++++---------- .../osd/windoweffect/package/main.qml | 51 +++++++++---------- 2 files changed, 50 insertions(+), 52 deletions(-) diff --git a/panels/notification/osd/displaymode/package/main.qml b/panels/notification/osd/displaymode/package/main.qml index c418c8dbc..cf6ade1f9 100644 --- a/panels/notification/osd/displaymode/package/main.qml +++ b/panels/notification/osd/displaymode/package/main.qml @@ -64,15 +64,7 @@ AppletItem { } property D.Palette checkedBackgroundColor: D.Palette { normal: Qt.rgba(1, 1, 1, 0.6) - normalDark: Qt.rgba(0, 0, 0, 0.6) - } - property D.Palette dropShadowColor: D.Palette { - normal: Qt.rgba(0, 0, 0, 0.1) - normalDark: Qt.rgba(0, 0, 0, 0.7) - } - property D.Palette innerShadowColor: D.Palette { - normal: Qt.rgba(1, 1, 1, 0.2) - normalDark: Qt.rgba(1, 1, 1, 0.03) + normalDark: Qt.rgba(0, 0, 0, 0.5) } property bool isCurrent: Applet.currentPlanItem && Applet.currentPlanItem.key === model.key @@ -126,26 +118,33 @@ AppletItem { color: itemView.isCurrent ? itemView.D.ColorSelector.checkedBackgroundColor : itemView.D.ColorSelector.backgroundColor } - D.BoxShadow { - visible: !itemView.isCurrent + D.InsideBoxBorder { + property D.Palette insideBorderColor: D.Palette { + normal: Qt.rgba(1, 1, 1, 0.1) + normalDark: Qt.rgba(1, 1, 1, 0.05) + } + property D.Palette checkedInsideBorderColor: D.Palette { + normal: Qt.rgba(1, 1, 1, 0.15) + normalDark: Qt.rgba(1, 1, 1, 0.08) + } + radius: backgroundRect.radius anchors.fill: parent - shadowOffsetX: 0 - shadowOffsetY: 1 - shadowColor: itemView.D.ColorSelector.dropShadowColor - shadowBlur: 1 - cornerRadius: backgroundRect.radius - spread: 0 - hollow: true + color: itemView.isCurrent ? D.ColorSelector.checkedInsideBorderColor + : D.ColorSelector.insideBorderColor } - D.BoxInsetShadow { - visible: !itemView.isCurrent + D.OutsideBoxBorder { + property D.Palette outsideBorderColor: D.Palette { + normal: Qt.rgba(0, 0, 0, 0.05) + normalDark: Qt.rgba(0, 0, 0, 0.4) + } + property D.Palette checkedOutsideBorderColor: D.Palette { + normal: Qt.rgba(0, 0, 0, 0.1) + normalDark: Qt.rgba(0, 0, 0, 0.45) + } + radius: backgroundRect.radius anchors.fill: parent - shadowOffsetX: 0 - shadowOffsetY: 1 - shadowBlur: 1 - spread: 0 - cornerRadius: backgroundRect.radius - shadowColor: itemView.D.ColorSelector.innerShadowColor + color: itemView.isCurrent ? D.ColorSelector.checkedOutsideBorderColor + : D.ColorSelector.outsideBorderColor } } } diff --git a/panels/notification/osd/windoweffect/package/main.qml b/panels/notification/osd/windoweffect/package/main.qml index 560fc13d8..d2670c72e 100644 --- a/panels/notification/osd/windoweffect/package/main.qml +++ b/panels/notification/osd/windoweffect/package/main.qml @@ -95,15 +95,7 @@ AppletItem { } property D.Palette checkedBackgroundColor: D.Palette { normal: Qt.rgba(1, 1, 1, 0.6) - normalDark: Qt.rgba(0, 0, 0, 0.6) - } - property D.Palette dropShadowColor: D.Palette { - normal: Qt.rgba(0, 0, 0, 0.1) - normalDark: Qt.rgba(0, 0, 0, 0.7) - } - property D.Palette innerShadowColor: D.Palette { - normal: Qt.rgba(1, 1, 1, 0.2) - normalDark: Qt.rgba(1, 1, 1, 0.03) + normalDark: Qt.rgba(0, 0, 0, 0.5) } contentItem: RowLayout { @@ -175,26 +167,33 @@ AppletItem { color: itemView.isCurrent ? itemView.D.ColorSelector.checkedBackgroundColor : itemView.D.ColorSelector.backgroundColor } - D.BoxShadow { - visible: !itemView.isCurrent + D.InsideBoxBorder { + property D.Palette insideBorderColor: D.Palette { + normal: Qt.rgba(1, 1, 1, 0.1) + normalDark: Qt.rgba(1, 1, 1, 0.05) + } + property D.Palette checkedInsideBorderColor: D.Palette { + normal: Qt.rgba(1, 1, 1, 0.15) + normalDark: Qt.rgba(1, 1, 1, 0.08) + } + radius: backgroundRect.radius anchors.fill: parent - shadowOffsetX: 0 - shadowOffsetY: 1 - shadowColor: itemView.D.ColorSelector.dropShadowColor - shadowBlur: 1 - cornerRadius: backgroundRect.radius - spread: 0 - hollow: true + color: itemView.isCurrent ? D.ColorSelector.checkedInsideBorderColor + : D.ColorSelector.insideBorderColor } - D.BoxInsetShadow { - visible: !itemView.isCurrent + D.OutsideBoxBorder { + property D.Palette outsideBorderColor: D.Palette { + normal: Qt.rgba(0, 0, 0, 0.05) + normalDark: Qt.rgba(0, 0, 0, 0.4) + } + property D.Palette checkedOutsideBorderColor: D.Palette { + normal: Qt.rgba(0, 0, 0, 0.1) + normalDark: Qt.rgba(0, 0, 0, 0.45) + } + radius: backgroundRect.radius anchors.fill: parent - shadowOffsetX: 0 - shadowOffsetY: 1 - shadowBlur: 1 - spread: 0 - cornerRadius: backgroundRect.radius - shadowColor: itemView.D.ColorSelector.innerShadowColor + color: itemView.isCurrent ? D.ColorSelector.checkedOutsideBorderColor + : D.ColorSelector.outsideBorderColor } } }