wip

components/StyledPopup.qml

@@ -0,0 +1,37 @@
+import qs.config
+import QtQuick
+import Quickshell
+import Quickshell.Hyprland
+
+PopupWindow {
+    id: root
+
+    implicitWidth: background.implicitWidth
+    implicitHeight: background.implicitHeight
+    color: "transparent"
+
+    function open() {
+        visible = true;
+    }
+
+    function close() {
+        visible = false;
+    }
+
+    HyprlandFocusGrab {
+        id: grab
+        windows: [root]
+        onCleared: {
+            root.close();
+        }
+      }
+
+    Rectangle {
+        id: background
+        anchors.centerIn: root
+        implicitWidth: root.contentItem.children.reduce((prev, child) => Math.max(prev, child.width), 0)
+        implicitHeight: root.contentItem.children.reduce((prev, child) => prev + child.height, 0)
+        color: Theme.palette.base200
+        radius: 8
+    }
+}

modules/storybook/Storybook.qml

@@ -1,6 +1,5 @@
 pragma ComponentBehavior: Bound
 
-import qs.widgets
 import qs.components
 import qs.config
 import qs.constants
@@ -22,11 +21,6 @@ StyledWindow {
     WlrLayershell.layer: WlrLayer.Top
     WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
 
-    StyledWrapperRectangle {
-        id: rect
-
-        margin: 48
-
     HyprlandFocusGrab {
         active: Visibility.storybook
         windows: [root]
@@ -35,11 +29,20 @@ StyledWindow {
         }
     }
 
-        ColumnLayout {
+    StyledWrapperRectangle {
+        id: rect
 
-            spacing: 12
+        margin: 48
+
+        GridLayout {
+            id: grid
+
+            flow: GridLayout.TopToBottom
+            columns: 2
+            rows: 10
 
             StyledText {
+                Layout.columnSpan: grid.columns
                 Layout.alignment: Qt.AlignHCenter
                 text: "Components"
                 font.pixelSize: 24
@@ -151,7 +154,7 @@ StyledWindow {
 
             ColumnLayout {
                 StyledText {
-                    text: "Menu"
+                    text: "Popup"
                     font.pixelSize: 18
                 }
                 Button {
@@ -159,23 +162,25 @@ StyledWindow {
                     text: "File"
                     onPressed: menu.visible ? menu.close() : menu.open()
 
-                    StyledMenu {
+                    StyledPopup {
                         id: menu
-                        y: fileButton.height
 
-                        StyledMenuItem {
+                        anchor.item: fileButton
+
+                        Column {
+                            StyledButton {
                                 text: "New..."
                             }
-                        StyledMenuItem {
+                            StyledButton {
                                 text: "Open..."
                             }
-                        StyledMenuSeparator {}
-                        StyledMenuItem {
+                            StyledText {
                                 text: "Close"
                             }
                         }
                     }
                 }
+            }
 
             ColumnLayout {
                 StyledText {