From 01d9c318593e1bf4eb81dc6e71dc4c20e8c9fa6a Mon Sep 17 00:00:00 2001 From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> Date: Tue, 29 Apr 2025 10:53:54 +1000 Subject: bar: fix alignment Also refactor box -> styledrect + paddedrect --- modules/bar/Pills.qml | 2 +- modules/bar/components/ActiveWindow.qml | 11 ++--- modules/bar/components/OsIcon.qml | 19 ++------ widgets/AnchorText.qml | 17 +++++++ widgets/Box.qml | 86 --------------------------------- widgets/PaddedRect.qml | 52 ++++++++++++++++++++ widgets/StyledRect.qml | 41 ++++++++++++++++ 7 files changed, 121 insertions(+), 107 deletions(-) create mode 100644 widgets/AnchorText.qml delete mode 100644 widgets/Box.qml create mode 100644 widgets/PaddedRect.qml create mode 100644 widgets/StyledRect.qml diff --git a/modules/bar/Pills.qml b/modules/bar/Pills.qml index 5337221..dffd65f 100644 --- a/modules/bar/Pills.qml +++ b/modules/bar/Pills.qml @@ -71,7 +71,7 @@ Item { } } - component Pill: Box { + component Pill: PaddedRect { id: pill color: Appearance.alpha(Appearance.colours.base, false) diff --git a/modules/bar/components/ActiveWindow.qml b/modules/bar/components/ActiveWindow.qml index 24edb9e..40f7a64 100644 --- a/modules/bar/components/ActiveWindow.qml +++ b/modules/bar/components/ActiveWindow.qml @@ -5,12 +5,11 @@ import "root:/config" import QtQuick import QtQuick.Layouts -Box { +StyledRect { id: root readonly property color colour: Appearance.colours.pink - padding: [Appearance.padding.smaller, 0] animated: true clip: true @@ -21,14 +20,14 @@ Box { color: root.colour } - StyledText { + AnchorText { + prevAnchor: icon + vertical: root.vertical + text: Hyprland.activeClient?.title ?? "Desktop" font.pointSize: Appearance.font.size.smaller font.family: Appearance.font.family.mono color: root.colour rotation: root.vertical ? 90 : 0 - - anchors.left: icon.right - anchors.leftMargin: Appearance.padding.smaller } } diff --git a/modules/bar/components/OsIcon.qml b/modules/bar/components/OsIcon.qml index 5f2a103..0daa945 100644 --- a/modules/bar/components/OsIcon.qml +++ b/modules/bar/components/OsIcon.qml @@ -1,19 +1,10 @@ import "root:/widgets" -import "root:/services" import "root:/utils" import "root:/config" -import QtQuick -import QtQuick.Layouts -Box { - padding: [Appearance.padding.smaller, 0] - - StyledText { - text: Icons.osIcon - font.pointSize: Appearance.font.size.smaller - font.family: Appearance.font.family.mono - color: Appearance.colours.yellow - - Layout.alignment: Layout.Center - } +StyledText { + text: Icons.osIcon + font.pointSize: Appearance.font.size.smaller + font.family: Appearance.font.family.mono + color: Appearance.colours.yellow } diff --git a/widgets/AnchorText.qml b/widgets/AnchorText.qml new file mode 100644 index 0000000..a0342e8 --- /dev/null +++ b/widgets/AnchorText.qml @@ -0,0 +1,17 @@ +import "root:/config" +import QtQuick + +StyledText { + id: root + + required property Item prevAnchor + property bool vertical + + anchors.left: vertical ? undefined : prevAnchor.right + anchors.leftMargin: vertical ? 0 : Appearance.padding.smaller + anchors.top: vertical ? prevAnchor.bottom : undefined + anchors.topMargin: vertical ? Appearance.padding.smaller : 0 + + anchors.horizontalCenter: vertical ? prevAnchor.horizontalCenter : undefined + anchors.verticalCenter: vertical ? undefined : prevAnchor.verticalCenter +} diff --git a/widgets/Box.qml b/widgets/Box.qml deleted file mode 100644 index d93fb69..0000000 --- a/widgets/Box.qml +++ /dev/null @@ -1,86 +0,0 @@ -import "root:/config" -import QtQuick - -Rectangle { - id: root - - property bool vertical: false - property bool homogenous: false - property bool animated: false - property int spacing: Appearance.spacing.small - property var padding: 0 - - readonly property int paddingTop: getRealPadding().top - readonly property int paddingRight: getRealPadding().right - readonly property int paddingBottom: getRealPadding().bottom - readonly property int paddingLeft: getRealPadding().left - readonly property int paddingX: getRealPadding().x - readonly property int paddingY: getRealPadding().y - - function getRealPadding() { - const pad = {}; - - if (Array.isArray(padding)) { - if (padding.length === 2) { - pad.top = pad.bottom = padding[0]; - pad.left = pad.right = padding[1]; - } else if (padding.length === 3) { - pad.top = padding[0]; - pad.left = pad.right = padding[1]; - pad.bottom = padding[2]; - } else if (padding.length === 4) { - pad.top = padding[0]; - pad.right = padding[1]; - pad.bottom = padding[2]; - pad.left = padding[3]; - } - } else { - pad.top = pad.bottom = pad.left = pad.right = padding; - } - - pad.x = pad.left + pad.right; - pad.y = pad.top + pad.bottom; - - return pad; - } - - color: "transparent" - - implicitWidth: childrenRect.width + paddingX - implicitHeight: childrenRect.height + paddingY - - onChildrenChanged: { - for (const child of children) { - child.x = Qt.binding(() => paddingLeft); - child.y = Qt.binding(() => paddingTop); - } - } - - Behavior on color { - ColorAnimation { - duration: Appearance.anim.durations.normal - easing.type: Easing.BezierSpline - easing.bezierCurve: Appearance.anim.curves.standard - } - } - - Behavior on implicitWidth { - enabled: root.animated - - NumberAnimation { - duration: Appearance.anim.durations.normal - easing.type: Easing.BezierSpline - easing.bezierCurve: Appearance.anim.curves.emphasized - } - } - - Behavior on implicitHeight { - enabled: root.animated - - NumberAnimation { - duration: Appearance.anim.durations.normal - easing.type: Easing.BezierSpline - easing.bezierCurve: Appearance.anim.curves.emphasized - } - } -} diff --git a/widgets/PaddedRect.qml b/widgets/PaddedRect.qml new file mode 100644 index 0000000..382360d --- /dev/null +++ b/widgets/PaddedRect.qml @@ -0,0 +1,52 @@ +import "root:/config" +import QtQuick + +StyledRect { + id: root + + property var padding: 0 + + readonly property int paddingTop: getRealPadding().top + readonly property int paddingRight: getRealPadding().right + readonly property int paddingBottom: getRealPadding().bottom + readonly property int paddingLeft: getRealPadding().left + readonly property int paddingX: getRealPadding().x + readonly property int paddingY: getRealPadding().y + + function getRealPadding() { + const pad = {}; + + if (Array.isArray(padding)) { + if (padding.length === 2) { + pad.top = pad.bottom = padding[0]; + pad.left = pad.right = padding[1]; + } else if (padding.length === 3) { + pad.top = padding[0]; + pad.left = pad.right = padding[1]; + pad.bottom = padding[2]; + } else if (padding.length === 4) { + pad.top = padding[0]; + pad.right = padding[1]; + pad.bottom = padding[2]; + pad.left = padding[3]; + } + } else { + pad.top = pad.bottom = pad.left = pad.right = padding; + } + + pad.x = pad.left + pad.right; + pad.y = pad.top + pad.bottom; + + return pad; + } + + implicitWidth: childrenRect.width + paddingX + implicitHeight: childrenRect.height + paddingY + + onChildrenChanged: { + for (const child of children) { + child.x = Qt.binding(() => paddingLeft); + child.y = Qt.binding(() => paddingTop); + } + } +} diff --git a/widgets/StyledRect.qml b/widgets/StyledRect.qml new file mode 100644 index 0000000..f9d6ad1 --- /dev/null +++ b/widgets/StyledRect.qml @@ -0,0 +1,41 @@ +import "root:/config" +import QtQuick + +Rectangle { + id: root + + property bool animated: false + property bool vertical: false // Convenience property for propagation to children + + color: "transparent" + implicitWidth: childrenRect.width + implicitHeight: childrenRect.height + + Behavior on color { + ColorAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } + } + + Behavior on implicitWidth { + enabled: root.animated + + NumberAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.emphasized + } + } + + Behavior on implicitHeight { + enabled: root.animated + + NumberAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.emphasized + } + } +} -- cgit v1.2.3-freya