finish bar workspace style

7 files changed, 120 insertions, 23 deletions

diff --git a/bar/Bar.qml b/bar/Bar.qml
index 0591152..a18ad06 100644
--- a/bar/Bar.qml
+++ b/bar/Bar.qml
@@ -36,23 +36,32 @@ Scope {
                     rightMargin: Bar.rightMargin
                 }
 
+                color: "transparent"
+
+                Rectangle {
+                    id: barBackground
+                    anchors {
+                        left: parent.left
+                    }
+                    implicitWidth: workspace.width + mpris.width
+                    implicitHeight: leftRow.height
+                    color: Qt.rgba(Colors.r, Colors.g, Colors.b, Bar.bgTransparency)
+                    radius: Bar.moduleRadius
+                }
+
                 RowLayout {
                     id: leftRow
+                    anchors.left: parent.left
+                    anchors.leftMargin: 20
                     implicitWidth: (child.width - centerRow.width) / 2
                     implicitHeight: child.height
 
                     Workspace {
                         id: workspace
-                        Layout.preferredWidth: 5
-                        Layout.fillHeight: true
-                        Layout.fillWidth: true
-                        Layout.maximumWidth: 400 // FIXME
+                        Layout.minimumWidth: 400 // FIXME
                     }
                     Mpris {
                         id: mpris
-                        Layout.fillWidth: true
-                        Layout.fillHeight: true
-                        Layout.preferredWidth: 1
                     }
                     Item {
                         Layout.fillWidth: true
diff --git a/bar/Workspace.qml b/bar/Workspace.qml
index 0b0c672..6155bb5 100644
--- a/bar/Workspace.qml
+++ b/bar/Workspace.qml
@@ -2,7 +2,8 @@ import QtQuick.Layouts
 import QtQuick
 import Quickshell
 import Quickshell.Hyprland
-import qs.config
+import qs.config as Config
+import qs.components
 
 Item {
     id: root
@@ -14,13 +15,14 @@ Item {
         //     return Hyprland.workspaces.values.some(ws => ws.id === workspaceGroup * Config.options.bar.workspaces.shown + i + 1);
         // })
         workspaceOccupied = Array.from({
-            length: Bar.workspaces
+            length: Config.Bar.workspaces
         }, (_, i) => {
             return Hyprland.workspaces.values.some(ws => ws?.id === (i + 1));
         });
     }
+    // dont work no more for some reason
     function isActive(index: int): bool {
-        Hyprland.focusedWorkspace?.id.toString() == (index + 1).toString();
+        return Hyprland.focusedWorkspace?.id === (index + 1);
     }
     function isOccupied(index: int): bool {
         return workspaceOccupied[index] === true;
@@ -37,24 +39,35 @@ Item {
 
     RowLayout {
         id: layout
-        implicitWidth: parent.width
+        implicitWidth: childrenRect.width
         anchors.verticalCenter: parent.verticalCenter
 
-        spacing: 0
+        spacing: Config.Bar.workspaceSpacing
 
         Repeater {
-            model: Bar.workspaces
+            model: Config.Bar.workspaces
 
             Rectangle {
-                Text {
-                    text: Hyprland.focusedWorkspace?.id.toString() == (index + 1).toString()
-                    // text: isActive(index)
+                id: workspaceRect
+                // text: Hyprland.focusedWorkspace?.id.toString() == (index + 1).toString()
+                // text: isActive(index)
+
+                implicitWidth: !isActive(index) ? Config.Bar.workspaceIconSize : Config.Bar.workspaceActiveIconSize
+                implicitHeight: Config.Bar.workspaceIconSize - 10
+                anchors {
+                    topMargin: 20
+                }
+                radius: Config.Bar.workspaceRounding
+                Icons {
+                    anchors.centerIn: parent
+                    text: Config.Icons.ws[index + 1]
+                    font.pixelSize: Config.Bar.workspaceIconSize / 1.9
+                    color: Config.Colors.foreground // TODO make IText w/ ts default color
+                    // opacity: !isOccupied(index) ? 0 : 1 // less contrast
+                    opacity: isActive(index) ? Config.Bar.workspaceActiveOpacity : isOccupied(index) ? Config.Bar.workspaceOpacity : Config.Bar.workspaceEmptyOpacity
                 }
-                implicitWidth: 10
-                implicitHeight: 10
-                opacity: !isOccupied(index) ? 0.2 : 1
-                // color: isActive(index) ? "#00ff00" : "#ffffff"
-                color: "#000000"
+                color: isOccupied(index) ? Config.Colors.alt : Config.Colors.foreground
+                opacity: isActive(index) ? Config.Bar.workspaceActiveOpacity : isOccupied(index) ? Config.Bar.workspaceOpacity : Config.Bar.workspaceEmptyOpacity
             }
         }
     }
diff --git a/components/IText.qml b/components/IText.qml
new file mode 100644
index 0000000..1b971c4
--- /dev/null
+++ b/components/IText.qml
@@ -0,0 +1,15 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.config
+
+Text {
+    renderType: Text.NativeRendering
+    verticalAlignment: Text.AlignVCenter
+    font {
+        hintingPreference: Font.PreferFullHinting
+        family: Appearance?.font.family.main ?? "sans-serif"
+        pixelSize: Appearance?.font.pixelSize.small ?? 15
+    }
+    color: Appearance?.m3colors.m3onBackground ?? "black"
+    linkColor: Appearance?.m3colors.m3primary
+}
diff --git a/config/Bar.qml b/config/Bar.qml
index d3e72a4..58629be 100644
--- a/config/Bar.qml
+++ b/config/Bar.qml
@@ -5,16 +5,28 @@ import Quickshell
 Singleton {
     id: root
 
-    readonly property int height: 45
+    readonly property int height: 35
     readonly property int borderRadius: Style.rounding.small
     readonly property int topMargin: Style.spacing.small
     readonly property int leftMargin: Style.spacing.larger
     readonly property int rightMargin: Style.spacing.larger
+    readonly property int innerLeftMargin: Style.spacing.small
 
-    readonly property int workspaceIconSize: 32
     readonly property int workspaces: 10
+    readonly property int workspaceIconSize: 32
+    readonly property int workspaceSpacing: 2
+    readonly property int workspaceHorizontalSpacing: Style.spacing.small
+    readonly property int workspaceActiveIconSize: workspaceIconSize * 1.5
+    readonly property int workspaceRounding: Style.rounding.small
+    readonly property double workspaceOpacity: 0.8
+    readonly property int workspaceActiveOpacity: 1
+    readonly property double workspaceEmptyOpacity: 0.2
 
     readonly property int appIconSize: 32
 
     readonly property int resourceIconTextSpacing: Style.spacing.small
+
+    readonly property int moduleRadius: Style.rounding.small
+
+    readonly property double bgTransparency: 0.25
 }
diff --git a/config/Colors.qml b/config/Colors.qml
new file mode 100644
index 0000000..1ba73f2
--- /dev/null
+++ b/config/Colors.qml
@@ -0,0 +1,21 @@
+pragma Singleton
+import Quickshell
+import QtQuick
+
+Singleton {
+    property color background: WallustColors.background
+    property color foreground: WallustColors.foreground
+    property color surface: WallustColors.color0
+    property color primary: WallustColors.color3
+    property color alt: WallustColors.color4
+    property color accent: WallustColors.color1
+    property color success: WallustColors.color2
+    property color warning: WallustColors.color3
+    property color error: WallustColors.color1
+    property color info: WallustColors.color4
+    property color textSecondary: WallustColors.color7
+    property color border: WallustColors.color8
+    property color highlight: WallustColors.color5
+    property color disabled: WallustColors.color6
+    property color muted: WallustColors.color2
+}
diff --git a/config/Icons.qml b/config/Icons.qml
index d628b43..9720463 100644
--- a/config/Icons.qml
+++ b/config/Icons.qml
@@ -15,6 +15,7 @@ Singleton {
             7: "",
             8: "",
             9: "",
+            10: "",
             urgent: "",
             active: "",
             default: " "
diff --git a/config/WallustColors.qml b/config/WallustColors.qml
new file mode 100644
index 0000000..3419969
--- /dev/null
+++ b/config/WallustColors.qml
@@ -0,0 +1,26 @@
+pragma Singleton
+
+import Quickshell
+import QtQuick
+
+Singleton {
+    property color foreground: "#FBF7DA"
+    property color background: "#110E17"
+    property color cursor: "#AFAC98"
+    property color color0: "#39373F"
+    property color color1: "#93350C"
+    property color color2: "#646156"
+	property color color3: Qt.rgba(148,125,188,0.25)
+    property color color4: Qt.rgba(209,168,183,0.25)
+    property color color5: "#D0D4C3"
+    property color color6: "#F4E994"
+    property color color7: "#F1ECC1"
+    property color color8: "#A9A587"
+    property color color9: "#93350C"
+    property color color10: "#646156"
+    property color color11: "#947DBC"
+    property color color12: "#D1A8B7"
+    property color color13: "#D0D4C3"
+    property color color14: "#F4E994"
+    property color color15: "#F1ECC1"
+}