From e196a91c8b6cd8c1e04f82a4ffd0a975045f48a6 Mon Sep 17 00:00:00 2001 From: Devin Lin Date: Thu, 18 Sep 2025 09:29:53 -0400 Subject: [PATCH] actiondrawer: Use contextually correct colors and dark background at all times This commit changes the action drawer colorsets to be contextually correct. The panel background would use the window background colors (instead of the view ones), and quicksettings delegates would use colors from the Button color set (rather than the view). This also changes the background scrim to always be dark even in light mode. I think this is important to do because we have two views (notifications, and quick settings), which currently don't have much in the way of colours to distinguish the two. This commit also makes some changes to the notifications widget in order for its card foreground to be the standard theme colors. ![image](/uploads/b4e42984da926bc266d6c53d59a323b7/image.png){width=200} ![image](/uploads/4dc71502cdf85b5cbf6a2497a2384939/image.png){width=200} ![image](/uploads/ebd2d57ed46161ec8bb240a36c7069e7/image.png){width=300} ![image](/uploads/99656ee4cc322ee7412d7aef1c696893/image.png){width=200} ![image](/uploads/c0521a64069077fbe7e44b23159227e7/image.png){width=200} ![image](/uploads/6567a1bf42092d914a56d03ac5d7be54/image.png){width=300} --- .../qml/actiondrawer/private/BrightnessItem.qml | 3 +++ .../qml/actiondrawer/private/ContentContainer.qml | 4 ++-- .../private/LandscapeContentContainer.qml | 7 ------- .../qml/actiondrawer/private/NotificationDrawer.qml | 5 ++--- .../actiondrawer/private/QuickSettingsDelegate.qml | 13 ++++++++++++- .../actiondrawer/private/QuickSettingsDrawer.qml | 6 ++++++ .../private/QuickSettingsFullDelegate.qml | 1 + .../private/QuickSettingsMinimizedDelegate.qml | 2 ++ .../qml/actiondrawer/private/QuickSettingsPanel.qml | 6 ++++++ .../widgets/mediacontrols/MediaControlsWidget.qml | 1 - .../notifications/NotificationGroupHeader.qml | 3 +-- .../qml/widgets/notifications/NotificationItem.qml | 10 +++++----- .../widgets/notifications/NotificationsWidget.qml | 6 ++++++ .../contents/lockscreen/NotificationsComponent.qml | 2 ++ 14 files changed, 48 insertions(+), 21 deletions(-) diff --git a/components/mobileshell/qml/actiondrawer/private/BrightnessItem.qml b/components/mobileshell/qml/actiondrawer/private/BrightnessItem.qml index 5b265c0b..145a4aae 100644 --- a/components/mobileshell/qml/actiondrawer/private/BrightnessItem.qml +++ b/components/mobileshell/qml/actiondrawer/private/BrightnessItem.qml @@ -41,6 +41,9 @@ Item { panelType: MobileShell.PanelBackground.PanelType.Base flatten: root.brightnessPressedValue + + Kirigami.Theme.inherit: false + Kirigami.Theme.colorSet: Kirigami.Theme.Window } RowLayout { diff --git a/components/mobileshell/qml/actiondrawer/private/ContentContainer.qml b/components/mobileshell/qml/actiondrawer/private/ContentContainer.qml index 2b52bf21..7398193e 100644 --- a/components/mobileshell/qml/actiondrawer/private/ContentContainer.qml +++ b/components/mobileshell/qml/actiondrawer/private/ContentContainer.qml @@ -26,7 +26,7 @@ Item { readonly property bool swipeAreaMoving: swipeAreaBase.moving || swipeAreaPortrait.moving - Kirigami.Theme.colorSet: Kirigami.Theme.View + Kirigami.Theme.colorSet: Kirigami.Theme.Complementary Kirigami.Theme.inherit: false readonly property alias brightnessPressedValue: quickSettings.brightnessPressedValue @@ -60,7 +60,7 @@ Item { color: Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, - 0.95) + 0.9) Behavior on color { ColorAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.OutQuad } } opacity: Math.max(0, Math.min(brightnessPressedValue, actionDrawer.offset / root.minimizedQuickSettingsOffset)) } diff --git a/components/mobileshell/qml/actiondrawer/private/LandscapeContentContainer.qml b/components/mobileshell/qml/actiondrawer/private/LandscapeContentContainer.qml index e2106837..2d4316a5 100644 --- a/components/mobileshell/qml/actiondrawer/private/LandscapeContentContainer.qml +++ b/components/mobileshell/qml/actiondrawer/private/LandscapeContentContainer.qml @@ -36,13 +36,6 @@ Item { Kirigami.Theme.colorSet: Kirigami.Theme.View Kirigami.Theme.inherit: false - P5Support.DataSource { - id: timeSource - engine: "time" - connectedSources: ["Local"] - interval: 60 * 1000 - } - MouseArea { anchors.fill: parent diff --git a/components/mobileshell/qml/actiondrawer/private/NotificationDrawer.qml b/components/mobileshell/qml/actiondrawer/private/NotificationDrawer.qml index 0112c99a..3ef7da83 100644 --- a/components/mobileshell/qml/actiondrawer/private/NotificationDrawer.qml +++ b/components/mobileshell/qml/actiondrawer/private/NotificationDrawer.qml @@ -41,9 +41,6 @@ Item { interval: 60 * 1000 } - Kirigami.Theme.colorSet: Kirigami.Theme.View - Kirigami.Theme.inherit: false - MobileShell.VelocityCalculator { id: velocityCalculator } @@ -66,6 +63,8 @@ Item { showHeader: actionDrawer.mode != MobileShell.ActionDrawer.Portrait listView.interactive: !actionDrawer.dragging && root.listOverflowing + cardColorScheme: Kirigami.Theme.View + Connections { target: actionDrawer diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml index 4b1abcd1..8c126c60 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml @@ -34,13 +34,24 @@ MobileShell.BaseItem { // set by children property var iconItem + Kirigami.Theme.inherit: false + Kirigami.Theme.colorSet: Kirigami.Theme.Button + readonly property color enabledButtonBorderColor: Qt.darker(Kirigami.Theme.highlightColor, 1.25) - readonly property color disabledButtonBorderColor: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.textColor, Kirigami.Theme.backgroundColor, 0.75) + readonly property color disabledButtonBorderColor: separatorColorHelper(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.2) readonly property color enabledButtonColor: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.highlightColor, Kirigami.Theme.backgroundColor, 0.6) readonly property color enabledButtonPressedColor: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.highlightColor, Kirigami.Theme.backgroundColor, 0.4); readonly property color disabledButtonColor: Kirigami.Theme.backgroundColor readonly property color disabledButtonPressedColor: Qt.darker(disabledButtonColor, 1.1) + function separatorColorHelper(bg, fg, baseRatio) { + if (Kirigami.ColorUtils.brightnessForColor(bg) === Kirigami.ColorUtils.Light) { + return Kirigami.ColorUtils.linearInterpolation(bg, fg, baseRatio); + } else { + return Kirigami.ColorUtils.linearInterpolation(bg, fg, baseRatio / 2); + } + } + // scale animation on press property real zoomScale: 1 Behavior on zoomScale { diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsDrawer.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsDrawer.qml index 3669bd3a..de09464c 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsDrawer.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsDrawer.qml @@ -57,6 +57,9 @@ MobileShell.BaseItem { rightPadding: Kirigami.Units.smallSpacing bottomPadding: Kirigami.Units.smallSpacing * 4 + Kirigami.Theme.inherit: false + Kirigami.Theme.colorSet: Kirigami.Theme.Window + background: Item { opacity: brightnessPressedValue @@ -66,6 +69,9 @@ MobileShell.BaseItem { anchors.bottomMargin: shadow.height panelType: MobileShell.PanelBackground.PanelType.Flat radius: 0 + + Kirigami.Theme.inherit: false + Kirigami.Theme.colorSet: Kirigami.Theme.Window } Rectangle { diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml index cdab8247..65397145 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml @@ -41,6 +41,7 @@ QuickSettingsDelegate { Rectangle { anchors.fill: parent radius: Kirigami.Units.cornerRadius + border.pixelAligned: false border.width: 1 border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor color: { diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml index e313902e..ff08519e 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml @@ -40,6 +40,8 @@ QuickSettingsDelegate { Rectangle { anchors.fill: parent radius: Kirigami.Units.cornerRadius + border.pixelAligned: false + border.width: 1 border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor color: { if (root.enabled) { diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsPanel.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsPanel.qml index 508ae7bf..e06a8512 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsPanel.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsPanel.qml @@ -44,11 +44,17 @@ MobileShell.BaseItem { rightPadding: Kirigami.Units.smallSpacing * 4 bottomPadding: Kirigami.Units.smallSpacing * 4 + Kirigami.Theme.inherit: false + Kirigami.Theme.colorSet: Kirigami.Theme.Window + background: MobileShell.PanelBackground { anchors.fill: parent anchors.margins: Kirigami.Units.largeSpacing panelType: MobileShell.PanelBackground.PanelType.Base opacity: brightnessPressedValue + + Kirigami.Theme.inherit: false + Kirigami.Theme.colorSet: Kirigami.Theme.Window } contentItem: Item { diff --git a/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml b/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml index 9f659e8c..bb540809 100644 --- a/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml +++ b/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml @@ -138,7 +138,6 @@ Item { padding: root.padding contentItem: ColumnLayout { - Kirigami.Theme.inherit: true width: playerItem.width - playerItem.leftPadding - playerItem.rightPadding spacing: Kirigami.Units.largeSpacing diff --git a/components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml b/components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml index 5dc95807..4ba45faf 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml +++ b/components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml @@ -21,7 +21,6 @@ import org.kde.coreaddons 1.0 as KCoreAddons RowLayout { id: notificationHeading - property bool inLockScreen: false property var applicationIconSource property string applicationName property string originName @@ -44,7 +43,7 @@ RowLayout { Layout.leftMargin: Kirigami.Units.smallSpacing Layout.fillWidth: true - color: inLockScreen ? "white" : Kirigami.Theme.textColor + color: Kirigami.Theme.textColor opacity: 0.75 elide: Text.ElideLeft diff --git a/components/mobileshell/qml/widgets/notifications/NotificationItem.qml b/components/mobileshell/qml/widgets/notifications/NotificationItem.qml index 36585489..6ee722c7 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationItem.qml +++ b/components/mobileshell/qml/widgets/notifications/NotificationItem.qml @@ -27,6 +27,8 @@ BaseNotificationItem { property bool inLockScreen: false property int panelType: MobileShell.PanelBackground.PanelType.Drawer + property var cardColorScheme: Kirigami.Theme.View + signal dragStart() signal dragEnd() signal takeFocus() @@ -38,11 +40,6 @@ BaseNotificationItem { anchors.left: parent.left anchors.right: parent.right - inLockScreen: notificationItem.inLockScreen - - Kirigami.Theme.colorSet: Kirigami.Theme.Header - Kirigami.Theme.inherit: false - visible: !notificationItem.inGroup height: visible ? implicitHeight : 0 @@ -69,6 +66,9 @@ BaseNotificationItem { onDragStart: notificationItem.dragStart() onDragEnd: notificationItem.dragEnd() + Kirigami.Theme.inherit: false + Kirigami.Theme.colorSet: notificationItem.cardColorScheme + ColumnLayout { id: column spacing: 0 diff --git a/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml b/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml index 5cca9e84..80407e98 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml +++ b/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml @@ -38,6 +38,11 @@ Item { */ property int panelType: MobileShell.PanelBackground.PanelType.Drawer + /** + * The color scheme of the foreground cards (but not notification headers, which are outside of it). + */ + property var cardColorScheme: Kirigami.Theme.View + /** * The notification model for the widget. */ @@ -375,6 +380,7 @@ Item { inLockScreen: root.inLockScreen panelType: root.panelType + cardColorScheme: root.cardColorScheme model: delegateLoader.model modelIndex: delegateLoader.index diff --git a/shell/contents/lockscreen/NotificationsComponent.qml b/shell/contents/lockscreen/NotificationsComponent.qml index 4f6671c9..30a4d6ad 100644 --- a/shell/contents/lockscreen/NotificationsComponent.qml +++ b/shell/contents/lockscreen/NotificationsComponent.qml @@ -89,6 +89,8 @@ Loader { bottomPadding: Kirigami.Units.gridUnit listView.interactive: !root.scrollLock && listView.listOverflowing + cardColorScheme: Kirigami.Theme.Window + property bool requestNotificationAction: false onUnlockRequested: {