marcoallegretti/shift-shell
1
0
Fork 0
mirror of https://invent.kde.org/marcoa/shift-shell.git synced 2026-04-26 14:23:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

actiondrawer: Use contextually correct colors and dark background at all times

Browse source 
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}
This commit is contained in:
Devin Lin 2025-09-18 09:29:53 -04:00
parent c88c6ed9db
commit e196a91c8b
14 changed files with 48 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/mobileshell/qml/actiondrawer/private/BrightnessItem.qml
View file

@ -41,6 +41,9 @@ Item {
panelType: MobileShell.PanelBackground.PanelType.Base
flatten: root.brightnessPressedValue
Kirigami.Theme.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.Window
}
RowLayout {

4
components/mobileshell/qml/actiondrawer/private/ContentContainer.qml
View file

@ -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))
}

7
components/mobileshell/qml/actiondrawer/private/LandscapeContentContainer.qml
View file

@ -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

5
components/mobileshell/qml/actiondrawer/private/NotificationDrawer.qml
View file

@ -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

13
components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml
View file

@ -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 {

6
components/mobileshell/qml/actiondrawer/private/QuickSettingsDrawer.qml
View file

@ -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 {

1
components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml
View file

@ -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: {

2
components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml
View file

@ -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) {

6
components/mobileshell/qml/actiondrawer/private/QuickSettingsPanel.qml
View file

@ -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 {

1
components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml
View file

@ -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

3
components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml
View file

@ -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

10
components/mobileshell/qml/widgets/notifications/NotificationItem.qml
View file

@ -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

6
components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml
View file

@ -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

2
shell/contents/lockscreen/NotificationsComponent.qml
View file

@ -89,6 +89,8 @@ Loader {
bottomPadding: Kirigami.Units.gridUnit
listView.interactive: !root.scrollLock && listView.listOverflowing
cardColorScheme: Kirigami.Theme.Window
property bool requestNotificationAction: false
onUnlockRequested: {