flyout position, theme

modules/Flyout.qml

@@ -15,36 +15,43 @@ PanelWindow {
     WlrLayershell.exclusiveZone: 0
     WlrLayershell.namespace: "nova-flyout"
 
-    anchors {
-        top: true
-        left: true
-        right: true
-    }
+    anchors.top: true
+    anchors.left: true
 
-    margins.top: M.Theme.barHeight + 4
-    implicitHeight: box.implicitHeight + 8
+    // Flush below bar, centered on hovered item
+    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
-
-        x: Math.max(4, Math.min(M.FlyoutState.itemX - implicitWidth / 2, parent.width - implicitWidth - 4))
-        y: 4
-
-        implicitWidth: label.implicitWidth + 16
-        implicitHeight: label.implicitHeight + 12
-
-        color: M.Theme.base01
-        border.color: M.Theme.base03
-        border.width: 1
+        anchors.fill: parent
+        color: M.Theme.base00
+        opacity: M.Theme.barOpacity
         radius: M.Theme.radius
 
-        Text {
-            id: label
-            anchors.centerIn: parent
-            text: M.FlyoutState.text
-            color: M.Theme.base05
-            font.pixelSize: M.Theme.fontSize
-            font.family: M.Theme.fontFamily
+        // 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
+        text: M.FlyoutState.text
+        color: M.Theme.base05
+        font.pixelSize: M.Theme.fontSize
+        font.family: M.Theme.fontFamily
+    }
 }