stat formatting

components/StyledButton.qml

@@ -1,32 +1,37 @@
 import qs.config
 import QtQuick
-import Quickshell.Widgets
+import QtQuick.Controls
 
-WrapperMouseArea {
+Button {
     id: root
-    required property Component content
-    property alias padding: rectangle.margin
-    property alias color: rectangle.color
     property alias border: rectangle.border
     property alias radius: rectangle.radius
 
-    hoverEnabled: true
+    font.pixelSize: 14
-    cursorShape: Qt.PointingHandCursor
+    padding: 6
 
-    WrapperRectangle {
+    palette.button: hovered ? Theme.palette.primary : Theme.palette.base100
-        id: rectangle
+    Behavior on palette.button {
-        margin: 8
+        ColorAnimation {
-        radius: 8
+            duration: 100
-        color: root.containsMouse && root.hoverEnabled ? Theme.palette.primary : Theme.palette.base100
-        Behavior on color {
-            ColorAnimation {
-                duration: 200
-                easing.type: Easing.InOutQuad
-            }
-        }
-        Loader {
-            active: true
-            sourceComponent: root.content
         }
     }
+    palette.buttonText: hoverEnabled && hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+    Behavior on palette.buttonText {
+        ColorAnimation {
+            duration: 100
+        }
+    }
+
+    wheelEnabled: true
+
+    HoverHandler {
+        cursorShape: Qt.PointingHandCursor
+    }
+
+    background: Rectangle {
+        id: rectangle
+        color: root.palette.button
+        radius: 8
+    }
 }

modules/bar/components/Cpu.qml

@@ -16,8 +16,11 @@ StyledButton {
         showTemp = !showTemp;
     }
 
-    content: RowLayout {
+    contentItem: RowLayout {
         id: row
+
+        spacing: 0
+
         Ref {
             service: SystemInfo
         }
@@ -28,17 +31,15 @@ StyledButton {
             font.pixelSize: Dimensions.cpu.iconSize
             font.bold: true
             text: Icons.cpu
-
+            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
-            color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
         }
 
         StyledText {
             id: text
 
             font.pixelSize: Dimensions.cpu.fontSize
-            text: ` ${(SystemInfo.cpuPerc * 100).toFixed()}%`
+            text: ` ${(SystemInfo.cpuPerc * 100).toFixed().toString().padStart(2, "_")}%`
-
+            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
-            color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
 
             states: [
                 State {
@@ -46,7 +47,7 @@ StyledButton {
                     when: root.showTemp
                     PropertyChanges {
                         text {
-                            text: ` ${(SystemInfo.cpuTemp)}℃`
+                            text: ` ${SystemInfo.cpuTemp.toFixed().toString().padStart(2, "_")}℃`
                         }
                     }
                 }

modules/bar/components/Gpu.qml

@@ -16,8 +16,11 @@ StyledButton {
         root.showTemp = !root.showTemp;
     }
 
-    content: RowLayout {
+    contentItem: RowLayout {
         id: row
+
+        spacing: 0
+
         Ref {
             service: SystemInfo
         }
@@ -28,14 +31,15 @@ StyledButton {
             font.pixelSize: Dimensions.gpu.iconSize
             font.bold: true
             text: Icons.gpu
+            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
         }
 
         StyledText {
             id: text
 
             font.pixelSize: Dimensions.gpu.fontSize
-
+            text: ` ${(SystemInfo.gpuPerc * 100).toFixed().toString().padStart(2, "_")}%`
-            text: ` ${(SystemInfo.gpuPerc * 100).toFixed()}%`
+            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
 
             states: [
                 State {
@@ -43,7 +47,7 @@ StyledButton {
                     when: root.showTemp
                     PropertyChanges {
                         text {
-                            text: ` ${(SystemInfo.gpuTemp)}℃`
+                            text: ` ${SystemInfo.gpuTemp.toFixed().toString().padStart(2, "_")}℃`
                         }
                     }
                 }

modules/bar/components/Mpris.qml

@@ -1,51 +1,15 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
-import qs.config
 import qs.services
-import qs.widgets
 import QtQuick
-import QtQuick.Layouts
 
 StyledButton {
     id: root
 
+    text: `${Mpris.active?.isPlaying ? "" : ""} ${Mpris.active?.trackTitle} - ${Mpris.active?.trackArtist}`
+
     onClicked: {
         Visibility.dashboard = !Visibility.dashboard;
     }
-
-    content: ColumnLayout {
-        id: content
-
-        spacing: 0
-
-        implicitWidth: text.width
-        implicitHeight: text.height
-        StyledText {
-            id: text
-            text: `${Mpris.active?.isPlaying ? "" : ""} ${Mpris.active?.trackTitle} - ${Mpris.active?.trackArtist}`
-
-            font.pixelSize: Dimensions.mpris.fontSize
-
-            states: State {
-                name: "hovered"
-                when: root.containsMouse
-                PropertyChanges {
-                    text {
-                        color: Theme.palette.primarycontent
-                    }
-                }
-            }
-            transitions: Transition {
-                from: ""
-                to: "hovered"
-                reversible: true
-                ColorAnimation {
-                    properties: "color"
-                    duration: 100
-                    easing.type: Easing.InOutCubic
-                }
-            }
-        }
-    }
 }

modules/bar/components/Pipewire.qml

@@ -1,25 +1,24 @@
 import qs.components
 import qs.config
 import qs.services
-import qs.widgets
 import QtQuick
 
 StyledButton {
     id: root
 
-    onClicked: mouse => {
+    text: `${Pipewire.muted ? " " : Pipewire.volume <= 0 ? " " : " "}   ${(Pipewire.volume * 100).toFixed()}%`
-        if (mouse.button == Qt.LeftButton) {
+
-            Pipewire.toggleMute();
+    onClicked: {
-        } else if (mouse.button == Qt.RightButton) {
+        Pipewire.toggleMute();
-            popup.opened = !popup.opened;
-        }
     }
 
-    onWheel: event => {
+    WheelHandler {
-        if (event.angleDelta.y > 0) {
+        onWheel: event => {
-            Pipewire.incrementVolume();
+            if (event.angleDelta.y > 0) {
-        } else if (event.angleDelta.y < 0) {
+                Pipewire.incrementVolume();
-            Pipewire.decrementVolume();
+            } else if (event.angleDelta.y < 0) {
+                Pipewire.decrementVolume();
+            }
         }
     }
 
@@ -29,17 +28,9 @@ StyledButton {
             when: Pipewire.muted
             PropertyChanges {
                 root {
-                    color: Theme.palette.error
+                    palette.button: Theme.palette.error
                 }
             }
         }
     ]
-
-    content: StyledText {
-        id: text
-        property string icon: Pipewire.muted ? " " : Pipewire.volume <= 0 ? " " : " "
-        text: `${icon} ${(Pipewire.volume * 100).toFixed()}%`
-        font.pixelSize: Dimensions.pipewire.fontSize
-        color: root.containsMouse || Pipewire.muted ? Theme.palette.base300 : Theme.palette.basecontent
-    }
 }

modules/bar/components/bluetooth/AvailableDevice.qml

@@ -1,7 +1,6 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
-import qs.config
 import qs.widgets
 import QtQuick
 import QtQuick.Layouts
@@ -31,13 +30,11 @@ StyledLabel {
         }
 
         StyledButton {
+
             Layout.alignment: Qt.AlignRight
             hoverEnabled: !root.modelData.pairing
-            color: containsMouse ? Theme.palette.primary : Theme.palette.base200
+            text: 'Pair'
-            content: StyledText {
+
-                text: 'Pair'
-                font.pixelSize: 12
-            }
             onClicked: {
                 if (!hoverEnabled) {
                     return;

modules/bar/components/bluetooth/ConnectedDevice.qml

@@ -80,11 +80,9 @@ StyledLabel {
 
         StyledButton {
             Layout.alignment: Qt.AlignRight
-            color: containsMouse ? Theme.palette.error : Theme.palette.base200
+            text: 'Disconnect'
-            content: StyledText {
+            palette.button: hovered ? Theme.palette.error : Theme.palette.base200
-                text: 'Disconnect'
+
-                font.pixelSize: 12
-            }
             onClicked: {
                 if (root.modelData.state != BluetoothDeviceState.Connected) {
                     return;

modules/bar/components/bluetooth/PairedDevice.qml

@@ -34,11 +34,8 @@ StyledLabel {
             Layout.alignment: Qt.AlignRight
             StyledButton {
                 hoverEnabled: root.modelData.state == BluetoothDeviceState.Disconnected
-                color: containsMouse ? Theme.palette.primary : Theme.palette.base200
+                text: 'Connect'
-                content: StyledText {
+
-                    text: 'Connect'
-                    font.pixelSize: 12
-                }
                 onClicked: {
                     if (!hoverEnabled) {
                         return;
@@ -49,11 +46,10 @@ StyledLabel {
 
             StyledButton {
                 hoverEnabled: root.modelData.state == BluetoothDeviceState.Disconnected
-                color: containsMouse ? Theme.palette.error : Theme.palette.base200
+                text: 'Unpair'
-                content: StyledText {
+
-                    text: 'Unpair'
+                palette.button: hovered ? Theme.palette.error : Theme.palette.base100
-                    font.pixelSize: 12
+
-                }
                 onClicked: {
                     if (!hoverEnabled) {
                         return;

modules/bar/components/notifications/NotificationMenu.qml

@@ -7,7 +7,6 @@ import qs.widgets
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Quickshell
 import Quickshell.Widgets
 
 StyledPopupWindow {
@@ -34,11 +33,8 @@ StyledPopupWindow {
             StyledButton {
                 id: clearButton
                 Layout.alignment: Qt.AlignRight
+                text: "Clear"
                 onClicked: Notifications.clear()
-                content: StyledText {
-                    text: "Clear"
-                    color: clearButton.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
-                }
             }
         }
 

modules/bar/components/tray/menu/MenuItem.qml

@@ -1,13 +1,12 @@
 import qs.components
-import qs.widgets
 import Quickshell
 
 StyledButton {
     id: root
+
     property QsMenuEntry menuEntry
+
+    text: root.menuEntry.text
+
     onClicked: menuEntry.triggered()
-    content: StyledText {
-        font.pixelSize: 14
-        text: root.menuEntry.text
-    }
 }

modules/drawers/dashboard/Dashboard.qml

@@ -19,19 +19,18 @@ StyledDrawer {
         radius: 8
         margin: 32
         ColumnLayout {
-          spacing: 8
-          RowLayout {
             spacing: 8
+            RowLayout {
+                spacing: 8
 
                 Layout.alignment: Qt.AlignHCenter
 
-                StyledButton {
+                StyledIconButton {
                     id: previousPlayerButton
+
                     visible: Mpris.players.length > 1
-                    content: LucideIcon {
+                    text: Icons.chevronLeft
-                        color: previousPlayerButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
+
-                        text: Icons.chevronLeft
-                    }
                     onClicked: {
                         Mpris.previousPlayer();
                     }
@@ -52,10 +51,9 @@ StyledDrawer {
                 StyledButton {
                     id: nextPlayerButton
                     visible: Mpris.players.length > 1
-                    content: LucideIcon {
+
-                        color: nextPlayerButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
+                    text: Icons.chevronRight
-                        text: Icons.chevronRight
+
-                    }
                     onClicked: {
                         Mpris.nextPlayer();
                     }
@@ -63,7 +61,7 @@ StyledDrawer {
             }
 
             MprisController {
-              player: Mpris.active
+                player: Mpris.active
             }
         }
     }

modules/pomodoro/Pomodoro.qml

@@ -108,10 +108,7 @@ StyledWindow {
 
                 Layout.alignment: Qt.AlignHCenter
 
-                content: StyledText {
+                text: "Reset"
-                    text: "Reset"
-                    font.pixelSize: 14
-                }
 
                 onClicked: {
                     Pomodoro.reset();