feat: bar workspaces

modules/bar/ActiveWindow.qml

@@ -10,6 +10,7 @@ BoxLayout {
 
     readonly property color colour: Appearance.colours.pink
 
+    padding: [Appearance.padding.smaller, 0]
     animated: true
     clip: true
 
@@ -17,7 +18,7 @@ BoxLayout {
         text: Icons.getAppCategoryIcon(Hyprland.activeClient?.class) ?? "desktop_windows"
         color: root.colour
 
-        Layout.alignment: Qt.AlignCenter
+        Layout.alignment: Layout.Center
     }
 
     Label {
@@ -27,7 +28,7 @@ BoxLayout {
         color: root.colour
         rotation: root.vertical ? 90 : 0
 
-        Layout.alignment: Qt.AlignCenter
+        Layout.alignment: Layout.Center
         Layout.maximumWidth: root.vertical ? this.implicitHeight : this.implicitWidth
     }
 }

modules/bar/Bar.qml

@@ -33,9 +33,9 @@ Variants {
             BoxLayout {
                 vertical: win.vertical
                 spacing: Appearance.spacing.larger
-                padding: [Appearance.padding.smaller, Appearance.padding.large]
+                padding: [0, Appearance.padding.large]
                 color: Appearance.alpha(Appearance.colours.base, false)
-                radius: Appearance.rounding.small
+                radius: Appearance.rounding.full
 
                 OsIcon {}
 
@@ -47,9 +47,9 @@ Variants {
                     vertical: win.vertical
                 }
 
-                // Workspaces {
+                Workspaces {
-                //     vertical: win.vertical
+                    vertical: win.vertical
-                // }
+                }
             }
         }
     }

modules/bar/Clock.qml

@@ -9,11 +9,13 @@ BoxLayout {
 
     readonly property color colour: Appearance.colours.peach
 
+    padding: [Appearance.padding.smaller, 0]
+
     MaterialIcon {
         text: "calendar_month"
         color: root.colour
 
-        Layout.alignment: Qt.AlignCenter
+        Layout.alignment: Layout.Center
     }
 
     Label {
@@ -23,6 +25,6 @@ BoxLayout {
         font.family: Appearance.font.family.mono
         color: root.colour
 
-        Layout.alignment: Qt.AlignCenter
+        Layout.alignment: Layout.Center
     }
 }

modules/bar/OsIcon.qml

@@ -6,12 +6,14 @@ import QtQuick
 import QtQuick.Layouts
 
 Box {
+    padding: [Appearance.padding.smaller, 0]
+
     Label {
         text: Icons.osIcon
         font.pointSize: Appearance.font.size.smaller
         font.family: Appearance.font.family.mono
         color: Appearance.colours.yellow
 
-        Layout.alignment: Qt.AlignCenter
+        Layout.alignment: Layout.Center
     }
 }

modules/bar/Workspaces.qml

@@ -3,22 +3,26 @@ pragma ComponentBehavior: Bound
 import "root:/widgets"
 import "root:/services"
 import "root:/config"
-import Quickshell
 import QtQuick
 import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
 
 Item {
-    property alias vertical: root.vertical
-
-    implicitWidth: root.implicitWidth
-    implicitHeight: root.implicitHeight
-
-    Box {
     id: root
 
+    property alias vertical: layout.vertical
     readonly property color colour: Appearance.colours.mauve
 
-        // homogenous: true
+    implicitWidth: layout.implicitWidth
+    implicitHeight: layout.implicitHeight
+
+    BoxLayout {
+        id: layout
+
+        padding: [Appearance.padding.smaller / 2, 0]
+        anchors.centerIn: parent
+        homogenous: true
+        spacing: 0
 
         Repeater {
             model: BarConfig.workspaces.shown
@@ -26,41 +30,76 @@ Item {
             Label {
                 required property int index
 
-                text: (index + 1).toString()
+                text: index + 1
                 color: root.colour
+                horizontalAlignment: Label.AlignCenter
+
+                Layout.alignment: Layout.Center
+                Layout.preferredWidth: layout.homogenous ? layout.height : -1
             }
         }
-
-        // Text {
-        //     Layout.alignment: Qt.AlignCenter
-        //     horizontalAlignment: Text.AlignJustify
-
-        //     text: root.vertical ? Time.format("hh\nmm") : Time.format("dd/MM/yy hh:mm")
-        //     font.pointSize: Appearance.font.size.smaller
-        //     font.family: Appearance.font.family.mono
-        //     color: root.colour
-        // }
     }
 
     Rectangle {
-        x: (root.childrenRect.width / BarConfig.workspaces.shown) * ((Hyprland.activeWorkspace?.id ?? 1) - 1)
+        id: active
-        y: 0
-        width: root.childrenRect.width / BarConfig.workspaces.shown
-        height: root.childrenRect.height
-        color: "red"
-        radius: 1000
 
-        // layer.enabled: true
+        // property int lastIdx: 0
-        // layer.effect: ShaderEffect {
+        property int currentIdx: (Hyprland.activeWorkspace?.id ?? 1) - 1
-        //     readonly property Item source: root
+        readonly property real size: layout.children[currentIdx][root.vertical ? "height" : "width"]
-        //     fragmentShader: `
+        readonly property real offset: {
-        //         varying highp vec2 qt_TexCoord0;
+            const vertical = root.vertical;
-        //         uniform highp vec4 color;
+            const child = layout.children[currentIdx];
-        //         uniform sampler2D source;
+            const size = child[vertical ? "height" : "width"];
-        //         void main() {
+            const implicitSize = child[vertical ? "implicitHeight" : "implicitWidth"];
-        //             gl_FragColor = color * (1.0 - texture2D(source, qt_TexCoord0).w);
+            return child.x - (size - implicitSize) / 2;
-        //         }
+        }
-        //     `
+
-        // }
+        clip: true
+        x: root.vertical ? 0 : offset
+        y: root.vertical ? offset : 0
+        width: root.vertical ? layout.width : size
+        height: root.vertical ? size : layout.height
+        color: Appearance.colours.mauve
+        radius: Appearance.rounding.full
+
+        Rectangle {
+            id: base
+
+            visible: false
+            anchors.fill: parent
+            color: Appearance.colours.base
+        }
+
+        OpacityMask {
+            source: base
+            maskSource: layout
+
+            x: root.vertical ? 0 : -parent.offset
+            y: root.vertical ? -parent.offset : 0
+            width: root.width
+            height: root.height
+
+            Behavior on x {
+                Anim {}
+            }
+
+            Behavior on y {
+                Anim {}
+            }
+        }
+
+        Behavior on x {
+            Anim {}
+        }
+
+        Behavior on y {
+            Anim {}
+        }
+    }
+
+    component Anim: NumberAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.standard
     }
 }