From 7e2019cb0ed1317b349667e0bf717ae8a5ed59a1 Mon Sep 17 00:00:00 2001 From: Micah Stanley Date: Mon, 23 Jun 2025 00:16:16 +0000 Subject: [PATCH] MobileShell: Unify Item Background Elements We so far have been recreating the background elements for all the item throughout the shell. This merge request simplifies this by unifying these elements into a single component, making is easier to keep things at a consistent design while also being able to adjust things when needed in the future. Per request, I tried to keep thing looking mostly the same as before. The first picture is what the action drawer looks like now, the one after is with these changes. ![Screenshot_20250621_154201](/uploads/7bd5129d942c8fbc3706dd1728b3a1dd/Screenshot_20250621_154201.png) ![Screenshot_20250621_155520](/uploads/9d2e925c9483579dec765813465e4d2d/Screenshot_20250621_155520.png) --- .../qml/actiondrawer/ContentContainer.qml | 4 +- .../quicksettings/BrightnessItem.qml | 7 +- .../quicksettings/QuickSettings.qml | 7 +- .../quicksettings/QuickSettingsDrawer.qml | 7 +- .../quicksettings/QuickSettingsPanel.qml | 32 +---- .../qml/components/PanelBackground.qml | 118 ++++++++++++++++++ .../qml/popups/actionbuttons/ActionButton.qml | 29 +---- .../notifications/NotificationPopup.qml | 5 +- .../qml/popups/volumeosd/PopupCard.qml | 35 ++---- .../popups/volumeosd/VolumeChangedPopup.qml | 1 + .../mediacontrols/BlurredBackground.qml | 12 +- .../mediacontrols/MediaControlsWidget.qml | 34 +---- .../notifications/NotificationCard.qml | 78 ++++++------ .../notifications/NotificationGroupHeader.qml | 4 +- .../notifications/NotificationItem.qml | 7 +- .../notifications/NotificationPopupItem.qml | 5 +- .../notifications/NotificationsWidget.qml | 21 +++- .../contents/lockscreen/LockScreenContent.qml | 1 + .../lockscreen/NotificationsComponent.qml | 3 +- 19 files changed, 240 insertions(+), 170 deletions(-) create mode 100644 components/mobileshell/qml/components/PanelBackground.qml diff --git a/components/mobileshell/qml/actiondrawer/ContentContainer.qml b/components/mobileshell/qml/actiondrawer/ContentContainer.qml index e5c1af74..7826014e 100644 --- a/components/mobileshell/qml/actiondrawer/ContentContainer.qml +++ b/components/mobileshell/qml/actiondrawer/ContentContainer.qml @@ -105,7 +105,7 @@ Item { opacity: Math.max(0, Math.min(root.brightnessPressedValue, actionDrawer.offsetResistance / root.minimizedQuickSettingsOffset)) anchors { - topMargin: notificationDrawer.height + topMargin: notificationDrawer.height + 1 leftMargin: actionDrawer.mode == ActionDrawer.Portrait ? 0 : 10 rightMargin: actionDrawer.mode == ActionDrawer.Portrait ? 0 : notificationDrawer.notificationWidget.anchors.rightMargin + Kirigami.Units.gridUnit - notificationDrawer.anchors.leftMargin + 370 top: parent.top @@ -277,8 +277,6 @@ Item { property MobileShell.MediaControlsWidget mediaControlsWidget: MobileShell.MediaControlsWidget { id: mediaWidget - inActionDrawer: root.actionDrawer.mode == ActionDrawer.Portrait - opacity: brightnessPressedValue } } diff --git a/components/mobileshell/qml/actiondrawer/quicksettings/BrightnessItem.qml b/components/mobileshell/qml/actiondrawer/quicksettings/BrightnessItem.qml index 9ff21e3b..5b265c0b 100644 --- a/components/mobileshell/qml/actiondrawer/quicksettings/BrightnessItem.qml +++ b/components/mobileshell/qml/actiondrawer/quicksettings/BrightnessItem.qml @@ -13,6 +13,7 @@ import org.kde.kirigami 2.20 as Kirigami import org.kde.plasma.core as PlasmaCore import org.kde.plasma.components 3.0 as PC3 import org.kde.plasma.private.mobileshell.screenbrightnessplugin as ScreenBrightness +import org.kde.plasma.private.mobileshell as MobileShell Item { id: root @@ -31,15 +32,15 @@ Item { id: screenBrightness } - Rectangle { + MobileShell.PanelBackground { anchors.fill: parent anchors.leftMargin: -Kirigami.Units.smallSpacing anchors.rightMargin: -Kirigami.Units.smallSpacing anchors.topMargin: -Kirigami.Units.smallSpacing * 2 anchors.bottomMargin: -Kirigami.Units.smallSpacing * 2 - color: Kirigami.Theme.backgroundColor - radius: Kirigami.Units.cornerRadius + panelType: MobileShell.PanelBackground.PanelType.Base + flatten: root.brightnessPressedValue } RowLayout { diff --git a/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettings.qml b/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettings.qml index 460747b3..ef396930 100644 --- a/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettings.qml +++ b/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettings.qml @@ -20,7 +20,9 @@ import org.kde.kirigami 2.20 as Kirigami */ Item { id: root - clip: true + // to prevent clipping off the shadows form the BrightnessItem when the rest of the action panel view + // is transparent, we stop clipping the base view when fullViewProgress is not less then 1 + clip: fullViewProgress < 1 required property var actionDrawer @@ -124,6 +126,9 @@ Item { SwipeView { id: swipeView + // we need to clip this view here to prevent the other quick settings pages from being visable + // when fullViewProgress is not less then 1 and the base view is no longer being clipped + clip: true Layout.fillWidth: true Layout.preferredHeight: rowCount * rowHeight diff --git a/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsDrawer.qml b/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsDrawer.qml index 1e7d2833..01753bc3 100644 --- a/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsDrawer.qml +++ b/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsDrawer.qml @@ -39,7 +39,7 @@ MobileShell.BaseItem { /** * Height of just the QuickSettings component in minimized mode. */ - readonly property real minimizedQuickSettingsHeight: quickSettings.minimizedRowHeight + Kirigami.Units.gridUnit + readonly property real minimizedQuickSettingsHeight: quickSettings.minimizedRowHeight + Kirigami.Units.gridUnit - Kirigami.Units.largeSpacing /** * Progress of showing the full quick settings view from pinned. @@ -60,11 +60,12 @@ MobileShell.BaseItem { background: Item { opacity: brightnessPressedValue - Rectangle { + MobileShell.PanelBackground { id: background anchors.fill: parent anchors.bottomMargin: shadow.height - color: Kirigami.Theme.backgroundColor + panelType: MobileShell.PanelBackground.PanelType.Flat + radius: 0 } Rectangle { diff --git a/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsPanel.qml b/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsPanel.qml index e141fc6a..508ae7bf 100644 --- a/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsPanel.qml +++ b/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsPanel.qml @@ -44,32 +44,11 @@ MobileShell.BaseItem { rightPadding: Kirigami.Units.smallSpacing * 4 bottomPadding: Kirigami.Units.smallSpacing * 4 - background: Item { + background: MobileShell.PanelBackground { + anchors.fill: parent + anchors.margins: Kirigami.Units.largeSpacing + panelType: MobileShell.PanelBackground.PanelType.Base opacity: brightnessPressedValue - - Rectangle { - id: background - anchors.fill: parent - anchors.margins: Kirigami.Units.largeSpacing - color: Kirigami.Theme.backgroundColor - visible: false - - radius: Kirigami.Units.cornerRadius - - // Only show border on dark background - border.color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.textColor, Kirigami.Theme.backgroundColor, 0.9) - border.width: (Kirigami.ColorUtils.brightnessForColor(color)) === Kirigami.ColorUtils.Dark ? 1 : 0 - border.pixelAligned: false - } - - MultiEffect { - anchors.fill: background - source: background - blurMax: 16 - shadowEnabled: true - shadowOpacity: 0.5 - shadowColor: Qt.darker(Kirigami.Theme.backgroundColor, 1.9) - } } contentItem: Item { @@ -107,7 +86,8 @@ MobileShell.BaseItem { Layout.maximumWidth: column.width } - Item { Layout.fillHeight: true } + // add extra space here to prevent the bottom handle from overlapping with the BrightnessItem + Item { Layout.fillHeight: true; height: Kirigami.Units.largeSpacing } } Handle { diff --git a/components/mobileshell/qml/components/PanelBackground.qml b/components/mobileshell/qml/components/PanelBackground.qml new file mode 100644 index 00000000..5361d441 --- /dev/null +++ b/components/mobileshell/qml/components/PanelBackground.qml @@ -0,0 +1,118 @@ +// SPDX-FileCopyrightText: 2025 Micah Stanley +// SPDX-License-Identifier: GPL-2.0-or-later + +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import org.kde.kirigami 2.12 as Kirigami +import QtQuick.Effects + +Item { + id: root + + property int panelType: PanelBackground.PanelType.Base + property real flatten: 0 // flattens out the border and shadow effects + property bool pressed: false // darkens the panel when true + property bool animate: false // animate panel color changes + + enum PanelType { + Flat, // the base rectangle with no effects + Base, // the base panel with some effects + Stacked, // for being stacked on top of the base panel + Drawer, // for uses in drawers, scroll containers, typically when a translucent component is behind them + Wallpaper, // for uses when the panel is right on top of the user's wallpaper + Popup // for uses as a popup, like for the volume and notifition popups. + } + + // whether to use a shadow effect + readonly property bool shadow: panelType === PanelBackground.PanelType.Base || + panelType === PanelBackground.PanelType.Stacked || + panelType === PanelBackground.PanelType.Drawer || + panelType === PanelBackground.PanelType.Popup || + panelType === PanelBackground.PanelType.Wallpaper + // whether to use the complex shadow effect - note that this uses more perfomance + readonly property bool complexShadow: shadow && + (panelType === PanelBackground.PanelType.Base || + panelType === PanelBackground.PanelType.Drawer || + panelType === PanelBackground.PanelType.Popup || + panelType === PanelBackground.PanelType.Wallpaper) + // whether the panel should have a border when using a dark theme + readonly property bool border: panelType === PanelBackground.PanelType.Base || + panelType === PanelBackground.PanelType.Stacked + // whether to force the panel to have a border even when using a light theme + readonly property bool forceBorder: border && + (panelType === PanelBackground.PanelType.Stacked) + // whether the panel is translucent border - note that border cannot be used when translucent + readonly property bool translucent: panelType === PanelBackground.PanelType.Popup || + panelType === PanelBackground.PanelType.Wallpaper + // adjust color depending on panel type + property color panelColor: { + let tintPercent + if (panelType === PanelBackground.PanelType.Popup) { + tintPercent = 0.035 + } else if (panelType === PanelBackground.PanelType.Base || panelType === PanelBackground.PanelType.Stacked || panelType === PanelBackground.PanelType.Flat) { + tintPercent = 0 + } else { + tintPercent = 0.06 + } + + return Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, "white", tintPercent) + } + // in some circumstances, panels can change there type + // for example, popup notifition when opening the popup notifition drawer + // in these incidents, we animate the color to prevent harsh transitions + Behavior on panelColor { + ColorAnimation { + duration: animate ? Kirigami.Units.veryLongDuration * 1.5 : 0 + easing.type: Easing.OutExpo + } + } + + // corner radius of the panel + property int radius: Kirigami.Units.cornerRadius + + Kirigami.Theme.colorSet: Kirigami.Theme.View + Kirigami.Theme.inherit: false + + // very simple shadow for performance + Rectangle { + id: simpleShadow + anchors.top: root.top + anchors.topMargin: 1 + anchors.left: root.left + anchors.right: root.right + height: root.height + + visible: root.shadow && root.flatten < 1 + radius: root.radius + + color: Qt.rgba(0, 0, 0, (root.complexShadow ? 0.025 : 0.15) * (1 - root.flatten)) + opacity: root.complexShadow ? 0 : 1 + } + + // simple-ish expanded shadow for performance + MultiEffect { + anchors.fill: background + source: background + visible: root.complexShadow && root.flatten < 1 + blurMax: 16 + + shadowEnabled: root.complexShadow + shadowVerticalOffset: 1 + shadowOpacity: (panelType === PanelBackground.PanelType.Base ? 0.5 : 0.2) * (1 - root.flatten) + shadowColor: "black" + } + + Rectangle { + id: background + anchors.fill: root + + color: Qt.darker(Qt.rgba(root.panelColor.r, root.panelColor.g, root.panelColor.b, root.translucent ? 0.9 : 1), root.pressed ? 3.5 : 1) + radius: root.radius + + // Only show border when using a dark background and when the border property is set to true + readonly property color borderColor: Qt.darker(Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.textColor, root.panelColor, 0.9), root.pressed ? 3.5 : 1) + border.color: Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 1 - root.flatten) + border.width: root.border && root.flatten < 1 && ((Kirigami.ColorUtils.brightnessForColor(color)) === Kirigami.ColorUtils.Dark || root.forceBorder) ? 1 : 0 + border.pixelAligned: false + } +} diff --git a/components/mobileshell/qml/popups/actionbuttons/ActionButton.qml b/components/mobileshell/qml/popups/actionbuttons/ActionButton.qml index 6b33331c..60a5bd2b 100644 --- a/components/mobileshell/qml/popups/actionbuttons/ActionButton.qml +++ b/components/mobileshell/qml/popups/actionbuttons/ActionButton.qml @@ -124,37 +124,12 @@ Window { yScale: content.scale } - MultiEffect { + MobileShell.PanelBackground { anchors.fill: parent - source: simpleShadow - blurMax: 16 - shadowEnabled: true - shadowVerticalOffset: 1 - shadowOpacity: 0.85 - shadowColor: Qt.lighter(Kirigami.Theme.backgroundColor, 0.2) - } - - Rectangle { - id: simpleShadow - anchors.fill: parent - 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.5) - } + panelType: MobileShell.PanelBackground.PanelType.Popup radius: root.size } - Rectangle { - anchors.fill: parent - color: Qt.lighter(Kirigami.Theme.backgroundColor, 1.5) - radius: root.size - opacity: 0.85 - } - Controls.AbstractButton { id: button anchors.fill: parent diff --git a/components/mobileshell/qml/popups/notifications/NotificationPopup.qml b/components/mobileshell/qml/popups/notifications/NotificationPopup.qml index 76958487..e7aad164 100644 --- a/components/mobileshell/qml/popups/notifications/NotificationPopup.qml +++ b/components/mobileshell/qml/popups/notifications/NotificationPopup.qml @@ -29,7 +29,7 @@ Item { property real openOffset // calculate the position needed to at when the expanded drawer is active - readonly property real fullOpenOffset: popupDrawerOpened ? aboveNotificationFullOffset + aboveNotificationHeight + Kirigami.Units.gridUnit : 0 + readonly property real fullOpenOffset: popupDrawerOpened ? aboveNotificationFullOffset + aboveNotificationHeight + Kirigami.Units.largeSpacing : 0 property real aboveNotificationFullOffset: 0 property int aboveNotificationHeight: 0 @@ -324,6 +324,9 @@ Item { notificationsModel: notificationPopup.notificationsModel notificationsModelType: notificationPopup.notificationsModelType timeSource: notificationPopup.timeDataSource + panelType: notificationPopup.popupDrawerOpened ? + MobileShell.PanelBackground.PanelType.Drawer : + MobileShell.PanelBackground.PanelType.Popup currentPopupHeight: popupNotifications.currentPopupHeight diff --git a/components/mobileshell/qml/popups/volumeosd/PopupCard.qml b/components/mobileshell/qml/popups/volumeosd/PopupCard.qml index bd88df41..32c1bd6d 100644 --- a/components/mobileshell/qml/popups/volumeosd/PopupCard.qml +++ b/components/mobileshell/qml/popups/volumeosd/PopupCard.qml @@ -16,6 +16,7 @@ import Qt5Compat.GraphicalEffects import org.kde.kirigami 2.20 as Kirigami import org.kde.ksvg 1.0 as KSvg import org.kde.plasma.components 3.0 as PlasmaComponents +import org.kde.plasma.private.mobileshell as MobileShell // capture presses on the audio applet so it doesn't close the overlay Controls.Control { @@ -23,37 +24,15 @@ Controls.Control { implicitWidth: Math.min(Kirigami.Units.gridUnit * 20, Screen.width - Kirigami.Units.gridUnit * 2) padding: Kirigami.Units.smallSpacing * 2 + property bool popupBackground: false + Kirigami.Theme.colorSet: Kirigami.Theme.View Kirigami.Theme.inherit: false - MultiEffect { + MobileShell.PanelBackground { anchors.fill: parent - source: simpleShadow - blurMax: 16 - shadowEnabled: true - shadowVerticalOffset: 1 - shadowOpacity: 0.85 - shadowColor: Qt.lighter(Kirigami.Theme.backgroundColor, 0.2) - } - - Rectangle { - id: simpleShadow - anchors.fill: parent - 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.5) - } - radius: Kirigami.Units.cornerRadius - } - - Rectangle { - anchors.fill: parent - color: Qt.lighter(Kirigami.Theme.backgroundColor, 1.5) - opacity: 0.85 - radius: Kirigami.Units.cornerRadius + panelType: content.popupBackground ? + MobileShell.PanelBackground.PanelType.Popup : + MobileShell.PanelBackground.PanelType.Drawer } } diff --git a/components/mobileshell/qml/popups/volumeosd/VolumeChangedPopup.qml b/components/mobileshell/qml/popups/volumeosd/VolumeChangedPopup.qml index e3c4dc8d..c6278913 100644 --- a/components/mobileshell/qml/popups/volumeosd/VolumeChangedPopup.qml +++ b/components/mobileshell/qml/popups/volumeosd/VolumeChangedPopup.qml @@ -136,6 +136,7 @@ Window { id: osd Layout.alignment: Qt.AlignHCenter implicitWidth: Math.min(Kirigami.Units.gridUnit * 15, Screen.width - Kirigami.Units.gridUnit * 2) + popupBackground: true transform: [ Translate { diff --git a/components/mobileshell/qml/widgets/mediacontrols/BlurredBackground.qml b/components/mobileshell/qml/widgets/mediacontrols/BlurredBackground.qml index 98e90c72..bbaf882e 100644 --- a/components/mobileshell/qml/widgets/mediacontrols/BlurredBackground.qml +++ b/components/mobileshell/qml/widgets/mediacontrols/BlurredBackground.qml @@ -30,6 +30,13 @@ Item { } } + // darken background when pressed + Rectangle { + anchors.fill: parent + color: "black" + opacity: root.darken ? 0.05 : 0 + } + Image { id: img source: root.imageSource @@ -41,9 +48,12 @@ Item { // ensure text is readable Rectangle { anchors.fill: parent - 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) + color: Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.2) + visible: img.progress } + opacity: 0.1 + // apply lighten, saturate and blur effect layer.enabled: true layer.effect: MultiEffect { diff --git a/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml b/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml index 8923ffc6..9f659e8c 100644 --- a/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml +++ b/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml @@ -21,8 +21,7 @@ Item { id: root visible: sourceRepeater.count > 0 - property bool inActionDrawer: false - + property int panelType: MobileShell.PanelBackground.PanelType.Drawer property bool detailledView: false readonly property real padding: Kirigami.Units.gridUnit @@ -34,8 +33,8 @@ Item { Behavior on implicitHeight { NumberAnimation { - duration: implicitHeight == 0 ? 0 : Kirigami.Units.shortDuration - easing.type: Easing.InOutQuad + duration: implicitHeight == 0 ? 0 : Kirigami.Units.longDuration + easing.type: Easing.OutQuart } } @@ -63,30 +62,9 @@ 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 + MobileShell.PanelBackground { + anchors.fill: parent + panelType: root.panelType } // list of app media widgets diff --git a/components/mobileshell/qml/widgets/notifications/NotificationCard.qml b/components/mobileshell/qml/widgets/notifications/NotificationCard.qml index beee86bd..87b88b46 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationCard.qml +++ b/components/mobileshell/qml/widgets/notifications/NotificationCard.qml @@ -9,26 +9,64 @@ import Qt5Compat.GraphicalEffects import org.kde.kirigami 2.12 as Kirigami import org.kde.plasma.components 3.0 as PlasmaComponents +import org.kde.plasma.private.mobileshell as MobileShell Item { id: root + /** + * The content that goes inside the notification card + */ default property Item contentItem + /** + * The panel background type for this notification. + */ + property int panelType: MobileShell.PanelBackground.PanelType.Drawer + + /** + * Whether this is a popup notification. + */ property bool popupNotification: false + /** + * Whether this popup notification is tucked underneath the current popup. + */ property bool inPopupDrawer: false + /** + * Whether this notification is within the lockscreen. + */ + property bool inLockScreen: false + + /** + * The current notification popup height. + */ property int currentPopupHeight: 0 + /** + * The remaining time before the notification popup is dismissed. + */ property real remainingTimeProgress: 1 + /** + * Whether the timer for dismissing the notification popup is running. + */ property bool closeTimerRunning: false + /** + * Whether tapping on this notification is enabled. + */ property bool tapEnabled: false + /** + * Whether swipping on this notification is enabled. + */ property bool swipeGestureEnabled: false + /** + * The current drag offset for this notification. + */ property real dragOffset: 0 signal tapped() @@ -57,35 +95,12 @@ Item { } } - // shadow - MultiEffect { + MobileShell.PanelBackground { anchors.fill: mainCard - visible: Math.abs(dragOffset) !== root.width - source: simpleShadow - blurMax: 16 - shadowEnabled: true - shadowVerticalOffset: 1 - shadowOpacity: popupNotification ? 0.85 : 0.5 - shadowColor: Qt.lighter(Kirigami.Theme.backgroundColor, 0.2) + animate: true + panelType: root.panelType } - Rectangle { - id: simpleShadow - visible: Math.abs(dragOffset) !== root.width - anchors.fill: mainCard - 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, popupNotification ? 0.5 : 0.3) - } - radius: Kirigami.Units.cornerRadius - } - - - // card Item { id: mainCard @@ -103,17 +118,6 @@ Item { } } - Rectangle { - anchors.fill: parent - color: popupNotification ? Qt.lighter(Kirigami.Theme.backgroundColor, 1.5) : 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) - opacity: popupNotification ? 0.85 : 1 - radius: Kirigami.Units.cornerRadius - layer.enabled: popupNotification ? false : true - layer.effect: MultiEffect { - brightness: 0.075 - } - } - ProgressBar { id: progress anchors.left: parent.left diff --git a/components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml b/components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml index 334da1a3..5dc95807 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml +++ b/components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml @@ -21,7 +21,7 @@ import org.kde.coreaddons 1.0 as KCoreAddons RowLayout { id: notificationHeading - property bool inLockscreen: false + property bool inLockScreen: false property var applicationIconSource property string applicationName property string originName @@ -44,7 +44,7 @@ RowLayout { Layout.leftMargin: Kirigami.Units.smallSpacing Layout.fillWidth: true - color: inLockscreen ? "white" : Kirigami.Theme.textColor + color: inLockScreen ? "white" : 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 5a94b764..36585489 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationItem.qml +++ b/components/mobileshell/qml/widgets/notifications/NotificationItem.qml @@ -24,7 +24,8 @@ BaseNotificationItem { id: notificationItem implicitHeight: mainCard.implicitHeight + mainCard.anchors.topMargin + notificationHeading.height - property bool inLockscreen: false + property bool inLockScreen: false + property int panelType: MobileShell.PanelBackground.PanelType.Drawer signal dragStart() signal dragEnd() @@ -37,7 +38,7 @@ BaseNotificationItem { anchors.left: parent.left anchors.right: parent.right - inLockscreen: root.inLockscreen + inLockScreen: notificationItem.inLockScreen Kirigami.Theme.colorSet: Kirigami.Theme.Header Kirigami.Theme.inherit: false @@ -62,6 +63,8 @@ BaseNotificationItem { onTapped: notificationItem.actionInvoked("default"); swipeGestureEnabled: notificationItem.closable onDismissRequested: notificationItem.close(); + inLockScreen: notificationItem.inLockScreen + panelType: notificationItem.panelType onDragStart: notificationItem.dragStart() onDragEnd: notificationItem.dragEnd() diff --git a/components/mobileshell/qml/widgets/notifications/NotificationPopupItem.qml b/components/mobileshell/qml/widgets/notifications/NotificationPopupItem.qml index cc48027e..64fe94c3 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationPopupItem.qml +++ b/components/mobileshell/qml/widgets/notifications/NotificationPopupItem.qml @@ -29,7 +29,8 @@ BaseNotificationItem { property real remainingTimeProgress: 1 property bool closeTimerRunning: false - property bool inLockscreen: false + property bool inLockScreen: false + property int panelType: MobileShell.PanelBackground.PanelType.Drawer signal dragStart() signal dragEnd() @@ -48,6 +49,8 @@ BaseNotificationItem { currentPopupHeight: notificationItem.currentPopupHeight remainingTimeProgress: notificationItem.remainingTimeProgress closeTimerRunning: notificationItem.closeTimerRunning + inLockScreen: notificationItem.inLockScreen + panelType: notificationItem.panelType tapEnabled: notificationItem.hasDefaultAction onTapped: notificationItem.actionInvoked("default"); swipeGestureEnabled: notificationItem.closable diff --git a/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml b/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml index ce127eec..bfc48068 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml +++ b/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml @@ -27,7 +27,15 @@ import org.kde.notificationmanager as NotificationManager Item { id: root - property bool inLockscreen: false + /** + * If the notification is in the lockscreen. + */ + property bool inLockScreen: false + + /** + * The panel background type for all the notifications within the widget. + */ + property int panelType: MobileShell.PanelBackground.PanelType.Drawer /** * The notification model for the widget. @@ -165,7 +173,7 @@ Item { readonly property int listHeight: contentItem.childrenRect.height bottomMargin: spacing - height: count === 0 ? (root.topPadding + (showHeader ? root.header.height + listHeight : 0)) : (listOverflowing ? root.height : listHeight + bottomMargin) + height: count === 0 ? (root.topPadding + (showHeader ? root.header.height + listHeight + Kirigami.Units.largeSpacing * 2 : 0)) : (listOverflowing ? root.height : listHeight + bottomMargin) anchors { top: parent.top @@ -192,7 +200,7 @@ Item { id: headerComponentProxy contentItem: showHeader ? root.header : null - y: root.topPadding - Kirigami.Units.largeSpacing + y: root.topPadding + Kirigami.Units.largeSpacing width: parent.width - Kirigami.Units.gridUnit * 2 anchors.left: parent.left @@ -309,7 +317,7 @@ Item { Item { id: headerSpace width: parent.width - height: index == 0 ? root.topPadding + (showHeader ? root.header.height : 0) : 0 + height: index == 0 ? root.topPadding + (showHeader && root.header.visible ? root.header.height + Kirigami.Units.largeSpacing * 2 : 0) : 0 visible: index == 0 } @@ -333,7 +341,7 @@ Item { Item { id: headerSpace width: parent.width - height: index == 0 ? root.topPadding + (showHeader ? root.header.height : 0) : 0 + height: index == 0 ? root.topPadding + (showHeader && root.header.visible ? root.header.height + Kirigami.Units.largeSpacing * 2 : 0) : 0 visible: index == 0 } @@ -342,7 +350,8 @@ Item { width: parent.width height: implicitHeight - inLockscreen: root.inLockscreen + inLockScreen: root.inLockScreen + panelType: root.panelType model: delegateLoader.model modelIndex: delegateLoader.index diff --git a/shell/contents/lockscreen/LockScreenContent.qml b/shell/contents/lockscreen/LockScreenContent.qml index dd689242..8e5d04a2 100644 --- a/shell/contents/lockscreen/LockScreenContent.qml +++ b/shell/contents/lockscreen/LockScreenContent.qml @@ -104,6 +104,7 @@ Item { Layout.maximumWidth: Kirigami.Units.gridUnit * 25 Layout.leftMargin: root.isVertical ? Kirigami.Units.gridUnit : 0 Layout.rightMargin: root.isVertical ? Kirigami.Units.gridUnit : 0 + panelType: MobileShell.PanelBackground.PanelType.Wallpaper } } diff --git a/shell/contents/lockscreen/NotificationsComponent.qml b/shell/contents/lockscreen/NotificationsComponent.qml index 09fa51ea..4f6671c9 100644 --- a/shell/contents/lockscreen/NotificationsComponent.qml +++ b/shell/contents/lockscreen/NotificationsComponent.qml @@ -83,7 +83,8 @@ Loader { actionsRequireUnlock: true historyModel: root.notificationsModel notificationSettings: root.notificationSettings - inLockscreen: true + panelType: MobileShell.PanelBackground.PanelType.Wallpaper + inLockScreen: true topPadding: root.topPadding // Kirigami.Units.gridUnit bottomPadding: Kirigami.Units.gridUnit listView.interactive: !root.scrollLock && listView.listOverflowing