From f2ed0057bf9aa8dcc5752b2f0c2c74a5ac1d8c37 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Fri, 15 Aug 2025 22:08:57 +0700 Subject: [PATCH] bar: unify resource usage popups --- .../quickshell/ii/modules/bar/Resource.qml | 73 --------- .../ii/modules/bar/ResourcePopup.qml | 65 -------- .../quickshell/ii/modules/bar/Resources.qml | 34 +---- .../ii/modules/bar/ResourcesPopup.qml | 143 ++++++++++++++++++ 4 files changed, 148 insertions(+), 167 deletions(-) delete mode 100644 .config/quickshell/ii/modules/bar/ResourcePopup.qml create mode 100644 .config/quickshell/ii/modules/bar/ResourcesPopup.qml diff --git a/.config/quickshell/ii/modules/bar/Resource.qml b/.config/quickshell/ii/modules/bar/Resource.qml index 87b1c751c..acb900ac0 100644 --- a/.config/quickshell/ii/modules/bar/Resource.qml +++ b/.config/quickshell/ii/modules/bar/Resource.qml @@ -10,26 +10,12 @@ Item { id: root required property string iconName required property double percentage - property var tooltipData: [ - { - icon: "info", - label: "System resource", - value: "" - } - ] - property var tooltipHeaderIcon - property var tooltipHeaderText property bool shown: true clip: true visible: width > 0 && height > 0 implicitWidth: resourceRowLayout.x < 0 ? 0 : resourceRowLayout.implicitWidth implicitHeight: Appearance.sizes.barHeight - // Helper function to format KB to GB - function formatKB(kb) { - return (kb / (1024 * 1024)).toFixed(1) + " GB"; - } - RowLayout { id: resourceRowLayout spacing: 2 @@ -96,65 +82,6 @@ Item { enabled: resourceRowLayout.x >= 0 && root.width > 0 && root.visible } - StyledPopup { - hoverTarget: mouseArea - - ColumnLayout { - id: columnLayout - anchors.centerIn: parent - spacing: 4 - - // Header - RowLayout { - id: header - spacing: 5 - - MaterialSymbol { - fill: 0 - font.weight: Font.Medium - text: root.tooltipHeaderIcon - iconSize: Appearance.font.pixelSize.large - color: Appearance.colors.colOnSurfaceVariant - } - - StyledText { - text: root.tooltipHeaderText - font { - weight: Font.Medium - pixelSize: Appearance.font.pixelSize.normal - } - color: Appearance.colors.colOnSurfaceVariant - } - } - - // Info rows - Repeater { - model: root.tooltipData - delegate: RowLayout { - spacing: 5 - Layout.fillWidth: true - - MaterialSymbol { - text: modelData.icon - color: Appearance.colors.colOnSurfaceVariant - iconSize: Appearance.font.pixelSize.large - } - StyledText { - text: modelData.label - color: Appearance.colors.colOnSurfaceVariant - } - StyledText { - Layout.fillWidth: true - horizontalAlignment: Text.AlignRight - visible: modelData.value !== "" - color: Appearance.colors.colOnSurfaceVariant - text: modelData.value - } - } - } - } - } - Behavior on implicitWidth { NumberAnimation { duration: Appearance.animation.elementMove.duration diff --git a/.config/quickshell/ii/modules/bar/ResourcePopup.qml b/.config/quickshell/ii/modules/bar/ResourcePopup.qml deleted file mode 100644 index 71fd02443..000000000 --- a/.config/quickshell/ii/modules/bar/ResourcePopup.qml +++ /dev/null @@ -1,65 +0,0 @@ -import qs -import qs.modules.common -import qs.modules.common.widgets -import qs.services -import QtQuick -import QtQuick.Layouts - -StyledPopup { - hoverTarget: mouseArea - - ColumnLayout { - id: columnLayout - anchors.centerIn: parent - spacing: 4 - - // Header - RowLayout { - id: header - spacing: 5 - - MaterialSymbol { - fill: 0 - font.weight: Font.Medium - text: root.tooltipHeaderIcon - iconSize: Appearance.font.pixelSize.large - color: Appearance.colors.colOnSurfaceVariant - } - - StyledText { - text: root.tooltipHeaderText - font { - weight: Font.Medium - pixelSize: Appearance.font.pixelSize.normal - } - color: Appearance.colors.colOnSurfaceVariant - } - } - - // Info rows - Repeater { - model: root.tooltipData - delegate: RowLayout { - spacing: 5 - Layout.fillWidth: true - - MaterialSymbol { - text: modelData.icon - color: Appearance.colors.colOnSurfaceVariant - iconSize: Appearance.font.pixelSize.large - } - StyledText { - text: modelData.label - color: Appearance.colors.colOnSurfaceVariant - } - StyledText { - Layout.fillWidth: true - horizontalAlignment: Text.AlignRight - visible: modelData.value !== "" - color: Appearance.colors.colOnSurfaceVariant - text: modelData.value - } - } - } - } -} \ No newline at end of file diff --git a/.config/quickshell/ii/modules/bar/Resources.qml b/.config/quickshell/ii/modules/bar/Resources.qml index e5a7575d6..4f477acd2 100644 --- a/.config/quickshell/ii/modules/bar/Resources.qml +++ b/.config/quickshell/ii/modules/bar/Resources.qml @@ -5,12 +5,13 @@ import qs import QtQuick import QtQuick.Layouts -Item { +MouseArea { id: root property bool borderless: Config.options.bar.borderless property bool alwaysShowAllResources: false implicitWidth: rowLayout.implicitWidth + rowLayout.anchors.leftMargin + rowLayout.anchors.rightMargin implicitHeight: Appearance.sizes.barHeight + hoverEnabled: true RowLayout { id: rowLayout @@ -23,14 +24,6 @@ Item { Resource { iconName: "memory" percentage: ResourceUsage.memoryUsedPercentage - - tooltipHeaderIcon: "memory" - tooltipHeaderText: Translation.tr("Memory usage") - tooltipData: [ - { icon: "clock_loader_60", label: Translation.tr("Used:"), value: formatKB(ResourceUsage.memoryUsed) }, - { icon: "check_circle", label: Translation.tr("Free:"), value: formatKB(ResourceUsage.memoryFree) }, - { icon: "empty_dashboard", label: Translation.tr("Total:"), value: formatKB(ResourceUsage.memoryTotal) }, - ] } Resource { @@ -40,16 +33,6 @@ Item { (MprisController.activePlayer?.trackTitle == null) || root.alwaysShowAllResources Layout.leftMargin: shown ? 6 : 0 - - tooltipHeaderIcon: "swap_horiz" - tooltipHeaderText: Translation.tr("Swap usage") - tooltipData: ResourceUsage.swapTotal > 0 ? [ - { icon: "clock_loader_60", label: Translation.tr("Used:"), value: formatKB(ResourceUsage.swapUsed) }, - { icon: "check_circle", label: Translation.tr("Free:"), value: formatKB(ResourceUsage.swapFree) }, - { icon: "empty_dashboard", label: Translation.tr("Total:"), value: formatKB(ResourceUsage.swapTotal) }, - ] : [ - { icon: "swap_horiz", label: Translation.tr("Swap:"), value: Translation.tr("Not configured") } - ] } Resource { @@ -59,18 +42,11 @@ Item { !(MprisController.activePlayer?.trackTitle?.length > 0) || root.alwaysShowAllResources Layout.leftMargin: shown ? 6 : 0 - - tooltipHeaderIcon: "planner_review" - tooltipHeaderText: Translation.tr("CPU usage") - tooltipData: [ - { icon: "bolt", label: Translation.tr("Load:"), value: (ResourceUsage.cpuUsage > 0.8 ? - Translation.tr("High") : - ResourceUsage.cpuUsage > 0.4 ? Translation.tr("Medium") : Translation.tr("Low")) - + ` (${Math.round(ResourceUsage.cpuUsage * 100)}%)` - } - ] } } + ResourcesPopup { + hoverTarget: root + } } diff --git a/.config/quickshell/ii/modules/bar/ResourcesPopup.qml b/.config/quickshell/ii/modules/bar/ResourcesPopup.qml new file mode 100644 index 000000000..2c694de1e --- /dev/null +++ b/.config/quickshell/ii/modules/bar/ResourcesPopup.qml @@ -0,0 +1,143 @@ +import qs +import qs.modules.common +import qs.modules.common.widgets +import qs.services +import QtQuick +import QtQuick.Layouts +import Quickshell + +StyledPopup { + id: root + + // Helper function to format KB to GB + function formatKB(kb) { + return (kb / (1024 * 1024)).toFixed(1) + " GB"; + } + + component ResourceItem: RowLayout { + id: resourceItem + required property string icon + required property string label + required property string value + spacing: 4 + Layout.fillWidth: true + + MaterialSymbol { + text: resourceItem.icon + color: Appearance.colors.colOnSurfaceVariant + iconSize: Appearance.font.pixelSize.large + } + StyledText { + text: resourceItem.label + color: Appearance.colors.colOnSurfaceVariant + } + StyledText { + Layout.fillWidth: true + horizontalAlignment: Text.AlignRight + visible: resourceItem.value !== "" + color: Appearance.colors.colOnSurfaceVariant + text: resourceItem.value + } + } + + component ResourceHeaderItem: RowLayout { + id: headerItem + required property var icon + required property var label + spacing: 5 + + MaterialSymbol { + fill: 0 + font.weight: Font.Medium + text: headerItem.icon + iconSize: Appearance.font.pixelSize.large + color: Appearance.colors.colOnSurfaceVariant + } + + StyledText { + text: headerItem.label + font { + weight: Font.Medium + pixelSize: Appearance.font.pixelSize.normal + } + color: Appearance.colors.colOnSurfaceVariant + } + } + + RowLayout { + anchors.centerIn: parent + spacing: 12 + + ColumnLayout { + Layout.alignment: Qt.AlignTop + spacing: 8 + + ResourceHeaderItem { + icon: "memory" + label: "RAM" + } + ColumnLayout { + ResourceItem { + icon: "clock_loader_60" + label: Translation.tr("Used:") + value: formatKB(ResourceUsage.memoryUsed) + } + ResourceItem { + icon: "check_circle" + label: Translation.tr("Free:") + value: formatKB(ResourceUsage.memoryFree) + } + ResourceItem { + icon: "empty_dashboard" + label: Translation.tr("Total:") + value: formatKB(ResourceUsage.memoryTotal) + } + } + } + + ColumnLayout { + visible: ResourceUsage.swapTotal > 0 + Layout.alignment: Qt.AlignTop + spacing: 8 + + ResourceHeaderItem { + icon: "swap_horiz" + label: "Swap" + } + ColumnLayout { + ResourceItem { + icon: "clock_loader_60" + label: Translation.tr("Used:") + value: formatKB(ResourceUsage.swapUsed) + } + ResourceItem { + icon: "check_circle" + label: Translation.tr("Free:") + value: formatKB(ResourceUsage.swapFree) + } + ResourceItem { + icon: "empty_dashboard" + label: Translation.tr("Total:") + value: formatKB(ResourceUsage.swapTotal) + } + } + } + + ColumnLayout { + Layout.alignment: Qt.AlignTop + spacing: 8 + + ResourceHeaderItem { + icon: "planner_review" + label: "CPU" + } + ColumnLayout { + ResourceItem { + icon: "bolt" + label: Translation.tr("Load:") + value: (ResourceUsage.cpuUsage > 0.8 ? Translation.tr("High") : ResourceUsage.cpuUsage > 0.4 ? Translation.tr("Medium") : Translation.tr("Low")) + ` (${Math.round(ResourceUsage.cpuUsage * 100)}%)` + } + } + } + } +}