From 46174d1934370b2f4a7da43a3dbc0289c14a5a2d Mon Sep 17 00:00:00 2001 From: Thanh Minh <112760114+tmih06@users.noreply.github.com> Date: Thu, 19 Feb 2026 18:53:22 +0700 Subject: dashboard/performance: new design, configurable, controlcenter support (#975) * feat(dashboard): add configurable performance resources - Add config options to show/hide Battery, GPU, CPU, Memory, Storage - Make dashboard responsive based on number of visible resources - Scale resource sizes and spacing dynamically for 3, 4, or 5 items - Battery shows charge status and time remaining/to full - Each resource can be individually toggled via config * fix(dashboard): add dynamic right margin for last visible resource Ensures the rightmost resource always has proper margin to prevent content from being cut off at the edge * fix(performance): comment out duplicated value2 properties for memory and storage resources * controlcenter: add settings for dashboard * feat: handle readonly properties and re-usable codes * Feature/performance tab rework (#5) * dashboard/performance: rework tab with card-based grid layout - Replace circular arc meters with card-based grid layout - CPU/GPU cards show hardware name, usage and temperature with horizontal bars - Memory card with 3/4 arc indicator and used/total at bottom - Storage card shows physical disks from lsblk with aggregated partition usage - Add cpuName, gpuName, cpuFreq, cpuMaxFreq, disks properties to SystemUsage - Clean hardware names (remove Intel/AMD/NVIDIA prefixes, TM/R symbols) * dashboard/performance: new hero card design * dashboard/performance: update storage indicators to be reponsive to the physical disks count * dashboard/performance: fix the overlay bounding issue * dashboard/perfromance: refactor code * dashboard/performance: add battery gauge * dashboard/performance: correct battery icon * dashboard/performance: configurable battery * dashboard/performance: update layout * dashboard/performance: move the "Usage" text on top and smaller the font size * dashboard/performance: add a lot of configurations * dashboard/performance: add network metrics * fix: issue with hot reload * chore: update default vaule for mainValueSpacing to 0 * chore: group settings into collapasible sections * chore: making GPU & Battery toggle not showing if not found * chore: fix network widget spacing & text * chore: remove old disk bars configs, add update interval * chore: remove old & unused value, functions * chore: network graph update smoothly when data points change * chore: refactor settings - de-flood settings, most of the font & size setting now follow the global Appearance config - Most of sliders are not needed anymore, only keep the update interval slider - clean up * chore: remove readonly properties from the controlcenter/dashboard. * chore: minor fix * fix: fix warning about onPercChange() * fix: network metrics negative number * fix: add minimal height & width, placeholder for none toggled * fix: network graph move smoothly (#6) * fix: network graph move smoothly * clean up * fix: graph animation even more smooth * fix: padding issue * chore: network icons short description * fix --------- Co-authored-by: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> --- modules/controlcenter/PaneRegistry.qml | 6 + modules/controlcenter/Panes.qml | 1 + .../components/ConnectedButtonGroup.qml | 108 ++++++++++++++++++ .../controlcenter/components/ReadonlySlider.qml | 67 +++++++++++ modules/controlcenter/dashboard/DashboardPane.qml | 123 +++++++++++++++++++++ modules/controlcenter/dashboard/GeneralSection.qml | 81 ++++++++++++++ .../controlcenter/dashboard/PerformanceSection.qml | 85 ++++++++++++++ .../controlcenter/taskbar/ConnectedButtonGroup.qml | 108 ------------------ 8 files changed, 471 insertions(+), 108 deletions(-) create mode 100644 modules/controlcenter/components/ConnectedButtonGroup.qml create mode 100644 modules/controlcenter/components/ReadonlySlider.qml create mode 100644 modules/controlcenter/dashboard/DashboardPane.qml create mode 100644 modules/controlcenter/dashboard/GeneralSection.qml create mode 100644 modules/controlcenter/dashboard/PerformanceSection.qml delete mode 100644 modules/controlcenter/taskbar/ConnectedButtonGroup.qml (limited to 'modules/controlcenter') diff --git a/modules/controlcenter/PaneRegistry.qml b/modules/controlcenter/PaneRegistry.qml index c2a0f38..ca48551 100644 --- a/modules/controlcenter/PaneRegistry.qml +++ b/modules/controlcenter/PaneRegistry.qml @@ -41,6 +41,12 @@ QtObject { readonly property string label: "launcher" readonly property string icon: "apps" readonly property string component: "launcher/LauncherPane.qml" + }, + QtObject { + readonly property string id: "dashboard" + readonly property string label: "dashboard" + readonly property string icon: "dashboard" + readonly property string component: "dashboard/DashboardPane.qml" } ] diff --git a/modules/controlcenter/Panes.qml b/modules/controlcenter/Panes.qml index 4a4460c..ab2f808 100644 --- a/modules/controlcenter/Panes.qml +++ b/modules/controlcenter/Panes.qml @@ -6,6 +6,7 @@ import "audio" import "appearance" import "taskbar" import "launcher" +import "dashboard" import qs.components import qs.services import qs.config diff --git a/modules/controlcenter/components/ConnectedButtonGroup.qml b/modules/controlcenter/components/ConnectedButtonGroup.qml new file mode 100644 index 0000000..01cd612 --- /dev/null +++ b/modules/controlcenter/components/ConnectedButtonGroup.qml @@ -0,0 +1,108 @@ +import ".." +import qs.components +import qs.components.controls +import qs.components.effects +import qs.services +import qs.config +import QtQuick +import QtQuick.Layouts + +StyledRect { + id: root + + property var options: [] // Array of {label: string, propertyName: string, onToggled: function} + property var rootItem: null // The root item that contains the properties we want to bind to + property string title: "" // Optional title text + + Layout.fillWidth: true + implicitHeight: layout.implicitHeight + Appearance.padding.large * 2 + radius: Appearance.rounding.normal + color: Colours.layer(Colours.palette.m3surfaceContainer, 2) + clip: true + + Behavior on implicitHeight { + Anim {} + } + + ColumnLayout { + id: layout + + anchors.fill: parent + anchors.margins: Appearance.padding.large + spacing: Appearance.spacing.normal + + StyledText { + visible: root.title !== "" + text: root.title + font.pointSize: Appearance.font.size.normal + } + + RowLayout { + id: buttonRow + Layout.alignment: Qt.AlignHCenter + spacing: Appearance.spacing.small + + Repeater { + id: repeater + model: root.options + + delegate: TextButton { + id: button + required property int index + required property var modelData + + Layout.fillWidth: true + text: modelData.label + + property bool _checked: false + + checked: _checked + toggle: false + type: TextButton.Tonal + + // Create binding in Component.onCompleted + Component.onCompleted: { + if (root.rootItem && modelData.propertyName) { + const propName = modelData.propertyName; + const rootItem = root.rootItem; + _checked = Qt.binding(function () { + return rootItem[propName] ?? false; + }); + } + } + + // Match utilities Toggles radius styling + // Each button has full rounding (not connected) since they have spacing + radius: stateLayer.pressed ? Appearance.rounding.small / 2 : internalChecked ? Appearance.rounding.small : Appearance.rounding.normal + + // Match utilities Toggles inactive color + inactiveColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2) + + // Adjust width similar to utilities toggles + Layout.preferredWidth: implicitWidth + (stateLayer.pressed ? Appearance.padding.large : internalChecked ? Appearance.padding.smaller : 0) + + onClicked: { + if (modelData.onToggled && root.rootItem && modelData.propertyName) { + const currentValue = root.rootItem[modelData.propertyName] ?? false; + modelData.onToggled(!currentValue); + } + } + + Behavior on Layout.preferredWidth { + Anim { + duration: Appearance.anim.durations.expressiveFastSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial + } + } + + Behavior on radius { + Anim { + duration: Appearance.anim.durations.expressiveFastSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial + } + } + } + } + } + } +} diff --git a/modules/controlcenter/components/ReadonlySlider.qml b/modules/controlcenter/components/ReadonlySlider.qml new file mode 100644 index 0000000..169d636 --- /dev/null +++ b/modules/controlcenter/components/ReadonlySlider.qml @@ -0,0 +1,67 @@ +import ".." +import "../components" +import qs.components +import qs.components.controls +import qs.services +import qs.config +import QtQuick +import QtQuick.Layouts + +ColumnLayout { + id: root + + property string label: "" + property real value: 0 + property real from: 0 + property real to: 100 + property string suffix: "" + property bool readonly: false + + spacing: Appearance.spacing.small + + RowLayout { + Layout.fillWidth: true + spacing: Appearance.spacing.normal + + StyledText { + visible: root.label !== "" + text: root.label + font.pointSize: Appearance.font.size.normal + color: root.readonly ? Colours.palette.m3outline : Colours.palette.m3onSurface + } + + Item { + Layout.fillWidth: true + } + + MaterialIcon { + visible: root.readonly + text: "lock" + color: Colours.palette.m3outline + font.pointSize: Appearance.font.size.small + } + + StyledText { + text: Math.round(root.value) + (root.suffix !== "" ? " " + root.suffix : "") + font.pointSize: Appearance.font.size.normal + color: root.readonly ? Colours.palette.m3outline : Colours.palette.m3onSurface + } + } + + StyledRect { + Layout.fillWidth: true + implicitHeight: Appearance.padding.normal + radius: Appearance.rounding.full + color: Colours.layer(Colours.palette.m3surfaceContainerHighest, 1) + opacity: root.readonly ? 0.5 : 1.0 + + StyledRect { + anchors.left: parent.left + anchors.top: parent.top + anchors.bottom: parent.bottom + width: parent.width * ((root.value - root.from) / (root.to - root.from)) + radius: parent.radius + color: root.readonly ? Colours.palette.m3outline : Colours.palette.m3primary + } + } +} diff --git a/modules/controlcenter/dashboard/DashboardPane.qml b/modules/controlcenter/dashboard/DashboardPane.qml new file mode 100644 index 0000000..72e3e6e --- /dev/null +++ b/modules/controlcenter/dashboard/DashboardPane.qml @@ -0,0 +1,123 @@ +pragma ComponentBehavior: Bound + +import ".." +import "../components" +import qs.components +import qs.components.controls +import qs.components.effects +import qs.components.containers +import qs.services +import qs.config +import qs.utils +import Quickshell +import Quickshell.Widgets +import QtQuick +import QtQuick.Layouts + +Item { + id: root + + required property Session session + + // General Settings + property bool enabled: Config.dashboard.enabled ?? true + property bool showOnHover: Config.dashboard.showOnHover ?? true + property int updateInterval: Config.dashboard.updateInterval ?? 1000 + property int dragThreshold: Config.dashboard.dragThreshold ?? 50 + + // Performance Resources + property bool showBattery: Config.dashboard.performance.showBattery ?? false + property bool showGpu: Config.dashboard.performance.showGpu ?? true + property bool showCpu: Config.dashboard.performance.showCpu ?? true + property bool showMemory: Config.dashboard.performance.showMemory ?? true + property bool showStorage: Config.dashboard.performance.showStorage ?? true + property bool showNetwork: Config.dashboard.performance.showNetwork ?? true + + anchors.fill: parent + + function saveConfig() { + Config.dashboard.enabled = root.enabled; + Config.dashboard.showOnHover = root.showOnHover; + Config.dashboard.updateInterval = root.updateInterval; + Config.dashboard.dragThreshold = root.dragThreshold; + Config.dashboard.performance.showBattery = root.showBattery; + Config.dashboard.performance.showGpu = root.showGpu; + Config.dashboard.performance.showCpu = root.showCpu; + Config.dashboard.performance.showMemory = root.showMemory; + Config.dashboard.performance.showStorage = root.showStorage; + Config.dashboard.performance.showNetwork = root.showNetwork; + // Note: sizes properties are readonly and cannot be modified + Config.save(); + } + + ClippingRectangle { + id: dashboardClippingRect + anchors.fill: parent + anchors.margins: Appearance.padding.normal + anchors.leftMargin: 0 + anchors.rightMargin: Appearance.padding.normal + + radius: dashboardBorder.innerRadius + color: "transparent" + + Loader { + id: dashboardLoader + + anchors.fill: parent + anchors.margins: Appearance.padding.large + Appearance.padding.normal + anchors.leftMargin: Appearance.padding.large + anchors.rightMargin: Appearance.padding.large + + sourceComponent: dashboardContentComponent + } + } + + InnerBorder { + id: dashboardBorder + leftThickness: 0 + rightThickness: Appearance.padding.normal + } + + Component { + id: dashboardContentComponent + + StyledFlickable { + id: dashboardFlickable + flickableDirection: Flickable.VerticalFlick + contentHeight: dashboardLayout.height + + StyledScrollBar.vertical: StyledScrollBar { + flickable: dashboardFlickable + } + + ColumnLayout { + id: dashboardLayout + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + + spacing: Appearance.spacing.normal + + RowLayout { + spacing: Appearance.spacing.smaller + + StyledText { + text: qsTr("Dashboard") + font.pointSize: Appearance.font.size.large + font.weight: 500 + } + } + + // General Settings Section + GeneralSection { + rootItem: root + } + + // Performance Resources Section + PerformanceSection { + rootItem: root + } + } + } + } +} diff --git a/modules/controlcenter/dashboard/GeneralSection.qml b/modules/controlcenter/dashboard/GeneralSection.qml new file mode 100644 index 0000000..bf54e97 --- /dev/null +++ b/modules/controlcenter/dashboard/GeneralSection.qml @@ -0,0 +1,81 @@ +import ".." +import "../components" +import qs.components +import qs.components.controls +import qs.services +import qs.config +import QtQuick +import QtQuick.Layouts + +SectionContainer { + id: root + + required property var rootItem + + Layout.fillWidth: true + alignTop: true + + StyledText { + text: qsTr("General Settings") + font.pointSize: Appearance.font.size.normal + } + + SwitchRow { + label: qsTr("Enabled") + checked: root.rootItem.enabled + onToggled: checked => { + root.rootItem.enabled = checked; + root.rootItem.saveConfig(); + } + } + + SwitchRow { + label: qsTr("Show on hover") + checked: root.rootItem.showOnHover + onToggled: checked => { + root.rootItem.showOnHover = checked; + root.rootItem.saveConfig(); + } + } + + SectionContainer { + contentSpacing: Appearance.spacing.normal + + SliderInput { + Layout.fillWidth: true + + label: qsTr("Update interval") + value: root.rootItem.updateInterval + from: 100 + to: 10000 + stepSize: 100 + suffix: "ms" + validator: IntValidator { bottom: 100; top: 10000 } + formatValueFunction: (val) => Math.round(val).toString() + parseValueFunction: (text) => parseInt(text) + + onValueModified: (newValue) => { + root.rootItem.updateInterval = Math.round(newValue); + root.rootItem.saveConfig(); + } + } + + SliderInput { + Layout.fillWidth: true + + label: qsTr("Drag threshold") + value: root.rootItem.dragThreshold + from: 0 + to: 100 + suffix: "px" + validator: IntValidator { bottom: 0; top: 100 } + formatValueFunction: (val) => Math.round(val).toString() + parseValueFunction: (text) => parseInt(text) + + onValueModified: (newValue) => { + root.rootItem.dragThreshold = Math.round(newValue); + root.rootItem.saveConfig(); + } + } + } +} diff --git a/modules/controlcenter/dashboard/PerformanceSection.qml b/modules/controlcenter/dashboard/PerformanceSection.qml new file mode 100644 index 0000000..7e72782 --- /dev/null +++ b/modules/controlcenter/dashboard/PerformanceSection.qml @@ -0,0 +1,85 @@ +import ".." +import "../components" +import QtQuick +import QtQuick.Layouts +import Quickshell.Services.UPower +import qs.components +import qs.components.controls +import qs.config +import qs.services + +SectionContainer { + id: root + + required property var rootItem + // GPU toggle is hidden when gpuType is "NONE" (no GPU data available) + readonly property bool gpuAvailable: SystemUsage.gpuType !== "NONE" + // Battery toggle is hidden when no laptop battery is present + readonly property bool batteryAvailable: UPower.displayDevice.isLaptopBattery + + Layout.fillWidth: true + alignTop: true + + StyledText { + text: qsTr("Performance Resources") + font.pointSize: Appearance.font.size.normal + } + + ConnectedButtonGroup { + rootItem: root.rootItem + options: { + let opts = []; + if (root.batteryAvailable) + opts.push({ + "label": qsTr("Battery"), + "propertyName": "showBattery", + "onToggled": function(checked) { + root.rootItem.showBattery = checked; + root.rootItem.saveConfig(); + } + }); + + if (root.gpuAvailable) + opts.push({ + "label": qsTr("GPU"), + "propertyName": "showGpu", + "onToggled": function(checked) { + root.rootItem.showGpu = checked; + root.rootItem.saveConfig(); + } + }); + + opts.push({ + "label": qsTr("CPU"), + "propertyName": "showCpu", + "onToggled": function(checked) { + root.rootItem.showCpu = checked; + root.rootItem.saveConfig(); + } + }, { + "label": qsTr("Memory"), + "propertyName": "showMemory", + "onToggled": function(checked) { + root.rootItem.showMemory = checked; + root.rootItem.saveConfig(); + } + }, { + "label": qsTr("Storage"), + "propertyName": "showStorage", + "onToggled": function(checked) { + root.rootItem.showStorage = checked; + root.rootItem.saveConfig(); + } + }, { + "label": qsTr("Network"), + "propertyName": "showNetwork", + "onToggled": function(checked) { + root.rootItem.showNetwork = checked; + root.rootItem.saveConfig(); + } + }); + return opts; + } + } + +} diff --git a/modules/controlcenter/taskbar/ConnectedButtonGroup.qml b/modules/controlcenter/taskbar/ConnectedButtonGroup.qml deleted file mode 100644 index 01cd612..0000000 --- a/modules/controlcenter/taskbar/ConnectedButtonGroup.qml +++ /dev/null @@ -1,108 +0,0 @@ -import ".." -import qs.components -import qs.components.controls -import qs.components.effects -import qs.services -import qs.config -import QtQuick -import QtQuick.Layouts - -StyledRect { - id: root - - property var options: [] // Array of {label: string, propertyName: string, onToggled: function} - property var rootItem: null // The root item that contains the properties we want to bind to - property string title: "" // Optional title text - - Layout.fillWidth: true - implicitHeight: layout.implicitHeight + Appearance.padding.large * 2 - radius: Appearance.rounding.normal - color: Colours.layer(Colours.palette.m3surfaceContainer, 2) - clip: true - - Behavior on implicitHeight { - Anim {} - } - - ColumnLayout { - id: layout - - anchors.fill: parent - anchors.margins: Appearance.padding.large - spacing: Appearance.spacing.normal - - StyledText { - visible: root.title !== "" - text: root.title - font.pointSize: Appearance.font.size.normal - } - - RowLayout { - id: buttonRow - Layout.alignment: Qt.AlignHCenter - spacing: Appearance.spacing.small - - Repeater { - id: repeater - model: root.options - - delegate: TextButton { - id: button - required property int index - required property var modelData - - Layout.fillWidth: true - text: modelData.label - - property bool _checked: false - - checked: _checked - toggle: false - type: TextButton.Tonal - - // Create binding in Component.onCompleted - Component.onCompleted: { - if (root.rootItem && modelData.propertyName) { - const propName = modelData.propertyName; - const rootItem = root.rootItem; - _checked = Qt.binding(function () { - return rootItem[propName] ?? false; - }); - } - } - - // Match utilities Toggles radius styling - // Each button has full rounding (not connected) since they have spacing - radius: stateLayer.pressed ? Appearance.rounding.small / 2 : internalChecked ? Appearance.rounding.small : Appearance.rounding.normal - - // Match utilities Toggles inactive color - inactiveColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2) - - // Adjust width similar to utilities toggles - Layout.preferredWidth: implicitWidth + (stateLayer.pressed ? Appearance.padding.large : internalChecked ? Appearance.padding.smaller : 0) - - onClicked: { - if (modelData.onToggled && root.rootItem && modelData.propertyName) { - const currentValue = root.rootItem[modelData.propertyName] ?? false; - modelData.onToggled(!currentValue); - } - } - - Behavior on Layout.preferredWidth { - Anim { - duration: Appearance.anim.durations.expressiveFastSpatial - easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial - } - } - - Behavior on radius { - Anim { - duration: Appearance.anim.durations.expressiveFastSpatial - easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial - } - } - } - } - } - } -} -- cgit v1.2.3-freya