settings app: base window with navrail

2025-06-18 01:45:05 +02:00
parent aafa661f7a
commit 3123a78bfe
7 changed files with 236 additions and 20 deletions
@@ -0,0 +1,56 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+
+/**
+ * Material 3 FAB.
+ */
+RippleButton {
+    id: root
+    property string iconText: "add"
+    property bool expanded: false
+    property real baseSize: 50
+    property real elementSpacing: 5
+    implicitWidth: Math.max(contentRowLayout.implicitWidth + 10 * 2, baseSize)
+    implicitHeight: baseSize
+    buttonRadius: Appearance.rounding.small
+    colBackground: Appearance.colors.colSecondaryContainer
+    colBackgroundHover: Appearance.colors.colSecondaryContainerHover
+    colRipple: Appearance.colors.colSecondaryContainerActive
+    contentItem: RowLayout {
+        id: contentRowLayout
+        property real horizontalMargins: (root.baseSize - icon.width) / 2
+        anchors {
+            verticalCenter: parent?.verticalCenter
+            left: parent?.left
+            leftMargin: contentRowLayout.horizontalMargins
+        }
+        spacing: 0
+
+        MaterialSymbol {
+            id: icon
+            Layout.fillWidth: true
+            horizontalAlignment: Text.AlignHCenter
+            iconSize: Appearance.font.pixelSize.huge
+            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
+                }
+                text: root.buttonText
+                color: Appearance.colors.colOnLayer1
+                font.pixelSize: Appearance.font.pixelSize.small
+            }
+        }
+    }
+}
@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+
+ColumnLayout { // Window content with navigation rail and content pane
+    id: root
+    property bool expanded: true
+    spacing: 10
+
+
+}
@@ -0,0 +1,25 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+
+RippleButton {
+    id: root
+    Layout.alignment: Qt.AlignLeft
+    implicitWidth: 40
+    implicitHeight: 40
+    Layout.leftMargin: 5
+    onClicked: {
+        parent.expanded = !parent.expanded;
+    }
+    buttonRadius: Appearance.rounding.full
+    contentItem: MaterialSymbol {
+        id: icon
+        anchors.centerIn: parent
+        horizontalAlignment: Text.AlignHCenter
+        iconSize: Appearance.font.pixelSize.hugeass
+        color: Appearance.colors.colOnLayer1
+        text: root.parent.expanded ? "menu_open" : "menu"
+    }
+}
@@ -154,31 +154,18 @@ Item {
    // + FAB
    StyledRectangularShadow {
        target: fabButton
-        radius: Appearance.rounding.normal
+        radius: fabButton.buttonRadius
+        blur: 0.6 * Appearance.sizes.elevationMargin
    }
-    Button { 
+    FloatingActionButton {
        id: fabButton
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.rightMargin: root.fabMargins
        anchors.bottomMargin: root.fabMargins
-        width: root.fabSize
-        height: root.fabSize
-        PointingHandInteraction {}

        onClicked: root.showAddDialog = true

-        background: Rectangle {
-            id: fabBackground
-            anchors.fill: parent
-            radius: Appearance.rounding.normal
-            color: (fabButton.down) ? Appearance.colors.colPrimaryContainerActive : (fabButton.hovered ? Appearance.colors.colPrimaryContainerHover : Appearance.colors.colPrimaryContainer)
-
-            Behavior on color {
-                animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
-            }
-        }
-
        contentItem: MaterialSymbol {
            text: "add"
            horizontalAlignment: Text.AlignHCenter