baobeld/lux-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fancy open animation, but still no padding

Browse source
This commit is contained in:
Benjamin Palko 2025-07-23 16:03:41 -04:00
parent 1e087a4f2d
commit f8369a340b
4 changed files with 139 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
modules/bar/components/tray/Tray.qml
View file

@ -16,7 +16,7 @@ Row {
sourceComponent: item
property Component item: TrayItem {
trayItem: modelData
trayItem: modelData
}
}
}

25
modules/bar/components/tray/TrayItem.qml
View file

@ -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
}
}
}

146
modules/bar/components/tray/menu/Menu.qml
View file

@ -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
}
}
}
]
}
}
}

2
modules/bar/components/tray/menu/MenuItem.qml
View file

@ -16,6 +16,8 @@ Clickable {
StyledText {
id: text
opacity: item.opacity
font.pixelSize: Dimensions.clock.fontSize
anchors.verticalCenter: parent.verticalCenter
topPadding: Dimensions.clock.verticalPadding