kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

settings app: expandable navrail buttons

Browse Source
This commit is contained in:
end-4
2025-06-18 17:30:18 +02:00
parent afbf6c8ccd
commit 93baba1568
9 changed files with 204 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/quickshell/modules/common/Appearance.qml
+1 -1
View File
@@ -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
}
}
.config/quickshell/modules/common/widgets/FloatingActionButton.qml
+18 -14
View File
@@ -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
}
}
}
.config/quickshell/modules/common/widgets/NavRailButton.qml
+66
View File
@@ -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
}
}
}
.config/quickshell/modules/common/widgets/NavigationRail.qml
+2 -3
View File
@@ -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
}
.config/quickshell/modules/common/widgets/NavigationRailButton.qml
+81 -15
View File
@@ -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
}
}
.config/quickshell/modules/common/widgets/NavigationRailExpandButton.qml
+2 -2
View File
@@ -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"
}
.config/quickshell/modules/sidebarRight/BottomWidgetGroup.qml
+1 -1
View File
@@ -135,7 +135,7 @@ Rectangle {
anchors.left: parent.left
anchors.leftMargin: 5
id: tabBar
spacing: 15
spacing: 8
Repeater {
model: root.tabs
NavigationRailButton {
.config/quickshell/scripts/colors/switchwall.sh
+1 -1
View File
@@ -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
.config/quickshell/settings.qml
+32 -5
View File
@@ -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