diff --git a/dots/.config/quickshell/ii/ReloadPopup.qml b/dots/.config/quickshell/ii/ReloadPopup.qml index 7a4e7112e..a314b201e 100644 --- a/dots/.config/quickshell/ii/ReloadPopup.qml +++ b/dots/.config/quickshell/ii/ReloadPopup.qml @@ -1,160 +1,172 @@ +pragma ComponentBehavior: Bound import QtQuick +import QtQuick.Effects import QtQuick.Layouts -import Qt5Compat.GraphicalEffects import Quickshell import Quickshell.Wayland Scope { - id: root - property bool failed; - property string errorString; + id: root + property bool failed + property string errorString + property real progressHeight: 3 - // Connect to the Quickshell global to listen for the reload signals. - Connections { - target: Quickshell + // Connect to the Quickshell global to listen for the reload signals. + Connections { + target: Quickshell - function onReloadCompleted() { - root.failed = false; - popupLoader.loading = true; - } + function onReloadCompleted() { + root.failed = false; + popupLoader.loading = true; + } - function onReloadFailed(error: string) { - // Close any existing popup before making a new one. - popupLoader.active = false; + function onReloadFailed(error: string) { + // Close any existing popup before making a new one. + popupLoader.active = false; - root.failed = true; - root.errorString = error; - popupLoader.loading = true; - } - } + root.failed = true; + root.errorString = error; + popupLoader.loading = true; + } + } - // Keep the popup in a loader because it isn't needed most of the time - LazyLoader { - id: popupLoader + // Keep the popup in a loader because it isn't needed most of the time + LazyLoader { + id: popupLoader - PanelWindow { - id: popup + PanelWindow { + id: popup - exclusiveZone: 0 - anchors.top: true - margins.top: 0 + exclusiveZone: 0 + anchors.top: true + margins.top: 0 - implicitWidth: rect.width + shadow.radius * 2 - implicitHeight: rect.height + shadow.radius * 2 + implicitWidth: rect.width + 8 * 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: "transparent" + // color blending is a bit odd as detailed in the type reference. + color: "transparent" - Rectangle { - id: rect - anchors.centerIn: parent - color: failed ? "#ffe99195" : "#ffD1E8D5" - - implicitHeight: layout.implicitHeight + 30 - implicitWidth: layout.implicitWidth + 30 - radius: 12 - - // Fills the whole area of the rectangle, making any clicks go to it, - // which dismiss the popup. - MouseArea { - id: mouseArea - anchors.fill: parent - onPressed: { - popupLoader.active = false - } - - // makes the mouse area track mouse hovering, so the hide animation - // can be paused when hovering. - hoverEnabled: true - } - - ColumnLayout { - id: layout - spacing: 10 - anchors { - top: parent.top - topMargin: 10 - horizontalCenter: parent.horizontalCenter - } - - Text { - renderType: Text.NativeRendering - font.family: "Google Sans Flex" - font.pointSize: 14 - text: root.failed ? "Quickshell: Reload failed" : "Quickshell reloaded" - color: failed ? "#ff93000A" : "#ff0C1F13" - } - - Text { - renderType: Text.NativeRendering - font.family: "JetBrains Mono NF" - font.pointSize: 11 - text: root.errorString - color: failed ? "#ff93000A" : "#ff0C1F13" - // When visible is false, it also takes up no space. - visible: root.errorString != "" - } - } - - // A progress bar on the bottom of the screen, showing how long until the - // popup is removed. - Rectangle { - z: 2 - id: bar - color: failed ? "#ff93000A" : "#ff0C1F13" - anchors.bottom: parent.bottom - anchors.left: parent.left - anchors.margins: 10 - height: 5 - radius: 9999 - - PropertyAnimation { - id: anim - target: bar - property: "width" - from: rect.width - bar.anchors.margins * 2 - to: 0 - duration: failed ? 10000 : 1000 - onFinished: popupLoader.active = false - - // Pause the animation when the mouse is hovering over the popup, - // so it stays onscreen while reading. This updates reactively - // when the mouse moves on and off the popup. - paused: mouseArea.containsMouse - } - } - // Its bg - Rectangle { - z: 1 - id: bar_bg - color: failed ? "#30af1b25" : "#4027643e" - anchors.bottom: parent.bottom - anchors.left: parent.left - anchors.margins: 10 - height: 5 - radius: 9999 - width: rect.width - bar.anchors.margins * 2 - } - - // We could set `running: true` inside the animation, but the width of the - // rectangle might not be calculated yet, due to the layout. - // In the `Component.onCompleted` event handler, all of the component's - // properties and children have been initialized. - Component.onCompleted: anim.start() - } - - DropShadow { - id: shadow + RectangularShadow { 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 + radius: rect.radius + blur: 6.3 + offset: Qt.vector2d(0.0, 1.0) + spread: 1 + color: "#55000000" } - } - } + + Rectangle { + id: rect + anchors.centerIn: parent + color: root.failed ? "#ffe99195" : "#ffD1E8D5" + + implicitHeight: layout.implicitHeight + 30 + implicitWidth: layout.implicitWidth + 30 + radius: 8 + + // Fills the whole area of the rectangle, making any clicks go to it, + // which dismiss the popup. + MouseArea { + id: mouseArea + anchors.fill: parent + onPressed: { + popupLoader.active = false; + } + + // makes the mouse area track mouse hovering, so the hide animation + // can be paused when hovering. + hoverEnabled: true + } + + ColumnLayout { + id: layout + spacing: 10 + anchors { + top: parent.top + topMargin: 10 + horizontalCenter: parent.horizontalCenter + } + + Text { + id: title + renderType: Text.NativeRendering + font.family: "Google Sans Flex" + font.pointSize: 14 + text: root.failed ? "Quickshell: Reload failed" : "Quickshell reloaded" + color: root.failed ? "#ff93000A" : "#ff0C1F13" + } + + Text { + id: info + renderType: Text.NativeRendering + font.family: "JetBrains Mono NF" + font.pointSize: 11 + text: root.errorString + color: root.failed ? "#ff93000A" : "#ff0C1F13" + // When visible is false, it also takes up no space. + visible: root.errorString != "" + } + } + + // A progress bar on the bottom of the screen, showing how long until the + // popup is removed. + Rectangle { + id: bar + z: 2 + color: root.failed ? "#ff93000A" : "#ff0C1F13" + property real maxWidth: Math.max(title.width, info.width) + anchors { + left: parent.left + leftMargin: (parent.width - maxWidth) / 2 + bottom: parent.bottom + bottomMargin: 10 + } + height: root.progressHeight + radius: 9999 + + PropertyAnimation { + id: anim + target: bar + property: "width" + from: Math.max(title.width, info.width) + to: 0 + duration: root.failed ? 10000 : 1000 + onFinished: popupLoader.active = false + + // Pause the animation when the mouse is hovering over the popup, + // so it stays onscreen while reading. This updates reactively + // when the mouse moves on and off the popup. + paused: mouseArea.containsMouse + } + } + // Its bg + Rectangle { + id: bar_bg + z: 1 + color: root.failed ? "#30af1b25" : "#4027643e" + property real maxWidth: Math.max(title.width, info.width) + anchors { + left: parent.left + right: parent.right + leftMargin: (parent.width - maxWidth) / 2 + rightMargin: anchors.leftMargin + bottom: parent.bottom + bottomMargin: 10 + } + height: root.progressHeight + radius: 9999 + width: bar.width + } + + // We could set `running: true` inside the animation, but the width of the + // rectangle might not be calculated yet, due to the layout. + // In the `Component.onCompleted` event handler, all of the component's + // properties and children have been initialized. + Component.onCompleted: anim.start() + } + } + } }