From 6df0784136398139fcbc357506e6e10b6d2f4ba7 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 19 Jul 2025 00:10:21 -0400 Subject: [PATCH] use Dimensions config --- config/Dimensions.qml | 44 ++++++++++++++ modules/bar/Bar.qml | 86 +++++++++++++++++---------- modules/bar/components/Clock.qml | 23 +++---- modules/bar/components/Workspace.qml | 49 ++++++++++----- modules/bar/components/Workspaces.qml | 3 +- styled/StyledLabel.qml | 4 +- styled/StyledText.qml | 1 + 7 files changed, 147 insertions(+), 63 deletions(-) create mode 100644 config/Dimensions.qml diff --git a/config/Dimensions.qml b/config/Dimensions.qml new file mode 100644 index 0000000..2dbac22 --- /dev/null +++ b/config/Dimensions.qml @@ -0,0 +1,44 @@ +pragma Singleton + +import QtQuick +import Quickshell + +Singleton { + id: root + + property int radius: 8 + + property Bar bar: Bar {} + property Clock clock: Clock {} + property Workspace workspace: Workspace {} + + component Bar: QtObject { + id: bar + + property int spacing: 6 + property int border: 2 + property int height: 50 + property int verticalMargins: 4 + property int horizontalMargins: 6 + property int verticalPadding: 2 + property int horizontalPadding: 6 + } + + component Clock: QtObject { + id: clock + + property int fontSize: 14 + property int width: 230 + property int height: 30 + } + + component Workspace: QtObject { + id: workspace + + property int spacing: 5 + property int width: 30 + property int height: 30 + property int verticalPadding: 6 + property int horizontalPadding: 7 + } +} diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml index e3de268..2461420 100644 --- a/modules/bar/Bar.qml +++ b/modules/bar/Bar.qml @@ -13,47 +13,73 @@ Scope { right: true } - implicitHeight: 40 - + implicitHeight: Dimensions.bar.height color: 'transparent' - Rectangle { - id: background + Item { + anchors.fill: parent - color: Theme.palette.base300 - } + anchors.leftMargin: Dimensions.bar.horizontalMargins + anchors.rightMargin: Dimensions.bar.horizontalMargins + anchors.topMargin: Dimensions.bar.verticalMargins + anchors.bottomMargin: Dimensions.bar.verticalMargins - Row { - id: leftbar + Rectangle { + id: background + anchors.fill: parent + color: Theme.palette.base300 + radius: Dimensions.radius - spacing: 6 - anchors.top: parent.top - anchors.left: parent.left - anchors.bottom: parent.bottom - anchors.margins: 2 - - Workspaces { - anchors.verticalCenter: parent.verticalCenter + border { + color: Theme.palette.base100 + width: Dimensions.bar.border + pixelAligned: true + } } - } - Row { - id: centerbar + Row { + id: leftbar - spacing: 6 - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter - Clock {} - } + anchors.leftMargin: Dimensions.bar.horizontalPadding + anchors.topMargin: Dimensions.bar.verticalPadding + anchors.bottomMargin: Dimensions.bar.verticalPadding - Row { - id: rightbar + spacing: Dimensions.bar.spacing - anchors.top: parent.top - anchors.right: parent.left - anchors.bottom: parent.bottom + Workspaces { + anchors.verticalCenter: parent.verticalCenter + } + } + + Row { + id: centerbar + + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + + anchors.topMargin: Dimensions.bar.verticalPadding + anchors.bottomMargin: Dimensions.bar.verticalPadding + + spacing: Dimensions.bar.spacing + + Clock {} + } + + Row { + id: rightbar + + anchors.right: parent.left + anchors.verticalCenter: parent.verticalCenter + + anchors.rightMargin: Dimensions.bar.horizontalPadding + anchors.topMargin: Dimensions.bar.verticalPadding + anchors.bottomMargin: Dimensions.bar.verticalPadding + + spacing: Dimensions.bar.spacing + } } } } diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml index fbb65fa..3e67674 100644 --- a/modules/bar/components/Clock.qml +++ b/modules/bar/components/Clock.qml @@ -1,48 +1,39 @@ -import Quickshell import Quickshell.Io import QtQuick import "root:styled" +import "../../../config/" Item { id: clock - implicitWidth: 200 - implicitHeight: 30 + implicitWidth: Dimensions.clock.width + implicitHeight: Dimensions.clock.height StyledLabel { - anchors.fill: parent + anchors.fill: text } StyledText { id: text anchors.centerIn: parent + font.pixelSize: Dimensions.clock.fontSize + Process { - // give the process object an id so we can talk - // about it from the timer id: dateProc command: ["date"] running: true stdout: StdioCollector { - onStreamFinished: text.text = this.text + onStreamFinished: text.text = ` ${this.text}` } } - // use a timer to rerun the process at an interval Timer { - // 1000 milliseconds is 1 second interval: 1000 - - // start the timer immediately running: true - - // run the timer again when it ends repeat: true - - // when the timer is triggered, set the running property of the - // process to true, which reruns it if stopped. onTriggered: dateProc.running = true } } diff --git a/modules/bar/components/Workspace.qml b/modules/bar/components/Workspace.qml index e48780d..d4e3e38 100644 --- a/modules/bar/components/Workspace.qml +++ b/modules/bar/components/Workspace.qml @@ -10,29 +10,50 @@ Item { visible: modelData.id > 0 - width: 30 - height: 30 + width: Dimensions.workspace.width + height: Dimensions.workspace.height + + Rectangle { + id: rectangle + anchors.fill: button + color: Theme.palette.base100 + radius: Dimensions.radius + } Button { id: button anchors.centerIn: parent - padding: 6 - leftPadding: 7 - rightPadding: 7 + verticalPadding: Dimensions.workspace.verticalPadding + horizontalPadding: Dimensions.workspace.horizontalPadding - background: Rectangle { - id: rectangle - anchors.fill: parent - color: "#161212" - radius: 8 - } - - rotation: workspace.modelData.active ? 0 : 180 + background: null icon.source: "/home/baobeld/dotfiles/quickshell/assets/triangle.svg" - icon.color: workspace.modelData.active ? Theme.palette.primary : Theme.palette.basecontent + icon.color: Theme.palette.basecontent onClicked: workspace.modelData.activate() + + states: State { + name: "active" + when: workspace.modelData.active + PropertyChanges { + button { + rotation: 180 + icon.color: Theme.palette.primary + } + } + } + + transitions: Transition { + from: "" + to: "active" + reversible: true + NumberAnimation { + properties: "rotation" + duration: 250 + easing.type: Easing.InOutQuad + } + } } } diff --git a/modules/bar/components/Workspaces.qml b/modules/bar/components/Workspaces.qml index ceef72b..25ebfee 100644 --- a/modules/bar/components/Workspaces.qml +++ b/modules/bar/components/Workspaces.qml @@ -1,11 +1,12 @@ import QtQuick import QtQuick.Controls import Quickshell.Hyprland +import "../../../config/" Row { id: root - spacing: 4 + spacing: Dimensions.workspace.spacing Repeater { diff --git a/styled/StyledLabel.qml b/styled/StyledLabel.qml index 9e785ac..3d78058 100644 --- a/styled/StyledLabel.qml +++ b/styled/StyledLabel.qml @@ -1,8 +1,8 @@ import QtQuick -import "root:config" +import "../config/" Rectangle { color: Theme.palette.base100 - radius: 5 + radius: Dimensions.radius } diff --git a/styled/StyledText.qml b/styled/StyledText.qml index 838d6ef..d2fc577 100644 --- a/styled/StyledText.qml +++ b/styled/StyledText.qml @@ -3,4 +3,5 @@ import "root:config" Text { color: Theme.palette.basecontent + font.family: Theme.fontFamily }