From 93baba1568be6be084834e0fbedb3898de5ec098 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Wed, 18 Jun 2025 17:30:18 +0200 Subject: [PATCH] settings app: expandable navrail buttons --- .../quickshell/modules/common/Appearance.qml | 2 +- .../common/widgets/FloatingActionButton.qml | 32 ++++--- .../modules/common/widgets/NavRailButton.qml | 66 +++++++++++++ .../modules/common/widgets/NavigationRail.qml | 5 +- .../common/widgets/NavigationRailButton.qml | 96 ++++++++++++++++--- .../widgets/NavigationRailExpandButton.qml | 4 +- .../sidebarRight/BottomWidgetGroup.qml | 2 +- .../quickshell/scripts/colors/switchwall.sh | 2 +- .config/quickshell/settings.qml | 37 ++++++- 9 files changed, 204 insertions(+), 42 deletions(-) create mode 100644 .config/quickshell/modules/common/widgets/NavRailButton.qml diff --git a/.config/quickshell/modules/common/Appearance.qml b/.config/quickshell/modules/common/Appearance.qml index b496f4d17..544630138 100644 --- a/.config/quickshell/modules/common/Appearance.qml +++ b/.config/quickshell/modules/common/Appearance.qml @@ -177,7 +177,7 @@ Singleton { property int larger: 19 property int huge: 22 property int hugeass: 23 - property int title: 28 + property int title: huge } } diff --git a/.config/quickshell/modules/common/widgets/FloatingActionButton.qml b/.config/quickshell/modules/common/widgets/FloatingActionButton.qml index 34109bdef..2f618437f 100644 --- a/.config/quickshell/modules/common/widgets/FloatingActionButton.qml +++ b/.config/quickshell/modules/common/widgets/FloatingActionButton.qml @@ -11,7 +11,7 @@ RippleButton { id: root property string iconText: "add" property bool expanded: false - property real baseSize: 50 + property real baseSize: 56 property real elementSpacing: 5 implicitWidth: Math.max(contentRowLayout.implicitWidth + 10 * 2, baseSize) implicitHeight: baseSize @@ -33,23 +33,27 @@ RippleButton { id: icon Layout.fillWidth: true horizontalAlignment: Text.AlignHCenter - iconSize: Appearance.font.pixelSize.huge + iconSize: 24 color: Appearance.colors.colOnLayer1 text: root.iconText } - Revealer { - visible: root.expanded || implicitWidth > 0 - reveal: root.expanded - implicitWidth: reveal ? (buttonText.implicitWidth + root.elementSpacing + contentRowLayout.horizontalMargins) : 0 - StyledText { - id: buttonText - anchors { - left: parent.left - leftMargin: root.elementSpacing + Loader { + active: true + sourceComponent: Revealer { + visible: root.expanded || implicitWidth > 0 + reveal: root.expanded + implicitWidth: reveal ? (buttonText.implicitWidth + root.elementSpacing + contentRowLayout.horizontalMargins) : 0 + StyledText { + id: buttonText + anchors { + left: parent.left + leftMargin: root.elementSpacing + } + text: root.buttonText + color: Appearance.colors.colOnLayer1 + font.pixelSize: 14 + font.weight: 450 } - text: root.buttonText - color: Appearance.colors.colOnLayer1 - font.pixelSize: Appearance.font.pixelSize.small } } } diff --git a/.config/quickshell/modules/common/widgets/NavRailButton.qml b/.config/quickshell/modules/common/widgets/NavRailButton.qml new file mode 100644 index 000000000..02c6bc4a5 --- /dev/null +++ b/.config/quickshell/modules/common/widgets/NavRailButton.qml @@ -0,0 +1,66 @@ +import "root:/modules/common" +import "root:/modules/common/widgets" +import "root:/modules/common/functions/color_utils.js" as ColorUtils +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import Quickshell.Io + +/** + * Old implementation. For future widgets use NavigationRailButton instead. + */ +Button { + id: button + + property bool toggled + property string buttonIcon + property string buttonText + property bool expanded: false + + property real baseSize: 56 + + Layout.alignment: Qt.AlignHCenter + implicitHeight: columnLayout.implicitHeight + implicitWidth: columnLayout.implicitWidth + + background: null + PointingHandInteraction {} + + // Real stuff + ColumnLayout { + id: columnLayout + spacing: 5 + Rectangle { + implicitWidth: 56 + implicitHeight: navRailButtonIcon.height + 2 * 2 + Layout.alignment: Qt.AlignHCenter + radius: Appearance.rounding.full + color: toggled ? + (button.down ? Appearance.colors.colSecondaryContainerActive : button.hovered ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer) : + (button.down ? Appearance.colors.colLayer1Active : button.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)) + + Behavior on color { + animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this) + } + MaterialSymbol { + id: navRailButtonIcon + anchors.centerIn: parent + iconSize: Appearance.font.pixelSize.hugeass + fill: toggled ? 1 : 0 + text: buttonIcon + color: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer1 + + Behavior on color { + animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this) + } + } + } + + StyledText { + Layout.alignment: Qt.AlignHCenter + text: buttonText + color: Appearance.colors.colOnLayer1 + } + } + +} diff --git a/.config/quickshell/modules/common/widgets/NavigationRail.qml b/.config/quickshell/modules/common/widgets/NavigationRail.qml index 86a3543e9..fe3c64a20 100644 --- a/.config/quickshell/modules/common/widgets/NavigationRail.qml +++ b/.config/quickshell/modules/common/widgets/NavigationRail.qml @@ -7,7 +7,6 @@ import "root:/modules/common/widgets/" ColumnLayout { // Window content with navigation rail and content pane id: root property bool expanded: true - spacing: 10 - - + property int currentIndex: 0 + spacing: 5 } diff --git a/.config/quickshell/modules/common/widgets/NavigationRailButton.qml b/.config/quickshell/modules/common/widgets/NavigationRailButton.qml index 0352f4ae4..ac5a446a5 100644 --- a/.config/quickshell/modules/common/widgets/NavigationRailButton.qml +++ b/.config/quickshell/modules/common/widgets/NavigationRailButton.qml @@ -7,42 +7,82 @@ import QtQuick.Layouts import Quickshell.Io Button { - id: button + id: root property bool toggled property string buttonIcon property string buttonText property bool expanded: false - property real baseSize: 50 + property real baseSize: 56 + property real baseHighlightHeight: 32 + padding: 0 - Layout.alignment: Qt.AlignHCenter - implicitHeight: columnLayout.implicitHeight - implicitWidth: columnLayout.implicitWidth + implicitHeight: baseSize + implicitWidth: contentItem.implicitWidth background: null PointingHandInteraction {} // Real stuff - ColumnLayout { - id: columnLayout - spacing: 5 + contentItem: Item { + id: buttonContent + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + } + + implicitWidth: root.expanded ? itemIconBackground.implicitWidth + 20 + itemText.implicitWidth : + itemIconBackground.implicitWidth + implicitHeight: root.expanded ? itemIconBackground.implicitHeight : itemIconBackground.implicitHeight + itemText.implicitHeight + Rectangle { - implicitWidth: 62 - implicitHeight: navRailButtonIcon.height + 2 * 2 - Layout.alignment: Qt.AlignHCenter + id: itemBackground + anchors.top: itemIconBackground.top + anchors.left: itemIconBackground.left + anchors.right: itemIconBackground.right + anchors.bottom: itemIconBackground.bottom radius: Appearance.rounding.full color: toggled ? - (button.down ? Appearance.colors.colSecondaryContainerActive : button.hovered ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer) : - (button.down ? Appearance.colors.colLayer1Active : button.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)) + (root.down ? Appearance.colors.colSecondaryContainerActive : root.hovered ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer) : + (root.down ? Appearance.colors.colLayer1Active : root.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)) + + states: State { + name: "expanded" + when: root.expanded + AnchorChanges { + target: itemBackground + anchors.top: buttonContent.top + anchors.left: buttonContent.left + anchors.right: buttonContent.right + anchors.bottom: buttonContent.bottom + } + } + transitions: Transition { + AnchorAnimation { + duration: Appearance.animation.elementMoveFast.duration + easing.type: Appearance.animation.elementMoveFast.type + easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve + } + } Behavior on color { animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this) } + } + + Item { + id: itemIconBackground + implicitWidth: root.baseSize + implicitHeight: root.baseHighlightHeight + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + } MaterialSymbol { id: navRailButtonIcon anchors.centerIn: parent - iconSize: Appearance.font.pixelSize.hugeass + iconSize: 24 fill: toggled ? 1 : 0 text: buttonIcon color: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer1 @@ -54,8 +94,34 @@ Button { } StyledText { - Layout.alignment: Qt.AlignHCenter + id: itemText + anchors { + top: itemIconBackground.bottom + topMargin: 6 + horizontalCenter: itemIconBackground.horizontalCenter + } + states: State { + name: "expanded" + when: root.expanded + AnchorChanges { + target: itemText + anchors { + top: undefined + horizontalCenter: undefined + left: itemIconBackground.right + verticalCenter: itemIconBackground.verticalCenter + } + } + } + transitions: Transition { + AnchorAnimation { + duration: Appearance.animation.elementMoveFast.duration + easing.type: Appearance.animation.elementMoveFast.type + easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve + } + } text: buttonText + font.pixelSize: 14 color: Appearance.colors.colOnLayer1 } } diff --git a/.config/quickshell/modules/common/widgets/NavigationRailExpandButton.qml b/.config/quickshell/modules/common/widgets/NavigationRailExpandButton.qml index d159d14db..2c138b879 100644 --- a/.config/quickshell/modules/common/widgets/NavigationRailExpandButton.qml +++ b/.config/quickshell/modules/common/widgets/NavigationRailExpandButton.qml @@ -9,7 +9,7 @@ RippleButton { Layout.alignment: Qt.AlignLeft implicitWidth: 40 implicitHeight: 40 - Layout.leftMargin: 5 + Layout.leftMargin: 8 onClicked: { parent.expanded = !parent.expanded; } @@ -18,7 +18,7 @@ RippleButton { id: icon anchors.centerIn: parent horizontalAlignment: Text.AlignHCenter - iconSize: Appearance.font.pixelSize.hugeass + iconSize: 24 color: Appearance.colors.colOnLayer1 text: root.parent.expanded ? "menu_open" : "menu" } diff --git a/.config/quickshell/modules/sidebarRight/BottomWidgetGroup.qml b/.config/quickshell/modules/sidebarRight/BottomWidgetGroup.qml index 8a613fbe3..874e23c82 100644 --- a/.config/quickshell/modules/sidebarRight/BottomWidgetGroup.qml +++ b/.config/quickshell/modules/sidebarRight/BottomWidgetGroup.qml @@ -135,7 +135,7 @@ Rectangle { anchors.left: parent.left anchors.leftMargin: 5 id: tabBar - spacing: 15 + spacing: 8 Repeater { model: root.tabs NavigationRailButton { diff --git a/.config/quickshell/scripts/colors/switchwall.sh b/.config/quickshell/scripts/colors/switchwall.sh index 0a633e242..80adb169e 100755 --- a/.config/quickshell/scripts/colors/switchwall.sh +++ b/.config/quickshell/scripts/colors/switchwall.sh @@ -219,7 +219,7 @@ switch() { # Set wallpaper with swww swww img "$imgpath" --transition-step 100 --transition-fps 120 \ --transition-type grow --transition-angle 30 --transition-duration 1 \ - --transition-pos "$cursorposx, $cursorposy_inverted" + --transition-pos "$cursorposx, $cursorposy_inverted" & remove_restore fi fi diff --git a/.config/quickshell/settings.qml b/.config/quickshell/settings.qml index 9b4058483..fd3193440 100644 --- a/.config/quickshell/settings.qml +++ b/.config/quickshell/settings.qml @@ -24,8 +24,9 @@ ApplicationWindow { id: root property string firstRunFilePath: FileUtils.trimFileProtocol(`${Directories.state}/user/first_run.txt`) property string firstRunFileContent: "This file is just here to confirm you've been greeted :>" - property real contentPadding: 5 + property real contentPadding: 8 property bool showNextTime: false + property int currentPage: 0 visible: true onClosing: Qt.quit() title: "illogical-impulse Settings" @@ -37,7 +38,7 @@ ApplicationWindow { minimumWidth: 600 minimumHeight: 400 - width: 800 + width: 900 height: 650 color: Appearance.m3colors.m3background @@ -74,7 +75,7 @@ ApplicationWindow { anchors.centerIn: parent color: Appearance.colors.colOnLayer0 text: "Settings" - font.pixelSize: Appearance.font.pixelSize.hugeass + font.pixelSize: Appearance.font.pixelSize.title font.family: Appearance.font.family.title } RowLayout { // Window controls row @@ -99,12 +100,13 @@ ApplicationWindow { RowLayout { // Window content with navigation rail and content pane Layout.fillWidth: true Layout.fillHeight: true + spacing: contentPadding NavigationRail { // Window content with navigation rail and content pane id: navRail Layout.fillHeight: true Layout.margins: 5 spacing: 10 - expanded: root.width > 800 + expanded: root.width > 900 NavigationRailExpandButton {} @@ -118,7 +120,32 @@ ApplicationWindow { } } - + ColumnLayout { + Layout.topMargin: 25 + spacing: 4 + + NavigationRailButton { + toggled: root.currentPage === 0 + onClicked: root.currentPage = 0; + expanded: navRail.expanded + buttonIcon: "tune" + buttonText: "General" + } + NavigationRailButton { + toggled: root.currentPage === 1 + onClicked: root.currentPage = 1; + expanded: navRail.expanded + buttonIcon: "dashboard" + buttonText: "Widgets" + } + NavigationRailButton { + toggled: root.currentPage === 2 + onClicked: root.currentPage = 2; + expanded: navRail.expanded + buttonIcon: "settings" + buttonText: "Services" + } + } Item { Layout.fillHeight: true