notifs: extract NotifCard shared component (background, progress, urgency bar, icon, text, dismiss button)
This commit is contained in:
Damocles
parent
d6b1a7ae58
commit
a502faef19
3 changed files with 271 additions and 364 deletions
|
|
@ -1,6 +1,5 @@
|
|||
import QtQuick
|
||||
import Quickshell
|
||||
import Quickshell.Services.Notifications
|
||||
import "." as M
|
||||
|
||||
M.HoverPanel {
|
||||
|
|
@ -223,7 +222,7 @@ M.HoverPanel {
|
|||
clip: true
|
||||
opacity: 0
|
||||
|
||||
readonly property real _targetHeight: _type === "header" ? 28 : (notifContent.implicitHeight + 12)
|
||||
readonly property real _targetHeight: _type === "header" ? 28 : _notifCard.implicitHeight
|
||||
property real _heightScale: 1
|
||||
property bool _skipDismiss: false
|
||||
|
||||
|
|
@ -318,193 +317,15 @@ M.HoverPanel {
|
|||
}
|
||||
|
||||
// ---- Individual notification ----
|
||||
Item {
|
||||
id: _notifRow
|
||||
M.NotifCard {
|
||||
id: _notifCard
|
||||
visible: notifDelegate._type === "notif"
|
||||
anchors.fill: parent
|
||||
|
||||
// Hover + progress bar background
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 4
|
||||
anchors.rightMargin: 4
|
||||
color: notifArea.containsMouse ? M.Theme.base02 : "transparent"
|
||||
radius: M.Theme.radius
|
||||
|
||||
Rectangle {
|
||||
visible: (notifDelegate._notif?.hints?.value ?? -1) >= 0
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
width: parent.width * Math.min(1, Math.max(0, (notifDelegate._notif?.hints?.value ?? 0) / 100))
|
||||
color: M.Theme.base02
|
||||
radius: parent.radius
|
||||
|
||||
Behavior on width {
|
||||
NumberAnimation {
|
||||
duration: 200
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Urgency accent bar
|
||||
Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 4
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 4
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 4
|
||||
width: 2
|
||||
radius: 1
|
||||
color: {
|
||||
const u = notifDelegate._notif?.urgency ?? NotificationUrgency.Normal;
|
||||
return u === NotificationUrgency.Critical ? M.Theme.base08 : u === NotificationUrgency.Low ? M.Theme.base04 : M.Theme.base0D;
|
||||
}
|
||||
}
|
||||
|
||||
// App icon / image
|
||||
Image {
|
||||
id: ncIcon
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 14
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 6
|
||||
width: 24
|
||||
height: 24
|
||||
source: {
|
||||
if (notifDelegate._type !== "notif")
|
||||
return "";
|
||||
const img = notifDelegate._notif?.image;
|
||||
if (img)
|
||||
return img;
|
||||
const ic = notifDelegate._notif?.appIcon;
|
||||
if (!ic)
|
||||
return "";
|
||||
return (ic.startsWith("/") || ic.startsWith("file://")) ? ic : Quickshell.iconPath(ic, "dialog-information");
|
||||
}
|
||||
visible: status === Image.Ready
|
||||
fillMode: Image.PreserveAspectFit
|
||||
sourceSize: Qt.size(24, 24)
|
||||
asynchronous: true
|
||||
}
|
||||
|
||||
Column {
|
||||
id: notifContent
|
||||
anchors.left: ncIcon.visible ? ncIcon.right : parent.left
|
||||
anchors.right: dismissBtn.left
|
||||
anchors.top: parent.top
|
||||
anchors.leftMargin: ncIcon.visible ? 6 : 14
|
||||
anchors.topMargin: 6
|
||||
spacing: 1
|
||||
|
||||
// Summary + time on the same row
|
||||
Row {
|
||||
width: parent.width
|
||||
|
||||
Text {
|
||||
text: notifDelegate._notif?.summary ?? ""
|
||||
color: M.Theme.base05
|
||||
font.pixelSize: M.Theme.fontSize
|
||||
font.family: M.Theme.fontFamily
|
||||
font.bold: true
|
||||
elide: Text.ElideRight
|
||||
width: parent.width - _notifTime.implicitWidth - 4
|
||||
}
|
||||
|
||||
Text {
|
||||
id: _notifTime
|
||||
text: notifDelegate._notif?.timeStr ?? ""
|
||||
color: M.Theme.base03
|
||||
font.pixelSize: M.Theme.fontSize - 2
|
||||
font.family: M.Theme.fontFamily
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
width: parent.width
|
||||
text: notifDelegate._notif?.body ?? ""
|
||||
color: M.Theme.base04
|
||||
font.pixelSize: M.Theme.fontSize - 1
|
||||
font.family: M.Theme.fontFamily
|
||||
wrapMode: Text.WordWrap
|
||||
maximumLineCount: 2
|
||||
elide: Text.ElideRight
|
||||
visible: text !== ""
|
||||
}
|
||||
|
||||
// Actions
|
||||
Row {
|
||||
spacing: 4
|
||||
visible: !!(notifDelegate._notif?.actions?.length)
|
||||
|
||||
Repeater {
|
||||
model: notifDelegate._notif?.actions ?? []
|
||||
delegate: Rectangle {
|
||||
required property var modelData
|
||||
width: actText.implicitWidth + 10
|
||||
height: actText.implicitHeight + 4
|
||||
radius: M.Theme.radius
|
||||
color: actArea.containsMouse ? M.Theme.base02 : "transparent"
|
||||
border.color: M.Theme.base03
|
||||
border.width: 1
|
||||
|
||||
Text {
|
||||
id: actText
|
||||
anchors.centerIn: parent
|
||||
text: parent.modelData.text
|
||||
color: M.Theme.base0D
|
||||
font.pixelSize: M.Theme.fontSize - 2
|
||||
font.family: M.Theme.fontFamily
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: actArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
parent.modelData.invoke();
|
||||
M.NotifService.dismiss(notifDelegate._notif.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Per-notification dismiss button
|
||||
Text {
|
||||
id: dismissBtn
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 10
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 8
|
||||
text: "\uF00D"
|
||||
color: dismissArea.containsMouse ? M.Theme.base08 : M.Theme.base03
|
||||
font.pixelSize: M.Theme.fontSize - 1
|
||||
font.family: M.Theme.iconFontFamily
|
||||
|
||||
MouseArea {
|
||||
id: dismissArea
|
||||
anchors.fill: parent
|
||||
anchors.margins: -4
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: notifDelegate.dismiss()
|
||||
}
|
||||
}
|
||||
|
||||
// Right-click to dismiss
|
||||
MouseArea {
|
||||
id: notifArea
|
||||
anchors.fill: parent
|
||||
z: -1
|
||||
hoverEnabled: true
|
||||
acceptedButtons: Qt.RightButton
|
||||
onClicked: notifDelegate.dismiss()
|
||||
}
|
||||
notif: notifDelegate._notif
|
||||
showAppName: false
|
||||
iconSize: 24
|
||||
bodyMaxLines: 2
|
||||
onDismissRequested: notifDelegate.dismiss()
|
||||
}
|
||||
|
||||
SequentialAnimation {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue