From 93c674f3564f848c55212bc87a18755726254487 Mon Sep 17 00:00:00 2001 From: LemmyCook Date: Mon, 15 Sep 2025 23:06:06 -0400 Subject: [PATCH] SysMonitor: converted dual layout for vertical/horiz bar to a single grid layout --- Modules/Bar/Widgets/SystemMonitor.qml | 463 ++++++++++---------------- 1 file changed, 167 insertions(+), 296 deletions(-) diff --git a/Modules/Bar/Widgets/SystemMonitor.qml b/Modules/Bar/Widgets/SystemMonitor.qml index 37cdc42..7f07938 100644 --- a/Modules/Bar/Widgets/SystemMonitor.qml +++ b/Modules/Bar/Widgets/SystemMonitor.qml @@ -29,6 +29,7 @@ Rectangle { } readonly property string barPosition: Settings.data.bar.position + readonly property bool isVertical: barPosition === "left" || barPosition === "right" readonly property bool showCpuUsage: (widgetSettings.showCpuUsage !== undefined) ? widgetSettings.showCpuUsage : widgetMetadata.showCpuUsage readonly property bool showCpuTemp: (widgetSettings.showCpuTemp !== undefined) ? widgetSettings.showCpuTemp : widgetMetadata.showCpuTemp @@ -38,8 +39,8 @@ Rectangle { readonly property bool showDiskUsage: (widgetSettings.showDiskUsage !== undefined) ? widgetSettings.showDiskUsage : widgetMetadata.showDiskUsage anchors.centerIn: parent - implicitWidth: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : Math.round(horizontalLayout.implicitWidth + Style.marginM * 2 * scaling) - implicitHeight: (barPosition === "left" || barPosition === "right") ? Math.round(verticalLayout.implicitHeight + Style.marginM * 2 * scaling) : Math.round(Style.capsuleHeight * scaling) + implicitWidth: isVertical ? Math.round(Style.capsuleHeight * scaling) : Math.round(mainGrid.implicitWidth + Style.marginM * 2 * scaling) + implicitHeight: isVertical ? Math.round(mainGrid.implicitHeight + Style.marginM * 2 * scaling) : Math.round(Style.capsuleHeight * scaling) radius: Math.round(Style.radiusM * scaling) color: Color.mSurfaceVariant @@ -63,384 +64,254 @@ Rectangle { return display + units[unitIndex] } - // Horizontal layout for top/bottom bars - RowLayout { - id: horizontalLayout + GridLayout { + id: mainGrid anchors.centerIn: parent - anchors.leftMargin: Style.marginM * scaling - anchors.rightMargin: Style.marginM * scaling - spacing: Style.marginXS * scaling - visible: barPosition === "top" || barPosition === "bottom" + + // 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) // CPU Usage Component Item { - Layout.preferredWidth: cpuUsageRow.implicitWidth + Layout.preferredWidth: cpuUsageContent.implicitWidth Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) - Layout.alignment: Qt.AlignVCenter + Layout.alignment: isVertical ? Qt.AlignHCenter : Qt.AlignVCenter visible: showCpuUsage - RowLayout { - id: cpuUsageRow + GridLayout { + id: cpuUsageContent anchors.centerIn: parent - spacing: Style.marginXXS * scaling + flow: isVertical ? GridLayout.TopToBottom : GridLayout.LeftToRight + rows: isVertical ? 2 : 1 + columns: isVertical ? 1 : 2 + 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: isVertical ? (Style.fontSizeXXS * scaling) : (Style.fontSizeXS * scaling) + 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: Style.fontSizeM * scaling - Layout.alignment: Qt.AlignVCenter - } - - NText { - text: `${SystemStatService.cpuUsage}%` - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXS * scaling - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignVCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary + font.pointSize: isVertical ? (Style.fontSizeS * scaling) : (Style.fontSizeM * scaling) + Layout.alignment: Qt.AlignCenter + Layout.row: isVertical ? 1 : 0 + Layout.column: 0 } } } // CPU Temperature Component Item { - Layout.preferredWidth: cpuTempRow.implicitWidth + Layout.preferredWidth: cpuTempContent.implicitWidth Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) - Layout.alignment: Qt.AlignVCenter + Layout.alignment: isVertical ? Qt.AlignHCenter : Qt.AlignVCenter visible: showCpuTemp - RowLayout { - id: cpuTempRow + GridLayout { + id: cpuTempContent anchors.centerIn: parent - spacing: Style.marginXXS * scaling + flow: isVertical ? GridLayout.TopToBottom : GridLayout.LeftToRight + rows: isVertical ? 2 : 1 + columns: isVertical ? 1 : 2 + rowSpacing: Style.marginXXS * scaling + columnSpacing: Style.marginXXS * scaling + + NText { + text: isVertical ? `${SystemStatService.cpuTemp}°` : `${SystemStatService.cpuTemp}°C` + font.family: Settings.data.ui.fontFixed + font.pointSize: isVertical ? (Style.fontSizeXXS * scaling) : (Style.fontSizeXS * scaling) + 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-temperature" - // Fire is so tall, we need to make it smaller - font.pointSize: Style.fontSizeS * scaling - Layout.alignment: Qt.AlignVCenter - } - - NText { - text: `${SystemStatService.cpuTemp}°C` - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXS * scaling - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignVCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary + font.pointSize: isVertical ? (Style.fontSizeXS * scaling) : (Style.fontSizeS * scaling) + Layout.alignment: Qt.AlignCenter + Layout.row: isVertical ? 1 : 0 + Layout.column: 0 } } } // Memory Usage Component Item { - Layout.preferredWidth: memoryUsageRow.implicitWidth + Layout.preferredWidth: memoryContent.implicitWidth Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) - Layout.alignment: Qt.AlignVCenter + Layout.alignment: isVertical ? Qt.AlignHCenter : Qt.AlignVCenter visible: showMemoryUsage - RowLayout { - id: memoryUsageRow + GridLayout { + id: memoryContent anchors.centerIn: parent - spacing: Style.marginXXS * scaling + flow: isVertical ? GridLayout.TopToBottom : GridLayout.LeftToRight + rows: isVertical ? 2 : 1 + columns: isVertical ? 1 : 2 + 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: isVertical ? (Style.fontSizeXXS * scaling) : (Style.fontSizeXS * scaling) + 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: Style.fontSizeM * scaling - Layout.alignment: Qt.AlignVCenter - } - - NText { - text: showMemoryAsPercent ? `${SystemStatService.memPercent}%` : `${SystemStatService.memGb}G` - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXS * scaling - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignVCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary + font.pointSize: isVertical ? (Style.fontSizeS * scaling) : (Style.fontSizeM * scaling) + Layout.alignment: Qt.AlignCenter + Layout.row: isVertical ? 1 : 0 + Layout.column: 0 } } } // Network Download Speed Component Item { - Layout.preferredWidth: networkDownloadRow.implicitWidth + Layout.preferredWidth: downloadContent.implicitWidth Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) - Layout.alignment: Qt.AlignVCenter + Layout.alignment: isVertical ? Qt.AlignHCenter : Qt.AlignVCenter visible: showNetworkStats - RowLayout { - id: networkDownloadRow + GridLayout { + id: downloadContent anchors.centerIn: parent - spacing: Style.marginXS * scaling + flow: isVertical ? GridLayout.TopToBottom : GridLayout.LeftToRight + rows: isVertical ? 2 : 1 + columns: isVertical ? 1 : 2 + rowSpacing: Style.marginXXS * scaling + columnSpacing: isVertical ? (Style.marginXXS * scaling) : (Style.marginXS * scaling) + + NText { + text: isVertical ? formatCompactSpeed(SystemStatService.rxSpeed) : SystemStatService.formatSpeed(SystemStatService.rxSpeed) + font.family: Settings.data.ui.fontFixed + font.pointSize: isVertical ? (Style.fontSizeXXS * scaling) : (Style.fontSizeXS * scaling) + 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: "download-speed" - font.pointSize: Style.fontSizeM * scaling - Layout.alignment: Qt.AlignVCenter - } - - NText { - text: SystemStatService.formatSpeed(SystemStatService.rxSpeed) - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXS * scaling - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignVCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary + font.pointSize: isVertical ? (Style.fontSizeS * scaling) : (Style.fontSizeM * scaling) + Layout.alignment: Qt.AlignCenter + Layout.row: isVertical ? 1 : 0 + Layout.column: 0 } } } // Network Upload Speed Component Item { - Layout.preferredWidth: networkUploadRow.implicitWidth + Layout.preferredWidth: uploadContent.implicitWidth Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) - Layout.alignment: Qt.AlignVCenter + Layout.alignment: isVertical ? Qt.AlignHCenter : Qt.AlignVCenter visible: showNetworkStats - RowLayout { - id: networkUploadRow + GridLayout { + id: uploadContent anchors.centerIn: parent - spacing: Style.marginXS * scaling + flow: isVertical ? GridLayout.TopToBottom : GridLayout.LeftToRight + rows: isVertical ? 2 : 1 + columns: isVertical ? 1 : 2 + rowSpacing: Style.marginXXS * scaling + columnSpacing: isVertical ? (Style.marginXXS * scaling) : (Style.marginXS * scaling) + + NText { + text: isVertical ? formatCompactSpeed(SystemStatService.txSpeed) : SystemStatService.formatSpeed(SystemStatService.txSpeed) + font.family: Settings.data.ui.fontFixed + font.pointSize: isVertical ? (Style.fontSizeXXS * scaling) : (Style.fontSizeXS * scaling) + 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: "upload-speed" - font.pointSize: Style.fontSizeM * scaling - Layout.alignment: Qt.AlignVCenter - } - - NText { - text: SystemStatService.formatSpeed(SystemStatService.txSpeed) - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXS * scaling - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignVCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary + font.pointSize: isVertical ? (Style.fontSizeS * scaling) : (Style.fontSizeM * scaling) + Layout.alignment: Qt.AlignCenter + Layout.row: isVertical ? 1 : 0 + Layout.column: 0 } } } // Disk Usage Component (primary drive) Item { - Layout.preferredWidth: diskUsageRow.implicitWidth + Layout.preferredWidth: diskContent.implicitWidth Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) - Layout.alignment: Qt.AlignVCenter + Layout.alignment: isVertical ? Qt.AlignHCenter : Qt.AlignVCenter visible: showDiskUsage - RowLayout { - id: diskUsageRow + GridLayout { + id: diskContent anchors.centerIn: parent - spacing: Style.marginXS * scaling - - NIcon { - icon: "storage" - font.pointSize: Style.fontSizeM * scaling - Layout.alignment: Qt.AlignVCenter - } + flow: isVertical ? GridLayout.TopToBottom : GridLayout.LeftToRight + rows: isVertical ? 2 : 1 + columns: isVertical ? 1 : 2 + rowSpacing: Style.marginXXS * scaling + columnSpacing: isVertical ? (Style.marginXXS * scaling) : (Style.marginXS * scaling) NText { text: `${SystemStatService.diskPercent}%` font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXS * scaling + font.pointSize: isVertical ? (Style.fontSizeXXS * scaling) : (Style.fontSizeXS * scaling) font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignVCenter + Layout.alignment: Qt.AlignCenter + horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter color: Color.mPrimary - } - } - } - } - - // Vertical layout for left/right bars - ColumnLayout { - id: verticalLayout - anchors.centerIn: parent - anchors.topMargin: Style.marginS * scaling - anchors.bottomMargin: Style.marginS * scaling - width: Math.round(28 * scaling) - spacing: Style.marginS * scaling - visible: barPosition === "left" || barPosition === "right" - - // CPU Usage Component - Item { - Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) - Layout.preferredWidth: Math.round(28 * scaling) - Layout.alignment: Qt.AlignHCenter - visible: showCpuUsage - - Column { - id: cpuUsageRowVertical - anchors.centerIn: parent - spacing: Style.marginXXS * scaling - - NText { - text: `${Math.round(SystemStatService.cpuUsage)}%` - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXXS * scaling - font.weight: Style.fontWeightMedium - anchors.horizontalCenter: parent.horizontalCenter - horizontalAlignment: Text.AlignHCenter - color: Color.mPrimary - } - - NIcon { - icon: "cpu-usage" - font.pointSize: Style.fontSizeS * scaling - anchors.horizontalCenter: parent.horizontalCenter - } - } - } - - // CPU Temperature Component - Item { - Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) - Layout.preferredWidth: Math.round(28 * scaling) - Layout.alignment: Qt.AlignHCenter - visible: showCpuTemp - - Column { - id: cpuTempRowVertical - anchors.centerIn: parent - spacing: Style.marginXXS * scaling - - NText { - text: `${SystemStatService.cpuTemp}°` - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXXS * scaling - font.weight: Style.fontWeightMedium - anchors.horizontalCenter: parent.horizontalCenter - horizontalAlignment: Text.AlignHCenter - color: Color.mPrimary - } - - NIcon { - icon: "cpu-temperature" - // Fire is so tall, we need to make it smaller - font.pointSize: Style.fontSizeXS * scaling - anchors.horizontalCenter: parent.horizontalCenter - } - } - } - - // Memory Usage Component - Item { - Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) - Layout.preferredWidth: Math.round(28 * scaling) - Layout.alignment: Qt.AlignHCenter - visible: showMemoryUsage - - Column { - id: memoryUsageRowVertical - anchors.centerIn: parent - spacing: Style.marginXXS * scaling - - NText { - text: showMemoryAsPercent ? `${SystemStatService.memPercent}%` : `${Math.round(SystemStatService.memGb)}G` - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXXS * scaling - font.weight: Style.fontWeightMedium - anchors.horizontalCenter: parent.horizontalCenter - horizontalAlignment: Text.AlignHCenter - color: Color.mPrimary - } - - NIcon { - icon: "memory" - font.pointSize: Style.fontSizeS * scaling - anchors.horizontalCenter: parent.horizontalCenter - } - } - } - - // Network Download Speed Component - Item { - Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) - Layout.preferredWidth: Math.round(28 * scaling) - Layout.alignment: Qt.AlignHCenter - visible: showNetworkStats - - Column { - id: networkDownloadRowVertical - anchors.centerIn: parent - spacing: Style.marginXXS * scaling - - NText { - anchors.horizontalCenter: parent.horizontalCenter - horizontalAlignment: Text.AlignHCenter - text: formatCompactSpeed(SystemStatService.rxSpeed) - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXXS * scaling - font.weight: Style.fontWeightMedium - color: Color.mPrimary - } - - NIcon { - icon: "download-speed" - font.pointSize: Style.fontSizeS * scaling - anchors.horizontalCenter: parent.horizontalCenter - } - } - } - - // Network Upload Speed Component - Item { - Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) - Layout.preferredWidth: Math.round(28 * scaling) - Layout.alignment: Qt.AlignHCenter - visible: showNetworkStats - - Column { - id: networkUploadRowVertical - anchors.centerIn: parent - spacing: Style.marginXXS * scaling - - NText { - anchors.horizontalCenter: parent.horizontalCenter - horizontalAlignment: Text.AlignHCenter - text: formatCompactSpeed(SystemStatService.txSpeed) - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXXS * scaling - font.weight: Style.fontWeightMedium - color: Color.mPrimary - } - - NIcon { - icon: "upload-speed" - font.pointSize: Style.fontSizeS * scaling - anchors.horizontalCenter: parent.horizontalCenter - } - } - } - - // Disk Usage Component (primary drive) - Item { - Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) - Layout.preferredWidth: Math.round(28 * scaling) - Layout.alignment: Qt.AlignHCenter - visible: showDiskUsage - - ColumnLayout { - id: diskUsageRowVertical - anchors.centerIn: parent - spacing: Style.marginXXS * scaling - - NText { - text: `${SystemStatService.diskPercent}%` - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXXS * scaling - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignHCenter - horizontalAlignment: Text.AlignHCenter - color: Color.mPrimary + Layout.row: isVertical ? 0 : 0 + Layout.column: isVertical ? 0 : 1 } NIcon { icon: "storage" - font.pointSize: Style.fontSizeS * scaling - Layout.alignment: Qt.AlignHCenter + font.pointSize: isVertical ? (Style.fontSizeS * scaling) : (Style.fontSizeM * scaling) + Layout.alignment: Qt.AlignCenter + Layout.row: isVertical ? 1 : 0 + Layout.column: 0 } } }