diff --git a/configuration/modules/dots/quick_shell/quick_config/config/assets/logo.svg b/configuration/modules/dots/quick_shell/quick_config/config/assets/logo.svg
new file mode 100644
index 0000000..1cceefe
--- /dev/null
+++ b/configuration/modules/dots/quick_shell/quick_config/config/assets/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/configuration/modules/dots/quick_shell/quick_config/config/assets/power.svg b/configuration/modules/dots/quick_shell/quick_config/config/assets/power.svg
new file mode 100644
index 0000000..aced5be
--- /dev/null
+++ b/configuration/modules/dots/quick_shell/quick_config/config/assets/power.svg
@@ -0,0 +1,18 @@
+
+
+
\ No newline at end of file
diff --git a/configuration/modules/dots/quick_shell/quick_config/config/shell.qml b/configuration/modules/dots/quick_shell/quick_config/config/shell.qml
index 62adad7..837dfd1 100644
--- a/configuration/modules/dots/quick_shell/quick_config/config/shell.qml
+++ b/configuration/modules/dots/quick_shell/quick_config/config/shell.qml
@@ -2,10 +2,23 @@ pragma ComponentBehavior: Bound
import Quickshell
import QtQuick
+import QtQuick.Controls
ShellRoot {
id: root
+ property color bgColor: "#6a6365"
+ property color recColor: "#595254"
+ property color fontColor: "#FFFFFF"
+ property int fontSize: 14
+ property int barWidth: 50
+ property int recRadius: 8
+ property int recLength: 35
+ property int myMargin: 10
+ property int edgeMargin: 15
+
+ property bool expanderOpen: false
+
SystemClock {
id: clock
precision: SystemClock.Minutes
@@ -18,18 +31,174 @@ ShellRoot {
property var modelData
screen: modelData
-
anchors.top: true
anchors.left: true
anchors.bottom: true
- implicitWidth: 50
- color: "#9d8a90"
+
+ implicitWidth: root.barWidth
+ color: root.bgColor
+
+ Rectangle {
+ id: logo
+
+ anchors {
+ horizontalCenter: parent.horizontalCenter
+ top: parent.top
+ topMargin: root.edgeMargin
+ }
+
+ implicitHeight: root.recLength
+ implicitWidth: root.recLength
+ color: root.recColor
+
+ bottomLeftRadius: root.recRadius
+ bottomRightRadius: root.recRadius
+ topLeftRadius: root.recRadius
+ topRightRadius: root.recRadius
+
+ Image {
+ anchors.centerIn: parent
+ source: "file://" + Quickshell.shellDir + "/assets/logo.svg"
+
+ sourceSize.width: 30
+ sourceSize.height: 30
+ }
+ }
+
+ Rectangle {
+ id: workspaces
+
+ anchors {
+ horizontalCenter: parent.horizontalCenter
+ top: logo.bottom
+ topMargin: root.myMargin
+ }
+
+ implicitHeight: 200
+ implicitWidth: root.recLength
+ color: root.recColor
+
+ bottomLeftRadius: root.recRadius
+ bottomRightRadius: root.recRadius
+ topLeftRadius: root.recRadius
+ topRightRadius: root.recRadius
+
+ Text {
+ anchors.centerIn: parent
+ color: root.fontColor
+ font.pixelSize: root.fontSize
+ text: "ws"
+ }
+ }
+
+ Rectangle {
+ id: notifications
+
+ anchors {
+ horizontalCenter: parent.horizontalCenter
+ bottom: time.top
+ bottomMargin: root.myMargin
+ }
+
+ implicitHeight: root.recLength
+ implicitWidth: root.recLength
+ color: root.recColor
+
+ bottomLeftRadius: root.recRadius
+ bottomRightRadius: root.recRadius
+ topLeftRadius: root.recRadius
+ topRightRadius: root.recRadius
+
+ Text {
+ anchors.centerIn: parent
+ color: root.fontColor
+ font.pixelSize: root.fontSize
+ text: "notif"
+ }
+ }
+
+ Rectangle {
+ id: time
+
+ anchors {
+ horizontalCenter: parent.horizontalCenter
+ bottom: power.top
+ bottomMargin: root.myMargin
+ }
+
+ implicitHeight: root.recLength
+ implicitWidth: root.recLength
+ color: root.recColor
+
+ bottomLeftRadius: root.recRadius
+ bottomRightRadius: root.recRadius
+ topLeftRadius: root.recRadius
+ topRightRadius: root.recRadius
+
+ Text {
+ anchors.centerIn: parent
+ color: root.fontColor
+ font.pixelSize: root.fontSize
+ text: Qt.formatDateTime(clock.date, "hh\nmm")
+ }
+ }
+
+ Button {
+ id: power
+
+ anchors {
+ horizontalCenter: parent.horizontalCenter
+ bottom: parent.bottom
+ bottomMargin: root.edgeMargin
+ }
+
+ implicitHeight: root.recLength - 4
+ implicitWidth: root.recLength - 4
+
+ onClicked: root.expanderOpen = !root.expanderOpen
+
+ Rectangle {
+ anchors.centerIn: parent
+
+ implicitHeight: root.recLength
+ implicitWidth: root.recLength
+ color: root.recColor
+
+ bottomLeftRadius: root.recRadius
+ bottomRightRadius: root.recRadius
+ topLeftRadius: root.recRadius
+ topRightRadius: root.recRadius
+
+ Image {
+ anchors.centerIn: parent
+ source: "file://" + Quickshell.shellDir + "/assets/power.svg"
+
+ sourceSize.width: 28
+ sourceSize.height: 28
+ }
+ }
+ }
+ }
+ }
+
+ PanelWindow {
+ visible: root.expanderOpen
+
+ anchors.left: true
+ anchors.bottom: true
+
+ implicitWidth: 200
+ implicitHeight: 150
+ color: "transparent"
+
+ Rectangle {
+ anchors.fill: parent
+ color: root.recColor
Text {
anchors.centerIn: parent
- color: "#FFFFFF"
- font.pixelSize: 14
- text: Qt.formatDateTime(clock.date, "hh\nmm")
+ color: root.fontColor
+ text: "Power Menu"
}
}
}