kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

tiny reload popup design tweaks

Browse Source
This commit is contained in:
end-4
2026-03-11 22:09:54 +01:00
parent be87a1ae79
commit 5e16f2bc10
1 changed files with 152 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dots/.config/quickshell/ii/ReloadPopup.qml
+48 -36
View File
@@ -1,13 +1,15 @@
pragma ComponentBehavior: Bound
import QtQuick import QtQuick
import QtQuick.Effects
import QtQuick.Layouts import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Quickshell import Quickshell
import Quickshell.Wayland import Quickshell.Wayland
Scope { Scope {
id: root id: root
property bool failed; property bool failed
property string errorString; property string errorString
property real progressHeight: 3
// Connect to the Quickshell global to listen for the reload signals. // Connect to the Quickshell global to listen for the reload signals.
Connections { Connections {
@@ -39,22 +41,31 @@ Scope {
anchors.top: true anchors.top: true
margins.top: 0 margins.top: 0
implicitWidth: rect.width + shadow.radius * 2 implicitWidth: rect.width + 8 * 2
implicitHeight: rect.height + shadow.radius * 2 implicitHeight: rect.height + 8 * 2
WlrLayershell.namespace: "quickshell:reloadPopup" WlrLayershell.namespace: "quickshell:reloadPopup"
// color blending is a bit odd as detailed in the type reference. // color blending is a bit odd as detailed in the type reference.
color: "transparent" color: "transparent"
RectangularShadow {
anchors.fill: rect
radius: rect.radius
blur: 6.3
offset: Qt.vector2d(0.0, 1.0)
spread: 1
color: "#55000000"
}
Rectangle { Rectangle {
id: rect id: rect
anchors.centerIn: parent anchors.centerIn: parent
color: failed ? "#ffe99195" : "#ffD1E8D5" color: root.failed ? "#ffe99195" : "#ffD1E8D5"
implicitHeight: layout.implicitHeight + 30 implicitHeight: layout.implicitHeight + 30
implicitWidth: layout.implicitWidth + 30 implicitWidth: layout.implicitWidth + 30
radius: 12 radius: 8
// Fills the whole area of the rectangle, making any clicks go to it, // Fills the whole area of the rectangle, making any clicks go to it,
// which dismiss the popup. // which dismiss the popup.
@@ -62,7 +73,7 @@ Scope {
id: mouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
onPressed: { onPressed: {
popupLoader.active = false popupLoader.active = false;
} }
// makes the mouse area track mouse hovering, so the hide animation // makes the mouse area track mouse hovering, so the hide animation
@@ -80,19 +91,21 @@ Scope {
} }
Text { Text {
id: title
renderType: Text.NativeRendering renderType: Text.NativeRendering
font.family: "Google Sans Flex" font.family: "Google Sans Flex"
font.pointSize: 14 font.pointSize: 14
text: root.failed ? "Quickshell: Reload failed" : "Quickshell reloaded" text: root.failed ? "Quickshell: Reload failed" : "Quickshell reloaded"
color: failed ? "#ff93000A" : "#ff0C1F13" color: root.failed ? "#ff93000A" : "#ff0C1F13"
} }
Text { Text {
id: info
renderType: Text.NativeRendering renderType: Text.NativeRendering
font.family: "JetBrains Mono NF" font.family: "JetBrains Mono NF"
font.pointSize: 11 font.pointSize: 11
text: root.errorString text: root.errorString
color: failed ? "#ff93000A" : "#ff0C1F13" color: root.failed ? "#ff93000A" : "#ff0C1F13"
// When visible is false, it also takes up no space. // When visible is false, it also takes up no space.
visible: root.errorString != "" visible: root.errorString != ""
} }
@@ -101,22 +114,26 @@ Scope {
// A progress bar on the bottom of the screen, showing how long until the // A progress bar on the bottom of the screen, showing how long until the
// popup is removed. // popup is removed.
Rectangle { Rectangle {
z: 2
id: bar id: bar
color: failed ? "#ff93000A" : "#ff0C1F13" z: 2
anchors.bottom: parent.bottom color: root.failed ? "#ff93000A" : "#ff0C1F13"
anchors.left: parent.left property real maxWidth: Math.max(title.width, info.width)
anchors.margins: 10 anchors {
height: 5 left: parent.left
leftMargin: (parent.width - maxWidth) / 2
bottom: parent.bottom
bottomMargin: 10
}
height: root.progressHeight
radius: 9999 radius: 9999
PropertyAnimation { PropertyAnimation {
id: anim id: anim
target: bar target: bar
property: "width" property: "width"
from: rect.width - bar.anchors.margins * 2 from: Math.max(title.width, info.width)
to: 0 to: 0
duration: failed ? 10000 : 1000 duration: root.failed ? 10000 : 1000
onFinished: popupLoader.active = false onFinished: popupLoader.active = false
// Pause the animation when the mouse is hovering over the popup, // Pause the animation when the mouse is hovering over the popup,
@@ -127,15 +144,21 @@ Scope {
} }
// Its bg // Its bg
Rectangle { Rectangle {
z: 1
id: bar_bg id: bar_bg
color: failed ? "#30af1b25" : "#4027643e" z: 1
anchors.bottom: parent.bottom color: root.failed ? "#30af1b25" : "#4027643e"
anchors.left: parent.left property real maxWidth: Math.max(title.width, info.width)
anchors.margins: 10 anchors {
height: 5 left: parent.left
right: parent.right
leftMargin: (parent.width - maxWidth) / 2
rightMargin: anchors.leftMargin
bottom: parent.bottom
bottomMargin: 10
}
height: root.progressHeight
radius: 9999 radius: 9999
width: rect.width - bar.anchors.margins * 2 width: bar.width
} }
// We could set `running: true` inside the animation, but the width of the // We could set `running: true` inside the animation, but the width of the
@@ -144,17 +167,6 @@ Scope {
// properties and children have been initialized. // properties and children have been initialized.
Component.onCompleted: anim.start() Component.onCompleted: anim.start()
} }
DropShadow {
id: shadow
anchors.fill: rect
horizontalOffset: 0
verticalOffset: 2
radius: 6
samples: radius * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs
color: "#44000000"
source: rect
}
} }
} }
} }