From 4011f4b5c876199cd0a65a33bc745d1577a8e9c0 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 31 Aug 2025 21:27:29 -0400 Subject: [PATCH 01/90] 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 02/90] 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 16e5059c7afff8c500c0fd3d44fd1329bc353fea Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 31 Aug 2025 23:35:24 -0400 Subject: [PATCH 03/90] empty item --- components/StyledSwitch.qml | 2 +- modules/pomodoro/Pomodoro.qml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/StyledSwitch.qml b/components/StyledSwitch.qml index c2af7db..f1671b1 100644 --- a/components/StyledSwitch.qml +++ b/components/StyledSwitch.qml @@ -51,5 +51,5 @@ Switch { } } - background: null + background: Item {} } diff --git a/modules/pomodoro/Pomodoro.qml b/modules/pomodoro/Pomodoro.qml index 9d970d8..249dcda 100644 --- a/modules/pomodoro/Pomodoro.qml +++ b/modules/pomodoro/Pomodoro.qml @@ -72,7 +72,7 @@ StyledWindow { text: Pomodoro.running ? Icons.square : Icons.play font.pixelSize: 48 - background: undefined + background: Item {} onClicked: { Pomodoro.toggle(); } From 37dfd1255a8d1afa89fca1ab7515b9142e8ab6f5 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 1 Sep 2025 13:31:49 -0400 Subject: [PATCH 04/90] 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 05/90] 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 06/90] 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 07/90] 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(); } } } From a12b36c188cc7fa58d05ca4c2079ec95eec3bf8f Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 4 Sep 2025 20:01:36 -0400 Subject: [PATCH 08/90] paths --- config/Paths.qml | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 config/Paths.qml diff --git a/config/Paths.qml b/config/Paths.qml new file mode 100644 index 0000000..34116da --- /dev/null +++ b/config/Paths.qml @@ -0,0 +1,47 @@ +pragma Singleton + +import Quickshell +import Qt.labs.platform + +Singleton { + id: root + + readonly property url home: StandardPaths.standardLocations(StandardPaths.HomeLocation)[0] + readonly property url pictures: StandardPaths.standardLocations(StandardPaths.PicturesLocation)[0] + + readonly property url data: `${StandardPaths.standardLocations(StandardPaths.GenericDataLocation)[0]}/lux` + readonly property url state: `${StandardPaths.standardLocations(StandardPaths.GenericStateLocation)[0]}/lux` + readonly property url cache: `${StandardPaths.standardLocations(StandardPaths.GenericCacheLocation)[0]}/lux` + readonly property url config: `${StandardPaths.standardLocations(StandardPaths.GenericConfigLocation)[0]}/lux` + + readonly property url imagecache: `${cache}/imagecache` + + function stringify(path: url): string { + let str = path.toString(); + if (str.startsWith("root:/")) + str = `file://${Quickshell.shellDir}/${str.slice(6)}`; + else if (str.startsWith("/")) + str = `file://${str}`; + return new URL(str).pathname; + } + + function expandTilde(path: string): string { + return strip(path.replace("~", stringify(root.home))); + } + + function shortenHome(path: string): string { + return path.replace(strip(root.home), "~"); + } + + function strip(path: url): string { + return stringify(path).replace("file://", ""); + } + + function mkdir(path: url): void { + Quickshell.execDetached(["mkdir", "-p", strip(path)]); + } + + function copy(from: url, to: url): void { + Quickshell.execDetached(["cp", strip(from), strip(to)]); + } +} From c53f0c2c41f1b1a5395b6d6f766b16fa610e3596 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 12:12:11 -0400 Subject: [PATCH 09/90] migrate themes to config dir --- config/Theme.qml | 86 +++++++++++++++++++++++++++++++++++------------- 1 file changed, 63 insertions(+), 23 deletions(-) diff --git a/config/Theme.qml b/config/Theme.qml index 91fbf0b..afc58e4 100644 --- a/config/Theme.qml +++ b/config/Theme.qml @@ -1,7 +1,9 @@ pragma Singleton +pragma ComponentBehavior: Bound import QtQuick import Quickshell +import Quickshell.Io Singleton { id: root @@ -10,30 +12,68 @@ Singleton { source: "../assets/lucide.woff" } property string fontFamily: "JetBrainsMono Nerd Font" - property Palette palette: Palette {} + property var palette: theme.palette - component Palette: QtObject { - id: palette + property list themes: [] + onThemesChanged: { + if (!themes.includes(currentTheme)) { + currentTheme = "dark"; + } + } + property string currentTheme: "dark" - property color primary: "#1fb854" - property color primarycontent: "#000000" - property color secondary: "#1eb88e" - property color secondarycontent: "#000c07" - property color accent: "#1fb8ab" - property color accentcontent: "#010c0b" - property color neutral: "#19362d" - property color neutralcontent: "#cdd3d1" - property color base100: "#1b1717" - property color base200: "#161212" - property color base300: "#110d0d" - property color basecontent: "#cac9c9" - property color info: "#00b5ff" - property color infocontent: "#000000" - property color success: "#00a96e" - property color successcontent: "#000000" - property color warning: "#ffbe00" - property color warningcontent: "#000000" - property color error: "#ff5861" - property color errorcontent: "#000000" + Process { + running: true + command: ["bash", "-c", `inotifywait -m -r ~/.config/lux -e modify,move,create,delete | while read dir action; do ls -m "$dir"; done`] + stderr: StdioCollector { + onStreamFinished: console.log(`line read: ${this.text}`) + } + stdout: SplitParser { + splitMarker: "\n" + onRead: data => { + const themes = data.split(", ").filter(item => item.endsWith(".json")).map(item => item.replace(".json", "")); + if (themes.length == 0) { + return; + } + root.themes = themes; + } + } + } + + FileView { + id: jsonFile + path: `${Paths.config}/themes/${root.currentTheme}.json` + watchChanges: true + onFileChanged: reload() + + // when changes are made to properties in the adapter, save them + onAdapterUpdated: writeAdapter() + + JsonAdapter { + id: theme + + property JsonObject palette: JsonObject { + property color primary: "#605dff" + property color primarycontent: "#edf1fe" + property color secondary: "#f43098" + property color secondarycontent: "#f9e4f0" + property color accent: "#00d3bb" + property color accentcontent: "#084d49" + property color neutral: "#09090b" + property color neutralcontent: "#e4e4e7" + property color base100: "#1d232a" + property color base200: "#191e24" + property color base300: "#15191e" + property color basecontent: "#ecf9ff" + property color info: "#00bafe" + property color infocontent: "#042e49" + property color success: "#00d390" + property color successcontent: "#004c39" + property color warning: "#fcb700" + property color warningcontent: "#793205" + property color error: "#ff627d" + property color errorcontent: "#4d0218" + } + } } } From a44b6f5e4499b54a86b93ab360c6afe90acf7538 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 13:12:40 -0400 Subject: [PATCH 10/90] implement theme file storage --- config/Theme.qml | 32 ++++++++++++++++++++++++-------- modules/storybook/Storybook.qml | 17 +++++++++++++++++ 2 files changed, 41 insertions(+), 8 deletions(-) diff --git a/config/Theme.qml b/config/Theme.qml index afc58e4..b686079 100644 --- a/config/Theme.qml +++ b/config/Theme.qml @@ -14,13 +14,8 @@ Singleton { property string fontFamily: "JetBrainsMono Nerd Font" property var palette: theme.palette - property list themes: [] - onThemesChanged: { - if (!themes.includes(currentTheme)) { - currentTheme = "dark"; - } - } - property string currentTheme: "dark" + property alias themes: cache.themes + property alias currentTheme: cache.current Process { running: true @@ -41,7 +36,28 @@ Singleton { } FileView { - id: jsonFile + path: `${Paths.cache}/theme.json` + + watchChanges: true + onFileChanged: reload() + + // when changes are made to properties in the adapter, save them + onAdapterUpdated: writeAdapter() + + JsonAdapter { + id: cache + + property string current: "dark" + property list themes: ["dark"] + onThemesChanged: { + if (!themes.includes(current)) { + current = themes[0]; + } + } + } + } + + FileView { path: `${Paths.config}/themes/${root.currentTheme}.json` watchChanges: true onFileChanged: reload() diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 5d9d10d..4e60d14 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -61,6 +61,23 @@ StyledWindow { } } + ColumnLayout { + StyledText { + text: "Theme Selector" + font.pixelSize: 18 + } + RowLayout { + Repeater { + model: Theme.themes + delegate: StyledButton { + required property var modelData + text: modelData + onClicked: Theme.currentTheme = modelData + } + } + } + } + ColumnLayout { StyledText { text: "Switch" From f7e8fb7720ee01e74c37ccf7fe0153d6be68c76a Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 13:44:26 -0400 Subject: [PATCH 11/90] adjust theme on components --- components/StyledButton.qml | 17 +++++------- components/StyledDrawer.qml | 2 +- components/StyledIconButton.qml | 36 ++++++++++--------------- components/StyledLabel.qml | 10 +++---- components/StyledTextField.qml | 3 ++- components/StyledToolTip.qml | 2 +- components/StyledWrapperRectangle.qml | 10 +++---- modules/bar/Bar.qml | 4 +-- modules/bar/components/Caffeine.qml | 3 ++- modules/drawers/dashboard/Dashboard.qml | 3 ++- modules/launcher/AppList.qml | 1 - modules/launcher/Launcher.qml | 3 +++ modules/powermenu/PowerMenu.qml | 2 -- 13 files changed, 42 insertions(+), 54 deletions(-) diff --git a/components/StyledButton.qml b/components/StyledButton.qml index ead62b4..fb9be2b 100644 --- a/components/StyledButton.qml +++ b/components/StyledButton.qml @@ -8,19 +8,16 @@ Button { property alias radius: rectangle.radius font.pixelSize: 14 - padding: 6 + verticalPadding: 6 + horizontalPadding: 8 - palette.button: hovered ? Theme.palette.primary : Theme.palette.base100 - Behavior on palette.button { - ColorAnimation { - duration: 100 - } + palette.button: hovered ? Theme.palette.primary : Theme.palette.base200 + ColorAnimation on palette.button { + duration: 100 } palette.buttonText: hoverEnabled && hovered ? Theme.palette.primarycontent : Theme.palette.basecontent - Behavior on palette.buttonText { - ColorAnimation { - duration: 100 - } + ColorAnimation on palette.buttonText { + duration: 100 } wheelEnabled: true diff --git a/components/StyledDrawer.qml b/components/StyledDrawer.qml index c153482..eafe214 100644 --- a/components/StyledDrawer.qml +++ b/components/StyledDrawer.qml @@ -20,6 +20,6 @@ Drawer { topRightRadius = 8; } } - color: Theme.palette.base200 + color: Theme.palette.base100 } } diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml index 780113d..186cb5d 100644 --- a/components/StyledIconButton.qml +++ b/components/StyledIconButton.qml @@ -15,9 +15,9 @@ RoundButton { property int rotation: 0 font.family: loader.font.family - font.pixelSize: 18 + font.pixelSize: 19 radius: 8 - padding: 6 + padding: 8 HoverHandler { cursorShape: Qt.PointingHandCursor @@ -28,34 +28,26 @@ RoundButton { font: control.font text: control.text color: control.color - Behavior on color { - ColorAnimation { - duration: 100 - } + ColorAnimation on color { + duration: 100 } rotation: control.rotation - Behavior on rotation { - RotationAnimation { - duration: 200 - easing.type: Easing.InOutCubic - } + RotationAnimation on rotation { + duration: 200 + easing.type: Easing.InOutCubic } } background: Rectangle { id: rect - border.color: control.hovered ? Theme.palette.primary : Theme.palette.base100 - Behavior on border.color { - ColorAnimation { - duration: 100 - } + border.color: control.hovered ? Theme.palette.base300 : Theme.palette.base200 + ColorAnimation on border.color { + duration: 100 } - border.width: 2 - color: control.hovered ? Theme.palette.primary : Theme.palette.base100 - Behavior on color { - ColorAnimation { - duration: 100 - } + border.width: 0 + color: control.hovered ? Theme.palette.primary : Theme.palette.base200 + ColorAnimation on color { + duration: 100 } radius: control.radius } diff --git a/components/StyledLabel.qml b/components/StyledLabel.qml index 4b9dd07..7dd00b2 100644 --- a/components/StyledLabel.qml +++ b/components/StyledLabel.qml @@ -6,11 +6,9 @@ WrapperRectangle { id: root margin: 8 radius: 8 - color: Theme.palette.base100 - Behavior on color { - ColorAnimation { - duration: 200 - easing.type: Easing.InOutQuad - } + color: Theme.palette.base200 + ColorAnimation on color { + duration: 200 + easing.type: Easing.InOutQuad } } diff --git a/components/StyledTextField.qml b/components/StyledTextField.qml index bae90ba..8e5083f 100644 --- a/components/StyledTextField.qml +++ b/components/StyledTextField.qml @@ -1,8 +1,9 @@ import qs.config +import QtQuick import QtQuick.Controls TextField { color: Theme.palette.basecontent - background: null + background: Item {} } diff --git a/components/StyledToolTip.qml b/components/StyledToolTip.qml index 0c09a95..074c129 100644 --- a/components/StyledToolTip.qml +++ b/components/StyledToolTip.qml @@ -14,6 +14,6 @@ ToolTip { background: Rectangle { radius: 8 - color: Theme.palette.base200 + color: Theme.palette.base100 } } diff --git a/components/StyledWrapperRectangle.qml b/components/StyledWrapperRectangle.qml index 19a70d1..5c73284 100644 --- a/components/StyledWrapperRectangle.qml +++ b/components/StyledWrapperRectangle.qml @@ -4,11 +4,9 @@ import Quickshell.Widgets WrapperRectangle { radius: 8 - color: Theme.palette.base300 - Behavior on color { - ColorAnimation { - duration: 200 - easing.type: Easing.InOutQuad - } + color: Theme.palette.base100 + ColorAnimation on color { + duration: 200 + easing.type: Easing.InOutQuad } } diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml index c39e847..620823f 100644 --- a/modules/bar/Bar.qml +++ b/modules/bar/Bar.qml @@ -32,11 +32,11 @@ PanelWindow { Rectangle { id: background anchors.fill: parent - color: Theme.palette.base300 + color: Theme.palette.base100 radius: Dimensions.radius border { - color: Theme.palette.base100 + color: Theme.palette.base200 width: Dimensions.bar.border pixelAligned: true } diff --git a/modules/bar/components/Caffeine.qml b/modules/bar/components/Caffeine.qml index 82861f9..47a80c4 100644 --- a/modules/bar/components/Caffeine.qml +++ b/modules/bar/components/Caffeine.qml @@ -6,7 +6,8 @@ import qs.services StyledIconButton { id: root - border.color: Caffeine.enabled ? Theme.palette.secondary : root.hovered ? Theme.palette.primary : Theme.palette.base100 + border.width: 2 + border.color: Caffeine.enabled ? Theme.palette.secondary : root.hovered ? Theme.palette.primary : Theme.palette.base300 text: Icons.coffee onClicked: { diff --git a/modules/drawers/dashboard/Dashboard.qml b/modules/drawers/dashboard/Dashboard.qml index b98647d..14bd318 100644 --- a/modules/drawers/dashboard/Dashboard.qml +++ b/modules/drawers/dashboard/Dashboard.qml @@ -4,13 +4,14 @@ import qs.components import qs.services import QtQuick import QtQuick.Layouts +import Quickshell.Widgets StyledDrawer { id: root visible: Visibility.dashboard - StyledWrapperRectangle { + WrapperItem { margin: 32 ColumnLayout { spacing: 8 diff --git a/modules/launcher/AppList.qml b/modules/launcher/AppList.qml index d8dbe22..cee2574 100644 --- a/modules/launcher/AppList.qml +++ b/modules/launcher/AppList.qml @@ -4,7 +4,6 @@ import "items" import "services" import qs.components import qs.config -import qs.widgets import Quickshell import QtQuick import QtQuick.Controls diff --git a/modules/launcher/Launcher.qml b/modules/launcher/Launcher.qml index 137c861..b64322c 100644 --- a/modules/launcher/Launcher.qml +++ b/modules/launcher/Launcher.qml @@ -1,6 +1,7 @@ pragma ComponentBehavior: Bound import "services" +import qs.config import qs.components import qs.constants import qs.services @@ -47,6 +48,8 @@ StyledWindow { Layout.alignment: Qt.AlignTop margin: 4 + color: Theme.palette.base200 + RowLayout { LucideIcon { id: icon diff --git a/modules/powermenu/PowerMenu.qml b/modules/powermenu/PowerMenu.qml index cea98f8..198c5ba 100644 --- a/modules/powermenu/PowerMenu.qml +++ b/modules/powermenu/PowerMenu.qml @@ -3,7 +3,6 @@ pragma ComponentBehavior: Bound import qs.components import qs.config import qs.services -import qs.widgets import Quickshell.Hyprland import Quickshell.Io import Quickshell.Wayland @@ -28,7 +27,6 @@ StyledWindow { StyledWrapperRectangle { id: rect - color: Theme.palette.base300 margin: 14 radius: 8 From 9fc91a92f775266f044e385797f498e99986d5fb Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 15:48:24 -0400 Subject: [PATCH 12/90] add styling with animation speed --- components/LucideIcon.qml | 2 +- components/MprisController.qml | 1 - components/MprisPlayerSelector.qml | 5 ++--- components/StyledButton.qml | 12 ++++++++---- components/StyledIconButton.qml | 26 +++++++++++++++++--------- components/StyledLabel.qml | 7 ++++--- components/StyledListView.qml | 3 ++- components/StyledProgressBar.qml | 12 ++++++------ components/StyledSlider.qml | 4 ++-- components/StyledSwitch.qml | 3 +-- components/StyledText.qml | 6 ++++-- components/StyledToolTip.qml | 2 ++ components/StyledWrapperRectangle.qml | 7 ++++--- config/Styling.qml | 21 +++++++++++++++++++++ 14 files changed, 74 insertions(+), 37 deletions(-) create mode 100644 config/Styling.qml diff --git a/components/LucideIcon.qml b/components/LucideIcon.qml index 206d5b4..fa19612 100644 --- a/components/LucideIcon.qml +++ b/components/LucideIcon.qml @@ -5,7 +5,7 @@ Text { color: Theme.palette.basecontent Behavior on color { ColorAnimation { - duration: 100 + duration: Styling.animations.speed.fast } } font.family: Theme.lucide.font.family diff --git a/components/MprisController.qml b/components/MprisController.qml index 9b92b0a..bd05ee6 100644 --- a/components/MprisController.qml +++ b/components/MprisController.qml @@ -3,7 +3,6 @@ pragma ComponentBehavior: Bound import qs.components import qs.config import qs.constants -import qs.widgets import QtQuick import QtQuick.Layouts import Quickshell.Services.Mpris diff --git a/components/MprisPlayerSelector.qml b/components/MprisPlayerSelector.qml index 3a39693..c185145 100644 --- a/components/MprisPlayerSelector.qml +++ b/components/MprisPlayerSelector.qml @@ -1,7 +1,6 @@ import qs.components import qs.constants import qs.services -import qs.widgets import QtQuick import QtQuick.Layouts @@ -29,10 +28,10 @@ RowLayout { const player = Mpris.active; const displayName = player.identity ?? player.desktopEntry ?? player.dbusName ?? "unknown"; if (displayName.toLowerCase().includes('tidal')) { - return "Tidal"; + return "Tidal"; } if (displayName.toLowerCase().includes('zen')) { - return "Zen"; + return "Zen"; } return displayName; } diff --git a/components/StyledButton.qml b/components/StyledButton.qml index fb9be2b..95c66e9 100644 --- a/components/StyledButton.qml +++ b/components/StyledButton.qml @@ -12,12 +12,16 @@ Button { horizontalPadding: 8 palette.button: hovered ? Theme.palette.primary : Theme.palette.base200 - ColorAnimation on palette.button { - duration: 100 + Behavior on palette.button { + ColorAnimation { + duration: Styling.animations.speed.normal + } } palette.buttonText: hoverEnabled && hovered ? Theme.palette.primarycontent : Theme.palette.basecontent - ColorAnimation on palette.buttonText { - duration: 100 + Behavior on palette.buttonText { + ColorAnimation { + duration: Styling.animations.speed.normal + } } wheelEnabled: true diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml index 186cb5d..d472462 100644 --- a/components/StyledIconButton.qml +++ b/components/StyledIconButton.qml @@ -28,26 +28,34 @@ RoundButton { font: control.font text: control.text color: control.color - ColorAnimation on color { - duration: 100 + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.normal + } } rotation: control.rotation - RotationAnimation on rotation { - duration: 200 - easing.type: Easing.InOutCubic + Behavior on rotation { + RotationAnimation { + duration: Styling.animations.speed.slow + easing.type: Easing.InOutCubic + } } } background: Rectangle { id: rect border.color: control.hovered ? Theme.palette.base300 : Theme.palette.base200 - ColorAnimation on border.color { - duration: 100 + Behavior on border.color { + ColorAnimation { + duration: Styling.animations.speed.normal + } } border.width: 0 color: control.hovered ? Theme.palette.primary : Theme.palette.base200 - ColorAnimation on color { - duration: 100 + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.normal + } } radius: control.radius } diff --git a/components/StyledLabel.qml b/components/StyledLabel.qml index 7dd00b2..f654876 100644 --- a/components/StyledLabel.qml +++ b/components/StyledLabel.qml @@ -7,8 +7,9 @@ WrapperRectangle { margin: 8 radius: 8 color: Theme.palette.base200 - ColorAnimation on color { - duration: 200 - easing.type: Easing.InOutQuad + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.normal + } } } diff --git a/components/StyledListView.qml b/components/StyledListView.qml index 733d258..5c853b4 100644 --- a/components/StyledListView.qml +++ b/components/StyledListView.qml @@ -1,3 +1,4 @@ +import qs.config import QtQuick import QtQuick.Controls @@ -14,7 +15,7 @@ ListView { rebound: Transition { NumberAnimation { properties: "x,y" - duration: 400 + duration: Styling.animations.speed.slow easing.type: Easing.BezierSpline easing.bezierCurve: [0.2, 0, 0, 1, 1, 1] } diff --git a/components/StyledProgressBar.qml b/components/StyledProgressBar.qml index f0c0ef6..9132e83 100644 --- a/components/StyledProgressBar.qml +++ b/components/StyledProgressBar.qml @@ -40,15 +40,15 @@ ProgressBar { Row { Rectangle { - id: rect - color: Theme.palette.primary - width: 40 - height: control.height - } + id: rect + color: Theme.palette.primary + width: 40 + height: control.height + } XAnimator on x { from: control.width + rect.width to: -rect.width - duration: 1000 + duration: Styling.animations.speed.verySlow loops: Animation.Infinite running: control.indeterminate } diff --git a/components/StyledSlider.qml b/components/StyledSlider.qml index e0b0fca..e207c28 100644 --- a/components/StyledSlider.qml +++ b/components/StyledSlider.qml @@ -19,13 +19,13 @@ Slider { width: control.availableWidth height: implicitHeight radius: 8 - color: Theme.palette.base100 + color: Theme.palette.base200 Rectangle { width: control.visualPosition * parent.width Behavior on width { NumberAnimation { - duration: 75 + duration: Styling.animations.speed.fast } } height: parent.height diff --git a/components/StyledSwitch.qml b/components/StyledSwitch.qml index f1671b1..e2c222c 100644 --- a/components/StyledSwitch.qml +++ b/components/StyledSwitch.qml @@ -40,14 +40,13 @@ Switch { y: parent.height / 2 - height / 2 Behavior on x { NumberAnimation { - duration: 100 + duration: Styling.animations.speed.fast } } width: parent.width / 2 - indicator.padding height: parent.height - indicator.padding radius: 16 color: control.checked ? Theme.palette.primary : Theme.palette.basecontent - // border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999" } } diff --git a/components/StyledText.qml b/components/StyledText.qml index 4fe365e..2535777 100644 --- a/components/StyledText.qml +++ b/components/StyledText.qml @@ -4,7 +4,9 @@ import QtQuick Text { font.family: Theme.fontFamily color: Theme.palette.basecontent - ColorAnimation on color { - duration: 100 + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.fast + } } } diff --git a/components/StyledToolTip.qml b/components/StyledToolTip.qml index 074c129..544d55b 100644 --- a/components/StyledToolTip.qml +++ b/components/StyledToolTip.qml @@ -15,5 +15,7 @@ ToolTip { background: Rectangle { radius: 8 color: Theme.palette.base100 + border.color: Theme.palette.base200 + border.width: 2 } } diff --git a/components/StyledWrapperRectangle.qml b/components/StyledWrapperRectangle.qml index 5c73284..d056ff5 100644 --- a/components/StyledWrapperRectangle.qml +++ b/components/StyledWrapperRectangle.qml @@ -5,8 +5,9 @@ import Quickshell.Widgets WrapperRectangle { radius: 8 color: Theme.palette.base100 - ColorAnimation on color { - duration: 200 - easing.type: Easing.InOutQuad + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.fast + } } } diff --git a/config/Styling.qml b/config/Styling.qml new file mode 100644 index 0000000..be40e68 --- /dev/null +++ b/config/Styling.qml @@ -0,0 +1,21 @@ +pragma Singleton + +import QtQuick +import Quickshell + +Singleton { + id: root + + readonly property Animations animations: Animations {} + + component Animations: QtObject { + property AnimationSpeed speed: AnimationSpeed {} + } + component AnimationSpeed: QtObject { + property int veryFast: 50 + property int fast: 100 + property int normal: 200 + property int slow: 400 + property int verySlow: 1000 + } +} From 467c9bc0e376cb8314d52a7f043af70ba54d625c Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 17:22:16 -0400 Subject: [PATCH 13/90] move lucide to Styling --- components/LucideIcon.qml | 6 +-- components/MprisController.qml | 7 ++- components/MprisPlayerSelector.qml | 6 +-- components/StyledIconButton.qml | 9 +--- config/Styling.qml | 44 +++++++++++++++++++ config/Theme.qml | 3 -- constants/Icons.qml | 36 --------------- modules/bar/components/Caffeine.qml | 3 +- modules/bar/components/Cpu.qml | 11 +---- modules/bar/components/Gpu.qml | 11 +---- modules/bar/components/Memory.qml | 9 +--- modules/bar/components/Network.qml | 15 +++---- modules/bar/components/Power.qml | 11 +++-- modules/bar/components/Pywal.qml | 4 +- modules/bar/components/Storage.qml | 11 +---- .../components/bluetooth/AvailableDevice.qml | 1 - .../bar/components/bluetooth/Bluetooth.qml | 4 +- .../components/bluetooth/ConnectedDevice.qml | 15 +++---- modules/bar/components/hyprland/Workspace.qml | 5 +-- .../notifications/Notifications.qml | 6 +-- modules/launcher/Launcher.qml | 3 +- modules/pomodoro/Pomodoro.qml | 3 +- modules/storybook/Storybook.qml | 3 +- 23 files changed, 91 insertions(+), 135 deletions(-) delete mode 100644 constants/Icons.qml diff --git a/components/LucideIcon.qml b/components/LucideIcon.qml index fa19612..3574856 100644 --- a/components/LucideIcon.qml +++ b/components/LucideIcon.qml @@ -2,13 +2,13 @@ import qs.config import QtQuick Text { + font.family: Styling.lucide.font.family + font.pixelSize: 16 + color: Theme.palette.basecontent Behavior on color { ColorAnimation { duration: Styling.animations.speed.fast } } - font.family: Theme.lucide.font.family - font.pixelSize: Dimensions.gpu.iconSize - font.bold: true } diff --git a/components/MprisController.qml b/components/MprisController.qml index bd05ee6..a6b6a88 100644 --- a/components/MprisController.qml +++ b/components/MprisController.qml @@ -2,7 +2,6 @@ pragma ComponentBehavior: Bound import qs.components import qs.config -import qs.constants import QtQuick import QtQuick.Layouts import Quickshell.Services.Mpris @@ -29,21 +28,21 @@ Loader { Layout.alignment: Qt.AlignHCenter StyledIconButton { id: backButton - text: Icons.skipBack + text: Styling.lucide.icons.skipBack onClicked: { root.player.previous(); } } StyledIconButton { id: playPauseButton - text: root.player.isPlaying ? Icons.pause : Icons.play + text: root.player.isPlaying ? Styling.lucide.icons.pause : Styling.lucide.icons.play onClicked: { root.player.isPlaying = !root.player.isPlaying; } } StyledIconButton { id: forwardButton - text: Icons.skipForward + text: Styling.lucide.icons.skipForward onClicked: { root.player.next(); } diff --git a/components/MprisPlayerSelector.qml b/components/MprisPlayerSelector.qml index c185145..2a4a8c3 100644 --- a/components/MprisPlayerSelector.qml +++ b/components/MprisPlayerSelector.qml @@ -1,5 +1,5 @@ +import qs.config import qs.components -import qs.constants import qs.services import QtQuick import QtQuick.Layouts @@ -13,7 +13,7 @@ RowLayout { id: previousPlayerButton visible: Mpris.players.length > 1 - text: Icons.chevronLeft + text: Styling.lucide.icons.chevronLeft onClicked: { Mpris.previousPlayer(); @@ -42,7 +42,7 @@ RowLayout { id: nextPlayerButton visible: Mpris.players.length > 1 - text: Icons.chevronRight + text: Styling.lucide.icons.chevronRight onClicked: { Mpris.nextPlayer(); diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml index d472462..7f725db 100644 --- a/components/StyledIconButton.qml +++ b/components/StyledIconButton.qml @@ -5,16 +5,11 @@ import QtQuick.Controls RoundButton { id: control - FontLoader { - id: loader - source: "../assets/lucide.woff" - } - property alias border: rect.border property color color: hovered ? Theme.palette.primarycontent : Theme.palette.basecontent property int rotation: 0 - font.family: loader.font.family + font.family: Styling.lucide.font.family font.pixelSize: 19 radius: 8 padding: 8 @@ -37,7 +32,7 @@ RoundButton { Behavior on rotation { RotationAnimation { duration: Styling.animations.speed.slow - easing.type: Easing.InOutCubic + easing.type: Easing.OutQuad } } } diff --git a/config/Styling.qml b/config/Styling.qml index be40e68..9fd15d8 100644 --- a/config/Styling.qml +++ b/config/Styling.qml @@ -6,6 +6,7 @@ import Quickshell Singleton { id: root + readonly property Lucide lucide: Lucide {} readonly property Animations animations: Animations {} component Animations: QtObject { @@ -18,4 +19,47 @@ Singleton { property int slow: 400 property int verySlow: 1000 } + + component Lucide: Item { + + readonly property alias font: loader.font + readonly property LucideIcons icons: LucideIcons {} + + FontLoader { + id: loader + source: "../assets/lucide.woff" + } + } + component LucideIcons: QtObject { + property string batteryCharging: "\u{E058}" + property string batteryFull: "\u{E059}" + property string batteryMedium: "\u{E05b}" + property string batteryLow: "\u{E05a}" + property string batteryWarning: "\u{E3b0}" + property string bell: "\u{E05d}" + property string bellRing: "\u{E224}" + property string bluetooth: "\u{E060}" + property string bluetoothConnected: "\u{E1b8}" + property string brickWall: "\u{E586}" + property string coffee: "\u{E09a}" + property string chevronLeft: "\u{E072}" + property string chevronRight: "\u{E073}" + property string cpu: "\u{E0ad}" + property string gpu: "\u{E66f}" + property string hardDrive: "\u{E0f1}" + property string memoryStick: "\u{E44a}" + property string pause: "\u{E132}" + property string play: "\u{E140}" + property string search: "\u{E155}" + property string skipBack: "\u{E163}" + property string skipForward: "\u{E164}" + property string stop: "\u{E132}" + property string square: "\u{E16B}" + property string wifiOff: "\u{E1af}" + property string wifiLow: "\u{E5fd}" + property string wifiHigh: "\u{E5fc}" + property string wifi: "\u{E1ae}" + property string triangle: "\u{E192}" + property string triangleDashed: "\u{E642}" + } } diff --git a/config/Theme.qml b/config/Theme.qml index b686079..82c316a 100644 --- a/config/Theme.qml +++ b/config/Theme.qml @@ -8,9 +8,6 @@ import Quickshell.Io Singleton { id: root - property var lucide: FontLoader { - source: "../assets/lucide.woff" - } property string fontFamily: "JetBrainsMono Nerd Font" property var palette: theme.palette diff --git a/constants/Icons.qml b/constants/Icons.qml deleted file mode 100644 index 881277e..0000000 --- a/constants/Icons.qml +++ /dev/null @@ -1,36 +0,0 @@ -pragma Singleton - -import Quickshell - -Singleton { - property string batteryCharging: "\u{E058}" - property string batteryFull: "\u{E059}" - property string batteryMedium: "\u{E05b}" - property string batteryLow: "\u{E05a}" - property string batteryWarning: "\u{E3b0}" - property string bell: "\u{E05d}" - property string bellRing: "\u{E224}" - property string bluetooth: "\u{E060}" - property string bluetoothConnected: "\u{E1b8}" - property string brickWall: "\u{E586}" - property string coffee: "\u{E09a}" - property string chevronLeft: "\u{E072}" - property string chevronRight: "\u{E073}" - property string cpu: "\u{E0ad}" - property string gpu: "\u{E66f}" - property string hardDrive: "\u{E0f1}" - property string memoryStick: "\u{E44a}" - property string pause: "\u{E132}" - property string play: "\u{E140}" - property string search: "\u{E155}" - property string skipBack: "\u{E163}" - property string skipForward: "\u{E164}" - property string stop: "\u{E132}" - property string square: "\u{E16B}" - property string wifiOff: "\u{E1af}" - property string wifiLow: "\u{E5fd}" - property string wifiHigh: "\u{E5fc}" - property string wifi: "\u{E1ae}" - property string triangle: "\u{E192}" - property string triangleDashed: "\u{E642}" -} diff --git a/modules/bar/components/Caffeine.qml b/modules/bar/components/Caffeine.qml index 47a80c4..a2ac7b0 100644 --- a/modules/bar/components/Caffeine.qml +++ b/modules/bar/components/Caffeine.qml @@ -1,6 +1,5 @@ import qs.components import qs.config -import qs.constants import qs.services StyledIconButton { @@ -8,7 +7,7 @@ StyledIconButton { border.width: 2 border.color: Caffeine.enabled ? Theme.palette.secondary : root.hovered ? Theme.palette.primary : Theme.palette.base300 - text: Icons.coffee + text: Styling.lucide.icons.coffee onClicked: { Caffeine.toggle(); diff --git a/modules/bar/components/Cpu.qml b/modules/bar/components/Cpu.qml index 41085be..b0b46ed 100644 --- a/modules/bar/components/Cpu.qml +++ b/modules/bar/components/Cpu.qml @@ -1,9 +1,7 @@ import qs.components import qs.config -import qs.constants import qs.services import qs.utils -import qs.widgets import QtQuick import QtQuick.Layouts @@ -24,13 +22,8 @@ StyledButton { Ref { service: SystemInfo } - StyledText { - id: icon - - font.family: Theme.lucide.font.family - font.pixelSize: Dimensions.cpu.iconSize - font.bold: true - text: Icons.cpu + LucideIcon { + text: Styling.lucide.icons.cpu color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent } diff --git a/modules/bar/components/Gpu.qml b/modules/bar/components/Gpu.qml index fa29708..1e29627 100644 --- a/modules/bar/components/Gpu.qml +++ b/modules/bar/components/Gpu.qml @@ -1,9 +1,7 @@ import qs.components import qs.config -import qs.constants import qs.services import qs.utils -import qs.widgets import QtQuick import QtQuick.Layouts @@ -24,13 +22,8 @@ StyledButton { Ref { service: SystemInfo } - StyledText { - id: icon - - font.family: Theme.lucide.font.family - font.pixelSize: Dimensions.gpu.iconSize - font.bold: true - text: Icons.gpu + LucideIcon { + text: Styling.lucide.icons.gpu color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent } diff --git a/modules/bar/components/Memory.qml b/modules/bar/components/Memory.qml index 24a967a..1f251e6 100644 --- a/modules/bar/components/Memory.qml +++ b/modules/bar/components/Memory.qml @@ -1,8 +1,6 @@ import qs.components import qs.config -import qs.constants import qs.services -import qs.widgets import qs.utils import QtQuick import QtQuick.Layouts @@ -12,11 +10,8 @@ StyledLabel { Ref { service: SystemInfo } - StyledText { - font.family: Theme.lucide.font.family - font.pixelSize: Dimensions.memory.iconSize - font.bold: true - text: Icons.memoryStick + LucideIcon { + text: Styling.lucide.icons.memoryStick } StyledText { diff --git a/modules/bar/components/Network.qml b/modules/bar/components/Network.qml index f89010d..4fa89cd 100644 --- a/modules/bar/components/Network.qml +++ b/modules/bar/components/Network.qml @@ -1,9 +1,7 @@ import qs.components import qs.config -import qs.constants import qs.services import qs.utils -import qs.widgets import QtQuick import QtQuick.Layouts @@ -12,13 +10,10 @@ StyledLabel { Ref { service: NetworkService } - StyledText { + LucideIcon { id: icon - font.family: Theme.lucide.font.family - font.pixelSize: Dimensions.network.iconSize - font.bold: true - text: Icons.wifiOff + text: Styling.lucide.icons.wifiOff states: [ State { @@ -26,7 +21,7 @@ StyledLabel { when: NetworkService.active?.strength > 50 PropertyChanges { icon { - text: Icons.wifi + text: Styling.lucide.icons.wifi } } }, @@ -35,7 +30,7 @@ StyledLabel { when: NetworkService.active?.strength > 25 PropertyChanges { icon { - text: Icons.wifiHigh + text: Styling.lucide.icons.wifiHigh } } }, @@ -44,7 +39,7 @@ StyledLabel { when: NetworkService.active?.strength > 0 PropertyChanges { icon { - text: Icons.wifiLow + text: Styling.lucide.icons.wifiLow } } } diff --git a/modules/bar/components/Power.qml b/modules/bar/components/Power.qml index a42a23c..2dae2d1 100644 --- a/modules/bar/components/Power.qml +++ b/modules/bar/components/Power.qml @@ -1,6 +1,5 @@ import qs.components import qs.config -import qs.constants import QtQuick import QtQuick.Layouts import Quickshell.Services.UPower @@ -26,18 +25,18 @@ StyledButton { font.pixelSize: 16 text: { if (root.laptopBattery?.state == UPowerDeviceState.Charging) { - return Icons.batteryCharging; + return Styling.lucide.icons.batteryCharging; } if (root.isCritical) { - return Icons.batteryWarning; + return Styling.lucide.icons.batteryWarning; } if (root.laptopBattery?.percentage < 0.33) { - return Icons.batteryLow; + return Styling.lucide.icons.batteryLow; } if (root.laptopBattery?.percentage < 0.66) { - return Icons.batteryMedium; + return Styling.lucide.icons.batteryMedium; } - return Icons.batteryFull; + return Styling.lucide.icons.batteryFull; } } diff --git a/modules/bar/components/Pywal.qml b/modules/bar/components/Pywal.qml index d83c508..5a38593 100644 --- a/modules/bar/components/Pywal.qml +++ b/modules/bar/components/Pywal.qml @@ -1,12 +1,12 @@ import qs.components -import qs.constants +import qs.config import QtQuick import Quickshell.Io StyledIconButton { id: clickable - text: Icons.brickWall + text: Styling.lucide.icons.brickWall onClicked: { process.running = true; diff --git a/modules/bar/components/Storage.qml b/modules/bar/components/Storage.qml index 56fbeb3..a7d189a 100644 --- a/modules/bar/components/Storage.qml +++ b/modules/bar/components/Storage.qml @@ -1,9 +1,7 @@ import qs.components import qs.config -import qs.constants import qs.services import qs.utils -import qs.widgets import QtQuick import QtQuick.Layouts @@ -12,13 +10,8 @@ StyledLabel { Ref { service: SystemInfo } - StyledText { - id: icon - - font.family: Theme.lucide.font.family - font.pixelSize: Dimensions.storage.iconSize - font.bold: true - text: Icons.hardDrive + LucideIcon { + text: Styling.lucide.icons.hardDrive } StyledText { diff --git a/modules/bar/components/bluetooth/AvailableDevice.qml b/modules/bar/components/bluetooth/AvailableDevice.qml index e868b8e..c941649 100644 --- a/modules/bar/components/bluetooth/AvailableDevice.qml +++ b/modules/bar/components/bluetooth/AvailableDevice.qml @@ -1,7 +1,6 @@ pragma ComponentBehavior: Bound import qs.components -import qs.widgets import QtQuick import QtQuick.Layouts import Quickshell diff --git a/modules/bar/components/bluetooth/Bluetooth.qml b/modules/bar/components/bluetooth/Bluetooth.qml index c12c93b..e30639d 100644 --- a/modules/bar/components/bluetooth/Bluetooth.qml +++ b/modules/bar/components/bluetooth/Bluetooth.qml @@ -1,10 +1,10 @@ import qs.components -import qs.constants +import qs.config StyledIconButton { id: root - text: Icons.bluetooth + text: Styling.lucide.icons.bluetooth onClicked: popup.toggle() diff --git a/modules/bar/components/bluetooth/ConnectedDevice.qml b/modules/bar/components/bluetooth/ConnectedDevice.qml index ce72790..ebdb49e 100644 --- a/modules/bar/components/bluetooth/ConnectedDevice.qml +++ b/modules/bar/components/bluetooth/ConnectedDevice.qml @@ -2,8 +2,6 @@ pragma ComponentBehavior: Bound import qs.components import qs.config -import qs.constants -import qs.widgets import QtQuick import QtQuick.Layouts import Quickshell @@ -34,12 +32,9 @@ StyledLabel { Loader { active: root.modelData.batteryAvailable sourceComponent: RowLayout { - StyledText { + LucideIcon { id: icon - font.family: Theme.lucide.font.family - font.pixelSize: Dimensions.cpu.iconSize - font.bold: true - text: Icons.batteryFull + text: Styling.lucide.icons.batteryFull states: [ State { name: "full" @@ -50,7 +45,7 @@ StyledLabel { when: root.modelData.battery > 0.33 PropertyChanges { icon { - text: Icons.batteryFull + text: Styling.lucide.icons.batteryFull } } }, @@ -59,7 +54,7 @@ StyledLabel { when: root.modelData.battery > 0.10 PropertyChanges { icon { - text: Icons.batteryFull + text: Styling.lucide.icons.batteryFull } } }, @@ -68,7 +63,7 @@ StyledLabel { when: root.modelData.battery > 0.10 PropertyChanges { icon { - text: Icons.batteryWarning + text: Styling.lucide.icons.batteryWarning color: Theme.palette.error } } diff --git a/modules/bar/components/hyprland/Workspace.qml b/modules/bar/components/hyprland/Workspace.qml index 07acca9..f342917 100644 --- a/modules/bar/components/hyprland/Workspace.qml +++ b/modules/bar/components/hyprland/Workspace.qml @@ -1,6 +1,5 @@ import qs.components import qs.config -import qs.constants import QtQuick import Quickshell.Hyprland @@ -9,7 +8,7 @@ StyledIconButton { required property HyprlandWorkspace workspace - text: Icons.triangle + text: Styling.lucide.icons.triangle font.bold: true font.pixelSize: 17 padding: 8 @@ -32,7 +31,7 @@ StyledIconButton { when: root.workspace.active PropertyChanges { root { - text: Icons.triangleDashed + text: Styling.lucide.icons.triangleDashed rotation: 180 color: root.hovered ? Theme.palette.basecontent : Theme.palette.primary } diff --git a/modules/bar/components/notifications/Notifications.qml b/modules/bar/components/notifications/Notifications.qml index a33b673..a0080c2 100644 --- a/modules/bar/components/notifications/Notifications.qml +++ b/modules/bar/components/notifications/Notifications.qml @@ -1,5 +1,5 @@ import qs.components -import qs.constants +import qs.config import qs.services import QtQuick @@ -10,13 +10,13 @@ StyledIconButton { menu.toggle(); } - text: Notifications.hasNotifications ? Icons.bell : Icons.bellRing + text: Notifications.hasNotifications ? Styling.lucide.icons.bell : Styling.lucide.icons.bellRing states: State { when: Notifications.hasNotifications PropertyChanges { root { - text: Icons.bellRing + text: Styling.lucide.icons.bellRing } } } diff --git a/modules/launcher/Launcher.qml b/modules/launcher/Launcher.qml index b64322c..e976626 100644 --- a/modules/launcher/Launcher.qml +++ b/modules/launcher/Launcher.qml @@ -3,7 +3,6 @@ pragma ComponentBehavior: Bound import "services" import qs.config import qs.components -import qs.constants import qs.services import Quickshell.Hyprland import Quickshell.Wayland @@ -54,7 +53,7 @@ StyledWindow { LucideIcon { id: icon Layout.leftMargin: 8 - text: Icons.search + text: Styling.lucide.icons.search } StyledTextField { diff --git a/modules/pomodoro/Pomodoro.qml b/modules/pomodoro/Pomodoro.qml index 249dcda..925d652 100644 --- a/modules/pomodoro/Pomodoro.qml +++ b/modules/pomodoro/Pomodoro.qml @@ -2,7 +2,6 @@ pragma ComponentBehavior: Bound import qs.components import qs.config -import qs.constants import qs.services import qs.widgets import Quickshell.Hyprland @@ -69,7 +68,7 @@ StyledWindow { radius: 9999 focus: root.visible - text: Pomodoro.running ? Icons.square : Icons.play + text: Pomodoro.running ? Styling.lucide.icons.square : Styling.lucide.icons.play font.pixelSize: 48 background: Item {} diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 4e60d14..3815c7f 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -2,7 +2,6 @@ pragma ComponentBehavior: Bound import qs.components import qs.config -import qs.constants import qs.services import Quickshell.Hyprland import Quickshell.Wayland @@ -57,7 +56,7 @@ StyledWindow { font.pixelSize: 18 } StyledIconButton { - text: Icons.square + text: Styling.lucide.icons.square } } From 4375f6e13dc99917223f280c64a9a34fbb14cf29 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 17:30:09 -0400 Subject: [PATCH 14/90] move theme to styling --- components/LucideIcon.qml | 2 +- components/StyledButton.qml | 4 ++-- components/StyledDrawer.qml | 2 +- components/StyledIconButton.qml | 6 +++--- components/StyledLabel.qml | 2 +- components/StyledMenu.qml | 4 ++-- components/StyledMenuItem.qml | 6 +++--- components/StyledMenuSeparator.qml | 6 +++--- components/StyledPopup.qml | 2 +- components/StyledProgressBar.qml | 6 +++--- components/StyledSlider.qml | 4 ++-- components/StyledSwitch.qml | 6 +++--- components/StyledText.qml | 2 +- components/StyledTextField.qml | 2 +- components/StyledToolTip.qml | 6 +++--- components/StyledWrapperRectangle.qml | 2 +- config/Styling.qml | 1 + modules/bar/Bar.qml | 4 ++-- modules/bar/components/Caffeine.qml | 2 +- modules/bar/components/Cpu.qml | 4 ++-- modules/bar/components/Gpu.qml | 4 ++-- modules/bar/components/Pipewire.qml | 2 +- modules/bar/components/Power.qml | 12 ++++++------ modules/bar/components/bluetooth/BluetoothMenu.qml | 2 +- modules/bar/components/bluetooth/ConnectedDevice.qml | 4 ++-- modules/bar/components/bluetooth/PairedDevice.qml | 2 +- modules/bar/components/hyprland/Workspace.qml | 4 ++-- .../components/notifications/NotificationMenu.qml | 4 ++-- modules/bar/components/tray/menu/Menu.qml | 4 ++-- modules/launcher/AppList.qml | 2 +- modules/launcher/Launcher.qml | 2 +- modules/launcher/items/AppItem.qml | 4 ++-- modules/pomodoro/Pomodoro.qml | 6 +++--- modules/powermenu/PowerMenu.qml | 4 ++-- modules/storybook/Storybook.qml | 2 +- widgets/Circle.qml | 4 ++-- 36 files changed, 68 insertions(+), 67 deletions(-) diff --git a/components/LucideIcon.qml b/components/LucideIcon.qml index 3574856..aa73b88 100644 --- a/components/LucideIcon.qml +++ b/components/LucideIcon.qml @@ -5,7 +5,7 @@ Text { font.family: Styling.lucide.font.family font.pixelSize: 16 - color: Theme.palette.basecontent + color: Styling.theme.basecontent Behavior on color { ColorAnimation { duration: Styling.animations.speed.fast diff --git a/components/StyledButton.qml b/components/StyledButton.qml index 95c66e9..bfe817f 100644 --- a/components/StyledButton.qml +++ b/components/StyledButton.qml @@ -11,13 +11,13 @@ Button { verticalPadding: 6 horizontalPadding: 8 - palette.button: hovered ? Theme.palette.primary : Theme.palette.base200 + palette.button: hovered ? Styling.theme.primary : Styling.theme.base200 Behavior on palette.button { ColorAnimation { duration: Styling.animations.speed.normal } } - palette.buttonText: hoverEnabled && hovered ? Theme.palette.primarycontent : Theme.palette.basecontent + palette.buttonText: hoverEnabled && hovered ? Styling.theme.primarycontent : Styling.theme.basecontent Behavior on palette.buttonText { ColorAnimation { duration: Styling.animations.speed.normal diff --git a/components/StyledDrawer.qml b/components/StyledDrawer.qml index eafe214..f0816fd 100644 --- a/components/StyledDrawer.qml +++ b/components/StyledDrawer.qml @@ -20,6 +20,6 @@ Drawer { topRightRadius = 8; } } - color: Theme.palette.base100 + color: Styling.theme.base100 } } diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml index 7f725db..bdfea7a 100644 --- a/components/StyledIconButton.qml +++ b/components/StyledIconButton.qml @@ -6,7 +6,7 @@ RoundButton { id: control property alias border: rect.border - property color color: hovered ? Theme.palette.primarycontent : Theme.palette.basecontent + property color color: hovered ? Styling.theme.primarycontent : Styling.theme.basecontent property int rotation: 0 font.family: Styling.lucide.font.family @@ -39,14 +39,14 @@ RoundButton { background: Rectangle { id: rect - border.color: control.hovered ? Theme.palette.base300 : Theme.palette.base200 + border.color: control.hovered ? Styling.theme.base300 : Styling.theme.base200 Behavior on border.color { ColorAnimation { duration: Styling.animations.speed.normal } } border.width: 0 - color: control.hovered ? Theme.palette.primary : Theme.palette.base200 + color: control.hovered ? Styling.theme.primary : Styling.theme.base200 Behavior on color { ColorAnimation { duration: Styling.animations.speed.normal diff --git a/components/StyledLabel.qml b/components/StyledLabel.qml index f654876..a1f429d 100644 --- a/components/StyledLabel.qml +++ b/components/StyledLabel.qml @@ -6,7 +6,7 @@ WrapperRectangle { id: root margin: 8 radius: 8 - color: Theme.palette.base200 + color: Styling.theme.base200 Behavior on color { ColorAnimation { duration: Styling.animations.speed.normal diff --git a/components/StyledMenu.qml b/components/StyledMenu.qml index 24815b6..3335c73 100644 --- a/components/StyledMenu.qml +++ b/components/StyledMenu.qml @@ -5,8 +5,8 @@ import QtQuick.Controls Menu { id: root - palette.window: Theme.palette.base100 - palette.base: Theme.palette.base100 + palette.window: Styling.theme.base100 + palette.base: Styling.theme.base100 focus: true closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent diff --git a/components/StyledMenuItem.qml b/components/StyledMenuItem.qml index fe078d2..210df67 100644 --- a/components/StyledMenuItem.qml +++ b/components/StyledMenuItem.qml @@ -3,7 +3,7 @@ import QtQuick import QtQuick.Controls MenuItem { - palette.text: Theme.palette.basecontent - palette.highlight: Theme.palette.primary - palette.highlightedText: Theme.palette.primarycontent + palette.text: Styling.theme.basecontent + palette.highlight: Styling.theme.primary + palette.highlightedText: Styling.theme.primarycontent } diff --git a/components/StyledMenuSeparator.qml b/components/StyledMenuSeparator.qml index 2759e47..05e621a 100644 --- a/components/StyledMenuSeparator.qml +++ b/components/StyledMenuSeparator.qml @@ -3,7 +3,7 @@ import QtQuick import QtQuick.Controls MenuSeparator { - palette.text: Theme.palette.basecontent - palette.highlight: Theme.palette.primary - palette.highlightedText: Theme.palette.primarycontent + palette.text: Styling.theme.basecontent + palette.highlight: Styling.theme.primary + palette.highlightedText: Styling.theme.primarycontent } diff --git a/components/StyledPopup.qml b/components/StyledPopup.qml index c335b7a..0c54c45 100644 --- a/components/StyledPopup.qml +++ b/components/StyledPopup.qml @@ -31,7 +31,7 @@ PopupWindow { 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) - color: Theme.palette.base200 + color: Styling.theme.base200 radius: 8 } } diff --git a/components/StyledProgressBar.qml b/components/StyledProgressBar.qml index 9132e83..d40d8ba 100644 --- a/components/StyledProgressBar.qml +++ b/components/StyledProgressBar.qml @@ -15,7 +15,7 @@ ProgressBar { background: Rectangle { implicitWidth: 200 implicitHeight: 6 - color: Theme.palette.base100 + color: Styling.theme.base100 radius: 8 } @@ -28,7 +28,7 @@ ProgressBar { width: control.visualPosition * parent.width height: parent.height radius: 8 - color: Theme.palette.primary + color: Styling.theme.primary visible: !control.indeterminate } @@ -41,7 +41,7 @@ ProgressBar { Row { Rectangle { id: rect - color: Theme.palette.primary + color: Styling.theme.primary width: 40 height: control.height } diff --git a/components/StyledSlider.qml b/components/StyledSlider.qml index e207c28..fc1df87 100644 --- a/components/StyledSlider.qml +++ b/components/StyledSlider.qml @@ -19,7 +19,7 @@ Slider { width: control.availableWidth height: implicitHeight radius: 8 - color: Theme.palette.base200 + color: Styling.theme.base200 Rectangle { width: control.visualPosition * parent.width @@ -29,7 +29,7 @@ Slider { } } height: parent.height - color: Theme.palette.primary + color: Styling.theme.primary radius: 8 } } diff --git a/components/StyledSwitch.qml b/components/StyledSwitch.qml index e2c222c..06dd4e8 100644 --- a/components/StyledSwitch.qml +++ b/components/StyledSwitch.qml @@ -11,7 +11,7 @@ Switch { text: control.text font: control.font opacity: enabled ? 1.0 : 0.3 - color: Theme.palette.basecontent + color: Styling.theme.basecontent elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } @@ -31,7 +31,7 @@ Switch { y: parent.height / 2 - height / 2 radius: 16 color: "transparent" - border.color: control.checked ? Theme.palette.primary : Theme.palette.basecontent + border.color: control.checked ? Styling.theme.primary : Styling.theme.basecontent border.width: 2 Rectangle { @@ -46,7 +46,7 @@ Switch { width: parent.width / 2 - indicator.padding height: parent.height - indicator.padding radius: 16 - color: control.checked ? Theme.palette.primary : Theme.palette.basecontent + color: control.checked ? Styling.theme.primary : Styling.theme.basecontent } } diff --git a/components/StyledText.qml b/components/StyledText.qml index 2535777..0b1a44c 100644 --- a/components/StyledText.qml +++ b/components/StyledText.qml @@ -3,7 +3,7 @@ import QtQuick Text { font.family: Theme.fontFamily - color: Theme.palette.basecontent + color: Styling.theme.basecontent Behavior on color { ColorAnimation { duration: Styling.animations.speed.fast diff --git a/components/StyledTextField.qml b/components/StyledTextField.qml index 8e5083f..aa98e33 100644 --- a/components/StyledTextField.qml +++ b/components/StyledTextField.qml @@ -4,6 +4,6 @@ import QtQuick.Controls TextField { - color: Theme.palette.basecontent + color: Styling.theme.basecontent background: Item {} } diff --git a/components/StyledToolTip.qml b/components/StyledToolTip.qml index 544d55b..8fa2b0b 100644 --- a/components/StyledToolTip.qml +++ b/components/StyledToolTip.qml @@ -9,13 +9,13 @@ ToolTip { contentItem: Text { text: control.text font: control.font - color: Theme.palette.basecontent + color: Styling.theme.basecontent } background: Rectangle { radius: 8 - color: Theme.palette.base100 - border.color: Theme.palette.base200 + color: Styling.theme.base100 + border.color: Styling.theme.base200 border.width: 2 } } diff --git a/components/StyledWrapperRectangle.qml b/components/StyledWrapperRectangle.qml index d056ff5..b6c3eba 100644 --- a/components/StyledWrapperRectangle.qml +++ b/components/StyledWrapperRectangle.qml @@ -4,7 +4,7 @@ import Quickshell.Widgets WrapperRectangle { radius: 8 - color: Theme.palette.base100 + color: Styling.theme.base100 Behavior on color { ColorAnimation { duration: Styling.animations.speed.fast diff --git a/config/Styling.qml b/config/Styling.qml index 9fd15d8..4b1d7a4 100644 --- a/config/Styling.qml +++ b/config/Styling.qml @@ -8,6 +8,7 @@ Singleton { readonly property Lucide lucide: Lucide {} readonly property Animations animations: Animations {} + readonly property var theme: Theme.palette component Animations: QtObject { property AnimationSpeed speed: AnimationSpeed {} diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml index 620823f..4aff347 100644 --- a/modules/bar/Bar.qml +++ b/modules/bar/Bar.qml @@ -32,11 +32,11 @@ PanelWindow { Rectangle { id: background anchors.fill: parent - color: Theme.palette.base100 + color: Styling.theme.base100 radius: Dimensions.radius border { - color: Theme.palette.base200 + color: Styling.theme.base200 width: Dimensions.bar.border pixelAligned: true } diff --git a/modules/bar/components/Caffeine.qml b/modules/bar/components/Caffeine.qml index a2ac7b0..126ec7a 100644 --- a/modules/bar/components/Caffeine.qml +++ b/modules/bar/components/Caffeine.qml @@ -6,7 +6,7 @@ StyledIconButton { id: root border.width: 2 - border.color: Caffeine.enabled ? Theme.palette.secondary : root.hovered ? Theme.palette.primary : Theme.palette.base300 + border.color: Caffeine.enabled ? Styling.theme.secondary : root.hovered ? Styling.theme.primary : Styling.theme.base300 text: Styling.lucide.icons.coffee onClicked: { diff --git a/modules/bar/components/Cpu.qml b/modules/bar/components/Cpu.qml index b0b46ed..d627fb3 100644 --- a/modules/bar/components/Cpu.qml +++ b/modules/bar/components/Cpu.qml @@ -24,7 +24,7 @@ StyledButton { } LucideIcon { text: Styling.lucide.icons.cpu - color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent + color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent } StyledText { @@ -32,7 +32,7 @@ StyledButton { font.pixelSize: Dimensions.cpu.fontSize text: ` ${(SystemInfo.cpuPerc * 100).toFixed().toString().padStart(2, "_")}%` - color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent + color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent states: [ State { diff --git a/modules/bar/components/Gpu.qml b/modules/bar/components/Gpu.qml index 1e29627..ee11e87 100644 --- a/modules/bar/components/Gpu.qml +++ b/modules/bar/components/Gpu.qml @@ -24,7 +24,7 @@ StyledButton { } LucideIcon { text: Styling.lucide.icons.gpu - color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent + color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent } StyledText { @@ -32,7 +32,7 @@ StyledButton { font.pixelSize: Dimensions.gpu.fontSize text: ` ${(SystemInfo.gpuPerc * 100).toFixed().toString().padStart(2, "_")}%` - color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent + color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent states: [ State { diff --git a/modules/bar/components/Pipewire.qml b/modules/bar/components/Pipewire.qml index cde5842..f677e4b 100644 --- a/modules/bar/components/Pipewire.qml +++ b/modules/bar/components/Pipewire.qml @@ -28,7 +28,7 @@ StyledButton { when: Pipewire.muted PropertyChanges { root { - palette.button: Theme.palette.error + palette.button: Styling.theme.error } } } diff --git a/modules/bar/components/Power.qml b/modules/bar/components/Power.qml index 2dae2d1..51bc4b9 100644 --- a/modules/bar/components/Power.qml +++ b/modules/bar/components/Power.qml @@ -15,12 +15,12 @@ StyledButton { Layout.alignment: Qt.AlignVCenter color: { if (root.isCritical) { - return Theme.palette.error; + return Styling.theme.error; } if (root.hovered) { - return Theme.palette.primarycontent; + return Styling.theme.primarycontent; } - return Theme.palette.basecontent; + return Styling.theme.basecontent; } font.pixelSize: 16 text: { @@ -44,12 +44,12 @@ StyledButton { Layout.alignment: Qt.AlignVCenter color: { if (root.isCritical) { - return Theme.palette.error; + return Styling.theme.error; } if (root.hovered) { - return Theme.palette.primarycontent; + return Styling.theme.primarycontent; } - return Theme.palette.basecontent; + return Styling.theme.basecontent; } text: `${(root.laptopBattery?.percentage.toFixed(2) * 100)}%` } diff --git a/modules/bar/components/bluetooth/BluetoothMenu.qml b/modules/bar/components/bluetooth/BluetoothMenu.qml index 14e9759..9bb911e 100644 --- a/modules/bar/components/bluetooth/BluetoothMenu.qml +++ b/modules/bar/components/bluetooth/BluetoothMenu.qml @@ -11,7 +11,7 @@ import Quickshell.Bluetooth StyledPopupWindow { id: root - backgroundColor: Theme.palette.base300 + backgroundColor: Styling.theme.base300 margins: 16 radius: 8 diff --git a/modules/bar/components/bluetooth/ConnectedDevice.qml b/modules/bar/components/bluetooth/ConnectedDevice.qml index ebdb49e..11944dd 100644 --- a/modules/bar/components/bluetooth/ConnectedDevice.qml +++ b/modules/bar/components/bluetooth/ConnectedDevice.qml @@ -64,7 +64,7 @@ StyledLabel { PropertyChanges { icon { text: Styling.lucide.icons.batteryWarning - color: Theme.palette.error + color: Styling.theme.error } } } @@ -76,7 +76,7 @@ StyledLabel { StyledButton { Layout.alignment: Qt.AlignRight text: 'Disconnect' - palette.button: hovered ? Theme.palette.error : Theme.palette.base200 + palette.button: hovered ? Styling.theme.error : Styling.theme.base200 onClicked: { if (root.modelData.state != BluetoothDeviceState.Connected) { diff --git a/modules/bar/components/bluetooth/PairedDevice.qml b/modules/bar/components/bluetooth/PairedDevice.qml index 443ec90..27afaf3 100644 --- a/modules/bar/components/bluetooth/PairedDevice.qml +++ b/modules/bar/components/bluetooth/PairedDevice.qml @@ -48,7 +48,7 @@ StyledLabel { hoverEnabled: root.modelData.state == BluetoothDeviceState.Disconnected text: 'Unpair' - palette.button: hovered ? Theme.palette.error : Theme.palette.base100 + palette.button: hovered ? Styling.theme.error : Styling.theme.base100 onClicked: { if (!hoverEnabled) { diff --git a/modules/bar/components/hyprland/Workspace.qml b/modules/bar/components/hyprland/Workspace.qml index f342917..3f983f9 100644 --- a/modules/bar/components/hyprland/Workspace.qml +++ b/modules/bar/components/hyprland/Workspace.qml @@ -22,7 +22,7 @@ StyledIconButton { PropertyChanges { root { rotation: 180 - color: root.hovered ? Theme.palette.basecontent : Theme.palette.primary + color: root.hovered ? Styling.theme.basecontent : Styling.theme.primary } } }, @@ -33,7 +33,7 @@ StyledIconButton { root { text: Styling.lucide.icons.triangleDashed rotation: 180 - color: root.hovered ? Theme.palette.basecontent : Theme.palette.primary + color: root.hovered ? Styling.theme.basecontent : Styling.theme.primary } } } diff --git a/modules/bar/components/notifications/NotificationMenu.qml b/modules/bar/components/notifications/NotificationMenu.qml index 7354f86..8a889d2 100644 --- a/modules/bar/components/notifications/NotificationMenu.qml +++ b/modules/bar/components/notifications/NotificationMenu.qml @@ -10,7 +10,7 @@ import QtQuick.Layouts StyledPopupWindow { id: root - backgroundColor: Theme.palette.base300 + backgroundColor: Styling.theme.base300 margins: 16 radius: 8 @@ -32,7 +32,7 @@ StyledPopupWindow { StyledLabel { Layout.columnSpan: 2 - color: Theme.palette.base200 + color: Styling.theme.base200 StyledListView { id: notifications diff --git a/modules/bar/components/tray/menu/Menu.qml b/modules/bar/components/tray/menu/Menu.qml index 5b57904..f547133 100644 --- a/modules/bar/components/tray/menu/Menu.qml +++ b/modules/bar/components/tray/menu/Menu.qml @@ -9,7 +9,7 @@ import Quickshell StyledPopupWindow { id: window - backgroundColor: Theme.palette.base300 + backgroundColor: Styling.theme.base300 margins: 14 radius: 8 @@ -32,7 +32,7 @@ StyledPopupWindow { property Component menuSeperator: Rectangle { implicitHeight: 2 - color: Theme.palette.base100 + color: Styling.theme.base100 } property Component menuItem: MenuItem { menuEntry: loader.modelData diff --git a/modules/launcher/AppList.qml b/modules/launcher/AppList.qml index cee2574..ed026b9 100644 --- a/modules/launcher/AppList.qml +++ b/modules/launcher/AppList.qml @@ -31,7 +31,7 @@ StyledListView { highlightResizeDuration: 0 highlight: Rectangle { radius: 8 - color: Theme.palette.primary + color: Styling.theme.primary } header: StyledText { diff --git a/modules/launcher/Launcher.qml b/modules/launcher/Launcher.qml index e976626..d04ce1b 100644 --- a/modules/launcher/Launcher.qml +++ b/modules/launcher/Launcher.qml @@ -47,7 +47,7 @@ StyledWindow { Layout.alignment: Qt.AlignTop margin: 4 - color: Theme.palette.base200 + color: Styling.theme.base200 RowLayout { LucideIcon { diff --git a/modules/launcher/items/AppItem.qml b/modules/launcher/items/AppItem.qml index 7a10111..a9437c0 100644 --- a/modules/launcher/items/AppItem.qml +++ b/modules/launcher/items/AppItem.qml @@ -42,7 +42,7 @@ Item { Layout.alignment: Qt.AlignBottom Layout.fillWidth: true - color: root.active ? Theme.palette.primarycontent : Theme.palette.basecontent + color: root.active ? Styling.theme.primarycontent : Styling.theme.basecontent font.pixelSize: 14 font.bold: true } @@ -52,7 +52,7 @@ Item { Layout.alignment: Qt.AlignTop Layout.fillWidth: true - color: root.active ? Theme.palette.primarycontent : Theme.palette.basecontent + color: root.active ? Styling.theme.primarycontent : Styling.theme.basecontent font.pixelSize: 10 elide: Text.ElideRight } diff --git a/modules/pomodoro/Pomodoro.qml b/modules/pomodoro/Pomodoro.qml index 925d652..168af2d 100644 --- a/modules/pomodoro/Pomodoro.qml +++ b/modules/pomodoro/Pomodoro.qml @@ -53,10 +53,10 @@ StyledWindow { Circle { id: circle radius: 150 - borderColor: Theme.palette.base100 - strokeColor: Pomodoro.state == "timer" ? Theme.palette.primary : Theme.palette.warning + borderColor: Styling.theme.base100 + strokeColor: Pomodoro.state == "timer" ? Styling.theme.primary : Styling.theme.warning strokeWidth: 12 - fillColor: button.hovered ? Theme.palette.primary : "transparent" + fillColor: button.hovered ? Styling.theme.primary : "transparent" percentage: (Pomodoro.state == "timer" ? (Pomodoro.initialTime - Pomodoro.remainingTime) : Pomodoro.remainingTime) / Pomodoro.initialTime % 1 } diff --git a/modules/powermenu/PowerMenu.qml b/modules/powermenu/PowerMenu.qml index 198c5ba..dee8827 100644 --- a/modules/powermenu/PowerMenu.qml +++ b/modules/powermenu/PowerMenu.qml @@ -76,7 +76,7 @@ StyledWindow { highlightResizeDuration: 0 highlight: Rectangle { radius: 8 - color: Theme.palette.primary + color: Styling.theme.primary } onCurrentItemChanged: { @@ -103,7 +103,7 @@ StyledWindow { } padding: 16 - color: list.currentIndex == index ? Theme.palette.primarycontent : Theme.palette.basecontent + color: list.currentIndex == index ? Styling.theme.primarycontent : Styling.theme.basecontent text: modelData.text font.pixelSize: 18 font.bold: true diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 3815c7f..581c482 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -137,7 +137,7 @@ StyledWindow { font.pixelSize: 18 } StyledWrapperRectangle { - border.color: Theme.palette.base100 + border.color: Styling.theme.base100 border.width: 2 StyledListView { implicitWidth: 200 diff --git a/widgets/Circle.qml b/widgets/Circle.qml index 33207a5..226bcf0 100644 --- a/widgets/Circle.qml +++ b/widgets/Circle.qml @@ -22,8 +22,8 @@ Item { ShapePath { id: fill - fillColor: Theme.palette.base100 - strokeColor: Theme.palette.base200 + fillColor: Styling.theme.base100 + strokeColor: Styling.theme.base200 strokeWidth: 8 PathAngleArc { From 205ad37e3ebb6befb55ef489b44e3560c6a0f40e Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 17:33:48 -0400 Subject: [PATCH 15/90] only watch theme files --- config/Theme.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/Theme.qml b/config/Theme.qml index 82c316a..e54b66e 100644 --- a/config/Theme.qml +++ b/config/Theme.qml @@ -16,7 +16,7 @@ Singleton { Process { running: true - command: ["bash", "-c", `inotifywait -m -r ~/.config/lux -e modify,move,create,delete | while read dir action; do ls -m "$dir"; done`] + command: ["bash", "-c", `inotifywait -m -r ~/.config/lux/themes/ -e modify,move,create,delete | while read dir action; do ls -m "$dir"; done`] stderr: StdioCollector { onStreamFinished: console.log(`line read: ${this.text}`) } From 7de7ae19bb8989dc52d4fa7bdc6b8be101f1fa2c Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 22:41:21 -0400 Subject: [PATCH 16/90] add typography --- components/MprisController.qml | 4 +- components/StyledIconButton.qml | 2 +- components/StyledText.qml | 3 +- config/Dimensions.qml | 122 ------------------ config/Styling.qml | 86 ++++++------ modules/bar/components/Clock.qml | 7 - modules/bar/components/Cpu.qml | 4 +- modules/bar/components/Gpu.qml | 6 +- modules/bar/components/Memory.qml | 5 +- modules/bar/components/Network.qml | 6 +- modules/bar/components/Power.qml | 10 +- modules/bar/components/Storage.qml | 5 +- .../bar/components/hyprland/Workspaces.qml | 3 +- modules/bar/components/tray/Tray.qml | 3 +- 14 files changed, 77 insertions(+), 189 deletions(-) diff --git a/components/MprisController.qml b/components/MprisController.qml index a6b6a88..265d045 100644 --- a/components/MprisController.qml +++ b/components/MprisController.qml @@ -21,7 +21,7 @@ Loader { id: text Layout.alignment: Qt.AlignHCenter text: `${root.player.trackTitle} - ${root.player.trackArtist}` - font.pixelSize: Dimensions.mpris.fontSize + font.pixelSize: Styling.typography.textSize.base } RowLayout { @@ -57,7 +57,7 @@ Loader { } return `${formatTime(root.player.position / 60)}:${formatTime(root.player.position % 60)} - ${formatTime(root.player.length / 60)}:${formatTime(root.player.length % 60)}`; } - font.pixelSize: Dimensions.mpris.fontSize + font.pixelSize: Styling.typography.textSize.sm } StyledSlider { diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml index bdfea7a..5a91ff4 100644 --- a/components/StyledIconButton.qml +++ b/components/StyledIconButton.qml @@ -10,7 +10,7 @@ RoundButton { property int rotation: 0 font.family: Styling.lucide.font.family - font.pixelSize: 19 + font.pixelSize: 16 radius: 8 padding: 8 diff --git a/components/StyledText.qml b/components/StyledText.qml index 0b1a44c..95ac150 100644 --- a/components/StyledText.qml +++ b/components/StyledText.qml @@ -2,7 +2,8 @@ import qs.config import QtQuick Text { - font.family: Theme.fontFamily + font.family: Styling.typography.fontFamily + font.pixelSize: Styling.typography.textSize.base color: Styling.theme.basecontent Behavior on color { ColorAnimation { diff --git a/config/Dimensions.qml b/config/Dimensions.qml index 6b3deaf..6298414 100644 --- a/config/Dimensions.qml +++ b/config/Dimensions.qml @@ -9,20 +9,6 @@ Singleton { property int radius: 8 property Bar bar: Bar {} - property Mpris mpris: Mpris {} - property Clock clock: Clock {} - property Pipewire pipewire: Pipewire {} - property Network network: Network {} - property Bluetooth bluetooth: Bluetooth {} - property Storage storage: Storage {} - property Memory memory: Memory {} - property Cpu cpu: Cpu {} - property Gpu gpu: Gpu {} - property Caffeine caffeine: Caffeine {} - property Notifications notifications: Notifications {} - property Workspace workspace: Workspace {} - property Tray tray: Tray {} - property TrayMenu trayMenu: TrayMenu {} component Bar: QtObject { property int spacing: 8 @@ -33,112 +19,4 @@ Singleton { property int verticalPadding: 2 property int horizontalPadding: 8 } - - component Mpris: QtObject { - property int fontSize: 14 - property int height: 30 - property int horizontalPadding: 8 - property int verticalPadding: 6 - } - - component Clock: QtObject { - property int fontSize: 14 - property int height: 30 - property int horizontalPadding: 8 - property int verticalPadding: 6 - } - - component Pipewire: QtObject { - property int fontSize: 14 - property int height: 30 - property int horizontalPadding: 8 - property int verticalPadding: 6 - } - - component Network: QtObject { - property int iconSize: 14 - property int fontSize: 14 - property int height: 30 - property int horizontalPadding: 8 - property int verticalPadding: 6 - } - - component Bluetooth: QtObject { - property int fontSize: 16 - property int height: 30 - property int horizontalPadding: 8 - property int verticalPadding: 6 - } - - component Storage: QtObject { - property int iconSize: 14 - property int fontSize: 14 - property int height: 30 - property int horizontalPadding: 8 - property int verticalPadding: 6 - } - - component Memory: QtObject { - property int iconSize: 14 - property int fontSize: 14 - property int height: 30 - property int horizontalPadding: 8 - property int verticalPadding: 6 - } - - component Cpu: QtObject { - property int iconSize: 14 - property int fontSize: 14 - property int height: 30 - property int horizontalPadding: 8 - property int verticalPadding: 6 - } - - component Gpu: QtObject { - property int iconSize: 14 - property int fontSize: 14 - property int height: 30 - property int horizontalPadding: 8 - property int verticalPadding: 6 - } - - component Caffeine: QtObject { - property int fontSize: 16 - property int height: 30 - property int horizontalPadding: 8 - property int verticalPadding: 6 - } - - component Notifications: QtObject { - property int fontSize: 16 - property int height: 30 - property int horizontalPadding: 8 - property int verticalPadding: 6 - } - - component Workspace: QtObject { - property int spacing: 5 - property int iconSize: 16 - property int width: 30 - property int height: 30 - property int verticalPadding: 6 - property int horizontalPadding: 7 - } - - component Tray: QtObject { - property int spacing: 5 - property int iconSize: 18 - property int width: 30 - property int height: 30 - property int verticalPadding: 6 - property int horizontalPadding: 7 - } - - component TrayMenu: QtObject { - property int fontSize: 10 - property int width: 30 - property int height: 30 - property int verticalPadding: 6 - property int horizontalPadding: 7 - } } diff --git a/config/Styling.qml b/config/Styling.qml index 4b1d7a4..467268d 100644 --- a/config/Styling.qml +++ b/config/Styling.qml @@ -6,19 +6,31 @@ import Quickshell Singleton { id: root - readonly property Lucide lucide: Lucide {} readonly property Animations animations: Animations {} + readonly property Typography typography: Typography {} readonly property var theme: Theme.palette + readonly property Lucide lucide: Lucide {} component Animations: QtObject { - property AnimationSpeed speed: AnimationSpeed {} + readonly property AnimationSpeed speed: AnimationSpeed {} } component AnimationSpeed: QtObject { - property int veryFast: 50 - property int fast: 100 - property int normal: 200 - property int slow: 400 - property int verySlow: 1000 + readonly property int veryFast: 50 + readonly property int fast: 100 + readonly property int normal: 200 + readonly property int slow: 400 + readonly property int verySlow: 1000 + } + + component Typography: QtObject { + readonly property string fontFamily: "JetBrainsMono Nerd Font" + readonly property FontSize textSize: FontSize {} + } + component FontSize: QtObject { + readonly property int sm: 12 + readonly property int base: 14 + readonly property int lg: 18 + readonly property int xl: 24 } component Lucide: Item { @@ -32,35 +44,35 @@ Singleton { } } component LucideIcons: QtObject { - property string batteryCharging: "\u{E058}" - property string batteryFull: "\u{E059}" - property string batteryMedium: "\u{E05b}" - property string batteryLow: "\u{E05a}" - property string batteryWarning: "\u{E3b0}" - property string bell: "\u{E05d}" - property string bellRing: "\u{E224}" - property string bluetooth: "\u{E060}" - property string bluetoothConnected: "\u{E1b8}" - property string brickWall: "\u{E586}" - property string coffee: "\u{E09a}" - property string chevronLeft: "\u{E072}" - property string chevronRight: "\u{E073}" - property string cpu: "\u{E0ad}" - property string gpu: "\u{E66f}" - property string hardDrive: "\u{E0f1}" - property string memoryStick: "\u{E44a}" - property string pause: "\u{E132}" - property string play: "\u{E140}" - property string search: "\u{E155}" - property string skipBack: "\u{E163}" - property string skipForward: "\u{E164}" - property string stop: "\u{E132}" - property string square: "\u{E16B}" - property string wifiOff: "\u{E1af}" - property string wifiLow: "\u{E5fd}" - property string wifiHigh: "\u{E5fc}" - property string wifi: "\u{E1ae}" - property string triangle: "\u{E192}" - property string triangleDashed: "\u{E642}" + readonly property string batteryCharging: "\u{E058}" + readonly property string batteryFull: "\u{E059}" + readonly property string batteryMedium: "\u{E05b}" + readonly property string batteryLow: "\u{E05a}" + readonly property string batteryWarning: "\u{E3b0}" + readonly property string bell: "\u{E05d}" + readonly property string bellRing: "\u{E224}" + readonly property string bluetooth: "\u{E060}" + readonly property string bluetoothConnected: "\u{E1b8}" + readonly property string brickWall: "\u{E586}" + readonly property string coffee: "\u{E09a}" + readonly property string chevronLeft: "\u{E072}" + readonly property string chevronRight: "\u{E073}" + readonly property string cpu: "\u{E0ad}" + readonly property string gpu: "\u{E66f}" + readonly property string hardDrive: "\u{E0f1}" + readonly property string memoryStick: "\u{E44a}" + readonly property string pause: "\u{E132}" + readonly property string play: "\u{E140}" + readonly property string search: "\u{E155}" + readonly property string skipBack: "\u{E163}" + readonly property string skipForward: "\u{E164}" + readonly property string stop: "\u{E132}" + readonly property string square: "\u{E16B}" + readonly property string wifiOff: "\u{E1af}" + readonly property string wifiLow: "\u{E5fd}" + readonly property string wifiHigh: "\u{E5fc}" + readonly property string wifi: "\u{E1ae}" + readonly property string triangle: "\u{E192}" + readonly property string triangleDashed: "\u{E642}" } } diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml index c18d940..9b483e5 100644 --- a/modules/bar/components/Clock.qml +++ b/modules/bar/components/Clock.qml @@ -1,16 +1,9 @@ import qs.components -import qs.config -import qs.widgets import Quickshell StyledLabel { StyledText { - id: text - - font.pixelSize: Dimensions.clock.fontSize - text: ` ${Qt.formatDateTime(clock.date, "hh:mm:ss AP")}` - SystemClock { id: clock precision: SystemClock.Seconds diff --git a/modules/bar/components/Cpu.qml b/modules/bar/components/Cpu.qml index d627fb3..dda97c9 100644 --- a/modules/bar/components/Cpu.qml +++ b/modules/bar/components/Cpu.qml @@ -15,13 +15,13 @@ StyledButton { } contentItem: RowLayout { - id: row spacing: 0 Ref { service: SystemInfo } + LucideIcon { text: Styling.lucide.icons.cpu color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent @@ -30,10 +30,8 @@ StyledButton { StyledText { id: text - font.pixelSize: Dimensions.cpu.fontSize text: ` ${(SystemInfo.cpuPerc * 100).toFixed().toString().padStart(2, "_")}%` color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent - states: [ State { name: "showTemp" diff --git a/modules/bar/components/Gpu.qml b/modules/bar/components/Gpu.qml index ee11e87..e7ee38b 100644 --- a/modules/bar/components/Gpu.qml +++ b/modules/bar/components/Gpu.qml @@ -11,17 +11,17 @@ StyledButton { property bool showTemp: false onClicked: { - root.showTemp = !root.showTemp; + showTemp = !showTemp; } contentItem: RowLayout { - id: row spacing: 0 Ref { service: SystemInfo } + LucideIcon { text: Styling.lucide.icons.gpu color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent @@ -30,10 +30,8 @@ StyledButton { StyledText { id: text - font.pixelSize: Dimensions.gpu.fontSize text: ` ${(SystemInfo.gpuPerc * 100).toFixed().toString().padStart(2, "_")}%` color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent - states: [ State { name: "temp" diff --git a/modules/bar/components/Memory.qml b/modules/bar/components/Memory.qml index 1f251e6..43aae51 100644 --- a/modules/bar/components/Memory.qml +++ b/modules/bar/components/Memory.qml @@ -6,17 +6,18 @@ import QtQuick import QtQuick.Layouts StyledLabel { + RowLayout { + Ref { service: SystemInfo } + LucideIcon { text: Styling.lucide.icons.memoryStick } StyledText { - id: text - font.pixelSize: Dimensions.memory.fontSize text: ` ${(SystemInfo.memPerc * 100).toFixed()}%` } } diff --git a/modules/bar/components/Network.qml b/modules/bar/components/Network.qml index 4fa89cd..47a0406 100644 --- a/modules/bar/components/Network.qml +++ b/modules/bar/components/Network.qml @@ -6,15 +6,16 @@ import QtQuick import QtQuick.Layouts StyledLabel { + RowLayout { + Ref { service: NetworkService } + LucideIcon { id: icon - text: Styling.lucide.icons.wifiOff - states: [ State { name: "high" @@ -48,7 +49,6 @@ StyledLabel { StyledText { id: text - font.pixelSize: Dimensions.network.fontSize text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%` } } diff --git a/modules/bar/components/Power.qml b/modules/bar/components/Power.qml index 51bc4b9..0dfde02 100644 --- a/modules/bar/components/Power.qml +++ b/modules/bar/components/Power.qml @@ -9,10 +9,16 @@ StyledButton { property UPowerDevice laptopBattery: UPower.devices.values.find(device => device.isLaptopBattery) ?? null property bool isCritical: laptopBattery?.percentage < 0.10 + visible: laptopBattery + contentItem: RowLayout { + spacing: 4 + LucideIcon { + Layout.alignment: Qt.AlignVCenter + color: { if (root.isCritical) { return Styling.theme.error; @@ -22,7 +28,6 @@ StyledButton { } return Styling.theme.basecontent; } - font.pixelSize: 16 text: { if (root.laptopBattery?.state == UPowerDeviceState.Charging) { return Styling.lucide.icons.batteryCharging; @@ -41,7 +46,9 @@ StyledButton { } StyledText { + Layout.alignment: Qt.AlignVCenter + color: { if (root.isCritical) { return Styling.theme.error; @@ -54,5 +61,4 @@ StyledButton { text: `${(root.laptopBattery?.percentage.toFixed(2) * 100)}%` } } - visible: laptopBattery } diff --git a/modules/bar/components/Storage.qml b/modules/bar/components/Storage.qml index a7d189a..fdb1fd0 100644 --- a/modules/bar/components/Storage.qml +++ b/modules/bar/components/Storage.qml @@ -6,17 +6,20 @@ import QtQuick import QtQuick.Layouts StyledLabel { + RowLayout { + Ref { service: SystemInfo } + LucideIcon { text: Styling.lucide.icons.hardDrive } StyledText { id: text - font.pixelSize: Dimensions.storage.fontSize + text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%` } } diff --git a/modules/bar/components/hyprland/Workspaces.qml b/modules/bar/components/hyprland/Workspaces.qml index 44a3e16..5a4d10e 100644 --- a/modules/bar/components/hyprland/Workspaces.qml +++ b/modules/bar/components/hyprland/Workspaces.qml @@ -1,6 +1,5 @@ pragma ComponentBehavior: Bound -import qs.config import QtQuick import QtQuick.Layouts import Quickshell.Hyprland @@ -8,7 +7,7 @@ import Quickshell.Hyprland RowLayout { id: root - spacing: Dimensions.workspace.spacing + spacing: 4 Repeater { diff --git a/modules/bar/components/tray/Tray.qml b/modules/bar/components/tray/Tray.qml index ac343f8..0ffd814 100644 --- a/modules/bar/components/tray/Tray.qml +++ b/modules/bar/components/tray/Tray.qml @@ -1,6 +1,5 @@ pragma ComponentBehavior: Bound -import qs.config import QtQuick import QtQuick.Layouts import Quickshell.Services.SystemTray @@ -8,7 +7,7 @@ import Quickshell.Services.SystemTray RowLayout { id: root - spacing: Dimensions.tray.spacing + spacing: 4 Repeater { model: SystemTray.items From af396bc2c59118febbf648fb51371319ca329366 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 6 Sep 2025 08:45:35 -0400 Subject: [PATCH 17/90] layout, radius and border --- components/LucideIcon.qml | 1 - components/MprisController.qml | 19 +++++++++++--- components/MprisPlayerSelector.qml | 4 +-- components/StyledButton.qml | 4 +-- components/StyledIconButton.qml | 2 +- components/StyledLabel.qml | 2 +- components/StyledProgressBar.qml | 4 +-- components/StyledSlider.qml | 4 +-- components/StyledSwitch.qml | 4 +-- components/StyledToolTip.qml | 4 +-- components/StyledWrapperRectangle.qml | 2 +- config/Dimensions.qml | 22 ---------------- config/Styling.qml | 11 ++++++++ config/Theme.qml | 5 ++++ modules/bar/Bar.qml | 36 +++++++++++++-------------- modules/launcher/items/AppItem.qml | 3 +-- modules/powermenu/PowerMenu.qml | 5 ++-- 17 files changed, 67 insertions(+), 65 deletions(-) delete mode 100644 config/Dimensions.qml diff --git a/components/LucideIcon.qml b/components/LucideIcon.qml index aa73b88..8788c0d 100644 --- a/components/LucideIcon.qml +++ b/components/LucideIcon.qml @@ -4,7 +4,6 @@ import QtQuick Text { font.family: Styling.lucide.font.family font.pixelSize: 16 - color: Styling.theme.basecontent Behavior on color { ColorAnimation { diff --git a/components/MprisController.qml b/components/MprisController.qml index 265d045..4ad8be0 100644 --- a/components/MprisController.qml +++ b/components/MprisController.qml @@ -14,35 +14,43 @@ Loader { active: player != null sourceComponent: ColumnLayout { - spacing: 12 + spacing: Styling.layout.spacing.xl implicitWidth: 800 StyledText { id: text + Layout.alignment: Qt.AlignHCenter - text: `${root.player.trackTitle} - ${root.player.trackArtist}` + font.pixelSize: Styling.typography.textSize.base + text: `${root.player.trackTitle} - ${root.player.trackArtist}` } RowLayout { Layout.alignment: Qt.AlignHCenter StyledIconButton { id: backButton + text: Styling.lucide.icons.skipBack + onClicked: { root.player.previous(); } } StyledIconButton { id: playPauseButton + text: root.player.isPlaying ? Styling.lucide.icons.pause : Styling.lucide.icons.play + onClicked: { root.player.isPlaying = !root.player.isPlaying; } } StyledIconButton { id: forwardButton + text: Styling.lucide.icons.skipForward + onClicked: { root.player.next(); } @@ -51,21 +59,24 @@ Loader { StyledText { Layout.alignment: Qt.AlignHCenter + + font.pixelSize: Styling.typography.textSize.sm text: { function formatTime(num) { return Math.floor(num).toString().padStart(2, "0"); } return `${formatTime(root.player.position / 60)}:${formatTime(root.player.position % 60)} - ${formatTime(root.player.length / 60)}:${formatTime(root.player.length % 60)}`; } - font.pixelSize: Styling.typography.textSize.sm } StyledSlider { + Layout.fillWidth: true + from: 0 to: root.player.length ?? 0 value: root.player.position implicitHeight: 6 - Layout.fillWidth: true + onMoved: { root.player.position = value; } diff --git a/components/MprisPlayerSelector.qml b/components/MprisPlayerSelector.qml index 2a4a8c3..bd81afc 100644 --- a/components/MprisPlayerSelector.qml +++ b/components/MprisPlayerSelector.qml @@ -5,7 +5,7 @@ import QtQuick import QtQuick.Layouts RowLayout { - spacing: 8 + spacing: Styling.layout.spacing.xl Layout.alignment: Qt.AlignHCenter @@ -21,6 +21,7 @@ RowLayout { } StyledText { + font.pixelSize: Styling.typography.textSize.xl text: { if (!Mpris.active) { return "inactive"; @@ -35,7 +36,6 @@ RowLayout { } return displayName; } - font.pixelSize: 20 } StyledIconButton { diff --git a/components/StyledButton.qml b/components/StyledButton.qml index bfe817f..bd86cb0 100644 --- a/components/StyledButton.qml +++ b/components/StyledButton.qml @@ -7,7 +7,7 @@ Button { property alias border: rectangle.border property alias radius: rectangle.radius - font.pixelSize: 14 + font.pixelSize: Styling.typography.textSize.base verticalPadding: 6 horizontalPadding: 8 @@ -33,6 +33,6 @@ Button { background: Rectangle { id: rectangle color: root.palette.button - radius: 8 + radius: Styling.theme.radiusField } } diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml index 5a91ff4..f9fbd84 100644 --- a/components/StyledIconButton.qml +++ b/components/StyledIconButton.qml @@ -11,7 +11,7 @@ RoundButton { font.family: Styling.lucide.font.family font.pixelSize: 16 - radius: 8 + radius: Styling.theme.radiusField padding: 8 HoverHandler { diff --git a/components/StyledLabel.qml b/components/StyledLabel.qml index a1f429d..3682786 100644 --- a/components/StyledLabel.qml +++ b/components/StyledLabel.qml @@ -5,7 +5,7 @@ import Quickshell.Widgets WrapperRectangle { id: root margin: 8 - radius: 8 + radius: Styling.theme.radiusBox color: Styling.theme.base200 Behavior on color { ColorAnimation { diff --git a/components/StyledProgressBar.qml b/components/StyledProgressBar.qml index d40d8ba..6075b4d 100644 --- a/components/StyledProgressBar.qml +++ b/components/StyledProgressBar.qml @@ -16,7 +16,7 @@ ProgressBar { implicitWidth: 200 implicitHeight: 6 color: Styling.theme.base100 - radius: 8 + radius: Styling.theme.radiusField } contentItem: Item { @@ -27,7 +27,7 @@ ProgressBar { Rectangle { width: control.visualPosition * parent.width height: parent.height - radius: 8 + radius: Styling.theme.radiusField color: Styling.theme.primary visible: !control.indeterminate } diff --git a/components/StyledSlider.qml b/components/StyledSlider.qml index fc1df87..34d0633 100644 --- a/components/StyledSlider.qml +++ b/components/StyledSlider.qml @@ -18,7 +18,7 @@ Slider { implicitHeight: control.height width: control.availableWidth height: implicitHeight - radius: 8 + radius: Styling.theme.radiusField color: Styling.theme.base200 Rectangle { @@ -30,7 +30,7 @@ Slider { } height: parent.height color: Styling.theme.primary - radius: 8 + radius: Styling.theme.radiusField } } handle: null diff --git a/components/StyledSwitch.qml b/components/StyledSwitch.qml index 06dd4e8..7d909ac 100644 --- a/components/StyledSwitch.qml +++ b/components/StyledSwitch.qml @@ -29,7 +29,7 @@ Switch { implicitHeight: 24 x: control.width - width - control.rightPadding y: parent.height / 2 - height / 2 - radius: 16 + radius: Styling.theme.radiusSelector color: "transparent" border.color: control.checked ? Styling.theme.primary : Styling.theme.basecontent border.width: 2 @@ -45,7 +45,7 @@ Switch { } width: parent.width / 2 - indicator.padding height: parent.height - indicator.padding - radius: 16 + radius: Styling.theme.radiusSelector color: control.checked ? Styling.theme.primary : Styling.theme.basecontent } } diff --git a/components/StyledToolTip.qml b/components/StyledToolTip.qml index 8fa2b0b..9015122 100644 --- a/components/StyledToolTip.qml +++ b/components/StyledToolTip.qml @@ -13,9 +13,9 @@ ToolTip { } background: Rectangle { - radius: 8 + radius: Styling.theme.radiusBox color: Styling.theme.base100 border.color: Styling.theme.base200 - border.width: 2 + border.width: Styling.theme.border } } diff --git a/components/StyledWrapperRectangle.qml b/components/StyledWrapperRectangle.qml index b6c3eba..25dd7d5 100644 --- a/components/StyledWrapperRectangle.qml +++ b/components/StyledWrapperRectangle.qml @@ -3,7 +3,7 @@ import QtQuick import Quickshell.Widgets WrapperRectangle { - radius: 8 + radius: Styling.theme.radiusBox color: Styling.theme.base100 Behavior on color { ColorAnimation { diff --git a/config/Dimensions.qml b/config/Dimensions.qml deleted file mode 100644 index 6298414..0000000 --- a/config/Dimensions.qml +++ /dev/null @@ -1,22 +0,0 @@ -pragma Singleton - -import QtQuick -import Quickshell - -Singleton { - id: root - - property int radius: 8 - - property Bar bar: Bar {} - - component Bar: QtObject { - property int spacing: 8 - property int border: 2 - property int height: 50 - property int verticalMargins: 4 - property int horizontalMargins: 8 - property int verticalPadding: 2 - property int horizontalPadding: 8 - } -} diff --git a/config/Styling.qml b/config/Styling.qml index 467268d..71127b8 100644 --- a/config/Styling.qml +++ b/config/Styling.qml @@ -8,6 +8,7 @@ Singleton { readonly property Animations animations: Animations {} readonly property Typography typography: Typography {} + readonly property Layout layout: Layout {} readonly property var theme: Theme.palette readonly property Lucide lucide: Lucide {} @@ -33,6 +34,16 @@ Singleton { readonly property int xl: 24 } + component Layout: QtObject { + readonly property LayoutSpacing spacing: LayoutSpacing {} + } + component LayoutSpacing: QtObject { + readonly property int sm: 2 + readonly property int base: 4 + readonly property int lg: 8 + readonly property int xl: 12 + } + component Lucide: Item { readonly property alias font: loader.font diff --git a/config/Theme.qml b/config/Theme.qml index e54b66e..596c9ac 100644 --- a/config/Theme.qml +++ b/config/Theme.qml @@ -86,6 +86,11 @@ Singleton { property color warningcontent: "#793205" property color error: "#ff627d" property color errorcontent: "#4d0218" + + property int radiusSelector: 8 + property int radiusField: 8 + property int radiusBox: 8 + property int border: 2 } } } diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml index 4aff347..98d2aba 100644 --- a/modules/bar/Bar.qml +++ b/modules/bar/Bar.qml @@ -16,7 +16,7 @@ PanelWindow { anchors.left: true anchors.right: true - implicitHeight: Dimensions.bar.height + implicitHeight: 50 color: 'transparent' WlrLayershell.layer: WlrLayer.Top @@ -24,20 +24,20 @@ PanelWindow { Item { anchors.fill: parent - anchors.leftMargin: Dimensions.bar.horizontalMargins - anchors.rightMargin: Dimensions.bar.horizontalMargins - anchors.topMargin: Dimensions.bar.verticalMargins - anchors.bottomMargin: Dimensions.bar.verticalMargins + anchors.leftMargin: 8 + anchors.rightMargin: 8 + anchors.topMargin: 4 + anchors.bottomMargin: 4 Rectangle { id: background anchors.fill: parent color: Styling.theme.base100 - radius: Dimensions.radius + radius: Styling.theme.radiusBox border { color: Styling.theme.base200 - width: Dimensions.bar.border + width: Styling.theme.border pixelAligned: true } } @@ -48,11 +48,11 @@ PanelWindow { anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: Dimensions.bar.horizontalPadding - anchors.topMargin: Dimensions.bar.verticalPadding - anchors.bottomMargin: Dimensions.bar.verticalPadding + anchors.leftMargin: 8 + anchors.topMargin: 4 + anchors.bottomMargin: 4 - spacing: Dimensions.bar.spacing + spacing: Styling.layout.spacing.base SystemLogo { implicitSize: 22 @@ -69,10 +69,10 @@ PanelWindow { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter - anchors.topMargin: Dimensions.bar.verticalPadding - anchors.bottomMargin: Dimensions.bar.verticalPadding + anchors.topMargin: 4 + anchors.bottomMargin: 4 - spacing: Dimensions.bar.spacing + spacing: Styling.layout.spacing.base Mpris {} } @@ -83,11 +83,11 @@ PanelWindow { anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - anchors.rightMargin: Dimensions.bar.horizontalPadding - anchors.topMargin: Dimensions.bar.verticalPadding - anchors.bottomMargin: Dimensions.bar.verticalPadding + anchors.rightMargin: 8 + anchors.topMargin: 4 + anchors.bottomMargin: 4 - spacing: Dimensions.bar.spacing + spacing: Styling.layout.spacing.base Pywal {} diff --git a/modules/launcher/items/AppItem.qml b/modules/launcher/items/AppItem.qml index a9437c0..8ef6c46 100644 --- a/modules/launcher/items/AppItem.qml +++ b/modules/launcher/items/AppItem.qml @@ -43,7 +43,6 @@ Item { Layout.alignment: Qt.AlignBottom Layout.fillWidth: true color: root.active ? Styling.theme.primarycontent : Styling.theme.basecontent - font.pixelSize: 14 font.bold: true } @@ -53,7 +52,7 @@ Item { Layout.alignment: Qt.AlignTop Layout.fillWidth: true color: root.active ? Styling.theme.primarycontent : Styling.theme.basecontent - font.pixelSize: 10 + font.pixelSize: Styling.typography.textSize.sm elide: Text.ElideRight } } diff --git a/modules/powermenu/PowerMenu.qml b/modules/powermenu/PowerMenu.qml index dee8827..e204b20 100644 --- a/modules/powermenu/PowerMenu.qml +++ b/modules/powermenu/PowerMenu.qml @@ -28,7 +28,6 @@ StyledWindow { id: rect margin: 14 - radius: 8 HyprlandFocusGrab { active: Visibility.powermenu @@ -67,7 +66,7 @@ StyledWindow { model: Config.powermenu.actions - spacing: 8 + spacing: Styling.layout.spacing.base implicitWidth: 220 implicitHeight: 185 @@ -105,7 +104,7 @@ StyledWindow { padding: 16 color: list.currentIndex == index ? Styling.theme.primarycontent : Styling.theme.basecontent text: modelData.text - font.pixelSize: 18 + font.pixelSize: Styling.typography.textSize.lg font.bold: true } } From 0c4d2dc597142fb67ed9d8f18990be35745d7199 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 31 Aug 2025 23:28:54 -0400 Subject: [PATCH 18/90] 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 168af2d..8c3d7ee 100644 --- a/modules/pomodoro/Pomodoro.qml +++ b/modules/pomodoro/Pomodoro.qml @@ -54,10 +54,10 @@ StyledWindow { id: circle radius: 150 borderColor: Styling.theme.base100 - strokeColor: Pomodoro.state == "timer" ? Styling.theme.primary : Styling.theme.warning + strokeColor: PomodoroService.state == "timer" ? Theme.palette.primary : Theme.palette.warning strokeWidth: 12 fillColor: button.hovered ? Styling.theme.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 { @@ -68,17 +68,17 @@ StyledWindow { radius: 9999 focus: root.visible - text: Pomodoro.running ? Styling.lucide.icons.square : Styling.lucide.icons.play + text: PomodoroService.running ? Styling.lucide.icons.square : Styling.lucide.icons.play font.pixelSize: 48 background: Item {} onClicked: { - Pomodoro.toggle(); + PomodoroService.toggle(); } Keys.onSpacePressed: event => { event.accepted = true; - Pomodoro.toggle(); + PomodoroService.toggle(); } Keys.onEscapePressed: event => { event.accepted = true; @@ -86,7 +86,7 @@ StyledWindow { } Keys.onTabPressed: event => { event.accepted = true; - Pomodoro.reset(); + PomodoroService.reset(); } } } @@ -94,7 +94,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 @@ -107,7 +107,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 8c591377160d6d8d5c770cae460cbd3c87f6d71c Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 6 Sep 2025 09:03:33 -0400 Subject: [PATCH 19/90] remove menu --- components/StyledMenu.qml | 28 ---------------------------- components/StyledMenuItem.qml | 9 --------- components/StyledMenuSeparator.qml | 9 --------- 3 files changed, 46 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 3335c73..0000000 --- a/components/StyledMenu.qml +++ /dev/null @@ -1,28 +0,0 @@ -import qs.config -import QtQuick -import QtQuick.Controls - -Menu { - id: root - - palette.window: Styling.theme.base100 - palette.base: Styling.theme.base100 - - focus: true - closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent - - 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 210df67..0000000 --- a/components/StyledMenuItem.qml +++ /dev/null @@ -1,9 +0,0 @@ -import qs.config -import QtQuick -import QtQuick.Controls - -MenuItem { - palette.text: Styling.theme.basecontent - palette.highlight: Styling.theme.primary - palette.highlightedText: Styling.theme.primarycontent -} diff --git a/components/StyledMenuSeparator.qml b/components/StyledMenuSeparator.qml deleted file mode 100644 index 05e621a..0000000 --- a/components/StyledMenuSeparator.qml +++ /dev/null @@ -1,9 +0,0 @@ -import qs.config -import QtQuick -import QtQuick.Controls - -MenuSeparator { - palette.text: Styling.theme.basecontent - palette.highlight: Styling.theme.primary - palette.highlightedText: Styling.theme.primarycontent -} From 7022c3a9aefe8925f65002941ed88fc4ebb65f45 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 6 Sep 2025 21:53:57 -0400 Subject: [PATCH 20/90] move bar to root window --- components/StyledWrapperRectangle.qml | 7 +++ modules/Shell.qml | 63 ++++++++++++++++++++++++++- modules/bar/Bar.qml | 63 +++++++-------------------- 3 files changed, 83 insertions(+), 50 deletions(-) diff --git a/components/StyledWrapperRectangle.qml b/components/StyledWrapperRectangle.qml index 25dd7d5..f2453d0 100644 --- a/components/StyledWrapperRectangle.qml +++ b/components/StyledWrapperRectangle.qml @@ -10,4 +10,11 @@ WrapperRectangle { duration: Styling.animations.speed.fast } } + border.width: 2 + border.color: Styling.theme.base100 + Behavior on border.color { + ColorAnimation { + duration: Styling.animations.speed.fast + } + } } diff --git a/modules/Shell.qml b/modules/Shell.qml index 41e7643..e9fdcc9 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 + bar.anchors.margins + + 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 98d2aba..37d8226 100644 --- a/modules/bar/Bar.qml +++ b/modules/bar/Bar.qml @@ -3,55 +3,31 @@ 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.margins: 6 + anchors.leftMargin: 10 + anchors.rightMargin: 10 - implicitHeight: 50 - color: 'transparent' + border.width: 3 + border.color: Styling.theme.base200 - WlrLayershell.layer: WlrLayer.Top + margin: 4 - Item { - - anchors.fill: parent - anchors.leftMargin: 8 - anchors.rightMargin: 8 - anchors.topMargin: 4 - anchors.bottomMargin: 4 - - Rectangle { - id: background - anchors.fill: parent - color: Styling.theme.base100 - radius: Styling.theme.radiusBox - - border { - color: Styling.theme.base200 - width: Styling.theme.border - pixelAligned: true - } - } + RowLayout { RowLayout { id: leftbar - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - - anchors.leftMargin: 8 - anchors.topMargin: 4 - anchors.bottomMargin: 4 - spacing: Styling.layout.spacing.base SystemLogo { @@ -66,11 +42,7 @@ PanelWindow { RowLayout { id: centerbar - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - - anchors.topMargin: 4 - anchors.bottomMargin: 4 + Layout.alignment: Qt.AlignHCenter spacing: Styling.layout.spacing.base @@ -80,12 +52,7 @@ PanelWindow { RowLayout { id: rightbar - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - - anchors.rightMargin: 8 - anchors.topMargin: 4 - anchors.bottomMargin: 4 + Layout.alignment: Qt.AlignRight spacing: Styling.layout.spacing.base From 96d13526662db544f83c49a40911083c1245bec6 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 6 Sep 2025 22:27:42 -0400 Subject: [PATCH 21/90] move styledpopupwindow --- {widgets => components}/StyledPopupWindow.qml | 0 modules/bar/components/bluetooth/BluetoothMenu.qml | 1 - modules/bar/components/notifications/NotificationMenu.qml | 1 - modules/bar/components/tray/menu/Menu.qml | 2 +- services/Visibility.qml | 2 +- 5 files changed, 2 insertions(+), 4 deletions(-) rename {widgets => components}/StyledPopupWindow.qml (100%) diff --git a/widgets/StyledPopupWindow.qml b/components/StyledPopupWindow.qml similarity index 100% rename from widgets/StyledPopupWindow.qml rename to components/StyledPopupWindow.qml diff --git a/modules/bar/components/bluetooth/BluetoothMenu.qml b/modules/bar/components/bluetooth/BluetoothMenu.qml index 9bb911e..b9bc688 100644 --- a/modules/bar/components/bluetooth/BluetoothMenu.qml +++ b/modules/bar/components/bluetooth/BluetoothMenu.qml @@ -2,7 +2,6 @@ pragma ComponentBehavior: Bound import qs.components import qs.config -import qs.widgets import QtQuick import QtQuick.Layouts import Quickshell diff --git a/modules/bar/components/notifications/NotificationMenu.qml b/modules/bar/components/notifications/NotificationMenu.qml index 8a889d2..d871da8 100644 --- a/modules/bar/components/notifications/NotificationMenu.qml +++ b/modules/bar/components/notifications/NotificationMenu.qml @@ -3,7 +3,6 @@ pragma ComponentBehavior: Bound import qs.components import qs.config import qs.services -import qs.widgets import QtQuick import QtQuick.Layouts diff --git a/modules/bar/components/tray/menu/Menu.qml b/modules/bar/components/tray/menu/Menu.qml index f547133..43ce6b5 100644 --- a/modules/bar/components/tray/menu/Menu.qml +++ b/modules/bar/components/tray/menu/Menu.qml @@ -1,7 +1,7 @@ pragma ComponentBehavior: Bound +import qs.components import qs.config -import qs.widgets import QtQuick import QtQuick.Layouts import Quickshell diff --git a/services/Visibility.qml b/services/Visibility.qml index d8deed4..57cf887 100644 --- a/services/Visibility.qml +++ b/services/Visibility.qml @@ -1,6 +1,6 @@ pragma Singleton -import qs.widgets +import qs.components import Quickshell Singleton { From 4e2a1874d11fd2bcd6c12b248e6a29d274906b3d Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 6 Sep 2025 22:28:06 -0400 Subject: [PATCH 22/90] delete styled popup --- components/StyledPopup.qml | 37 --------------------------------- modules/storybook/Storybook.qml | 18 ---------------- 2 files changed, 55 deletions(-) delete mode 100644 components/StyledPopup.qml diff --git a/components/StyledPopup.qml b/components/StyledPopup.qml deleted file mode 100644 index 0c54c45..0000000 --- a/components/StyledPopup.qml +++ /dev/null @@ -1,37 +0,0 @@ -import qs.config -import QtQuick -import Quickshell -import Quickshell.Hyprland - -PopupWindow { - id: root - - implicitWidth: background.implicitWidth - implicitHeight: background.implicitHeight - color: "transparent" - - function open() { - visible = true; - } - - function close() { - visible = false; - } - - HyprlandFocusGrab { - id: grab - 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) - color: Styling.theme.base200 - radius: 8 - } -} diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 581c482..59962cc 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -177,24 +177,6 @@ StyledWindow { 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" - } - } - } } } From 0405dc3414e19736466ddcd278ff20c3867ecf13 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 6 Sep 2025 22:31:17 -0400 Subject: [PATCH 23/90] rename to styled rectangle --- components/{StyledLabel.qml => StyledRectangle.qml} | 0 modules/bar/components/Clock.qml | 2 +- modules/bar/components/Memory.qml | 2 +- modules/bar/components/Network.qml | 2 +- modules/bar/components/Storage.qml | 2 +- modules/bar/components/bluetooth/AvailableDevice.qml | 2 +- modules/bar/components/bluetooth/ConnectedDevice.qml | 2 +- modules/bar/components/bluetooth/PairedDevice.qml | 2 +- modules/bar/components/notifications/NotificationItem.qml | 2 +- modules/bar/components/notifications/NotificationMenu.qml | 2 +- 10 files changed, 9 insertions(+), 9 deletions(-) rename components/{StyledLabel.qml => StyledRectangle.qml} (100%) diff --git a/components/StyledLabel.qml b/components/StyledRectangle.qml similarity index 100% rename from components/StyledLabel.qml rename to components/StyledRectangle.qml diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml index 9b483e5..3ddb5a7 100644 --- a/modules/bar/components/Clock.qml +++ b/modules/bar/components/Clock.qml @@ -1,7 +1,7 @@ import qs.components import Quickshell -StyledLabel { +StyledRectangle { StyledText { text: ` ${Qt.formatDateTime(clock.date, "hh:mm:ss AP")}` SystemClock { diff --git a/modules/bar/components/Memory.qml b/modules/bar/components/Memory.qml index 43aae51..55f90df 100644 --- a/modules/bar/components/Memory.qml +++ b/modules/bar/components/Memory.qml @@ -5,7 +5,7 @@ import qs.utils import QtQuick import QtQuick.Layouts -StyledLabel { +StyledRectangle { RowLayout { diff --git a/modules/bar/components/Network.qml b/modules/bar/components/Network.qml index 47a0406..57a0905 100644 --- a/modules/bar/components/Network.qml +++ b/modules/bar/components/Network.qml @@ -5,7 +5,7 @@ import qs.utils import QtQuick import QtQuick.Layouts -StyledLabel { +StyledRectangle { RowLayout { diff --git a/modules/bar/components/Storage.qml b/modules/bar/components/Storage.qml index fdb1fd0..0a1d2b7 100644 --- a/modules/bar/components/Storage.qml +++ b/modules/bar/components/Storage.qml @@ -5,7 +5,7 @@ import qs.utils import QtQuick import QtQuick.Layouts -StyledLabel { +StyledRectangle { RowLayout { diff --git a/modules/bar/components/bluetooth/AvailableDevice.qml b/modules/bar/components/bluetooth/AvailableDevice.qml index c941649..62a65f5 100644 --- a/modules/bar/components/bluetooth/AvailableDevice.qml +++ b/modules/bar/components/bluetooth/AvailableDevice.qml @@ -7,7 +7,7 @@ import Quickshell import Quickshell.Bluetooth import Quickshell.Widgets -StyledLabel { +StyledRectangle { id: root required property BluetoothDevice modelData diff --git a/modules/bar/components/bluetooth/ConnectedDevice.qml b/modules/bar/components/bluetooth/ConnectedDevice.qml index 11944dd..2b6f079 100644 --- a/modules/bar/components/bluetooth/ConnectedDevice.qml +++ b/modules/bar/components/bluetooth/ConnectedDevice.qml @@ -8,7 +8,7 @@ import Quickshell import Quickshell.Bluetooth import Quickshell.Widgets -StyledLabel { +StyledRectangle { id: root required property BluetoothDevice modelData diff --git a/modules/bar/components/bluetooth/PairedDevice.qml b/modules/bar/components/bluetooth/PairedDevice.qml index 27afaf3..297c63f 100644 --- a/modules/bar/components/bluetooth/PairedDevice.qml +++ b/modules/bar/components/bluetooth/PairedDevice.qml @@ -9,7 +9,7 @@ import Quickshell import Quickshell.Bluetooth import Quickshell.Widgets -StyledLabel { +StyledRectangle { id: root required property BluetoothDevice modelData diff --git a/modules/bar/components/notifications/NotificationItem.qml b/modules/bar/components/notifications/NotificationItem.qml index 690d800..b2c45fb 100644 --- a/modules/bar/components/notifications/NotificationItem.qml +++ b/modules/bar/components/notifications/NotificationItem.qml @@ -7,7 +7,7 @@ import QtQuick.Layouts import Quickshell import Quickshell.Widgets -StyledLabel { +StyledRectangle { id: root required property var modelData diff --git a/modules/bar/components/notifications/NotificationMenu.qml b/modules/bar/components/notifications/NotificationMenu.qml index d871da8..877f30f 100644 --- a/modules/bar/components/notifications/NotificationMenu.qml +++ b/modules/bar/components/notifications/NotificationMenu.qml @@ -29,7 +29,7 @@ StyledPopupWindow { onClicked: Notifications.clear() } - StyledLabel { + StyledRectangle { Layout.columnSpan: 2 color: Styling.theme.base200 StyledListView { From fdcaa77581f93efb9bedc49d89990d60ede50708 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 7 Sep 2025 09:23:51 -0400 Subject: [PATCH 24/90] remove scuffed popup handling --- components/StyledPopupWindow.qml | 113 +++++++++++++++---------------- services/Visibility.qml | 10 --- 2 files changed, 54 insertions(+), 69 deletions(-) diff --git a/components/StyledPopupWindow.qml b/components/StyledPopupWindow.qml index 4927cfb..44e5553 100644 --- a/components/StyledPopupWindow.qml +++ b/components/StyledPopupWindow.qml @@ -1,6 +1,6 @@ -import qs.services import QtQuick import Quickshell +import Quickshell.Hyprland import Quickshell.Widgets PopupWindow { @@ -16,87 +16,82 @@ PopupWindow { color: "transparent" function toggle() { - Visibility.togglePopup(this); + root.state = root.state == "opened" ? "closed" : "opened"; + } + + HyprlandFocusGrab { + id: grab + active: root.visible + windows: [root] + onCleared: { + root.state = "closed"; + } } implicitWidth: background.width - Behavior on implicitWidth { - NumberAnimation { - duration: 100 - } - } implicitHeight: background.height - Behavior on implicitHeight { - NumberAnimation { - duration: 100 - } - } - Timer { - id: timer - interval: 750 - onTriggered: { - if (!root.visible) { - return; + WrapperRectangle { + id: background + + focus: true + onFocusChanged: { + if (!focus) { + grab.active = false; } - root.toggle(); } - } - WrapperMouseArea { - hoverEnabled: true - onExited: { - timer.start(); + Behavior on opacity { + NumberAnimation { + duration: root.animationDuration + } } - onEntered: { - timer.stop(); - } - WrapperRectangle { - id: background - opacity: 0 - Behavior on opacity { - NumberAnimation { - duration: root.animationDuration + state: "closed" + states: [ + State { + name: "closed" + PropertyChanges { + background { + opacity: 0 + } } - } - - states: State { + }, + State { name: "opened" - when: root.opened PropertyChanges { background { opacity: 1 } } } + ] - transitions: [ - Transition { - from: "" - to: "opened" - ScriptAction { - script: root.visible = true + transitions: [ + Transition { + from: "closed" + to: "opened" + ScriptAction { + script: root.visible = true + } + }, + Transition { + from: "opened" + to: "closed" + SequentialAnimation { + PauseAnimation { + duration: root.animationDuration } - }, - Transition { - from: "opened" - to: "" - SequentialAnimation { - PauseAnimation { - duration: root.animationDuration - } - ScriptAction { - script: root.visible = false - } + ScriptAction { + script: root.visible = false } } - ] - - Loader { - active: root.visible - sourceComponent: root.content } + ] + + Loader { + active: root.visible + sourceComponent: root.content } } } diff --git a/services/Visibility.qml b/services/Visibility.qml index 57cf887..d3ea806 100644 --- a/services/Visibility.qml +++ b/services/Visibility.qml @@ -1,6 +1,5 @@ pragma Singleton -import qs.components import Quickshell Singleton { @@ -9,15 +8,6 @@ Singleton { property alias pomodoro: properties.pomodoro property alias powermenu: properties.powermenu property alias storybook: properties.storybook - property StyledPopupWindow activePopup - - function togglePopup(popup: StyledPopupWindow) { - if (activePopup && popup != activePopup) { - activePopup.state = ""; - } - popup.state = popup.state == "opened" ? "" : "opened"; - activePopup = popup; - } PersistentProperties { id: properties From 112ed0d6de08dfde12f1eeac437bfa943ac1aa7e Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 7 Sep 2025 09:31:19 -0400 Subject: [PATCH 25/90] simplify StyledPopupWindow --- components/StyledPopupWindow.qml | 27 ++++++++----------- .../components/bluetooth/BluetoothMenu.qml | 5 ---- .../notifications/NotificationMenu.qml | 4 --- modules/bar/components/tray/menu/Menu.qml | 4 --- 4 files changed, 11 insertions(+), 29 deletions(-) diff --git a/components/StyledPopupWindow.qml b/components/StyledPopupWindow.qml index 44e5553..cf87fb1 100644 --- a/components/StyledPopupWindow.qml +++ b/components/StyledPopupWindow.qml @@ -1,39 +1,34 @@ +import qs.config import QtQuick import Quickshell import Quickshell.Hyprland -import Quickshell.Widgets PopupWindow { id: root - property bool opened: false - property int animationDuration: 200 - property alias margins: background.margin - property alias backgroundColor: background.color - property alias radius: background.radius - property alias state: background.state + required property Component content + implicitWidth: background.width + implicitHeight: background.height color: "transparent" - function toggle() { - root.state = root.state == "opened" ? "closed" : "opened"; - } - HyprlandFocusGrab { id: grab active: root.visible windows: [root] onCleared: { - root.state = "closed"; + background.state = "closed"; } } - implicitWidth: background.width - implicitHeight: background.height + function toggle() { + background.state = background.state == "opened" ? "closed" : "opened"; + } - WrapperRectangle { + StyledWrapperRectangle { id: background + margin: 16 focus: true onFocusChanged: { if (!focus) { @@ -43,7 +38,7 @@ PopupWindow { Behavior on opacity { NumberAnimation { - duration: root.animationDuration + duration: Styling.animations.speed.normal } } diff --git a/modules/bar/components/bluetooth/BluetoothMenu.qml b/modules/bar/components/bluetooth/BluetoothMenu.qml index b9bc688..7e953cf 100644 --- a/modules/bar/components/bluetooth/BluetoothMenu.qml +++ b/modules/bar/components/bluetooth/BluetoothMenu.qml @@ -1,7 +1,6 @@ pragma ComponentBehavior: Bound import qs.components -import qs.config import QtQuick import QtQuick.Layouts import Quickshell @@ -10,10 +9,6 @@ import Quickshell.Bluetooth StyledPopupWindow { id: root - backgroundColor: Styling.theme.base300 - margins: 16 - radius: 8 - content: ColumnLayout { spacing: 8 StyledWrapperRectangle { diff --git a/modules/bar/components/notifications/NotificationMenu.qml b/modules/bar/components/notifications/NotificationMenu.qml index 877f30f..d608fd8 100644 --- a/modules/bar/components/notifications/NotificationMenu.qml +++ b/modules/bar/components/notifications/NotificationMenu.qml @@ -9,10 +9,6 @@ import QtQuick.Layouts StyledPopupWindow { id: root - backgroundColor: Styling.theme.base300 - margins: 16 - radius: 8 - content: GridLayout { columns: 2 diff --git a/modules/bar/components/tray/menu/Menu.qml b/modules/bar/components/tray/menu/Menu.qml index 43ce6b5..db54cfc 100644 --- a/modules/bar/components/tray/menu/Menu.qml +++ b/modules/bar/components/tray/menu/Menu.qml @@ -9,10 +9,6 @@ import Quickshell StyledPopupWindow { id: window - backgroundColor: Styling.theme.base300 - margins: 14 - radius: 8 - property QsMenuOpener menuOpener content: ColumnLayout { From 351fb82ac7e93805b9fa80cfe28411036f6ed68f Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 7 Sep 2025 12:21:33 -0400 Subject: [PATCH 26/90] use wrapper rect --- components/StyledRectangle.qml | 7 +- components/StyledWrapperRectangle.qml | 1 + modules/bar/Bar.qml | 1 + modules/bar/components/Clock.qml | 12 ++- modules/bar/components/Memory.qml | 21 +++-- modules/bar/components/Network.qml | 79 +++++++++---------- modules/bar/components/Storage.qml | 23 +++--- .../components/bluetooth/AvailableDevice.qml | 5 +- .../components/bluetooth/ConnectedDevice.qml | 4 +- .../bar/components/bluetooth/PairedDevice.qml | 5 +- .../notifications/NotificationItem.qml | 4 +- .../notifications/NotificationMenu.qml | 4 +- 12 files changed, 75 insertions(+), 91 deletions(-) diff --git a/components/StyledRectangle.qml b/components/StyledRectangle.qml index 3682786..aefab71 100644 --- a/components/StyledRectangle.qml +++ b/components/StyledRectangle.qml @@ -1,12 +1,9 @@ import qs.config import QtQuick -import Quickshell.Widgets -WrapperRectangle { - id: root - margin: 8 +Rectangle { radius: Styling.theme.radiusBox - color: Styling.theme.base200 + color: Styling.theme.base100 Behavior on color { ColorAnimation { duration: Styling.animations.speed.normal diff --git a/components/StyledWrapperRectangle.qml b/components/StyledWrapperRectangle.qml index f2453d0..1a89fa8 100644 --- a/components/StyledWrapperRectangle.qml +++ b/components/StyledWrapperRectangle.qml @@ -3,6 +3,7 @@ import QtQuick import Quickshell.Widgets WrapperRectangle { + margin: 8 radius: Styling.theme.radiusBox color: Styling.theme.base100 Behavior on color { diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml index 37d8226..bbbc6ec 100644 --- a/modules/bar/Bar.qml +++ b/modules/bar/Bar.qml @@ -22,6 +22,7 @@ StyledWrapperRectangle { border.color: Styling.theme.base200 margin: 4 + color: Styling.theme.base100 RowLayout { diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml index 3ddb5a7..1941417 100644 --- a/modules/bar/components/Clock.qml +++ b/modules/bar/components/Clock.qml @@ -1,12 +1,10 @@ import qs.components import Quickshell -StyledRectangle { - StyledText { - text: ` ${Qt.formatDateTime(clock.date, "hh:mm:ss AP")}` - SystemClock { - id: clock - precision: SystemClock.Seconds - } +StyledText { + text: ` ${Qt.formatDateTime(clock.date, "hh:mm:ss AP")}` + SystemClock { + id: clock + precision: SystemClock.Seconds } } diff --git a/modules/bar/components/Memory.qml b/modules/bar/components/Memory.qml index 55f90df..deafda7 100644 --- a/modules/bar/components/Memory.qml +++ b/modules/bar/components/Memory.qml @@ -5,20 +5,17 @@ import qs.utils import QtQuick import QtQuick.Layouts -StyledRectangle { +RowLayout { - RowLayout { + Ref { + service: SystemInfo + } - Ref { - service: SystemInfo - } + LucideIcon { + text: Styling.lucide.icons.memoryStick + } - LucideIcon { - text: Styling.lucide.icons.memoryStick - } - - StyledText { - text: ` ${(SystemInfo.memPerc * 100).toFixed()}%` - } + StyledText { + text: ` ${(SystemInfo.memPerc * 100).toFixed()}%` } } diff --git a/modules/bar/components/Network.qml b/modules/bar/components/Network.qml index 57a0905..7b65d2c 100644 --- a/modules/bar/components/Network.qml +++ b/modules/bar/components/Network.qml @@ -5,51 +5,48 @@ import qs.utils import QtQuick import QtQuick.Layouts -StyledRectangle { +RowLayout { - RowLayout { + Ref { + service: NetworkService + } - Ref { - service: NetworkService - } - - LucideIcon { - id: icon - text: Styling.lucide.icons.wifiOff - states: [ - State { - name: "high" - when: NetworkService.active?.strength > 50 - PropertyChanges { - icon { - text: Styling.lucide.icons.wifi - } - } - }, - State { - name: "medium" - when: NetworkService.active?.strength > 25 - PropertyChanges { - icon { - text: Styling.lucide.icons.wifiHigh - } - } - }, - State { - name: "low" - when: NetworkService.active?.strength > 0 - PropertyChanges { - icon { - text: Styling.lucide.icons.wifiLow - } + LucideIcon { + id: icon + text: Styling.lucide.icons.wifiOff + states: [ + State { + name: "high" + when: NetworkService.active?.strength > 50 + PropertyChanges { + icon { + text: Styling.lucide.icons.wifi } } - ] - } + }, + State { + name: "medium" + when: NetworkService.active?.strength > 25 + PropertyChanges { + icon { + text: Styling.lucide.icons.wifiHigh + } + } + }, + State { + name: "low" + when: NetworkService.active?.strength > 0 + PropertyChanges { + icon { + text: Styling.lucide.icons.wifiLow + } + } + } + ] + } - StyledText { - id: text - text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%` - } + StyledText { + id: text + text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%` } } diff --git a/modules/bar/components/Storage.qml b/modules/bar/components/Storage.qml index 0a1d2b7..7450969 100644 --- a/modules/bar/components/Storage.qml +++ b/modules/bar/components/Storage.qml @@ -5,22 +5,19 @@ import qs.utils import QtQuick import QtQuick.Layouts -StyledRectangle { +RowLayout { - RowLayout { + Ref { + service: SystemInfo + } - Ref { - service: SystemInfo - } + LucideIcon { + text: Styling.lucide.icons.hardDrive + } - LucideIcon { - text: Styling.lucide.icons.hardDrive - } + StyledText { + id: text - StyledText { - id: text - - text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%` - } + text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%` } } diff --git a/modules/bar/components/bluetooth/AvailableDevice.qml b/modules/bar/components/bluetooth/AvailableDevice.qml index 62a65f5..9196210 100644 --- a/modules/bar/components/bluetooth/AvailableDevice.qml +++ b/modules/bar/components/bluetooth/AvailableDevice.qml @@ -1,20 +1,21 @@ pragma ComponentBehavior: Bound import qs.components +import qs.config import QtQuick import QtQuick.Layouts import Quickshell import Quickshell.Bluetooth import Quickshell.Widgets -StyledRectangle { +StyledWrapperRectangle { id: root required property BluetoothDevice modelData RowLayout { id: row - spacing: 8 + spacing: Styling.layout.spacing.base Loader { active: root.modelData?.icon != undefined diff --git a/modules/bar/components/bluetooth/ConnectedDevice.qml b/modules/bar/components/bluetooth/ConnectedDevice.qml index 2b6f079..960acf9 100644 --- a/modules/bar/components/bluetooth/ConnectedDevice.qml +++ b/modules/bar/components/bluetooth/ConnectedDevice.qml @@ -8,14 +8,14 @@ import Quickshell import Quickshell.Bluetooth import Quickshell.Widgets -StyledRectangle { +StyledWrapperRectangle { id: root required property BluetoothDevice modelData RowLayout { id: row - spacing: 8 + spacing: Styling.layout.spacing.base Loader { active: root.modelData?.icon != undefined diff --git a/modules/bar/components/bluetooth/PairedDevice.qml b/modules/bar/components/bluetooth/PairedDevice.qml index 297c63f..f8583b0 100644 --- a/modules/bar/components/bluetooth/PairedDevice.qml +++ b/modules/bar/components/bluetooth/PairedDevice.qml @@ -2,21 +2,20 @@ pragma ComponentBehavior: Bound import qs.components import qs.config -import qs.widgets import QtQuick import QtQuick.Layouts import Quickshell import Quickshell.Bluetooth import Quickshell.Widgets -StyledRectangle { +StyledWrapperRectangle { id: root required property BluetoothDevice modelData RowLayout { id: row - spacing: 8 + spacing: Styling.layout.spacing.base Loader { active: root.modelData?.icon != undefined diff --git a/modules/bar/components/notifications/NotificationItem.qml b/modules/bar/components/notifications/NotificationItem.qml index b2c45fb..21b69f5 100644 --- a/modules/bar/components/notifications/NotificationItem.qml +++ b/modules/bar/components/notifications/NotificationItem.qml @@ -1,18 +1,16 @@ pragma ComponentBehavior: Bound import qs.components -import qs.widgets import QtQuick import QtQuick.Layouts import Quickshell import Quickshell.Widgets -StyledRectangle { +StyledWrapperRectangle { id: root required property var modelData - margin: 16 anchors.left: parent.left anchors.right: parent.right diff --git a/modules/bar/components/notifications/NotificationMenu.qml b/modules/bar/components/notifications/NotificationMenu.qml index d608fd8..43f2f19 100644 --- a/modules/bar/components/notifications/NotificationMenu.qml +++ b/modules/bar/components/notifications/NotificationMenu.qml @@ -1,7 +1,6 @@ pragma ComponentBehavior: Bound import qs.components -import qs.config import qs.services import QtQuick import QtQuick.Layouts @@ -25,9 +24,8 @@ StyledPopupWindow { onClicked: Notifications.clear() } - StyledRectangle { + StyledWrapperRectangle { Layout.columnSpan: 2 - color: Styling.theme.base200 StyledListView { id: notifications From 4bda51f02c6da34acbc71553213ca6005c7c767a Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 7 Sep 2025 12:22:27 -0400 Subject: [PATCH 27/90] panel window --- components/{StyledWindow.qml => StyledPanelWindow.qml} | 0 modules/launcher/Launcher.qml | 2 +- modules/pomodoro/Pomodoro.qml | 2 +- modules/powermenu/PowerMenu.qml | 2 +- modules/storybook/Storybook.qml | 2 +- 5 files changed, 4 insertions(+), 4 deletions(-) rename components/{StyledWindow.qml => StyledPanelWindow.qml} (100%) diff --git a/components/StyledWindow.qml b/components/StyledPanelWindow.qml similarity index 100% rename from components/StyledWindow.qml rename to components/StyledPanelWindow.qml diff --git a/modules/launcher/Launcher.qml b/modules/launcher/Launcher.qml index d04ce1b..7a2b0d0 100644 --- a/modules/launcher/Launcher.qml +++ b/modules/launcher/Launcher.qml @@ -9,7 +9,7 @@ import Quickshell.Wayland import QtQuick import QtQuick.Layouts -StyledWindow { +StyledPanelWindow { id: root name: "launcher" diff --git a/modules/pomodoro/Pomodoro.qml b/modules/pomodoro/Pomodoro.qml index 8c3d7ee..88d3e96 100644 --- a/modules/pomodoro/Pomodoro.qml +++ b/modules/pomodoro/Pomodoro.qml @@ -9,7 +9,7 @@ import Quickshell.Wayland import QtQuick import QtQuick.Layouts -StyledWindow { +StyledPanelWindow { id: root name: "pomodoro" diff --git a/modules/powermenu/PowerMenu.qml b/modules/powermenu/PowerMenu.qml index e204b20..739bcee 100644 --- a/modules/powermenu/PowerMenu.qml +++ b/modules/powermenu/PowerMenu.qml @@ -9,7 +9,7 @@ import Quickshell.Wayland import QtQuick import QtQuick.Layouts -StyledWindow { +StyledPanelWindow { id: root name: "powermenu" diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 59962cc..68d5776 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -9,7 +9,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts -StyledWindow { +StyledPanelWindow { id: root name: "storybook" From ea86cc575dd192e2141d7531ecc8b65698d09016 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 7 Sep 2025 12:45:54 -0400 Subject: [PATCH 28/90] panel window contains background styling --- components/StyledPanelWindow.qml | 32 ++++++++++++++++++++++++++++++++ modules/launcher/Launcher.qml | 7 ++++--- modules/pomodoro/Pomodoro.qml | 7 ++++--- modules/powermenu/PowerMenu.qml | 7 ++++--- modules/storybook/Storybook.qml | 7 ++++--- 5 files changed, 48 insertions(+), 12 deletions(-) diff --git a/components/StyledPanelWindow.qml b/components/StyledPanelWindow.qml index f1275ba..dab6ee0 100644 --- a/components/StyledPanelWindow.qml +++ b/components/StyledPanelWindow.qml @@ -1,9 +1,41 @@ +import qs.config +import QtQuick import Quickshell import Quickshell.Wayland PanelWindow { + id: window + required property string name WlrLayershell.namespace: `lux-${name}` color: "transparent" + + Rectangle { + anchors.fill: parent + radius: Styling.theme.radiusBox + Behavior on radius { + NumberAnimation { + duration: Styling.animations.speed.normal + } + } + color: Styling.theme.base100 + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.fast + } + } + Behavior on opacity { + NumberAnimation { + duration: Styling.animations.speed.fast + } + } + border.width: 2 + border.color: Styling.theme.base200 + Behavior on border.color { + ColorAnimation { + duration: Styling.animations.speed.fast + } + } + } } diff --git a/modules/launcher/Launcher.qml b/modules/launcher/Launcher.qml index 7a2b0d0..816d221 100644 --- a/modules/launcher/Launcher.qml +++ b/modules/launcher/Launcher.qml @@ -4,10 +4,11 @@ import "services" import qs.config import qs.components import qs.services -import Quickshell.Hyprland -import Quickshell.Wayland import QtQuick import QtQuick.Layouts +import Quickshell.Hyprland +import Quickshell.Wayland +import Quickshell.Widgets StyledPanelWindow { id: root @@ -34,7 +35,7 @@ StyledPanelWindow { search.clear(); } - StyledWrapperRectangle { + WrapperItem { id: rect margin: 18 diff --git a/modules/pomodoro/Pomodoro.qml b/modules/pomodoro/Pomodoro.qml index 88d3e96..034e479 100644 --- a/modules/pomodoro/Pomodoro.qml +++ b/modules/pomodoro/Pomodoro.qml @@ -4,10 +4,11 @@ import qs.components import qs.config import qs.services import qs.widgets -import Quickshell.Hyprland -import Quickshell.Wayland import QtQuick import QtQuick.Layouts +import Quickshell.Hyprland +import Quickshell.Wayland +import Quickshell.Widgets StyledPanelWindow { id: root @@ -20,7 +21,7 @@ StyledPanelWindow { WlrLayershell.layer: WlrLayer.Top WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None - StyledWrapperRectangle { + WrapperItem { id: rect leftMargin: 48 diff --git a/modules/powermenu/PowerMenu.qml b/modules/powermenu/PowerMenu.qml index 739bcee..6627c0f 100644 --- a/modules/powermenu/PowerMenu.qml +++ b/modules/powermenu/PowerMenu.qml @@ -4,10 +4,11 @@ import qs.components import qs.config import qs.services import Quickshell.Hyprland -import Quickshell.Io -import Quickshell.Wayland import QtQuick import QtQuick.Layouts +import Quickshell.Io +import Quickshell.Wayland +import Quickshell.Widgets StyledPanelWindow { id: root @@ -24,7 +25,7 @@ StyledPanelWindow { id: process } - StyledWrapperRectangle { + WrapperItem { id: rect margin: 14 diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 68d5776..e402da0 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -3,11 +3,12 @@ pragma ComponentBehavior: Bound import qs.components import qs.config import qs.services -import Quickshell.Hyprland -import Quickshell.Wayland import QtQuick import QtQuick.Controls import QtQuick.Layouts +import Quickshell.Hyprland +import Quickshell.Wayland +import Quickshell.Widgets StyledPanelWindow { id: root @@ -28,7 +29,7 @@ StyledPanelWindow { } } - StyledWrapperRectangle { + WrapperItem { id: rect margin: 48 From 25e313e31b4c2e69f2684d3c27f3025b6e992c35 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 7 Sep 2025 12:52:53 -0400 Subject: [PATCH 29/90] clean up launcher, make it guuud --- modules/launcher/Launcher.qml | 30 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/modules/launcher/Launcher.qml b/modules/launcher/Launcher.qml index 816d221..2ee10b0 100644 --- a/modules/launcher/Launcher.qml +++ b/modules/launcher/Launcher.qml @@ -11,30 +11,30 @@ import Quickshell.Wayland import Quickshell.Widgets StyledPanelWindow { - id: root + id: window name: "launcher" visible: Visibility.launcher + onVisibleChanged: { + if (!visible) { + list.currentIndex = 0; + search.clear(); + } + } implicitWidth: rect.width implicitHeight: rect.height WlrLayershell.layer: WlrLayer.Top - WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None + WlrLayershell.keyboardFocus: window.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None HyprlandFocusGrab { - active: root.visible - windows: [search] + active: Visibility.launcher + windows: [window] onCleared: { - root.reset(); + Visibility.launcher = false; } } - function reset() { - Visibility.launcher = false; - list.currentIndex = 0; - search.clear(); - } - WrapperItem { id: rect @@ -46,13 +46,11 @@ StyledPanelWindow { Layout.fillWidth: true Layout.alignment: Qt.AlignTop - margin: 4 color: Styling.theme.base200 RowLayout { LucideIcon { - id: icon Layout.leftMargin: 8 text: Styling.lucide.icons.search } @@ -63,19 +61,19 @@ StyledPanelWindow { Layout.fillWidth: true implicitHeight: 40 cursorVisible: true - focus: root.visible + focus: window.visible placeholderText: "Applications" placeholderTextColor: "grey" Keys.onEscapePressed: event => { event.accepted = true; - root.reset(); + Visibility.launcher = false; } Keys.onReturnPressed: event => { event.accepted = true; Apps.launch(list.currentItem.modelData); - root.reset(); + Visibility.launcher = false; } Keys.onUpPressed: event => { event.accepted = true; From 47532bd62644cc1825949010fdd1b8cc15553c48 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 7 Sep 2025 13:25:02 -0400 Subject: [PATCH 30/90] add configuration menu --- modules/Shell.qml | 2 ++ modules/Shortcuts.qml | 6 ++++++ modules/configuration/Configuration.qml | 25 +++++++++++++++++++++++++ services/Visibility.qml | 2 ++ 4 files changed, 35 insertions(+) create mode 100644 modules/configuration/Configuration.qml diff --git a/modules/Shell.qml b/modules/Shell.qml index e9fdcc9..b25fbe3 100644 --- a/modules/Shell.qml +++ b/modules/Shell.qml @@ -1,4 +1,5 @@ import "bar" +import "configuration" import "drawers" import "launcher" import "pomodoro" @@ -75,6 +76,7 @@ Variants { } } } + Configuration {} Launcher {} Pomodoro {} PowerMenu {} diff --git a/modules/Shortcuts.qml b/modules/Shortcuts.qml index e240bf9..7027fcd 100644 --- a/modules/Shortcuts.qml +++ b/modules/Shortcuts.qml @@ -5,6 +5,12 @@ import Quickshell.Hyprland Scope { id: root + LuxShortcut { + name: 'configuration' + description: 'Open the configuration screen' + onPressed: Visibility.configuration = !Visibility.configuration + } + LuxShortcut { name: 'launcher' description: 'Open the application launcher' diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml new file mode 100644 index 0000000..f03879d --- /dev/null +++ b/modules/configuration/Configuration.qml @@ -0,0 +1,25 @@ +import qs.components +import qs.services +import QtQuick +import QtQuick.Controls + +StyledPanelWindow { + id: window + + name: "configuration" + + visible: Visibility.configuration + implicitWidth: 800 + implicitHeight: 800 + + ScrollView { + id: view + + anchors.fill: parent + background: Item {} + } + + component Menus: QtObject { + property Component theme + } +} diff --git a/services/Visibility.qml b/services/Visibility.qml index d3ea806..a2576e0 100644 --- a/services/Visibility.qml +++ b/services/Visibility.qml @@ -3,6 +3,7 @@ pragma Singleton import Quickshell Singleton { + property alias configuration: properties.configuration property alias dashboard: properties.dashboard property alias launcher: properties.launcher property alias pomodoro: properties.pomodoro @@ -12,6 +13,7 @@ Singleton { PersistentProperties { id: properties + property bool configuration property bool dashboard property bool launcher property bool pomodoro From 8aced615ce79a5de1410d272280d0d636fe21685 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 7 Sep 2025 22:32:25 -0400 Subject: [PATCH 31/90] add theme selector to configurations --- components/StyledComboBox.qml | 79 +++++++++++++++++++++++++ components/StyledRectangle.qml | 2 +- modules/configuration/Configuration.qml | 51 ++++++++++++++-- modules/configuration/ThemeConfig.qml | 5 ++ 4 files changed, 131 insertions(+), 6 deletions(-) create mode 100644 components/StyledComboBox.qml create mode 100644 modules/configuration/ThemeConfig.qml diff --git a/components/StyledComboBox.qml b/components/StyledComboBox.qml new file mode 100644 index 0000000..fff6670 --- /dev/null +++ b/components/StyledComboBox.qml @@ -0,0 +1,79 @@ +pragma ComponentBehavior: Bound + +import qs.config +import QtQuick +import QtQuick.Controls + +ComboBox { + id: control + + palette.button: Styling.theme.base200 + palette.buttonText: Styling.theme.basecontent + palette.highlight: Styling.theme.primary + palette.highlightedText: Styling.theme.primarycontent + palette.text: Styling.theme.basecontent + palette.window: Styling.theme.base200 + + implicitHeight: 40 + + delegate: ItemDelegate { + id: delegate + + required property var model + required property int index + + width: control.width + contentItem: StyledText { + text: delegate.model[control.textRole] + color: delegate.highlighted ? palette.highlightedText : palette.buttonText + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + background: Rectangle { + color: delegate.highlighted ? palette.highlight : palette.button + radius: Styling.theme.radiusSelector + } + highlighted: control.highlightedIndex === index + } + + contentItem: StyledText { + leftPadding: 12 + + text: control.displayText + color: control.hovered || control.down ? palette.highlightedText : palette.buttonText + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + implicitWidth: 120 + implicitHeight: 40 + color: control.hovered || control.down ? palette.highlight : palette.button + border.color: Styling.theme.base100 + border.width: control.visualFocus ? 2 : 1 + radius: Styling.theme.radiusSelector + } + + popup: Popup { + palette: control.palette + y: control.height - 1 + width: control.width + height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin) + padding: 1 + + contentItem: ListView { + clip: true + implicitHeight: contentHeight + 2 + model: control.popup.visible ? control.delegateModel : null + currentIndex: control.highlightedIndex + + ScrollIndicator.vertical: ScrollIndicator {} + } + + background: Rectangle { + color: palette.window + bottomLeftRadius: Styling.theme.radiusField + bottomRightRadius: Styling.theme.radiusField + } + } +} diff --git a/components/StyledRectangle.qml b/components/StyledRectangle.qml index aefab71..77ad318 100644 --- a/components/StyledRectangle.qml +++ b/components/StyledRectangle.qml @@ -3,7 +3,7 @@ import QtQuick Rectangle { radius: Styling.theme.radiusBox - color: Styling.theme.base100 + color: Styling.theme.base200 Behavior on color { ColorAnimation { duration: Styling.animations.speed.normal diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index f03879d..d64fe74 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -1,7 +1,9 @@ import qs.components +import qs.config import qs.services import QtQuick import QtQuick.Controls +import QtQuick.Layouts StyledPanelWindow { id: window @@ -10,13 +12,52 @@ StyledPanelWindow { visible: Visibility.configuration implicitWidth: 800 - implicitHeight: 800 - - ScrollView { - id: view + implicitHeight: 400 + ColumnLayout { + spacing: 0 anchors.fill: parent - background: Item {} + StyledText { + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + + text: "Configurations" + font.pixelSize: Styling.typography.textSize.xl + padding: 8 + } + + StyledRectangle { + id: titleBar + + Layout.fillWidth: true + Layout.preferredHeight: 4 + } + + ScrollView { + id: view + + Layout.fillHeight: true + padding: 24 + background: Item {} + + GridLayout { + + columnSpacing: Styling.layout.spacing.xl + + StyledText { + text: "Theme" + // font.bold: true + font.pixelSize: Styling.typography.textSize.lg + } + + StyledComboBox { + currentIndex: Theme.themes.indexOf(Theme.currentTheme) + model: Theme.themes + onActivated: index => { + Theme.currentTheme = Theme.themes[index]; + } + } + } + } } component Menus: QtObject { diff --git a/modules/configuration/ThemeConfig.qml b/modules/configuration/ThemeConfig.qml new file mode 100644 index 0000000..b2e4f9e --- /dev/null +++ b/modules/configuration/ThemeConfig.qml @@ -0,0 +1,5 @@ +import QtQuick +import QtQuick.Layouts +import Quickshell + +GridLayout {} From 32167ef44ec8d7b3efaa424f34157b78a85793ac Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 7 Sep 2025 23:12:11 -0400 Subject: [PATCH 32/90] make storybook a tabbed window --- components/StyledButton.qml | 1 + components/StyledIconButton.qml | 1 + components/StyledTabBar.qml | 8 + components/StyledTabButton.qml | 44 ++++++ modules/storybook/Components.qml | 136 +++++++++++++++++ modules/storybook/Fields.qml | 34 +++++ modules/storybook/Selectors.qml | 21 +++ modules/storybook/Storybook.qml | 241 +++++-------------------------- 8 files changed, 279 insertions(+), 207 deletions(-) create mode 100644 components/StyledTabBar.qml create mode 100644 components/StyledTabButton.qml create mode 100644 modules/storybook/Components.qml create mode 100644 modules/storybook/Fields.qml create mode 100644 modules/storybook/Selectors.qml diff --git a/components/StyledButton.qml b/components/StyledButton.qml index bd86cb0..9d0ee64 100644 --- a/components/StyledButton.qml +++ b/components/StyledButton.qml @@ -8,6 +8,7 @@ Button { property alias radius: rectangle.radius font.pixelSize: Styling.typography.textSize.base + font.family: Styling.typography.fontFamily verticalPadding: 6 horizontalPadding: 8 diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml index f9fbd84..3e5731b 100644 --- a/components/StyledIconButton.qml +++ b/components/StyledIconButton.qml @@ -22,6 +22,7 @@ RoundButton { id: icon font: control.font text: control.text + verticalAlignment: Text.AlignVCenter color: control.color Behavior on color { ColorAnimation { diff --git a/components/StyledTabBar.qml b/components/StyledTabBar.qml new file mode 100644 index 0000000..70a92c1 --- /dev/null +++ b/components/StyledTabBar.qml @@ -0,0 +1,8 @@ +import QtQuick +import QtQuick.Controls.Basic + +TabBar { + id: control + + background: Item {} +} diff --git a/components/StyledTabButton.qml b/components/StyledTabButton.qml new file mode 100644 index 0000000..de9ac89 --- /dev/null +++ b/components/StyledTabButton.qml @@ -0,0 +1,44 @@ +import qs.config +import QtQuick +import QtQuick.Controls.Basic + +TabButton { + id: control + + contentItem: Text { + id: icon + font.pixelSize: Styling.typography.textSize.base + font.family: Styling.typography.fontFamily + text: control.text + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + color: control.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.normal + } + } + rotation: control.rotation + Behavior on rotation { + RotationAnimation { + duration: Styling.animations.speed.slow + easing.type: Easing.OutQuad + } + } + } + + background: Rectangle { + id: rectangle + color: control.hovered ? Styling.theme.primary : Styling.theme.base200 + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.normal + } + } + // radius: Styling.theme.radiusField + } + + HoverHandler { + cursorShape: Qt.PointingHandCursor + } +} diff --git a/modules/storybook/Components.qml b/modules/storybook/Components.qml new file mode 100644 index 0000000..d2b4d20 --- /dev/null +++ b/modules/storybook/Components.qml @@ -0,0 +1,136 @@ +import qs.components +import qs.config +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +GridLayout { + flow: GridLayout.TopToBottom + columns: 2 + rows: 10 + + 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: "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: Styling.theme.base100 + border.width: 2 + StyledListView { + implicitWidth: 200 + implicitHeight: 100 + model: 10 + delegate: StyledText { + text: "Hello world!" + } + } + } + } + + 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(); + } + } + } + } + + StyledDrawer { + id: drawer + edge: Qt.TopEdge + width: 400 + height: 200 + Button { + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + text: "Close" + onClicked: drawer.close() + } + } +} diff --git a/modules/storybook/Fields.qml b/modules/storybook/Fields.qml new file mode 100644 index 0000000..ff6c1ae --- /dev/null +++ b/modules/storybook/Fields.qml @@ -0,0 +1,34 @@ +import qs.components +import qs.config +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +GridLayout { + flow: GridLayout.TopToBottom + columns: 2 + rows: 10 + + ColumnLayout { + StyledText { + text: "Icon Button" + font.pixelSize: 18 + } + StyledIconButton { + text: Styling.lucide.icons.square + } + } + + ColumnLayout { + StyledText { + text: "Slider" + font.pixelSize: 18 + } + StyledSlider { + id: slider + from: 0 + to: 100 + value: 50 + } + } +} diff --git a/modules/storybook/Selectors.qml b/modules/storybook/Selectors.qml new file mode 100644 index 0000000..ed22c03 --- /dev/null +++ b/modules/storybook/Selectors.qml @@ -0,0 +1,21 @@ +import qs.components +import qs.config +import QtQuick +import QtQuick.Layouts + +GridLayout { + flow: GridLayout.TopToBottom + columns: 2 + rows: 10 + + ColumnLayout { + StyledText { + text: "Switch" + font.pixelSize: 18 + } + + StyledSwitch { + text: "Enable" + } + } +} diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index e402da0..729a49c 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -1,22 +1,20 @@ pragma ComponentBehavior: Bound import qs.components -import qs.config import qs.services import QtQuick import QtQuick.Controls import QtQuick.Layouts import Quickshell.Hyprland import Quickshell.Wayland -import Quickshell.Widgets StyledPanelWindow { id: root name: "storybook" visible: Visibility.storybook - implicitWidth: rect.width - implicitHeight: rect.height + implicitWidth: 500 + implicitHeight: 600 WlrLayershell.layer: WlrLayer.Top WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None @@ -29,215 +27,44 @@ StyledPanelWindow { } } - WrapperItem { - id: rect + ColumnLayout { + id: layout - margin: 48 + anchors.fill: parent + spacing: 0 - GridLayout { - id: grid - - flow: GridLayout.TopToBottom - columns: 2 - rows: 10 - - StyledText { - Layout.columnSpan: grid.columns - Layout.alignment: Qt.AlignHCenter + StyledTabBar { + id: tabs + Layout.fillWidth: true + StyledTabButton { + text: "Fields" + } + StyledTabButton { + text: "Selectors" + } + StyledTabButton { text: "Components" - font.pixelSize: 24 - font.bold: true - font.underline: true - bottomPadding: 24 - } - - ColumnLayout { - StyledText { - text: "Icon Button" - font.pixelSize: 18 - } - StyledIconButton { - text: Styling.lucide.icons.square - } - } - - ColumnLayout { - StyledText { - text: "Theme Selector" - font.pixelSize: 18 - } - RowLayout { - Repeater { - model: Theme.themes - delegate: StyledButton { - required property var modelData - text: modelData - onClicked: Theme.currentTheme = modelData - } - } - } - } - - ColumnLayout { - StyledText { - text: "Switch" - font.pixelSize: 18 - } - - 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: "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: Styling.theme.base100 - border.width: 2 - StyledListView { - implicitWidth: 200 - implicitHeight: 100 - model: 10 - delegate: StyledText { - text: "Hello world!" - } - } - } - } - - 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: "Popup" - font.pixelSize: 18 - } - Button { - id: fileButton - text: "File" - onPressed: menu.visible ? menu.close() : menu.open() - } - } - - 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(); - } - } - } } } - } - StyledDrawer { - id: drawer - edge: Qt.TopEdge - width: 400 - height: 200 - Button { - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - text: "Close" - onClicked: drawer.close() + StackLayout { + currentIndex: tabs.currentIndex + + ScrollView { + Layout.maximumHeight: 400 + padding: 36 + Fields {} + } + ScrollView { + Layout.maximumHeight: 400 + padding: 36 + Selectors {} + } + ScrollView { + Layout.maximumHeight: 400 + padding: 36 + Components {} + } } } } From e180fee2a907ecaa54c30382476e55bf09832a0e Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 8 Sep 2025 08:23:57 -0400 Subject: [PATCH 33/90] styled pane --- components/StyledPane.qml | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 components/StyledPane.qml diff --git a/components/StyledPane.qml b/components/StyledPane.qml new file mode 100644 index 0000000..4560aa4 --- /dev/null +++ b/components/StyledPane.qml @@ -0,0 +1,19 @@ +import qs.config +import QtQuick +import QtQuick.Controls + +Pane { + padding: 24 + background: Rectangle { + color: "transparent" + border.width: Styling.theme.border + border.color: Styling.theme.basecontent + opacity: 0.33 + Behavior on border.color { + ColorAnimation { + duration: Styling.animations.speed.fast + } + } + radius: Styling.theme.radiusBox + } +} From 162f8f6b6ffdca809285a42733c1c157de1db5b7 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 8 Sep 2025 10:13:13 -0400 Subject: [PATCH 34/90] tab button padding --- components/StyledTabButton.qml | 1 + 1 file changed, 1 insertion(+) diff --git a/components/StyledTabButton.qml b/components/StyledTabButton.qml index de9ac89..9ac48bd 100644 --- a/components/StyledTabButton.qml +++ b/components/StyledTabButton.qml @@ -12,6 +12,7 @@ TabButton { text: control.text verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter + padding: 6 color: control.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent Behavior on color { ColorAnimation { From a10c2f02540b6ffa30cb0dfcab0084c9424bafde Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 8 Sep 2025 10:56:07 -0400 Subject: [PATCH 35/90] use pane on items --- modules/storybook/Fields.qml | 43 ++++++++++++++++++++++++--------- modules/storybook/Storybook.qml | 22 +++++++++++------ 2 files changed, 46 insertions(+), 19 deletions(-) diff --git a/modules/storybook/Fields.qml b/modules/storybook/Fields.qml index ff6c1ae..1c76a2f 100644 --- a/modules/storybook/Fields.qml +++ b/modules/storybook/Fields.qml @@ -1,21 +1,33 @@ import qs.components import qs.config import QtQuick -import QtQuick.Controls import QtQuick.Layouts -GridLayout { - flow: GridLayout.TopToBottom - columns: 2 - rows: 10 +ColumnLayout { + + spacing: Styling.layout.spacing.xl + + ColumnLayout { + StyledText { + text: "Button" + font.pixelSize: 18 + } + StyledPane { + StyledButton { + text: "Button" + } + } + } ColumnLayout { StyledText { text: "Icon Button" font.pixelSize: 18 } - StyledIconButton { - text: Styling.lucide.icons.square + StyledPane { + StyledIconButton { + text: Styling.lucide.icons.square + } } } @@ -24,11 +36,18 @@ GridLayout { text: "Slider" font.pixelSize: 18 } - StyledSlider { - id: slider - from: 0 - to: 100 - value: 50 + StyledPane { + StyledSlider { + id: slider + from: 0 + to: 100 + value: 50 + } } } + + component FieldElement: QtObject { + property string title + property Component component + } } diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 729a49c..0c0851f 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -27,15 +27,17 @@ StyledPanelWindow { } } - ColumnLayout { + Item { id: layout - anchors.fill: parent - spacing: 0 StyledTabBar { id: tabs - Layout.fillWidth: true + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: stack.top + StyledTabButton { text: "Fields" } @@ -48,20 +50,26 @@ StyledPanelWindow { } StackLayout { + id: stack + + anchors.top: tabs.bottom + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + currentIndex: tabs.currentIndex ScrollView { - Layout.maximumHeight: 400 + Layout.fillWidth: true padding: 36 Fields {} } ScrollView { - Layout.maximumHeight: 400 padding: 36 Selectors {} } ScrollView { - Layout.maximumHeight: 400 + Layout.fillWidth: true padding: 36 Components {} } From fbc2a10b6968d00c37f0bd6589cdd32a19dc2ab9 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 9 Sep 2025 23:16:20 -0400 Subject: [PATCH 36/90] use quickshell idle inhib --- services/Caffeine.qml | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/services/Caffeine.qml b/services/Caffeine.qml index 04680b0..f4acebb 100644 --- a/services/Caffeine.qml +++ b/services/Caffeine.qml @@ -1,7 +1,7 @@ pragma Singleton import Quickshell -import Quickshell.Io +import Quickshell.Wayland Singleton { @@ -16,16 +16,14 @@ Singleton { function toggle() { if (properties.enabled) { - process.signal(888); properties.enabled = false; } else { properties.enabled = true; } } - Process { - id: process - running: properties.enabled - command: ["sh", "-c", "systemd-inhibit --what=idle --who=Caffeine --why='Caffeine module is active' --mode=block sleep inf"] + IdleInhibitor { + id: inhibitor + enabled: properties.enabled } } From 01c2ea90445d7c48c8e79fb871be55be216fff7e Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 10 Sep 2025 12:02:37 -0400 Subject: [PATCH 37/90] add new dependencies --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 8faca34..1214637 100644 --- a/README.md +++ b/README.md @@ -12,13 +12,11 @@ Run the shell quickshell -c shell ``` -Run app launcher - -```shell -quickshell -c launcher -``` - ## Dependencies - `quickshell` +- `qt6-wayland` - `app2unit` +- `meson` +- `ninja` +- `python3` From 0ab37420a299c4d1a9c5e2f50e518551e205a0fa Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 11 Sep 2025 17:00:43 -0400 Subject: [PATCH 38/90] change pane border on hover --- components/StyledPane.qml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/StyledPane.qml b/components/StyledPane.qml index 4560aa4..8edb4b1 100644 --- a/components/StyledPane.qml +++ b/components/StyledPane.qml @@ -3,12 +3,14 @@ import QtQuick import QtQuick.Controls Pane { + id: pane + padding: 24 background: Rectangle { color: "transparent" border.width: Styling.theme.border - border.color: Styling.theme.basecontent - opacity: 0.33 + border.color: pane.hovered ? Styling.theme.accent : Styling.theme.basecontent + opacity: 0.2 Behavior on border.color { ColorAnimation { duration: Styling.animations.speed.fast From 2b6b9aee28305ab4e56bb9c34a73818984997215 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 11 Sep 2025 17:01:08 -0400 Subject: [PATCH 39/90] change border on tab button when active --- components/StyledTabButton.qml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/StyledTabButton.qml b/components/StyledTabButton.qml index 9ac48bd..73dbe6c 100644 --- a/components/StyledTabButton.qml +++ b/components/StyledTabButton.qml @@ -36,7 +36,8 @@ TabButton { duration: Styling.animations.speed.normal } } - // radius: Styling.theme.radiusField + border.width: 2 + border.color: control.checked ? Styling.theme.accent : "transparent" } HoverHandler { From 8104e3c0996daefa88ed41ea3acc373b8855857f Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 11 Sep 2025 17:05:14 -0400 Subject: [PATCH 40/90] wrap all items in pane --- modules/storybook/Components.qml | 127 +++++++++++++++++-------------- modules/storybook/Selectors.qml | 7 +- 2 files changed, 74 insertions(+), 60 deletions(-) diff --git a/modules/storybook/Components.qml b/modules/storybook/Components.qml index d2b4d20..f0a21e9 100644 --- a/modules/storybook/Components.qml +++ b/modules/storybook/Components.qml @@ -1,5 +1,6 @@ import qs.components import qs.config +import qs.services import QtQuick import QtQuick.Controls import QtQuick.Layouts @@ -14,12 +15,14 @@ GridLayout { text: "ToolTip" font.pixelSize: 18 } - Button { - id: toolTipButton - text: "Hello world!" - StyledToolTip { - visible: toolTipButton.hovered - text: qsTr("Save the active project") + StyledPane { + Button { + id: toolTipButton + text: "Hello world!" + StyledToolTip { + visible: toolTipButton.hovered + text: qsTr("Save the active project") + } } } } @@ -29,13 +32,15 @@ GridLayout { text: "ProgressBar" font.pixelSize: 18 } - StyledProgressBar { - id: progressBar - indeterminate: true - implicitHeight: 10 - from: 0 - to: 100 - value: 50 + StyledPane { + StyledProgressBar { + id: progressBar + indeterminate: true + implicitHeight: 10 + from: 0 + to: 100 + value: 50 + } } } @@ -44,15 +49,17 @@ GridLayout { text: "ListView" font.pixelSize: 18 } - StyledWrapperRectangle { - border.color: Styling.theme.base100 - border.width: 2 - StyledListView { - implicitWidth: 200 - implicitHeight: 100 - model: 10 - delegate: StyledText { - text: "Hello world!" + StyledPane { + StyledWrapperRectangle { + border.color: Styling.theme.base100 + border.width: 2 + StyledListView { + implicitWidth: 200 + implicitHeight: 100 + model: 10 + delegate: StyledText { + text: "Hello world!" + } } } } @@ -63,7 +70,9 @@ GridLayout { text: "Mpris Player Selector" font.pixelSize: 18 } - MprisPlayerSelector {} + StyledPane { + MprisPlayerSelector {} + } } ColumnLayout { @@ -71,8 +80,10 @@ GridLayout { text: "Mpris Controller" font.pixelSize: 18 } - MprisController { - player: Mpris.active ?? null + StyledPane { + MprisController { + player: Mpris.active ?? null + } } } @@ -81,41 +92,43 @@ GridLayout { 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(); + StyledPane { + 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: "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: "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(); + } } } } diff --git a/modules/storybook/Selectors.qml b/modules/storybook/Selectors.qml index ed22c03..002de46 100644 --- a/modules/storybook/Selectors.qml +++ b/modules/storybook/Selectors.qml @@ -1,5 +1,4 @@ import qs.components -import qs.config import QtQuick import QtQuick.Layouts @@ -14,8 +13,10 @@ GridLayout { font.pixelSize: 18 } - StyledSwitch { - text: "Enable" + StyledPane { + StyledSwitch { + text: "Enable" + } } } } From 3306bb959c35526467956338fc7e2cb6f562e7dc Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 11 Sep 2025 17:08:21 -0400 Subject: [PATCH 41/90] reduce default padding --- components/StyledPane.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/StyledPane.qml b/components/StyledPane.qml index 8edb4b1..b9f0f47 100644 --- a/components/StyledPane.qml +++ b/components/StyledPane.qml @@ -5,12 +5,12 @@ import QtQuick.Controls Pane { id: pane - padding: 24 + padding: 8 background: Rectangle { color: "transparent" border.width: Styling.theme.border border.color: pane.hovered ? Styling.theme.accent : Styling.theme.basecontent - opacity: 0.2 + opacity: 0.33 Behavior on border.color { ColorAnimation { duration: Styling.animations.speed.fast From f974911b1c7c5741a4867ea11d9ffae2e6c77b3a Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 11 Sep 2025 23:26:58 -0400 Subject: [PATCH 42/90] color text on checked --- components/StyledTabButton.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/StyledTabButton.qml b/components/StyledTabButton.qml index 73dbe6c..dea1d40 100644 --- a/components/StyledTabButton.qml +++ b/components/StyledTabButton.qml @@ -13,7 +13,7 @@ TabButton { verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter padding: 6 - color: control.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent + color: control.hovered ? Styling.theme.primarycontent : control.checked ? Styling.theme.accent : Styling.theme.basecontent Behavior on color { ColorAnimation { duration: Styling.animations.speed.normal From 9adae58589d57f8dda40f8447d1b01678abf1633 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 11 Sep 2025 23:41:07 -0400 Subject: [PATCH 43/90] swipeview --- modules/storybook/Storybook.qml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 0c0851f..8cc9dcf 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -36,7 +36,7 @@ StyledPanelWindow { anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right - anchors.bottom: stack.top + anchors.bottom: view.top StyledTabButton { text: "Fields" @@ -49,8 +49,8 @@ StyledPanelWindow { } } - StackLayout { - id: stack + SwipeView { + id: view anchors.top: tabs.bottom anchors.left: parent.left From 93b3a09a0a3d89e000048d57c39e9287f761a75c Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 11 Sep 2025 23:41:14 -0400 Subject: [PATCH 44/90] remove id --- components/StyledTabButton.qml | 1 - 1 file changed, 1 deletion(-) diff --git a/components/StyledTabButton.qml b/components/StyledTabButton.qml index dea1d40..8cfbbfe 100644 --- a/components/StyledTabButton.qml +++ b/components/StyledTabButton.qml @@ -6,7 +6,6 @@ TabButton { id: control contentItem: Text { - id: icon font.pixelSize: Styling.typography.textSize.base font.family: Styling.typography.fontFamily text: control.text From 83e9c6f08c3174d9cad7dc49ee2addb1b69ca1ff Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 11 Sep 2025 23:56:56 -0400 Subject: [PATCH 45/90] override contentItem and alias orientation --- components/StyledTabBar.qml | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/components/StyledTabBar.qml b/components/StyledTabBar.qml index 70a92c1..3c0b933 100644 --- a/components/StyledTabBar.qml +++ b/components/StyledTabBar.qml @@ -1,8 +1,20 @@ +import qs.config import QtQuick import QtQuick.Controls.Basic TabBar { id: control - background: Item {} + property alias orientation: view.orientation + + contentItem: ListView { + id: view + model: control.contentModel + currentIndex: control.currentIndex + orientation: ListView.Horizontal + boundsBehavior: Flickable.StopAtBounds + } + background: Rectangle { + color: Styling.theme.base200 + } } From 8ba0567d2823c9dd4ab15d1b4a7ebeeb67381875 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 11 Sep 2025 23:57:12 -0400 Subject: [PATCH 46/90] vertical tabs on configuration --- modules/configuration/Configuration.qml | 83 ++++++++++++------------- modules/configuration/StylingView.qml | 25 ++++++++ modules/configuration/ThemeConfig.qml | 5 -- modules/storybook/Storybook.qml | 2 - 4 files changed, 65 insertions(+), 50 deletions(-) create mode 100644 modules/configuration/StylingView.qml delete mode 100644 modules/configuration/ThemeConfig.qml diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index d64fe74..5684f30 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -1,9 +1,7 @@ import qs.components -import qs.config import qs.services import QtQuick import QtQuick.Controls -import QtQuick.Layouts StyledPanelWindow { id: window @@ -14,53 +12,52 @@ StyledPanelWindow { implicitWidth: 800 implicitHeight: 400 - ColumnLayout { - spacing: 0 - anchors.fill: parent - StyledText { - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + StyledTabBar { + id: tabs + anchors.top: parent.top + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.right: view.left - text: "Configurations" - font.pixelSize: Styling.typography.textSize.xl - padding: 8 + implicitWidth: 200 + orientation: ListView.Vertical + + StyledTabButton { + anchors.left: parent.left + anchors.right: parent.right + + text: "General" } - - StyledRectangle { - id: titleBar - - Layout.fillWidth: true - Layout.preferredHeight: 4 + StyledTabButton { + anchors.left: parent.left + anchors.right: parent.right + text: "Styling" } + } + + SwipeView { + id: view + + anchors.top: parent.top + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.left: tabs.right + + clip: true + orientation: Qt.Vertical + + currentIndex: tabs.currentIndex ScrollView { - id: view - - Layout.fillHeight: true - padding: 24 - background: Item {} - - GridLayout { - - columnSpacing: Styling.layout.spacing.xl - - StyledText { - text: "Theme" - // font.bold: true - font.pixelSize: Styling.typography.textSize.lg - } - - StyledComboBox { - currentIndex: Theme.themes.indexOf(Theme.currentTheme) - model: Theme.themes - onActivated: index => { - Theme.currentTheme = Theme.themes[index]; - } - } + padding: 36 + StyledPane { + anchors.left: parent.left + anchors.right: parent.right } } - } - - component Menus: QtObject { - property Component theme + ScrollView { + padding: 36 + StylingView {} + } } } diff --git a/modules/configuration/StylingView.qml b/modules/configuration/StylingView.qml new file mode 100644 index 0000000..731ecaf --- /dev/null +++ b/modules/configuration/StylingView.qml @@ -0,0 +1,25 @@ +import qs.components +import qs.config +import QtQuick +import QtQuick.Layouts + +StyledPane { + GridLayout { + + columnSpacing: Styling.layout.spacing.xl + + StyledText { + text: "Theme" + // font.bold: true + font.pixelSize: Styling.typography.textSize.lg + } + + StyledComboBox { + currentIndex: Theme.themes.indexOf(Theme.currentTheme) + model: Theme.themes + onActivated: index => { + Theme.currentTheme = Theme.themes[index]; + } + } + } +} diff --git a/modules/configuration/ThemeConfig.qml b/modules/configuration/ThemeConfig.qml deleted file mode 100644 index b2e4f9e..0000000 --- a/modules/configuration/ThemeConfig.qml +++ /dev/null @@ -1,5 +0,0 @@ -import QtQuick -import QtQuick.Layouts -import Quickshell - -GridLayout {} diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 8cc9dcf..fdb17b6 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -60,7 +60,6 @@ StyledPanelWindow { currentIndex: tabs.currentIndex ScrollView { - Layout.fillWidth: true padding: 36 Fields {} } @@ -69,7 +68,6 @@ StyledPanelWindow { Selectors {} } ScrollView { - Layout.fillWidth: true padding: 36 Components {} } From 22cf6cc53e2bc55504cadd785f96d5d56eb42423 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 13 Sep 2025 22:53:37 -0400 Subject: [PATCH 47/90] basic audio configurations --- modules/configuration/AudioView.qml | 71 +++++++++++++++++++++++++ modules/configuration/Configuration.qml | 11 ++-- services/Pipewire.qml | 15 ++++++ 3 files changed, 90 insertions(+), 7 deletions(-) create mode 100644 modules/configuration/AudioView.qml diff --git a/modules/configuration/AudioView.qml b/modules/configuration/AudioView.qml new file mode 100644 index 0000000..9f0e6af --- /dev/null +++ b/modules/configuration/AudioView.qml @@ -0,0 +1,71 @@ +import qs.components +import qs.config +import qs.services +import QtQuick +import QtQuick.Layouts + +ColumnLayout { + anchors.fill: parent + + spacing: Styling.layout.spacing.xl + + StyledText { + text: "Speaker Settings" + } + StyledPane { + Layout.fillWidth: true + padding: 24 + GridLayout { + Layout.fillWidth: true + + columnSpacing: Styling.layout.spacing.xl + + StyledText { + Layout.column: 1 + Layout.row: 1 + text: "Speakers" + } + + StyledComboBox { + Layout.column: 2 + Layout.row: 1 + Layout.fillWidth: true + currentIndex: Pipewire.sinks.indexOf(Pipewire.sink) + model: Pipewire.sinks.map(sink => sink.nickname ?? sink.name) + onActivated: index => { + Pipewire.setSink(Pipewire.sinks[index]); + } + } + } + } + + StyledText { + text: "Microphone Settings" + } + StyledPane { + Layout.fillWidth: true + padding: 24 + GridLayout { + Layout.fillWidth: true + + columnSpacing: Styling.layout.spacing.xl + + StyledText { + Layout.column: 1 + Layout.row: 2 + text: "Microphones" + } + + StyledComboBox { + Layout.column: 2 + Layout.row: 2 + Layout.fillWidth: true + currentIndex: Pipewire.sources.indexOf(Pipewire.source) + model: Pipewire.sources.map(source => source.nickname ?? source.name) + onActivated: index => { + Pipewire.setSource(Pipewire.sinks[index]); + } + } + } + } +} diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index 5684f30..1e1871e 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -26,7 +26,7 @@ StyledPanelWindow { anchors.left: parent.left anchors.right: parent.right - text: "General" + text: "Audio" } StyledTabButton { anchors.left: parent.left @@ -49,14 +49,11 @@ StyledPanelWindow { currentIndex: tabs.currentIndex ScrollView { - padding: 36 - StyledPane { - anchors.left: parent.left - anchors.right: parent.right - } + padding: 24 + AudioView {} } ScrollView { - padding: 36 + padding: 24 StylingView {} } } diff --git a/services/Pipewire.qml b/services/Pipewire.qml index 53cc141..4cdd60b 100644 --- a/services/Pipewire.qml +++ b/services/Pipewire.qml @@ -10,6 +10,9 @@ Singleton { readonly property PwNode sink: Pipewire.defaultAudioSink readonly property PwNode source: Pipewire.defaultAudioSource + readonly property list sinks: Pipewire.nodes.values.filter(node => node.audio != null && node.isSink && !node.isStream) + readonly property list sources: Pipewire.nodes.values.filter(node => node.audio != null && !node.isSink && !node.isStream) + readonly property bool muted: sink?.audio?.muted ?? false readonly property real volume: sink?.audio?.volume ?? 0 @@ -42,6 +45,18 @@ Singleton { sink.audio.muted = !sink.audio.muted; } + function setSink(node: PwNode) { + if (node.audio != null && node.isSink && !node.isStream) { + Pipewire.preferredDefaultAudioSink = node; + } + } + + function setSource(node: PwNode) { + if (node.audio != null && !node.isSink && !node.isStream) { + Pipewire.preferredDefaultAudioSource = node; + } + } + PwObjectTracker { objects: [Pipewire.defaultAudioSink, Pipewire.defaultAudioSource] } From 1a8a14bf534402f63e101806b2bdd49009edd6cf Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 13 Sep 2025 23:29:01 -0400 Subject: [PATCH 48/90] add more icons --- config/Styling.qml | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/config/Styling.qml b/config/Styling.qml index 71127b8..84aa195 100644 --- a/config/Styling.qml +++ b/config/Styling.qml @@ -55,6 +55,8 @@ Singleton { } } component LucideIcons: QtObject { + readonly property string activity: "\u{E038}" + readonly property string audioLines: "\u{E55F}" readonly property string batteryCharging: "\u{E058}" readonly property string batteryFull: "\u{E059}" readonly property string batteryMedium: "\u{E05b}" @@ -71,14 +73,16 @@ Singleton { readonly property string cpu: "\u{E0ad}" readonly property string gpu: "\u{E66f}" readonly property string hardDrive: "\u{E0f1}" + readonly property string layoutDashboard: "\u{E1C1}" readonly property string memoryStick: "\u{E44a}" readonly property string pause: "\u{E132}" readonly property string play: "\u{E140}" readonly property string search: "\u{E155}" readonly property string skipBack: "\u{E163}" readonly property string skipForward: "\u{E164}" - readonly property string stop: "\u{E132}" readonly property string square: "\u{E16B}" + readonly property string stop: "\u{E132}" + readonly property string swatchBook: "\u{E5A4}" readonly property string wifiOff: "\u{E1af}" readonly property string wifiLow: "\u{E5fd}" readonly property string wifiHigh: "\u{E5fc}" From ad3a275c21698a499bbce85fe04f6facd9a5fa18 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 15 Sep 2025 16:16:35 -0400 Subject: [PATCH 49/90] color animatinos --- components/StyledComboBox.qml | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/components/StyledComboBox.qml b/components/StyledComboBox.qml index fff6670..4ab2213 100644 --- a/components/StyledComboBox.qml +++ b/components/StyledComboBox.qml @@ -26,11 +26,21 @@ ComboBox { contentItem: StyledText { text: delegate.model[control.textRole] color: delegate.highlighted ? palette.highlightedText : palette.buttonText + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.fast + } + } elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } background: Rectangle { color: delegate.highlighted ? palette.highlight : palette.button + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.fast + } + } radius: Styling.theme.radiusSelector } highlighted: control.highlightedIndex === index @@ -41,6 +51,11 @@ ComboBox { text: control.displayText color: control.hovered || control.down ? palette.highlightedText : palette.buttonText + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.fast + } + } verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } @@ -49,6 +64,11 @@ ComboBox { implicitWidth: 120 implicitHeight: 40 color: control.hovered || control.down ? palette.highlight : palette.button + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.fast + } + } border.color: Styling.theme.base100 border.width: control.visualFocus ? 2 : 1 radius: Styling.theme.radiusSelector @@ -72,6 +92,11 @@ ComboBox { background: Rectangle { color: palette.window + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.fast + } + } bottomLeftRadius: Styling.theme.radiusField bottomRightRadius: Styling.theme.radiusField } From 141c64a0bb58009a32aef94359a26e39953a25a5 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 15 Sep 2025 20:37:20 -0400 Subject: [PATCH 50/90] alias rectangle radius on tab button --- components/StyledTabButton.qml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/StyledTabButton.qml b/components/StyledTabButton.qml index 8cfbbfe..1c85273 100644 --- a/components/StyledTabButton.qml +++ b/components/StyledTabButton.qml @@ -5,6 +5,8 @@ import QtQuick.Controls.Basic TabButton { id: control + property alias radius: rectangle.radius + contentItem: Text { font.pixelSize: Styling.typography.textSize.base font.family: Styling.typography.fontFamily From ebb66dee21ff718b8974982e72dd03ca7d6594fc Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 15 Sep 2025 20:37:53 -0400 Subject: [PATCH 51/90] add audio volume slider --- modules/configuration/AudioView.qml | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/modules/configuration/AudioView.qml b/modules/configuration/AudioView.qml index 9f0e6af..aed90ba 100644 --- a/modules/configuration/AudioView.qml +++ b/modules/configuration/AudioView.qml @@ -23,7 +23,7 @@ ColumnLayout { StyledText { Layout.column: 1 Layout.row: 1 - text: "Speakers" + text: "Device" } StyledComboBox { @@ -36,6 +36,23 @@ ColumnLayout { Pipewire.setSink(Pipewire.sinks[index]); } } + + StyledText { + Layout.column: 1 + Layout.row: 2 + text: "Volume" + } + + StyledSlider { + Layout.column: 2 + Layout.row: 2 + from: 0.0 + to: 1.0 + value: Pipewire.volume + onMoved: { + Pipewire.setVolume(value); + } + } } } From 1c30ea270f0000046fb5d49bd40d16bf2bbc11a7 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 15 Sep 2025 20:43:24 -0400 Subject: [PATCH 52/90] alias panel window background --- components/StyledPanelWindow.qml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/StyledPanelWindow.qml b/components/StyledPanelWindow.qml index dab6ee0..0426201 100644 --- a/components/StyledPanelWindow.qml +++ b/components/StyledPanelWindow.qml @@ -7,11 +7,13 @@ PanelWindow { id: window required property string name + property alias background: background WlrLayershell.namespace: `lux-${name}` color: "transparent" Rectangle { + id: background anchors.fill: parent radius: Styling.theme.radiusBox Behavior on radius { From b0d9342e1d6e9311986996d32b2da5735e0177d4 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 15 Sep 2025 22:04:46 -0400 Subject: [PATCH 53/90] forward control spacing --- components/StyledTabBar.qml | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/components/StyledTabBar.qml b/components/StyledTabBar.qml index 3c0b933..c81c935 100644 --- a/components/StyledTabBar.qml +++ b/components/StyledTabBar.qml @@ -1,4 +1,3 @@ -import qs.config import QtQuick import QtQuick.Controls.Basic @@ -11,10 +10,10 @@ TabBar { id: view model: control.contentModel currentIndex: control.currentIndex + spacing: control.spacing orientation: ListView.Horizontal boundsBehavior: Flickable.StopAtBounds } - background: Rectangle { - color: Styling.theme.base200 - } + + background: Item {} } From f687e17c944b20bef1cbcb25b134568a2d5190fc Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 15 Sep 2025 22:05:02 -0400 Subject: [PATCH 54/90] limit volume --- services/Pipewire.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/Pipewire.qml b/services/Pipewire.qml index 4cdd60b..5e28710 100644 --- a/services/Pipewire.qml +++ b/services/Pipewire.qml @@ -19,7 +19,7 @@ Singleton { function setVolume(volume: real): void { if (sink?.ready && sink?.audio) { sink.audio.muted = false; - sink.audio.volume = volume; + sink.audio.volume = Math.min(volume, 1.0); } } From 185121d0d71bb1a490a799cb2d59d26dc4e34c22 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 16 Sep 2025 08:36:07 -0400 Subject: [PATCH 55/90] style tab bar --- components/StyledTabBar.qml | 21 +++++++++++++-------- components/StyledTabButton.qml | 21 +++++++++------------ 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/components/StyledTabBar.qml b/components/StyledTabBar.qml index c81c935..5459d8b 100644 --- a/components/StyledTabBar.qml +++ b/components/StyledTabBar.qml @@ -1,18 +1,23 @@ import QtQuick -import QtQuick.Controls.Basic +import QtQuick.Controls TabBar { id: control property alias orientation: view.orientation - contentItem: ListView { - id: view - model: control.contentModel - currentIndex: control.currentIndex - spacing: control.spacing - orientation: ListView.Horizontal - boundsBehavior: Flickable.StopAtBounds + contentItem: Item { + ListView { + id: view + anchors.centerIn: parent + implicitWidth: parent.width - 20 + implicitHeight: parent.height - 20 + model: control.contentModel + currentIndex: control.currentIndex + spacing: control.spacing + orientation: ListView.Horizontal + boundsBehavior: Flickable.StopAtBounds + } } background: Item {} diff --git a/components/StyledTabButton.qml b/components/StyledTabButton.qml index 1c85273..fc78729 100644 --- a/components/StyledTabButton.qml +++ b/components/StyledTabButton.qml @@ -1,6 +1,6 @@ import qs.config import QtQuick -import QtQuick.Controls.Basic +import QtQuick.Controls TabButton { id: control @@ -14,31 +14,28 @@ TabButton { verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter padding: 6 - color: control.hovered ? Styling.theme.primarycontent : control.checked ? Styling.theme.accent : Styling.theme.basecontent + color: control.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent Behavior on color { ColorAnimation { duration: Styling.animations.speed.normal } } - rotation: control.rotation - Behavior on rotation { - RotationAnimation { - duration: Styling.animations.speed.slow - easing.type: Easing.OutQuad - } - } } background: Rectangle { id: rectangle - color: control.hovered ? Styling.theme.primary : Styling.theme.base200 + color: control.hovered ? Styling.theme.primary : Styling.theme.base100 Behavior on color { ColorAnimation { duration: Styling.animations.speed.normal } } - border.width: 2 - border.color: control.checked ? Styling.theme.accent : "transparent" + opacity: control.checked || control.hovered ? 1.0 : 0.0 + Behavior on opacity { + NumberAnimation { + duration: Styling.animations.speed.normal + } + } } HoverHandler { From 9d6a88aa4376033788dee756730094e704928e53 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 16 Sep 2025 08:43:18 -0400 Subject: [PATCH 56/90] add wayland and hyprland focus --- modules/configuration/Configuration.qml | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index 1e1871e..8a6606a 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -2,6 +2,8 @@ import qs.components import qs.services import QtQuick import QtQuick.Controls +import Quickshell.Hyprland +import Quickshell.Wayland StyledPanelWindow { id: window @@ -12,6 +14,17 @@ StyledPanelWindow { implicitWidth: 800 implicitHeight: 400 + WlrLayershell.layer: WlrLayer.Top + WlrLayershell.keyboardFocus: window.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None + + HyprlandFocusGrab { + active: Visibility.configuration + windows: [window] + onCleared: { + Visibility.configuration = false; + } + } + StyledTabBar { id: tabs anchors.top: parent.top From c76f29345e5a0c01f139c710bc6603deeb93b805 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 16 Sep 2025 08:48:23 -0400 Subject: [PATCH 57/90] tabbbss are still kinda fucked --- components/StyledTabBar.qml | 1 + components/StyledTabButton.qml | 2 + modules/configuration/Configuration.qml | 92 ++++++++++++++++++++----- modules/storybook/Storybook.qml | 85 ++++++++++++----------- 4 files changed, 122 insertions(+), 58 deletions(-) diff --git a/components/StyledTabBar.qml b/components/StyledTabBar.qml index 5459d8b..1067f4a 100644 --- a/components/StyledTabBar.qml +++ b/components/StyledTabBar.qml @@ -5,6 +5,7 @@ TabBar { id: control property alias orientation: view.orientation + spacing: 12 contentItem: Item { ListView { diff --git a/components/StyledTabButton.qml b/components/StyledTabButton.qml index fc78729..8e40026 100644 --- a/components/StyledTabButton.qml +++ b/components/StyledTabButton.qml @@ -6,6 +6,8 @@ TabButton { id: control property alias radius: rectangle.radius + padding: 10 + radius: Styling.theme.radiusField contentItem: Text { font.pixelSize: Styling.typography.textSize.base diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index 8a6606a..e6e9400 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -1,7 +1,9 @@ import qs.components +import qs.config import qs.services import QtQuick import QtQuick.Controls +import QtQuick.Layouts import Quickshell.Hyprland import Quickshell.Wayland @@ -13,6 +15,7 @@ StyledPanelWindow { visible: Visibility.configuration implicitWidth: 800 implicitHeight: 400 + background.color: Styling.theme.base200 WlrLayershell.layer: WlrLayer.Top WlrLayershell.keyboardFocus: window.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None @@ -32,19 +35,39 @@ StyledPanelWindow { anchors.bottom: parent.bottom anchors.right: view.left - implicitWidth: 200 + implicitWidth: 150 orientation: ListView.Vertical - StyledTabButton { - anchors.left: parent.left - anchors.right: parent.right - - text: "Audio" - } - StyledTabButton { - anchors.left: parent.left - anchors.right: parent.right - text: "Styling" + Repeater { + model: views.data + delegate: StyledTabButton { + id: tabButton + required property ConfigurationView modelData + anchors.left: parent.left + anchors.right: parent.right + contentItem: RowLayout { + states: [ + State { + when: tabButton.hovered + PropertyChanges { + tabIcon.color: Styling.theme.primarycontent + tabText.color: Styling.theme.primarycontent + } + } + ] + LucideIcon { + id: tabIcon + text: tabButton.modelData.icon + font.pixelSize: Styling.typography.textSize.lg + } + StyledText { + id: tabText + text: tabButton.modelData.title + font.pixelSize: Styling.typography.textSize.lg + } + } + text: tabButton.modelData.title + } } } @@ -55,19 +78,54 @@ StyledPanelWindow { anchors.right: parent.right anchors.bottom: parent.bottom anchors.left: tabs.right + anchors.topMargin: 4 + anchors.rightMargin: 4 + anchors.bottomMargin: 4 clip: true orientation: Qt.Vertical currentIndex: tabs.currentIndex - ScrollView { - padding: 24 - AudioView {} + background: Rectangle { + color: Styling.theme.base100 + radius: Styling.theme.radiusBox } - ScrollView { - padding: 24 - StylingView {} + + Repeater { + model: views.data + delegate: ScrollView { + id: scrollView + required property ConfigurationView modelData + padding: 24 + Loader { + anchors.fill: parent + active: scrollView.modelData.view + sourceComponent: scrollView.modelData.view + } + } } } + + Item { + id: views + + ConfigurationView { + icon: Styling.lucide.icons.audioLines + title: "Audio" + view: AudioView {} + } + + ConfigurationView { + icon: Styling.lucide.icons.swatchBook + title: "Styling" + view: StylingView {} + } + } + + component ConfigurationView: QtObject { + property string icon + property string title + property Component view + } } diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index fdb17b6..b0e411f 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -1,10 +1,10 @@ pragma ComponentBehavior: Bound import qs.components +import qs.config import qs.services import QtQuick import QtQuick.Controls -import QtQuick.Layouts import Quickshell.Hyprland import Quickshell.Wayland @@ -16,6 +16,8 @@ StyledPanelWindow { implicitWidth: 500 implicitHeight: 600 + background.color: Styling.theme.base200 + WlrLayershell.layer: WlrLayer.Top WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None @@ -27,50 +29,51 @@ StyledPanelWindow { } } - Item { - id: layout - anchors.fill: parent + StyledTabBar { + id: tabs + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: view.top + implicitHeight: 40 - StyledTabBar { - id: tabs - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: view.top + StyledTabButton { + text: "Fields" + } + StyledTabButton { + text: "Selectors" + } + StyledTabButton { + text: "Components" + } + } - StyledTabButton { - text: "Fields" - } - StyledTabButton { - text: "Selectors" - } - StyledTabButton { - text: "Components" - } + SwipeView { + id: view + + anchors.top: tabs.bottom + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + + currentIndex: tabs.currentIndex + + background: Rectangle { + color: Styling.theme.base100 + radius: Styling.theme.radiusBox } - SwipeView { - id: view - - anchors.top: tabs.bottom - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom - - currentIndex: tabs.currentIndex - - ScrollView { - padding: 36 - Fields {} - } - ScrollView { - padding: 36 - Selectors {} - } - ScrollView { - padding: 36 - Components {} - } + ScrollView { + padding: 36 + Fields {} + } + ScrollView { + padding: 36 + Selectors {} + } + ScrollView { + padding: 36 + Components {} } } } From 06bbd34b73139d91581b448953194c2c0c899d2c Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 16 Sep 2025 08:59:56 -0400 Subject: [PATCH 58/90] fuck that was easy --- modules/bar/Bar.qml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml index bbbc6ec..7523fcc 100644 --- a/modules/bar/Bar.qml +++ b/modules/bar/Bar.qml @@ -26,6 +26,8 @@ StyledWrapperRectangle { RowLayout { + uniformCellSizes: true + RowLayout { id: leftbar From 4007344d9df3938b48191c84f1f23d1351a5ef44 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 16 Sep 2025 10:20:35 -0400 Subject: [PATCH 59/90] move mpris controller --- components/{ => composite}/MprisController.qml | 0 modules/drawers/dashboard/Dashboard.qml | 1 + modules/storybook/Components.qml | 3 ++- 3 files changed, 3 insertions(+), 1 deletion(-) rename components/{ => composite}/MprisController.qml (100%) diff --git a/components/MprisController.qml b/components/composite/MprisController.qml similarity index 100% rename from components/MprisController.qml rename to components/composite/MprisController.qml diff --git a/modules/drawers/dashboard/Dashboard.qml b/modules/drawers/dashboard/Dashboard.qml index 14bd318..5dea95e 100644 --- a/modules/drawers/dashboard/Dashboard.qml +++ b/modules/drawers/dashboard/Dashboard.qml @@ -1,6 +1,7 @@ pragma ComponentBehavior: Bound import qs.components +import qs.components.composite import qs.services import QtQuick import QtQuick.Layouts diff --git a/modules/storybook/Components.qml b/modules/storybook/Components.qml index f0a21e9..1d90cbd 100644 --- a/modules/storybook/Components.qml +++ b/modules/storybook/Components.qml @@ -1,6 +1,7 @@ import qs.components +import qs.components.composite +import qs.config import qs.config -import qs.services import QtQuick import QtQuick.Controls import QtQuick.Layouts From 37afb798bc6d54c5e4e597c5ac49d9f0f2ab833b Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 16 Sep 2025 10:20:54 -0400 Subject: [PATCH 60/90] move mpris player selector --- components/{ => composite}/MprisPlayerSelector.qml | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename components/{ => composite}/MprisPlayerSelector.qml (100%) diff --git a/components/MprisPlayerSelector.qml b/components/composite/MprisPlayerSelector.qml similarity index 100% rename from components/MprisPlayerSelector.qml rename to components/composite/MprisPlayerSelector.qml From fdf61a0e903fb99dc1adba5a6025f3756fe433ab Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 16 Sep 2025 10:32:19 -0400 Subject: [PATCH 61/90] remove font family from theme --- config/Theme.qml | 1 - 1 file changed, 1 deletion(-) diff --git a/config/Theme.qml b/config/Theme.qml index 596c9ac..bd09368 100644 --- a/config/Theme.qml +++ b/config/Theme.qml @@ -8,7 +8,6 @@ import Quickshell.Io Singleton { id: root - property string fontFamily: "JetBrainsMono Nerd Font" property var palette: theme.palette property alias themes: cache.themes From 7a04cccf0c262703ed713a800a3389cb83126c6d Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 16 Sep 2025 10:33:42 -0400 Subject: [PATCH 62/90] should use Styling --- modules/pomodoro/Pomodoro.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/pomodoro/Pomodoro.qml b/modules/pomodoro/Pomodoro.qml index 034e479..eaa2d95 100644 --- a/modules/pomodoro/Pomodoro.qml +++ b/modules/pomodoro/Pomodoro.qml @@ -55,7 +55,7 @@ StyledPanelWindow { id: circle radius: 150 borderColor: Styling.theme.base100 - strokeColor: PomodoroService.state == "timer" ? Theme.palette.primary : Theme.palette.warning + strokeColor: PomodoroService.state == "timer" ? Styling.theme.primary : Styling.theme.warning strokeWidth: 12 fillColor: button.hovered ? Styling.theme.primary : "transparent" percentage: (PomodoroService.state == "timer" ? (PomodoroService.initialTime - PomodoroService.remainingTime) : PomodoroService.remainingTime) / PomodoroService.initialTime % 1 From c03d24de153fa426ea0d005d2971ee01273e0dcf Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 16 Sep 2025 10:33:55 -0400 Subject: [PATCH 63/90] create ThemeComboBox --- components/composite/ThemeComboBox.qml | 20 ++++++++++++++++++++ modules/configuration/StylingView.qml | 10 ++-------- 2 files changed, 22 insertions(+), 8 deletions(-) create mode 100644 components/composite/ThemeComboBox.qml diff --git a/components/composite/ThemeComboBox.qml b/components/composite/ThemeComboBox.qml new file mode 100644 index 0000000..8ba673b --- /dev/null +++ b/components/composite/ThemeComboBox.qml @@ -0,0 +1,20 @@ +import qs.components +import qs.config +import QtQuick + +StyledComboBox { + id: control + + currentIndex: Theme.themes.indexOf(Theme.currentTheme) + model: Theme.themes + onActivated: index => { + Theme.currentTheme = Theme.themes[index]; + } + + Component.onCompleted: { + control.currentIndex = Theme.themes.indexOf(Theme.currentTheme); + Theme.onCurrentThemeChanged = () => { + Theme.themes.indexOf(Theme.currentTheme); + }; + } +} diff --git a/modules/configuration/StylingView.qml b/modules/configuration/StylingView.qml index 731ecaf..5454953 100644 --- a/modules/configuration/StylingView.qml +++ b/modules/configuration/StylingView.qml @@ -1,4 +1,5 @@ import qs.components +import qs.components.composite import qs.config import QtQuick import QtQuick.Layouts @@ -10,16 +11,9 @@ StyledPane { StyledText { text: "Theme" - // font.bold: true font.pixelSize: Styling.typography.textSize.lg } - StyledComboBox { - currentIndex: Theme.themes.indexOf(Theme.currentTheme) - model: Theme.themes - onActivated: index => { - Theme.currentTheme = Theme.themes[index]; - } - } + ThemeComboBox {} } } From bd826c14ac03aecd0c028d89aaa26c9a77cd87bc Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 16 Sep 2025 10:45:54 -0400 Subject: [PATCH 64/90] refactor out theme object --- config/Theme.qml | 34 ++++------------------------------ config/theme/Theme.qml | 30 ++++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 30 deletions(-) create mode 100644 config/theme/Theme.qml diff --git a/config/Theme.qml b/config/Theme.qml index bd09368..31ee7c2 100644 --- a/config/Theme.qml +++ b/config/Theme.qml @@ -1,6 +1,7 @@ pragma Singleton pragma ComponentBehavior: Bound +import "theme" import QtQuick import Quickshell import Quickshell.Io @@ -8,10 +9,11 @@ import Quickshell.Io Singleton { id: root - property var palette: theme.palette + property var palette: theme property alias themes: cache.themes property alias currentTheme: cache.current + property int currentThemeIndex: themes.indexOf(currentTheme) Process { running: true @@ -61,36 +63,8 @@ Singleton { // when changes are made to properties in the adapter, save them onAdapterUpdated: writeAdapter() - JsonAdapter { + Theme { id: theme - - property JsonObject palette: JsonObject { - property color primary: "#605dff" - property color primarycontent: "#edf1fe" - property color secondary: "#f43098" - property color secondarycontent: "#f9e4f0" - property color accent: "#00d3bb" - property color accentcontent: "#084d49" - property color neutral: "#09090b" - property color neutralcontent: "#e4e4e7" - property color base100: "#1d232a" - property color base200: "#191e24" - property color base300: "#15191e" - property color basecontent: "#ecf9ff" - property color info: "#00bafe" - property color infocontent: "#042e49" - property color success: "#00d390" - property color successcontent: "#004c39" - property color warning: "#fcb700" - property color warningcontent: "#793205" - property color error: "#ff627d" - property color errorcontent: "#4d0218" - - property int radiusSelector: 8 - property int radiusField: 8 - property int radiusBox: 8 - property int border: 2 - } } } } diff --git a/config/theme/Theme.qml b/config/theme/Theme.qml new file mode 100644 index 0000000..0f08a88 --- /dev/null +++ b/config/theme/Theme.qml @@ -0,0 +1,30 @@ +import QtQuick +import Quickshell.Io + +JsonAdapter { + property color primary: "#605dff" + property color primarycontent: "#edf1fe" + property color secondary: "#f43098" + property color secondarycontent: "#f9e4f0" + property color accent: "#00d3bb" + property color accentcontent: "#084d49" + property color neutral: "#09090b" + property color neutralcontent: "#e4e4e7" + property color base100: "#1d232a" + property color base200: "#191e24" + property color base300: "#15191e" + property color basecontent: "#ecf9ff" + property color info: "#00bafe" + property color infocontent: "#042e49" + property color success: "#00d390" + property color successcontent: "#004c39" + property color warning: "#fcb700" + property color warningcontent: "#793205" + property color error: "#ff627d" + property color errorcontent: "#4d0218" + + property int radiusSelector: 8 + property int radiusField: 8 + property int radiusBox: 8 + property int border: 2 +} From ed6cd2c8d59cac08e43814384c6d0183d71f03d2 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 16 Sep 2025 15:33:41 -0400 Subject: [PATCH 65/90] root panel window handles focus --- components/StyledPanelWindow.qml | 23 ++++++++++++++++++++++- modules/configuration/Configuration.qml | 13 ++----------- modules/launcher/Launcher.qml | 14 +------------- modules/pomodoro/Pomodoro.qml | 15 +++------------ modules/powermenu/PowerMenu.qml | 17 ++++------------- modules/storybook/Storybook.qml | 13 ++----------- 6 files changed, 34 insertions(+), 61 deletions(-) diff --git a/components/StyledPanelWindow.qml b/components/StyledPanelWindow.qml index 0426201..45562dd 100644 --- a/components/StyledPanelWindow.qml +++ b/components/StyledPanelWindow.qml @@ -1,15 +1,36 @@ import qs.config import QtQuick import Quickshell +import Quickshell.Hyprland import Quickshell.Wayland PanelWindow { id: window - required property string name property alias background: background + required property string name + property bool canFocus: true + property bool focused: false WlrLayershell.namespace: `lux-${name}` + WlrLayershell.layer: WlrLayer.Top + WlrLayershell.keyboardFocus: window.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None + + onVisibleChanged: { + if (!canFocus) + return; + focused = visible; + } + HyprlandFocusGrab { + active: window.focused + windows: [window] + onCleared: { + if (!window.canFocus) + return; + window.focused = false; + } + } + color: "transparent" Rectangle { diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index e6e9400..7a13d2c 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -4,8 +4,6 @@ import qs.services import QtQuick import QtQuick.Controls import QtQuick.Layouts -import Quickshell.Hyprland -import Quickshell.Wayland StyledPanelWindow { id: window @@ -17,15 +15,8 @@ StyledPanelWindow { implicitHeight: 400 background.color: Styling.theme.base200 - WlrLayershell.layer: WlrLayer.Top - WlrLayershell.keyboardFocus: window.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None - - HyprlandFocusGrab { - active: Visibility.configuration - windows: [window] - onCleared: { - Visibility.configuration = false; - } + onFocusedChanged: { + Visibility.configuration = focused; } StyledTabBar { diff --git a/modules/launcher/Launcher.qml b/modules/launcher/Launcher.qml index 2ee10b0..4c51b54 100644 --- a/modules/launcher/Launcher.qml +++ b/modules/launcher/Launcher.qml @@ -6,8 +6,6 @@ import qs.components import qs.services import QtQuick import QtQuick.Layouts -import Quickshell.Hyprland -import Quickshell.Wayland import Quickshell.Widgets StyledPanelWindow { @@ -20,21 +18,11 @@ StyledPanelWindow { list.currentIndex = 0; search.clear(); } + Visibility.launcher = focused; } implicitWidth: rect.width implicitHeight: rect.height - WlrLayershell.layer: WlrLayer.Top - WlrLayershell.keyboardFocus: window.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None - - HyprlandFocusGrab { - active: Visibility.launcher - windows: [window] - onCleared: { - Visibility.launcher = false; - } - } - WrapperItem { id: rect diff --git a/modules/pomodoro/Pomodoro.qml b/modules/pomodoro/Pomodoro.qml index eaa2d95..627520d 100644 --- a/modules/pomodoro/Pomodoro.qml +++ b/modules/pomodoro/Pomodoro.qml @@ -6,8 +6,6 @@ import qs.services import qs.widgets import QtQuick import QtQuick.Layouts -import Quickshell.Hyprland -import Quickshell.Wayland import Quickshell.Widgets StyledPanelWindow { @@ -18,8 +16,9 @@ StyledPanelWindow { implicitWidth: rect.width implicitHeight: rect.height - WlrLayershell.layer: WlrLayer.Top - WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None + onFocusedChanged: { + Visibility.pomodoro = focused; + } WrapperItem { id: rect @@ -29,14 +28,6 @@ StyledPanelWindow { topMargin: 24 bottomMargin: 24 - HyprlandFocusGrab { - active: Visibility.pomodoro - windows: [root] - onCleared: { - Visibility.pomodoro = false; - } - } - ColumnLayout { spacing: 22 diff --git a/modules/powermenu/PowerMenu.qml b/modules/powermenu/PowerMenu.qml index 6627c0f..712d94d 100644 --- a/modules/powermenu/PowerMenu.qml +++ b/modules/powermenu/PowerMenu.qml @@ -3,11 +3,9 @@ pragma ComponentBehavior: Bound import qs.components import qs.config import qs.services -import Quickshell.Hyprland import QtQuick import QtQuick.Layouts import Quickshell.Io -import Quickshell.Wayland import Quickshell.Widgets StyledPanelWindow { @@ -18,26 +16,19 @@ StyledPanelWindow { implicitWidth: rect.width implicitHeight: rect.height - WlrLayershell.layer: WlrLayer.Top - WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None - Process { id: process } + onFocusedChanged: { + Visibility.powermenu = focused; + } + WrapperItem { id: rect margin: 14 - HyprlandFocusGrab { - active: Visibility.powermenu - windows: [root] - onCleared: { - Visibility.powermenu = false; - } - } - StyledListView { id: list diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index b0e411f..406cc32 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -5,8 +5,6 @@ import qs.config import qs.services import QtQuick import QtQuick.Controls -import Quickshell.Hyprland -import Quickshell.Wayland StyledPanelWindow { id: root @@ -18,15 +16,8 @@ StyledPanelWindow { background.color: Styling.theme.base200 - WlrLayershell.layer: WlrLayer.Top - WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None - - HyprlandFocusGrab { - active: Visibility.storybook - windows: [root] - onCleared: { - Visibility.storybook = false; - } + onFocusedChanged: { + Visibility.storybook = focused; } StyledTabBar { From c22a8f796d81397a927a122ad5dd4afb138e650f Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 17 Sep 2025 10:21:42 -0400 Subject: [PATCH 66/90] move process, window cant take it atm --- modules/powermenu/PowerMenu.qml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/powermenu/PowerMenu.qml b/modules/powermenu/PowerMenu.qml index 712d94d..ad87ea3 100644 --- a/modules/powermenu/PowerMenu.qml +++ b/modules/powermenu/PowerMenu.qml @@ -16,10 +16,6 @@ StyledPanelWindow { implicitWidth: rect.width implicitHeight: rect.height - Process { - id: process - } - onFocusedChanged: { Visibility.powermenu = focused; } @@ -29,6 +25,10 @@ StyledPanelWindow { margin: 14 + Process { + id: process + } + StyledListView { id: list From 338e81d3ad1adf0461102f8641dbcc5823f2f16b Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 17 Sep 2025 10:21:59 -0400 Subject: [PATCH 67/90] set default property on windowpanel for styling --- components/StyledPanelWindow.qml | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/components/StyledPanelWindow.qml b/components/StyledPanelWindow.qml index 45562dd..7a730c6 100644 --- a/components/StyledPanelWindow.qml +++ b/components/StyledPanelWindow.qml @@ -7,10 +7,12 @@ import Quickshell.Wayland PanelWindow { id: window + default property alias content: contentItem.children property alias background: background required property string name property bool canFocus: true property bool focused: false + property int padding: 4 WlrLayershell.namespace: `lux-${name}` WlrLayershell.layer: WlrLayer.Top @@ -54,11 +56,19 @@ PanelWindow { } } border.width: 2 - border.color: Styling.theme.base200 + border.color: Styling.theme.base300 Behavior on border.color { ColorAnimation { duration: Styling.animations.speed.fast } } } + + Item { + id: contentItem + + anchors.centerIn: parent + implicitWidth: parent.width - 2 * window.padding + implicitHeight: parent.height - 2 * window.padding + } } From 5e82fd906d9ebda306b08a9ff2111b0f2c3a45bb Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 17 Sep 2025 11:57:21 -0400 Subject: [PATCH 68/90] formatting tabs --- components/StyledTabBar.qml | 20 ++-- components/StyledTabButton.qml | 3 +- modules/configuration/Configuration.qml | 121 ++++++++++++------------ 3 files changed, 69 insertions(+), 75 deletions(-) diff --git a/components/StyledTabBar.qml b/components/StyledTabBar.qml index 1067f4a..ed7f1f6 100644 --- a/components/StyledTabBar.qml +++ b/components/StyledTabBar.qml @@ -5,20 +5,14 @@ TabBar { id: control property alias orientation: view.orientation - spacing: 12 - contentItem: Item { - ListView { - id: view - anchors.centerIn: parent - implicitWidth: parent.width - 20 - implicitHeight: parent.height - 20 - model: control.contentModel - currentIndex: control.currentIndex - spacing: control.spacing - orientation: ListView.Horizontal - boundsBehavior: Flickable.StopAtBounds - } + contentItem: ListView { + id: view + model: control.contentModel + currentIndex: control.currentIndex + spacing: control.spacing + orientation: ListView.Horizontal + boundsBehavior: Flickable.StopAtBounds } background: Item {} diff --git a/components/StyledTabButton.qml b/components/StyledTabButton.qml index 8e40026..4336abb 100644 --- a/components/StyledTabButton.qml +++ b/components/StyledTabButton.qml @@ -6,7 +6,7 @@ TabButton { id: control property alias radius: rectangle.radius - padding: 10 + padding: 8 radius: Styling.theme.radiusField contentItem: Text { @@ -15,7 +15,6 @@ TabButton { text: control.text verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter - padding: 6 color: control.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent Behavior on color { ColorAnimation { diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index 7a13d2c..8905f98 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -4,6 +4,7 @@ import qs.services import QtQuick import QtQuick.Controls import QtQuick.Layouts +import Quickshell.Widgets StyledPanelWindow { id: window @@ -13,86 +14,86 @@ StyledPanelWindow { visible: Visibility.configuration implicitWidth: 800 implicitHeight: 400 + padding: 8 background.color: Styling.theme.base200 onFocusedChanged: { Visibility.configuration = focused; } - StyledTabBar { - id: tabs - anchors.top: parent.top - anchors.left: parent.left - anchors.bottom: parent.bottom - anchors.right: view.left + GridLayout { - implicitWidth: 150 - orientation: ListView.Vertical + anchors.fill: parent - Repeater { - model: views.data - delegate: StyledTabButton { - id: tabButton - required property ConfigurationView modelData - anchors.left: parent.left - anchors.right: parent.right - contentItem: RowLayout { - states: [ - State { - when: tabButton.hovered - PropertyChanges { - tabIcon.color: Styling.theme.primarycontent - tabText.color: Styling.theme.primarycontent + StyledTabBar { + id: tabs + + Layout.preferredWidth: 150 + Layout.fillHeight: true + Layout.margins: 2 + orientation: ListView.Vertical + spacing: 12 + + Repeater { + model: views.data + delegate: StyledTabButton { + id: tabButton + required property ConfigurationView modelData + anchors.left: parent.left + anchors.right: parent.right + contentItem: RowLayout { + states: [ + State { + when: tabButton.hovered + PropertyChanges { + tabIcon.color: Styling.theme.primarycontent + tabText.color: Styling.theme.primarycontent + } } + ] + LucideIcon { + id: tabIcon + text: tabButton.modelData.icon + font.pixelSize: Styling.typography.textSize.lg + } + StyledText { + id: tabText + text: tabButton.modelData.title + font.pixelSize: Styling.typography.textSize.lg } - ] - LucideIcon { - id: tabIcon - text: tabButton.modelData.icon - font.pixelSize: Styling.typography.textSize.lg - } - StyledText { - id: tabText - text: tabButton.modelData.title - font.pixelSize: Styling.typography.textSize.lg } + text: tabButton.modelData.title } - text: tabButton.modelData.title } } - } - SwipeView { - id: view + SwipeView { + id: view - anchors.top: parent.top - anchors.right: parent.right - anchors.bottom: parent.bottom - anchors.left: tabs.right - anchors.topMargin: 4 - anchors.rightMargin: 4 - anchors.bottomMargin: 4 + Layout.fillWidth: true + Layout.fillHeight: true - clip: true - orientation: Qt.Vertical + clip: true + orientation: Qt.Vertical - currentIndex: tabs.currentIndex + currentIndex: tabs.currentIndex - background: Rectangle { - color: Styling.theme.base100 - radius: Styling.theme.radiusBox - } + background: Rectangle { + color: Styling.theme.base100 + radius: Styling.theme.radiusBox + } - Repeater { - model: views.data - delegate: ScrollView { - id: scrollView - required property ConfigurationView modelData - padding: 24 - Loader { - anchors.fill: parent - active: scrollView.modelData.view - sourceComponent: scrollView.modelData.view + Repeater { + model: views.data + delegate: ScrollView { + id: scrollView + required property ConfigurationView modelData + padding: 24 + Loader { + anchors.fill: parent + active: scrollView.modelData.view + sourceComponent: scrollView.modelData.view + } } } } From 0a445eaa08ba0e2129c2cd325af96011144922a9 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 17 Sep 2025 12:00:25 -0400 Subject: [PATCH 69/90] remove padding and increase window size --- modules/configuration/Configuration.qml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index 8905f98..5122033 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -12,9 +12,8 @@ StyledPanelWindow { name: "configuration" visible: Visibility.configuration - implicitWidth: 800 - implicitHeight: 400 - padding: 8 + implicitWidth: 1000 + implicitHeight: 600 background.color: Styling.theme.base200 onFocusedChanged: { From 3a67bc52041359fed025ee7334d15a63c91a4660 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 17 Sep 2025 17:39:03 -0400 Subject: [PATCH 70/90] alias data --- components/StyledPanelWindow.qml | 2 +- modules/powermenu/PowerMenu.qml | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/StyledPanelWindow.qml b/components/StyledPanelWindow.qml index 7a730c6..ebadb64 100644 --- a/components/StyledPanelWindow.qml +++ b/components/StyledPanelWindow.qml @@ -7,7 +7,7 @@ import Quickshell.Wayland PanelWindow { id: window - default property alias content: contentItem.children + default property alias content: contentItem.data property alias background: background required property string name property bool canFocus: true diff --git a/modules/powermenu/PowerMenu.qml b/modules/powermenu/PowerMenu.qml index ad87ea3..e784007 100644 --- a/modules/powermenu/PowerMenu.qml +++ b/modules/powermenu/PowerMenu.qml @@ -20,15 +20,15 @@ StyledPanelWindow { Visibility.powermenu = focused; } + Process { + id: process + } + WrapperItem { id: rect margin: 14 - Process { - id: process - } - StyledListView { id: list From 450ff7a50316156b224348195b49e562bc980bcf Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 18 Sep 2025 08:37:56 -0400 Subject: [PATCH 71/90] wallpapers WIP --- modules/configuration/Configuration.qml | 6 ++++++ modules/configuration/Wallpaper.qml | 13 +++++++++++++ services/WallpaperService.qml | 24 ++++++++++++++++++++++++ 3 files changed, 43 insertions(+) create mode 100644 modules/configuration/Wallpaper.qml create mode 100644 services/WallpaperService.qml diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index 5122033..749b195 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -112,6 +112,12 @@ StyledPanelWindow { title: "Styling" view: StylingView {} } + + ConfigurationView { + icon: Styling.lucide.icons.swatchBook + title: "Wallpapers" + view: Wallpaper {} + } } component ConfigurationView: QtObject { diff --git a/modules/configuration/Wallpaper.qml b/modules/configuration/Wallpaper.qml new file mode 100644 index 0000000..d75a04a --- /dev/null +++ b/modules/configuration/Wallpaper.qml @@ -0,0 +1,13 @@ +import qs.services +import QtQuick +import QtQuick.Layouts + +ColumnLayout { + Repeater { + model: WallpaperService.files + delegate: Text { + required property string dataModel + text: dataModel + } + } +} diff --git a/services/WallpaperService.qml b/services/WallpaperService.qml new file mode 100644 index 0000000..2c0026f --- /dev/null +++ b/services/WallpaperService.qml @@ -0,0 +1,24 @@ +pragma Singleton + +import Quickshell +import Quickshell.Io + +Singleton { + id: root + + property string directory: "~/Wallpapers/" + property list files: [] + property list fileTypes: ["jpg", "jpeg", "png"] + + Process { + running: true + command: ["bash", "-c", `find "$dir" -maxdepth 1 -type f & inotifywait -m -r ${root.directory} -e modify,move,create,delete | while read dir action; do find "$dir" -maxdepth 1 -type f; done`] + stderr: StdioCollector { + onStreamFinished: console.log(`line read: ${this.text}`) + } + stdout: SplitParser { + splitMarker: "\n" + onRead: data => root.files = data?.split("\n") ?? [] + } + } +} From 8fe50936a0b4776d2b7af7873a487dbdb9a47240 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 18 Sep 2025 21:04:08 -0400 Subject: [PATCH 72/90] kind of fix tabs for now its fucked I dont want to deal with it right now --- components/StyledTabBar.qml | 2 +- components/StyledTabButton.qml | 3 ++- modules/configuration/Configuration.qml | 8 +++++++- modules/storybook/Storybook.qml | 3 +++ 4 files changed, 13 insertions(+), 3 deletions(-) diff --git a/components/StyledTabBar.qml b/components/StyledTabBar.qml index ed7f1f6..512ce5a 100644 --- a/components/StyledTabBar.qml +++ b/components/StyledTabBar.qml @@ -1,7 +1,7 @@ import QtQuick import QtQuick.Controls -TabBar { +Container { id: control property alias orientation: view.orientation diff --git a/components/StyledTabButton.qml b/components/StyledTabButton.qml index 4336abb..15d9859 100644 --- a/components/StyledTabButton.qml +++ b/components/StyledTabButton.qml @@ -2,10 +2,11 @@ import qs.config import QtQuick import QtQuick.Controls -TabButton { +Button { id: control property alias radius: rectangle.radius + padding: 8 radius: Styling.theme.radiusField diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index 749b195..a453993 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -1,3 +1,5 @@ +pragma ComponentBehavior: Bound + import qs.components import qs.config import qs.services @@ -20,7 +22,7 @@ StyledPanelWindow { Visibility.configuration = focused; } - GridLayout { + RowLayout { anchors.fill: parent @@ -40,6 +42,8 @@ StyledPanelWindow { required property ConfigurationView modelData anchors.left: parent.left anchors.right: parent.right + required property int index + contentItem: RowLayout { states: [ State { @@ -62,6 +66,8 @@ StyledPanelWindow { } } text: tabButton.modelData.title + + onClicked: tabs.setCurrentIndex(index) } } } diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 406cc32..8a1a9b9 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -30,12 +30,15 @@ StyledPanelWindow { StyledTabButton { text: "Fields" + onClicked: tabs.setCurrentIndex(0) } StyledTabButton { text: "Selectors" + onClicked: tabs.setCurrentIndex(1) } StyledTabButton { text: "Components" + onClicked: tabs.setCurrentIndex(2) } } From d5a92eb19b48fec7110e8d7dfba85bb982b4612c Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 18 Sep 2025 21:16:15 -0400 Subject: [PATCH 73/90] remove, doesnt do anything --- components/composite/ThemeComboBox.qml | 7 ------- 1 file changed, 7 deletions(-) diff --git a/components/composite/ThemeComboBox.qml b/components/composite/ThemeComboBox.qml index 8ba673b..251648b 100644 --- a/components/composite/ThemeComboBox.qml +++ b/components/composite/ThemeComboBox.qml @@ -10,11 +10,4 @@ StyledComboBox { onActivated: index => { Theme.currentTheme = Theme.themes[index]; } - - Component.onCompleted: { - control.currentIndex = Theme.themes.indexOf(Theme.currentTheme); - Theme.onCurrentThemeChanged = () => { - Theme.themes.indexOf(Theme.currentTheme); - }; - } } From e2816bcb1e747b71752d0185282881da85fbf5fa Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 20 Sep 2025 21:21:30 -0400 Subject: [PATCH 74/90] directory watcher --- utils/DirectoryWatcher.qml | 43 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 utils/DirectoryWatcher.qml diff --git a/utils/DirectoryWatcher.qml b/utils/DirectoryWatcher.qml new file mode 100644 index 0000000..776e4cf --- /dev/null +++ b/utils/DirectoryWatcher.qml @@ -0,0 +1,43 @@ +import QtQuick +import Quickshell.Io + +Item { + id: root + + required property string path + property bool recursive: true + property list fileFilter: [] + signal created(path: string) + signal modified(path: string) + signal deleted(path: string) + signal movedFrom(path: string) + signal movedTo(path: string) + + Process { + running: true + command: ["bash", "-c", `inotifywait -m ${root.recursive ? "-r" : ""} ${root.path} -e modify,move,create,delete --format "%e-%w%f"`] + stderr: StdioCollector { + onStreamFinished: console.error(`DirectoryWatcher: ${this.text}`) + } + stdout: SplitParser { + splitMarker: "\n" + onRead: data => { + const [action, path] = data.split("-"); + if (path.endsWith("~") || root.fileFilter.length > 0 && !root.fileFilter.some(filter => path.endsWith(filter))) { + return; + } + if (action.includes("CREATE")) { + root.created(path); + } else if (action.includes("MODIFY")) { + root.modified(path); + } else if (action.includes("DELETE")) { + root.deleted(path); + } else if (action.includes("MOVED_FROM")) { + root.movedFrom(path); + } else if (action.includes("MOVED_TO")) { + root.movedTo(path); + } + } + } + } +} From 2d251c044dd7c3a2bf456695b326b1211586ab72 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 20 Sep 2025 23:07:01 -0400 Subject: [PATCH 75/90] remove wallpaper view --- modules/configuration/Configuration.qml | 6 ------ modules/configuration/Wallpaper.qml | 13 ------------- 2 files changed, 19 deletions(-) delete mode 100644 modules/configuration/Wallpaper.qml diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index a453993..4c70926 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -118,12 +118,6 @@ StyledPanelWindow { title: "Styling" view: StylingView {} } - - ConfigurationView { - icon: Styling.lucide.icons.swatchBook - title: "Wallpapers" - view: Wallpaper {} - } } component ConfigurationView: QtObject { diff --git a/modules/configuration/Wallpaper.qml b/modules/configuration/Wallpaper.qml deleted file mode 100644 index d75a04a..0000000 --- a/modules/configuration/Wallpaper.qml +++ /dev/null @@ -1,13 +0,0 @@ -import qs.services -import QtQuick -import QtQuick.Layouts - -ColumnLayout { - Repeater { - model: WallpaperService.files - delegate: Text { - required property string dataModel - text: dataModel - } - } -} From 9c074dc9e587bcf29d555a062e7d2da2e4d93e6f Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 20 Sep 2025 23:07:37 -0400 Subject: [PATCH 76/90] double import...fixed --- modules/storybook/Components.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/storybook/Components.qml b/modules/storybook/Components.qml index 1d90cbd..0ff3836 100644 --- a/modules/storybook/Components.qml +++ b/modules/storybook/Components.qml @@ -1,7 +1,7 @@ import qs.components import qs.components.composite import qs.config -import qs.config +import qs.services import QtQuick import QtQuick.Controls import QtQuick.Layouts From 3d1816c0f1eaeff9a8ca32ee9745d00eab3d5629 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 20 Sep 2025 23:08:57 -0400 Subject: [PATCH 77/90] wallpaper service --- services/WallpaperService.qml | 42 +++++++++++++++++++++++++++++------ 1 file changed, 35 insertions(+), 7 deletions(-) diff --git a/services/WallpaperService.qml b/services/WallpaperService.qml index 2c0026f..ea6bd0e 100644 --- a/services/WallpaperService.qml +++ b/services/WallpaperService.qml @@ -1,5 +1,7 @@ pragma Singleton +import qs.config +import qs.utils import Quickshell import Quickshell.Io @@ -7,18 +9,44 @@ Singleton { id: root property string directory: "~/Wallpapers/" - property list files: [] + property alias files: properties.files + property alias currentWallpaper: properties.currentWallpaper property list fileTypes: ["jpg", "jpeg", "png"] + property string command: `find ${root.directory} -maxdepth 1 -type f` Process { running: true - command: ["bash", "-c", `find "$dir" -maxdepth 1 -type f & inotifywait -m -r ${root.directory} -e modify,move,create,delete | while read dir action; do find "$dir" -maxdepth 1 -type f; done`] - stderr: StdioCollector { - onStreamFinished: console.log(`line read: ${this.text}`) + command: ["bash", "-c", `find ${root.directory} -maxdepth 1 -type f`] + stdout: StdioCollector { + onStreamFinished: { + root.files = this.text.split("\n"); + } } - stdout: SplitParser { - splitMarker: "\n" - onRead: data => root.files = data?.split("\n") ?? [] + } + + DirectoryWatcher { + path: root.directory + fileFilter: ["jpg", "jpeg", "png"] + onCreated: path => root.files.push(path) + onDeleted: path => root.files.filter(file => file != path) + onMovedFrom: path => root.files.filter(file => file != path) + onMovedTo: path => path => root.files.push(path) + } + + FileView { + path: `${Paths.cache}/wallpaper.json` + + watchChanges: true + onFileChanged: reload() + + // when changes are made to properties in the adapter, save them + onAdapterUpdated: writeAdapter() + + JsonAdapter { + id: properties + + property url currentWallpaper: "" + property list files: [] } } } From 2bfa0c189a148d916d116deab97b6845a9359fbf Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 22 Sep 2025 21:29:36 -0400 Subject: [PATCH 78/90] wallpaper selection --- components/composite/WallpaperItem.qml | 14 ++++++ components/composite/WallpaperList.qml | 65 ++++++++++++++++++++++++++ modules/Shell.qml | 18 +++++++ modules/configuration/StylingView.qml | 35 +++++++++++--- modules/wallpaper/Wallpaper.qml | 32 +++++++++++++ 5 files changed, 157 insertions(+), 7 deletions(-) create mode 100644 components/composite/WallpaperItem.qml create mode 100644 components/composite/WallpaperList.qml create mode 100644 modules/wallpaper/Wallpaper.qml diff --git a/components/composite/WallpaperItem.qml b/components/composite/WallpaperItem.qml new file mode 100644 index 0000000..779fb62 --- /dev/null +++ b/components/composite/WallpaperItem.qml @@ -0,0 +1,14 @@ +import QtQuick + +Image { + asynchronous: true + fillMode: Image.PreserveAspectCrop + sourceSize.width: parent.width + sourceSize.height: parent.height + + Behavior on scale { + NumberAnimation { + duration: 200 + } + } +} diff --git a/components/composite/WallpaperList.qml b/components/composite/WallpaperList.qml new file mode 100644 index 0000000..2a67f31 --- /dev/null +++ b/components/composite/WallpaperList.qml @@ -0,0 +1,65 @@ +pragma ComponentBehavior: Bound + +import qs.config +import qs.services +import QtQuick +import Qt.labs.folderlistmodel 2.9 +import Quickshell.Widgets + +ListView { + id: list + + orientation: ListView.Horizontal + + clip: true + spacing: 8 + snapMode: ListView.SnapToItem + + implicitWidth: 160 * 3 + implicitHeight: 90 + model: FolderListModel { + nameFilters: ["*.jpg"] + folder: `${Paths.home}/Wallpapers` + showDirs: false + } + delegate: Item { + id: delegate + + required property url fileUrl + required property int index + property bool hovered: ListView.isCurrentItem + + implicitWidth: 160 + implicitHeight: 90 + + Rectangle { + color: Styling.theme.base200 + anchors.fill: parent + radius: 12 + scale: delegate.hovered ? 1.0 : 0.9 + Behavior on scale { + NumberAnimation { + duration: Styling.animations.veryFast + } + } + + Image { + id: image + + asynchronous: true + anchors.fill: parent + fillMode: Image.PreserveAspectCrop + source: delegate.fileUrl + } + + MouseArea { + anchors.fill: image + + cursorShape: Qt.PointingHandCursor + hoverEnabled: true + onEntered: list.currentIndex = delegate.index + onClicked: WallpaperService.currentWallpaper = delegate.fileUrl + } + } + } +} diff --git a/modules/Shell.qml b/modules/Shell.qml index b25fbe3..be31896 100644 --- a/modules/Shell.qml +++ b/modules/Shell.qml @@ -5,6 +5,7 @@ import "launcher" import "pomodoro" import "powermenu" import "storybook" +import "wallpaper" import QtQuick import Quickshell import Quickshell.Wayland @@ -17,6 +18,23 @@ Variants { required property ShellScreen modelData + PanelWindow { + id: background + + // visible: false + anchors.top: true + anchors.left: true + anchors.right: true + anchors.bottom: true + + color: "transparent" + + WlrLayershell.exclusionMode: ExclusionMode.Ignore + WlrLayershell.layer: WlrLayer.Background + + Wallpaper {} + } + PanelWindow { id: exclusionZone diff --git a/modules/configuration/StylingView.qml b/modules/configuration/StylingView.qml index 5454953..02461a3 100644 --- a/modules/configuration/StylingView.qml +++ b/modules/configuration/StylingView.qml @@ -1,19 +1,40 @@ +pragma ComponentBehavior: Bound + import qs.components import qs.components.composite import qs.config +import qs.services import QtQuick import QtQuick.Layouts +import Qt.labs.folderlistmodel 2.9 +import Quickshell.Widgets -StyledPane { - GridLayout { +ColumnLayout { + StyledPane { + GridLayout { - columnSpacing: Styling.layout.spacing.xl + columnSpacing: Styling.layout.spacing.xl - StyledText { - text: "Theme" - font.pixelSize: Styling.typography.textSize.lg + StyledText { + text: "Theme" + font.pixelSize: Styling.typography.textSize.lg + } + + ThemeComboBox {} } + } + // StyledPane { + // WallpaperList {} + // } - ThemeComboBox {} + StyledPane { + padding: 2 + ClippingWrapperRectangle { + + radius: Styling.theme.radiusBox + color: "transparent" + + WallpaperList {} + } } } diff --git a/modules/wallpaper/Wallpaper.qml b/modules/wallpaper/Wallpaper.qml new file mode 100644 index 0000000..d396074 --- /dev/null +++ b/modules/wallpaper/Wallpaper.qml @@ -0,0 +1,32 @@ +import qs.services +import QtQuick +import QtQuick.Controls + +StackView { + id: stack + property url wallpaper: WallpaperService.currentWallpaper + + anchors.fill: parent + + replaceEnter: Transition { + OpacityAnimator { + from: 0.0 + to: 1.0 + duration: 1000 + } + } + replaceExit: Transition { + PauseAnimation { + duration: 1100 + } + } + + Component { + id: img + Image {} + } + + onWallpaperChanged: stack.replace(img, { + "source": stack.wallpaper + }) +} From d58144a853bb8640bdb7bb48c2abcad684602a8e Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 23 Sep 2025 13:19:38 -0400 Subject: [PATCH 79/90] styledimage --- components/StyledImage.qml | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 components/StyledImage.qml diff --git a/components/StyledImage.qml b/components/StyledImage.qml new file mode 100644 index 0000000..d7d7081 --- /dev/null +++ b/components/StyledImage.qml @@ -0,0 +1,17 @@ +import qs.config +import QtQuick +import Quickshell.Widgets + +Image { + + property alias radius: rectangle.radius + property alias skeletonColor: rectangle.color + + ClippingRectangle { + id: rectangle + + color: Styling.theme.base200 + + anchors.fill: parent + } +} From 7935487295a6d6b2924b3265f5f7349ad3cc0bab Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 23 Sep 2025 14:13:24 -0400 Subject: [PATCH 80/90] reee --- config/Paths.qml | 2 -- 1 file changed, 2 deletions(-) diff --git a/config/Paths.qml b/config/Paths.qml index 34116da..2fb9e08 100644 --- a/config/Paths.qml +++ b/config/Paths.qml @@ -14,8 +14,6 @@ Singleton { readonly property url cache: `${StandardPaths.standardLocations(StandardPaths.GenericCacheLocation)[0]}/lux` readonly property url config: `${StandardPaths.standardLocations(StandardPaths.GenericConfigLocation)[0]}/lux` - readonly property url imagecache: `${cache}/imagecache` - function stringify(path: url): string { let str = path.toString(); if (str.startsWith("root:/")) From 7ba62221053b7ea9ee56d5ca80abcb3ae795b736 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 23 Sep 2025 15:06:23 -0400 Subject: [PATCH 81/90] powermenu config in shell json --- config/Config.qml | 26 +++++++++++++++++++++++++- config/PowerMenu.qml | 18 ------------------ 2 files changed, 25 insertions(+), 19 deletions(-) delete mode 100644 config/PowerMenu.qml diff --git a/config/Config.qml b/config/Config.qml index 2cd8ea0..036f14c 100644 --- a/config/Config.qml +++ b/config/Config.qml @@ -1,9 +1,33 @@ pragma Singleton import Quickshell +import Quickshell.Io Singleton { id: root - readonly property PowerMenu powermenu: PowerMenu {} + readonly property alias powermenu: adapter.powermenu + + FileView { + path: `${Paths.config}/shell.json` + watchChanges: true + onFileChanged: reload() + + // onAdapterUpdated: writeAdapter() + + JsonAdapter { + id: adapter + + property var powermenu: PowerMenu {} + } + } + + component PowerMenu: JsonObject { + property list actions + } + + component PowerMenuItem: JsonObject { + property string text + property string command + } } diff --git a/config/PowerMenu.qml b/config/PowerMenu.qml deleted file mode 100644 index 0046bd9..0000000 --- a/config/PowerMenu.qml +++ /dev/null @@ -1,18 +0,0 @@ -import Quickshell - -PersistentProperties { - property list actions: [ - { - text: "󰍃 Logout", - command: "hyprctl dispatch exit" - }, - { - text: "󰜉 Reboot", - command: "systemctl reboot" - }, - { - text: " Shutdown", - command: "systemctl poweroff" - } - ] -} From 6b9ecc5b3d75673537a3871172999387e8b7b6c5 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 23 Sep 2025 23:01:21 -0400 Subject: [PATCH 82/90] add wallpaper config --- components/composite/WallpaperList.qml | 2 +- config/Config.qml | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/components/composite/WallpaperList.qml b/components/composite/WallpaperList.qml index 2a67f31..3dfb330 100644 --- a/components/composite/WallpaperList.qml +++ b/components/composite/WallpaperList.qml @@ -19,7 +19,7 @@ ListView { implicitHeight: 90 model: FolderListModel { nameFilters: ["*.jpg"] - folder: `${Paths.home}/Wallpapers` + folder: `file://${Paths.expandTilde(Config.wallpaper.directory)}` showDirs: false } delegate: Item { diff --git a/config/Config.qml b/config/Config.qml index 036f14c..416d739 100644 --- a/config/Config.qml +++ b/config/Config.qml @@ -7,6 +7,7 @@ Singleton { id: root readonly property alias powermenu: adapter.powermenu + readonly property alias wallpaper: adapter.wallpaper FileView { path: `${Paths.config}/shell.json` @@ -19,6 +20,7 @@ Singleton { id: adapter property var powermenu: PowerMenu {} + property var wallpaper: Wallpaper {} } } @@ -30,4 +32,8 @@ Singleton { property string text property string command } + + component Wallpaper: JsonObject { + property string directory + } } From 2aa72accda39d3f525166f32dbe1777d2ead5857 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 23 Sep 2025 23:01:33 -0400 Subject: [PATCH 83/90] strip unused WallpaperService stuff --- services/WallpaperService.qml | 25 ------------------------- 1 file changed, 25 deletions(-) diff --git a/services/WallpaperService.qml b/services/WallpaperService.qml index ea6bd0e..94adbbd 100644 --- a/services/WallpaperService.qml +++ b/services/WallpaperService.qml @@ -1,37 +1,13 @@ pragma Singleton import qs.config -import qs.utils import Quickshell import Quickshell.Io Singleton { id: root - property string directory: "~/Wallpapers/" - property alias files: properties.files property alias currentWallpaper: properties.currentWallpaper - property list fileTypes: ["jpg", "jpeg", "png"] - property string command: `find ${root.directory} -maxdepth 1 -type f` - - Process { - running: true - command: ["bash", "-c", `find ${root.directory} -maxdepth 1 -type f`] - stdout: StdioCollector { - onStreamFinished: { - root.files = this.text.split("\n"); - } - } - } - - DirectoryWatcher { - path: root.directory - fileFilter: ["jpg", "jpeg", "png"] - onCreated: path => root.files.push(path) - onDeleted: path => root.files.filter(file => file != path) - onMovedFrom: path => root.files.filter(file => file != path) - onMovedTo: path => path => root.files.push(path) - } FileView { path: `${Paths.cache}/wallpaper.json` @@ -46,7 +22,6 @@ Singleton { id: properties property url currentWallpaper: "" - property list files: [] } } } From 617931a1151b1b2e56a6a186f8fa850afe60c9e8 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 24 Sep 2025 09:43:28 -0400 Subject: [PATCH 84/90] initial load --- modules/wallpaper/Wallpaper.qml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/modules/wallpaper/Wallpaper.qml b/modules/wallpaper/Wallpaper.qml index d396074..f03cbdb 100644 --- a/modules/wallpaper/Wallpaper.qml +++ b/modules/wallpaper/Wallpaper.qml @@ -26,6 +26,9 @@ StackView { Image {} } + Component.onCompleted: stack.replace(img, { + "source": stack.wallpaper + }) onWallpaperChanged: stack.replace(img, { "source": stack.wallpaper }) From 823dd667197fadad0915a1266f35a6191b6a5015 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 24 Sep 2025 22:57:33 -0400 Subject: [PATCH 85/90] much better --- components/StyledComboBox.qml | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/components/StyledComboBox.qml b/components/StyledComboBox.qml index 4ab2213..5f9784e 100644 --- a/components/StyledComboBox.qml +++ b/components/StyledComboBox.qml @@ -3,6 +3,7 @@ pragma ComponentBehavior: Bound import qs.config import QtQuick import QtQuick.Controls +import Quickshell.Widgets ComboBox { id: control @@ -41,7 +42,6 @@ ComboBox { duration: Styling.animations.speed.fast } } - radius: Styling.theme.radiusSelector } highlighted: control.highlightedIndex === index } @@ -81,13 +81,17 @@ ComboBox { height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin) padding: 1 - contentItem: ListView { - clip: true - implicitHeight: contentHeight + 2 - model: control.popup.visible ? control.delegateModel : null - currentIndex: control.highlightedIndex + contentItem: ClippingWrapperRectangle { + radius: Styling.theme.radiusField - ScrollIndicator.vertical: ScrollIndicator {} + ListView { + clip: true + implicitHeight: contentHeight + 2 + model: control.popup.visible ? control.delegateModel : null + currentIndex: control.highlightedIndex + + ScrollIndicator.vertical: ScrollIndicator {} + } } background: Rectangle { @@ -97,8 +101,7 @@ ComboBox { duration: Styling.animations.speed.fast } } - bottomLeftRadius: Styling.theme.radiusField - bottomRightRadius: Styling.theme.radiusField + radius: Styling.theme.radiusField } } } From fe8261f7afb02489158eecda272eb43d7ca90780 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 25 Sep 2025 13:54:02 -0400 Subject: [PATCH 86/90] move theme types to Styling --- config/Styling.qml | 41 ++++++++++++++++++++++++++++++++++++++++- config/Theme.qml | 42 +++++++++++------------------------------- config/theme/Theme.qml | 30 ------------------------------ 3 files changed, 51 insertions(+), 62 deletions(-) delete mode 100644 config/theme/Theme.qml diff --git a/config/Styling.qml b/config/Styling.qml index 84aa195..e509c18 100644 --- a/config/Styling.qml +++ b/config/Styling.qml @@ -2,6 +2,7 @@ pragma Singleton import QtQuick import Quickshell +import Quickshell.Io Singleton { id: root @@ -9,7 +10,7 @@ Singleton { readonly property Animations animations: Animations {} readonly property Typography typography: Typography {} readonly property Layout layout: Layout {} - readonly property var theme: Theme.palette + readonly property alias theme: theme readonly property Lucide lucide: Lucide {} component Animations: QtObject { @@ -90,4 +91,42 @@ Singleton { readonly property string triangle: "\u{E192}" readonly property string triangleDashed: "\u{E642}" } + + FileView { + path: `${Paths.config}/themes/${Theme.currentTheme}.json` + watchChanges: true + onFileChanged: reload() + + // when changes are made to properties in the adapter, save them + onAdapterUpdated: writeAdapter() + + JsonAdapter { + id: theme + property color primary: "#605dff" + property color primarycontent: "#edf1fe" + property color secondary: "#f43098" + property color secondarycontent: "#f9e4f0" + property color accent: "#00d3bb" + property color accentcontent: "#084d49" + property color neutral: "#09090b" + property color neutralcontent: "#e4e4e7" + property color base100: "#1d232a" + property color base200: "#191e24" + property color base300: "#15191e" + property color basecontent: "#ecf9ff" + property color info: "#00bafe" + property color infocontent: "#042e49" + property color success: "#00d390" + property color successcontent: "#004c39" + property color warning: "#fcb700" + property color warningcontent: "#793205" + property color error: "#ff627d" + property color errorcontent: "#4d0218" + + property int radiusSelector: 8 + property int radiusField: 8 + property int radiusBox: 8 + property int border: 2 + } + } } diff --git a/config/Theme.qml b/config/Theme.qml index 31ee7c2..4aac927 100644 --- a/config/Theme.qml +++ b/config/Theme.qml @@ -1,35 +1,28 @@ pragma Singleton -pragma ComponentBehavior: Bound -import "theme" import QtQuick +import Qt.labs.folderlistmodel 2.9 import Quickshell import Quickshell.Io Singleton { id: root - property var palette: theme - property alias themes: cache.themes property alias currentTheme: cache.current property int currentThemeIndex: themes.indexOf(currentTheme) - Process { - running: true - command: ["bash", "-c", `inotifywait -m -r ~/.config/lux/themes/ -e modify,move,create,delete | while read dir action; do ls -m "$dir"; done`] - stderr: StdioCollector { - onStreamFinished: console.log(`line read: ${this.text}`) - } - stdout: SplitParser { - splitMarker: "\n" - onRead: data => { - const themes = data.split(", ").filter(item => item.endsWith(".json")).map(item => item.replace(".json", "")); - if (themes.length == 0) { - return; - } - root.themes = themes; + FolderListModel { + id: model + nameFilters: ["*.json"] + folder: `${Paths.config}/themes/` + showDirs: false + onCountChanged: { + const arr = []; + for (let i = 0; i < count; i++) { + arr.push(get(i, "fileName").replace(".json", "")); } + root.themes = arr; } } @@ -54,17 +47,4 @@ Singleton { } } } - - FileView { - path: `${Paths.config}/themes/${root.currentTheme}.json` - watchChanges: true - onFileChanged: reload() - - // when changes are made to properties in the adapter, save them - onAdapterUpdated: writeAdapter() - - Theme { - id: theme - } - } } diff --git a/config/theme/Theme.qml b/config/theme/Theme.qml deleted file mode 100644 index 0f08a88..0000000 --- a/config/theme/Theme.qml +++ /dev/null @@ -1,30 +0,0 @@ -import QtQuick -import Quickshell.Io - -JsonAdapter { - property color primary: "#605dff" - property color primarycontent: "#edf1fe" - property color secondary: "#f43098" - property color secondarycontent: "#f9e4f0" - property color accent: "#00d3bb" - property color accentcontent: "#084d49" - property color neutral: "#09090b" - property color neutralcontent: "#e4e4e7" - property color base100: "#1d232a" - property color base200: "#191e24" - property color base300: "#15191e" - property color basecontent: "#ecf9ff" - property color info: "#00bafe" - property color infocontent: "#042e49" - property color success: "#00d390" - property color successcontent: "#004c39" - property color warning: "#fcb700" - property color warningcontent: "#793205" - property color error: "#ff627d" - property color errorcontent: "#4d0218" - - property int radiusSelector: 8 - property int radiusField: 8 - property int radiusBox: 8 - property int border: 2 -} From 3c3fe368bc477ba1eb47cedc14f46bb74a85b3c4 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 27 Oct 2025 19:32:07 -0400 Subject: [PATCH 87/90] simplify tray item --- modules/bar/components/tray/Tray.qml | 2 +- modules/bar/components/tray/TrayItem.qml | 5 +- modules/bar/components/tray/TrayMenu.qml | 49 +++++++++++++++++++ modules/bar/components/tray/menu/Menu.qml | 39 --------------- modules/bar/components/tray/menu/MenuItem.qml | 12 ----- 5 files changed, 52 insertions(+), 55 deletions(-) create mode 100644 modules/bar/components/tray/TrayMenu.qml delete mode 100644 modules/bar/components/tray/menu/Menu.qml delete mode 100644 modules/bar/components/tray/menu/MenuItem.qml diff --git a/modules/bar/components/tray/Tray.qml b/modules/bar/components/tray/Tray.qml index 0ffd814..89eacf9 100644 --- a/modules/bar/components/tray/Tray.qml +++ b/modules/bar/components/tray/Tray.qml @@ -10,7 +10,7 @@ RowLayout { spacing: 4 Repeater { - model: SystemTray.items + model: SystemTray.items.values Loader { id: loader diff --git a/modules/bar/components/tray/TrayItem.qml b/modules/bar/components/tray/TrayItem.qml index 1e05ff7..4a27057 100644 --- a/modules/bar/components/tray/TrayItem.qml +++ b/modules/bar/components/tray/TrayItem.qml @@ -5,12 +5,11 @@ import QtQuick import Quickshell import Quickshell.Services.SystemTray import Quickshell.Widgets -import "menu/" StyledIconButton { id: root - property SystemTrayItem trayItem + required property SystemTrayItem trayItem onClicked: menu.toggle() @@ -28,7 +27,7 @@ StyledIconButton { } } - Menu { + TrayMenu { id: menu anchor.item: root diff --git a/modules/bar/components/tray/TrayMenu.qml b/modules/bar/components/tray/TrayMenu.qml new file mode 100644 index 0000000..88137e2 --- /dev/null +++ b/modules/bar/components/tray/TrayMenu.qml @@ -0,0 +1,49 @@ +pragma ComponentBehavior: Bound + +import qs.components +import qs.config +import QtQuick +import QtQuick.Layouts +import Quickshell +import Quickshell.Widgets + +StyledPopupWindow { + id: window + + required property QsMenuOpener menuOpener + + content: ColumnLayout { + spacing: 4 + Repeater { + model: window.menuOpener.children.values + delegate: Loader { + id: loader + required property QsMenuEntry modelData + + active: true + + Component.onCompleted: { + console.log(modelData.text); + } + + Layout.fillWidth: true + Layout.minimumWidth: 160 + + sourceComponent: modelData.isSeparator ? menuSeperator : menuItem + property Component menuSeperator: WrapperItem { + margin: 4 + Rectangle { + implicitHeight: 2 + + color: Styling.theme.base200 + } + } + property Component menuItem: StyledButton { + text: loader.modelData.text + + onClicked: loader.modelData.triggered() + } + } + } + } +} diff --git a/modules/bar/components/tray/menu/Menu.qml b/modules/bar/components/tray/menu/Menu.qml deleted file mode 100644 index db54cfc..0000000 --- a/modules/bar/components/tray/menu/Menu.qml +++ /dev/null @@ -1,39 +0,0 @@ -pragma ComponentBehavior: Bound - -import qs.components -import qs.config -import QtQuick -import QtQuick.Layouts -import Quickshell - -StyledPopupWindow { - id: window - - property QsMenuOpener menuOpener - - content: ColumnLayout { - spacing: 8 - Repeater { - model: window.menuOpener.children - delegate: Loader { - id: loader - required property QsMenuEntry modelData - - active: true - - Layout.fillWidth: true - Layout.minimumWidth: 160 - - sourceComponent: modelData.isSeparator ? menuSeperator : menuItem - property Component menuSeperator: Rectangle { - implicitHeight: 2 - - color: Styling.theme.base100 - } - property Component menuItem: MenuItem { - menuEntry: loader.modelData - } - } - } - } -} diff --git a/modules/bar/components/tray/menu/MenuItem.qml b/modules/bar/components/tray/menu/MenuItem.qml deleted file mode 100644 index 056b3ba..0000000 --- a/modules/bar/components/tray/menu/MenuItem.qml +++ /dev/null @@ -1,12 +0,0 @@ -import qs.components -import Quickshell - -StyledButton { - id: root - - property QsMenuEntry menuEntry - - text: root.menuEntry.text - - onClicked: menuEntry.triggered() -} From 618fc22e803418d922b303817c8af5d1988ecbb7 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 10 Nov 2025 11:54:25 -0500 Subject: [PATCH 88/90] allow drawers to close on parent window focus lost --- components/StyledDrawer.qml | 40 +++++++++++++++++++++++-- modules/drawers/dashboard/Dashboard.qml | 4 +++ 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/components/StyledDrawer.qml b/components/StyledDrawer.qml index f0816fd..a87f8fd 100644 --- a/components/StyledDrawer.qml +++ b/components/StyledDrawer.qml @@ -1,11 +1,29 @@ import qs.config import QtQuick import QtQuick.Controls +import Quickshell +import Quickshell.Hyprland +import Quickshell.Widgets Drawer { id: control dim: false - background: Rectangle { + property bool focused: false + + onVisibleChanged: { + focused = visible; + } + + HyprlandFocusGrab { + active: control.focused + windows: [QsWindow.window] + onCleared: { + control.focused = false; + } + } + + background: ClippingWrapperRectangle { + margin: 4 Component.onCompleted: { if (control.edge == Qt.TopEdge) { radius = 8; @@ -20,6 +38,24 @@ Drawer { topRightRadius = 8; } } - color: Styling.theme.base100 + color: Styling.theme.base300 + + Rectangle { + Component.onCompleted: { + if (control.edge == Qt.TopEdge) { + radius = 8; + } else if (control.edge == Qt.LeftEdge) { + topRightRadius = 8; + bottomRightRadius = 8; + } else if (control.edge == Qt.RightEdge) { + topLeftRadius = 8; + bottomLeftRadius = 8; + } else if (control.edge == Qt.BottomEdge) { + topLeftRadius = 8; + topRightRadius = 8; + } + } + color: Styling.theme.base100 + } } } diff --git a/modules/drawers/dashboard/Dashboard.qml b/modules/drawers/dashboard/Dashboard.qml index 5dea95e..5af5285 100644 --- a/modules/drawers/dashboard/Dashboard.qml +++ b/modules/drawers/dashboard/Dashboard.qml @@ -12,6 +12,10 @@ StyledDrawer { visible: Visibility.dashboard + onFocusedChanged: { + Visibility.dashboard = focused; + } + WrapperItem { margin: 32 ColumnLayout { From 0ccb3f19f61503a3f8b7fa4f9bc7d4dd3e06597f Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 12 Nov 2025 09:11:17 -0500 Subject: [PATCH 89/90] rename to Look And Feel --- modules/configuration/Configuration.qml | 5 ++--- modules/configuration/{StylingView.qml => LookAndFeel.qml} | 0 2 files changed, 2 insertions(+), 3 deletions(-) rename modules/configuration/{StylingView.qml => LookAndFeel.qml} (100%) diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index 4c70926..7582efe 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -6,7 +6,6 @@ import qs.services import QtQuick import QtQuick.Controls import QtQuick.Layouts -import Quickshell.Widgets StyledPanelWindow { id: window @@ -115,8 +114,8 @@ StyledPanelWindow { ConfigurationView { icon: Styling.lucide.icons.swatchBook - title: "Styling" - view: StylingView {} + title: "Look And Feel" + view: LookAndFeel {} } } diff --git a/modules/configuration/StylingView.qml b/modules/configuration/LookAndFeel.qml similarity index 100% rename from modules/configuration/StylingView.qml rename to modules/configuration/LookAndFeel.qml From 24930ef2e09a59c8574726f19936182e3b1f1d8b Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Mon, 24 Nov 2025 14:02:02 -0500 Subject: [PATCH 90/90] alacritty --- modules/launcher/services/Apps.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/launcher/services/Apps.qml b/modules/launcher/services/Apps.qml index e459c31..269ee8a 100644 --- a/modules/launcher/services/Apps.qml +++ b/modules/launcher/services/Apps.qml @@ -10,7 +10,7 @@ FuzzySearch { function launch(entry: DesktopEntry): void { if (entry.runInTerminal) Quickshell.execDetached({ - command: ["app2unit", "--", "kitty", "exec", ...entry.command], + command: ["app2unit", "--", "alacritty", "exec", ...entry.command], workingDirectory: entry.workingDirectory }); else