From 75ef6f908501b296e73c470d87df133948ca823b Mon Sep 17 00:00:00 2001 From: Doloro1978 Date: Sat, 27 Dec 2025 00:22:53 +0000 Subject: [PATCH] added: battery indicator onto bar --- modules/nixvim/home.nix | 1 + .../quickshell/quickshell/assets/bar/Mic.svg | 2 +- .../quickshell/assets/bar/MutedMic.svg | 2 +- .../quickshell/assets/bar/MutedSpeaker.svg | 2 +- .../quickshell/assets/bar/Speaker.svg | 2 +- .../quickshell/assets/bar/V2/mic.svg | 2 +- .../quickshell/assets/bar/V2/micOff.svg | 2 +- .../quickshell/assets/bar/V2/speaker.svg | 2 +- .../quickshell/assets/bar/V2/speakerOff.svg | 2 +- modules/quickshell/quickshell/bar/Bar.qml | 2 +- .../quickshell/bar/widgets/Audio.qml | 48 ++++---- .../quickshell/bar/widgets/Battery.qml | 105 ++++++++++-------- .../quickshell/bar/widgets/Demo.qml | 3 +- .../quickshell/bar/widgets/common/Colors.qml | 11 +- .../quickshell/bar/widgets/common/Icons.qml | 41 +++++-- .../bar/widgets/common/ImageColorShader.qml | 30 +++++ .../bar/widgets/common/VerticalSeprator.qml | 12 +- 17 files changed, 173 insertions(+), 96 deletions(-) mode change 100644 => 100755 modules/quickshell/quickshell/assets/bar/V2/mic.svg mode change 100644 => 100755 modules/quickshell/quickshell/assets/bar/V2/micOff.svg mode change 100644 => 100755 modules/quickshell/quickshell/assets/bar/V2/speaker.svg mode change 100644 => 100755 modules/quickshell/quickshell/assets/bar/V2/speakerOff.svg create mode 100644 modules/quickshell/quickshell/bar/widgets/common/ImageColorShader.qml diff --git a/modules/nixvim/home.nix b/modules/nixvim/home.nix index ff1fd34..a2a5b7d 100644 --- a/modules/nixvim/home.nix +++ b/modules/nixvim/home.nix @@ -37,6 +37,7 @@ in configs = true; }; plugins = { + todo-comments.enable = true; lsp-status.enable = true; lsp = { enable = true; diff --git a/modules/quickshell/quickshell/assets/bar/Mic.svg b/modules/quickshell/quickshell/assets/bar/Mic.svg index b11891e..8331678 100755 --- a/modules/quickshell/quickshell/assets/bar/Mic.svg +++ b/modules/quickshell/quickshell/assets/bar/Mic.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/modules/quickshell/quickshell/assets/bar/MutedMic.svg b/modules/quickshell/quickshell/assets/bar/MutedMic.svg index 1f54754..7120ce1 100755 --- a/modules/quickshell/quickshell/assets/bar/MutedMic.svg +++ b/modules/quickshell/quickshell/assets/bar/MutedMic.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/modules/quickshell/quickshell/assets/bar/MutedSpeaker.svg b/modules/quickshell/quickshell/assets/bar/MutedSpeaker.svg index 0a5c295..7be2869 100755 --- a/modules/quickshell/quickshell/assets/bar/MutedSpeaker.svg +++ b/modules/quickshell/quickshell/assets/bar/MutedSpeaker.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/modules/quickshell/quickshell/assets/bar/Speaker.svg b/modules/quickshell/quickshell/assets/bar/Speaker.svg index b5c71be..1b75429 100755 --- a/modules/quickshell/quickshell/assets/bar/Speaker.svg +++ b/modules/quickshell/quickshell/assets/bar/Speaker.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/modules/quickshell/quickshell/assets/bar/V2/mic.svg b/modules/quickshell/quickshell/assets/bar/V2/mic.svg old mode 100644 new mode 100755 index 0d26014..8331678 --- a/modules/quickshell/quickshell/assets/bar/V2/mic.svg +++ b/modules/quickshell/quickshell/assets/bar/V2/mic.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/modules/quickshell/quickshell/assets/bar/V2/micOff.svg b/modules/quickshell/quickshell/assets/bar/V2/micOff.svg old mode 100644 new mode 100755 index 155b7db..7120ce1 --- a/modules/quickshell/quickshell/assets/bar/V2/micOff.svg +++ b/modules/quickshell/quickshell/assets/bar/V2/micOff.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/modules/quickshell/quickshell/assets/bar/V2/speaker.svg b/modules/quickshell/quickshell/assets/bar/V2/speaker.svg old mode 100644 new mode 100755 index ed3296d..1b75429 --- a/modules/quickshell/quickshell/assets/bar/V2/speaker.svg +++ b/modules/quickshell/quickshell/assets/bar/V2/speaker.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/modules/quickshell/quickshell/assets/bar/V2/speakerOff.svg b/modules/quickshell/quickshell/assets/bar/V2/speakerOff.svg old mode 100644 new mode 100755 index 19b855a..7be2869 --- a/modules/quickshell/quickshell/assets/bar/V2/speakerOff.svg +++ b/modules/quickshell/quickshell/assets/bar/V2/speakerOff.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/modules/quickshell/quickshell/bar/Bar.qml b/modules/quickshell/quickshell/bar/Bar.qml index 36f574e..e45f202 100755 --- a/modules/quickshell/quickshell/bar/Bar.qml +++ b/modules/quickshell/quickshell/bar/Bar.qml @@ -16,7 +16,7 @@ PanelWindow { property var modelData screen: modelData.values[0] - color: '#20ffffff' + color: Common.Colors.colors.mainBackground anchors { top: true left: true diff --git a/modules/quickshell/quickshell/bar/widgets/Audio.qml b/modules/quickshell/quickshell/bar/widgets/Audio.qml index 6c55944..f35d0aa 100755 --- a/modules/quickshell/quickshell/bar/widgets/Audio.qml +++ b/modules/quickshell/quickshell/bar/widgets/Audio.qml @@ -6,6 +6,8 @@ import Quickshell.Widgets import Quickshell.Services.Pipewire import QtQuick.VectorImage import QtQuick.Effects +import QtQuick.Shapes 1.10 +import QtQuick.Effects import "common" as Common Rectangle { @@ -15,48 +17,42 @@ Rectangle { PwObjectTracker { objects: [root.microphoneNode, root.speakerNode] } - implicitWidth: itemContent.width + 4 + implicitWidth: itemContent.width + 8 implicitHeight: 24 radius: 5.5 - Layout.alignment: Qt.AlignVCenter - color: "#2a2a2a" // Define item color + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + color: Common.Colors.colors.secondary // Define item color + // color: "#2a2a2a" RowLayout { id: itemContent + anchors.centerIn: parent + // spacing: 100 Repeater { model: [ { - on: "../../assets/bar/V2/speaker.svg", - off: "../../assets/bar/V2/speakerOff.svg", + on: Common.Icons.audioIcons["speaker"], + off: Common.Icons.audioIcons["speakerMuted"], node: root.speakerNode }, { - on: "../../assets/bar/V2/mic.svg", - off: "../../assets/bar/V2/micOff.svg", + on: Common.Icons.audioIcons["microphone"], + off: Common.Icons.audioIcons["microphoneMuted"], node: root.microphoneNode }, ] Item { + id: meow implicitWidth: 24 + Layout.alignment: Qt.AlignHCenter implicitHeight: 24 - // anchors.centerIn: parent - VectorImage { - id: svgImage - width: parent.width - height: parent.height - source: modelData.node.audio.muted ? modelData.off : modelData.on - visible: false - fillMode: Image.PreserveAspectFit // Adjusts the SVG while keeping the aspect ratio - } - MultiEffect { - source: svgImage - width: parent.width - height: parent.height - // anchors.centerIn: parent - Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter - colorization: 1 - brightness: 1 - colorizationColor: modelData.node.audio.muted ? "#e53b3c" : "#b1b2b5" - } + Text { + id: textElement + anchors.centerIn: parent // Ensure the text fills the parent item + text: modelData.node.audio.muted ? modelData.off : modelData.on + font.pointSize: 18.25 + font.weight: Font.DemiBold + color: modelData.node.audio.muted ? Common.Colors.colors.critial2 : Common.Colors.colors.primary + } } } } diff --git a/modules/quickshell/quickshell/bar/widgets/Battery.qml b/modules/quickshell/quickshell/bar/widgets/Battery.qml index c6c296b..6fd113d 100644 --- a/modules/quickshell/quickshell/bar/widgets/Battery.qml +++ b/modules/quickshell/quickshell/bar/widgets/Battery.qml @@ -10,62 +10,73 @@ import Quickshell.Services.UPower import "common" as Common Rectangle { + // TODO eventually fix the alignment (it isnt centered horizentally) id: root property int battPercent: 58 - implicitWidth: itemContent.width + 4 + implicitWidth: itemContent.width + 8 implicitHeight: 24 + enabled: { + if (UPower.displayDevice != null) { + true + } else { + false + } + } radius: 5.5 Layout.alignment: Qt.AlignVCenter color: "#2a2a2a" // Define item color - Item { + RowLayout { id: itemContent implicitWidth: 24 implicitHeight: 24 - // anchors.centerIn: parent - VectorImage { - id: svgImage - width: parent.width - height: parent.height - source: "../../assets/bar/batt/" + root.getBatteryState(UPower.displayDevice.percentage) + ".svg" - visible: false - fillMode: Image.PreserveAspectFit // Adjusts the SVG while keeping the aspect ratio - } - MultiEffect { - source: svgImage - width: parent.width - height: parent.height - // anchors.centerIn: parent - Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter - // colorization: 1 - brightness: 1 - // colorizationColor: modelData.node.audio.muted ? "#e53b3c" : "#b1b2b5" - } + anchors.centerIn: parent + Text { + // anchors.centerIn: parent + text: "58%" + 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 + } + } } - function getBatteryState(level) { - if (level === null) { - return 0; - } - - level = Math.max(0, Math.min(100, level)); - - if (level === 0) - return 0; // 0% exactly - if (level === 100) - return 7; // 100% exactly - - if (level > 0 && level <= 16) - return 1; - if (level > 16 && level <= 32) - return 2; - if (level > 32 && level <= 48) - return 3; - if (level > 48 && level <= 64) - return 4; - if (level > 64 && level <= 80) - return 5; - if (level > 80 && level < 100) - return 6; - - return 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 > 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; +} } diff --git a/modules/quickshell/quickshell/bar/widgets/Demo.qml b/modules/quickshell/quickshell/bar/widgets/Demo.qml index 6401e02..746b926 100644 --- a/modules/quickshell/quickshell/bar/widgets/Demo.qml +++ b/modules/quickshell/quickshell/bar/widgets/Demo.qml @@ -11,7 +11,7 @@ Rectangle { id: backgroundRect implicitWidth: rowLayout.implicitWidth + 6 // Account for padding (2px left + 2px right) implicitHeight: rowLayout.implicitHeight + 4 // Account for padding (2px top + 2px bottom) - color: "black" + color: Common.Colors.colors.background radius: 6.5 // Background rectangle with rounded corners // border.color: "gray" // border.width: 1 @@ -33,6 +33,7 @@ Rectangle { Audio {} Battery {} + Common.VerticalSeprator {} Clock.Date {} Clock.Clock {} } diff --git a/modules/quickshell/quickshell/bar/widgets/common/Colors.qml b/modules/quickshell/quickshell/bar/widgets/common/Colors.qml index 310f069..340835f 100755 --- a/modules/quickshell/quickshell/bar/widgets/common/Colors.qml +++ b/modules/quickshell/quickshell/bar/widgets/common/Colors.qml @@ -6,7 +6,16 @@ import Quickshell.Io Singleton { id: root + // XX (alpha) XXXXXX (color) + + // For oled screen that risk burn in, set up these colors as semi-transparent and have a rotating wallpaper (!!) readonly property var colors: ({ - "primary": "", + primary: "#59b1b2b5", // Icons & Text colors + secondary: "#BF2a2a2a", // Pill container colors + background: "#BF000000", // Background of containers + mainBackground: "#20ffffff", // Color of the main bar + warning: "#E9D502", // (i.e battery nearing low) + critial: "#e53b3c", // (i.e battery is low) + critial2: "#e53b3c", // (Speaker and Mic being off) }) } diff --git a/modules/quickshell/quickshell/bar/widgets/common/Icons.qml b/modules/quickshell/quickshell/bar/widgets/common/Icons.qml index 30b2845..722355c 100755 --- a/modules/quickshell/quickshell/bar/widgets/common/Icons.qml +++ b/modules/quickshell/quickshell/bar/widgets/common/Icons.qml @@ -6,16 +6,41 @@ import Quickshell.Io Singleton { id: root - readonly property var svgs: ({ - micOff: "../../../assets/bar/V2/micOff.svg", - mic: "../../../assets/bar/V2/mic.svg", - speaker: "../../../assets/bar/V2/speaker.svg", - speakerOff: "../../../assets/bar/V2/speakerOff.svg" - }) + // readonly property var svgs: ({ + // micOff: "../../../assets/bar/V2/micOff.svg", + // mic: "../../../assets/bar/V2/mic.svg", + // 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": "󰂅", + }) + }) readonly property var audioIcons: ({ - microphone: "", - microphoneMuted: "", + microphone: "󰍬", + microphoneMuted: "󰍭", speaker: "󰕾", speakerMuted: "󰖁" }) diff --git a/modules/quickshell/quickshell/bar/widgets/common/ImageColorShader.qml b/modules/quickshell/quickshell/bar/widgets/common/ImageColorShader.qml new file mode 100644 index 0000000..5b18b18 --- /dev/null +++ b/modules/quickshell/quickshell/bar/widgets/common/ImageColorShader.qml @@ -0,0 +1,30 @@ +// ColorOverlayShader.qml +import QtQuick 2.15 + Rectangle { + id: mainContent + anchors.fill: parent + color: "blue" + + // Clip the rectangle to a shape + clip: true + + Shape { + anchors.fill: parent + + // Custom Path defined as a vector + Path { + PathSvg { + path: "M10,80 C40,10 65,10 95,80 S150,150 180,80" // Vector path + } + } + + ShapePath { + strokeColor: "transparent" // No stroke, act only as the mask + fillColor: "blue" + fillGradient: Gradient { + GradientStop { position: 0.0; color: "yellow" } + GradientStop { position: 1.0; color: "orange" } + } + } + } + } diff --git a/modules/quickshell/quickshell/bar/widgets/common/VerticalSeprator.qml b/modules/quickshell/quickshell/bar/widgets/common/VerticalSeprator.qml index 3287f01..6ef0139 100755 --- a/modules/quickshell/quickshell/bar/widgets/common/VerticalSeprator.qml +++ b/modules/quickshell/quickshell/bar/widgets/common/VerticalSeprator.qml @@ -2,12 +2,16 @@ import Quickshell import QtQml import QtQuick - Rectangle { - id: a + Item { + id: root anchors { top: parent.top bottom: parent.bottom } - width: 2 - color: "#8d8d8d" + Rectangle { + anchors.centerIn: root + implicitHeight: root.height - 4 + width: 1 + color: "#8d8d8d" + } }