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