From a4b4caa2ce4a6f4bc897a54d51d55cba61fc18ac Mon Sep 17 00:00:00 2001 From: ItsLemmy Date: Sat, 27 Sep 2025 13:38:56 -0400 Subject: [PATCH] Bar SysMonitor: Implemented different sizing strategy to avoid unwanted shifting of items inside and outside the component. --- Modules/Bar/Widgets/SystemMonitor.qml | 233 ++++++++++++++------------ Services/SystemStatService.qml | 12 +- Widgets/NSlider.qml | 2 +- 3 files changed, 139 insertions(+), 108 deletions(-) diff --git a/Modules/Bar/Widgets/SystemMonitor.qml b/Modules/Bar/Widgets/SystemMonitor.qml index 2c14b242..e621ca96 100644 --- a/Modules/Bar/Widgets/SystemMonitor.qml +++ b/Modules/Bar/Widgets/SystemMonitor.qml @@ -39,12 +39,39 @@ Rectangle { readonly property bool showNetworkStats: (widgetSettings.showNetworkStats !== undefined) ? widgetSettings.showNetworkStats : widgetMetadata.showNetworkStats readonly property bool showDiskUsage: (widgetSettings.showDiskUsage !== undefined) ? widgetSettings.showDiskUsage : widgetMetadata.showDiskUsage + readonly property real iconSize: textSize * 1.4 readonly property real textSize: { var base = isVertical ? width * 0.82 : height return Math.max(1, compact ? base * 0.43 : base * 0.33) } - readonly property real iconSize: textSize * 1.25 + readonly property int percentTextWidth: Math.ceil(percentMetrics.tightBoundingRect.width + 2) + readonly property int tempTextWidth: Math.ceil(tempMetrics.tightBoundingRect.width + 2) + readonly property int memTextWidth: Math.ceil(memMetrics.tightBoundingRect.width + 2) + + TextMetrics { + id: percentMetrics + font.family: Settings.data.ui.fontFixed + font.weight: Style.fontWeightMedium + font.pointSize: textSize + text: "99%" // Use the longest possible string for measurement + } + + TextMetrics { + id: tempMetrics + font.family: Settings.data.ui.fontFixed + font.weight: Style.fontWeightMedium + font.pointSize: textSize + text: "99°" // Use the longest possible string for measurement + } + + TextMetrics { + id: memMetrics + font.family: Settings.data.ui.fontFixed + font.weight: Style.fontWeightMedium + font.pointSize: textSize + text: "99.9K" // Longest value part of network speed + } anchors.centerIn: parent implicitWidth: isVertical ? Math.round(Style.capsuleHeight * scaling) : Math.round(mainGrid.implicitWidth + Style.marginM * 2 * scaling) @@ -55,18 +82,15 @@ Rectangle { GridLayout { id: mainGrid anchors.centerIn: parent - - // Dynamic layout based on bar orientation flow: isVertical ? GridLayout.TopToBottom : GridLayout.LeftToRight rows: isVertical ? -1 : 1 columns: isVertical ? 1 : -1 - - rowSpacing: isVertical ? (Style.marginS * scaling) : (Style.marginXS * scaling) - columnSpacing: isVertical ? (Style.marginXS * scaling) : (Style.marginXS * scaling) + rowSpacing: isVertical ? (Style.marginM * scaling) : 0 + columnSpacing: isVertical ? 0 : (Style.marginM * scaling) // CPU Usage Component Item { - Layout.preferredWidth: cpuUsageContent.implicitWidth + Layout.preferredWidth: isVertical ? root.width : iconSize + percentTextWidth + (Style.marginXXS * scaling) Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) Layout.alignment: isVertical ? Qt.AlignHCenter : Qt.AlignVCenter visible: showCpuUsage @@ -80,19 +104,6 @@ Rectangle { rowSpacing: Style.marginXXS * scaling columnSpacing: Style.marginXXS * scaling - NText { - text: isVertical ? `${Math.round(SystemStatService.cpuUsage)}%` : `${SystemStatService.cpuUsage}%` - font.family: Settings.data.ui.fontFixed - font.pointSize: textSize - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignCenter - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary - Layout.row: isVertical ? 0 : 0 - Layout.column: isVertical ? 0 : 1 - } - NIcon { icon: "cpu-usage" font.pointSize: iconSize @@ -100,12 +111,27 @@ Rectangle { Layout.row: isVertical ? 1 : 0 Layout.column: 0 } + + NText { + text: `${Math.round(SystemStatService.cpuUsage)}%` + font.family: Settings.data.ui.fontFixed + font.pointSize: textSize + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignCenter + Layout.preferredWidth: isVertical ? -1 : percentTextWidth + horizontalAlignment: isVertical ? Text.AlignHCenter : Text.AlignRight + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + Layout.row: isVertical ? 0 : 0 + Layout.column: isVertical ? 0 : 1 + scale: isVertical ? Math.min(1.0, root.width / implicitWidth) : 1.0 + } } } // CPU Temperature Component Item { - Layout.preferredWidth: cpuTempContent.implicitWidth + Layout.preferredWidth: isVertical ? root.width : (iconSize + tempTextWidth) + (Style.marginXXS * scaling) Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) Layout.alignment: isVertical ? Qt.AlignHCenter : Qt.AlignVCenter visible: showCpuTemp @@ -119,22 +145,6 @@ Rectangle { rowSpacing: Style.marginXXS * scaling columnSpacing: Style.marginXXS * scaling - NText { - text: I18n.tr("system.cpu-temperature", { - "temp": SystemStatService.cpuTemp - }) - font.family: Settings.data.ui.fontFixed - font.pointSize: textSize - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignCenter - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary - scale: isVertical ? Math.min(1.0, cpuTempContent.width / implicitWidth) : 1.0 - Layout.row: isVertical ? 0 : 0 - Layout.column: isVertical ? 0 : 1 - } - NIcon { icon: "cpu-temperature" font.pointSize: iconSize @@ -142,12 +152,27 @@ Rectangle { Layout.row: isVertical ? 1 : 0 Layout.column: 0 } + + NText { + text: `${Math.round(SystemStatService.cpuTemp)}°` + font.family: Settings.data.ui.fontFixed + font.pointSize: textSize + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignCenter + Layout.preferredWidth: isVertical ? -1 : tempTextWidth + horizontalAlignment: isVertical ? Text.AlignHCenter : Text.AlignRight + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + Layout.row: isVertical ? 0 : 0 + Layout.column: isVertical ? 0 : 1 + scale: isVertical ? Math.min(1.0, root.width / implicitWidth) : 1.0 + } } } // Memory Usage Component Item { - Layout.preferredWidth: memoryContent.implicitWidth + Layout.preferredWidth: isVertical ? root.width : iconSize + (showMemoryAsPercent ? percentTextWidth : memTextWidth) + (Style.marginXXS * scaling) Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) Layout.alignment: isVertical ? Qt.AlignHCenter : Qt.AlignVCenter visible: showMemoryUsage @@ -161,25 +186,6 @@ Rectangle { rowSpacing: Style.marginXXS * scaling columnSpacing: Style.marginXXS * scaling - NText { - text: { - if (showMemoryAsPercent) { - return `${SystemStatService.memPercent}%` - } else { - return isVertical ? `${Math.round(SystemStatService.memGb)}G` : `${SystemStatService.memGb}G` - } - } - font.family: Settings.data.ui.fontFixed - font.pointSize: textSize - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignCenter - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary - Layout.row: isVertical ? 0 : 0 - Layout.column: isVertical ? 0 : 1 - } - NIcon { icon: "memory" font.pointSize: iconSize @@ -187,12 +193,27 @@ Rectangle { Layout.row: isVertical ? 1 : 0 Layout.column: 0 } + + NText { + text: showMemoryAsPercent ? `${Math.round(SystemStatService.memPercent)}%` : `${SystemStatService.memGb.toFixed(1)}G` + font.family: Settings.data.ui.fontFixed + font.pointSize: textSize + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignCenter + Layout.preferredWidth: isVertical ? -1 : (showMemoryAsPercent ? percentTextWidth : memTextWidth) + horizontalAlignment: isVertical ? Text.AlignHCenter : Text.AlignRight + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + Layout.row: isVertical ? 0 : 0 + Layout.column: isVertical ? 0 : 1 + scale: isVertical ? Math.min(1.0, root.width / implicitWidth) : 1.0 + } } } // Network Download Speed Component Item { - Layout.preferredWidth: downloadContent.implicitWidth + Layout.preferredWidth: isVertical ? root.width : iconSize + memTextWidth + (Style.marginXXS * scaling) Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) Layout.alignment: isVertical ? Qt.AlignHCenter : Qt.AlignVCenter visible: showNetworkStats @@ -204,20 +225,7 @@ Rectangle { rows: isVertical ? 2 : 1 columns: isVertical ? 1 : 2 rowSpacing: Style.marginXXS * scaling - columnSpacing: isVertical ? (Style.marginXXS * scaling) : (Style.marginXS * scaling) - - NText { - text: isVertical ? SystemStatService.formatCompactSpeed(SystemStatService.rxSpeed) : SystemStatService.formatSpeed(SystemStatService.rxSpeed) - font.family: Settings.data.ui.fontFixed - font.pointSize: textSize - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignCenter - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary - Layout.row: isVertical ? 0 : 0 - Layout.column: isVertical ? 0 : 1 - } + columnSpacing: Style.marginXXS * scaling NIcon { icon: "download-speed" @@ -226,12 +234,27 @@ Rectangle { Layout.row: isVertical ? 1 : 0 Layout.column: 0 } + + NText { + text: isVertical ? SystemStatService.formatCompactSpeed(SystemStatService.rxSpeed) : SystemStatService.formatSpeed(SystemStatService.rxSpeed) + font.family: Settings.data.ui.fontFixed + font.pointSize: textSize + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignCenter + Layout.preferredWidth: isVertical ? -1 : memTextWidth + horizontalAlignment: isVertical ? Text.AlignHCenter : Text.AlignRight + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + Layout.row: isVertical ? 0 : 0 + Layout.column: isVertical ? 0 : 1 + scale: isVertical ? Math.min(1.0, root.width / implicitWidth) : 1.0 + } } } // Network Upload Speed Component Item { - Layout.preferredWidth: uploadContent.implicitWidth + Layout.preferredWidth: isVertical ? root.width : iconSize + memTextWidth + (Style.marginXXS * scaling) Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) Layout.alignment: isVertical ? Qt.AlignHCenter : Qt.AlignVCenter visible: showNetworkStats @@ -243,20 +266,7 @@ Rectangle { rows: isVertical ? 2 : 1 columns: isVertical ? 1 : 2 rowSpacing: Style.marginXXS * scaling - columnSpacing: isVertical ? (Style.marginXXS * scaling) : (Style.marginXS * scaling) - - NText { - text: isVertical ? SystemStatService.formatCompactSpeed(SystemStatService.txSpeed) : SystemStatService.formatSpeed(SystemStatService.txSpeed) - font.family: Settings.data.ui.fontFixed - font.pointSize: textSize - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignCenter - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary - Layout.row: isVertical ? 0 : 0 - Layout.column: isVertical ? 0 : 1 - } + columnSpacing: Style.marginXXS * scaling NIcon { icon: "upload-speed" @@ -265,12 +275,27 @@ Rectangle { Layout.row: isVertical ? 1 : 0 Layout.column: 0 } + + NText { + text: isVertical ? SystemStatService.formatCompactSpeed(SystemStatService.txSpeed) : SystemStatService.formatSpeed(SystemStatService.txSpeed) + font.family: Settings.data.ui.fontFixed + font.pointSize: textSize + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignCenter + Layout.preferredWidth: isVertical ? -1 : memTextWidth + horizontalAlignment: isVertical ? Text.AlignHCenter : Text.AlignRight + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + Layout.row: isVertical ? 0 : 0 + Layout.column: isVertical ? 0 : 1 + scale: isVertical ? Math.min(1.0, root.width / implicitWidth) : 1.0 + } } } // Disk Usage Component (primary drive) Item { - Layout.preferredWidth: diskContent.implicitWidth + Layout.preferredWidth: isVertical ? root.width : iconSize + percentTextWidth + (Style.marginXXS * scaling) Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) Layout.alignment: isVertical ? Qt.AlignHCenter : Qt.AlignVCenter visible: showDiskUsage @@ -282,22 +307,7 @@ Rectangle { rows: isVertical ? 2 : 1 columns: isVertical ? 1 : 2 rowSpacing: Style.marginXXS * scaling - columnSpacing: isVertical ? (Style.marginXXS * scaling) : (Style.marginXS * scaling) - - NText { - text: I18n.tr("system.disk-usage", { - "percent": SystemStatService.diskPercent - }) - font.family: Settings.data.ui.fontFixed - font.pointSize: textSize - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignCenter - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary - Layout.row: isVertical ? 0 : 0 - Layout.column: isVertical ? 0 : 1 - } + columnSpacing: Style.marginXXS * scaling NIcon { icon: "storage" @@ -306,6 +316,21 @@ Rectangle { Layout.row: isVertical ? 1 : 0 Layout.column: 0 } + + NText { + text: `${SystemStatService.diskPercent}%` + font.family: Settings.data.ui.fontFixed + font.pointSize: textSize + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignCenter + Layout.preferredWidth: isVertical ? undefine : percentTextWidth + horizontalAlignment: isVertical ? Text.AlignHCenter : Text.AlignRight + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + Layout.row: isVertical ? 0 : 0 + Layout.column: isVertical ? 0 : 1 + scale: isVertical ? Math.min(1.0, root.width / implicitWidth) : 1.0 + } } } } diff --git a/Services/SystemStatService.qml b/Services/SystemStatService.qml index 7a87e5c9..9692c1ee 100644 --- a/Services/SystemStatService.qml +++ b/Services/SystemStatService.qml @@ -325,14 +325,20 @@ Singleton { // Helper function to format network speeds function formatSpeed(bytesPerSecond) { if (bytesPerSecond < 1024 * 1024) { - return (bytesPerSecond / 1024).toFixed(1) + "KB/s" + const kb = bytesPerSecond / 1024 + if (kb < 10) { + return kb.toFixed(1) + "KB" + } else { + return Math.round(kb) + "KB" + } } else if (bytesPerSecond < 1024 * 1024 * 1024) { - return (bytesPerSecond / (1024 * 1024)).toFixed(1) + "MB/s" + return (bytesPerSecond / (1024 * 1024)).toFixed(1) + "MB" } else { - return (bytesPerSecond / (1024 * 1024 * 1024)).toFixed(1) + "GB/s" + return (bytesPerSecond / (1024 * 1024 * 1024)).toFixed(1) + "GB" } } + // ------------------------------------------------------- // Compact speed formatter for vertical bar display function formatCompactSpeed(bytesPerSecond) { if (!bytesPerSecond || bytesPerSecond <= 0) diff --git a/Widgets/NSlider.qml b/Widgets/NSlider.qml index 1bd0fda4..eb6d007c 100644 --- a/Widgets/NSlider.qml +++ b/Widgets/NSlider.qml @@ -12,7 +12,7 @@ Slider { property real heightRatio: 0.7 readonly property real knobDiameter: Math.round((Style.baseWidgetSize * heightRatio * scaling) / 2) * 2 - readonly property real trackHeight: Math.round((knobDiameter * 0.4) /2) * 2 + readonly property real trackHeight: Math.round((knobDiameter * 0.4) / 2) * 2 readonly property real cutoutExtra: Math.round((Style.baseWidgetSize * 0.1 * scaling) / 2) * 2 padding: cutoutExtra / 2