feat(control-center): add DiskUsage widget config overlay with showMountPath toggle and standardized tile sizing (#2507)

* feat(control-center): add widget config overlay with showMountPath toggle for DiskUsage Introduces WidgetConfigOverlay and DiskUsageWidgetConfigMenu components, allowing users to toggle mount path visibility per DiskUsage widget in edit mode * refactor(control-center): use Theme.iconSizeLarge and Theme.fontSizeLarge for small tiles Standardize SmallDiskUsageButton and SmallBatteryButton sizing with Theme.iconSizeLarge and Theme.fontSizeLarge, and unify font weight to Font.Bold on both tile widgets. * fix(control-center): adjust SmallDiskUsageButton font size based on showMountPath * refactor(control-center): simplify DiskUsage config menu i18n strings Remove the redundant "Disk Usage Widget" title and the toggle description to reduce translatable strings
2026-06-08 04:09:15 -04:00 · 2026-06-01 12:35:14 -03:00
parent 12e43d120e
commit 3e4d2b4d46
12 changed files with 173 additions and 6 deletions
@@ -0,0 +1,38 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property var widgetData: null
+
+    signal showMountPathChanged(bool show)
+
+    width: 260
+    height: menuColumn.implicitHeight + Theme.spacingS * 2
+    radius: Theme.cornerRadius
+    color: Theme.surfaceContainer
+    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.16)
+    border.width: 1
+
+    MouseArea {
+        anchors.fill: parent
+    }
+
+    Column {
+        id: menuColumn
+        anchors.fill: parent
+        anchors.margins: Theme.spacingS
+        spacing: 2
+
+        DankToggle {
+            width: parent.width
+            text: I18n.tr("Show mount path", "toggle in control center disk usage widget to turn mount path display on or off")
+            checked: root.widgetData?.showMountPath !== false
+            onToggled: newChecked => {
+                root.showMountPathChanged(newChecked);
+            }
+        }
+    }
+}
@@ -25,6 +25,7 @@ Column {
    signal moveWidget(int fromIndex, int toIndex)
    signal toggleWidgetSize(int index)
    signal collapseRequested
+    signal configRequested(int index, var widgetData, var anchor)

    function requestCollapse() {
        collapseRequested();
@@ -203,6 +204,7 @@ Column {
                        onWidgetMoved: (fromIndex, toIndex) => root.moveWidget(fromIndex, toIndex)
                        onRemoveWidget: index => root.removeWidget(index)
                        onToggleWidgetSize: index => root.toggleWidgetSize(index)
+                        onConfigRequested: (idx, data, anchor) => root.configRequested(idx, data, anchor)
                    }
                }
            }
