never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Icons: ArchUpdater, LockScreen, PowerMenu, BT Device List

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

10
Modules/ArchUpdaterPanel/ArchUpdaterPanel.qml
View file

@ -28,7 +28,7 @@ NPanel {
spacing: Style.marginM * scaling spacing: Style.marginM * scaling
NIcon { NIcon {
icon: "system_update_alt" icon: "box"
font.pointSize: Style.fontSizeXXL * scaling font.pointSize: Style.fontSizeXXL * scaling
color: Color.mPrimary color: Color.mPrimary
} }
@ -103,7 +103,7 @@ NPanel {
} // Spacer } // Spacer
NIcon { NIcon {
icon: "hourglass_empty" icon: "hourglass"
font.pointSize: Style.fontSizeXXXL * scaling font.pointSize: Style.fontSizeXXXL * scaling
color: Color.mPrimary color: Color.mPrimary
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
@ -181,7 +181,7 @@ NPanel {
spacing: Style.marginM * scaling spacing: Style.marginM * scaling
NIcon { NIcon {
icon: "package" icon: "box"
font.pointSize: Style.fontSizeXXXL * scaling font.pointSize: Style.fontSizeXXXL * scaling
color: Color.mError color: Color.mError
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
@ -219,7 +219,7 @@ NPanel {
spacing: Style.marginM * scaling spacing: Style.marginM * scaling
NIcon { NIcon {
icon: "exclamation" icon: "exclamation-triangle"
font.pointSize: Style.fontSizeXXXL * scaling font.pointSize: Style.fontSizeXXXL * scaling
color: Color.mError color: Color.mError
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
@ -270,7 +270,7 @@ NPanel {
spacing: Style.marginM * scaling spacing: Style.marginM * scaling
NIcon { NIcon {
icon: "exclamation" icon: "exclamation-triangle"
font.pointSize: Style.fontSizeXXXL * scaling font.pointSize: Style.fontSizeXXXL * scaling
color: Color.mError color: Color.mError
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter

196
Modules/Bar/Widgets/SystemMonitor.qml
View file

@ -52,128 +52,158 @@ RowLayout {
RowLayout { RowLayout {
id: mainLayout id: mainLayout
anchors.fill: parent anchors.centerIn: parent // Better centering than margins
anchors.leftMargin: Style.marginS * scaling width: parent.width - Style.marginM * scaling * 2
anchors.rightMargin: Style.marginS * scaling
spacing: Style.marginS * scaling spacing: Style.marginS * scaling
// CPU Usage Component // CPU Usage Component
RowLayout { Item {
id: cpuUsageLayout Layout.preferredWidth: cpuUsageRow.implicitWidth
spacing: Style.marginXS * scaling Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling)
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
visible: showCpuUsage visible: showCpuUsage
NIcon { RowLayout {
icon: "speedometer2" id: cpuUsageRow
font.pointSize: Style.fontSizeM * scaling anchors.centerIn: parent
Layout.alignment: Qt.AlignVCenter spacing: Style.marginXS * scaling
}
NText { NIcon {
text: `${SystemStatService.cpuUsage}%` icon: "speedometer2"
font.family: Settings.data.ui.fontFixed font.pointSize: Style.fontSizeM * scaling
font.pointSize: Style.fontSizeS * scaling Layout.alignment: Qt.AlignVCenter
font.weight: Style.fontWeightMedium }
Layout.alignment: Qt.AlignVCenter
verticalAlignment: Text.AlignVCenter NText {
color: Color.mPrimary 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 // CPU Temperature Component
RowLayout { Item {
id: cpuTempLayout Layout.preferredWidth: cpuTempRow.implicitWidth
spacing: Style.marginXS * scaling Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling)
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
visible: showCpuTemp visible: showCpuTemp
NIcon { RowLayout {
icon: "fire" id: cpuTempRow
font.pointSize: Style.fontSizeM * scaling anchors.centerIn: parent
Layout.alignment: Qt.AlignVCenter spacing: Style.marginXS * scaling
}
NText { NIcon {
text: `${SystemStatService.cpuTemp}°C` icon: "fire"
font.family: Settings.data.ui.fontFixed // Fire is so tall, we need to make it smaller
font.pointSize: Style.fontSizeS * scaling font.pointSize: Style.fontSizeS * scaling
font.weight: Style.fontWeightMedium Layout.alignment: Qt.AlignVCenter
Layout.alignment: Qt.AlignVCenter }
verticalAlignment: Text.AlignVCenter
color: Color.mPrimary 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 // Memory Usage Component
RowLayout { Item {
id: memoryUsageLayout Layout.preferredWidth: memoryUsageRow.implicitWidth
spacing: Style.marginXS * scaling Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling)
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
visible: showMemoryUsage visible: showMemoryUsage
NIcon { RowLayout {
icon: "memory" id: memoryUsageRow
font.pointSize: Style.fontSizeM * scaling anchors.centerIn: parent
Layout.alignment: Qt.AlignVCenter spacing: Style.marginXS * scaling
}
NText { NIcon {
text: showMemoryAsPercent ? `${SystemStatService.memPercent}%` : `${SystemStatService.memGb}G` icon: "memory"
font.family: Settings.data.ui.fontFixed font.pointSize: Style.fontSizeM * scaling
font.pointSize: Style.fontSizeS * scaling Layout.alignment: Qt.AlignVCenter
font.weight: Style.fontWeightMedium }
Layout.alignment: Qt.AlignVCenter
verticalAlignment: Text.AlignVCenter NText {
color: Color.mPrimary 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 // Network Download Speed Component
RowLayout { Item {
id: networkDownloadLayout Layout.preferredWidth: networkDownloadRow.implicitWidth
spacing: Style.marginXS * scaling Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling)
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
visible: showNetworkStats visible: showNetworkStats
NIcon { RowLayout {
icon: "download" id: networkDownloadRow
font.pointSize: Style.fontSizeM * scaling anchors.centerIn: parent
Layout.alignment: Qt.AlignVCenter spacing: Style.marginXS * scaling
}
NText { NIcon {
text: SystemStatService.formatSpeed(SystemStatService.rxSpeed) icon: "cloud-arrow-down"
font.family: Settings.data.ui.fontFixed font.pointSize: Style.fontSizeM * scaling
font.pointSize: Style.fontSizeS * scaling Layout.alignment: Qt.AlignVCenter
font.weight: Style.fontWeightMedium }
Layout.alignment: Qt.AlignVCenter
verticalAlignment: Text.AlignVCenter NText {
color: Color.mPrimary 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 // Network Upload Speed Component
RowLayout { Item {
id: networkUploadLayout Layout.preferredWidth: networkUploadRow.implicitWidth
spacing: Style.marginXS * scaling Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling)
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
visible: showNetworkStats visible: showNetworkStats
NIcon { RowLayout {
icon: "upload" id: networkUploadRow
font.pointSize: Style.fontSizeM * scaling anchors.centerIn: parent
Layout.alignment: Qt.AlignVCenter spacing: Style.marginXS * scaling
}
NText { NIcon {
text: SystemStatService.formatSpeed(SystemStatService.txSpeed) icon: "cloud-arrow-up"
font.family: Settings.data.ui.fontFixed font.pointSize: Style.fontSizeM * scaling
font.pointSize: Style.fontSizeS * scaling Layout.alignment: Qt.AlignVCenter
font.weight: Style.fontWeightMedium }
Layout.alignment: Qt.AlignVCenter
verticalAlignment: Text.AlignVCenter NText {
color: Color.mPrimary 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
}
} }
} }
} }

2
Modules/BluetoothPanel/BluetoothDevicesList.qml
View file

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

34
Modules/LockScreen/LockScreen.qml
View file

@ -418,7 +418,7 @@ Loader {
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
} }
NIcon { NIcon {
text: "keyboard_alt" icon: "keyboard"
font.pointSize: Style.fontSizeM * scaling font.pointSize: Style.fontSizeM * scaling
color: Color.mOnSurface color: Color.mOnSurface
} }
@ -428,7 +428,7 @@ Loader {
spacing: Style.marginS * scaling spacing: Style.marginS * scaling
visible: batteryIndicator.batteryVisible visible: batteryIndicator.batteryVisible
NIcon { NIcon {
text: BatteryService.getIcon(batteryIndicator.percent, batteryIndicator.charging, icon: BatteryService.getIcon(batteryIndicator.percent, batteryIndicator.charging,
batteryIndicator.isReady) batteryIndicator.isReady)
font.pointSize: Style.fontSizeM * scaling font.pointSize: Style.fontSizeM * scaling
color: batteryIndicator.charging ? Color.mPrimary : Color.mOnSurface color: batteryIndicator.charging ? Color.mPrimary : Color.mOnSurface
@ -718,18 +718,20 @@ Loader {
anchors.margins: 50 * scaling anchors.margins: 50 * scaling
spacing: 20 * scaling spacing: 20 * scaling
// Shutdown
Rectangle { Rectangle {
Layout.preferredWidth: 60 * scaling Layout.preferredWidth: iconPower.implicitWidth + Style.marginXL * scaling
Layout.preferredHeight: 60 * scaling Layout.preferredHeight: Layout.preferredWidth
radius: width * 0.5 radius: width * 0.5
color: powerButtonArea.containsMouse ? Color.mError : Qt.alpha(Color.mError, 0.2) color: powerButtonArea.containsMouse ? Color.mError : Qt.alpha(Color.mError, 0.2)
border.color: Color.mError border.color: Color.mError
border.width: Math.max(1, Style.borderM * scaling) border.width: Math.max(1, Style.borderM * scaling)
NIcon { NIcon {
id: iconPower
anchors.centerIn: parent anchors.centerIn: parent
text: "power_settings_new" icon: "power"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXXL * scaling
color: powerButtonArea.containsMouse ? Color.mOnError : Color.mError color: powerButtonArea.containsMouse ? Color.mOnError : Color.mError
} }
@ -743,18 +745,20 @@ Loader {
} }
} }
// Reboot
Rectangle { Rectangle {
Layout.preferredWidth: 60 * scaling Layout.preferredWidth: iconReboot.implicitWidth + Style.marginXL * scaling
Layout.preferredHeight: 60 * scaling Layout.preferredHeight: Layout.preferredWidth
radius: width * 0.5 radius: width * 0.5
color: restartButtonArea.containsMouse ? Color.mPrimary : Qt.alpha(Color.mPrimary, Style.opacityLight) color: restartButtonArea.containsMouse ? Color.mPrimary : Qt.alpha(Color.mPrimary, Style.opacityLight)
border.color: Color.mPrimary border.color: Color.mPrimary
border.width: Math.max(1, Style.borderM * scaling) border.width: Math.max(1, Style.borderM * scaling)
NIcon { NIcon {
id: iconReboot
anchors.centerIn: parent anchors.centerIn: parent
text: "restart_alt" icon: "arrow-repeat"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXXL * scaling
color: restartButtonArea.containsMouse ? Color.mOnPrimary : Color.mPrimary color: restartButtonArea.containsMouse ? Color.mOnPrimary : Color.mPrimary
} }
@ -768,18 +772,20 @@ Loader {
} }
} }
// Suspend
Rectangle { Rectangle {
Layout.preferredWidth: 60 * scaling Layout.preferredWidth: iconSuspend.implicitWidth + Style.marginXL * scaling
Layout.preferredHeight: 60 * scaling Layout.preferredHeight: Layout.preferredWidth
radius: width * 0.5 radius: width * 0.5
color: suspendButtonArea.containsMouse ? Color.mSecondary : Qt.alpha(Color.mSecondary, 0.2) color: suspendButtonArea.containsMouse ? Color.mSecondary : Qt.alpha(Color.mSecondary, 0.2)
border.color: Color.mSecondary border.color: Color.mSecondary
border.width: Math.max(1, Style.borderM * scaling) border.width: Math.max(1, Style.borderM * scaling)
NIcon { NIcon {
id: iconSuspend
anchors.centerIn: parent anchors.centerIn: parent
text: "bedtime" icon: "pause-fill"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXXL * scaling
color: suspendButtonArea.containsMouse ? Color.mOnSecondary : Color.mSecondary color: suspendButtonArea.containsMouse ? Color.mOnSecondary : Color.mSecondary
} }

14
Modules/PowerPanel/PowerPanel.qml
View file

@ -29,27 +29,27 @@ NPanel {
property int selectedIndex: 0 property int selectedIndex: 0
readonly property var powerOptions: [{ readonly property var powerOptions: [{
"action": "lock", "action": "lock",
"icon": "lock_outline", "icon": "lock",
"title": "Lock", "title": "Lock",
"subtitle": "Lock your session" "subtitle": "Lock your session"
}, { }, {
"action": "suspend", "action": "suspend",
"icon": "bedtime", "icon": "pause-circle",
"title": "Suspend", "title": "Suspend",
"subtitle": "Put the system to sleep" "subtitle": "Put the system to sleep"
}, { }, {
"action": "reboot", "action": "reboot",
"icon": "refresh", "icon": "arrow-repeat",
"title": "Reboot", "title": "Reboot",
"subtitle": "Restart the system" "subtitle": "Restart the system"
}, { }, {
"action": "logout", "action": "logout",
"icon": "exit_to_app", "icon": "escape",
"title": "Logout", "title": "Logout",
"subtitle": "End your session" "subtitle": "End your session"
}, { }, {
"action": "shutdown", "action": "shutdown",
"icon": "power_settings_new", "icon": "power",
"title": "Shutdown", "title": "Shutdown",
"subtitle": "Turn off the system", "subtitle": "Turn off the system",
"isShutdown": true "isShutdown": true
@ -276,7 +276,7 @@ NPanel {
} }
NIconButton { NIconButton {
icon: timerActive ? "back_hand" : "close" icon: timerActive ? "x-square" : "x-lg"
tooltipText: timerActive ? "Cancel Timer" : "Close" tooltipText: timerActive ? "Cancel Timer" : "Close"
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
colorBg: timerActive ? Qt.alpha(Color.mError, 0.08) : Color.transparent colorBg: timerActive ? Qt.alpha(Color.mError, 0.08) : Color.transparent
@ -360,7 +360,7 @@ NPanel {
id: iconElement id: iconElement
anchors.left: parent.left anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: buttonRoot.icon icon: buttonRoot.icon
color: { color: {
if (buttonRoot.pending) if (buttonRoot.pending)
return Color.mPrimary return Color.mPrimary

2
Modules/WiFiPanel/WiFiPanel.qml
View file

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

2
Services/BatteryService.qml
View file

@ -11,7 +11,7 @@ Singleton {
// Choose icon based on charge and charging state // Choose icon based on charge and charging state
function getIcon(percent, charging, isReady) { function getIcon(percent, charging, isReady) {
if (!isReady) { if (!isReady) {
return "exclamation-diamond" return "exclamation-triangle"
} }
if (charging) { if (charging) {

41
Widgets/NButton.qml
View file

@ -80,26 +80,29 @@ Rectangle {
spacing: Style.marginXS * scaling spacing: Style.marginXS * scaling
// Icon (optional) // Icon (optional)
NIcon { Loader {
Layout.alignment: Qt.AlignVCenter active: root.icon !== ""
visible: root.icon !== "" sourceComponent: NIcon {
icon: root.icon Layout.alignment: Qt.AlignVCenter
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 { icon: root.icon
ColorAnimation { font.pointSize: root.iconSize
duration: Style.animationFast color: {
easing.type: Easing.OutCubic 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
}
} }
} }
} }

13
Widgets/NCircleStat.qml
View file

@ -88,20 +88,21 @@ Rectangle {
// Tiny circular badge for the icon, positioned using anchors within the gauge // Tiny circular badge for the icon, positioned using anchors within the gauge
Rectangle { Rectangle {
id: iconBadge id: iconBadge
width: 28 * scaling * contentScale width: iconText.implicitWidth + Style.marginXS * scaling
height: width height: width
radius: width / 2 radius: width / 2
color: Color.mSurface color: Color.mPrimary
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.rightMargin: -6 * scaling * contentScale anchors.rightMargin: Style.marginXXS * scaling * contentScale
anchors.topMargin: Style.marginXXS * scaling * contentScale anchors.topMargin: Style.marginXS * scaling * contentScale
NIcon { NIcon {
id: iconText
anchors.centerIn: parent anchors.centerIn: parent
icon: root.icon icon: root.icon
font.pointSize: Style.fontSizeLargeXL * scaling * contentScale font.pointSize: Style.fontSizeS * scaling * contentScale
color: Color.mOnSurface color: Color.mOnPrimary
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }

12
Widgets/NIcon.qml
View file

@ -4,9 +4,17 @@ import qs.Commons
import qs.Widgets import qs.Widgets
Text { 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.family: "bootstrap-icons"
font.pointSize: Style.fontSizeL * scaling font.pointSize: Style.fontSizeL * scaling
color: Color.mOnSurface color: Color.mOnSurface