diff --git a/modules/Flyout.qml b/modules/Flyout.qml index c5569ae..33a77d9 100644 --- a/modules/Flyout.qml +++ b/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 + } }