feat: Docks refactor - Top/Bottom options

Modules/Dock/Dock.qml

@@ -7,22 +7,46 @@ import qs.Common
 import qs.Services
 import qs.Widgets
 
-PanelWindow {
-    id: dock
+pragma ComponentBehavior: Bound
 
-    WlrLayershell.namespace: "quickshell:dock"
+Variants {
+    id: dockVariants
+    model: SettingsData.getFilteredScreens("dock")
 
-    WlrLayershell.layer: WlrLayershell.Top
-    WlrLayershell.exclusiveZone: -1
-    WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
-
-    property var modelData
     property var contextMenu
+
+    delegate: PanelWindow {
+        id: dock
+
+        WlrLayershell.namespace: "quickshell:dock"
+
+        anchors {
+            top: SettingsData.dockPosition === SettingsData.Position.Top
+            bottom: SettingsData.dockPosition === SettingsData.Position.Bottom
+            left: true
+            right: true
+        }
+
+        property var modelData: item
     property bool autoHide: SettingsData.dockAutoHide
     property real backgroundTransparency: SettingsData.dockTransparency
     property bool groupByApp: SettingsData.dockGroupByApp
 
-    property bool contextMenuOpen: (contextMenu && contextMenu.visible && contextMenu.screen === modelData)
+    readonly property bool isDockAtTop: SettingsData.dockPosition === SettingsData.Position.Top
+    readonly property bool isDankBarAtTop: !SettingsData.dankBarAtBottom
+    readonly property bool isDankBarVisible: SettingsData.dankBarVisible
+    readonly property bool needsBarSpacing: isDankBarVisible && (isDockAtTop === isDankBarAtTop)
+    readonly property real widgetHeight: Math.max(20, 26 + SettingsData.dankBarInnerPadding * 0.6)
+    readonly property real effectiveBarHeight: Math.max(widgetHeight + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding))
+    readonly property real barSpacing: needsBarSpacing ? (SettingsData.dankBarSpacing + effectiveBarHeight + SettingsData.dankBarBottomGap) : 0
+
+    readonly property real dockMargin: SettingsData.dockSpacing
+    readonly property real positionSpacing: barSpacing + SettingsData.dockBottomGap
+    readonly property real _dpr: (dock.screen && dock.screen.devicePixelRatio) ? dock.screen.devicePixelRatio : 1
+    function px(v) { return Math.round(v * _dpr) / _dpr }
+
+
+    property bool contextMenuOpen: (dockVariants.contextMenu && dockVariants.contextMenu.visible && dockVariants.contextMenu.screen === modelData)
     property bool windowIsFullscreen: {
         if (!ToplevelManager.activeToplevel) {
             return false
@@ -31,11 +55,27 @@ PanelWindow {
         const fullscreenApps = ["vlc", "mpv", "kodi", "steam", "lutris", "wine", "dosbox"]
         return fullscreenApps.some(app => activeWindow.appId && activeWindow.appId.toLowerCase().includes(app))
     }
+    property bool revealSticky: false
+
+    Timer {
+        id: revealHold
+        interval: 250
+        repeat: false
+        onTriggered: dock.revealSticky = false
+    }
+
     property bool reveal: {
         if (CompositorService.isNiri && NiriService.inOverview) {
             return SettingsData.dockOpenOnOverview
         }
-        return (!autoHide || dockMouseArea.containsMouse || dockApps.requestDockShow || contextMenuOpen) && !windowIsFullscreen
+        return (!autoHide || dockMouseArea.containsMouse || dockApps.requestDockShow || contextMenuOpen || revealSticky) && !windowIsFullscreen
+    }
+
+    onContextMenuOpenChanged: {
+        if (!contextMenuOpen && autoHide && !dockMouseArea.containsMouse) {
+            revealSticky = true
+            revealHold.restart()
+        }
     }
 
     Connections {
@@ -49,102 +89,124 @@ PanelWindow {
     visible: SettingsData.showDock
     color: "transparent"
 
-    anchors {
-        bottom: true
-        left: true
-        right: true
-    }
 
-    margins {
-        left: 0
-        right: 0
+    exclusiveZone: {
+        if (!SettingsData.showDock || autoHide) return -1
+        if (needsBarSpacing) return -1
+        return px(58 + SettingsData.dockSpacing + SettingsData.dockBottomGap)
     }
 
-    implicitHeight: 100
-    exclusiveZone: autoHide ? -1 : 65 - 16
-
     mask: Region {
         item: dockMouseArea
     }
 
-    MouseArea {
-        id: dockMouseArea
-        property real currentScreen: modelData ? modelData : dock.screen
-        property real screenWidth: currentScreen ? currentScreen.geometry.width : 1920
-        property real maxDockWidth: Math.min(screenWidth * 0.8, 1200)
+    Item {
+        id: dockCore
+        anchors.fill: parent
 
-        height: dock.reveal ? 65 : 20
-        width: dock.reveal ? Math.min(dockBackground.width + 32, maxDockWidth) : Math.min(Math.max(dockBackground.width + 64, 200), screenWidth * 0.5)
-        anchors {
-            bottom: parent.bottom
-            horizontalCenter: parent.horizontalCenter
-        }
-        hoverEnabled: true
-
-        Behavior on height {
-            NumberAnimation {
-                duration: 200
-                easing.type: Easing.OutCubic
-            }
-        }
-
-        Item {
-            id: dockContainer
-            anchors.fill: parent
-
-            transform: Translate {
-                id: dockSlide
-                y: dock.reveal ? 0 : 60
-
-                Behavior on y {
-                    NumberAnimation {
-                        duration: 200
-                        easing.type: Easing.OutCubic
+        Connections {
+            target: dockMouseArea
+            function onContainsMouseChanged() {
+                if (dockMouseArea.containsMouse) {
+                    dock.revealSticky = true
+                    revealHold.stop()
+                } else {
+                    if (dock.autoHide && !dock.contextMenuOpen) {
+                        revealHold.restart()
                     }
                 }
             }
+        }
 
-            Rectangle {
-                id: dockBackground
-                objectName: "dockBackground"
-                anchors {
-                    top: parent.top
-                    bottom: parent.bottom
-                    horizontalCenter: parent.horizontalCenter
-                }
+        MouseArea {
+            id: dockMouseArea
+            property real currentScreen: modelData ? modelData : dock.screen
+            property real screenWidth: currentScreen ? currentScreen.geometry.width : 1920
+            property real maxDockWidth: Math.min(screenWidth * 0.8, 1200)
 
-                width: dockApps.implicitWidth + 12
-                height: parent.height - 8
+            height: dock.reveal ? px(58 + SettingsData.dockSpacing + SettingsData.dockBottomGap) : 1
+            width: dock.reveal ? Math.min(dockBackground.implicitWidth + 32, maxDockWidth) : Math.min(Math.max(dockBackground.implicitWidth + 64, 200), screenWidth * 0.5)
+            anchors {
+                top: SettingsData.dockPosition === SettingsData.Position.Bottom ? undefined : parent.top
+                bottom: SettingsData.dockPosition === SettingsData.Position.Bottom ? parent.bottom : undefined
+                horizontalCenter: parent.horizontalCenter
+            }
+            hoverEnabled: true
+            acceptedButtons: Qt.NoButton
 
-                anchors.topMargin: 4
-                anchors.bottomMargin: 1
-
-                color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, backgroundTransparency)
-                radius: Theme.cornerRadius
-                border.width: 1
-                border.color: Theme.outlineMedium
-                layer.enabled: true
-
-                Rectangle {
-                    anchors.fill: parent
-                    color: Qt.rgba(Theme.surfaceTint.r, Theme.surfaceTint.g, Theme.surfaceTint.b, 0.04)
-                    radius: parent.radius
-                }
-
-                DockApps {
-                    id: dockApps
-
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    anchors.topMargin: 4
-                    anchors.bottomMargin: 4
-
-                    contextMenu: dock.contextMenu
-                    groupByApp: dock.groupByApp
+            Behavior on height {
+                NumberAnimation {
+                    duration: 200
+                    easing.type: Easing.OutCubic
                 }
             }
 
+
+            Item {
+                id: dockContainer
+                anchors.fill: parent
+
+                transform: Translate {
+                    id: dockSlide
+                    y: {
+                        if (dock.reveal) return 0
+                        if (SettingsData.dockPosition === SettingsData.Position.Bottom) {
+                            return 60
+                        } else {
+                            return -60
+                        }
+                    }
+
+                    Behavior on y {
+                        NumberAnimation {
+                            duration: 200
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+                }
+
+                Rectangle {
+                    id: dockBackground
+                    objectName: "dockBackground"
+                    anchors {
+                        top: SettingsData.dockPosition === SettingsData.Position.Bottom ? undefined : parent.top
+                        bottom: SettingsData.dockPosition === SettingsData.Position.Bottom ? parent.bottom : undefined
+                        horizontalCenter: parent.horizontalCenter
+                    }
+                    anchors.topMargin: SettingsData.dockPosition === SettingsData.Position.Bottom ? 0 : barSpacing + 4
+                    anchors.bottomMargin: SettingsData.dockPosition === SettingsData.Position.Bottom ? barSpacing + 1 : 0
+
+                    implicitWidth: dockApps.implicitWidth + SettingsData.dockSpacing * 2
+                    implicitHeight: dockApps.implicitHeight + SettingsData.dockSpacing * 2
+                    width: implicitWidth
+                    height: implicitHeight
+
+                    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, backgroundTransparency)
+                    radius: Theme.cornerRadius
+                    border.width: 1
+                    border.color: Theme.outlineMedium
+                    layer.enabled: true
+
+                    Rectangle {
+                        anchors.fill: parent
+                        color: Qt.rgba(Theme.surfaceTint.r, Theme.surfaceTint.g, Theme.surfaceTint.b, 0.04)
+                        radius: parent.radius
+                    }
+
+                    DockApps {
+                        id: dockApps
+
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.topMargin: SettingsData.dockSpacing
+                        anchors.bottomMargin: SettingsData.dockSpacing
+
+                        contextMenu: dockVariants.contextMenu
+                        groupByApp: dock.groupByApp
+                    }
+                }
+
             Rectangle {
                 id: appTooltip
 
@@ -176,15 +238,15 @@ PanelWindow {
                 property string tooltipText: hoveredButton ? hoveredButton.tooltipText : ""
 
                 visible: hoveredButton !== null && tooltipText !== ""
-                width: tooltipLabel.implicitWidth + 24
-                height: tooltipLabel.implicitHeight + 12
+                width: px(tooltipLabel.implicitWidth + 24)
+                height: px(tooltipLabel.implicitHeight + 12)
 
                 color: Theme.surfaceContainer
                 radius: Theme.cornerRadius
                 border.width: 1
                 border.color: Theme.outlineMedium
 
-                y: -height - 8
+                y: SettingsData.dockPosition === SettingsData.Position.Bottom ? -height - Theme.spacingS : parent.height + Theme.spacingS
                 x: hoveredButton ? hoveredButton.mapToItem(dockContainer, hoveredButton.width / 2, 0).x - width / 2 : 0
 
                 StyledText {
@@ -196,5 +258,7 @@ PanelWindow {
                 }
             }
         }
+        }
+        }
     }
 }

Modules/Dock/DockApps.qml

@@ -35,7 +35,7 @@ Item {
 
     Row {
         id: row
-        spacing: 2
+        spacing: 8
         anchors.centerIn: parent
         height: 40
 

Modules/Dock/DockContextMenu.qml

@@ -96,8 +96,15 @@ PanelWindow {
             actualDockHeight = dockBackground.height
         }
 
+        const isDockAtBottom = SettingsData.dockPosition === SettingsData.Position.Bottom
         const dockBottomMargin = 16
-        const buttonScreenY = root.screen.height - actualDockHeight - dockBottomMargin - 20
+        let buttonScreenY
+
+        if (isDockAtBottom) {
+            buttonScreenY = root.screen.height - actualDockHeight - dockBottomMargin - 20
+        } else {
+            buttonScreenY = actualDockHeight + dockBottomMargin + 20
+        }
 
         const dockContentWidth = dockWindow.width
         const screenWidth = root.screen.width
@@ -119,7 +126,14 @@ PanelWindow {
             const want = root.anchorPos.x - width / 2
             return Math.max(left, Math.min(right, want))
         }
-        y: Math.max(10, root.anchorPos.y - height + 30)
+        y: {
+            const isDockAtBottom = SettingsData.dockPosition === SettingsData.Position.Bottom
+            if (isDockAtBottom) {
+                return Math.max(10, root.anchorPos.y - height + 30)
+            } else {
+                return Math.min(root.height - height - 10, root.anchorPos.y - 30)
+            }
+        }
         color: Theme.popupBackground()
         radius: Theme.cornerRadius
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)