@@ -869,6 +871,7 @@ Column {

            mountPath: widgetData.mountPath || "/"
            instanceId: widgetData.instanceId || ""
+            showMountPath: widgetData.showMountPath !== undefined ? widgetData.showMountPath : true

            onExpandClicked: {
                if (!root.editMode) {
@@ -888,6 +891,7 @@ Column {

            mountPath: widgetData.mountPath || "/"
            instanceId: widgetData.instanceId || ""
+            showMountPath: widgetData.showMountPath !== undefined ? widgetData.showMountPath : true

            onClicked: {
                if (!root.editMode) {
@@ -21,6 +21,7 @@ Item {
    signal widgetMoved(int fromIndex, int toIndex)
    signal removeWidget(int index)
    signal toggleWidgetSize(int index)
+    signal configRequested(int index, var widgetData, var anchor)

    width: {
        const widgetWidth = widgetData?.width || 50;
@@ -236,6 +237,7 @@ Item {
    }

    Rectangle {
+        id: removeButton
        width: 16
        height: 16
        radius: 8
@@ -278,6 +280,34 @@ Item {
        }
    }

+    readonly property bool hasConfigMenu: widgetData?.id === "diskUsage"
+
+    Rectangle {
+        id: configButton
+        width: 16
+        height: 16
+        radius: 8
+        color: Theme.primary
+        anchors.top: removeButton.top
+        anchors.right: removeButton.left
+        anchors.rightMargin: 4
+        visible: editMode && root.hasConfigMenu
+        z: 10
+
+        DankIcon {
+            anchors.centerIn: parent
+            name: "settings"
+            size: 12
+            color: Theme.primaryText
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: root.configRequested(root.widgetIndex, root.widgetData, configButton)
+        }
+    }
+
    Rectangle {
        id: dragHandle
        width: 16
@@ -0,0 +1,77 @@
+import QtQuick
+import qs.Common
+import qs.Services
+
+Item {
+    id: root
+
+    property int widgetIndex: -1
+    property real anchorX: 0
+    property real anchorY: 0
+    property real anchorWidth: 0
+    property real anchorHeight: 0
+
+    readonly property var widgetData: {
+        if (widgetIndex < 0)
+            return null;
+        const widgets = SettingsData.controlCenterWidgets || [];
+        return widgets[widgetIndex] || null;
+    }
+
+    visible: widgetIndex >= 0
+    z: 10000
+
+    function open(index, data, anchorItem) {
+        const pos = anchorItem.mapToItem(root, 0, 0);
+        anchorX = pos.x;
+        anchorY = pos.y;
+        anchorWidth = anchorItem.width;
+        anchorHeight = anchorItem.height;
+        widgetIndex = index;
+    }
+
+    function close() {
+        widgetIndex = -1;
+    }
+
+    function persistShowMountPath(show) {
+        const widgets = (SettingsData.controlCenterWidgets || []).slice();
+        if (root.widgetIndex < 0 || root.widgetIndex >= widgets.length)
+            return;
+        const updated = Object.assign({}, widgets[root.widgetIndex]);
+        updated.showMountPath = show;
+        widgets[root.widgetIndex] = updated;
+        SettingsData.set("controlCenterWidgets", widgets);
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        enabled: root.visible
+        onClicked: root.close()
+    }
+
+    DiskUsageWidgetConfigMenu {
+        id: diskMenu
+        visible: root.visible && root.widgetData?.id === "diskUsage"
+        widgetData: root.widgetData
+
+        x: {
+            let nx = root.anchorX + root.anchorWidth - width;
+            const maxX = root.width - width - Theme.spacingS;
+            const minX = Theme.spacingS;
+            if (nx < minX)
+                nx = minX;
+            if (nx > maxX)
+                nx = maxX;
+            return nx;
+        }
+        y: {
+            let ny = root.anchorY - height - Theme.spacingS;
+            if (ny < Theme.spacingS)
+                ny = root.anchorY + root.anchorHeight + Theme.spacingS;
+            return ny;
+        }
+
+        onShowMountPathChanged: show => root.persistShowMountPath(show)
+    }
+}
@@ -273,6 +273,7 @@ DankPopout {
                        onMoveWidget: (fromIndex, toIndex) => widgetModel.moveWidget(fromIndex, toIndex)
                        onToggleWidgetSize: index => widgetModel.toggleWidgetSize(index)
                        onCollapseRequested: root.collapseAll()
+                        onConfigRequested: (idx, data, anchor) => widgetConfigOverlay.open(idx, data, anchor)
                    }

                    EditControls {
@@ -303,6 +304,11 @@ DankPopout {
                anchors.fill: parent
                z: 10000
            }
+
+            WidgetConfigOverlay {
+                id: widgetConfigOverlay
+                anchors.fill: parent
+            }
        }
    }

@@ -8,6 +8,7 @@ CompoundPill {

    property string mountPath: "/"
    property string instanceId: ""
+    property bool showMountPath: true

    iconName: "storage"

@@ -37,6 +38,9 @@ CompoundPill {
        if (!selectedMount) {
            return I18n.tr("No disk data");
        }
+        if (!showMountPath) {
+            return I18n.tr("Disk Usage");
+        }
        return selectedMount.mount;
    }

@@ -64,7 +64,7 @@ Rectangle {

        DankIcon {
            name: BatteryService.getBatteryIcon()
-            size: parent.parent.width * 0.25
+            size: Theme.iconSizeLarge
            color: {
                if (BatteryService.isLowBattery && !BatteryService.isCharging) {
                    return Theme.error;
@@ -76,8 +76,8 @@ Rectangle {

        StyledText {
            text: BatteryService.batteryAvailable ? `${BatteryService.batteryLevel}%` : ""
-            font.pixelSize: parent.parent.width * 0.15
-            font.weight: Font.Medium
+            font.pixelSize: Theme.fontSizeLarge
+            font.weight: Font.Bold
            color: {
                if (BatteryService.isLowBattery && !BatteryService.isCharging) {
                    return Theme.error;
@@ -11,6 +11,7 @@ Rectangle {

    property string mountPath: "/"
    property string instanceId: ""
+    property bool showMountPath: true

    property var selectedMount: {
        if (!DgopService.diskMounts || DgopService.diskMounts.length === 0)
@@ -67,7 +68,7 @@ Rectangle {
        DankIcon {
            anchors.verticalCenter: parent.verticalCenter
            name: "storage"
-            size: Theme.iconSizeSmall
+            size: Theme.iconSizeLarge
            color: {
                if (root.usagePercent > 90)
                    return Theme.error;
@@ -82,6 +83,7 @@ Rectangle {
            spacing: 0

            StyledText {
+                visible: root.showMountPath
                text: root.selectedMount?.mount || root.mountPath
                font.pixelSize: Theme.fontSizeSmall
                color: Theme.surfaceVariantText
@@ -92,7 +94,7 @@ Rectangle {

            StyledText {
                text: `${root.usagePercent.toFixed(0)}%`
-                font.pixelSize: Theme.fontSizeSmall
+                font.pixelSize: root.showMountPath ? Theme.fontSizeSmall : Theme.fontSizeLarge
                font.weight: Font.Bold
                color: {
                    if (root.usagePercent > 90)
@@ -13,6 +13,7 @@ function addWidget(widgetId) {
    if (widgetId === "diskUsage") {
        widget.instanceId = generateUniqueId()
        widget.mountPath = "/"
+        widget.showMountPath = true
    }

    if (widgetId === "brightnessSlider") {
@@ -10,6 +10,7 @@ BasePill {
    property var widgetData: null
    property string mountPath: (widgetData && widgetData.mountPath !== undefined) ? widgetData.mountPath : "/"
    property int diskUsageMode: (widgetData && widgetData.diskUsageMode !== undefined) ? widgetData.diskUsageMode : 0
+    property bool showMountPath: (widgetData && widgetData.showMountPath !== undefined) ? widgetData.showMountPath : true
    property bool isHovered: mouseArea.containsMouse
    property bool isAutoHideBar: false
    property bool minimumWidth: (widgetData && widgetData.minimumWidth !== undefined) ? widgetData.minimumWidth : true
@@ -179,6 +180,7 @@ BasePill {

                StyledText {
                    id: mountText
+                    visible: root.showMountPath
                    text: {
                        if (!root.selectedMount) {
                            return "--";
@@ -403,6 +403,7 @@ Item {
        if (widgetId === "diskUsage") {
            widgetObj.mountPath = "/";
            widgetObj.diskUsageMode = 0;
+            widgetObj.showMountPath = true;
        }
        if (widgetId === "cpuUsage" || widgetId === "memUsage" || widgetId === "cpuTemp" || widgetId === "gpuTemp" || widgetId === "diskUsage")
            widgetObj.minimumWidth = true;
@@ -690,6 +691,8 @@ Item {
                    item.mountPath = widget.mountPath;
                if (widget.diskUsageMode !== undefined)
                    item.diskUsageMode = widget.diskUsageMode;
+                if (widget.showMountPath !== undefined)
+                    item.showMountPath = widget.showMountPath;
                if (widget.showNetworkIcon !== undefined)
                    item.showNetworkIcon = widget.showNetworkIcon;
                if (widget.showBluetoothIcon !== undefined)
@@ -42,7 +42,7 @@ Column {
            "id": widget.id,
            "enabled": widget.enabled
        };
-        var keys = ["size", "selectedGpuIndex", "pciId", "mountPath", "diskUsageMode", "minimumWidth", "showSwap", "showInGb", "mediaSize", "clockCompactMode", "focusedWindowSize", "focusedWindowCompactMode", "runningAppsCompactMode", "keyboardLayoutNameCompactMode", "runningAppsGroupByApp", "runningAppsCurrentWorkspace", "runningAppsCurrentMonitor", "showNetworkIcon", "showBluetoothIcon", "showAudioIcon", "showAudioPercent", "showVpnIcon", "showBrightnessIcon", "showBrightnessPercent", "showMicIcon", "showMicPercent", "showBatteryIcon", "showPrinterIcon", "showScreenSharingIcon", "controlCenterGroupOrder", "barMaxVisibleApps", "barMaxVisibleRunningApps", "barShowOverflowBadge", "trayUseInlineExpansion"];
+        var keys = ["size", "selectedGpuIndex", "pciId", "mountPath", "diskUsageMode", "showMountPath", "minimumWidth", "showSwap", "showInGb", "mediaSize", "clockCompactMode", "focusedWindowSize", "focusedWindowCompactMode", "runningAppsCompactMode", "keyboardLayoutNameCompactMode", "runningAppsGroupByApp", "runningAppsCurrentWorkspace", "runningAppsCurrentMonitor", "showNetworkIcon", "showBluetoothIcon", "showAudioIcon", "showAudioPercent", "showVpnIcon", "showBrightnessIcon", "showBrightnessPercent", "showMicIcon", "showMicPercent", "showBatteryIcon", "showPrinterIcon", "showScreenSharingIcon", "controlCenterGroupOrder", "barMaxVisibleApps", "barMaxVisibleRunningApps", "barShowOverflowBadge", "trayUseInlineExpansion"];
        for (var i = 0; i < keys.length; i++) {
            if (widget[keys[i]] !== undefined)
                result[keys[i]] = widget[keys[i]];