never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #62 from quadbyte/battery-widget-rework

Browse source 
Battery widget rework
This commit is contained in:
Lysec 2025-07-31 15:01:26 +02:00 • committed by GitHub
commit 9632abc542
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 122 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

123
Bar/Modules/Battery.qml
View file

@ -1,12 +1,13 @@
import QtQuick import QtQuick
import Quickshell
import Quickshell.Services.UPower import Quickshell.Services.UPower
import QtQuick.Layouts import QtQuick.Layouts
import qs.Settings
import qs.Components import qs.Components
import qs.Settings
Item { Item {
id: batteryWidget id: batteryWidget
property var battery: UPower.displayDevice property var battery: UPower.displayDevice
property bool isReady: battery && battery.ready && battery.isLaptopBattery && battery.isPresent property bool isReady: battery && battery.ready && battery.isLaptopBattery && battery.isPresent
property real percent: isReady ? (battery.percentage * 100) : 0 property real percent: isReady ? (battery.percentage * 100) : 0
@ -15,81 +16,63 @@ Item {
// Choose icon based on charge and charging state // Choose icon based on charge and charging state
function batteryIcon() { function batteryIcon() {
if (!show) return ""; if (!show)
return "";
// Show charging icons with lightning when charging
if (charging) { if (charging)
if (percent >= 95) return "battery_charging_full"; return "battery_android_bolt";
if (percent >= 80) return "battery_charging_80";
if (percent >= 60) return "battery_charging_60"; if (percent >= 95)
if (percent >= 50) return "battery_charging_50"; return "battery_android_full";
if (percent >= 30) return "battery_charging_30";
if (percent >= 20) return "battery_charging_20"; var step = Math.round(percent / (100 / 6));
return "battery_charging_20"; // Use charging_20 for very low battery return "battery_android_" + step
}
// Regular battery icons when not charging
if (percent >= 95) return "battery_full";
if (percent >= 80) return "battery_80";
if (percent >= 60) return "battery_60";
if (percent >= 50) return "battery_50";
if (percent >= 30) return "battery_30";
if (percent >= 20) return "battery_20";
return "battery_alert";
} }
visible: isReady && battery.isLaptopBattery visible: isReady && battery.isLaptopBattery
width: 22 width: pill.width
height: 36 height: pill.height
RowLayout { PillIndicator {
anchors.fill: parent id: pill
spacing: 4 icon: batteryIcon()
visible: show text: Math.round(batteryWidget.percent) + "%"
Item { pillColor: Theme.surfaceVariant
height: 22 iconCircleColor: Theme.accentPrimary
width: 22 textColor: charging ? Theme.accentPrimary : Theme.textPrimary
Text { MouseArea {
text: batteryIcon() anchors.fill: parent
font.family: "Material Symbols Outlined" hoverEnabled: true
font.pixelSize: 14 onEntered: {
color: charging ? Theme.accentPrimary : Theme.textPrimary pill.show();
verticalAlignment: Text.AlignVCenter batteryTooltip.tooltipVisible = true;
anchors.centerIn: parent
} }
MouseArea { onExited: {
id: batteryMouseArea pill.hide();
anchors.fill: parent batteryTooltip.tooltipVisible = false;
hoverEnabled: true
onEntered: batteryWidget.containsMouse = true
onExited: batteryWidget.containsMouse = false
cursorShape: Qt.PointingHandCursor
} }
} }
} StyledTooltip {
id: batteryTooltip
property bool containsMouse: false text: {
let lines = [];
StyledTooltip { if (batteryWidget.isReady) {
id: batteryTooltip lines.push(batteryWidget.charging ? "Charging" : "Discharging");
text: { lines.push(Math.round(batteryWidget.percent) + "%");
let lines = []; if (batteryWidget.battery.changeRate !== undefined)
if (batteryWidget.isReady) { lines.push("Rate: " + batteryWidget.battery.changeRate.toFixed(2) + " W");
lines.push(batteryWidget.charging ? "Charging" : "Discharging"); if (batteryWidget.battery.timeToEmpty > 0)
lines.push(Math.round(batteryWidget.percent) + "%"); lines.push("Time left: " + Math.floor(batteryWidget.battery.timeToEmpty / 60) + " min");
if (batteryWidget.battery.changeRate !== undefined) if (batteryWidget.battery.timeToFull > 0)
lines.push("Rate: " + batteryWidget.battery.changeRate.toFixed(2) + " W"); lines.push("Time to full: " + Math.floor(batteryWidget.battery.timeToFull / 60) + " min");
if (batteryWidget.battery.timeToEmpty > 0) if (batteryWidget.battery.healthPercentage !== undefined)
lines.push("Time left: " + Math.floor(batteryWidget.battery.timeToEmpty / 60) + " min"); lines.push("Health: " + Math.round(batteryWidget.battery.healthPercentage) + "%");
if (batteryWidget.battery.timeToFull > 0) }
lines.push("Time to full: " + Math.floor(batteryWidget.battery.timeToFull / 60) + " min"); return lines.join("\n");
if (batteryWidget.battery.healthPercentage !== undefined)
lines.push("Health: " + Math.round(batteryWidget.battery.healthPercentage) + "%");
} }
return lines.join("\n"); tooltipVisible: false
targetItem: pill
delay: 1500
} }
tooltipVisible: batteryWidget.containsMouse
targetItem: batteryWidget
delay: 200
} }
} }

21
Bar/Modules/Brightness.qml
View file

@ -13,6 +13,7 @@ Item {
property bool isSettingBrightness: false property bool isSettingBrightness: false
property bool hasPendingSet: false property bool hasPendingSet: false
property int pendingSetValue: -1 property int pendingSetValue: -1
property bool firstChange: true
width: pill.width width: pill.width
height: pill.height height: pill.height
@ -30,7 +31,13 @@ Item {
previousBrightness = brightness previousBrightness = brightness
brightness = val brightness = val
pill.text = brightness + "%" pill.text = brightness + "%"
pill.show()
if (firstChange) {
firstChange = false;
}
else {
pill.show()
}
} }
} }
} }
@ -94,14 +101,19 @@ Item {
iconCircleColor: Theme.accentPrimary iconCircleColor: Theme.accentPrimary
iconTextColor: Theme.backgroundPrimary iconTextColor: Theme.backgroundPrimary
textColor: Theme.textPrimary textColor: Theme.textPrimary
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onEntered: { onEntered: {
getBrightness() getBrightness()
brightnessTooltip.tooltipVisible = true brightnessTooltip.tooltipVisible = true
pill.show()
}
onExited: {
brightnessTooltip.tooltipVisible = false
pill.hide()
} }
onExited: brightnessTooltip.tooltipVisible = false
onWheel: function(wheel) { onWheel: function(wheel) {
const delta = wheel.angleDelta.y > 0 ? 5 : -5 const delta = wheel.angleDelta.y > 0 ? 5 : -5
@ -114,14 +126,11 @@ Item {
text: "Brightness: " + brightness + "%" text: "Brightness: " + brightness + "%"
tooltipVisible: false tooltipVisible: false
targetItem: pill targetItem: pill
delay: 200 delay: 1500
} }
} }
Component.onCompleted: { Component.onCompleted: {
getBrightness() getBrightness()
if (brightness >= 0) {
pill.show()
}
} }
} }

