feat(DiskUsage): updated dynamic width options for DiskUsage widget (#2517)

* feat(WidgetsTabSection.qml): added dynamic width and static padding for DiskUsage

* feat(DiskUsage.qml):added functionality for dynamic width and static padding, also changed spacing to work like in cpu and ram monitor. Now they look complete and same

* fix(DiskUsage): restore display modes & formatting

---------

Co-authored-by: purian23 <purian23@gmail.com>

quickshell/Modules/DankBar/Widgets/DiskUsage.qml

@@ -12,6 +12,7 @@ BasePill {
     property int diskUsageMode: (widgetData && widgetData.diskUsageMode !== undefined) ? widgetData.diskUsageMode : 0
     property bool isHovered: mouseArea.containsMouse
     property bool isAutoHideBar: false
+    property bool minimumWidth: (widgetData && widgetData.minimumWidth !== undefined) ? widgetData.minimumWidth : true
 
     property var selectedMount: {
         if (!DgopService.diskMounts || DgopService.diskMounts.length === 0) {
@@ -69,6 +70,8 @@ BasePill {
     }
 
     Connections {
+        target: SettingsData
+
         function onWidgetDataChanged() {
             root.mountPath = Qt.binding(() => {
                 return (root.widgetData && root.widgetData.mountPath !== undefined) ? root.widgetData.mountPath : "/";
@@ -96,14 +99,12 @@ BasePill {
                 return DgopService.diskMounts[0] || null;
             });
         }
-
-        target: SettingsData
     }
 
     content: Component {
         Item {
             implicitWidth: root.isVerticalOrientation ? (root.widgetThickness - root.horizontalPadding * 2) : diskContent.implicitWidth
-            implicitHeight: root.isVerticalOrientation ? diskColumn.implicitHeight : (root.widgetThickness - root.horizontalPadding * 2)
+            implicitHeight: root.isVerticalOrientation ? diskColumn.implicitHeight : diskContent.implicitHeight
 
             Column {
                 id: diskColumn
@@ -118,10 +119,12 @@ BasePill {
                         if (root.diskUsagePercent > 90) {
                             return Theme.tempDanger;
                         }
+
                         if (root.diskUsagePercent > 75) {
                             return Theme.tempWarning;
                         }
-                        return Theme.surfaceText;
+
+                        return Theme.widgetIconColor;
                     }
                     anchors.horizontalCenter: parent.horizontalCenter
                 }
@@ -154,24 +157,28 @@ BasePill {
                 id: diskContent
                 visible: !root.isVerticalOrientation
                 anchors.centerIn: parent
-                spacing: 3
+                spacing: Theme.spacingXS
 
                 DankIcon {
+                    id: diskIcon
                     name: "storage"
                     size: Theme.barIconSize(root.barThickness, undefined, root.barConfig?.maximizeWidgetIcons, root.barConfig?.iconScale)
                     color: {
                         if (root.diskUsagePercent > 90) {
                             return Theme.tempDanger;
                         }
+
                         if (root.diskUsagePercent > 75) {
                             return Theme.tempWarning;
                         }
-                        return Theme.surfaceText;
+
+                        return Theme.widgetIconColor;
                     }
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
                 StyledText {
+                    id: mountText
                     text: {
                         if (!root.selectedMount) {
                             return "--";
@@ -182,32 +189,20 @@ BasePill {
                     color: Theme.widgetTextColor
                     anchors.verticalCenter: parent.verticalCenter
                     horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
                     elide: Text.ElideNone
+                    wrapMode: Text.NoWrap
                 }
 
-                StyledText {
+                Item {
-                    text: {
+                    id: textBox
-                        if (root.diskUsagePercent === undefined || root.diskUsagePercent === null || root.diskUsagePercent === 0) {
-                            return "--%";
-                        }
-                        if (!root.selectedMount)
-                            return "--%";
-                        switch (root.diskUsageMode) {
-                        case 1:
-                            return root.selectedMount.size || "--";
-                        case 2:
-                            return root.selectedMount.avail || "--";
-                        case 3:
-                            return (root.selectedMount.avail || "--") + " / " + (root.selectedMount.size || "--");
-                        default:
-                            return root.diskUsagePercent.toFixed(0) + "%";
-                        }
-                    }
-                    font.pixelSize: Theme.barTextSize(root.barThickness, root.barConfig?.fontScale, root.barConfig?.maximizeWidgetText)
-                    color: Theme.widgetTextColor
                     anchors.verticalCenter: parent.verticalCenter
-                    horizontalAlignment: Text.AlignLeft
+
-                    elide: Text.ElideNone
+                    implicitWidth: root.minimumWidth ? Math.max(diskBaseline.width, diskCurrent.width) : diskCurrent.width
+                    implicitHeight: diskText.implicitHeight
+
+                    width: implicitWidth
+                    height: implicitHeight
 
                     StyledTextMetrics {
                         id: diskBaseline
@@ -225,7 +220,40 @@ BasePill {
                         }
                     }
 
-                    width: Math.max(diskBaseline.width, paintedWidth)
+                    StyledTextMetrics {
+                        id: diskCurrent
+                        font.pixelSize: Theme.barTextSize(root.barThickness, root.barConfig?.fontScale, root.barConfig?.maximizeWidgetText)
+                        text: diskText.text
+                    }
+
+                    StyledText {
+                        id: diskText
+                        text: {
+                            if (root.diskUsagePercent === undefined || root.diskUsagePercent === null || root.diskUsagePercent === 0) {
+                                return "--%";
+                            }
+                            if (!root.selectedMount)
+                                return "--%";
+                            switch (root.diskUsageMode) {
+                            case 1:
+                                return root.selectedMount.size || "--";
+                            case 2:
+                                return root.selectedMount.avail || "--";
+                            case 3:
+                                return (root.selectedMount.avail || "--") + " / " + (root.selectedMount.size || "--");
+                            default:
+                                return root.diskUsagePercent.toFixed(0) + "%";
+                            }
+                        }
+                        font.pixelSize: Theme.barTextSize(root.barThickness, root.barConfig?.fontScale, root.barConfig?.maximizeWidgetText)
+                        color: Theme.widgetTextColor
+
+                        anchors.fill: parent
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignVCenter
+                        elide: Text.ElideNone
+                        wrapMode: Text.NoWrap
+                    }
                 }
             }
         }

quickshell/Modules/Settings/WidgetsTab.qml

@@ -404,7 +404,7 @@ Item {
             widgetObj.mountPath = "/";
             widgetObj.diskUsageMode = 0;
         }
-        if (widgetId === "cpuUsage" || widgetId === "memUsage" || widgetId === "cpuTemp" || widgetId === "gpuTemp")
+        if (widgetId === "cpuUsage" || widgetId === "memUsage" || widgetId === "cpuTemp" || widgetId === "gpuTemp" || widgetId === "diskUsage")
             widgetObj.minimumWidth = true;
         if (widgetId === "memUsage")
             widgetObj.showInGb = false;

quickshell/Modules/Settings/WidgetsTabSection.qml

@@ -320,7 +320,7 @@ Column {
                         DankActionButton {
                             id: minimumWidthButton
                             buttonSize: 28
-                            visible: modelData.id === "cpuUsage" || modelData.id === "memUsage" || modelData.id === "cpuTemp" || modelData.id === "gpuTemp"
+                            visible: modelData.id === "cpuUsage" || modelData.id === "memUsage" || modelData.id === "cpuTemp" || modelData.id === "gpuTemp" || modelData.id === "diskUsage"
                             iconName: "straighten"
                             iconSize: 16
                             iconColor: (modelData.minimumWidth !== undefined ? modelData.minimumWidth : true) ? Theme.primary : Theme.outline