quickshell: style notification toast flush with bar
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
5e72fdf038
commit
63334db4a1
1 changed files with 57 additions and 18 deletions
|
|
@ -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,27 +1834,66 @@ in
|
|||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: toastContent
|
||||
// Left inverse corner ear
|
||||
Item {
|
||||
anchors.right: _toastRect.left
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 2
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
width: 316
|
||||
height: toastCol.height + 16
|
||||
radius: 8
|
||||
color: Theme.toastBg
|
||||
width: 8
|
||||
height: Math.min(8, _toastRect.height)
|
||||
clip: true
|
||||
|
||||
transform: Translate {
|
||||
y: notifToast.open ? 0 : -(toastContent.height + 10)
|
||||
Behavior on y {
|
||||
NumberAnimation { duration: 220; easing.type: Easing.OutCubic }
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
opacity: notifToast.open ? 1.0 : 0.0
|
||||
Behavior on opacity {
|
||||
NumberAnimation { duration: 200; easing.type: Easing.OutCubic }
|
||||
// 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
|
||||
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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue