bar: make lower-center group more compact

This commit is contained in:
end-4
2026-04-11 21:07:22 +02:00
parent 5f9febd4b7
commit 94fa3f9c40
5 changed files with 82 additions and 95 deletions
@@ -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",
@@ -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
}
@@ -140,13 +140,6 @@ Item { // Bar content region
Layout.fillHeight: false
}
HorizontalBarSeparator {}
VerticalDateWidget {
Layout.fillWidth: true
Layout.fillHeight: false
}
HorizontalBarSeparator {
visible: Battery.available
}
@@ -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 {
@@ -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
}
}
}