reload-popup: add example

This commit is contained in:
outfoxxed 2024-05-30 05:33:50 -07:00
parent 7d0bfb6b61
commit c30a4faf18
Signed by: outfoxxed
GPG Key ID: 4C88A185FB89301E
5 changed files with 165 additions and 0 deletions

14
reload-popup/README.md Normal file
View File

@ -0,0 +1,14 @@
# Reload Popup
A popup in the corner of the screen that appears when hot reloading the configuration,
which you can easily add to an existing shell.
You can try it out by running `quickshell -p shell.qml` which will put a simple bar
on the screen. The popup will appear if the file is edited, and display the error
if the configuration is invalid.
After making a good edit:
![](./reload-good.png)
After making a bad edit:
![](./reload-bad.png)

View File

@ -0,0 +1,126 @@
import QtQuick
import QtQuick.Layouts
import Quickshell
Scope {
id: root
property bool failed;
property string errorString;
// Connect to the Quickshell global to listen for the reload signals.
Connections {
target: Quickshell
function onReloadCompleted() {
root.failed = false;
popupLoader.loading = true;
}
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;
}
}
// Keep the popup in a loader because it isn't needed most of the timeand will take up
// memory that could be used for something else.
LazyLoader {
id: popupLoader
PanelWindow {
id: popup
anchors {
top: true
left: true
}
margins {
top: 25
left: 25
}
width: rect.width
height: rect.height
// color blending is a bit odd as detailed in the type reference.
color: "transparent"
Rectangle {
id: rect
color: failed ? "#40802020" : "#40009020"
implicitHeight: layout.implicitHeight + 50
implicitWidth: layout.implicitWidth + 30
// Fills the whole area of the rectangle, making any clicks go to it,
// which dismiss the popup.
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: popupLoader.active = false
// makes the mouse area track mouse hovering, so the hide animation
// can be paused when hovering.
hoverEnabled: true
}
ColumnLayout {
id: layout
anchors {
top: parent.top
topMargin: 20
horizontalCenter: parent.horizontalCenter
}
Text {
text: root.failed ? "Reload failed." : "Reloaded completed!"
color: "white"
}
Text {
text: root.errorString
color: "white"
// 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
color: "#20ffffff"
anchors.bottom: parent.bottom
anchors.left: parent.left
height: 20
PropertyAnimation {
id: anim
target: bar
property: "width"
from: rect.width
to: 0
duration: failed ? 10000 : 800
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
}
}
// 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()
}
}
}
}

BIN
reload-popup/reload-bad.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

25
reload-popup/shell.qml Normal file
View File

@ -0,0 +1,25 @@
import QtQuick
import Quickshell
ShellRoot {
// Add the popup to the shell.
ReloadPopup {}
// The rest of your shell, in this case a very simple bar.
// Try editing this.
PanelWindow {
anchors {
left: true
top: true
right: true
}
height: 30
Text {
anchors.centerIn: parent
text: "I'm a bar!"
an error
}
}
}