flyout position, theme

modules/Flyout.qml

@@ -15,29 +15,37 @@ PanelWindow {
     WlrLayershell.exclusiveZone: 0
     WlrLayershell.namespace: "nova-flyout"
 
-    anchors {
+    anchors.top: true
-        top: true
+    anchors.left: true
-        left: true
-        right: true
-    }
 
-    margins.top: M.Theme.barHeight + 4
+    // Flush below bar, centered on hovered item
-    implicitHeight: box.implicitHeight + 8
+    margins.top: M.Theme.barHeight
+    margins.left: Math.max(0, Math.min(
+        Math.round(M.FlyoutState.itemX - implicitWidth / 2),
+        screen.width - implicitWidth
+    ))
 
+    implicitWidth: label.implicitWidth + M.Theme.barPadding * 2
+    implicitHeight: label.implicitHeight + M.Theme.barPadding * 2
+
+    // Background matching bar style
     Rectangle {
-        id: box
+        anchors.fill: parent
-
+        color: M.Theme.base00
-        x: Math.max(4, Math.min(M.FlyoutState.itemX - implicitWidth / 2, parent.width - implicitWidth - 4))
+        opacity: M.Theme.barOpacity
-        y: 4
-
-        implicitWidth: label.implicitWidth + 16
-        implicitHeight: label.implicitHeight + 12
-
-        color: M.Theme.base01
-        border.color: M.Theme.base03
-        border.width: 1
         radius: M.Theme.radius
 
+        // Cover the top rounded corners so the flyout
+        // appears flush / attached to the bar above
+        Rectangle {
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: parent.radius
+            color: M.Theme.base00
+        }
+    }
+
     Text {
         id: label
         anchors.centerIn: parent
@@ -47,4 +55,3 @@ PanelWindow {
         font.family: M.Theme.fontFamily
     }
 }
-}