diff options
Diffstat (limited to 'modules/controlcenter/NavRail.qml')
| -rw-r--r-- | modules/controlcenter/NavRail.qml | 104 |
1 files changed, 86 insertions, 18 deletions
diff --git a/modules/controlcenter/NavRail.qml b/modules/controlcenter/NavRail.qml index a631465..832fe53 100644 --- a/modules/controlcenter/NavRail.qml +++ b/modules/controlcenter/NavRail.qml @@ -3,14 +3,15 @@ pragma ComponentBehavior: Bound import qs.components import qs.services import qs.config +import Quickshell import QtQuick import QtQuick.Layouts Item { id: root + required property ShellScreen screen required property Session session - property bool expanded implicitWidth: layout.implicitWidth + Appearance.padding.large * 4 implicitHeight: layout.implicitHeight + Appearance.padding.large * 2 @@ -23,7 +24,7 @@ Item { states: State { name: "expanded" - when: root.expanded + when: root.session.navExpanded PropertyChanges { layout.spacing: Appearance.spacing.small @@ -32,14 +33,6 @@ Item { menuIcon.rotation: 180 menuIconExpanded.rotation: 0 } - AnchorChanges { - target: menuIcon - anchors.horizontalCenter: undefined - } - AnchorChanges { - target: menuIconExpanded - anchors.horizontalCenter: undefined - } } transitions: Transition { @@ -49,23 +42,27 @@ Item { } Item { + id: menuBtn + + Layout.topMargin: Appearance.spacing.large Layout.fillWidth: true - Layout.bottomMargin: Appearance.spacing.large * 2 - implicitHeight: Math.max(menuIcon.implicitHeight, menuIconExpanded.implicitHeight) + Appearance.padding.normal * 2 + implicitHeight: menuIcon.implicitHeight + Appearance.padding.normal * 2 StateLayer { radius: Appearance.rounding.small function onClicked(): void { - root.expanded = !root.expanded; + root.session.navExpanded = !root.session.navExpanded; } } MaterialIcon { id: menuIcon - anchors.horizontalCenter: parent.horizontalCenter + anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter + anchors.leftMargin: Appearance.padding.large + text: "menu" font.pointSize: Appearance.font.size.large } @@ -73,15 +70,86 @@ Item { MaterialIcon { id: menuIconExpanded - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter + anchors.fill: menuIcon text: "menu_open" - font.pointSize: Appearance.font.size.large + font.pointSize: menuIcon.font.pointSize opacity: 0 rotation: -180 } } + StyledRect { + id: normalWinBtn + + readonly property int nonAnimWidth: normalWinIcon.implicitWidth + (root.session.navExpanded ? normalWinLabel.anchors.leftMargin + normalWinLabel.implicitWidth : 0) + normalWinIcon.anchors.leftMargin * 2 + + Layout.bottomMargin: Appearance.spacing.large * 2 + + implicitWidth: nonAnimWidth + implicitHeight: root.session.navExpanded ? normalWinIcon.implicitHeight + Appearance.padding.normal * 2 : nonAnimWidth + + color: Colours.palette.m3primaryContainer + radius: Appearance.rounding.small + + StateLayer { + id: normalWinState + + color: Colours.palette.m3onPrimaryContainer + + function onClicked(): void { + root.session.root.close(); + WindowFactory.create(null, { + screen: root.screen, + active: root.session.active, + navExpanded: root.session.navExpanded + }); + } + } + + MaterialIcon { + id: normalWinIcon + + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + anchors.leftMargin: Appearance.padding.large + + text: "select_window" + font.pointSize: Appearance.font.size.large + fill: 1 + } + + StyledText { + id: normalWinLabel + + anchors.left: normalWinIcon.right + anchors.verticalCenter: parent.verticalCenter + anchors.leftMargin: Appearance.spacing.normal + + text: qsTr("Open in window") + opacity: root.session.navExpanded ? 1 : 0 + + Behavior on opacity { + Anim { + duration: Appearance.anim.durations.small + } + } + } + + Behavior on implicitWidth { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial + } + } + + Behavior on implicitHeight { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial + } + } + } + NavItem { icon: "network_manage" label: "network" @@ -110,7 +178,7 @@ Item { states: State { name: "expanded" - when: root.expanded + when: root.session.navExpanded PropertyChanges { expandedLabel.opacity: 1 |