From d8d812cf47522f9294f551dbe041c39fbf488a2b Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Fri, 18 Apr 2025 10:38:52 +0200 Subject: [PATCH] sidebarright bottom widget group collapse --- .../sidebarRight/BottomWidgetGroup.qml | 133 +++++++++++++++--- .../modules/sidebarRight/SidebarRight.qml | 15 +- .../modules/sidebarRight/todo/TodoWidget.qml | 2 +- .config/quickshell/services/DateTime.qml | 1 + 4 files changed, 128 insertions(+), 23 deletions(-) diff --git a/.config/quickshell/modules/sidebarRight/BottomWidgetGroup.qml b/.config/quickshell/modules/sidebarRight/BottomWidgetGroup.qml index 8479c2f49..a7d80202d 100644 --- a/.config/quickshell/modules/sidebarRight/BottomWidgetGroup.qml +++ b/.config/quickshell/modules/sidebarRight/BottomWidgetGroup.qml @@ -10,18 +10,46 @@ import Quickshell Rectangle { id: root - Layout.alignment: Qt.AlignHCenter - Layout.fillHeight: false - Layout.fillWidth: true radius: Appearance.rounding.normal color: Appearance.colors.colLayer1 - height: bottomWidgetGroupRow.height + // height: collapsed ? collapsedBottomWidgetGroupRow.height : bottomWidgetGroupRow.height + implicitHeight: collapsed ? collapsedBottomWidgetGroupRow.implicitHeight : bottomWidgetGroupRow.implicitHeight property int selectedTab: 0 + property bool collapsed: false property var tabs: [ {"type": "calendar", "name": "Calendar", "icon": "calendar_month", "widget": calendarWidget}, - {"type": "todo", "name": "To Do", "icon": "done_outline", "widget": todoWidget} + {"type": "todo", "name": "To Do", "icon": "done_outline", "widget": todoWidget} ] + Behavior on implicitHeight { + NumberAnimation { + duration: Appearance.animation.elementDecel.duration + easing.type: Appearance.animation.elementDecel.type + } + } + + Component.onCompleted: { + bottomWidgetGroupRow.opacity = !collapsed + collapsedBottomWidgetGroupRow.opacity = collapsed + } + + function setCollapsed(state) { + collapsed = state + if (collapsed) bottomWidgetGroupRow.opacity = 0 + else collapsedBottomWidgetGroupRow.opacity = 0 + collapseCleanFadeTimer.start() + } + + Timer { + id: collapseCleanFadeTimer + interval: Appearance.animation.elementDecel.duration / 2 + repeat: false + onTriggered: { + if(collapsed) collapsedBottomWidgetGroupRow.opacity = 1 + else bottomWidgetGroupRow.opacity = 1 + } + } + Keys.onPressed: (event) => { if ((event.key === Qt.Key_PageDown || event.key === Qt.Key_PageUp) && event.modifiers === Qt.ControlModifier) { @@ -34,30 +62,101 @@ Rectangle { } } + // The thing when collapsed + RowLayout { + id: collapsedBottomWidgetGroupRow + visible: opacity != 0 + Behavior on opacity { + NumberAnimation { + duration: Appearance.animation.elementDecel.duration / 2 + easing.type: Appearance.animation.elementDecel.type + } + } + + spacing: 15 + + CalendarHeaderButton { + Layout.margins: 10 + Layout.rightMargin: 0 + forceCircle: true + onClicked: { + root.setCollapsed(false) + } + contentItem: MaterialSymbol { + text: "keyboard_arrow_up" + font.pixelSize: Appearance.font.pixelSize.larger + horizontalAlignment: Text.AlignHCenter + color: Appearance.colors.colOnLayer1 + } + } + + StyledText { + property int remainingTasks: Todo.list.filter(task => !task.done).length; + Layout.margins: 10 + Layout.leftMargin: 0 + text: `${DateTime.day} ${DateTime.month} ${DateTime.year} • ${remainingTasks} task${remainingTasks > 1 ? "s" : ""}` + font.pixelSize: Appearance.font.pixelSize.large + color: Appearance.colors.colOnLayer1 + } + } + + // The thing when expanded RowLayout { id: bottomWidgetGroupRow + + visible: opacity != 0 + Behavior on opacity { + NumberAnimation { + duration: Appearance.animation.elementDecel.duration / 2 + easing.type: Appearance.animation.elementDecel.type + } + } + anchors.fill: parent height: tabStack.height spacing: 10 // Navigation rail - ColumnLayout { - id: tabBar + Item { Layout.fillHeight: true Layout.fillWidth: false - Layout.leftMargin: 15 - spacing: 15 - Repeater { - model: root.tabs - NavRailButton { - toggled: root.selectedTab == index - buttonText: modelData.name - buttonIcon: modelData.icon - onClicked: { - root.selectedTab = index + Layout.leftMargin: 10 + Layout.topMargin: 10 + width: tabBar.width + // Navigation rail buttons + ColumnLayout { + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: 5 + id: tabBar + spacing: 15 + Repeater { + model: root.tabs + NavRailButton { + toggled: root.selectedTab == index + buttonText: modelData.name + buttonIcon: modelData.icon + onClicked: { + root.selectedTab = index + } } } } + // Collapse button + CalendarHeaderButton { + anchors.left: parent.left + anchors.top: parent.top + forceCircle: true + onClicked: { + root.setCollapsed(true) + } + contentItem: MaterialSymbol { + text: "keyboard_arrow_down" + font.pixelSize: Appearance.font.pixelSize.larger + horizontalAlignment: Text.AlignHCenter + color: Appearance.colors.colOnLayer1 + } + } } // Content area diff --git a/.config/quickshell/modules/sidebarRight/SidebarRight.qml b/.config/quickshell/modules/sidebarRight/SidebarRight.qml index 086dfb33e..717a2923a 100644 --- a/.config/quickshell/modules/sidebarRight/SidebarRight.qml +++ b/.config/quickshell/modules/sidebarRight/SidebarRight.qml @@ -84,9 +84,9 @@ Scope { } ColumnLayout { - anchors.centerIn: parent - height: parent.height - sidebarPadding * 2 - width: parent.width - sidebarPadding * 2 + anchors.fill: parent + anchors.margins: sidebarPadding + spacing: sidebarPadding RowLayout { @@ -139,6 +139,7 @@ Scope { } } + // Center widget group Rectangle { Layout.alignment: Qt.AlignHCenter Layout.fillHeight: true @@ -147,8 +148,12 @@ Scope { color: Appearance.colors.colLayer1 } - // Calendar - BottomWidgetGroup {} + BottomWidgetGroup { + Layout.alignment: Qt.AlignHCenter + Layout.fillHeight: false + Layout.fillWidth: true + Layout.preferredHeight: implicitHeight + } } } diff --git a/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml b/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml index bf46fb7ee..88336d6a7 100644 --- a/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml +++ b/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml @@ -287,4 +287,4 @@ Item { } } } -} \ No newline at end of file +} diff --git a/.config/quickshell/services/DateTime.qml b/.config/quickshell/services/DateTime.qml index fc1c501be..e3c1c08c3 100644 --- a/.config/quickshell/services/DateTime.qml +++ b/.config/quickshell/services/DateTime.qml @@ -7,6 +7,7 @@ pragma Singleton Singleton { property string time: Qt.formatDateTime(clock.date, "hh:mm") property string date: Qt.formatDateTime(clock.date, "dddd, dd/MM") + property string day: Qt.formatDateTime(clock.date, "dd") property string month: Qt.formatDateTime(clock.date, "MMMM") property string year: Qt.formatDateTime(clock.date, "yyyy") property string uptime: "0h, 0m"