qol: bar has blur now

This commit is contained in:
2025-12-28 05:01:18 +00:00
parent 88be74cf74
commit faeaa62edf
3 changed files with 84 additions and 72 deletions

View File

@@ -10,12 +10,18 @@ import Quickshell.Services.UPower
import "common" as Common
Rectangle {
// TODO eventually fix the alignment (it isnt centered horizentally)
// TODO eventually fix the alignment (it isnt centered horizentally)
id: root
property int battPercent: 58
implicitWidth: itemContent.width + 8
implicitHeight: 24
visible: {if (UPower.displayDevice.ready) { true } else {false}}
visible: {
if (UPower.displayDevice.ready) {
true;
} else {
false;
}
}
radius: 5.5
Layout.alignment: Qt.AlignVCenter
color: "#2a2a2a" // Define item color
@@ -24,53 +30,57 @@ Rectangle {
implicitWidth: 24
implicitHeight: 24
anchors.centerIn: parent
Text {
// anchors.centerIn: parent
text: UPower.displayDevice.percentage + "%"
color: Common.Colors.colors.primary
font.weight: Font.DemiBold
font.pointSize: 12
}
Item {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Text {
anchors.centerIn: parent
text: root.getBatteryState(UPower.displayDevice.percentage, (UPower.displayDevice.changeRate > 0))
color: root.getBatteryColor(UPower.displayDevice.percentage)
font.weight: Font.DemiBold
font.pointSize: 24/1.4
}
}
Text {
// anchors.centerIn: parent
text: UPower.displayDevice.percentage * 100 + "%"
color: Common.Colors.colors.primary
font.weight: Font.DemiBold
font.pointSize: 12
}
Item {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
implicitWidth: icon.width
implicitHeight: icon.height
Text {
id: icon
anchors.centerIn: parent
text: root.getBatteryState(UPower.displayDevice.percentage * 100, (UPower.displayDevice.changeRate))
color: root.getBatteryColor(UPower.displayDevice.percentage * 100)
font.weight: Font.DemiBold
font.pointSize: 24 / 1.4
}
}
}
function getBatteryState(level, isCharging) {
if (level === null || level === 0) {
// Return the battery empty icon
return isCharging ? Common.Icons.battery.charging["1"] : Common.Icons.battery["0"];
function getBatteryState(level, isCharging) {
if (level === null || level === 0) {
// Return the battery empty icon
return isCharging ? Common.Icons.battery.charging["1"] : Common.Icons.battery["0"];
}
if (level === 100) {
// Return the battery full icon
return isCharging ? Common.Icons.battery.charging["10"] : Common.Icons.battery["10"];
}
// Calculate step as a value between 1 and 10 (divide level into 10 ranges)
let step = Math.ceil(level / 10); // Range mapping
if (step > 10)
step = 10; // Clamp to 10 if it exceeds bounds
// Return the correct icon based on state
return isCharging ? Common.Icons.battery.charging[String(step)] : Common.Icons.battery[String(step)];
}
function getBatteryColor(level) {
if (level === null || level === 0) {
// Use critical color for empty battery
return Common.Colors.colors.critial2;
}
if (level === 100) {
// Return the battery full icon
return isCharging ? Common.Icons.battery.charging["10"] : Common.Icons.battery["10"];
if (level > 0 && level <= 20) {
// Use critical color for low battery
return Common.Colors.colors.critial2;
}
// Default color if no specific condition is met
return Common.Colors.colors.primary;
}
// Calculate step as a value between 1 and 10 (divide level into 10 ranges)
let step = Math.ceil(level / 10); // Range mapping
if (step > 10) step = 10; // Clamp to 10 if it exceeds bounds
// Return the correct icon based on state
return isCharging ? Common.Icons.battery.charging[String(step)] : Common.Icons.battery[String(step)];
}
function getBatteryColor(level) {
if (level === null || level === 0) {
// Use critical color for empty battery
return Common.Colors.colors.critial2;
}
if (level > 0 && level <= 20) {
// Use critical color for low battery
return Common.Colors.colors.critial2;
}
// Default color if no specific condition is met
return Common.Colors.colors.primary;
}
}

View File

@@ -12,31 +12,32 @@ Singleton {
// speaker: "../../../assets/bar/V2/speaker.svg",
// speakerOff: "../../../assets/bar/V2/speakerOff.svg"
// })
readonly property var battery: ({
"0": "󰂎",
"1": "󰁺",
"2": "󰁻",
"3": "󰁼",
"4": "󰁾",
"5": "󰁾",
"6": "󰁿",
"7": "󰂀",
"8": "󰂁",
"9": "󰂂",
"10": "󰁹",
charging: ({
"1": "󰢜",
"2": "󰂆",
"3": "󰂇",
"4": "󰂈",
"5": "󰢝",
"6": "󰂉",
"7": "󰢞",
"8": "󰂊",
"9": "󰂋",
"10": "󰂅",
})
})
// TODO replace all these icons with svg's
readonly property var battery: ({
"0": "󰂎",
"1": "󰁺",
"2": "󰁻",
"3": "󰁼",
"4": "󰁾",
"5": "󰁾",
"6": "󰁿",
"7": "󰂀",
"8": "󰂁",
"9": "󰂂",
"10": "󰁹",
charging: ({
"1": "󰢜",
"2": "󰂆",
"3": "󰂇",
"4": "󰂈",
"5": "󰢝",
"6": "󰂉",
"7": "󰢞",
"8": "󰂊",
"9": "󰂋",
"10": "󰂅"
})
})
readonly property var audioIcons: ({
microphone: "󰍬",