Skip to content

notifications: add top-level close button, timeout progress indicators #569

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

notifications: add top-level close button, timeout progress indicators #569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf9ee06
add close button and timeout progress indicators
mhydock Sep 4, 2025
4bd8d39
add config example to readme
mhydock Sep 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -530,7 +530,9 @@ default, you must create it manually.
"clearThreshold": 0.3,
"defaultExpireTimeout": 5000,
"expandThreshold": 20,
"expire": false
"expire": false,
"timeoutBar": false,
"timeoutCircle": false,
},
"osd": {
"enabled": true,
Expand Down
2 changes: 2 additions & 0 deletions config/NotifsConfig.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import Quickshell.Io
JsonObject {
property bool expire: true
property int defaultExpireTimeout: 5000
property bool timeoutBar: false
property bool timeoutCircle: false
property real clearThreshold: 0.3
property int expandThreshold: 20
property bool actionOnClick: false
Expand Down
2 changes: 1 addition & 1 deletion modules/notifications/Content.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Item {

let height = (count - 1) * Appearance.spacing.smaller;
for (let i = 0; i < count; i++)
height += list.itemAtIndex(i)?.nonAnimHeight ?? 0;
height += list.itemAtIndex(i)?.implicitHeight ?? 0;

if (visibilities && panels) {
if (visibilities.osd) {
Expand Down
95 changes: 93 additions & 2 deletions modules/notifications/Notification.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Quickshell.Widgets
import Quickshell.Services.Notifications
import QtQuick
import QtQuick.Layouts
import QtQuick.Shapes

StyledRect {
id: root
Expand All @@ -23,7 +24,7 @@ StyledRect {
color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondaryContainer : Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.normal
implicitWidth: Config.notifs.sizes.width
implicitHeight: inner.implicitHeight
implicitHeight: inner.implicitHeight + progressBar.implicitHeight

x: Config.notifs.sizes.width
Component.onCompleted: {
Expand Down Expand Up @@ -311,12 +312,78 @@ StyledRect {
font.pointSize: Appearance.font.size.small
}

Loader {
active: Config.notifs.timeoutCircle
asynchronous: true
anchors.centerIn: closeBtn

sourceComponent: Shape {
id: progressCircle
width: closeBtn.implicitWidth + Appearance.padding.small
height: closeBtn.implicitHeight + Appearance.padding.small
preferredRendererType: Shape.CurveRenderer

ShapePath {
capStyle: ShapePath.FlatCap
fillColor: "transparent"
strokeWidth: Appearance.padding.small
strokeColor: Colours.palette.m3tertiary

PathAngleArc {
centerX: progressCircle.width / 2
centerY: progressCircle.height / 2
radiusX: progressCircle.width / 2 - Appearance.padding.small / 2
radiusY: progressCircle.height / 2 - Appearance.padding.small / 2

startAngle: -90

NumberAnimation on sweepAngle {
from: 360
to: 0
duration: Config.notifs.defaultExpireTimeout
running: root.modelData.timer.running
}
}
}
}
}

Item {
id: expandBtn
id: closeBtn

anchors.right: parent.right
anchors.top: parent.top

implicitWidth: closeIcon.height
implicitHeight: closeIcon.height

StateLayer {
radius: Appearance.rounding.full
color: Colours.palette.m3onSurface

function onClicked() {
root.modelData.notification.dismiss();
}
}

MaterialIcon {
id: closeIcon

anchors.centerIn: parent

animate: true
text: "close"
font.pointSize: Appearance.font.size.normal
}
}

Item {
id: expandBtn

anchors.right: closeBtn.left
anchors.top: parent.top
anchors.rightMargin: Appearance.spacing.small

implicitWidth: expandIcon.height
implicitHeight: expandIcon.height

Expand Down Expand Up @@ -437,6 +504,30 @@ StyledRect {
}
}

Loader {
id: progressBar
active: Config.notifs.timeoutBar
asynchronous: true

anchors.right: parent.right
anchors.bottom: parent.bottom

sourceComponent: StyledRect {
anchors.topMargin: Appearance.padding.small

implicitHeight: Appearance.padding.small

color: Colours.palette.m3tertiary

NumberAnimation on implicitWidth {
from: root.width
to: 0
duration: Config.notifs.defaultExpireTimeout
running: root.modelData.timer.running
}
}
}

component Action: StyledRect {
id: action

Expand Down