fix notification styling

This commit is contained in:
lucy 2026-05-28 20:36:51 +02:00
commit b42425ca56
2 changed files with 80 additions and 78 deletions

View file

@ -0,0 +1 @@
import Quickshell

View file

@ -7,85 +7,86 @@ import qs.settings
import qs.widgets import qs.widgets
WrapperRectangle { WrapperRectangle {
id: root id: root
required property var notification required property var notification
required property ShellScreen nScreen required property ShellScreen nScreen
implicitWidth: nScreen.width / 6 implicitWidth: nScreen.width / 6
implicitHeight: 100 implicitHeight: 100
radius: Config.rounding radius: Config.rounding
anchors.right: parent?.right anchors.right: parent?.right
color: Colors.base01 color: Colors.base01
clip: true clip: true
Timer { Timer {
id: dismissTimer id: dismissTimer
running: true running: true
interval: 5000 interval: 5000
repeat: false repeat: false
onTriggered: root.notification?.dismiss() onTriggered: root.notification?.dismiss()
} }
child: WrapperMouseArea { child: WrapperMouseArea {
id: mouseHandler id: mouseHandler
child: RowLayout { child: RowLayout {
spacing: 10 spacing: 10
IconImage { IconImage {
id: appIcon id: appIcon
Layout.leftMargin: 8 Layout.leftMargin: 8
visible: root.notification?.image ? true : false visible: root.notification?.image ? true : false
source: root.notification?.image ? root.notification.image : '' source: root.notification?.image ? root.notification.image : ''
implicitSize: 64 implicitSize: 64
} }
ColumnLayout { ColumnLayout {
Layout.alignment: Qt.AlignLeft Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredWidth: 0 Layout.preferredWidth: 0
Layout.fillHeight: true Layout.fillHeight: true
Layout.leftMargin: appIcon.visible ? 0 : 16 Layout.leftMargin: appIcon.visible ? 0 : 16
RowLayout { RowLayout {
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
MaterialIcon { MaterialIcon {
text: "\ue7f4" text: "\ue7f4"
font.pixelSize: 12 font.pixelSize: 12
} }
StyledText { StyledText {
id: appId id: appId
text: root.notification?.appName ? root.notification.appName : '' text: root.notification?.appName ? root.notification.appName : ''
opacity: 0.4 opacity: 0.4
} }
}
ColumnLayout {
spacing: 0
Layout.rightMargin: 40
StyledText {
id: title
Layout.bottomMargin: 0
Layout.topMargin: 5
Layout.alignment: Qt.AlignBottom
Layout.fillWidth: true
text: root.notification?.summary == null ? '' : root.notification.summary
elide: Text.ElideRight
}
StyledText {
id: body
Layout.alignment: Qt.AlignBottom
text: root.notification?.body ? root.notification.body : ''
elide: Text.ElideRight
maximumLineCount: 1
Layout.fillWidth: true
opacity: 0.6
}
}
}
} }
ColumnLayout { acceptedButtons: Qt.LeftButton
spacing: 0 cursorShape: Qt.PointingHandCursor
StyledText { hoverEnabled: true
id: title onEntered: {
Layout.bottomMargin: 0 root.color = Colors.base03;
Layout.topMargin: 5 }
Layout.alignment: Qt.AlignBottom onExited: {
Layout.fillWidth: true root.color = Colors.base01;
text: root.notification?.summary == null ? '' : root.notification.summary }
elide: Text.ElideRight onClicked: {
} root.notification ? root.notification.dismiss() : '';
StyledText {
id: body
Layout.alignment: Qt.AlignBottom
text: root.notification?.body ? root.notification.body : ''
elide: Text.ElideRight
maximumLineCount: 1
Layout.fillWidth: true
opacity: 0.6
}
} }
}
} }
acceptedButtons: Qt.LeftButton
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
root.color = Colors.base03;
}
onExited: {
root.color = Colors.base01;
}
onClicked: {
root.notification ? root.notification.dismiss() : '';
}
}
} }