From 94fa3f9c4009796b9a1d2ae2659b87fcbd9bd8b2 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sat, 11 Apr 2026 21:07:22 +0200 Subject: [PATCH] bar: make lower-center group more compact --- .../quickshell/ii/modules/common/Icons.qml | 30 +++++++++ .../ii/verticalBar/BatteryIndicator.qml | 28 +++++--- .../ii/verticalBar/VerticalBarContent.qml | 7 -- .../ii/verticalBar/VerticalClockWidget.qml | 48 +++++++++----- .../ii/verticalBar/VerticalDateWidget.qml | 64 ------------------- 5 files changed, 82 insertions(+), 95 deletions(-) delete mode 100644 dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalDateWidget.qml diff --git a/dots/.config/quickshell/ii/modules/common/Icons.qml b/dots/.config/quickshell/ii/modules/common/Icons.qml index 9858d2963..30bd3bf14 100644 --- a/dots/.config/quickshell/ii/modules/common/Icons.qml +++ b/dots/.config/quickshell/ii/modules/common/Icons.qml @@ -3,10 +3,22 @@ pragma Singleton // From https://github.com/caelestia-dots/shell (GPLv3) import Quickshell +import qs.services Singleton { id: root + function getBatteryIcon(percentage: int): string { + if (percentage >= 93) return "battery_android_full"; + if (percentage >= 78) return "battery_android_6"; + if (percentage >= 64) return "battery_android_5"; + if (percentage >= 50) return "battery_android_4"; + if (percentage >= 35) return "battery_android_3"; + if (percentage >= 21) return "battery_android_2"; + if (percentage >= 7) return "battery_android_1"; + return "battery_android_0"; + } + function getBluetoothDeviceMaterialSymbol(systemIconName: string): string { if (systemIconName.includes("headset") || systemIconName.includes("headphones")) return "headphones"; @@ -21,6 +33,24 @@ Singleton { return "bluetooth"; } + function getNetworkMaterialSymbol() { + if (Network.ethernet) return "lan"; + if (Network.wifiEnabled && Network.wifiStatus === "connected") { + const strength = Network.active?.strength ?? 0 + if (strength > 83) return "signal_wifi_4_bar"; + if (strength > 67) return "network_wifi"; + if (strength > 50) return "network_wifi_3_bar"; + if (strength > 33) return "network_wifi_2_bar"; + if (strength > 17) return "network_wifi_1_bar"; + return "signal_wifi_0_bar" + } else { + if (Network.wifiStatus === "connecting") return "signal_wifi_statusbar_not_connected"; + if (Network.wifiStatus === "disconnected") return "wifi_find"; + if (Network.wifiStatus === "disabled") return "signal_wifi_off"; + return "signal_wifi_bad"; + } + } + readonly property var weatherIconMap: ({ "113": "clear_day", "116": "partly_cloudy_day", diff --git a/dots/.config/quickshell/ii/modules/ii/verticalBar/BatteryIndicator.qml b/dots/.config/quickshell/ii/modules/ii/verticalBar/BatteryIndicator.qml index 3f20cbd2c..104baa35c 100644 --- a/dots/.config/quickshell/ii/modules/ii/verticalBar/BatteryIndicator.qml +++ b/dots/.config/quickshell/ii/modules/ii/verticalBar/BatteryIndicator.qml @@ -21,14 +21,15 @@ MouseArea { id: batteryProgress anchors.centerIn: parent vertical: true - valueBarWidth: 21 - valueBarHeight: 40 + valueBarWidth: 20 + valueBarHeight: 36 value: percentage + // value: 1 highlightColor: (isLow && !isCharging) ? Appearance.m3colors.m3error : Appearance.colors.colOnSecondaryContainer font { - pixelSize: text.length > 2 ? 11 : 13 - weight: text.length > 2 ? Font.Medium : Font.DemiBold + pixelSize: 13 + weight: Font.DemiBold } textMask: Item { @@ -36,20 +37,29 @@ MouseArea { width: batteryProgress.valueBarWidth height: batteryProgress.valueBarHeight - ColumnLayout { + Column { anchors.centerIn: parent - spacing: 0 + spacing: -4 MaterialSymbol { id: boltIcon - Layout.alignment: Qt.AlignHCenter + anchors.horizontalCenter: parent.horizontalCenter fill: 1 - text: isCharging ? "bolt" : "battery_android_full" + text: { + if (batteryProgress.value == 1) { + return "check"; + } else if (root.isCharging) { + return "bolt"; + } else { + return Icons.getBatteryIcon(Battery.percentage * 100); + } + } iconSize: Appearance.font.pixelSize.normal animateChange: true } StyledText { - Layout.alignment: Qt.AlignHCenter + visible: text.length <= 2 + anchors.horizontalCenter: parent.horizontalCenter font: batteryProgress.font text: batteryProgress.text } diff --git a/dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalBarContent.qml b/dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalBarContent.qml index 4e34d421a..b9689be83 100644 --- a/dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalBarContent.qml +++ b/dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalBarContent.qml @@ -140,13 +140,6 @@ Item { // Bar content region Layout.fillHeight: false } - HorizontalBarSeparator {} - - VerticalDateWidget { - Layout.fillWidth: true - Layout.fillHeight: false - } - HorizontalBarSeparator { visible: Battery.available } diff --git a/dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalClockWidget.qml b/dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalClockWidget.qml index 3f9ca818a..6c8788715 100644 --- a/dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalClockWidget.qml +++ b/dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalClockWidget.qml @@ -8,26 +8,44 @@ import qs.modules.ii.bar as Bar Item { id: root property bool borderless: Config.options.bar.borderless - implicitHeight: clockColumn.implicitHeight + implicitHeight: column.implicitHeight implicitWidth: Appearance.sizes.verticalBarWidth - ColumnLayout { - id: clockColumn - anchors.centerIn: parent - spacing: 0 + readonly property string dateTimeString: DateTime.time + readonly property bool hasAmPm: dateTimeString.toLowerCase().includes("am") || dateTimeString.toLowerCase().includes("pm") - Repeater { - model: DateTime.time.split(/[: ]/) - delegate: StyledText { - required property string modelData - Layout.alignment: Qt.AlignHCenter - font.pixelSize: modelData.match(/am|pm/i) ? - Appearance.font.pixelSize.smaller // Smaller "am"/"pm" text - : Appearance.font.pixelSize.large - color: Appearance.colors.colOnLayer1 - text: modelData.padStart(2, "0") + Column { + id: column + anchors.centerIn: parent + spacing: root.hasAmPm ? 6 : 0 + + Column { + anchors.horizontalCenter: parent.horizontalCenter + spacing: -4 + + Repeater { + model: root.dateTimeString.split(/[: ]/) + delegate: StyledText { + required property string modelData + anchors.horizontalCenter: parent.horizontalCenter + font.pixelSize: { + if (modelData.match(/am|pm/i)) + return Appearance.font.pixelSize.smaller; + else + // Smaller "am"/"pm" text + return Appearance.font.pixelSize.large; + } + color: Appearance.colors.colOnLayer1 + text: modelData.padStart(2, "0") + } } } + StyledText { + anchors.horizontalCenter: parent.horizontalCenter + font.pixelSize: Appearance.font.pixelSize.smallest + color: Appearance.colors.colOnLayer1 + text: DateTime.shortDate + } } MouseArea { diff --git a/dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalDateWidget.qml b/dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalDateWidget.qml deleted file mode 100644 index bf76ebe67..000000000 --- a/dots/.config/quickshell/ii/modules/ii/verticalBar/VerticalDateWidget.qml +++ /dev/null @@ -1,64 +0,0 @@ -import qs.modules.common -import qs.modules.common.widgets -import qs.services -import QtQuick -import QtQuick.Shapes -import QtQuick.Layouts -import qs.modules.ii.bar as Bar - -Item { // Full hitbox - id: root - - implicitHeight: content.implicitHeight - implicitWidth: Appearance.sizes.verticalBarWidth - property var dayOfMonth: DateTime.shortDate.split(/[-\/]/)[0] // What if 🍔murica🦅? good question - property var monthOfYear: DateTime.shortDate.split(/[-\/]/)[1] - - Item { // Boundaries for date numbers - id: content - anchors.centerIn: parent - implicitWidth: 24 - implicitHeight: 30 - - Shape { - id: diagonalLine - property real padding: 4 - anchors.fill: parent - preferredRendererType: Shape.CurveRenderer - - ShapePath { - strokeWidth: 1.2 - strokeColor: Appearance.colors.colSubtext - fillColor: "transparent" - startX: content.width - diagonalLine.padding - startY: diagonalLine.padding - PathLine { - x: diagonalLine.padding - y: content.height - diagonalLine.padding - } - } - } - - StyledText { - id: dayText - anchors { - top: parent.top - left: parent.left - } - font.pixelSize: 13 - color: Appearance.colors.colOnLayer1 - text: dayOfMonth - } - - StyledText { - id: monthText - anchors { - bottom: parent.bottom - right: parent.right - } - font.pixelSize: 13 - color: Appearance.colors.colOnLayer1 - text: monthOfYear - } - } -}