Icons: ArchUpdater, LockScreen, PowerMenu, BT Device List
This commit is contained in:
parent
0e4b79fd16
commit
16bd4b41dc
10 changed files with 187 additions and 139 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -179,3 +208,4 @@ RowLayout {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ ColumnLayout {
|
|||
}
|
||||
return "Connect"
|
||||
}
|
||||
icon: (isBusy ? "hourglass_full" : null)
|
||||
icon: (isBusy ? "hourglass-split" : null)
|
||||
onClicked: {
|
||||
if (modelData.connected) {
|
||||
BluetoothService.disconnectDevice(modelData)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ NPanel {
|
|||
spacing: Style.marginS * scaling
|
||||
|
||||
NIcon {
|
||||
icon: "error"
|
||||
icon: "exclamation-triangle"
|
||||
font.pointSize: Style.fontSizeL * scaling
|
||||
color: Color.mError
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue