quickshell: style notification toast flush with bar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
rope 2026-05-26 21:18:41 +01:00
parent 5e72fdf038
commit 63334db4a1

View file

@ -1811,8 +1811,8 @@ in
anchors.top: true anchors.top: true
margins.top: 30 margins.top: 30
visible: false visible: false
implicitWidth: 320 implicitWidth: 320 + 16
implicitHeight: toastContent.height + 2 implicitHeight: _toastRect.height + 4
color: "transparent" color: "transparent"
Timer { Timer {
@ -1834,27 +1834,66 @@ in
} }
} }
Rectangle { // Left inverse corner ear
id: toastContent Item {
anchors.right: _toastRect.left
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 2 width: 8
anchors.horizontalCenter: parent.horizontalCenter height: Math.min(8, _toastRect.height)
width: 316
height: toastCol.height + 16
radius: 8
color: Theme.toastBg
clip: true clip: true
visible: _toastRect.height > 0
transform: Translate { Canvas {
y: notifToast.open ? 0 : -(toastContent.height + 10) anchors.top: parent.top
Behavior on y { width: 8; height: 8
NumberAnimation { duration: 220; easing.type: Easing.OutCubic } onPaint: {
var ctx = getContext("2d");
ctx.clearRect(0, 0, 8, 8);
ctx.fillStyle = Theme.barBg;
ctx.beginPath();
ctx.moveTo(0, 0); ctx.lineTo(8, 0); ctx.lineTo(8, 8);
ctx.arc(0, 8, 8, 0, -Math.PI / 2, true);
ctx.closePath(); ctx.fill();
} }
} }
}
opacity: notifToast.open ? 1.0 : 0.0 // Right inverse corner ear
Behavior on opacity { Item {
NumberAnimation { duration: 200; easing.type: Easing.OutCubic } anchors.left: _toastRect.right
anchors.top: parent.top
width: 8
height: Math.min(8, _toastRect.height)
clip: true
visible: _toastRect.height > 0
Canvas {
anchors.top: parent.top
width: 8; height: 8
onPaint: {
var ctx = getContext("2d");
ctx.clearRect(0, 0, 8, 8);
ctx.fillStyle = Theme.barBg;
ctx.beginPath();
ctx.moveTo(0, 0); ctx.lineTo(8, 0);
ctx.arc(8, 8, 8, -Math.PI / 2, Math.PI, true);
ctx.closePath(); ctx.fill();
}
}
}
Rectangle {
id: _toastRect
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
width: 320
height: notifToast.open ? toastCol.height + 16 : 0
color: Theme.barBg
radius: 8
topLeftRadius: 0
topRightRadius: 0
clip: true
Behavior on height {
NumberAnimation { duration: 220; easing.type: Easing.OutCubic }
} }
Column { Column {