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 {