25
Bar/Modules/Volume.qml
View file

@ -8,6 +8,7 @@ Item {
id: volumeDisplay id: volumeDisplay
property var shell property var shell
property int volume: 0 property int volume: 0
property bool firstChange: true
width: pillIndicator.width width: pillIndicator.width
height: pillIndicator.height height: pillIndicator.height
@ -23,13 +24,14 @@ Item {
iconCircleColor: Theme.accentPrimary iconCircleColor: Theme.accentPrimary
iconTextColor: Theme.backgroundPrimary iconTextColor: Theme.backgroundPrimary
textColor: Theme.textPrimary textColor: Theme.textPrimary
autoHide: true
StyledTooltip { StyledTooltip {
id: volumeTooltip id: volumeTooltip
text: "Volume: " + volume + "%\nScroll up/down to change volume.\nLeft click to open the input/output selection." text: "Volume: " + volume + "%\nScroll up/down to change volume.\nLeft click to open the input/output selection."
tooltipVisible: !ioSelector.visible && volumeDisplay.containsMouse tooltipVisible: !ioSelector.visible && volumeDisplay.containsMouse
targetItem: pillIndicator targetItem: pillIndicator
delay: 200 delay: 1500
} }
MouseArea { MouseArea {
@ -57,7 +59,13 @@ Item {
pillIndicator.icon = shell.defaultAudioSink && shell.defaultAudioSink.audio && shell.defaultAudioSink.audio.muted pillIndicator.icon = shell.defaultAudioSink && shell.defaultAudioSink.audio && shell.defaultAudioSink.audio.muted
? "volume_off" ? "volume_off"
: (volume === 0 ? "volume_off" : (volume < 30 ? "volume_down" : "volume_up")); : (volume === 0 ? "volume_off" : (volume < 30 ? "volume_down" : "volume_up"));
pillIndicator.show();
if (firstChange) {
firstChange = false
}
else {
pillIndicator.show();
}
} }
} }
} }
@ -66,7 +74,6 @@ Item {
Component.onCompleted: { Component.onCompleted: {
if (shell && shell.volume !== undefined) { if (shell && shell.volume !== undefined) {
volume = Math.max(0, Math.min(100, shell.volume)); volume = Math.max(0, Math.min(100, shell.volume));
pillIndicator.show();
} }
} }
@ -75,8 +82,16 @@ Item {
hoverEnabled: true hoverEnabled: true
acceptedButtons: Qt.NoButton acceptedButtons: Qt.NoButton
propagateComposedEvents: true propagateComposedEvents: true
onEntered: volumeDisplay.containsMouse = true onEntered: {
onExited: volumeDisplay.containsMouse = false volumeDisplay.containsMouse = true
pillIndicator.autoHide = false;
pillIndicator.show()
}
onExited: {
volumeDisplay.containsMouse = false
pillIndicator.autoHide = true;
pillIndicator.hide()
}
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onWheel: (wheel) => { onWheel: (wheel) => {
if (!shell) return; if (!shell) return;

53
Components/PillIndicator.qml
View file

@ -15,6 +15,7 @@ Item {
property int pillHeight: 22 property int pillHeight: 22
property int iconSize: 22 property int iconSize: 22
property int pillPaddingHorizontal: 14 property int pillPaddingHorizontal: 14
property bool autoHide: false
// Internal state // Internal state
property bool showPill: false property bool showPill: false
@ -24,8 +25,8 @@ Item {
readonly property int pillOverlap: iconSize / 2 readonly property int pillOverlap: iconSize / 2
readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap) readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
signal shown() signal shown
signal hidden() signal hidden
width: iconSize + (showPill ? maxPillWidth - pillOverlap : 0) width: iconSize + (showPill ? maxPillWidth - pillOverlap : 0)
height: pillHeight height: pillHeight
@ -54,11 +55,17 @@ Item {
Behavior on width { Behavior on width {
enabled: showAnim.running || hideAnim.running enabled: showAnim.running || hideAnim.running
NumberAnimation { duration: 250; easing.type: Easing.OutCubic } NumberAnimation {
duration: 250
easing.type: Easing.OutCubic
}
} }
Behavior on opacity { Behavior on opacity {
enabled: showAnim.running || hideAnim.running enabled: showAnim.running || hideAnim.running
NumberAnimation { duration: 250; easing.type: Easing.OutCubic } NumberAnimation {
duration: 250
easing.type: Easing.OutCubic
}
} }
} }
@ -73,7 +80,10 @@ Item {
anchors.right: parent.right anchors.right: parent.right
Behavior on color { Behavior on color {
ColorAnimation { duration: 200; easing.type: Easing.InOutQuad } ColorAnimation {
duration: 200
easing.type: Easing.InOutQuad
}
} }
Text { Text {
@ -106,11 +116,11 @@ Item {
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
onStarted: { onStarted: {
showPill = true showPill = true;
} }
onStopped: { onStopped: {
delayedHideAnim.start() delayedHideAnim.start();
shown() shown();
} }
} }
@ -118,8 +128,13 @@ Item {
SequentialAnimation { SequentialAnimation {
id: delayedHideAnim id: delayedHideAnim
running: false running: false
PauseAnimation { duration: 2500 } PauseAnimation {
ScriptAction { script: if (shouldAnimateHide) hideAnim.start() } duration: 2500
}
ScriptAction {
script: if (shouldAnimateHide)
hideAnim.start()
}
} }
// Hide animation // Hide animation
@ -143,27 +158,27 @@ Item {
easing.type: Easing.InCubic easing.type: Easing.InCubic
} }
onStopped: { onStopped: {
showPill = false showPill = false;
shouldAnimateHide = false shouldAnimateHide = false;
hidden() hidden();
} }
} }
// Exposed functions // Exposed functions
function show() { function show() {
if (!showPill) { if (!showPill) {
shouldAnimateHide = true shouldAnimateHide = autoHide;
showAnim.start() showAnim.start();
} else { } else {
// Reset hide timer if already shown // Reset hide timer if already shown
hideAnim.stop() hideAnim.stop();
delayedHideAnim.restart() delayedHideAnim.restart();
} }
} }
function hide() { function hide() {
if (showPill) { if (showPill) {
hideAnim.start() hideAnim.start();
} }
} }
} }