add slide-in applet dock with collapsible cards, edge trigger, and bar module toggle

2026-04-25 21:32:04 +02:00 · 2026-04-25 21:32:04 +02:00 · c22eb51dcd
commit c22eb51dcd
parent 6fd36c812f
14 changed files with 689 additions and 14 deletions
--- a/shell/dock/DockCard.qml
+++ b/shell/dock/DockCard.qml
@ -0,0 +1,100 @@
+import QtQuick
+import "../services" as S
+
+// Collapsible card for the applet dock.
+// Set icon, title, and place applet content as children.
+Rectangle {
+    id: root
+
+    property string icon: ""
+    property string title: ""
+    property bool expanded: false
+    property color accentColor: S.Theme.base0C
+
+    default property alias content: _contentColumn.children
+
+    width: parent?.width ?? 300
+    height: _header.height + (_contentColumn.visible ? _contentColumn.height : 0)
+    radius: S.Theme.radius + 2
+    color: Qt.rgba(S.Theme.base01.r, S.Theme.base01.g, S.Theme.base01.b, 0.7)
+    border.color: Qt.rgba(S.Theme.base03.r, S.Theme.base03.g, S.Theme.base03.b, 0.3)
+    border.width: 1
+    clip: true
+
+    Behavior on height {
+        enabled: !S.Theme.reducedMotion
+        NumberAnimation {
+            duration: 150
+            easing.type: Easing.OutCubic
+        }
+    }
+
+    // Header
+    Item {
+        id: _header
+        width: parent.width
+        height: 28
+
+        Text {
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+            text: root.icon
+            color: root.accentColor
+            font.pixelSize: S.Theme.fontSize
+            font.family: S.Theme.iconFontFamily
+        }
+
+        Text {
+            anchors.left: parent.left
+            anchors.leftMargin: 30
+            anchors.verticalCenter: parent.verticalCenter
+            text: root.title
+            color: S.Theme.base05
+            font.pixelSize: S.Theme.fontSize - 1
+            font.bold: true
+            font.family: S.Theme.fontFamily
+        }
+
+        Text {
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+            text: root.expanded ? "\uF078" : "\uF054"
+            color: S.Theme.base04
+            font.pixelSize: S.Theme.fontSize - 2
+            font.family: S.Theme.iconFontFamily
+
+            Behavior on text {
+                enabled: false
+            }
+        }
+
+        HoverHandler {
+            cursorShape: Qt.PointingHandCursor
+        }
+
+        TapHandler {
+            onTapped: root.expanded = !root.expanded
+        }
+
+        // Divider
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            height: 1
+            color: S.Theme.base03
+            opacity: root.expanded ? 0.5 : 0
+        }
+    }
+
+    // Content area
+    Column {
+        id: _contentColumn
+        anchors.top: _header.bottom
+        anchors.topMargin: 4
+        width: parent.width
+        visible: root.expanded
+    }
+}