reload-popup: add example
This commit is contained in:
parent
7d0bfb6b61
commit
c30a4faf18
14
reload-popup/README.md
Normal file
14
reload-popup/README.md
Normal 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)
|
126
reload-popup/ReloadPopup.qml
Normal file
126
reload-popup/ReloadPopup.qml
Normal 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
BIN
reload-popup/reload-bad.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 73 KiB |
BIN
reload-popup/reload-good.png
Normal file
BIN
reload-popup/reload-good.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 52 KiB |
25
reload-popup/shell.qml
Normal file
25
reload-popup/shell.qml
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue