Skip to content

Fixing panel window using height and width are deprecated #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Malick-Tammal wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fixing panel window using height and width are deprecated #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 122 additions & 122 deletions reload-popup/ReloadPopup.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,126 +3,126 @@ 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() {
Quickshell.inhibitReloadPopup();
root.failed = false;
popupLoader.loading = true;
}

function onReloadFailed(error: string) {
Quickshell.inhibitReloadPopup();
// 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()
}
}
}
id: root
property bool failed;
property string errorString;

// Connect to the Quickshell global to listen for the reload signals.
Connections {
target: Quickshell

function onReloadCompleted() {
Quickshell.inhibitReloadPopup();
root.failed = false;
popupLoader.loading = true;
}

function onReloadFailed(error: string) {
Quickshell.inhibitReloadPopup();
// 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
}

implicitWidth: rect.width
implicitHeight: 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()
}
}
}
}
32 changes: 16 additions & 16 deletions reload-popup/shell.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@ import QtQuick
import Quickshell

ShellRoot {
// Add the popup to the shell.
ReloadPopup {}
// 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
}
// 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
implicitHeight: 30

Text {
anchors.centerIn: parent
text: "I'm a bar!"
}
}
Text {
anchors.centerIn: parent
text: "I'm a bar!"
}
}
}