Various fixes for various layout issues, make bar less thicc

pikabar/usr/share/pikabar/CommonStyles.qml

@@ -11,7 +11,10 @@ QtObject {
     property int fontWeight: 500
     property int tooltipFontSize: 14
     property int textFontSize: 16
-    property int smallTextFontSize: 12
+    property int textFontSizeMedium: 14
-    property int iconFontSize: 16
+    property int textFontSizeSmall: 12
-    property int iconFontSizeLarge: 20
+    property int smallTextFontSize: 10
+    property int iconFontSize: 18
+    property int iconFontSizeSmall: 14
+    property int iconFontSizeMedium: 16
 } 

pikabar/usr/share/pikabar/Topbar.qml

@@ -1,10 +1,11 @@
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
+import Quickshell.Widgets
 import "widgets" as Widgets
 
 PanelWindow {
-
+    id: panel
     property var weatherConfig: ({})
     property string sysInfoInterval: "2s"
     property int workspaces: 10
@@ -15,82 +16,96 @@ PanelWindow {
         right: true
     }
 
-    height: 46
+    height: 30
-    width: 500
     color: "transparent"
 
     Rectangle {
-        anchors.leftMargin: 10
-        anchors.rightMargin: 10
-        anchors.topMargin: 5
         anchors.fill: parent
         color: "#141418"
-        radius: 25
-
         ShaderEffect {
             id: shaderEffect
             anchors.fill: parent
             property color baseColor: "#191823"
             property color transparent: Qt.rgba(0, 0, 0, 0)
-            property real rectWidth: parent.width
+            property real rectWidth: panel.width
-            property real rectHeight: parent.height
+            property real rectHeight: panel.height
-            property real cornerRadius: 25.0
+            property real cornerRadius: 0
             property real time: 0.0
             fragmentShader: "gradient.frag.qsb"
         }
 
         RowLayout {
-            anchors.fill: parent
+            spacing: 10
+            width: parent.width
+            height: parent.height
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            implicitWidth: parent.width
+            implicitHeight: parent.height
 
             Item {
                 Layout.fillWidth: true
+                Layout.preferredWidth: panel.width / 3
+                Layout.maximumWidth: panel.width / 3
                 Layout.fillHeight: true
+
                 RowLayout {
-                    anchors.left: parent.left
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
                     spacing: 10
+
                     Widgets.Workspaces {
-                        Layout.fillHeight: true
+                        id: workspacesWidget
                         workspaces: workspaces
                     }
-                    Widgets.NowPlaying {
-                        Layout.fillHeight: true
-                    }
-                }
-            }
 
-            Widgets.ActiveWindow {
+                    Widgets.NowPlaying {
-                Layout.fillHeight: true
+                        maxWidth: panel.width / 3 - workspacesWidget.implicitWidth - 26
+                    }
+                }
             }
 
             Item {
                 Layout.fillWidth: true
+                Layout.preferredWidth: panel.width / 3
+                Layout.maximumWidth: panel.width / 3
                 Layout.fillHeight: true
+
                 RowLayout {
-                    spacing: 10
+                    anchors.centerIn: parent
-                    anchors.right: parent.right
+                    width: parent.width
-                    anchors.top: parent.top
+
-                    anchors.bottom: parent.bottom
+                    Widgets.ActiveWindow {
-                    Widgets.Stats {
+                        Layout.fillWidth: true
+                        maxWidth: panel.width / 3
+                        Layout.maximumWidth: parent.width
+                    }
+                }
+            }
+
+            Item {
+                Layout.fillWidth: true
+                Layout.preferredWidth: panel.width / 3
+                Layout.maximumWidth: panel.width / 3
                 Layout.fillHeight: true
+
+                RowLayout {
+                    anchors {
+                        right: parent.right
+                        top: parent.top
+                        bottom: parent.bottom
+                    }
+                    spacing: 10
+
+                    Widgets.Stats {
                         updateInterval: sysInfoInterval
                     }
                     Widgets.Weather {
-                        Layout.fillHeight: true
                         isAmerican: weatherConfig.isamerican ?? false
                         city: weatherConfig.city ?? "London"
                         updateInterval: weatherConfig.weatherupdateinterval ?? 300000
                     }
-                    Widgets.Power {
+                    Widgets.Power {}
-                        Layout.fillHeight: true
+                    Widgets.SystemTray {}
-                    }
+                    Widgets.Clock {}
-                    Widgets.SystemTray {
-                        Layout.fillHeight: true
-                    }
-                    Widgets.Clock {
-                        Layout.fillHeight: true
-                    }
                 }
             }
         }

pikabar/usr/share/pikabar/widgets/ActiveWindow.qml

@@ -5,8 +5,11 @@ import Quickshell.Wayland
 import Quickshell.Widgets
 import "root:/"
 
-Row {
+BarWidget {
-    spacing: 10
+    id: wrapper
+    color: "transparent"
+    property int maxWidth: 100
+    Layout.fillWidth: true
 
     function getIcon() {
         var icon = Quickshell.iconPath(ToplevelManager.activeToplevel.appId.toLowerCase(), true);
@@ -23,24 +26,40 @@ Row {
         return icon;
     }
 
+    RowLayout {
+        width: parent.width
+        height: parent.height
+        spacing: 4
+
+        Item {
+            Layout.fillWidth: true
+            Layout.preferredWidth: parent.width / 2
+        }
+
         IconImage {
-        height: 42
+            id: icon
-        Layout.fillHeight: true
+            implicitHeight: 20
-        implicitWidth: parent.height * 0.6
+            implicitWidth: 20
             source: ToplevelManager.activeToplevel ? getIcon() : "" 
         }
 
         Text {
             id: text
-        height: 42
+            Layout.fillWidth: false
+            Layout.maximumWidth: wrapper.maxWidth - icon.implicitWidth - 16
+            horizontalAlignment: Text.AlignLeft
             text: ToplevelManager.activeToplevel?.title ?? ""
             color: Globals.commonStyles.textColor
-        font.pointSize: Globals.commonStyles.smallTextFontSize
+            font.pointSize: Globals.commonStyles.textFontSizeSmall
             font.family: Globals.commonStyles.fontFamily
             font.weight: Globals.commonStyles.fontWeight
             elide: Text.ElideRight
-        width: Math.min(implicitWidth, 200)
+            maximumLineCount: 1
-        horizontalAlignment: Text.AlignHCenter
+        }
-        verticalAlignment: Text.AlignVCenter
+
+        Item {
+            Layout.fillWidth: true
+            Layout.preferredWidth: parent.width / 2
+        }
     }
 }

pikabar/usr/share/pikabar/widgets/Clock.qml

@@ -6,20 +6,21 @@ import "root:/"
 BarWidget {
     id: clockWidget
     color: "transparent"
-    Layout.minimumWidth: clockLayout.implicitWidth + 80
+    Layout.minimumWidth: clockLayout.implicitWidth + 20
-    Layout.alignment: Qt.AlignRight
+    Layout.minimumHeight: clockLayout.implicitHeight
-    Layout.fillHeight: true
+    widgetAnchors.margins: 10
     radius: 25
 
-    widgetAnchors.margins: 0
     property bool calendarOpen: false
 
     Rectangle {
         id: background
-        anchors.fill: parent
         anchors.margins: 0
+        anchors.centerIn: parent
+        width: clockLayout.implicitWidth + 20
+        height: 30
         color: "#40ffffff"
-        radius: 25
+        radius: 0
         opacity: mouseArea.containsMouse ? 0.2 : 0
         Behavior on opacity {
             NumberAnimation {
@@ -30,18 +31,19 @@ BarWidget {
 
     Column {
         id: clockLayout
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.right
-        rightPadding: 0
+        anchors.verticalCenter: parent.verticalCenter
-        spacing: 2
+        rightPadding: 6
+        spacing: 0
 
         Text {
             id: timeText
-            anchors.right: parent.right
+            anchors.right: parent.horizontalCenter
             text: {
                 let now = Globals.date;
                 return now.toLocaleString(Qt.locale(), "HH:mm");
             }
-            font.pixelSize: Globals.commonStyles.textFontSize
+            font.pixelSize: Globals.commonStyles.textFontSizeMedium
             font.family: Globals.commonStyles.fontFamily
             font.weight: Globals.commonStyles.fontWeight
             color: Globals.commonStyles.textColor
@@ -50,7 +52,7 @@ BarWidget {
 
         Text {
             id: dateText
-            anchors.right: parent.right
+            anchors.right: parent.horizontalCenter
             text: {
                 let now = Globals.date;
                 let dayName = now.toLocaleDateString(Qt.locale(), "ddd");

pikabar/usr/share/pikabar/widgets/NowPlaying.qml

@@ -8,9 +8,13 @@ import "root:/"
 
 BarWidget {
     id: root
+    property int maxWidth: 100
     color: "transparent"
-    implicitHeight: 42
+    implicitHeight: 30
-    implicitWidth: childrenRect.width
+    implicitWidth: mainRect.implicitWidth
+    width: mainRect.implicitWidth
+    height: 30
+
 
     property MprisPlayer player: Mpris.players.values[0] ?? null
     onPlayerChanged: updateProcessState()
@@ -40,7 +44,7 @@ BarWidget {
                 try {
                     const data = JSON.parse(line);
                     for (let i = 0; i < data.length && i < visualizerRepeater.count; i++) {
-                        const newHeight = visualizerRepeater.itemAt(i).height = (data[i] / 1500) * 42 + 25;
+                        const newHeight = visualizerRepeater.itemAt(i).height = (data[i] / 1500) * 30 + 25;
                     }
                 } catch (e) {
                     console.log("Failed to parse cava output:", e);
@@ -52,9 +56,9 @@ BarWidget {
     property double measuredWidth: {
         if (!root.player)
             return 0;
-        let titleWidth = Math.min(titleText.width, 200);
+        let titleWidth = titleText.width
-        let artistWidth = Math.min(artistText.width, 200);
+        let artistWidth = artistText.width
-        return ((Math.max(titleWidth, artistWidth) / Screen.devicePixelRatio) + artContainer.width) * Screen.devicePixelRatio;
+        return ((Math.max(titleWidth, artistWidth) / Screen.devicePixelRatio) + artContainer.width + 3) * Screen.devicePixelRatio;
     }
 
     Repeater {
@@ -80,31 +84,36 @@ BarWidget {
             leftMargin: 8
             rightMargin: 8
         }
+        implicitWidth: artContainer.width + titleContainer.width + 48
         color: "transparent"
         radius: 8
         visible: root.player?.playbackState === MprisPlaybackState.Playing || root.player?.playbackState === MprisPlaybackState.Paused
 
         Rectangle {
             id: artContainer
-            width: 40
+            width: 30
-            height: 40
+            height: 30
             anchors.left: parent.left
             anchors.leftMargin: 32
             anchors.verticalCenter: parent.verticalCenter
             color: "transparent"
             radius: parent.radius
 
-            ClippingRectangle {
+            ClippingWrapperRectangle {
                 anchors.fill: parent
+                anchors.topMargin: 2
+                anchors.rightMargin: 2
                 color: "transparent"
                 radius: parent.radius
+                resizeChild: true
                 border.color: "#9900246b"
                 border.width: 2
 
-                IconImage {
+                child: Image {
                     id: artImage
-                    anchors.fill: parent
                     source: root.player?.trackArtUrl ?? ""
+                    fillMode: Image.PreserveAspectCrop
+                    antialiasing: true
                 }
             }
 
@@ -120,7 +129,7 @@ BarWidget {
                 anchors.centerIn: parent
                 text: root.player?.playbackState === MprisPlaybackState.Playing ? "pause" : "play_arrow"
                 font.family: Globals.commonStyles.iconFontFamily
-                font.pixelSize: Globals.commonStyles.iconFontSizeLarge
+                font.pixelSize: Globals.commonStyles.iconFontSizeSmall
                 color: Globals.commonStyles.textColor
                 opacity: mouseArea.containsMouse ? 1.0 : 0.0
                 Behavior on opacity {
@@ -145,11 +154,10 @@ BarWidget {
             anchors.right: parent.right
             anchors.leftMargin: 16
             anchors.rightMargin: 12
-            height: 42
+            height: 30
 
             Text {
                 id: titleText
-                width: Math.min(implicitWidth, 200)
                 anchors.left: parent.left
                 anchors.bottom: parent.verticalCenter
                 anchors.bottomMargin: 4
@@ -157,13 +165,13 @@ BarWidget {
                 elide: Text.ElideRight
                 color: Globals.commonStyles.textColor
                 font.family: Globals.commonStyles.fontFamily
-                font.pixelSize: Globals.commonStyles.textFontSize
+                font.pixelSize: Globals.commonStyles.textFontSizeMedium
                 font.weight: Globals.commonStyles.fontWeight
+                width: Math.min(implicitWidth, root.maxWidth - artContainer.width - 32)
             }
 
             Text {
                 id: artistText
-                width: Math.min(implicitWidth, 200)
                 anchors.left: parent.left
                 anchors.top: parent.verticalCenter
                 anchors.topMargin: -2
@@ -173,6 +181,7 @@ BarWidget {
                 font.family: Globals.commonStyles.fontFamily
                 font.pixelSize: Globals.commonStyles.smallTextFontSize
                 font.weight: Globals.commonStyles.fontWeight
+                width: Math.min(implicitWidth, root.maxWidth - artContainer.width - 32)
             }
         }
     }

pikabar/usr/share/pikabar/widgets/Power.qml

@@ -22,9 +22,10 @@ Loader {
 
             RowLayout {
                 anchors.fill: parent
-                spacing: 5
+                spacing: 3
 
                 Text {
+                    Layout.alignment: Qt.AlignVCenter
                     font.family: Globals.commonStyles.iconFontFamily
                     font.pixelSize: Globals.commonStyles.iconFontSize
                     color: Globals.commonStyles.textColor
@@ -45,6 +46,7 @@ Loader {
                 }
 
                 Text {
+                    Layout.alignment: Qt.AlignVCenter
                     font.family: Globals.commonStyles.fontFamily
                     font.weight: Globals.commonStyles.fontWeight
                     font.pixelSize: Globals.commonStyles.textFontSize

pikabar/usr/share/pikabar/widgets/Stats.qml

@@ -8,7 +8,7 @@ import "root:/"
 BarWidget {
     id: root
     color: "transparent"
-    implicitHeight: 42
+    implicitHeight: 30
     implicitWidth: mainRect.width
 
     property string updateInterval: "2s"
@@ -44,7 +44,8 @@ BarWidget {
         RowLayout {
             id: layout
             anchors.centerIn: parent
-            spacing: 20
+            anchors.verticalCenterOffset: 1
+            spacing: 10
 
             // CPU Usage Component
             Item {
@@ -61,11 +62,13 @@ BarWidget {
 
                     RowLayout {
                         id: cpuUsageLayout
-                        spacing: 5
+                        spacing: 3
+
                         Text {
                             font.family: Globals.commonStyles.iconFontFamily
                             font.pixelSize: Globals.commonStyles.iconFontSize
                             text: "developer_board"
+                            verticalAlignment: Text.AlignVCenter    
                             color: Globals.commonStyles.textColor
                         }
 
@@ -109,11 +112,12 @@ BarWidget {
 
                     RowLayout {
                         id: cpuTempLayout
-                        spacing: 5
+                        spacing: 3
                         Text {
                             font.family: Globals.commonStyles.iconFontFamily
                             font.pixelSize: Globals.commonStyles.iconFontSize
                             text: "thermometer"
+                            verticalAlignment: Text.AlignVCenter
                             color: Globals.commonStyles.textColor
                         }
 
@@ -157,12 +161,13 @@ BarWidget {
 
                     RowLayout {
                         id: memoryUsageLayout
-                        spacing: 5
+                        spacing: 3
                         Text {
                             font.family: Globals.commonStyles.iconFontFamily
                             font.pixelSize: Globals.commonStyles.iconFontSize
                             text: "memory"
                             color: Globals.commonStyles.textColor
+                            verticalAlignment: Text.AlignVCenter                           
                         }
 
                         Text {

pikabar/usr/share/pikabar/widgets/SystemTray.qml

@@ -15,10 +15,12 @@ BarWidget {
     widgetAnchors.margins: 0
     widgetAnchors.leftMargin: 3
     widgetAnchors.rightMargin: 3
+    height: 30
+    implicitHeight: 30
 
     RowLayout {
         anchors.fill: parent
-        anchors.bottomMargin: 4
+        anchors.bottomMargin: 0
         spacing: 10
 
         Repeater {
@@ -43,7 +45,6 @@ BarWidget {
                     } else if (event.button == Qt.RightButton && item.hasMenu) {
                         const window = QsWindow.window;
                         const widgetRect = window.contentItem.mapFromItem(delegate, 0, delegate.height, delegate.width, delegate.height);
-
                         menuAnchor.anchor.rect = widgetRect;
                         menuAnchor.open();
                     }
@@ -61,7 +62,7 @@ BarWidget {
                     anchors.verticalCenter: parent.verticalCenter
                     source: item && item.icon ? item.icon : ""
                     visible: status === Image.Ready
-                    implicitSize: 24
+                    implicitSize: 20
                     smooth: true
                 }
                 BarTooltip {
@@ -81,8 +82,7 @@ BarWidget {
                 QsMenuAnchor {
                     id: menuAnchor
                     menu: item.menu
-
+                    anchor.window: delegate.QsWindow.window?? null
-                    anchor.window: delegate.QsWindow.window
                     anchor.adjustment: PopupAdjustment.Flip
                 }
             }

pikabar/usr/share/pikabar/widgets/Weather.qml

@@ -7,7 +7,7 @@ import "root:/"
 BarWidget {
     id: root
     color: "transparent"
-    implicitHeight: 42
+    implicitHeight: 30
     implicitWidth: mainRect.width
 
     property string city: "London"
@@ -102,7 +102,7 @@ BarWidget {
     Rectangle {
         id: mainRect
         height: parent.height
-        width: layout.width + 16
+        width: layout.width + 10
         color: "transparent"
         radius: 8
 
@@ -131,20 +131,19 @@ BarWidget {
         RowLayout {
             id: layout
             anchors.centerIn: parent
-            spacing: 8
+            anchors.verticalCenterOffset: 1
+            spacing: 5
 
             Text {
                 id: weatherIcon
-                Layout.alignment: Qt.AlignVCenter
                 font.family: Globals.commonStyles.iconFontFamily
-                font.pixelSize: Globals.commonStyles.iconFontSize
+                font.pixelSize: Globals.commonStyles.iconFontSizeMedium
                 color: Globals.commonStyles.textColor
                 text: "rainy"
             }
 
             Text {
                 id: tempLabel
-                Layout.alignment: Qt.AlignVCenter
                 font.family: Globals.commonStyles.fontFamily
                 font.pixelSize: Globals.commonStyles.textFontSize
                 color: Globals.commonStyles.textColor

pikabar/usr/share/pikabar/widgets/Workspaces.qml

@@ -2,6 +2,7 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Hyprland
+import Quickshell.Widgets
 import "root:/"
 
 BarWidget {
@@ -15,7 +16,7 @@ BarWidget {
     RowLayout {
         anchors {
             left: parent.left
-            leftMargin: 16
+            leftMargin: 12
             verticalCenter: parent.verticalCenter
         }
         spacing: 0
@@ -24,8 +25,8 @@ BarWidget {
             model: root.workspaces
 
             Item {
-                Layout.preferredWidth: 26
+                Layout.preferredWidth: 24
-                Layout.preferredHeight: 26
+                Layout.preferredHeight: 24
 
                 Rectangle {
                     id: wsRect