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
margins.top: 30
visible: false
implicitWidth: 320
implicitHeight: toastContent.height + 2
implicitWidth: 320 + 16
implicitHeight: _toastRect.height + 4
color: "transparent"
Timer {
@ -1834,28 +1834,67 @@ in
}
}
Rectangle {
id: toastContent
// Left inverse corner ear
Item {
anchors.right: _toastRect.left
anchors.top: parent.top
anchors.topMargin: 2
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.lineTo(8, 8);
ctx.arc(0, 8, 8, 0, -Math.PI / 2, true);
ctx.closePath(); ctx.fill();
}
}
}
// Right inverse corner ear
Item {
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
width: 316
height: toastCol.height + 16
anchors.top: parent.top
width: 320
height: notifToast.open ? toastCol.height + 16 : 0
color: Theme.barBg
radius: 8
color: Theme.toastBg
topLeftRadius: 0
topRightRadius: 0
clip: true
transform: Translate {
y: notifToast.open ? 0 : -(toastContent.height + 10)
Behavior on y {
Behavior on height {
NumberAnimation { duration: 220; easing.type: Easing.OutCubic }
}
}
opacity: notifToast.open ? 1.0 : 0.0
Behavior on opacity {
NumberAnimation { duration: 200; easing.type: Easing.OutCubic }
}
Column {
id: toastCol