Made the bar scaling relative and ia a config file

config/Config.qml

@@ -0,0 +1,26 @@
+pragma Singleton
+import QtQuick 2.15
+
+QtObject {
+    readonly property int small_spacing: 4
+    readonly property int spacing: 8
+
+    readonly property int small_radius: 4
+    readonly property int radius: 6
+    readonly property int big_radius: 10
+    readonly property int border_width: 2
+
+    readonly property string font: "CodeNewRoman Nerd Font"
+
+    function big_font_size(value) {
+        return value * 0.6
+    }
+
+    function medium_scaling(value) {
+        return value * 0.4
+    }
+
+    // Tray
+    readonly property int reload_interval: 10000
+    readonly property int fast_reload_interval: 10000
+}

modules/bar/Bar.qml

@@ -3,6 +3,7 @@ import Quickshell
 import Quickshell.Hyprland
 import "./widgets"
 import "../../colors"
+import "../../config"
 
 // TODO: interact with PyWal
 
@@ -15,7 +16,7 @@ PanelWindow {
     anchors.left: true
     anchors.right: true
 
-    implicitHeight: 40
+    implicitHeight: Math.floor(screen.height * 0.025)
 
     exclusiveZone: height // this is so context menus don't clip into the bar
 
@@ -31,15 +32,14 @@ PanelWindow {
         id: bar
         anchors.fill: parent   
         color: Qt.alpha(Colors.background, 0.5)
-        radius: 0
 
         Row {   // bar widgets left
             id: widgetsLeft
 
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
-            anchors.leftMargin: 16
+            anchors.leftMargin: 0 // parent.height / 4
-            spacing: 8
+            spacing: Math.floor(parent.height / 4)
 
             MenuButton {}
             // TODO: Add functionallity (Maybe just rofi or own way)
@@ -68,8 +68,8 @@ PanelWindow {
 
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
-            anchors.rightMargin: 16
+            anchors.rightMargin: 0 //parent.height / 4
-            spacing: 8
+            spacing: Math.floor(parent.height / 4)
 
             // TODO: Add bluetooth, network, audio, power, maybe HW monitor
             Tray{}

modules/bar/scripts/Apps.sh

@@ -149,6 +149,6 @@ done
 #   echo "$app"
 # done
 
-RESULT="$ID $(printf '%s  ' "${APPS[@]}")"
+RESULT="$(printf '%s' "${APPS[@]}")"
-RESULT=${RESULT% }   # remove trailing space
+# RESULT=${RESULT% }   # remove trailing space
 echo "$RESULT"

modules/bar/widgets/Battery.qml

@@ -3,11 +3,12 @@ import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Io
 import "../../../colors"
+import "../../../config"
 import "../states/Battery"
 
 MouseArea {
     id: batteryButton
-    width: clicked ? Math.max(batteryPercentage.width + parent.spacing*2, bar.height) : Math.max(batteryText.width + parent.spacing*2, bar.height)
+    width: clicked ? Math.max(batteryPercentageText.width + parent.spacing*3, bar.height) : Math.max(batteryText.width + parent.spacing*2, bar.height)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
@@ -22,8 +23,8 @@ MouseArea {
     Rectangle {
         anchors.fill: parent
         color: batteryButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
-        radius: 6
+        radius: Config.radius
-        border.width: 2
+        border.width: Config.border_width
         border.color: batteryButton.containsMouse ? Colors.tertiaryContainer_fg
             : Colors.secondaryContainer_fg
 
@@ -38,8 +39,8 @@ MouseArea {
                 BatteryState.percentage >= 25 ? "" :
                 ""
             )
-            font.pixelSize: 26
+            font.pixelSize: Config.big_font_size(bar.height)
-            font.family: "Nerd Font"
+            font.family: Config.font
             color: (
                 BatteryState.charging ? BatteryState.percentage == 100 ? "white" : "green" :
                 BatteryState.percentage <= 5 ? "red" :
@@ -50,15 +51,25 @@ MouseArea {
         }
 
         Text {
-            id: batteryChargingText
+            id: batteryPercentageText
-            visible : !clicked && BatteryState.charging
+            visible : clicked
-            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.centerIn: parent
-            anchors.verticalCenter: parent.verticalCenter
+            text: (
-            text: "󱐋"
+                BatteryState.charging ? "󰂄" :
-            style: Text.Outline
+                BatteryState.percentage >= 90 ? "󰁹  " + BatteryState.percentage + "%" :
-            styleColor: Colors.tertiaryContainer
+                BatteryState.percentage >= 80 ? "󰂂  " + BatteryState.percentage + "%" :
-            font.pixelSize: 26
+                BatteryState.percentage >= 70 ? "󰂁  " + BatteryState.percentage + "%" :
-            font.family: "Nerd Font"
+                BatteryState.percentage >= 60 ? "󰂀  " + BatteryState.percentage + "%" :
+                BatteryState.percentage >= 50 ? "󰁿  " + BatteryState.percentage + "%" :
+                BatteryState.percentage >= 40 ? "󰁾  " + BatteryState.percentage + "%" :
+                BatteryState.percentage >= 30 ? "󰁽  " + BatteryState.percentage + "%" :
+                BatteryState.percentage >= 20 ? "󰁼  " + BatteryState.percentage + "%" :
+                BatteryState.percentage >= 10 ? "󰁻  " + BatteryState.percentage + "%" :
+                BatteryState.percentage >=  5 ? "󰁺  " + BatteryState.percentage + "%" :
+                "󰂃  " + BatteryState.percentage + "%"
+            )
+            font.pixelSize: Config.big_font_size(bar.height)
+            font.family: Config.font
             color: (
                 BatteryState.charging ? BatteryState.percentage == 100 ? "white" : "green" :
                 BatteryState.percentage <= 5 ? "red" :

modules/bar/widgets/Clock.qml

@@ -2,14 +2,16 @@ import QtQuick
 import Quickshell
 import Quickshell.Hyprland
 import "../../../colors"
+import "../../../config"
 
 Rectangle {  //workspace
-    width: timeDisplay.width + 8 + dateDisplay.width + 16
+    id: timeAnchore
-    height: timeDisplay.height + 16
+    width: dateTimer.running ? Math.max(dateDisplay.width + timeDisplay.width + Config.spacing*3, bar.height) : Math.max(dateDisplay.width + timeDisplay.width + Config.spacing*2, bar.height)
-    radius: 4
+    height: bar.height
+    radius: Config.radius
     color: Colors.primaryContainer
     border.color: Colors.primaryContainer_fg
-    border.width: 2
+    border.width: Config.border_width
     MouseArea {
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
@@ -18,7 +20,7 @@ Rectangle {  //workspace
         
         Row {
             id: row
-            spacing: 8
+            spacing: Config.spacing
             anchors.centerIn: parent
 
             Text {
@@ -27,7 +29,7 @@ Rectangle {  //workspace
 
                 text: currentDate
                 color: Colors.primary
-                font.pixelSize: 18
+                font.pixelSize: Math.floor(bar.height/2)
                 font.family: "Inter, sans-serif"
 
                 Timer {
@@ -49,7 +51,7 @@ Rectangle {  //workspace
 
                 text: currentTime
                 color: Colors.primary
-                font.pixelSize: 18
+                font.pixelSize: Math.floor(bar.height/2)
                 font.family: "Inter, sans-serif"
 
                 Component.onCompleted: {

modules/bar/widgets/IdleButton.qml

@@ -3,6 +3,7 @@ import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Io
 import "../../../colors"
+import "../../../config"
 import "../states/Idle" as Global
 
 MouseArea {
@@ -19,8 +20,8 @@ MouseArea {
     Rectangle {
         anchors.fill: parent
         color: idleButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
-        radius: 6
+        radius: Config.radius
-        border.width: 2
+        border.width: Config.border_width
         border.color: idleButton.containsMouse ? Colors.tertiaryContainer_fg
             : Colors.secondaryContainer_fg
 
@@ -51,8 +52,8 @@ MouseArea {
             id: idleText
             anchors.centerIn: parent
             text: Global.IdleState.idle ? "" : ""
-            font.pixelSize: 26
+            font.pixelSize: Config.big_font_size(bar.height)
-            font.family: "Nerd Font"
+            font.family: Config.font
             color: idleButton.containsMouse ? Colors.tertiary_fg : idleText.text == "" ? Colors.primary : Colors.tertiary
         }
     }

modules/bar/widgets/MenuButton.qml

@@ -3,11 +3,12 @@ import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Io
 import "../../../colors"
+import "../../../config"
 
 MouseArea {
     id: archButton
-    width: 30
+    width: Math.max(bar.height, archButtonText.width+Config.spacing)
-    height: 28
+    height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
 
@@ -18,13 +19,14 @@ MouseArea {
     Rectangle {
         anchors.fill: parent
         color: archButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.primaryContainer, 0.25)
-        radius: 6
+        radius: Config.radius
 
         Text {
+            id: archButtonText
             anchors.centerIn: parent
             text: "󰣇"
-            font.pixelSize: 26
+            font.pixelSize: Config.big_font_size(bar.height)
-            font.family: "Nerd Font"
+            font.family: Config.font
             color: archButton.containsMouse ? Colors.tertiary_fg : Colors.primary
         }
     }

modules/bar/widgets/Network.qml

@@ -3,13 +3,15 @@ import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Io
 import "../../../colors"
+import "../../../config"
 import "../states/Network" as Global
 
 MouseArea {
     id: networkButton
-    width: Math.max(networkText.width + parent.spacing*2, bar.height)
 
+    width: Math.max(networkText.width + Config.spacing*2, bar.height)
     height: bar.height
+
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
 
@@ -21,8 +23,8 @@ MouseArea {
     Rectangle {
         anchors.fill: parent
         color: networkButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
-        radius: 6
+        radius: Config.radius
-        border.width: 2
+        border.width: Config.border_width
         border.color: networkButton.containsMouse ? Colors.tertiaryContainer_fg
             : Colors.secondaryContainer_fg
 
@@ -30,8 +32,8 @@ MouseArea {
             id: networkText
             text: Global.NetworkState.status
             anchors.centerIn: parent
-            font.pixelSize: 26
+            font.pixelSize: Config.big_font_size(bar.height)
-            font.family: "Nerd Font"
+            font.family: Config.font
             color: networkButton.containsMouse ? Colors.tertiary_fg : networkText.text === "󰤭 /󱐤" ? Colors.error : Colors.primary
         }
 

modules/bar/widgets/PowerButton.qml

@@ -3,18 +3,19 @@ import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Io
 import "../../../colors"
+import "../../../config"
 
 MouseArea {
     id: powerButton
-    width: powerText.width + 16
+    width: Math.max(powerText.width + Config.spacing, bar.height)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
     
     Rectangle {
         anchors.fill: parent
-        color: powerButton.containsMouse ? Colors.secondaryContainer_fg : Qt.alpha(Colors.secondary, 0.5)
+        color: powerButton.containsMouse ? Colors.secondaryContainer_fg : Qt.alpha(Colors.secondary, 0.75)
-        radius: 6
+        radius: Config.radius
 
         Item {
             anchors.fill: parent
@@ -41,8 +42,8 @@ MouseArea {
             id: powerText
             anchors.centerIn: parent
             text: ""
-            font.pixelSize: 26
+            font.pixelSize: Config.big_font_size(bar.height)
-            font.family: "Nerd Font"
+            font.family: Config.font
             color:powerButton.containsMouse ? Colors.secondaryContainer : Colors.secondary_fg
         }
     }

modules/bar/widgets/Tray.qml

@@ -4,26 +4,27 @@ import Quickshell.Hyprland
 import Quickshell.Services.SystemTray
 import Quickshell.Io
 import "../../../colors"
+import "../../../config"
 
 Row {   // Workspace Row
     id: trayRow
-    spacing: 4
+    spacing: Math.floor(bar.height/8)
 
     Repeater {
         model: SystemTray.items
         Column{
             Rectangle{
-                width: iconImage.width + 8
+                width: iconImage.width + Config.spacing
-                height: (bar.height-trayItem.height)/2
+                height: Math.floor((bar.height-trayItem.height)/2)
                 color: "transparent"
             }
             Rectangle {  //trayItem
                 id: trayItem
-                width: iconImage.width + 8
+                width: iconImage.width + Config.spacing
-                height: iconImage.height + 8
+                height: iconImage.height + Config.spacing
-                radius: 4
+                radius: Config.small_radius
                 color: "transparent"
-                border.width: 2
+                border.width: Config.border_width
 
                 Process {
                     id: steamRunner
@@ -74,7 +75,7 @@ Row {   // Workspace Row
                         border.color: workspaceButton.containsMouse ? Colors.tertiaryContainer_fg
                             : modelData.active ? Colors.primaryContainer_fg
                             : Colors.secondaryContainer_fg
-                        radius: 6
+                        radius: Config.radius
                     }
 
                 }
@@ -86,8 +87,8 @@ Row {   // Workspace Row
 
                     anchors.centerIn: parent
 
-                    width: bar.height*0.5
+                    width: Config.big_font_size(bar.height)
-                    height: bar.height*0.5
+                    height: Config.big_font_size(bar.height)
 
                     // Component.onCompleted: {
                     //     // Default to the original icon
@@ -119,7 +120,7 @@ Row {   // Workspace Row
                 }
 
                 Timer {
-                    interval: 10000
+                    interval: Config.reload_interval
                     running: true
                     repeat: true
                     triggeredOnStart: true

modules/bar/widgets/Workspaces.qml

@@ -3,12 +3,13 @@ import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Io
 import "../../../colors"
+import "../../../config"
 
 Row {   // Workspace Row
     id: workspacesRow
 
     required property HyprlandMonitor thisMonitor
-    spacing: 8
+    spacing: Math.floor(bar.height/4)
 
     // Get infos of Type Unknown
     // Repeater {
@@ -31,16 +32,20 @@ Row {   // Workspace Row
             active: modelData.monitor === thisMonitor
             sourceComponent: Rectangle {  //workspace
                 // visible: modelData.monitor === thisMonitor
-                width: (workspaceNum.width + 16) < (workspaceNum.height + 8) ? workspaceNum.height + 8 : workspaceNum.width + 16
+                width: Math.max(workspaceNum.width + workspaceText.width+Config.spacing*2, bar.height)
-                height: workspaceNum.height + 8
+                height: workspaceNum.height + Config.spacing
-                radius: 4
+                radius: Config.small_radius
-                color: workspaceButton.containsMouse ? Colors.tertiaryContainer
+                color: (
-                    : modelData.active ? Colors.primaryContainer
+                    workspaceButton.containsMouse ? Colors.tertiaryContainer :
-                    : Colors.secondaryContainer
+                    modelData.active ? Colors.primaryContainer :
-                border.color: workspaceButton.containsMouse ? Colors.tertiaryContainer_fg
+                    Colors.secondaryContainer
-                    : modelData.active ? Colors.primaryContainer_fg
+                )
-                    : Colors.secondaryContainer_fg
+                border.color: (
-                border.width: 2
+                    workspaceButton.containsMouse ? Colors.tertiaryContainer_fg :
+                    modelData.active ? Colors.primaryContainer_fg :
+                    Colors.secondaryContainer_fg
+                )
+                border.width: Config.border_width
 
                 MouseArea {
                     id: workspaceButton
@@ -49,22 +54,38 @@ Row {   // Workspace Row
                     anchors.fill: parent
                     onClicked: Hyprland.dispatch("workspace " + modelData.id)
                     
-                    Rectangle {
+                    Row {
-                        anchors.fill: parent
+                        id: workspaceRow
-                        color:  "transparent"
+                        anchors.centerIn: parent
-                        radius: 6
+                        spacing: Math.floor(bar.height/8)
-                    }
+                        leftPadding: Math.floor(bar.height/4)
-                }
 
                         Text {
                             id: workspaceNum
                             text: modelData.id
-                    anchors.centerIn: parent
+                            anchors.verticalCenter: parent.verticalCenter
                             color: workspaceButton.containsMouse ? Colors.tertiary
                                 : modelData.active ? Colors.primary
                                 : Colors.secondary
-                    font.pixelSize: 18
+
-                    font.family: "Inter, sans-serif"
+                            font.pixelSize: Config.medium_scaling(bar.height)*1.2
+                            font.family: Config.font
+                            font.bold: true
+                        }
+
+                        Text {
+                            id: workspaceText
+                            text: ""
+                            anchors.verticalCenter: parent.verticalCenter
+                            color: workspaceButton.containsMouse ? Colors.tertiary
+                                : modelData.active ? Colors.primary
+                                : Colors.secondary
+
+                            font.pixelSize: Config.medium_scaling(bar.height)
+                            font.family: Config.font
+                            font.letterSpacing: Math.floor(Config.medium_scaling(bar.height) * (2 / 3))
+                        }
+                    }
                 }
 
                 Process {
@@ -74,14 +95,14 @@ Row {   // Workspace Row
 
                     stdout: StdioCollector {
                         onStreamFinished: {
-                            workspaceNum.text = this.text
+                            workspaceText.text = this.text
                             // console.log("workspaceScript output:", this.text)
                         }
                     }
                 }
 
                 Timer {
-                    interval: 1000
+                    interval: Config.fast_reload_interval
                     running: true
                     repeat: true
                     onTriggered: workspaceContent.running = true
@@ -94,6 +115,6 @@ Row {   // Workspace Row
         visible: Hyprland.workspaces.length === 0
         text: "No Workspaces"
         color: Colors.error
-        font.pixelSize: 18
+        font.pixelSize: Config.big_font_size(bar.height)
     }
 }