Made notification panel scrollable
This commit is contained in:
@@ -8,104 +8,101 @@ import qs.common
|
||||
import qs.common.widgets
|
||||
|
||||
Item {
|
||||
id: root
|
||||
required property Notification notif
|
||||
required property real textWidth
|
||||
required property real notificationRounding
|
||||
property real spacing: 8
|
||||
id: root
|
||||
required property Notification notif
|
||||
required property real textWidth
|
||||
required property real notificationRounding
|
||||
property real spacing: 8
|
||||
|
||||
Layout.fillWidth: true
|
||||
|
||||
implicitHeight: content.implicitHeight
|
||||
implicitWidth: textWidth
|
||||
implicitHeight: content.implicitHeight
|
||||
|
||||
|
||||
ColumnLayout {
|
||||
id: content
|
||||
Layout.fillWidth: true
|
||||
spacing: 0
|
||||
Rectangle {
|
||||
implicitHeight: appTitle.implicitHeight
|
||||
implicitWidth: root.width
|
||||
anchors.margins: Config.options.bar.cornerStyle === 1 ? (Appearance.sizes.hyprlandGapsOut) : 0
|
||||
color: Appearance.m3colors.m3primaryContainer
|
||||
topLeftRadius: root.notificationRounding
|
||||
topRightRadius: root.notificationRounding
|
||||
RowLayout {
|
||||
spacing: 0 // For some reason, adding a spacing of just the value will not work properly
|
||||
IconImage {
|
||||
visible: root.notif.appIcon.length > 0
|
||||
id: appIcon
|
||||
source: Quickshell.iconPath(root.notif.appIcon)
|
||||
width: appTitle.height - root.spacing
|
||||
height: appTitle.height - root.spacing
|
||||
Layout.leftMargin: root.spacing / 2
|
||||
}
|
||||
Text {
|
||||
// app title
|
||||
id: appTitle
|
||||
text: root.notif.appName
|
||||
color: Appearance.m3colors.m3onPrimaryContainer
|
||||
Layout.leftMargin: root.spacing / 2
|
||||
}
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
visible: notifSummary.visible || notifBody.visible
|
||||
implicitHeight: body.implicitHeight
|
||||
implicitWidth: root.width
|
||||
anchors.margins: Config.options.bar.cornerStyle === 1 ? (Appearance.sizes.hyprlandGapsOut) : 0
|
||||
color: Appearance.colors.colLayer2
|
||||
bottomLeftRadius: root.notificationRounding
|
||||
bottomRightRadius: root.notificationRounding
|
||||
ColumnLayout {
|
||||
id: body
|
||||
spacing: root.spacing
|
||||
Text {
|
||||
visible: root.notif.summary.length > 0
|
||||
Layout.leftMargin: root.spacing
|
||||
Layout.rightMargin: root.spacing
|
||||
id: notifSummary
|
||||
text: root.notif.summary
|
||||
color: Appearance.colors.colOnLayer2
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
Text {
|
||||
visible: root.notif.body.length > 0
|
||||
Layout.leftMargin: root.spacing
|
||||
Layout.rightMargin: root.spacing
|
||||
Layout.preferredWidth: textWidth
|
||||
id: notifBody
|
||||
text: root.notif.body
|
||||
color: Appearance.colors.colOnLayer2
|
||||
wrapMode: Text.WordWrap
|
||||
maximumLineCount: 4
|
||||
}
|
||||
RowLayout {
|
||||
id: actionLayer
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: root.spacing
|
||||
Layout.rightMargin: root.spacing
|
||||
Layout.bottomMargin: root.spacing
|
||||
spacing: root.spacing
|
||||
RippleButton {
|
||||
buttonText: "Dismiss"
|
||||
colBackground: Appearance.m3colors.m3primaryContainer
|
||||
releaseAction: root.notif.dismiss
|
||||
buttonRadius: root.notificationRounding
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: root.notif.actions
|
||||
RippleButton {
|
||||
buttonText: modelData.text
|
||||
buttonTextColor: Appearance.m3colors.m3onTertiaryContainer
|
||||
colBackground: Appearance.m3colors.m3tertiaryContainer
|
||||
releaseAction: modelData.invoke
|
||||
buttonRadius: root.notificationRounding
|
||||
ColumnLayout {
|
||||
id: content
|
||||
spacing: 0
|
||||
Rectangle {
|
||||
implicitHeight: appTitle.implicitHeight
|
||||
implicitWidth: root.width
|
||||
anchors.margins: Config.options.bar.cornerStyle === 1 ? (Appearance.sizes.hyprlandGapsOut) : 0
|
||||
color: Appearance.m3colors.m3primaryContainer
|
||||
topLeftRadius: root.notificationRounding
|
||||
topRightRadius: root.notificationRounding
|
||||
RowLayout {
|
||||
spacing: 0 // For some reason, adding a spacing of just the value will not work properly
|
||||
IconImage {
|
||||
id: appIcon
|
||||
visible: root.notif.appIcon.length > 0
|
||||
source: Quickshell.iconPath(root.notif.appIcon)
|
||||
width: appTitle.height - root.spacing
|
||||
height: appTitle.height - root.spacing
|
||||
Layout.leftMargin: root.spacing / 2
|
||||
}
|
||||
Text {
|
||||
// app title
|
||||
id: appTitle
|
||||
text: root.notif.appName
|
||||
color: Appearance.m3colors.m3onPrimaryContainer
|
||||
Layout.leftMargin: root.spacing / 2
|
||||
}
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
visible: notifSummary.visible || notifBody.visible
|
||||
implicitHeight: body.implicitHeight
|
||||
implicitWidth: root.width
|
||||
anchors.margins: Config.options.bar.cornerStyle === 1 ? (Appearance.sizes.hyprlandGapsOut) : 0
|
||||
color: Appearance.colors.colLayer2
|
||||
bottomLeftRadius: root.notificationRounding
|
||||
bottomRightRadius: root.notificationRounding
|
||||
ColumnLayout {
|
||||
id: body
|
||||
spacing: root.spacing
|
||||
Text {
|
||||
id: notifSummary
|
||||
visible: root.notif.summary.length > 0
|
||||
Layout.leftMargin: root.spacing
|
||||
Layout.rightMargin: root.spacing
|
||||
text: root.notif.summary
|
||||
color: Appearance.colors.colOnLayer2
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
Text {
|
||||
id: notifBody
|
||||
visible: root.notif.body.length > 0
|
||||
Layout.leftMargin: root.spacing
|
||||
Layout.rightMargin: root.spacing
|
||||
Layout.preferredWidth: textWidth
|
||||
text: root.notif.body
|
||||
color: Appearance.colors.colOnLayer2
|
||||
wrapMode: Text.WordWrap
|
||||
maximumLineCount: 4
|
||||
}
|
||||
RowLayout {
|
||||
id: actionLayer
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: root.spacing
|
||||
Layout.rightMargin: root.spacing
|
||||
Layout.bottomMargin: root.spacing
|
||||
spacing: root.spacing
|
||||
RippleButton {
|
||||
buttonText: "Dismiss"
|
||||
colBackground: Appearance.m3colors.m3primaryContainer
|
||||
releaseAction: root.notif.dismiss
|
||||
buttonRadius: root.notificationRounding
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: root.notif.actions
|
||||
RippleButton {
|
||||
buttonText: modelData.text
|
||||
buttonTextColor: Appearance.m3colors.m3onTertiaryContainer
|
||||
colBackground: Appearance.m3colors.m3tertiaryContainer
|
||||
releaseAction: modelData.invoke
|
||||
buttonRadius: root.notificationRounding
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,32 +64,27 @@ Scope {
|
||||
hideTimer.stop();
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
ListView {
|
||||
id: notifs
|
||||
anchors.fill: parent
|
||||
anchors.margins: 4
|
||||
Layout.fillWidth: true
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
visible: NotificationService.amountNotifications > 0
|
||||
|
||||
// Dismiss All Button
|
||||
RippleButton {
|
||||
clip: true
|
||||
spacing: 4
|
||||
model: NotificationService.notifications
|
||||
header: RippleButton {
|
||||
buttonText: "Dismiss All"
|
||||
buttonTextColor: Appearance.m3colors.m3onTertiaryContainer
|
||||
colBackground: Appearance.m3colors.m3tertiaryContainer
|
||||
releaseAction: NotificationService.dismissAll
|
||||
buttonRadius: Appearance.rounding.unsharpenmore
|
||||
Layout.fillWidth: true
|
||||
width: notifs.width - 8
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: NotificationService.notifications
|
||||
NotificationItem {
|
||||
required property Notification modelData
|
||||
notif: modelData
|
||||
textWidth: root.panelWidth - 14
|
||||
notificationRounding: Appearance.rounding.unsharpenmore
|
||||
}
|
||||
delegate: NotificationItem {
|
||||
required property Notification modelData
|
||||
notif: modelData
|
||||
textWidth: notifs.width - 8
|
||||
notificationRounding: Appearance.rounding.unsharpenmore
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user