feat: expand toast on hover

This commit is contained in:
Nydragon 2024-09-29 02:36:02 +02:00
parent b82995dd9d
commit 696390ab7c
Signed by: nydragon
SSH key fingerprint: SHA256:iQnIC12spf4QjWSbarmkD2No1cLMlu6TWoV7K6cYF5g
2 changed files with 76 additions and 26 deletions

View file

@ -54,7 +54,7 @@ PopupWindow {
}
NumberAnimation {
properties: "y"
to: 100
to: -100
duration: 300
}
}

View file

@ -1,49 +1,99 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
import "root:base"
import Quickshell.Services.Notifications
BRectangle {
MouseArea {
id: toast
color: "#BD93f910"
height: 50
width: 200
property int lifetime: 10000
property int countdownTime: lifetime
required property string appName
required property string summary
required property string body
required property string appIcon
required property NotificationUrgency urgency
required property int index
MouseArea {
anchors.margins: 10
hoverEnabled: true
height: box.height
width: box.width
BRectangle {
id: box
height: 26
width: 200
BRectangle {
anchors.fill: parent
Column {
anchors.fill: parent
anchors.margins: 5
Row {
IconImage {
source: Quickshell.iconPath(toast.appIcon)
height: 16
}
Text {
text: toast.appName + ": " + toast.summary
}
onEntered: () => {
timer.repeat = false;
}
onExited: () => {
timer.repeat = true;
Text {
text: toast.body
visible: box.state === "expand"
}
}
}
states: State {
name: "expand"
when: toast.containsMouse
PropertyChanges {
target: box
width: 250
height: 140
}
}
transitions: Transition {
NumberAnimation {
properties: "width,height"
duration: 100
easing.type: Easing.InOutQuad
}
}
Rectangle {
anchors.margins: 2
anchors.bottom: toast.bottom
anchors.right: toast.right
width: (toast.width - toast.border.width - anchors.margins) * (toast.countdownTime / toast.lifetime)
anchors.bottom: box.bottom
anchors.right: box.right
width: (box.width - box.border.width - anchors.margins) * (toast.countdownTime / toast.lifetime)
height: 2
bottomLeftRadius: toast.radius
bottomRightRadius: toast.radius
bottomLeftRadius: box.radius
bottomRightRadius: box.radius
color: {
switch (toast.urgency) {
case NotificationUrgency.Critical:
return "red";
break;
case NotificationUrgency.Normal:
return "green";
break;
default:
return "white";
}
}
}
}
Timer {
id: timer
interval: 10
repeat: true
repeat: !toast.containsMouse
onTriggered: () => {
toast.countdownTime -= timer.interval;
if (toast.countdownTime <= 0) {
@ -52,6 +102,6 @@ BRectangle {
timer.running = false;
}
}
running: true
running: !toast.containsMouse
}
}