Status bar

2026-02-18 18:45:37 -08:00
parent 17d856a3e3
commit ea9f96dab7
5 changed files with 269 additions and 1 deletions
--- a/StatusBar.qml
+++ b/StatusBar.qml
@@ -0,0 +1,139 @@
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Wayland
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import QtQuick.Shapes
+import "." as Shell
+
+PanelWindow {
+    id: root
+    anchors {
+        top: true
+    }
+    implicitWidth: 1024
+    implicitHeight: 1
+    WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+    WlrLayershell.layer: WlrLayer.Overlay
+    exclusionMode: ExclusionMode.Ignore
+    property real radius: 16
+    property var bgColor: "#222222"
+    property int fullHeight: 48
+    color: "transparent"
+    Shape {
+        id: background
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        width: 1000
+        height: 0
+        property real radius: 12
+        property var color: "white"
+        preferredRendererType: Shape.CurveRenderer
+        NumberAnimation on height {
+            id: entry
+            running: false
+            to: fullHeight
+            duration: 300
+            easing.type: Easing.OutBack
+            easing.overshoot: 1.5
+            onStarted: root.implicitHeight = 60
+        }
+        NumberAnimation on height {
+            id: exit
+            running: false
+            to: 0
+            duration: 300
+            easing.type: Easing.InCubic
+            onFinished: root.implicitHeight = 1
+        }
+        ShapePath {
+            strokeWidth: 0
+            fillColor: root.bgColor
+            startX: 0
+            startY: 0
+            PathArc {
+                x: root.radius; y: Math.min(root.radius, background.height/2)
+                radiusX: root.radius; radiusY: y
+                direction: PathArc.Clockwise
+            }
+            PathLine { x: root.radius; y: background.height - Math.min(root.radius, background.height/2) }
+            PathArc {
+                x: root.radius * 2; y: background.height
+                radiusX: root.radius; radiusY: Math.min(root.radius, background.height/2)
+                direction: PathArc.Counterclockwise
+            }
+            PathLine { x: background.width - root.radius * 2; y: background.height }
+            PathArc {
+                x: background.width - root.radius; y: background.height - Math.min(root.radius, background.height/2)
+                radiusX: root.radius; radiusY: Math.min(root.radius, background.height/2)
+                direction: PathArc.Counterclockwise
+            }
+            PathLine { x: background.width - root.radius; y: Math.min(root.radius, background.height/2) }
+            PathArc {
+                x: background.width; y: 0
+                radiusX: root.radius; radiusY: Math.min(root.radius, background.height/2)
+                direction: PathArc.Clockwise
+            }
+        }
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            shadowEnabled: true
+        }
+    }
+    Row {
+        anchors {
+            left: background.left
+            bottom: background.bottom
+            leftMargin: root.radius * 2
+        }
+        height: fullHeight
+        Button {
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            width: 20
+            background: Image {
+                anchors.centerIn: parent
+                width: 20
+                height: width
+                source: Qt.resolvedUrl("./arch.svg")
+                sourceSize {width: width; height: height}
+            }
+        }
+    }
+    Shell.Workspaces {
+        height: fullHeight
+        anchors {
+            horizontalCenter: background.horizontalCenter
+            bottom: background.bottom
+        }
+    }
+    Row {
+        anchors {
+            right: background.right
+            bottom: background.bottom
+            rightMargin: root.radius * 2
+        }
+        height: fullHeight
+        Text {
+            property var clock: SystemClock {}
+            anchors.verticalCenter: parent.verticalCenter
+            color: "white"
+            text: Qt.formatDateTime(clock.date, "ddd MMM dd · hh:mm")
+        }
+    }
+    MouseArea {
+        anchors.fill: background
+        hoverEnabled: true
+        onExited: {
+            entry.stop()
+            exit.start()
+        }
+    }
+    HoverHandler { onHoveredChanged: if (hovered) {
+        exit.stop()
+        entry.start()
+    }}
+}
--- a/Workspaces.qml
+++ b/Workspaces.qml
@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Shapes
+import Quickshell.Hyprland
+
+Row { 
+    Repeater {
+        model: 9
+        delegate: Shape {
+            height: 14
+            width: 24
+            property var workspace: Hyprland.workspaces.values.find(ws => ws.id === modelData)
+            preferredRendererType: Shape.CurveRenderer
+            anchors.verticalCenter: parent.verticalCenter
+            ShapePath {
+                strokeWidth: workspace ? 12 : 4
+                strokeColor: "white"
+                fillColor: "transparent"
+                PathAngleArc {
+                    moveToStart: true
+                    centerX: width/2
+                    centerY: height/2
+                    startAngle: 0
+                    sweepAngle: 360
+                    radiusX: workspace ? 2 : 6
+                    radiusY: radiusX
+                }
+            }
+        }
+    }
+}
--- a/arch.svg
+++ b/arch.svg
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.0"
+   width="200"
+   height="200"
+   id="svg2424"
+   sodipodi:docname="arch.svg"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:zoom="3.5437999"
+     inkscape:cx="90.862918"
+     inkscape:cy="132.06163"
+     inkscape:window-width="1920"
+     inkscape:window-height="1200"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2424" />
+  <defs
+     id="defs2426">
+    <linearGradient
+       x1="112.49854"
+       y1="6.1372099"
+       x2="112.49853"
+       y2="129.3468"
+       id="path1082_2_"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(287,-83)">
+      <stop
+         id="stop193"
+         style="stop-color:#ffffff;stop-opacity:0"
+         offset="0" />
+      <stop
+         id="stop195"
+         style="stop-color:#ffffff;stop-opacity:0.27450982"
+         offset="1" />
+      <midPointStop
+         offset="0"
+         style="stop-color:#FFFFFF"
+         id="midPointStop197" />
+      <midPointStop
+         offset="0.5"
+         style="stop-color:#FFFFFF"
+         id="midPointStop199" />
+      <midPointStop
+         offset="1"
+         style="stop-color:#000000"
+         id="midPointStop201" />
+    </linearGradient>
+    <linearGradient
+       x1="541.33502"
+       y1="104.50665"
+       x2="606.91248"
+       y2="303.14029"
+       id="linearGradient2544"
+       xlink:href="#path1082_2_"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(-0.3937741,0,0,0.393752,357.51969,122.00151)" />
+    <linearGradient
+       id="linearGradient3388">
+      <stop
+         id="stop3390"
+         style="stop-color:#000000;stop-opacity:0"
+         offset="0" />
+      <stop
+         id="stop3392"
+         style="stop-color:#000000;stop-opacity:0.37113401"
+         offset="1" />
+    </linearGradient>
+    <linearGradient
+       x1="490.72305"
+       y1="237.72447"
+       x2="490.72305"
+       y2="183.9644"
+       id="linearGradient4416"
+       xlink:href="#linearGradient3388"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.749107,0,0,0.749107,-35.459862,91.44108)" />
+  </defs>
+  <path
+     d="M 99.981193,0 C 91.07768,21.824936 85.707513,36.101008 75.79462,57.277171 81.872465,63.718474 89.332733,71.219693 101.44818,79.691613 88.422886,74.332791 79.538039,68.952661 72.898249,63.369687 60.211637,89.837277 40.335363,127.53918 0,200 c 31.702241,-18.29881 56.277255,-29.58023 79.179987,-33.88492 -0.983452,-4.22902 -1.542584,-8.80353 -1.504608,-13.57653 l 0.03762,-1.01542 c 0.503041,-20.30697 11.068695,-35.92303 23.584721,-34.86273 12.51604,1.06029 22.24462,18.39178 21.74159,38.69876 -0.0946,3.82113 -0.5257,7.49701 -1.27892,10.90635 C 144.41446,170.69622 168.7267,181.94875 200,200 c -6.16649,-11.35079 -11.67061,-21.58271 -16.92684,-31.32757 -8.27943,-6.4159 -16.91527,-14.76621 -34.53075,-23.80594 12.10787,3.14554 20.77695,6.77466 27.53432,10.83114 C 122.63513,56.217418 118.3075,42.998551 99.981193,0 Z"
+     id="path2518"
+     style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.20358" />
+</svg>
--- a/shell.qml
+++ b/shell.qml
@@ -5,6 +5,7 @@ import "." as Shell
 ShellRoot {
    Shell.Wall {}
    Shell.Launcher {}
+    Shell.StatusBar {}
    Shell.Boateye {}
    Shell.Lock {
        id: lock
--- a/test.js
+++ b/test.js
@@ -1 +0,0 @@
-export default {}