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" + } +}