finish style bar(almost)

13 files changed, 228 insertions, 106 deletions

diff --git a/bar/Bar.qml b/bar/Bar.qml
index 598b776..39cb256 100644
--- a/bar/Bar.qml
+++ b/bar/Bar.qml
@@ -40,11 +40,9 @@ Scope {
                 color: "transparent"
 
                 Rectangle {
-                    anchors {
-                        left: parent.left
-                    }
-                    implicitWidth: leftRow.width + leftRow.spacing - leftSpacer.width
-                    implicitHeight: leftRow.height
+                    anchors.left: parent.left
+                    width: leftRow.width + leftRow.anchors.leftMargin - leftSpacer.width
+                    height: leftRow.height
                     color: Qt.rgba(Colors.background.r, Colors.background.g, Colors.background.b, Bar.bgTransparency)
                     radius: Bar.moduleRadius
                 }
@@ -55,8 +53,8 @@ Scope {
                         left: parent.left
                         leftMargin: Bar.moduleLeftMargin
                     }
-                    implicitWidth: (child.width - centerRow.width) / 2
-                    implicitHeight: child.height
+                    width: (child.width - centerRow.width) / 2
+                    height: child.height
                     spacing: Bar.leftModuleSpacing
 
                     Workspace {
@@ -77,8 +75,8 @@ Scope {
                 Rectangle {
                     id: centerRow
                     anchors.centerIn: parent
-                    implicitWidth: activeWindow.implicitWidth + General.rectMargin * 2
-                    implicitHeight: activeWindow.implicitHeight
+                    width: activeWindow.implicitWidth + General.rectMargin * 2
+                    height: activeWindow.implicitHeight
 
                     color: Colors.alt
                     radius: Style.rounding.smaller
@@ -89,22 +87,23 @@ Scope {
                 }
 
                 Rectangle {
-                    anchors {
-                        right: parent.right
-                        rightMargin: Bar.moduleRightMargin
-                    }
-                    implicitWidth: power.width + tray.width + timeDate.width + network.width + temp.width + gpu.width + memory.width + cpu.width
-                    implicitHeight: leftRow.height
+                    anchors.right: parent.right
+                    width: rightRow.width + rightRow.anchors.rightMargin - rightSpacer.width
+                    height: rightRow.height
                     color: Qt.rgba(Colors.background.r, Colors.background.g, Colors.background.b, Bar.bgTransparency)
                     radius: Bar.moduleRadius
                 }
 
                 RowLayout {
                     id: rightRow
-                    anchors.right: parent.right
+                    anchors {
+                        right: parent.right
+                        rightMargin: Bar.moduleRightMargin
+                    }
                     layoutDirection: Qt.RightToLeft
-                    implicitWidth: (child.width - centerRow.width) / 2
-                    implicitHeight: child.height
+                    width: (child.width - centerRow.width) / 2
+                    height: child.height
+                    spacing: Bar.rightModuleSpacing
 
                     Power {
                         id: power
@@ -131,7 +130,11 @@ Scope {
                         id: cpu
                     }
 
-                    Item {}
+                    Item {
+                        id: rightSpacer
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+                    }
                 }
             }
         }
diff --git a/bar/Cpu.qml b/bar/Cpu.qml
index 00cf53c..ee39f54 100644
--- a/bar/Cpu.qml
+++ b/bar/Cpu.qml
@@ -6,8 +6,12 @@ import qs.config
 import qs.services as Services
 
 Item {
-    id: root
+    implicitWidth: resource.implicitWidth
+    implicitHeight: resource.implicitHeight
+
     SimpleResource {
+        id: resource
+
         text: Math.round(Services.Resource.cpuUsage * 100)
         icon: Icons.resource.cpu
     }
diff --git a/bar/Gpu.qml b/bar/Gpu.qml
index a0e1dd6..e3acc27 100644
--- a/bar/Gpu.qml
+++ b/bar/Gpu.qml
@@ -6,7 +6,11 @@ import qs.components
 import qs.config as Config
 
 Item {
+    implicitWidth: resource.implicitWidth
+    implicitHeight: resource.implicitHeight
+
     SimpleResource {
+        id: resource
         icon: Config.Icons.resource.gpu
         text: Services.Resource.gpuUsage
     }
diff --git a/bar/Memory.qml b/bar/Memory.qml
index 30a17e6..0745a65 100644
--- a/bar/Memory.qml
+++ b/bar/Memory.qml
@@ -1,13 +1,18 @@
 import QtQuick
 import QtQuick.Layouts
 
+// TODO: sort all header
 import qs.services as Services
 import qs.components
 import qs.config as Config
 
 Item {
-    id: root
+    implicitWidth: resource.implicitWidth
+    implicitHeight: resource.implicitHeight
+
     SimpleResource {
+        id: resource
+
         icon: Config.Icons.resource.memory
         text: Math.round(Services.Resource.memoryUsedPercentage * 100) + "%"
     }
diff --git a/bar/Mpris.qml b/bar/Mpris.qml
index 8a784c8..a3145aa 100644
--- a/bar/Mpris.qml
+++ b/bar/Mpris.qml
@@ -9,7 +9,6 @@ import qs.config
 
 Item {
     id: root
-    height: Bar.height
     readonly property MprisPlayer activePlayer: Services.Mpris.activePlayer
     readonly property string cleanedTitle: cleanMusicTitle(activePlayer?.trackTitle) || qsTr("No media")
     // length broken (https://github.com/quickshell-mirror/quickshell/issues/109)
@@ -46,8 +45,8 @@ Item {
         }
     }
 
-    implicitWidth: rect.width + 3 // +3 cause it look better somehow
-    implicitHeight: Bar.height
+    implicitWidth: rect.width - General.rectMargin / 2
+    height: Bar.height + General.rectMargin / 2
 
     // TODO fancy animation progress bar etc.
     Rectangle {
@@ -55,7 +54,7 @@ Item {
         anchors.verticalCenter: parent.verticalCenter
         // TODO: move to IRect
         implicitWidth: text.width + General.rectMargin * 2
-        implicitHeight: parent.height - General.rectMargin
+        height: parent.height - General.rectMargin
         color: Colors.alt
         radius: Style.rounding.smaller
         Text {
diff --git a/bar/Network.qml b/bar/Network.qml
index 3559df0..14e8851 100644
--- a/bar/Network.qml
+++ b/bar/Network.qml
@@ -6,29 +6,61 @@ import qs.components
 import qs.config as Config
 
 Item {
-    id: root
 
-    RowLayout {
-        Item {
-            Layout.fillWidth: true
-        }
-        anchors.fill: parent
-        spacing: Config.Bar.resourceIconTextSpacing
+    implicitWidth: container.implicitWidth
+    implicitHeight: container.implicitHeight - Config.General.rectMargin
 
-        Icons {
-            text: Services.Network.state
-        }
-        Text {
-            text: Math.round(Services.Resource.cpuUsage * 100)
-        }
-        Text {
-            text: Services.NetworkUsage.up + " " + Services.NetworkUsage.upUnit
+    Rectangle {
+        id: container
+        anchors {
+            fill: parent
+            verticalCenter: parent.verticalCenter
+            horizontalCenter: parent.horizontalCenter
         }
-        Text {
-            text: Services.NetworkUsage.down + " " + Services.NetworkUsage.downUnit
-        }
-        Item {
-            Layout.fillWidth: true
+
+        implicitWidth: layout.implicitWidth + Config.General.rectMargin * 2
+        implicitHeight: Config.Bar.height
+        color: Config.Colors.alt
+        radius: Config.Style.rounding.large
+
+        RowLayout {
+            id: layout
+            anchors {
+                verticalCenter: parent.verticalCenter
+                horizontalCenter: parent.horizontalCenter
+            }
+            spacing: Config.Bar.resourceIconTextSpacing
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+            Icons {
+                text: Services.Network.state
+            }
+
+            RowLayout {
+                spacing: Config.Bar.resourceIconTextSpacing / 2
+                Text {
+                    text: Config.Icons.resource.network.download
+                }
+                Text {
+                    text: Services.NetworkUsage.down + Services.NetworkUsage.downUnit
+                }
+            }
+            RowLayout {
+                spacing: Config.Bar.resourceIconTextSpacing / 2
+                Text {
+                    text: Config.Icons.resource.network.upload
+                }
+                Text {
+                    text: Services.NetworkUsage.up + Services.NetworkUsage.upUnit
+                }
+            }
+
+            Item {
+                Layout.fillWidth: true
+            }
         }
     }
 }
diff --git a/bar/Power.qml b/bar/Power.qml
index f9a74ed..581e725 100644
--- a/bar/Power.qml
+++ b/bar/Power.qml
@@ -7,36 +7,54 @@ import qs.config as Config
 import qs.components
 
 Item {
-    id: root
-    RowLayout {
-        Item {
-            Layout.fillWidth: true
-        }
-        anchors.fill: parent
-        spacing: Config.Bar.resourceIconTextSpacing
+    implicitWidth: container.implicitWidth
+    implicitHeight: container.implicitHeight
 
-        Icons {
-            text: Config.Icons.power.shutdown
-        }
+    Rectangle {
+        id: container
 
-        Icons {
-            text: Config.Icons.power.dpms
+        anchors {
+            fill: parent
+            verticalCenter: parent.verticalCenter
+            horizontalCenter: parent.horizontalCenter
         }
-
-        Icons {
-            text: Config.Icons.power.lock
-        }
-
-        Icons {
-            text: Config.Icons.power.suspend
-        }
-
-        Icons {
-            text: Config.Icons.power.reboot
-        }
-
-        Item {
-            Layout.fillWidth: true
+        implicitWidth: layout.implicitWidth + Config.General.rectMargin * 2
+        implicitHeight: Config.Bar.height - Config.General.rectMargin
+
+        color: Config.Colors.alt
+        radius: Config.Style.rounding.large
+
+        RowLayout {
+            id: layout
+            Item {
+                Layout.fillWidth: true
+            }
+            anchors.fill: parent
+            spacing: Config.Bar.resourceIconTextSpacing
+
+            Icons {
+                text: Config.Icons.power.shutdown
+            }
+
+            Icons {
+                text: Config.Icons.power.dpms
+            }
+
+            Icons {
+                text: Config.Icons.power.lock
+            }
+
+            Icons {
+                text: Config.Icons.power.suspend
+            }
+
+            Icons {
+                text: Config.Icons.power.reboot
+            }
+
+            Item {
+                Layout.fillWidth: true
+            }
         }
     }
 }
diff --git a/bar/Temp.qml b/bar/Temp.qml
index fb84e5a..3a6c07b 100644
--- a/bar/Temp.qml
+++ b/bar/Temp.qml
@@ -6,8 +6,11 @@ import qs.components
 import qs.config as Config
 
 Item {
-    id: root
+    implicitWidth: resource.implicitWidth
+    implicitHeight: resource.implicitHeight
+
     SimpleResource {
+        id: resource
         icon: Config.Icons.resource.temp
         text: Math.round(Services.Resource.cpuTemp * 100)
     }
diff --git a/bar/TimeDate.qml b/bar/TimeDate.qml
index 807566a..c3bf129 100644
--- a/bar/TimeDate.qml
+++ b/bar/TimeDate.qml
@@ -6,22 +6,40 @@ import qs.components
 import qs.config as Config
 
 Item {
-    id: root
-    RowLayout {
-        Item {
-            Layout.fillWidth: true
+    implicitWidth: container.implicitWidth
+    implicitHeight: container.implicitHeight - Config.General.rectMargin
+    Rectangle {
+        id: container
+        anchors {
+            fill: parent
+            verticalCenter: parent.verticalCenter
+            horizontalCenter: parent.horizontalCenter
         }
-        anchors.fill: parent
-        spacing: Config.Bar.resourceIconTextSpacing
 
-        Icons {
-            text: Config.Icons.resource.clock
-        }
-        Text {
-            text: Services.TimeDate.time
-        }
-        Item {
-            Layout.fillWidth: true
+        implicitWidth: layout.implicitWidth + Config.General.rectMargin * 2
+        implicitHeight: Config.Bar.height
+
+        color: Config.Colors.alt
+        radius: Config.Style.rounding.large
+
+        RowLayout {
+            id: layout
+            Item {
+                Layout.fillWidth: true
+            }
+            anchors.fill: parent
+            spacing: Config.Bar.resourceIconTextSpacing
+
+            Icons {
+                text: Config.Icons.resource.clock
+                font.pixelSize: Config.Style.font.size.larger
+            }
+            Text {
+                text: Services.TimeDate.time
+            }
+            Item {
+                Layout.fillWidth: true
+            }
         }
     }
 }
diff --git a/bar/Tray.qml b/bar/Tray.qml
new file mode 100644
index 0000000..1148ac3
--- /dev/null
+++ b/bar/Tray.qml
@@ -0,0 +1,10 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Hyprland
+import Quickshell.Services.SystemTray
+import Quickshell.Wayland
+import Quickshell.Widgets
+import Qt5Compat.GraphicalEffects
+import Quickshell
+
+Item {}
diff --git a/components/SimpleResource.qml b/components/SimpleResource.qml
index 2d8a91f..6dc2bba 100644
--- a/components/SimpleResource.qml
+++ b/components/SimpleResource.qml
@@ -4,24 +4,49 @@ import QtQuick.Layouts
 import qs.config as Config
 import qs.components
 
-RowLayout {
+Item {
     id: root
+
     required property string text
     required property string icon
-    Item {
-        Layout.fillWidth: true
-    }
-    anchors.fill: parent
-    spacing: Config.Bar.resourceIconTextSpacing
 
-    Icons {
-        text: root.icon
-    }
-    Text {
-        text: root.text
-    }
+    implicitWidth: container.implicitWidth
+    implicitHeight: container.implicitHeight
+
+    Rectangle {
+        id: container
+        anchors {
+            fill: parent
+            verticalCenter: parent.verticalCenter
+            horizontalCenter: parent.horizontalCenter
+        }
+        implicitWidth: layout.implicitWidth + Config.General.rectMargin * 2
+        implicitHeight: Config.Bar.height - Config.General.rectMargin
+
+        color: Config.Colors.alt
+        radius: Config.Style.rounding.large
+
+        RowLayout {
+            id: layout
+
+            anchors {
+                verticalCenter: parent.verticalCenter
+                horizontalCenter: parent.horizontalCenter
+            }
+
+            spacing: Config.Bar.resourceIconTextSpacing
+
+            Icons {
+                text: root.icon
+            }
+            Text {
+                text: root.text
+            }
 
-    Item {
-        Layout.fillWidth: true
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+        }
     }
 }
diff --git a/config/Bar.qml b/config/Bar.qml
index 7e0ef9a..c01d934 100644
--- a/config/Bar.qml
+++ b/config/Bar.qml
@@ -5,19 +5,20 @@ import Quickshell
 Singleton {
     id: root
 
-    readonly property int height: 40
+    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 moduleLeftMargin: Style.spacing.large
-    readonly property int moduleRightMargin: 0
+    readonly property int moduleLeftMargin: Style.spacing.larger
+    readonly property int moduleRightMargin: Style.spacing.small
 
     readonly property int leftModuleSpacing: Style.spacing.smaller
+    readonly property int rightModuleSpacing: Style.spacing.smaller
 
     readonly property int workspaces: 10
-    readonly property int workspaceIconSize: 34
+    readonly property int workspaceIconSize: 32
     readonly property int workspaceSpacing: 2
     readonly property int workspaceHorizontalSpacing: Style.spacing.smaller
     readonly property int workspaceActiveIconSize: workspaceIconSize * 1.5
diff --git a/config/Style.qml b/config/Style.qml
index 1a15305..b6d222b 100644
--- a/config/Style.qml
+++ b/config/Style.qml
@@ -37,7 +37,7 @@ Singleton {
     }
 
     component FontFamily: QtObject {
-        readonly property string symbols: "Symbols Nerd Font"
+        readonly property string symbols: "Symbols Nerd Font Mono"
         readonly property string iosevka: "Iosevka Nerd Font"
         readonly property string mono: "JetBrains Mono"
     }