From e0dd65fa26237096966796dfb3a724da1dfd20a6 Mon Sep 17 00:00:00 2001 From: Micah Stanley Date: Thu, 1 Aug 2024 01:18:33 +0000 Subject: [PATCH] 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) --- .../LandscapeContentContainer.qml | 1 + .../quicksettings/QuickSettingsDrawer.qml | 1 + .../mediacontrols/BlurredBackground.qml | 6 +-- .../mediacontrols/MediaControlsWidget.qml | 42 +++++++++++++++---- .../notifications/NotificationBodyLabel.qml | 2 +- .../notifications/NotificationCard.qml | 25 ++++++++--- .../notifications/NotificationGroupHeader.qml | 7 +++- .../notifications/NotificationItem.qml | 7 ++++ .../notifications/NotificationsUtils.js | 2 +- .../notifications/NotificationsWidget.qml | 4 ++ .../contents/lockscreen/LockScreenContent.qml | 9 ---- .../lockscreen/NotificationsComponent.qml | 1 + 12 files changed, 76 insertions(+), 31 deletions(-) diff --git a/components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml b/components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml index 38beeaaf..905bca66 100644 --- a/components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml +++ b/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 { diff --git a/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsDrawer.qml b/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsDrawer.qml index 01504f07..39a51190 100644 --- a/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsDrawer.qml +++ b/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 diff --git a/components/mobileshell/qml/widgets/mediacontrols/BlurredBackground.qml b/components/mobileshell/qml/widgets/mediacontrols/BlurredBackground.qml index 6d6dca01..98e90c72 100644 --- a/components/mobileshell/qml/widgets/mediacontrols/BlurredBackground.qml +++ b/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 - saturation: 1.5 + brightness: 0.075 blurEnabled: true blurMax: 32 diff --git a/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml b/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml index 9eabeace..45197aa3 100644 --- a/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml +++ b/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: false + Kirigami.Theme.inherit: true 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 } } } diff --git a/components/mobileshell/qml/widgets/notifications/NotificationBodyLabel.qml b/components/mobileshell/qml/widgets/notifications/NotificationBodyLabel.qml index bc8bbad3..819275e8 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationBodyLabel.qml +++ b/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 + } diff --git a/components/mobileshell/qml/widgets/notifications/NotificationCard.qml b/components/mobileshell/qml/widgets/notifications/NotificationCard.qml index 5d9b6161..dc82f8d3 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationCard.qml +++ b/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 diff --git a/components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml b/components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml index 4d10aa40..334da1a3 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml +++ b/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 : "") diff --git a/components/mobileshell/qml/widgets/notifications/NotificationItem.qml b/components/mobileshell/qml/widgets/notifications/NotificationItem.qml index 6af06737..0eb03c7f 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationItem.qml +++ b/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 diff --git a/components/mobileshell/qml/widgets/notifications/NotificationsUtils.js b/components/mobileshell/qml/widgets/notifications/NotificationsUtils.js index acdc6d04..36a21fa4 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationsUtils.js +++ b/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 diff --git a/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml b/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml index 23bd4c84..0e32a7cf 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml +++ b/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 diff --git a/shell/contents/lockscreen/LockScreenContent.qml b/shell/contents/lockscreen/LockScreenContent.qml index d325e2df..a76f724f 100644 --- a/shell/contents/lockscreen/LockScreenContent.qml +++ b/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) - } } } diff --git a/shell/contents/lockscreen/NotificationsComponent.qml b/shell/contents/lockscreen/NotificationsComponent.qml index 7e900058..e5992220 100644 --- a/shell/contents/lockscreen/NotificationsComponent.qml +++ b/shell/contents/lockscreen/NotificationsComponent.qml @@ -73,6 +73,7 @@ Loader { actionsRequireUnlock: true historyModel: root.notificationsModel notificationSettings: root.notificationSettings + inLockscreen: true property bool requestNotificationAction: false