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

MobileShell: Unify Item Background Elements

Browse source 
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)
This commit is contained in:
Micah Stanley 2025-06-23 00:16:16 +00:00 committed by Devin Lin
parent ae226561e2
commit 7e2019cb0e
19 changed files with 240 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

7
components/mobileshell/qml/actiondrawer/quicksettings/BrightnessItem.qml
View file

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

7
components/mobileshell/qml/actiondrawer/quicksettings/QuickSettings.qml
View file

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

7
components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsDrawer.qml
View file

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

30
components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsPanel.qml
View file

@ -44,32 +44,11 @@ MobileShell.BaseItem {
rightPadding: Kirigami.Units.smallSpacing * 4
bottomPadding: Kirigami.Units.smallSpacing * 4
background: Item {
opacity: brightnessPressedValue
Rectangle {
id: background
background: MobileShell.PanelBackground {
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)
}
panelType: MobileShell.PanelBackground.PanelType.Base
opacity: brightnessPressedValue
}
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 {

118
components/mobileshell/qml/components/PanelBackground.qml Normal file
View file

@ -0,0 +1,118 @@
// SPDX-FileCopyrightText: 2025 Micah Stanley <stanleymicah@proton.me>
// 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
}
}

29
components/mobileshell/qml/popups/actionbuttons/ActionButton.qml
View file

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

5
components/mobileshell/qml/popups/notifications/NotificationPopup.qml
View file

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

35
components/mobileshell/qml/popups/volumeosd/PopupCard.qml
View file

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

1
components/mobileshell/qml/popups/volumeosd/VolumeChangedPopup.qml
View file

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

12
components/mobileshell/qml/widgets/mediacontrols/BlurredBackground.qml
View file

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

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

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

78
components/mobileshell/qml/widgets/notifications/NotificationCard.qml
View file

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

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

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

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

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

5
components/mobileshell/qml/widgets/notifications/NotificationPopupItem.qml
View file

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

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

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

1
shell/contents/lockscreen/LockScreenContent.qml
View file

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

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

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