bar: add compact tray option

Closes #659

README.md

@@ -371,6 +371,7 @@ default, you must create it manually.
         },
         "tray": {
             "background": false,
+            "compact": false,
             "iconSubs": [],
             "recolour": false
         },

config/BarConfig.qml

@@ -73,6 +73,7 @@ JsonObject {
     component Tray: JsonObject {
         property bool background: false
         property bool recolour: false
+        property bool compact: false
         property list<var> iconSubs: []
     }
 

modules/bar/Bar.qml

@@ -17,8 +17,24 @@ ColumnLayout {
     required property BarPopouts.Wrapper popouts
     readonly property int vPadding: Appearance.padding.large
 
+    function closeTray(): void {
+        if (!Config.bar.tray.compact)
+            return;
+
+        for (let i = 0; i < repeater.count; i++) {
+            const item = repeater.itemAt(i);
+            if (item?.enabled && item.id === "tray") {
+                item.item.expanded = false;
+            }
+        }
+    }
+
     function checkPopout(y: real): void {
         const ch = childAt(width / 2, y) as WrappedLoader;
+
+        if (ch?.id !== "tray")
+            closeTray();
+
         if (!ch) {
             popouts.hasCurrent = false;
             return;
@@ -38,12 +54,19 @@ ColumnLayout {
                 popouts.hasCurrent = true;
             }
         } else if (id === "tray") {
-            const index = Math.floor(((y - top) / itemHeight) * item.items.count);
+            if (!Config.bar.tray.compact || (item.expanded && !item.expandIcon.contains(mapToItem(item.expandIcon, item.implicitWidth / 2, y)))) {
-            const trayItem = item.items.itemAt(index);
+                const index = Math.floor(((y - top - item.padding * 2 + item.spacing) / item.layout.implicitHeight) * item.items.count);
-            if (trayItem) {
+                const trayItem = item.items.itemAt(index);
-                popouts.currentName = `traymenu${index}`;
+                if (trayItem) {
-                popouts.currentCenter = Qt.binding(() => trayItem.mapToItem(root, 0, trayItem.implicitHeight / 2).y);
+                    popouts.currentName = `traymenu${index}`;
-                popouts.hasCurrent = true;
+                    popouts.currentCenter = Qt.binding(() => trayItem.mapToItem(root, 0, trayItem.implicitHeight / 2).y);
+                    popouts.hasCurrent = true;
+                } else {
+                    popouts.hasCurrent = false;
+                }
+            } else {
+                popouts.hasCurrent = false;
+                item.expanded = true;
             }
         } else if (id === "activeWindow") {
             popouts.currentName = id.toLowerCase();

modules/bar/BarWrapper.qml

@@ -19,6 +19,10 @@ Item {
     readonly property bool shouldBeVisible: Config.bar.persistent || visibilities.bar || isHovered
     property bool isHovered
 
+    function closeTray(): void {
+        content.item?.closeTray();
+    }
+
     function checkPopout(y: real): void {
         content.item?.checkPopout(y);
     }

modules/bar/components/Tray.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import qs.components
 import qs.services
 import qs.config
@@ -7,13 +9,22 @@ import QtQuick
 StyledRect {
     id: root
 
+    readonly property alias layout: layout
     readonly property alias items: items
+    readonly property alias expandIcon: expandIcon
+    readonly property int padding: Config.bar.tray.background ? Appearance.padding.normal : Appearance.padding.small
+    readonly property int spacing: Config.bar.tray.background ? Appearance.spacing.small : 0
+    property bool expanded
 
     clip: true
-    visible: width > 0 && height > 0 // To avoid warnings about being visible with no size
+    visible: height > 0
 
     implicitWidth: Config.bar.sizes.innerWidth
-    implicitHeight: layout.implicitHeight + (Config.bar.tray.background ? Appearance.padding.normal : Appearance.padding.small) * 2
+    implicitHeight: {
+        if (!Config.bar.tray.compact)
+            return layout.implicitHeight + padding * 2;
+        return (expanded ? expandIcon.implicitHeight + layout.implicitHeight + spacing : expandIcon.implicitHeight) + padding * 2;
+    }
 
     color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Config.bar.tray.background ? Colours.tPalette.m3surfaceContainer.a : 0)
     radius: Appearance.rounding.full
@@ -21,9 +32,13 @@ StyledRect {
     Column {
         id: layout
 
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: root.padding
         spacing: Appearance.spacing.small
 
+        opacity: root.expanded || !Config.bar.tray.compact ? 1 : 0
+
         add: Transition {
             Anim {
                 properties: "scale"
@@ -51,17 +66,49 @@ StyledRect {
 
             TrayItem {}
         }
+
+        Behavior on opacity {
+            Anim {}
+        }
     }
 
-    Behavior on implicitWidth {
+    Loader {
-        Anim {
+        id: expandIcon
-            easing.bezierCurve: Appearance.anim.curves.emphasized
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+
+        active: Config.bar.tray.compact
+
+        sourceComponent: Item {
+            implicitWidth: expandIconInner.implicitWidth
+            implicitHeight: expandIconInner.implicitHeight - Appearance.padding.small * 2
+
+            MaterialIcon {
+                id: expandIconInner
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: Config.bar.tray.background ? Appearance.padding.small : -Appearance.padding.small
+                text: "expand_less"
+                font.pointSize: Appearance.font.size.large
+                rotation: root.expanded ? 180 : 0
+
+                Behavior on rotation {
+                    Anim {}
+                }
+
+                Behavior on anchors.bottomMargin {
+                    Anim {}
+                }
+            }
         }
     }
 
     Behavior on implicitHeight {
         Anim {
-            easing.bezierCurve: Appearance.anim.curves.emphasized
+            duration: Appearance.anim.durations.expressiveDefaultSpatial
+            easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
         }
     }
 }

modules/drawers/Drawers.qml

@@ -96,6 +96,7 @@ Variants {
                     visibilities.sidebar = false;
                     visibilities.dashboard = false;
                     panels.popouts.hasCurrent = false;
+                    bar.closeTray();
                 }
             }
 

modules/drawers/Interactions.qml

@@ -68,8 +68,10 @@ CustomMouseArea {
             if (!utilitiesShortcutActive)
                 visibilities.utilities = false;
 
-            if (!popouts.currentName.startsWith("traymenu") || (popouts.current?.depth ?? 0) <= 1)
+            if (!popouts.currentName.startsWith("traymenu") || (popouts.current?.depth ?? 0) <= 1) {
                 popouts.hasCurrent = false;
+                bar.closeTray();
+            }
 
             if (Config.bar.showOnHover)
                 bar.isHovered = false;
@@ -197,10 +199,12 @@ CustomMouseArea {
         }
 
         // Show popouts on hover
-        if (x < bar.implicitWidth)
+        if (x < bar.implicitWidth) {
             bar.checkPopout(y);
-        else if ((!popouts.currentName.startsWith("traymenu") || (popouts.current?.depth ?? 0) <= 1) && !inLeftPanel(panels.popouts, x, y))
+        } else if ((!popouts.currentName.startsWith("traymenu") || (popouts.current?.depth ?? 0) <= 1) && !inLeftPanel(panels.popouts, x, y)) {
             popouts.hasCurrent = false;
+            bar.closeTray();
+        }
     }
 
     // Monitor individual visibility changes