Shinonome/dots-hyprland
1
0
Fork 1
mirror of https://github.com/end-4/dots-hyprland.git synced 2026-06-05 14:59:27 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

bar: unify resource usage popups

Browse Source
This commit is contained in:
end-4
2025-08-15 22:08:57 +07:00
parent 661fcfd263
commit f2ed0057bf
4 changed files with 148 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/quickshell/ii/modules/bar/Resource.qml
-73
View File
@@ -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
.config/quickshell/ii/modules/bar/ResourcePopup.qml
-65
View File
@@ -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
}
}
}
}
}
.config/quickshell/ii/modules/bar/Resources.qml
+5 -29
View File
@@ -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
}
}
.config/quickshell/ii/modules/bar/ResourcesPopup.qml
+143
View File
@@ -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)}%)`
}
}
}
}
}