thomas/dotfiles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes: replaced icons with material icons

Browse Source
This commit is contained in:
Thomas Williams
2026-08-27 07:40:53 +01:00
parent d3856ada0d
commit b7a92c9a59
8 changed files with 65 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dotfiles/.config/quickshell/config/Appearance.qml
View File

@@ -4,6 +4,10 @@ import QtQuick
QtObject { QtObject {
readonly property string fontFamily: "CaskaydiaCove Nerd Font Mono" readonly property string fontFamily: "CaskaydiaCove Nerd Font Mono"
readonly property string iconFontFamily: "Material Symbols Outlined" readonly property string iconFontFamily: "Material Symbols Outlined"
// Same glyph set, softer/rounded terminals — used where a module wants
// a visually distinct icon style from the rest of the bar (currently
// just BluetoothIndicator.qml) without switching every icon over.
readonly property string iconFontFamilyRounded: "Material Symbols Rounded"
// Material Symbols is a variable font. Left unset, glyphs fall back to the // Material Symbols is a variable font. Left unset, glyphs fall back to the
// font's default optical size (24px), which is tuned for larger rendering // font's default optical size (24px), which is tuned for larger rendering
// and makes some icons (e.g. "lock") look heavier/bigger than others when // and makes some icons (e.g. "lock") look heavier/bigger than others when

8
dotfiles/.config/quickshell/modules/bar/BluetoothIndicator.qml
View File

@@ -129,7 +129,7 @@ Item {
Text { Text {
id: label id: label
anchors.centerIn: parent anchors.centerIn: parent
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 16 font.pixelSize: 16
color: (root.adapter && root.adapter.enabled) ? Colors.foreground : Colors.muted color: (root.adapter && root.adapter.enabled) ? Colors.foreground : Colors.muted
@@ -207,7 +207,7 @@ Item {
Layout.maximumWidth: 20 Layout.maximumWidth: 20
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
text: devRow.dev.icon text: devRow.dev.icon
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
@@ -246,7 +246,7 @@ Item {
id: forgetIcon id: forgetIcon
visible: devRow.showForget visible: devRow.showForget
text: "close" text: "close"
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
@@ -335,7 +335,7 @@ Item {
Text { Text {
text: label.text text: label.text
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 30 font.pixelSize: 30
color: Colors.foreground color: Colors.foreground

48
dotfiles/.config/quickshell/modules/bar/NetworkIndicator.qml
View File

@@ -161,6 +161,14 @@ Item {
return (row && row.ssid) || "Network" return (row && row.ssid) || "Network"
} }
// Signal strength of the currently-connected WiFi network, if any — lets
// the bar icon show the same wifi-fan glyph (via wifiIcon()) as the
// connected row inside the popup, instead of a generic "wifi" icon.
readonly property int connectedWifiSignal: {
const row = root.wifiRows.find(function(r) { return r.connected })
return row ? row.signal : 0
}
function activateNetwork(net) { function activateNetwork(net) {
if (net.connected) return if (net.connected) return
if (net.known || !root.requiresCredentials(net.security)) { if (net.known || !root.requiresCredentials(net.security)) {
@@ -517,14 +525,27 @@ Item {
Text { Text {
id: label id: label
anchors.centerIn: parent anchors.centerIn: parent
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 16 font.pixelSize: 16
color: root.connectedDevice ? Colors.foreground : Colors.muted color: root.connectedDevice ? Colors.foreground : Colors.muted
// Wired/disconnected use their own distinct glyphs; only the WiFi
// case renders one of wifiIcon()'s flat/wide wifi-fan glyphs, so
// only that case needs the vertical-stretch correction below.
readonly property bool isWifiFan: root.connectedDevice !== null && root.connectedDevice.type !== DeviceType.Wired
text: { text: {
if (!root.connectedDevice) if (!root.connectedDevice)
return "wifi_off" return "wifi_off"
return root.connectedDevice.type === DeviceType.Wired ? "settings_ethernet" : "wifi" if (root.connectedDevice.type === DeviceType.Wired)
return "settings_ethernet"
return root.wifiIcon(root.connectedWifiSignal)
}
// Same correction as the matching glyph inside the popup's
// NetworkRow — the wifi-fan family is inherently flat/wide.
transform: Scale {
origin.x: label.width / 2
origin.y: label.height / 2
yScale: label.isWifiFan ? 1.2 : 1.0
} }
} }
@@ -602,7 +623,7 @@ Item {
Layout.maximumWidth: 20 Layout.maximumWidth: 20
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
text: root.wifiIcon(netRow.net.signal) text: root.wifiIcon(netRow.net.signal)
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
@@ -639,7 +660,7 @@ Item {
Text { Text {
visible: root.requiresCredentials(netRow.net.security) visible: root.requiresCredentials(netRow.net.security)
text: "lock" text: "lock"
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 13 font.pixelSize: 13
color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
@@ -648,7 +669,7 @@ Item {
id: forgetIcon id: forgetIcon
visible: netRow.net.known visible: netRow.net.known
text: "close" text: "close"
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
@@ -690,7 +711,7 @@ Item {
Text { Text {
text: "check" text: "check"
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 16 font.pixelSize: 16
color: Colors.primary color: Colors.primary
@@ -786,11 +807,20 @@ Item {
spacing: 8 spacing: 8
Text { Text {
id: headerIcon
text: label.text text: label.text
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 30 font.pixelSize: 30
color: Colors.foreground color: Colors.foreground
// Mirrors the bar icon's own correction — see label's
// isWifiFan/transform above — since this just
// displays the same text at a larger size.
transform: Scale {
origin.x: headerIcon.width / 2
origin.y: headerIcon.height / 2
yScale: label.isWifiFan ? 1.2 : 1.0
}
} }
Text { Text {
@@ -936,7 +966,7 @@ Item {
Text { Text {
text: "check" text: "check"
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 16 font.pixelSize: 16
color: Colors.primary color: Colors.primary
@@ -974,7 +1004,7 @@ Item {
spacing: 8 spacing: 8
Text { Text {
text: "settings_ethernet" text: "settings_ethernet"
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: Colors.foreground color: Colors.foreground

6
dotfiles/.config/quickshell/modules/bar/PowerButton.qml
View File

@@ -19,7 +19,7 @@ Item {
Text { Text {
id: label id: label
anchors.centerIn: parent anchors.centerIn: parent
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 16 font.pixelSize: 16
color: Colors.foreground color: Colors.foreground
@@ -91,7 +91,7 @@ Item {
Text { Text {
text: label.text text: label.text
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 30 font.pixelSize: 30
color: Colors.foreground color: Colors.foreground
@@ -140,7 +140,7 @@ Item {
Layout.maximumWidth: 25 Layout.maximumWidth: 25
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
text: entry.modelData.icon text: entry.modelData.icon
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: entry.modelData.iconSize || 15 font.pixelSize: entry.modelData.iconSize || 15
opacity: entry.modelData.disabled ? 0.4 : 1 opacity: entry.modelData.disabled ? 0.4 : 1

16
dotfiles/.config/quickshell/modules/bar/TailscaleIndicator.qml
View File

@@ -551,7 +551,7 @@ Item {
Layout.maximumWidth: 20 Layout.maximumWidth: 20
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
text: exitRow.subIcon text: exitRow.subIcon
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
@@ -568,7 +568,7 @@ Item {
Text { Text {
visible: exitRow.active visible: exitRow.active
text: "check_circle" text: "check_circle"
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: rowMouse.containsMouse ? Colors.primaryText : Colors.primary color: rowMouse.containsMouse ? Colors.primaryText : Colors.primary
@@ -613,7 +613,7 @@ Item {
Layout.maximumWidth: 20 Layout.maximumWidth: 20
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
text: "person" text: "person"
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: accountMouse.containsMouse ? Colors.primaryText : Colors.foreground color: accountMouse.containsMouse ? Colors.primaryText : Colors.foreground
@@ -638,7 +638,7 @@ Item {
Text { Text {
visible: accountRow.selected visible: accountRow.selected
text: "check_circle" text: "check_circle"
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: accountMouse.containsMouse ? Colors.primaryText : Colors.primary color: accountMouse.containsMouse ? Colors.primaryText : Colors.primary
@@ -694,7 +694,7 @@ Item {
Layout.maximumWidth: 20 Layout.maximumWidth: 20
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
text: root.osIcon(peerRow.peer.os) text: root.osIcon(peerRow.peer.os)
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: summaryMouse.containsMouse ? Colors.primaryText : Colors.foreground color: summaryMouse.containsMouse ? Colors.primaryText : Colors.foreground
@@ -709,7 +709,7 @@ Item {
} }
Text { Text {
text: peerRow.expanded ? "expand_less" : "content_copy" text: peerRow.expanded ? "expand_less" : "content_copy"
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: summaryMouse.containsMouse ? Colors.primaryText : Colors.muted color: summaryMouse.containsMouse ? Colors.primaryText : Colors.muted
@@ -915,7 +915,7 @@ Item {
spacing: 8 spacing: 8
Text { Text {
text: "open_in_new" text: "open_in_new"
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: signInMouse.containsMouse ? Colors.primaryText : Colors.foreground color: signInMouse.containsMouse ? Colors.primaryText : Colors.foreground
@@ -986,7 +986,7 @@ Item {
Text { Text {
visible: root.status.selfIp !== "" visible: root.status.selfIp !== ""
text: "content_copy" text: "content_copy"
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 12 font.pixelSize: 12
color: copyMouse.containsMouse ? Colors.primary : Colors.muted color: copyMouse.containsMouse ? Colors.primary : Colors.muted

6
dotfiles/.config/quickshell/modules/bar/Volume.qml
View File

@@ -95,7 +95,7 @@ Item {
Text { Text {
id: label id: label
anchors.centerIn: parent anchors.centerIn: parent
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 16 font.pixelSize: 16
color: Colors.foreground color: Colors.foreground
@@ -245,7 +245,7 @@ Item {
Layout.maximumWidth: 18 Layout.maximumWidth: 18
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text: deviceRow.icon text: deviceRow.icon
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
@@ -325,7 +325,7 @@ Item {
Text { Text {
text: label.text text: label.text
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 40 font.pixelSize: 40
color: Colors.foreground color: Colors.foreground

6
dotfiles/.config/quickshell/modules/bar/VpnIndicator.qml
View File

@@ -316,7 +316,7 @@ Item {
Text { Text {
id: label id: label
anchors.centerIn: parent anchors.centerIn: parent
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: Appearance.iconSize font.pixelSize: Appearance.iconSize
color: root.anyConnected ? Colors.primary : Colors.muted color: root.anyConnected ? Colors.primary : Colors.muted
@@ -398,7 +398,7 @@ Item {
Layout.maximumWidth: 20 Layout.maximumWidth: 20
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text: provRow.subIcon text: provRow.subIcon
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: provRow.state === "connected" ? Colors.primary : Colors.foreground color: provRow.state === "connected" ? Colors.primary : Colors.foreground
@@ -493,7 +493,7 @@ Item {
Text { Text {
text: "vpn_lock" text: "vpn_lock"
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 22 font.pixelSize: 22
color: root.anyConnected ? Colors.primary : Colors.foreground color: root.anyConnected ? Colors.primary : Colors.foreground

2
dotfiles/.config/quickshell/modules/osd/VolumeOsd.qml
View File

@@ -53,7 +53,7 @@ PanelWindow {
spacing: 12 spacing: 12
Text { Text {
font.family: Appearance.iconFontFamily font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 18 font.pixelSize: 18
color: Colors.foreground color: Colors.foreground