Notifications and Media Control Design Adjustments

Adjusted the colors of the notifications and media controls to help them fit in better together.

![Screenshot_20240729_045620](/uploads/4190227795db932ebead005c67510b45/Screenshot_20240729_045620.png)

![Screenshot_20240729_045637](/uploads/feb63760194ccc671d80c4279ab7b526/Screenshot_20240729_045637.png)

components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml

@@ -149,6 +149,7 @@ Item {
 
             y: isOnLargeScreen ? date.y - height + date.implicitHeight : date.y + date.implicitHeight + columnLayout.anchors.margins / 2
 
+            inActionDrawer: true
             opacity: columnLayout.opacity
 
             anchors {

components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsDrawer.qml

@@ -108,6 +108,7 @@ MobileShell.BaseItem {
             MobileShell.MediaControlsWidget {
                 id: mediaWidget
                 property real fullHeight: height + Layout.topMargin
+                inActionDrawer: true
                 Layout.fillWidth: true
                 Layout.topMargin: Kirigami.Units.smallSpacing
                 Layout.leftMargin: Kirigami.Units.largeSpacing

components/mobileshell/qml/widgets/mediacontrols/BlurredBackground.qml

@@ -12,6 +12,7 @@ Item {
 
     property string imageSource
     property bool darken: false
+    property bool inActionDrawer: false
 
     // clip corners so that the image has rounded corners
     layer.enabled: true
@@ -40,14 +41,13 @@ Item {
         // ensure text is readable
         Rectangle {
             anchors.fill: parent
-            color: Qt.rgba(0, 0, 0, root.darken ? 0.8 : 0.6)
+            color: Qt.rgba(Kirigami.Theme.backgroundColor.r * (inActionDrawer ? 0.85 : 0.95), Kirigami.Theme.backgroundColor.g * (inActionDrawer ? 0.85 : 0.95), Kirigami.Theme.backgroundColor.b * (inActionDrawer ? 0.85 : 0.95), root.darken ? 0.95 : 0.85)
         }
 
         // apply lighten, saturate and blur effect
         layer.enabled: true
         layer.effect: MultiEffect {
-            brightness: 0.2
+            brightness: 0.075
-            saturation: 1.5
 
             blurEnabled: true
             blurMax: 32

components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml

@@ -5,6 +5,7 @@
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls as QQC2
+import QtQuick.Effects
 
 import org.kde.kirigami as Kirigami
 import org.kde.plasma.components 3.0 as PC3
@@ -20,6 +21,8 @@ Item {
     id: root
     visible: sourceRepeater.count > 0
 
+    property bool inActionDrawer: false
+
     property bool detailledView: false
 
     readonly property real padding: Kirigami.Units.gridUnit
@@ -60,6 +63,32 @@ Item {
         }
     }
 
+    // shadow
+    MultiEffect {
+        anchors.fill: root
+        visible: !inActionDrawer
+        source: simpleShadow
+        blurMax: 32
+        shadowEnabled: true
+        shadowVerticalOffset: 1
+        shadowOpacity: 0.5
+        shadowColor: Qt.lighter(Kirigami.Theme.backgroundColor, 0.2)
+    }
+
+    Rectangle {
+        id: simpleShadow
+        anchors.fill: root
+        anchors.leftMargin: -1
+        anchors.rightMargin: -1
+        anchors.bottomMargin: -1
+
+        color: {
+            let darkerBackgroundColor = Qt.darker(Kirigami.Theme.backgroundColor, 1.3);
+            return Qt.rgba(darkerBackgroundColor.r, darkerBackgroundColor.g, darkerBackgroundColor.b, 0.3)
+        }
+        radius: Kirigami.Units.cornerRadius
+    }
+
     // list of app media widgets
     QQC2.SwipeView {
         id: view
@@ -126,12 +155,12 @@ Item {
 
                         background: BlurredBackground {
                             darken: mouseArea.pressed
+                            inActionDrawer: root.inActionDrawer
                             imageSource: model.artUrl
                         }
 
                         contentItem: ColumnLayout {
-                            Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
+                            Kirigami.Theme.inherit: true
-                            Kirigami.Theme.inherit: false
                             width: playerItem.width - playerItem.leftPadding - playerItem.rightPadding
                             spacing: Kirigami.Units.largeSpacing
 
@@ -166,7 +195,6 @@ Item {
                                         inputText: model.track || i18n("No media playing");
                                         textFormat: Text.PlainText
                                         font.pointSize: Kirigami.Theme.defaultFont.pointSize
-                                        color: "white"
                                     }
 
                                     // media artist name text
@@ -179,7 +207,6 @@ Item {
                                         textFormat: Text.PlainText
                                         font.pointSize: Kirigami.Theme.defaultFont.pointSize * 0.9
                                         opacity: 0.9
-                                        color: "white"
                                     }
                                 }
 
@@ -188,7 +215,6 @@ Item {
                                     icon.name: LayoutMirroring.enabled ? "media-skip-forward" : "media-skip-backward"
                                     icon.width: Kirigami.Units.iconSizes.smallMedium
                                     icon.height: Kirigami.Units.iconSizes.smallMedium
-                                    icon.color: "white"
                                     onClicked: {
                                         mpris2Source.setIndex(model.index);
                                         mpris2Source.goPrevious();
@@ -201,7 +227,6 @@ Item {
                                     icon.name: (model.playbackStatus === Mpris.PlaybackStatus.Playing) ? "media-playback-pause" : "media-playback-start"
                                     icon.width: Kirigami.Units.iconSizes.smallMedium
                                     icon.height: Kirigami.Units.iconSizes.smallMedium
-                                    icon.color: "white"
                                     onClicked: {
                                         mpris2Source.setIndex(model.index);
                                         mpris2Source.playPause();
@@ -214,7 +239,6 @@ Item {
                                     icon.name: LayoutMirroring.enabled ? "media-skip-backward" : "media-skip-forward"
                                     icon.width: Kirigami.Units.iconSizes.smallMedium
                                     icon.height: Kirigami.Units.iconSizes.smallMedium
-                                    icon.color: "white"
                                     onClicked: {
                                         mpris2Source.setIndex(model.index);
                                         mpris2Source.goNext();
@@ -235,7 +259,7 @@ Item {
                                     text: msecToString(model.position)
 
                                     font.pointSize: Kirigami.Theme.defaultFont.pointSize * 0.9
-                                    color: "white"
+                                    color: Kirigami.Theme.textColor
                                 }
 
                                 PC3.Slider {
@@ -260,7 +284,7 @@ Item {
                                     text: msecToString(model.length)
 
                                     font.pointSize: Kirigami.Theme.defaultFont.pointSize * 0.9
-                                    color: "white"
+                                    color: Kirigami.Theme.textColor
                                 }
                             }
                         }

components/mobileshell/qml/widgets/notifications/NotificationBodyLabel.qml

@@ -19,10 +19,10 @@ PlasmaComponents.Label {
     // https://bugreports.qt.io/browse/QTBUG-67007
     renderType: Screen.devicePixelRatio % 1 !== 0 ? Text.QtRendering : Text.NativeRendering
 
-    opacity: 0.6
     maximumLineCount: 3
     elide: Text.ElideRight
     wrapMode: Text.Wrap
     textFormat: TextEdit.RichText
+
 }
 

components/mobileshell/qml/widgets/notifications/NotificationCard.qml

@@ -3,6 +3,7 @@
 
 import QtQuick
 import QtQuick.Effects
+import Qt5Compat.GraphicalEffects
 
 import org.kde.kirigami 2.12 as Kirigami
 
@@ -51,11 +52,10 @@ Item {
         blurMax: 16
         shadowEnabled: true
         shadowVerticalOffset: 1
-        shadowOpacity: 0.3
+        shadowOpacity: 0.5
         shadowColor: Qt.lighter(Kirigami.Theme.backgroundColor, 0.2)
     }
 
-    // shadow
     Rectangle {
         id: simpleShadow
         visible: Math.abs(dragOffset) !== root.width
@@ -64,12 +64,17 @@ Item {
         anchors.rightMargin: -1
         anchors.bottomMargin: -1
 
-        color: Qt.darker(Kirigami.Theme.backgroundColor, 1.3)
+        color: {
+            let darkerBackgroundColor = Qt.darker(Kirigami.Theme.backgroundColor, 1.3);
+            return Qt.rgba(darkerBackgroundColor.r, darkerBackgroundColor.g, darkerBackgroundColor.b, 0.3)
+        }
         radius: Kirigami.Units.cornerRadius
     }
 
+
+
     // card
-    Rectangle {
+    Item {
         id: mainCard
         anchors.left: parent.left
         anchors.leftMargin: root.dragOffset > 0 ? root.dragOffset : 0
@@ -77,10 +82,18 @@ Item {
         anchors.rightMargin: root.dragOffset < 0 ? -root.dragOffset : 0
         anchors.top: parent.top
 
-        color: (root.tapEnabled && mouseArea.pressed) ? Qt.darker(Kirigami.Theme.backgroundColor, 1.1) : Kirigami.Theme.backgroundColor
-        radius: Kirigami.Units.cornerRadius
         implicitHeight: contentParent.implicitHeight
 
+        Rectangle {
+            anchors.fill: parent
+            color: Qt.rgba(Kirigami.Theme.backgroundColor.r * 0.95, Kirigami.Theme.backgroundColor.g * 0.95, Kirigami.Theme.backgroundColor.b * 0.95, (root.tapEnabled && mouseArea.pressed) ? 0.95 : 0.85)
+            radius: Kirigami.Units.cornerRadius
+            layer.enabled: true
+            layer.effect: MultiEffect {
+                brightness: 0.075
+            }
+        }
+
         // clip
         layer.enabled: true
 

components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml

@@ -21,6 +21,7 @@ import org.kde.coreaddons 1.0 as KCoreAddons
 RowLayout {
     id: notificationHeading
 
+    property bool inLockscreen: false
     property var applicationIconSource
     property string applicationName
     property string originName
@@ -42,8 +43,10 @@ RowLayout {
         id: applicationNameLabel
         Layout.leftMargin: Kirigami.Units.smallSpacing
         Layout.fillWidth: true
-        opacity: 0.6
+
-        textFormat: Text.PlainText
+        color: inLockscreen ? "white" : Kirigami.Theme.textColor
+
+        opacity: 0.75
         elide: Text.ElideLeft
         font.bold: true
         text: notificationHeading.applicationName + (notificationHeading.originName ? " · " + notificationHeading.originName : "")

components/mobileshell/qml/widgets/notifications/NotificationItem.qml

@@ -24,6 +24,8 @@ BaseNotificationItem {
     id: notificationItem
     implicitHeight: mainCard.implicitHeight + mainCard.anchors.topMargin + notificationHeading.height
 
+    property bool inLockscreen: false
+
     // notification heading for groups with one element
     NotificationGroupHeader {
         id: notificationHeading
@@ -31,6 +33,8 @@ BaseNotificationItem {
         anchors.left: parent.left
         anchors.right: parent.right
 
+        inLockscreen: root.inLockscreen
+
         Kirigami.Theme.colorSet: Kirigami.Theme.Header
         Kirigami.Theme.inherit: false
 
@@ -59,6 +63,7 @@ BaseNotificationItem {
             id: column
             spacing: 0
 
+
             // notification summary row
             RowLayout {
                 Layout.fillWidth: true
@@ -72,6 +77,7 @@ BaseNotificationItem {
                     maximumLineCount: 3
                     wrapMode: Text.WordWrap
                     elide: Text.ElideRight
+                    font.pointSize: Kirigami.Theme.defaultFont.pointSize
                     text: MobileShell.NotificationsUtils.determineNotificationHeadingText(notificationItem)
                     visible: text !== ""
                     font.weight: Font.DemiBold
@@ -94,6 +100,7 @@ BaseNotificationItem {
                 Layout.fillWidth: true
                 spacing: Kirigami.Units.smallSpacing
 
+
                 // notification text
                 NotificationBodyLabel {
                     id: bodyLabel

components/mobileshell/qml/widgets/notifications/NotificationsUtils.js

@@ -41,7 +41,7 @@ function generateNotificationHeaderAgoText(time, jobState) {
 
     const deltaMinutes = Math.floor((Date.now() - time.getTime()) / 1000 / 60);
     if (deltaMinutes < 1) {
-        return "";
+        return i18n("now");
     }
 
     // Received less than an hour ago, show relative minutes

components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml

@@ -27,6 +27,8 @@ import org.kde.notificationmanager as NotificationManager
 Item {
     id: root
 
+    property bool inLockscreen: false
+
     /**
      * The notification model for the widget.
      */
@@ -270,6 +272,8 @@ Item {
                         width: parent.width
                         height: implicitHeight
 
+                        inLockscreen: root.inLockscreen
+
                         model: delegateLoader.model
                         modelIndex: delegateLoader.index
                         notificationsModel: root.historyModel

shell/contents/lockscreen/LockScreenContent.qml

@@ -90,15 +90,6 @@ Item {
             Layout.maximumWidth: Kirigami.Units.gridUnit * 25
             Layout.leftMargin: root.isVertical ? Kirigami.Units.gridUnit : 0
             Layout.rightMargin: root.isVertical ? Kirigami.Units.gridUnit : 0
-
-            layer.enabled: true
-            layer.effect: MultiEffect {
-                blurMax: 16
-                shadowEnabled: true
-                shadowVerticalOffset: 1
-                shadowOpacity: 0.5
-                shadowColor: Qt.lighter(Kirigami.Theme.backgroundColor, 0.1)
-            }
         }
     }
 

shell/contents/lockscreen/NotificationsComponent.qml

@@ -73,6 +73,7 @@ Loader {
                 actionsRequireUnlock: true
                 historyModel: root.notificationsModel
                 notificationSettings: root.notificationSettings
+                inLockscreen: true
 
                 property bool requestNotificationAction: false