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,24 +21,28 @@ StyledWindow {
     WlrLayershell.layer: WlrLayer.Top
     WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
 
+    HyprlandFocusGrab {
+        active: Visibility.storybook
+        windows: [root]
+        onCleared: {
+            Visibility.storybook = false;
+        }
+    }
+
     StyledWrapperRectangle {
         id: rect
 
         margin: 48
 
-        HyprlandFocusGrab {
+        GridLayout {
-            active: Visibility.storybook
+            id: grid
-            windows: [root]
-            onCleared: {
-                Visibility.storybook = false;
-            }
-        }
 
-        ColumnLayout {
+            flow: GridLayout.TopToBottom
-
+            columns: 2
-            spacing: 12
+            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,19 +162,21 @@ StyledWindow {
                     text: "File"
                     onPressed: menu.visible ? menu.close() : menu.open()
 
-                    StyledMenu {
+                    StyledPopup {
                         id: menu
-                        y: fileButton.height
 
-                        StyledMenuItem {
+                        anchor.item: fileButton
-                            text: "New..."
+
-                        }
+                        Column {
-                        StyledMenuItem {
+                            StyledButton {
-                            text: "Open..."
+                                text: "New..."
-                        }
+                            }
-                        StyledMenuSeparator {}
+                            StyledButton {
-                        StyledMenuItem {
+                                text: "Open..."
-                            text: "Close"
+                            }
+                            StyledText {
+                                text: "Close"
+                            }
                         }
                     }
                 }