NIcon new widget to simplify icons display

This commit is contained in:
quadbyte 2025-08-17 16:04:23 -04:00
parent 9bb9e7e015
commit ac8b4793d8
21 changed files with 64 additions and 127 deletions

View file

@ -292,10 +292,9 @@ NLoader {
anchors.fill: parent
anchors.margins: Style.marginMedium * scaling
Text {
NIcon {
id: searchIcon
text: "search"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarger * scaling
color: searchInput.activeFocus ? Color.mPrimary : Color.mOnSurface
anchors.left: parent.left

View file

@ -75,10 +75,9 @@ Row {
spacing: Style.marginTiny * scaling
// Window icon
NText {
NIcon {
id: windowIcon
text: "dialogs"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter

View file

@ -121,9 +121,8 @@ NLoader {
Layout.fillWidth: true
spacing: Style.marginMedium * scaling
NText {
NIcon {
text: "bluetooth"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling
color: Color.mPrimary
}
@ -230,9 +229,8 @@ NLoader {
spacing: Style.marginSmall * scaling
// One device BT icon
NText {
NIcon {
text: BluetoothService.getDeviceIcon(modelData)
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling
color: {
if (availableDeviceArea.containsMouse)
@ -305,9 +303,8 @@ NLoader {
}
}
NText {
NIcon {
text: BluetoothService.getSignalIcon(modelData)
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeSmall * scaling
color: {
if (availableDeviceArea.containsMouse)
@ -430,9 +427,8 @@ NLoader {
anchors.horizontalCenter: parent.horizontalCenter
spacing: Style.marginMedium * scaling
NText {
NIcon {
text: "sync"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXLL * 1.5 * scaling
color: Color.mPrimary
anchors.verticalCenter: parent.verticalCenter

View file

@ -44,10 +44,9 @@ Row {
spacing: Style.marginTiny * scaling
// Window icon
NText {
NIcon {
id: windowIcon
text: MediaService.isPlaying ? "pause" : "play_arrow"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter

View file

@ -17,12 +17,9 @@ Row {
id: cpuUsageLayout
spacing: Style.marginTiny * scaling
NText {
NIcon {
id: cpuUsageIcon
text: "speed"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
}
@ -42,12 +39,8 @@ Row {
id: cpuTempLayout
spacing: Style.marginTiny * scaling
NText {
NIcon {
text: "thermometer"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
}
@ -66,11 +59,8 @@ Row {
id: memoryUsageLayout
spacing: Style.marginTiny * scaling
NText {
NIcon {
text: "memory"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
}

View file

@ -126,7 +126,8 @@ PopupWindow {
id: text
Layout.fillWidth: true
color: (modelData?.enabled
?? true) ? (mouseArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface) : Color.applyOpacity(Color.mOnSurface, 64)
?? true) ? (mouseArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface) : Color.applyOpacity(
Color.mOnSurface, 64)
text: modelData?.text ?? ""
font.pointSize: Style.fontSizeSmall * scaling
verticalAlignment: Text.AlignVCenter
@ -142,9 +143,8 @@ PopupWindow {
}
// Chevron right for optional submenu
Text {
NIcon {
text: modelData?.hasChildren ? "menu" : ""
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeSmall * scaling
verticalAlignment: Text.AlignVCenter
visible: modelData?.hasChildren ?? false
@ -377,9 +377,8 @@ PopupWindow {
}
// TBC a Square UTF-8?
NText {
NIcon {
text: modelData?.hasChildren ? "\uE5CC" : ""
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeSmall * scaling
verticalAlignment: Text.AlignVCenter
visible: modelData?.hasChildren ?? false

View file

@ -130,9 +130,8 @@ NLoader {
Layout.fillWidth: true
spacing: Style.marginMedium * scaling
NText {
NIcon {
text: "wifi"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling
color: Color.mPrimary
}
@ -198,9 +197,8 @@ NLoader {
visible: !Settings.data.network.wifiEnabled
spacing: Style.marginMedium * scaling
NText {
NIcon {
text: "wifi_off"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXXL * scaling
color: Color.mOnSurfaceVariant
Layout.alignment: Qt.AlignHCenter
@ -250,9 +248,8 @@ NLoader {
anchors.margins: Style.marginSmall * scaling
spacing: Style.marginSmall * scaling
NText {
NIcon {
text: NetworkService.signalIcon(modelData.signal)
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling
color: modelData.connected ? Color.mSurface : (networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface)
}

View file

@ -401,9 +401,8 @@ WlSessionLock {
spacing: Style.marginSmall * scaling
visible: batteryIndicator.batteryVisible
Text {
NIcon {
text: batteryIndicator.getIcon()
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeMedium
color: batteryIndicator.charging ? Color.mPrimary : Color.mOnSurface
}
@ -731,12 +730,11 @@ WlSessionLock {
}
}
Text {
anchors.centerIn: parent
NIcon {
text: "power_settings_new"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXXL * scaling
color: shutdownArea.containsMouse ? Color.mOnPrimary : Color.mError
anchors.centerIn: parent
}
Behavior on color {
@ -787,12 +785,11 @@ WlSessionLock {
}
}
Text {
anchors.centerIn: parent
NIcon {
text: "refresh"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXXL * scaling
color: rebootArea.containsMouse ? Color.mOnPrimary : Color.mPrimary
anchors.centerIn: parent
}
Behavior on color {
@ -845,12 +842,11 @@ WlSessionLock {
}
}
Text {
anchors.centerIn: parent
NIcon {
text: "exit_to_app"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXXL * scaling
color: logoutArea.containsMouse ? Color.mOnPrimary : Color.mSecondary
anchors.centerIn: parent
}
Behavior on color {

View file

@ -115,9 +115,8 @@ NLoader {
Layout.fillWidth: true
spacing: Style.marginMedium * scaling
NText {
NIcon {
text: "notifications"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling
color: Color.mPrimary
}
@ -159,9 +158,8 @@ NLoader {
anchors.centerIn: parent
spacing: Style.marginMedium * scaling
NText {
NIcon {
text: "notifications_off"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXXL * scaling
color: Color.mOnSurfaceVariant
Layout.alignment: Qt.AlignHCenter

View file

@ -276,13 +276,9 @@ NLoader {
anchors.rightMargin: Style.marginSmall * scaling
spacing: Style.marginSmall * scaling
// Tab icon on the left side
NText {
NIcon {
text: modelData.icon
color: tabTextColor
font.family: "Material Symbols Outlined"
font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0
}
font.pointSize: Style.fontSizeLarge * scaling
}
// Tab label on the left side

View file

@ -135,9 +135,8 @@ ColumnLayout {
anchors.centerIn: parent
spacing: Style.marginSmall * scaling
NText {
NIcon {
text: "system_update"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling
color: updateArea.containsMouse ? Color.mSurface : Color.mPrimary
}

View file

@ -168,12 +168,11 @@ Item {
border.width: Math.max(1, Style.borderThin * scaling)
visible: isSelected
NText {
anchors.centerIn: parent
NIcon {
text: "check"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeSmall * scaling
color: Color.mOnPrimary
anchors.centerIn: parent
}
}
@ -216,9 +215,8 @@ Item {
anchors.centerIn: parent
spacing: Style.marginMedium * scaling
NText {
NIcon {
text: "folder_open"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling
color: Color.mOnSurface
Layout.alignment: Qt.AlignHCenter

View file

@ -37,9 +37,8 @@ NBox {
Layout.fillHeight: true
}
NText {
NIcon {
text: "album"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXXL * 2.5 * scaling
color: Color.mPrimary
Layout.alignment: Qt.AlignHCenter
@ -93,11 +92,10 @@ NBox {
elide: Text.ElideRight
}
indicator: Text {
indicator: NIcon {
x: playerSelector.width - width
y: playerSelector.topPadding + (playerSelector.availableHeight - height) / 2
text: "arrow_drop_down"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling
color: Color.mOnSurface
horizontalAlignment: Text.AlignRight
@ -180,13 +178,12 @@ NBox {
}
// Fallback icon when no album art available
NText {
anchors.centerIn: parent
NIcon {
text: "album"
color: Color.mPrimary
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * 12 * scaling
visible: !trackArt.visible
anchors.centerIn: parent
}
}

View file

@ -26,10 +26,9 @@ NBox {
RowLayout {
spacing: Style.marginSmall * scaling
NText {
NIcon {
text: weatherReady ? LocationService.weatherSymbolFromCode(
LocationService.data.weather.current_weather.weathercode) : ""
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXXL * 1.5 * scaling
color: Color.mPrimary
}
@ -94,9 +93,8 @@ NBox {
text: Qt.formatDateTime(new Date(LocationService.data.weather.daily.time[index]), "ddd")
color: Color.mOnSurface
}
NText {
NIcon {
text: LocationService.weatherSymbolFromCode(LocationService.data.weather.daily.weathercode[index])
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling
color: Color.mPrimary
}

View file

@ -73,15 +73,9 @@ NPanel {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Text {
NIcon {
text: "lock_outline"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling
font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0
}
color: lockButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling
}
@ -133,15 +127,9 @@ NPanel {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Text {
NIcon {
text: "bedtime"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling
font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0
}
color: suspendButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling
}
@ -191,15 +179,9 @@ NPanel {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Text {
NIcon {
text: "refresh"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling
font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0
}
color: rebootButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling
}
@ -249,15 +231,9 @@ NPanel {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Text {
NIcon {
text: "exit_to_app"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling
font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0
}
color: logoutButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling
}
@ -307,15 +283,9 @@ NPanel {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Text {
NIcon {
text: "power_settings_new"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling
font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0
}
color: shutdownButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling
}

View file

@ -97,10 +97,9 @@ Rectangle {
anchors.rightMargin: -6 * scaling * contentScale
anchors.topMargin: Style.marginTiniest * scaling * contentScale
Text {
NIcon {
anchors.centerIn: parent
text: root.icon
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLargeXL * scaling * contentScale
color: Color.mOnSurface
horizontalAlignment: Text.AlignHCenter

View file

@ -77,11 +77,10 @@ ColumnLayout {
combo.currentIndex).name : ""
}
indicator: NText {
indicator: NIcon {
x: combo.width - width - Style.marginMedium * scaling
y: combo.topPadding + (combo.availableHeight - height) / 2
text: "arrow_drop_down"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling
}

15
Widgets/NIcon.qml Normal file
View file

@ -0,0 +1,15 @@
import QtQuick
import qs.Commons
import qs.Widgets
Text {
text: "question_mark"
font.family: "Material Symbols Rounded"
font.pointSize: Style.fontSizeLarge * scaling
font.variableAxes: {
"wght"// slightly bold to ensure all lines looks good
: (Font.Normal + Font.Bold) / 2.5
}
color: Color.mOnSurface
verticalAlignment: Text.AlignVCenter
}

View file

@ -17,7 +17,6 @@ Rectangle {
property bool enabled: true
property bool hovering: false
property real fontPointSize: Style.fontSizeMedium
property string fontFamily: "Material Symbols Outlined"
signal entered
signal exited
@ -31,17 +30,13 @@ Rectangle {
border.color: showBorder ? Color.mPrimary : Color.transparent
border.width: Math.max(1, Style.borderThin * scaling)
NText {
NIcon {
anchors.centerIn: parent
// Little hack to keep things centered at high scaling
anchors.horizontalCenterOffset: -1 * (scaling - 1.0)
anchors.verticalCenterOffset: 0
text: root.icon
font.family: fontFamily
font.pointSize: root.fontPointSize * scaling
font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0
}
color: (root.hovering || showFilled) ? Color.mOnPrimary : showBorder ? Color.mPrimary : Color.mOnSurface
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter

View file

@ -61,10 +61,9 @@ Rectangle {
}
// Fallback icon
NText {
NIcon {
anchors.centerIn: parent
text: fallbackIcon
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling
visible: fallbackIcon !== undefined && fallbackIcon !== "" && (imagePath === undefined || imagePath === "")
z: 0

View file

@ -91,12 +91,11 @@ Item {
}
}
Text {
anchors.centerIn: parent
font.family: showPill ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pointSize: Style.fontSizeMedium * scaling
NIcon {
text: root.icon
font.pointSize: Style.fontSizeMedium * scaling
color: showPill ? iconTextColor : collapsedIconColor
anchors.centerIn: parent
}
}