Icons: ArchUpdater, LockScreen, PowerMenu, BT Device List

This commit is contained in:
LemmyCook 2025-09-08 23:32:35 -04:00
parent 0e4b79fd16
commit 16bd4b41dc
10 changed files with 187 additions and 139 deletions

View file

@ -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

View file

@ -52,18 +52,22 @@ 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
RowLayout {
id: cpuUsageRow
anchors.centerIn: parent
spacing: Style.marginXS * scaling
NIcon {
icon: "speedometer2"
font.pointSize: Style.fontSizeM * scaling
@ -80,17 +84,24 @@ RowLayout {
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
RowLayout {
id: cpuTempRow
anchors.centerIn: parent
spacing: Style.marginXS * scaling
NIcon {
icon: "fire"
font.pointSize: Style.fontSizeM * scaling
// Fire is so tall, we need to make it smaller
font.pointSize: Style.fontSizeS * scaling
Layout.alignment: Qt.AlignVCenter
}
@ -104,14 +115,20 @@ RowLayout {
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
RowLayout {
id: memoryUsageRow
anchors.centerIn: parent
spacing: Style.marginXS * scaling
NIcon {
icon: "memory"
font.pointSize: Style.fontSizeM * scaling
@ -128,16 +145,22 @@ RowLayout {
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
RowLayout {
id: networkDownloadRow
anchors.centerIn: parent
spacing: Style.marginXS * scaling
NIcon {
icon: "download"
icon: "cloud-arrow-down"
font.pointSize: Style.fontSizeM * scaling
Layout.alignment: Qt.AlignVCenter
}
@ -152,16 +175,22 @@ RowLayout {
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
RowLayout {
id: networkUploadRow
anchors.centerIn: parent
spacing: Style.marginXS * scaling
NIcon {
icon: "upload"
icon: "cloud-arrow-up"
font.pointSize: Style.fontSizeM * scaling
Layout.alignment: Qt.AlignVCenter
}
@ -178,4 +207,5 @@ RowLayout {
}
}
}
}
}

View file

@ -164,7 +164,7 @@ ColumnLayout {
}
return "Connect"
}
icon: (isBusy ? "hourglass_full" : null)
icon: (isBusy ? "hourglass-split" : null)
onClicked: {
if (modelData.connected) {
BluetoothService.disconnectDevice(modelData)

View file

@ -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
}

View file

@ -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

View file

@ -91,7 +91,7 @@ NPanel {
spacing: Style.marginS * scaling
NIcon {
icon: "error"
icon: "exclamation-triangle"
font.pointSize: Style.fontSizeL * scaling
color: Color.mError
}

View file

@ -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) {

View file

@ -80,9 +80,11 @@ Rectangle {
spacing: Style.marginXS * scaling
// Icon (optional)
NIcon {
Loader {
active: root.icon !== ""
sourceComponent: NIcon {
Layout.alignment: Qt.AlignVCenter
visible: root.icon !== ""
icon: root.icon
font.pointSize: root.iconSize
color: {
@ -103,6 +105,7 @@ Rectangle {
}
}
}
}
// Text
NText {

View file

@ -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
}

View file

@ -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