From 4011f4b5c876199cd0a65a33bc745d1577a8e9c0 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 31 Aug 2025 21:27:29 -0400 Subject: [PATCH 1/6] move bar to unified window setup --- modules/Shell.qml | 63 +++++++++++++++++++++++++++++++++++++++++++-- modules/bar/Bar.qml | 63 ++++++++++----------------------------------- 2 files changed, 75 insertions(+), 51 deletions(-) diff --git a/modules/Shell.qml b/modules/Shell.qml index 41e7643..9971716 100644 --- a/modules/Shell.qml +++ b/modules/Shell.qml @@ -4,8 +4,9 @@ import "launcher" import "pomodoro" import "powermenu" import "storybook" -import Quickshell import QtQuick +import Quickshell +import Quickshell.Wayland Variants { model: Quickshell.screens @@ -15,7 +16,65 @@ Variants { required property ShellScreen modelData - Bar {} + PanelWindow { + id: exclusionZone + + anchors.top: true + anchors.left: true + anchors.right: true + + implicitWidth: bar.width + implicitHeight: bar.height + + color: "transparent" + } + + PanelWindow { + id: topWindow + + anchors.top: true + anchors.left: true + anchors.right: true + anchors.bottom: true + + color: 'transparent' + + WlrLayershell.exclusionMode: ExclusionMode.Ignore + WlrLayershell.layer: WlrLayer.Top + + mask: Region { + width: topWindow.width + height: topWindow.height + intersection: Intersection.Xor + regions: regions.instances + } + + Variants { + id: regions + + model: panels.children + + Region { + required property Item modelData + + x: modelData.x + y: modelData.y + width: modelData.width + height: modelData.height + intersection: Intersection.Subtract + } + } + + Item { + id: panels + + anchors.fill: parent + + Bar { + id: bar + } + } + } Launcher {} Pomodoro {} PowerMenu {} diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml index c39e847..04c61de 100644 --- a/modules/bar/Bar.qml +++ b/modules/bar/Bar.qml @@ -3,55 +3,29 @@ import "components/bluetooth" import "components/hyprland" import "components/notifications" import "components/tray" +import qs.components import qs.config import QtQuick import QtQuick.Layouts -import Quickshell -import Quickshell.Wayland -PanelWindow { - id: parentWindow +StyledWrapperRectangle { + id: root - anchors.top: true - anchors.left: true - anchors.right: true + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + anchors.leftMargin: Dimensions.bar.horizontalMargins + anchors.rightMargin: Dimensions.bar.horizontalMargins + anchors.topMargin: Dimensions.bar.verticalMargins + anchors.bottomMargin: Dimensions.bar.verticalMargins - implicitHeight: Dimensions.bar.height - color: 'transparent' + margin: 4 - WlrLayershell.layer: WlrLayer.Top - - Item { - - anchors.fill: parent - anchors.leftMargin: Dimensions.bar.horizontalMargins - anchors.rightMargin: Dimensions.bar.horizontalMargins - anchors.topMargin: Dimensions.bar.verticalMargins - anchors.bottomMargin: Dimensions.bar.verticalMargins - - Rectangle { - id: background - anchors.fill: parent - color: Theme.palette.base300 - radius: Dimensions.radius - - border { - color: Theme.palette.base100 - width: Dimensions.bar.border - pixelAligned: true - } - } + RowLayout { RowLayout { id: leftbar - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - - anchors.leftMargin: Dimensions.bar.horizontalPadding - anchors.topMargin: Dimensions.bar.verticalPadding - anchors.bottomMargin: Dimensions.bar.verticalPadding - spacing: Dimensions.bar.spacing SystemLogo { @@ -66,11 +40,7 @@ PanelWindow { RowLayout { id: centerbar - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - - anchors.topMargin: Dimensions.bar.verticalPadding - anchors.bottomMargin: Dimensions.bar.verticalPadding + Layout.alignment: Qt.AlignHCenter spacing: Dimensions.bar.spacing @@ -80,12 +50,7 @@ PanelWindow { RowLayout { id: rightbar - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - - anchors.rightMargin: Dimensions.bar.horizontalPadding - anchors.topMargin: Dimensions.bar.verticalPadding - anchors.bottomMargin: Dimensions.bar.verticalPadding + Layout.alignment: Qt.AlignRight spacing: Dimensions.bar.spacing From a40f7666dc311797b0739719f6324d988d236b76 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 31 Aug 2025 23:28:54 -0400 Subject: [PATCH 2/6] rename pomodoro service --- modules/pomodoro/Pomodoro.qml | 16 ++++++++-------- services/{Pomodoro.qml => PomodoroService.qml} | 0 2 files changed, 8 insertions(+), 8 deletions(-) rename services/{Pomodoro.qml => PomodoroService.qml} (100%) diff --git a/modules/pomodoro/Pomodoro.qml b/modules/pomodoro/Pomodoro.qml index 9d970d8..9dba513 100644 --- a/modules/pomodoro/Pomodoro.qml +++ b/modules/pomodoro/Pomodoro.qml @@ -55,10 +55,10 @@ StyledWindow { id: circle radius: 150 borderColor: Theme.palette.base100 - strokeColor: Pomodoro.state == "timer" ? Theme.palette.primary : Theme.palette.warning + strokeColor: PomodoroService.state == "timer" ? Theme.palette.primary : Theme.palette.warning strokeWidth: 12 fillColor: button.hovered ? Theme.palette.primary : "transparent" - percentage: (Pomodoro.state == "timer" ? (Pomodoro.initialTime - Pomodoro.remainingTime) : Pomodoro.remainingTime) / Pomodoro.initialTime % 1 + percentage: (PomodoroService.state == "timer" ? (PomodoroService.initialTime - PomodoroService.remainingTime) : PomodoroService.remainingTime) / PomodoroService.initialTime % 1 } StyledIconButton { @@ -69,17 +69,17 @@ StyledWindow { radius: 9999 focus: root.visible - text: Pomodoro.running ? Icons.square : Icons.play + text: PomodoroService.running ? Icons.square : Icons.play font.pixelSize: 48 background: undefined onClicked: { - Pomodoro.toggle(); + PomodoroService.toggle(); } Keys.onSpacePressed: event => { event.accepted = true; - Pomodoro.toggle(); + PomodoroService.toggle(); } Keys.onEscapePressed: event => { event.accepted = true; @@ -87,7 +87,7 @@ StyledWindow { } Keys.onTabPressed: event => { event.accepted = true; - Pomodoro.reset(); + PomodoroService.reset(); } } } @@ -95,7 +95,7 @@ StyledWindow { StyledText { Layout.alignment: Qt.AlignHCenter text: { - const date = new Date(Pomodoro.remainingTime); + const date = new Date(PomodoroService.remainingTime); return `${date.getMinutes().toString().padStart(2, "0")}:${(date.getSeconds() % 3600).toString().padStart(2, "0")}`; } font.pixelSize: 16 @@ -108,7 +108,7 @@ StyledWindow { text: "Reset" onClicked: { - Pomodoro.reset(); + PomodoroService.reset(); } } } diff --git a/services/Pomodoro.qml b/services/PomodoroService.qml similarity index 100% rename from services/Pomodoro.qml rename to services/PomodoroService.qml From 37dfd1255a8d1afa89fca1ab7515b9142e8ab6f5 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 1 Sep 2025 13:31:49 -0400 Subject: [PATCH 3/6] use window popup type to allow menu outside of parent window --- components/StyledMenu.qml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/components/StyledMenu.qml b/components/StyledMenu.qml index 24815b6..12830d7 100644 --- a/components/StyledMenu.qml +++ b/components/StyledMenu.qml @@ -1,4 +1,5 @@ import qs.config +import qs.services import QtQuick import QtQuick.Controls @@ -10,6 +11,11 @@ Menu { focus: true closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent + popupType: Popup.Window + + function toggle() { + visible ? close() : open(); + } enter: Transition { NumberAnimation { From 75f780753f9cf0ad4cc0ab42bfb86a730f722e2a Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 2 Sep 2025 12:09:35 -0400 Subject: [PATCH 4/6] bar margin --- modules/bar/Bar.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml index 04c61de..231600b 100644 --- a/modules/bar/Bar.qml +++ b/modules/bar/Bar.qml @@ -19,7 +19,7 @@ StyledWrapperRectangle { anchors.topMargin: Dimensions.bar.verticalMargins anchors.bottomMargin: Dimensions.bar.verticalMargins - margin: 4 + margin: 6 RowLayout { From 3074bcae38bdcb87173ac59d4bf5a4ad73323a5a Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 4 Sep 2025 18:57:12 -0400 Subject: [PATCH 5/6] remove menu stuff --- components/StyledMenu.qml | 34 ------------------------------ components/StyledMenuItem.qml | 9 -------- components/StyledMenuSeparator.qml | 9 -------- modules/storybook/Storybook.qml | 33 +---------------------------- 4 files changed, 1 insertion(+), 84 deletions(-) delete mode 100644 components/StyledMenu.qml delete mode 100644 components/StyledMenuItem.qml delete mode 100644 components/StyledMenuSeparator.qml diff --git a/components/StyledMenu.qml b/components/StyledMenu.qml deleted file mode 100644 index 12830d7..0000000 --- a/components/StyledMenu.qml +++ /dev/null @@ -1,34 +0,0 @@ -import qs.config -import qs.services -import QtQuick -import QtQuick.Controls - -Menu { - id: root - - palette.window: Theme.palette.base100 - palette.base: Theme.palette.base100 - - focus: true - closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent - popupType: Popup.Window - - function toggle() { - visible ? close() : open(); - } - - enter: Transition { - NumberAnimation { - property: "opacity" - from: 0.0 - to: 1.0 - } - } - exit: Transition { - NumberAnimation { - property: "opacity" - from: 1.0 - to: 0.0 - } - } -} diff --git a/components/StyledMenuItem.qml b/components/StyledMenuItem.qml deleted file mode 100644 index fe078d2..0000000 --- a/components/StyledMenuItem.qml +++ /dev/null @@ -1,9 +0,0 @@ -import qs.config -import QtQuick -import QtQuick.Controls - -MenuItem { - palette.text: Theme.palette.basecontent - palette.highlight: Theme.palette.primary - palette.highlightedText: Theme.palette.primarycontent -} diff --git a/components/StyledMenuSeparator.qml b/components/StyledMenuSeparator.qml deleted file mode 100644 index 2759e47..0000000 --- a/components/StyledMenuSeparator.qml +++ /dev/null @@ -1,9 +0,0 @@ -import qs.config -import QtQuick -import QtQuick.Controls - -MenuSeparator { - palette.text: Theme.palette.basecontent - palette.highlight: Theme.palette.primary - palette.highlightedText: Theme.palette.primarycontent -} diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 5d9d10d..1b5af0a 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -10,9 +10,8 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts -StyledWindow { +StyledPopupWindow { id: root - name: "storybook" visible: Visibility.storybook implicitWidth: rect.width @@ -152,36 +151,6 @@ StyledWindow { } } - ColumnLayout { - StyledText { - text: "Popup" - font.pixelSize: 18 - } - Button { - id: fileButton - text: "File" - onPressed: menu.visible ? menu.close() : menu.open() - - StyledPopup { - id: menu - - anchor.item: fileButton - - Column { - StyledButton { - text: "New..." - } - StyledButton { - text: "Open..." - } - StyledText { - text: "Close" - } - } - } - } - } - ColumnLayout { StyledText { text: "Drawer" From 11d0e4a8380c382d44349579bbc5f839edc78ea0 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 4 Sep 2025 19:59:52 -0400 Subject: [PATCH 6/6] try that out --- ...{StyledPopup.qml => StyledPopupWindow.qml} | 15 +- modules/Shell.qml | 6 +- modules/storybook/Storybook.qml | 299 ++++++++---------- 3 files changed, 152 insertions(+), 168 deletions(-) rename components/{StyledPopup.qml => StyledPopupWindow.qml} (51%) diff --git a/components/StyledPopup.qml b/components/StyledPopupWindow.qml similarity index 51% rename from components/StyledPopup.qml rename to components/StyledPopupWindow.qml index c335b7a..955f92d 100644 --- a/components/StyledPopup.qml +++ b/components/StyledPopupWindow.qml @@ -6,9 +6,10 @@ import Quickshell.Hyprland PopupWindow { id: root - implicitWidth: background.implicitWidth - implicitHeight: background.implicitHeight + implicitWidth: contentItem.children.reduce((prev, child) => Math.max(prev, child.width), 0) + implicitHeight: contentItem.children.reduce((prev, child) => prev + child.height, 0) color: "transparent" + contentItem.focus: visible function open() { visible = true; @@ -18,19 +19,19 @@ PopupWindow { visible = false; } + // WlrLayershell.layer: WlrLayer.Top + // WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None HyprlandFocusGrab { - id: grab + active: root.visible windows: [root] onCleared: { root.close(); } - } + } Rectangle { id: background - anchors.centerIn: root - implicitWidth: root.contentItem.children.reduce((prev, child) => Math.max(prev, child.width), 0) - implicitHeight: root.contentItem.children.reduce((prev, child) => prev + child.height, 0) + anchors.fill: parent color: Theme.palette.base200 radius: 8 } diff --git a/modules/Shell.qml b/modules/Shell.qml index 9971716..69e9e2b 100644 --- a/modules/Shell.qml +++ b/modules/Shell.qml @@ -78,7 +78,11 @@ Variants { Launcher {} Pomodoro {} PowerMenu {} - Storybook {} + Storybook { + anchor.window: topWindow + anchor.rect.x: topWindow.width / 2 - width / 2 + anchor.rect.y: topWindow.height / 4 + } Drawers {} } } diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 1b5af0a..0021fcb 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -4,8 +4,6 @@ import qs.components import qs.config import qs.constants import qs.services -import Quickshell.Hyprland -import Quickshell.Wayland import QtQuick import QtQuick.Controls import QtQuick.Layouts @@ -14,184 +12,165 @@ StyledPopupWindow { id: root visible: Visibility.storybook - implicitWidth: rect.width - implicitHeight: rect.height - WlrLayershell.layer: WlrLayer.Top - WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None + GridLayout { + id: grid - HyprlandFocusGrab { - active: Visibility.storybook - windows: [root] - onCleared: { - Visibility.storybook = false; + flow: GridLayout.TopToBottom + columns: 2 + rows: 10 + + StyledText { + Layout.columnSpan: grid.columns + Layout.alignment: Qt.AlignHCenter + text: "Components" + font.pixelSize: 24 + font.bold: true + font.underline: true + bottomPadding: 24 } - } - - StyledWrapperRectangle { - id: rect - - margin: 48 - - GridLayout { - id: grid - - flow: GridLayout.TopToBottom - columns: 2 - rows: 10 + ColumnLayout { StyledText { - Layout.columnSpan: grid.columns - Layout.alignment: Qt.AlignHCenter - text: "Components" - font.pixelSize: 24 - font.bold: true - font.underline: true - bottomPadding: 24 + text: "Icon Button" + font.pixelSize: 18 + } + StyledIconButton { + text: Icons.square + } + } + + ColumnLayout { + StyledText { + text: "Switch" + font.pixelSize: 18 } - ColumnLayout { - StyledText { - text: "Icon Button" - font.pixelSize: 18 - } - StyledIconButton { - text: Icons.square + StyledSwitch { + text: "Enable" + } + } + + ColumnLayout { + StyledText { + text: "ToolTip" + font.pixelSize: 18 + } + Button { + id: toolTipButton + text: "Hello world!" + StyledToolTip { + visible: toolTipButton.hovered + text: qsTr("Save the active project") } } + } - ColumnLayout { - StyledText { - text: "Switch" - font.pixelSize: 18 - } + ColumnLayout { + StyledText { + text: "Slider" + font.pixelSize: 18 + } + StyledSlider { + id: slider + from: 0 + to: 100 + value: 50 + } + } - StyledSwitch { - text: "Enable" + ColumnLayout { + StyledText { + text: "ProgressBar" + font.pixelSize: 18 + } + StyledProgressBar { + id: progressBar + indeterminate: true + implicitHeight: 10 + from: 0 + to: 100 + value: 50 + } + } + + ColumnLayout { + StyledText { + text: "ListView" + font.pixelSize: 18 + } + StyledWrapperRectangle { + border.color: Theme.palette.base100 + border.width: 2 + StyledListView { + implicitWidth: 200 + implicitHeight: 100 + model: 10 + delegate: StyledText { + text: "Hello world!" + } } } + } - ColumnLayout { - StyledText { - text: "ToolTip" - font.pixelSize: 18 + ColumnLayout { + StyledText { + text: "Mpris Player Selector" + font.pixelSize: 18 + } + MprisPlayerSelector {} + } + + ColumnLayout { + StyledText { + text: "Mpris Controller" + font.pixelSize: 18 + } + MprisController { + player: Mpris.active ?? null + } + } + + ColumnLayout { + StyledText { + text: "Drawer" + font.pixelSize: 18 + } + RowLayout { + Button { + text: "Top" + onClicked: { + drawer.x = root.width / 2 - drawer.width / 2; + drawer.y = 0; + drawer.edge = Qt.TopEdge; + drawer.open(); + } } Button { - id: toolTipButton - text: "Hello world!" - StyledToolTip { - visible: toolTipButton.hovered - text: qsTr("Save the active project") + text: "Left" + onClicked: { + drawer.y = root.height / 2 - drawer.height / 2; + drawer.x = 0; + drawer.edge = Qt.LeftEdge; + drawer.open(); } } - } - - ColumnLayout { - StyledText { - text: "Slider" - font.pixelSize: 18 - } - StyledSlider { - id: slider - from: 0 - to: 100 - value: 50 - } - } - - ColumnLayout { - StyledText { - text: "ProgressBar" - font.pixelSize: 18 - } - StyledProgressBar { - id: progressBar - indeterminate: true - implicitHeight: 10 - from: 0 - to: 100 - value: 50 - } - } - - ColumnLayout { - StyledText { - text: "ListView" - font.pixelSize: 18 - } - StyledWrapperRectangle { - border.color: Theme.palette.base100 - border.width: 2 - StyledListView { - implicitWidth: 200 - implicitHeight: 100 - model: 10 - delegate: StyledText { - text: "Hello world!" - } + Button { + text: "Right" + onClicked: { + drawer.y = root.height / 2 - drawer.height / 2; + drawer.x = 0; + drawer.edge = Qt.RightEdge; + drawer.open(); } } - } - - ColumnLayout { - StyledText { - text: "Mpris Player Selector" - font.pixelSize: 18 - } - MprisPlayerSelector {} - } - - ColumnLayout { - StyledText { - text: "Mpris Controller" - font.pixelSize: 18 - } - MprisController { - player: Mpris.active ?? null - } - } - - ColumnLayout { - StyledText { - text: "Drawer" - font.pixelSize: 18 - } - RowLayout { - Button { - text: "Top" - onClicked: { - drawer.x = root.width / 2 - drawer.width / 2; - drawer.y = 0; - drawer.edge = Qt.TopEdge; - drawer.open(); - } - } - Button { - text: "Left" - onClicked: { - drawer.y = root.height / 2 - drawer.height / 2; - drawer.x = 0; - drawer.edge = Qt.LeftEdge; - drawer.open(); - } - } - Button { - text: "Right" - onClicked: { - drawer.y = root.height / 2 - drawer.height / 2; - drawer.x = 0; - drawer.edge = Qt.RightEdge; - drawer.open(); - } - } - Button { - text: "Bottom" - onClicked: { - drawer.x = root.width / 2 - drawer.width / 2; - drawer.y = 0; - drawer.edge = Qt.BottomEdge; - drawer.open(); - } + Button { + text: "Bottom" + onClicked: { + drawer.x = root.width / 2 - drawer.width / 2; + drawer.y = 0; + drawer.edge = Qt.BottomEdge; + drawer.open(); } } }