diff --git a/Bar.qml b/Bar.qml
index e75b00d..b23d363 100644
--- a/Bar.qml
+++ b/Bar.qml
@@ -4,6 +4,11 @@ import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Effects
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import Quickshell.Services.UPower
+import Quickshell.Services.SystemTray
+import qs.config
Scope {
Variants {
@@ -18,65 +23,279 @@ Scope {
top: true
}
- implicitHeight: 30
- implicitWidth: 1200
+ implicitHeight: 40
+ implicitWidth: 1150
Rectangle {
anchors.fill: parent
- radius: 8
- color: "#101213"
- clip: true
+ radius: Appearance.radius
+ color: Appearance.colors.background
- RowLayout {
+ FlexboxLayout {
+ id: flexLayout
anchors.fill: parent
+ anchors.margins: Appearance.margin
+
+ wrap: FlexboxLayout.Wrap
+ direction: FlexboxLayout.Row
+ justifyContent: FlexboxLayout.JustifySpaceBetween
+
Rectangle {
- color: handler.hovered ? "purple" : "gray"
- Layout.fillHeight: true
+ color: 'transparent'
+ implicitHeight: parent.height
Layout.fillWidth: true
- Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
- Behavior on color {
- ColorAnimation {
- duration: 200
+ Row {
+ Layout.fillWidth: true
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: parent.left
+ spacing: Appearance.spacing
+
+ Button {
+ padding: Appearance.padding
+ display: AbstractButton.IconOnly
+
+ icon.color: Appearance.colors.foreground
+ icon.source: Quickshell.shellPath("assets") + "/icons/nix.svg"
+ onClicked: {
+ Quickshell.execDetached(["vicinae", "toggle"]);
+ }
+
+ hoverEnabled: true
+
+ HoverHandler {
+ cursorShape: Qt.PointingHandCursor
+ }
+
+ background: Rectangle {
+ anchors.fill: parent
+ radius: Appearance.radius
+ color: parent.hovered ? Appearance.colors.inActive : Appearance.colors.background
+
+ Behavior on color {
+ ColorAnimation {
+ duration: Appearance.duration
+ }
+ }
+ }
+ }
+
+ Button {
+ property real percentage: Math.round(UPower.displayDevice.percentage * 100)
+ property real energyRate: UPower.displayDevice.changeRate
+ property string iconBase: Quickshell.shellPath("assets") + "/icons/"
+ property string iconName: parent.percentage < 30 ? "battery-low.svg" : parent.percentage < 70 ? "battery-medium.svg" : "battery-full.svg"
+
+ padding: Appearance.padding
+
+ text: `${percentage}% ${energyRate}W`
+ palette.buttonText: Appearance.colors.foreground
+ font.family: Appearance.font.family
+ font.pointSize: Appearance.font.pointSize
+
+ icon.color: Appearance.colors.foreground
+ icon.source: iconBase + iconName
+
+ background: Rectangle {
+ anchors.fill: parent
+ radius: Appearance.radius
+ color: Appearance.colors.inActive
+ }
}
}
+ }
- MouseArea {
- id: mouseArea
- anchors.fill: parent
- hoverEnabled: true
- cursorShape: Qt.PointingHandCursor
- onClicked: {
- Quickshell.execDetached(["vicinae", "toggle"]);
+ Rectangle {
+ color: 'transparent'
+ implicitHeight: parent.height
+ Layout.fillWidth: true
+
+ Row {
+ Layout.fillWidth: true
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.horizontalCenter: parent.horizontalCenter
+ spacing: Appearance.spacing
+
+ Repeater {
+ model: 7
+
+ Rectangle {
+ property var ws: Hyprland.workspaces.values.find(w => w.id === index + 1)
+ property bool isActive: Hyprland.focusedWorkspace?.id === (index + 1)
+ Layout.alignment: Qt.AlignVCenter
+ radius: 1000
+ implicitHeight: 15
+
+ implicitWidth: isActive ? this.implicitHeight * 2.3 : this.implicitHeight
+
+ color: {
+ if (handler.hovered) {
+ return Appearance.colors.accent;
+ } else if (isActive || ws) {
+ return Appearance.colors.accent;
+ } else {
+ return Appearance.colors.inActive;
+ }
+ }
+
+ MouseArea {
+ hoverEnabled: true
+ anchors.fill: parent
+ cursorShape: Qt.PointingHandCursor
+ onClicked: Hyprland.dispatch("workspace " + (index + 1))
+ }
+
+ Behavior on color {
+ ColorAnimation {
+ duration: Appearance.duration
+ }
+ }
+ HoverHandler {
+ id: handler
+ }
+
+ Behavior on implicitWidth {
+ NumberAnimation {
+ duration: Appearance.duration
+ easing.type: Easing.OutQuad
+ }
+ }
+ }
}
}
-
- HoverHandler {
- id: handler
- }
-
- Image {
- id: launcherIcon
- anchors.centerIn: parent
- source: Quickshell.shellPath("assets") + "/icons/nix-symbolic.svg"
- height: parent.height * 0.7
- fillMode: Image.PreserveAspectFit
- }
}
Rectangle {
- color: 'magenta'
- Layout.fillHeight: true
+ color: 'transparent'
+ implicitHeight: parent.height
Layout.fillWidth: true
- Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
- }
- Rectangle {
- color: 'yellow'
- Layout.fillHeight: true
- Layout.fillWidth: true
- Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
- Clock {
- anchors.centerIn: parent
+ Row {
+ Layout.fillWidth: true
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.right: parent.right
+ spacing: Appearance.spacing
+
+ Button {
+ padding: Appearance.padding
+ display: AbstractButton.IconOnly
+
+ icon.color: Appearance.colors.foreground
+ icon.source: Quickshell.shellPath("assets") + "/icons/wifi.svg"
+ onClicked: {
+ Quickshell.execDetached(["vicinae", "vicinae://extensions/dagimg-dot/wifi-commander/scan-wifi"]);
+ }
+
+ hoverEnabled: true
+
+ HoverHandler {
+ cursorShape: Qt.PointingHandCursor
+ }
+
+ background: Rectangle {
+ anchors.fill: parent
+ radius: Appearance.radius
+ color: parent.hovered ? Appearance.colors.inActive : Appearance.colors.background
+
+ Behavior on color {
+ ColorAnimation {
+ duration: Appearance.duration
+ }
+ }
+ }
+ }
+
+ Button {
+ padding: Appearance.padding
+ display: AbstractButton.IconOnly
+
+ icon.color: Appearance.colors.foreground
+ icon.source: Quickshell.shellPath("assets") + "/icons/bluetooth.svg"
+ onClicked: {
+ Quickshell.execDetached(["vicinae", "vicinae://extensions/Gelei/bluetooth/devices"]);
+ }
+
+ hoverEnabled: true
+
+ HoverHandler {
+ cursorShape: Qt.PointingHandCursor
+ }
+
+ background: Rectangle {
+ anchors.fill: parent
+ radius: Appearance.radius
+ color: parent.hovered ? Appearance.colors.inActive : Appearance.colors.background
+
+ Behavior on color {
+ ColorAnimation {
+ duration: Appearance.duration
+ }
+ }
+ }
+ }
+
+ Rectangle {
+ implicitWidth: sysTrayRow.implicitWidth + 10
+ implicitHeight: parent.height
+ radius: Appearance.radius
+ color: Appearance.colors.inActive
+
+ Row {
+ id: sysTrayRow
+
+ anchors.centerIn: parent
+ spacing: Appearance.spacing
+
+ Repeater {
+ model: SystemTray.items.values.length
+ Image {
+ source: SystemTray.items.values[index].icon
+ height: parent.parent.height - 15
+ width: parent.parent.height - 15
+ }
+ }
+ }
+ }
+
+ Button {
+ padding: Appearance.padding
+ text: Time.time
+
+ palette.buttonText: Appearance.colors.foreground
+ font.family: Appearance.font.family
+ font.pointSize: Appearance.font.pointSize
+
+ background: Rectangle {
+ anchors.fill: parent
+ radius: Appearance.radius
+ color: Appearance.colors.inActive
+ }
+ }
+
+ Button {
+ padding: Appearance.padding
+ display: AbstractButton.IconOnly
+
+ icon.color: Appearance.colors.foreground
+ icon.source: Quickshell.shellPath("assets") + "/icons/ghost.svg"
+
+ hoverEnabled: true
+
+ HoverHandler {
+ cursorShape: Qt.PointingHandCursor
+ }
+
+ background: Rectangle {
+ anchors.fill: parent
+ radius: Appearance.radius
+ color: parent.hovered ? Appearance.colors.inActive : Appearance.colors.background
+
+ Behavior on color {
+ ColorAnimation {
+ duration: Appearance.duration
+ }
+ }
+ }
+ }
}
}
}
diff --git a/Clock.qml b/Clock.qml
deleted file mode 100644
index c8899a0..0000000
--- a/Clock.qml
+++ /dev/null
@@ -1,5 +0,0 @@
-import QtQuick
-
-Text {
- text: Time.time
-}
diff --git a/assets/icons/fa-battery-charging-symbolic.svg b/assets/icons/battery-charging.svg
similarity index 97%
rename from assets/icons/fa-battery-charging-symbolic.svg
rename to assets/icons/battery-charging.svg
index ad0f19c..0aee4e2 100644
--- a/assets/icons/fa-battery-charging-symbolic.svg
+++ b/assets/icons/battery-charging.svg
@@ -1 +1 @@
-
+
diff --git a/assets/icons/fa-battery-full-symbolic.svg b/assets/icons/battery-full.svg
similarity index 98%
rename from assets/icons/fa-battery-full-symbolic.svg
rename to assets/icons/battery-full.svg
index 9ab9292..9a74064 100644
--- a/assets/icons/fa-battery-full-symbolic.svg
+++ b/assets/icons/battery-full.svg
@@ -1 +1 @@
-
+
diff --git a/assets/icons/fa-battery-low-symbolic.svg b/assets/icons/battery-low.svg
similarity index 96%
rename from assets/icons/fa-battery-low-symbolic.svg
rename to assets/icons/battery-low.svg
index 7e1ad36..90cd270 100644
--- a/assets/icons/fa-battery-low-symbolic.svg
+++ b/assets/icons/battery-low.svg
@@ -1 +1 @@
-
+
diff --git a/assets/icons/fa-battery-medium-symbolic.svg b/assets/icons/battery-medium.svg
similarity index 98%
rename from assets/icons/fa-battery-medium-symbolic.svg
rename to assets/icons/battery-medium.svg
index 58a80e1..0eed9f2 100644
--- a/assets/icons/fa-battery-medium-symbolic.svg
+++ b/assets/icons/battery-medium.svg
@@ -1 +1 @@
-
+
diff --git a/assets/icons/fa-bluetooth-symbolic.svg b/assets/icons/bluetooth.svg
similarity index 87%
rename from assets/icons/fa-bluetooth-symbolic.svg
rename to assets/icons/bluetooth.svg
index cdecbfd..5fea192 100644
--- a/assets/icons/fa-bluetooth-symbolic.svg
+++ b/assets/icons/bluetooth.svg
@@ -1 +1 @@
-
+
diff --git a/assets/icons/fa-bell-off-symbolic.svg b/assets/icons/fa-bell-off-symbolic.svg
deleted file mode 100644
index 79c7193..0000000
--- a/assets/icons/fa-bell-off-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-bell-symbolic.svg b/assets/icons/fa-bell-symbolic.svg
deleted file mode 100644
index 0f6b924..0000000
--- a/assets/icons/fa-bell-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-brightness-symbolic.svg b/assets/icons/fa-brightness-symbolic.svg
deleted file mode 100644
index 9d48459..0000000
--- a/assets/icons/fa-brightness-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-broom-symbolic.svg b/assets/icons/fa-broom-symbolic.svg
deleted file mode 100644
index 8cf3af6..0000000
--- a/assets/icons/fa-broom-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-cpu-symbolic.svg b/assets/icons/fa-cpu-symbolic.svg
deleted file mode 100644
index b6ebc4f..0000000
--- a/assets/icons/fa-cpu-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-cpu-usage-symbolic.svg b/assets/icons/fa-cpu-usage-symbolic.svg
deleted file mode 100644
index 4d0b8e9..0000000
--- a/assets/icons/fa-cpu-usage-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-home-symbolic.svg b/assets/icons/fa-home-symbolic.svg
deleted file mode 100644
index f9a1252..0000000
--- a/assets/icons/fa-home-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-keyboard-symbolic.svg b/assets/icons/fa-keyboard-symbolic.svg
deleted file mode 100644
index ef73326..0000000
--- a/assets/icons/fa-keyboard-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-lock-symbolic.svg b/assets/icons/fa-lock-symbolic.svg
deleted file mode 100644
index e8bbd42..0000000
--- a/assets/icons/fa-lock-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-microphone-symbolic.svg b/assets/icons/fa-microphone-symbolic.svg
deleted file mode 100644
index 328b1cf..0000000
--- a/assets/icons/fa-microphone-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-power-symbolic.svg b/assets/icons/fa-power-symbolic.svg
deleted file mode 100644
index a15a059..0000000
--- a/assets/icons/fa-power-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-ram-symbolic.svg b/assets/icons/fa-ram-symbolic.svg
deleted file mode 100644
index ba67b4b..0000000
--- a/assets/icons/fa-ram-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-screenshot-symbolic.svg b/assets/icons/fa-screenshot-symbolic.svg
deleted file mode 100644
index f24dd8b..0000000
--- a/assets/icons/fa-screenshot-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-speaker-muted-symbolic.svg b/assets/icons/fa-speaker-muted-symbolic.svg
deleted file mode 100644
index d2e98c4..0000000
--- a/assets/icons/fa-speaker-muted-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-speaker-symbolic.svg b/assets/icons/fa-speaker-symbolic.svg
deleted file mode 100644
index b8f5065..0000000
--- a/assets/icons/fa-speaker-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-speed-symbolic.svg b/assets/icons/fa-speed-symbolic.svg
deleted file mode 100644
index 99531df..0000000
--- a/assets/icons/fa-speed-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-video-card-symbolic.svg b/assets/icons/fa-video-card-symbolic.svg
deleted file mode 100644
index 202f08c..0000000
--- a/assets/icons/fa-video-card-symbolic.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/icons/fa-ghost-symbolic.svg b/assets/icons/ghost.svg
similarity index 93%
rename from assets/icons/fa-ghost-symbolic.svg
rename to assets/icons/ghost.svg
index 78347b4..e6609b1 100644
--- a/assets/icons/fa-ghost-symbolic.svg
+++ b/assets/icons/ghost.svg
@@ -1 +1 @@
-
+
diff --git a/assets/icons/nix-symbolic.svg b/assets/icons/nix.svg
similarity index 100%
rename from assets/icons/nix-symbolic.svg
rename to assets/icons/nix.svg
diff --git a/assets/icons/fa-wifi-symbolic.svg b/assets/icons/wifi.svg
similarity index 97%
rename from assets/icons/fa-wifi-symbolic.svg
rename to assets/icons/wifi.svg
index 76eca52..1fb54d8 100644
--- a/assets/icons/fa-wifi-symbolic.svg
+++ b/assets/icons/wifi.svg
@@ -1 +1 @@
-
+
diff --git a/config/Appearance.qml b/config/Appearance.qml
new file mode 100644
index 0000000..0b17d9a
--- /dev/null
+++ b/config/Appearance.qml
@@ -0,0 +1,35 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+
+Singleton {
+ id: root
+ property QtObject colors
+ property QtObject font
+
+ property int margin
+ property int radius
+ property int spacing
+ property int padding
+ property int duration
+
+ margin: 8
+ radius: 8
+ spacing: 8
+ padding: 8
+ duration: 150
+
+ font: QtObject {
+ property string family: "FiraCode Nerd Font Mono SemBd"
+ property int pointSize: 9
+ }
+
+ colors: QtObject {
+ property color accent: "#6791c9"
+ property color foreground: "#ffffff"
+ property color background: "#101213"
+ property color inActive: "#1b1d1e"
+ }
+}