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

Notifications and Media Control Design Adjustments

Browse source 
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)
This commit is contained in:
Micah Stanley 2024-08-01 01:18:33 +00:00 committed by Devin Lin
parent 74267a8416
commit e0dd65fa26
12 changed files with 76 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml
View file

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

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

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

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

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

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

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

2
components/mobileshell/qml/widgets/notifications/NotificationBodyLabel.qml
View file

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

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

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

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

@ -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 : "")

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

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

2
components/mobileshell/qml/widgets/notifications/NotificationsUtils.js
View file

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

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

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

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

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

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

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