rope/nixos
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

quickshell: round album art, full-width notifications with app icon + image preview

Browse source 
- album art uses ClippingRectangle so the image follows the radius
- NotifContent gains an app icon + name header
- notifications move to a full-width card spanning both panes, each item
  showing the notification image preview when present

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
rope 2026-06-17 14:56:49 +01:00
parent c901b9b56d
commit f0193eedd3
1 changed files with 118 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

65
settings/quickshell.nix
View file

@ -475,6 +475,29 @@ in
signal actionInvoked() signal actionInvoked()
spacing: 2 spacing: 2
// App header: icon + name of the sending app, when known.
Row {
width: parent.width
spacing: 4
visible: _nc.notif && (_nc.notif.appName !== "" || _appIcon.source != "")
Image {
id: _appIcon
width: 14; height: 14
sourceSize.width: 14; sourceSize.height: 14
anchors.verticalCenter: parent.verticalCenter
source: _nc.notif && _nc.notif.appIcon ? Quickshell.iconPath(_nc.notif.appIcon, true) : ""
visible: source != ""
}
SText {
anchors.verticalCenter: parent.verticalCenter
text: _nc.notif ? _nc.notif.appName : ""
color: Theme.base04
font.pixelSize: 10
elide: Text.ElideRight
width: parent.width - (_appIcon.visible ? 18 : 0)
}
}
SText { SText {
width: parent.width width: parent.width
text: _nc.notif ? (_nc.notif.summary || _nc.notif.appName) : "" text: _nc.notif ? (_nc.notif.summary || _nc.notif.appName) : ""
@ -2145,7 +2168,7 @@ in
// ceil: Text metrics give fractional sizes; fractional rect // ceil: Text metrics give fractional sizes; fractional rect
// edges render as soft 2px lines // edges render as soft 2px lines
fullWidth: Math.ceil(calRow.width) + 24 fullWidth: Math.ceil(calRow.width) + 24
fullHeight: Math.ceil(calRow.height) + 24 fullHeight: Math.ceil(calRow.height + 8 + notifCard.height) + 24
// Month being viewed; reset to today when the popup opens // Month being viewed; reset to today when the popup opens
// (via the setup function passed to bar.toggleDropdown). // (via the setup function passed to bar.toggleDropdown).
@ -2430,12 +2453,11 @@ in
width: parent.width width: parent.width
spacing: 12 spacing: 12
Rectangle { ClippingRectangle {
width: 128; height: 128 width: 128; height: 128
radius: Theme.radiusSmall radius: Theme.radiusSmall
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: Theme.base02 color: Theme.base02
clip: true
SIcon { SIcon {
anchors.centerIn: parent anchors.centerIn: parent
visible: albumArt.status !== Image.Ready visible: albumArt.status !== Image.Ready
@ -2548,22 +2570,28 @@ in
} }
} }
// Notifications card }
}
// ── Notifications: spans both columns, below the panes ──
Card { Card {
width: parent.width id: notifCard
anchors.top: calRow.bottom
anchors.topMargin: 8
anchors.horizontalCenter: parent.horizontalCenter
width: calRow.width
opacity: calRow.opacity
cardSpacing: 6 cardSpacing: 6
Item { Item {
width: parent.width width: parent.width
height: 20 height: 20
SText { SText {
anchors.left: parent.left anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: "Notifications" text: "Notifications"
font.weight: Font.Medium font.weight: Font.Medium
} }
SText { SText {
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -2598,14 +2626,31 @@ in
id: notifItem id: notifItem
required property var modelData required property var modelData
width: parent.width width: parent.width
height: ncBody.height + 16 height: Math.max(notifPreview.visible ? 48 : 0, ncBody.height) + 16
radius: Theme.radiusSmall radius: Theme.radiusSmall
color: Theme.base02 color: Theme.base02
// Image preview (album art, screenshot thumb…)
ClippingRectangle {
id: notifPreview
visible: notifItem.modelData.image != ""
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: 8
width: 48; height: 48
radius: Theme.radiusTiny
color: Theme.base01
Image {
anchors.fill: parent
fillMode: Image.PreserveAspectCrop
source: notifItem.modelData.image
}
}
NotifContent { NotifContent {
id: ncBody id: ncBody
notif: notifItem.modelData notif: notifItem.modelData
anchors.left: parent.left anchors.left: notifPreview.visible ? notifPreview.right : parent.left
anchors.right: dismissBtn.left anchors.right: dismissBtn.left
anchors.top: parent.top anchors.top: parent.top
anchors.margins: 8 anchors.margins: 8
@ -2631,8 +2676,6 @@ in
} }
} }
} }
}
}
// ── Notification Toast (only on primary screen) ── // ── Notification Toast (only on primary screen) ──
Item { Item {