From f8369a340ba0184b59b2354378050160d610ad77 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 23 Jul 2025 16:03:41 -0400 Subject: [PATCH] fancy open animation, but still no padding --- modules/bar/components/tray/Tray.qml | 2 +- modules/bar/components/tray/TrayItem.qml | 25 +-- modules/bar/components/tray/menu/Menu.qml | 146 ++++++++++++++++-- modules/bar/components/tray/menu/MenuItem.qml | 2 + 4 files changed, 139 insertions(+), 36 deletions(-) diff --git a/modules/bar/components/tray/Tray.qml b/modules/bar/components/tray/Tray.qml index a907abc..0a95718 100644 --- a/modules/bar/components/tray/Tray.qml +++ b/modules/bar/components/tray/Tray.qml @@ -16,7 +16,7 @@ Row { sourceComponent: item property Component item: TrayItem { - trayItem: modelData + trayItem: modelData } } } diff --git a/modules/bar/components/tray/TrayItem.qml b/modules/bar/components/tray/TrayItem.qml index 6e8fff6..055171f 100644 --- a/modules/bar/components/tray/TrayItem.qml +++ b/modules/bar/components/tray/TrayItem.qml @@ -38,32 +38,17 @@ Clickable { anchors.centerIn: parent } - PopupWindow { - id: popup + Menu { + id: menu - visible: root.menuOpened - - color: 'transparent' + opened: root.menuOpened anchor.item: root anchor.rect.x: root.width / 2 - width / 2 anchor.rect.y: root.height + 8 - implicitWidth: menu.width - implicitHeight: menu.height - - Rectangle { - anchors.fill: parent - color: Theme.palette.base300 - radius: 8 - } - - Menu { - id: menu - - menuOpener: QsMenuOpener { - menu: trayItem.menu - } + menuOpener: QsMenuOpener { + menu: trayItem.menu } } } diff --git a/modules/bar/components/tray/menu/Menu.qml b/modules/bar/components/tray/menu/Menu.qml index b7268ff..38d66bd 100644 --- a/modules/bar/components/tray/menu/Menu.qml +++ b/modules/bar/components/tray/menu/Menu.qml @@ -1,29 +1,145 @@ +pragma ComponentBehavior: Bound + import QtQuick import QtQuick.Layouts import Quickshell import "../../../../../config/" import "../../../../../styled/" -ColumnLayout { - id: menu +PopupWindow { + id: window + property QsMenuOpener menuOpener + property bool opened: false - anchors.margins: 8 + color: 'transparent' - Repeater { - model: menuOpener.children - delegate: Loader { - required property QsMenuEntry modelData - active: true + implicitWidth: menu.width + implicitHeight: menu.height - sourceComponent: modelData.isSeparator ? menuSeperator : menuItem - property Component menuSeperator: Rectangle { - implicitHeight: 1 - implicitWidth: menu.width - color: Theme.palette.basecontent + Rectangle { + id: background + + anchors.fill: menu + color: Theme.palette.base300 + border.color: Theme.palette.base200 + border.width: 2 + radius: 8 + + opacity: 0 + + states: State { + name: "opened" + when: window.opened + PropertyChanges { + background { + opacity: 1 + } } - property Component menuItem: MenuItem { - menuEntry: modelData + } + + transitions: [ + Transition { + from: "" + to: "opened" + SequentialAnimation { + ScriptAction { + script: window.visible = true + } + NumberAnimation { + property: "background.opacity" + duration: 200 + } + } + }, + Transition { + from: "opened" + to: "" + SequentialAnimation { + PauseAnimation { + duration: repeater.count * 15 + } + NumberAnimation { + property: "background.opacity" + duration: 200 + } + ScriptAction { + script: window.visible = false + } + } + } + ] + } + + ColumnLayout { + id: menu + + anchors.margins: 30 + + Repeater { + id: repeater + model: window.menuOpener.children + delegate: Loader { + id: loader + + required property QsMenuEntry modelData + required property int index + + active: true + + opacity: 0 + + Layout.minimumWidth: 120 + + sourceComponent: modelData.isSeparator ? menuSeperator : menuItem + property Component menuSeperator: Rectangle { + implicitWidth: menu.width + implicitHeight: 2 + + color: Theme.palette.base100 + } + property Component menuItem: MenuItem { + menuEntry: modelData + } + + states: State { + name: "opened" + when: window.opened + PropertyChanges { + loader { + opacity: 1 + } + } + } + + transitions: [ + Transition { + from: "" + to: "opened" + SequentialAnimation { + PauseAnimation { + duration: 15 * loader.index + } + NumberAnimation { + property: "opacity" + duration: 100 + } + } + }, + Transition { + from: "opened" + to: "" + SequentialAnimation { + PauseAnimation { + duration: 15 * (repeater.count - loader.index) + } + NumberAnimation { + property: "opacity" + duration: 200 + } + } + } + ] } } } diff --git a/modules/bar/components/tray/menu/MenuItem.qml b/modules/bar/components/tray/menu/MenuItem.qml index dbf7272..5624ddc 100644 --- a/modules/bar/components/tray/menu/MenuItem.qml +++ b/modules/bar/components/tray/menu/MenuItem.qml @@ -16,6 +16,8 @@ Clickable { StyledText { id: text + opacity: item.opacity + font.pixelSize: Dimensions.clock.fontSize anchors.verticalCenter: parent.verticalCenter topPadding: Dimensions.clock.verticalPadding