This commit is contained in:
end-4
2025-04-11 00:05:34 +02:00
parent ff93725b28
commit ad63ae699f
6 changed files with 339 additions and 5 deletions
+5 -1
View File
@@ -25,7 +25,7 @@ Scope {
RowLayout {
anchors.centerIn: parent
implicitWidth: 500
spacing: 8 // TODO: Why is this halved when rendered??
spacing: 8
RowLayout {
spacing: 4
@@ -57,6 +57,10 @@ Scope {
Layout.alignment: Qt.AlignVCenter
}
Battery {
Layout.alignment: Qt.AlignVCenter
}
}
}
@@ -0,0 +1,98 @@
import "../common"
import "../common/widgets"
import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Io
import Quickshell.Services.UPower
Rectangle {
readonly property var chargeState: UPower.displayDevice.state
readonly property bool isCharging: chargeState == UPowerDeviceState.Charging
readonly property bool isPluggedIn: isCharging || chargeState == UPowerDeviceState.PendingCharge
readonly property real percentage: UPower.displayDevice.percentage
readonly property bool isLow: percentage <= ConfigOptions.bar.batteryLowThreshold / 100
readonly property int batterySlideDistance: 10
readonly property color batteryLowBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3error : Appearance.m3colors.m3errorContainer
readonly property color batteryLowOnBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3errorContainer : Appearance.m3colors.m3error
implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
implicitHeight: 32
color: Appearance.colors.colLayer1
radius: Appearance.rounding.small
Process {
id: screenSnip
command: ["grimblast", "copy", "area"]
}
RowLayout {
id: rowLayout
spacing: 4
anchors.centerIn: parent
Rectangle {
implicitWidth: (isCharging ? boltIcon.width : 0) - rowLayout.spacing
Behavior on implicitWidth {
NumberAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
easing.bezierCurve: Appearance.animation.elementDecel.bezierCurve
}
}
}
StyledText {
Layout.alignment: Qt.AlignVCenter
color: Appearance.colors.colOnLayer1
text: `${percentage * 100}%`
}
CircularProgress {
Layout.alignment: Qt.AlignVCenter
lineWidth: 2
value: percentage
size: 26
secondaryColor: (isLow && !isCharging) ? batteryLowBackground : Appearance.m3colors.m3secondaryContainer
primaryColor: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
fill: (isLow && !isCharging)
MaterialSymbol {
anchors.centerIn: parent
text: "battery_full"
font.pointSize: Appearance.font.pointSize.normal
color: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
}
}
}
MaterialSymbol {
id: boltIcon
anchors.left: rowLayout.left
anchors.verticalCenter: rowLayout.verticalCenter
text: "bolt"
font.pointSize: Appearance.font.pointSize.large
color: Appearance.m3colors.m3onSecondaryContainer
visible: opacity !== 0 // Only show when charging
opacity: isCharging ? 1 : 0 // Keep opacity for visibility
Behavior on opacity {
NumberAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
easing.bezierCurve: Appearance.animation.elementDecel.bezierCurve
}
}
}
}
@@ -97,7 +97,6 @@ Rectangle {
color: Appearance.colors.colLayer2
opacity: workspaceOccupied[index] ? 1 : 0
// color: workspaceOccupied[index] ? Appearance.colors.colLayer2 : "transparent"
Behavior on opacity {
NumberAnimation {
@@ -154,9 +153,7 @@ Rectangle {
Button {
id: button
Layout.fillHeight: true
topInset: 7
bottomInset: 7
onPressed: Hyprland.dispath(`workspace ${index+1}`)
onPressed: Hyprland.dispatch(`workspace ${index+1}`)
width: workspaceButtonWidth
contentItem: StyledText {
@@ -5,6 +5,7 @@ pragma Singleton
Singleton {
property QtObject bar: QtObject {
property int workspacesShown: 10
property int batteryLowThreshold: 20
}
}
@@ -0,0 +1,69 @@
// From https://github.com/rafzby/circular-progressbar
// License: LGPL-3.0 - A copy can be found in `licenses` folder of repo
import QtQuick 2.9
Item {
id: root
property int size: 30
property int lineWidth: 2
property real value: 0
property color primaryColor: "#29b6f6"
property color secondaryColor: "#e0e0e0"
property bool fill: false
property int fillOverflow: 2
property int animationDuration: 1000
width: size
height: size
onValueChanged: {
canvas.degree = value * 360;
}
Canvas {
id: canvas
property real degree: 0
anchors.fill: parent
antialiasing: true
onDegreeChanged: {
requestPaint();
}
onPaint: {
var ctx = getContext("2d");
var x = root.width / 2;
var y = root.height / 2;
var radius = root.size / 2 - root.lineWidth;
var startAngle = (Math.PI / 180) * 270;
var fullAngle = (Math.PI / 180) * (270 + 360);
var progressAngle = (Math.PI / 180) * (270 + degree);
ctx.reset();
if (root.fill) {
ctx.fillStyle = root.secondaryColor;
ctx.beginPath();
ctx.arc(x, y, radius + fillOverflow, startAngle, fullAngle);
ctx.fill();
}
ctx.lineCap = 'round';
ctx.lineWidth = root.lineWidth;
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, fullAngle);
ctx.strokeStyle = root.secondaryColor;
ctx.stroke();
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, progressAngle);
ctx.strokeStyle = root.primaryColor;
ctx.stroke();
}
Behavior on degree {
NumberAnimation {
duration: root.animationDuration
}
}
}
}