From 16bd4b41dca585271f242b34138669ef37f6c043 Mon Sep 17 00:00:00 2001 From: LemmyCook Date: Mon, 8 Sep 2025 23:32:35 -0400 Subject: [PATCH] Icons: ArchUpdater, LockScreen, PowerMenu, BT Device List --- Modules/ArchUpdaterPanel/ArchUpdaterPanel.qml | 10 +- Modules/Bar/Widgets/SystemMonitor.qml | 196 ++++++++++-------- .../BluetoothPanel/BluetoothDevicesList.qml | 2 +- Modules/LockScreen/LockScreen.qml | 34 +-- Modules/PowerPanel/PowerPanel.qml | 14 +- Modules/WiFiPanel/WiFiPanel.qml | 2 +- Services/BatteryService.qml | 2 +- Widgets/NButton.qml | 41 ++-- Widgets/NCircleStat.qml | 13 +- Widgets/NIcon.qml | 12 +- 10 files changed, 187 insertions(+), 139 deletions(-) diff --git a/Modules/ArchUpdaterPanel/ArchUpdaterPanel.qml b/Modules/ArchUpdaterPanel/ArchUpdaterPanel.qml index b1d1443..f8a65ce 100644 --- a/Modules/ArchUpdaterPanel/ArchUpdaterPanel.qml +++ b/Modules/ArchUpdaterPanel/ArchUpdaterPanel.qml @@ -28,7 +28,7 @@ NPanel { spacing: Style.marginM * scaling NIcon { - icon: "system_update_alt" + icon: "box" font.pointSize: Style.fontSizeXXL * scaling color: Color.mPrimary } @@ -103,7 +103,7 @@ NPanel { } // Spacer NIcon { - icon: "hourglass_empty" + icon: "hourglass" font.pointSize: Style.fontSizeXXXL * scaling color: Color.mPrimary Layout.alignment: Qt.AlignHCenter @@ -181,7 +181,7 @@ NPanel { spacing: Style.marginM * scaling NIcon { - icon: "package" + icon: "box" font.pointSize: Style.fontSizeXXXL * scaling color: Color.mError Layout.alignment: Qt.AlignHCenter @@ -219,7 +219,7 @@ NPanel { spacing: Style.marginM * scaling NIcon { - icon: "exclamation" + icon: "exclamation-triangle" font.pointSize: Style.fontSizeXXXL * scaling color: Color.mError Layout.alignment: Qt.AlignHCenter @@ -270,7 +270,7 @@ NPanel { spacing: Style.marginM * scaling NIcon { - icon: "exclamation" + icon: "exclamation-triangle" font.pointSize: Style.fontSizeXXXL * scaling color: Color.mError Layout.alignment: Qt.AlignHCenter diff --git a/Modules/Bar/Widgets/SystemMonitor.qml b/Modules/Bar/Widgets/SystemMonitor.qml index b89a391..9641998 100644 --- a/Modules/Bar/Widgets/SystemMonitor.qml +++ b/Modules/Bar/Widgets/SystemMonitor.qml @@ -52,128 +52,158 @@ RowLayout { RowLayout { id: mainLayout - anchors.fill: parent - anchors.leftMargin: Style.marginS * scaling - anchors.rightMargin: Style.marginS * scaling + anchors.centerIn: parent // Better centering than margins + width: parent.width - Style.marginM * scaling * 2 spacing: Style.marginS * scaling // CPU Usage Component - RowLayout { - id: cpuUsageLayout - spacing: Style.marginXS * scaling + Item { + Layout.preferredWidth: cpuUsageRow.implicitWidth + Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) Layout.alignment: Qt.AlignVCenter visible: showCpuUsage - NIcon { - icon: "speedometer2" - font.pointSize: Style.fontSizeM * scaling - Layout.alignment: Qt.AlignVCenter - } + RowLayout { + id: cpuUsageRow + anchors.centerIn: parent + spacing: Style.marginXS * scaling - NText { - text: `${SystemStatService.cpuUsage}%` - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeS * scaling - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignVCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary + NIcon { + icon: "speedometer2" + font.pointSize: Style.fontSizeM * scaling + Layout.alignment: Qt.AlignVCenter + } + + NText { + text: `${SystemStatService.cpuUsage}%` + font.family: Settings.data.ui.fontFixed + font.pointSize: Style.fontSizeS * scaling + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignVCenter + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + } } } // CPU Temperature Component - RowLayout { - id: cpuTempLayout - spacing: Style.marginXS * scaling + Item { + Layout.preferredWidth: cpuTempRow.implicitWidth + Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) Layout.alignment: Qt.AlignVCenter visible: showCpuTemp - NIcon { - icon: "fire" - font.pointSize: Style.fontSizeM * scaling - Layout.alignment: Qt.AlignVCenter - } + RowLayout { + id: cpuTempRow + anchors.centerIn: parent + spacing: Style.marginXS * scaling - NText { - text: `${SystemStatService.cpuTemp}°C` - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeS * scaling - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignVCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary + NIcon { + icon: "fire" + // 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.fontSizeS * scaling + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignVCenter + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + } } } // Memory Usage Component - RowLayout { - id: memoryUsageLayout - spacing: Style.marginXS * scaling + Item { + Layout.preferredWidth: memoryUsageRow.implicitWidth + Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) Layout.alignment: Qt.AlignVCenter visible: showMemoryUsage - NIcon { - icon: "memory" - font.pointSize: Style.fontSizeM * scaling - Layout.alignment: Qt.AlignVCenter - } + RowLayout { + id: memoryUsageRow + anchors.centerIn: parent + spacing: Style.marginXS * scaling - NText { - text: showMemoryAsPercent ? `${SystemStatService.memPercent}%` : `${SystemStatService.memGb}G` - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeS * scaling - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignVCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary + 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.fontSizeS * scaling + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignVCenter + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + } } } // Network Download Speed Component - RowLayout { - id: networkDownloadLayout - spacing: Style.marginXS * scaling + Item { + Layout.preferredWidth: networkDownloadRow.implicitWidth + Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) Layout.alignment: Qt.AlignVCenter visible: showNetworkStats - NIcon { - icon: "download" - font.pointSize: Style.fontSizeM * scaling - Layout.alignment: Qt.AlignVCenter - } + RowLayout { + id: networkDownloadRow + anchors.centerIn: parent + spacing: Style.marginXS * scaling - NText { - text: SystemStatService.formatSpeed(SystemStatService.rxSpeed) - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeS * scaling - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignVCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary + NIcon { + icon: "cloud-arrow-down" + font.pointSize: Style.fontSizeM * scaling + Layout.alignment: Qt.AlignVCenter + } + + NText { + text: SystemStatService.formatSpeed(SystemStatService.rxSpeed) + font.family: Settings.data.ui.fontFixed + font.pointSize: Style.fontSizeS * scaling + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignVCenter + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + } } } // Network Upload Speed Component - RowLayout { - id: networkUploadLayout - spacing: Style.marginXS * scaling + Item { + Layout.preferredWidth: networkUploadRow.implicitWidth + Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) Layout.alignment: Qt.AlignVCenter visible: showNetworkStats - NIcon { - icon: "upload" - font.pointSize: Style.fontSizeM * scaling - Layout.alignment: Qt.AlignVCenter - } + RowLayout { + id: networkUploadRow + anchors.centerIn: parent + spacing: Style.marginXS * scaling - NText { - text: SystemStatService.formatSpeed(SystemStatService.txSpeed) - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeS * scaling - font.weight: Style.fontWeightMedium - Layout.alignment: Qt.AlignVCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary + NIcon { + icon: "cloud-arrow-up" + font.pointSize: Style.fontSizeM * scaling + Layout.alignment: Qt.AlignVCenter + } + + NText { + text: SystemStatService.formatSpeed(SystemStatService.txSpeed) + font.family: Settings.data.ui.fontFixed + font.pointSize: Style.fontSizeS * scaling + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignVCenter + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + } } } } diff --git a/Modules/BluetoothPanel/BluetoothDevicesList.qml b/Modules/BluetoothPanel/BluetoothDevicesList.qml index efa5c8f..05fd4d6 100644 --- a/Modules/BluetoothPanel/BluetoothDevicesList.qml +++ b/Modules/BluetoothPanel/BluetoothDevicesList.qml @@ -164,7 +164,7 @@ ColumnLayout { } return "Connect" } - icon: (isBusy ? "hourglass_full" : null) + icon: (isBusy ? "hourglass-split" : null) onClicked: { if (modelData.connected) { BluetoothService.disconnectDevice(modelData) diff --git a/Modules/LockScreen/LockScreen.qml b/Modules/LockScreen/LockScreen.qml index 25b69b1..2f96157 100644 --- a/Modules/LockScreen/LockScreen.qml +++ b/Modules/LockScreen/LockScreen.qml @@ -418,7 +418,7 @@ Loader { font.weight: Style.fontWeightBold } NIcon { - text: "keyboard_alt" + icon: "keyboard" font.pointSize: Style.fontSizeM * scaling color: Color.mOnSurface } @@ -428,7 +428,7 @@ Loader { spacing: Style.marginS * scaling visible: batteryIndicator.batteryVisible NIcon { - text: BatteryService.getIcon(batteryIndicator.percent, batteryIndicator.charging, + icon: BatteryService.getIcon(batteryIndicator.percent, batteryIndicator.charging, batteryIndicator.isReady) font.pointSize: Style.fontSizeM * scaling color: batteryIndicator.charging ? Color.mPrimary : Color.mOnSurface @@ -718,18 +718,20 @@ Loader { anchors.margins: 50 * scaling spacing: 20 * scaling + // Shutdown Rectangle { - Layout.preferredWidth: 60 * scaling - Layout.preferredHeight: 60 * scaling + Layout.preferredWidth: iconPower.implicitWidth + Style.marginXL * scaling + Layout.preferredHeight: Layout.preferredWidth radius: width * 0.5 color: powerButtonArea.containsMouse ? Color.mError : Qt.alpha(Color.mError, 0.2) border.color: Color.mError border.width: Math.max(1, Style.borderM * scaling) NIcon { + id: iconPower anchors.centerIn: parent - text: "power_settings_new" - font.pointSize: Style.fontSizeXL * scaling + icon: "power" + font.pointSize: Style.fontSizeXXXL * scaling color: powerButtonArea.containsMouse ? Color.mOnError : Color.mError } @@ -743,18 +745,20 @@ Loader { } } + // Reboot Rectangle { - Layout.preferredWidth: 60 * scaling - Layout.preferredHeight: 60 * scaling + Layout.preferredWidth: iconReboot.implicitWidth + Style.marginXL * scaling + Layout.preferredHeight: Layout.preferredWidth radius: width * 0.5 color: restartButtonArea.containsMouse ? Color.mPrimary : Qt.alpha(Color.mPrimary, Style.opacityLight) border.color: Color.mPrimary border.width: Math.max(1, Style.borderM * scaling) NIcon { + id: iconReboot anchors.centerIn: parent - text: "restart_alt" - font.pointSize: Style.fontSizeXL * scaling + icon: "arrow-repeat" + font.pointSize: Style.fontSizeXXXL * scaling color: restartButtonArea.containsMouse ? Color.mOnPrimary : Color.mPrimary } @@ -768,18 +772,20 @@ Loader { } } + // Suspend Rectangle { - Layout.preferredWidth: 60 * scaling - Layout.preferredHeight: 60 * scaling + Layout.preferredWidth: iconSuspend.implicitWidth + Style.marginXL * scaling + Layout.preferredHeight: Layout.preferredWidth radius: width * 0.5 color: suspendButtonArea.containsMouse ? Color.mSecondary : Qt.alpha(Color.mSecondary, 0.2) border.color: Color.mSecondary border.width: Math.max(1, Style.borderM * scaling) NIcon { + id: iconSuspend anchors.centerIn: parent - text: "bedtime" - font.pointSize: Style.fontSizeXL * scaling + icon: "pause-fill" + font.pointSize: Style.fontSizeXXXL * scaling color: suspendButtonArea.containsMouse ? Color.mOnSecondary : Color.mSecondary } diff --git a/Modules/PowerPanel/PowerPanel.qml b/Modules/PowerPanel/PowerPanel.qml index efb475e..f4f5758 100644 --- a/Modules/PowerPanel/PowerPanel.qml +++ b/Modules/PowerPanel/PowerPanel.qml @@ -29,27 +29,27 @@ NPanel { property int selectedIndex: 0 readonly property var powerOptions: [{ "action": "lock", - "icon": "lock_outline", + "icon": "lock", "title": "Lock", "subtitle": "Lock your session" }, { "action": "suspend", - "icon": "bedtime", + "icon": "pause-circle", "title": "Suspend", "subtitle": "Put the system to sleep" }, { "action": "reboot", - "icon": "refresh", + "icon": "arrow-repeat", "title": "Reboot", "subtitle": "Restart the system" }, { "action": "logout", - "icon": "exit_to_app", + "icon": "escape", "title": "Logout", "subtitle": "End your session" }, { "action": "shutdown", - "icon": "power_settings_new", + "icon": "power", "title": "Shutdown", "subtitle": "Turn off the system", "isShutdown": true @@ -276,7 +276,7 @@ NPanel { } NIconButton { - icon: timerActive ? "back_hand" : "close" + icon: timerActive ? "x-square" : "x-lg" tooltipText: timerActive ? "Cancel Timer" : "Close" Layout.alignment: Qt.AlignVCenter colorBg: timerActive ? Qt.alpha(Color.mError, 0.08) : Color.transparent @@ -360,7 +360,7 @@ NPanel { id: iconElement anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter - text: buttonRoot.icon + icon: buttonRoot.icon color: { if (buttonRoot.pending) return Color.mPrimary diff --git a/Modules/WiFiPanel/WiFiPanel.qml b/Modules/WiFiPanel/WiFiPanel.qml index e64d0f6..2a684c2 100644 --- a/Modules/WiFiPanel/WiFiPanel.qml +++ b/Modules/WiFiPanel/WiFiPanel.qml @@ -91,7 +91,7 @@ NPanel { spacing: Style.marginS * scaling NIcon { - icon: "error" + icon: "exclamation-triangle" font.pointSize: Style.fontSizeL * scaling color: Color.mError } diff --git a/Services/BatteryService.qml b/Services/BatteryService.qml index e68a239..4a4b606 100644 --- a/Services/BatteryService.qml +++ b/Services/BatteryService.qml @@ -11,7 +11,7 @@ Singleton { // Choose icon based on charge and charging state function getIcon(percent, charging, isReady) { if (!isReady) { - return "exclamation-diamond" + return "exclamation-triangle" } if (charging) { diff --git a/Widgets/NButton.qml b/Widgets/NButton.qml index 186d474..1bf82b0 100644 --- a/Widgets/NButton.qml +++ b/Widgets/NButton.qml @@ -80,26 +80,29 @@ Rectangle { spacing: Style.marginXS * scaling // Icon (optional) - NIcon { - Layout.alignment: Qt.AlignVCenter - visible: root.icon !== "" - icon: root.icon - font.pointSize: root.iconSize - color: { - if (!root.enabled) - return Color.mOnSurfaceVariant - if (root.outlined) { - if (root.pressed || root.hovered) - return root.backgroundColor - return root.backgroundColor - } - return root.textColor - } + Loader { + active: root.icon !== "" + sourceComponent: NIcon { + Layout.alignment: Qt.AlignVCenter - Behavior on color { - ColorAnimation { - duration: Style.animationFast - easing.type: Easing.OutCubic + icon: root.icon + font.pointSize: root.iconSize + color: { + if (!root.enabled) + return Color.mOnSurfaceVariant + if (root.outlined) { + if (root.pressed || root.hovered) + return root.backgroundColor + return root.backgroundColor + } + return root.textColor + } + + Behavior on color { + ColorAnimation { + duration: Style.animationFast + easing.type: Easing.OutCubic + } } } } diff --git a/Widgets/NCircleStat.qml b/Widgets/NCircleStat.qml index 997a99c..211acdf 100644 --- a/Widgets/NCircleStat.qml +++ b/Widgets/NCircleStat.qml @@ -88,20 +88,21 @@ Rectangle { // Tiny circular badge for the icon, positioned using anchors within the gauge Rectangle { id: iconBadge - width: 28 * scaling * contentScale + width: iconText.implicitWidth + Style.marginXS * scaling height: width radius: width / 2 - color: Color.mSurface + color: Color.mPrimary anchors.right: parent.right anchors.top: parent.top - anchors.rightMargin: -6 * scaling * contentScale - anchors.topMargin: Style.marginXXS * scaling * contentScale + anchors.rightMargin: Style.marginXXS * scaling * contentScale + anchors.topMargin: Style.marginXS * scaling * contentScale NIcon { + id: iconText anchors.centerIn: parent icon: root.icon - font.pointSize: Style.fontSizeLargeXL * scaling * contentScale - color: Color.mOnSurface + font.pointSize: Style.fontSizeS * scaling * contentScale + color: Color.mOnPrimary horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } diff --git a/Widgets/NIcon.qml b/Widgets/NIcon.qml index 6d70c6f..a459e74 100644 --- a/Widgets/NIcon.qml +++ b/Widgets/NIcon.qml @@ -4,9 +4,17 @@ import qs.Commons import qs.Widgets Text { - property string icon: "balloon" + readonly property string defaultIcon: "balloon" + property string icon: defaultIcon - text: Bootstrap.icons[icon] + text: { + if (Bootstrap.icons[icon] === undefined) { + Logger.warn("Icon", `"${icon}"`, "doesn't exist in the bootstrap font") + Logger.callStack() + return Bootstrap.icons[defaultIcon] + } + return Bootstrap.icons[icon] + } font.family: "bootstrap-icons" font.pointSize: Style.fontSizeL * scaling color: Color.mOnSurface