filedialog: styling tweaks

2 files changed, 100 insertions, 78 deletions

diff --git a/widgets/filedialog/FileDialog.qml b/widgets/filedialog/FileDialog.qml
index d59ae65..a709122 100644
--- a/widgets/filedialog/FileDialog.qml
+++ b/widgets/filedialog/FileDialog.qml
@@ -1,6 +1,7 @@
 import qs.services
 import qs.config
 import Quickshell
+import QtQuick
 import QtQuick.Layouts
 
 FloatingWindow {
@@ -16,7 +17,6 @@ FloatingWindow {
 
     RowLayout {
         anchors.fill: parent
-        anchors.margins: Appearance.padding.normal
 
         spacing: Appearance.spacing.normal
 
@@ -38,4 +38,12 @@ FloatingWindow {
             }
         }
     }
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
 }
diff --git a/widgets/filedialog/HeaderBar.qml b/widgets/filedialog/HeaderBar.qml
index 077bd29..4af9672 100644
--- a/widgets/filedialog/HeaderBar.qml
+++ b/widgets/filedialog/HeaderBar.qml
@@ -6,122 +6,136 @@ import qs.config
 import QtQuick
 import QtQuick.Layouts
 
-RowLayout {
+StyledRect {
     id: root
 
     required property var dialog
 
-    spacing: Appearance.spacing.small
+    implicitWidth: inner.implicitWidth + Appearance.padding.normal * 2
+    implicitHeight: inner.implicitHeight + Appearance.padding.normal * 2
 
-    Item {
-        implicitWidth: implicitHeight
-        implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
+    color: Colours.palette.m3surfaceContainer
 
-        StateLayer {
-            radius: Appearance.rounding.small
+    RowLayout {
+        id: inner
+
+        anchors.fill: parent
+        anchors.margins: Appearance.padding.normal
+        spacing: Appearance.spacing.small
+
+        Item {
+            implicitWidth: implicitHeight
+            implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
 
-            function onClicked(): void {
-                root.dialog.cwd.pop();
+            StateLayer {
+                radius: Appearance.rounding.small
+                disabled: root.dialog.cwd.length === 1
+
+                function onClicked(): void {
+                    root.dialog.cwd.pop();
+                }
             }
-        }
 
-        MaterialIcon {
-            id: upIcon
+            MaterialIcon {
+                id: upIcon
 
-            anchors.centerIn: parent
-            text: "drive_folder_upload"
+                anchors.centerIn: parent
+                text: "drive_folder_upload"
+                color: root.dialog.cwd.length === 1 ? Colours.palette.m3outline : Colours.palette.m3onSurface
+                grade: 200
+            }
         }
-    }
 
-    StyledRect {
-        Layout.fillWidth: true
+        StyledRect {
+            Layout.fillWidth: true
 
-        radius: Appearance.rounding.small
-        color: Colours.palette.m3surfaceContainer
+            radius: Appearance.rounding.small
+            color: Colours.palette.m3surfaceContainerHigh
 
-        implicitHeight: pathComponents.implicitHeight + pathComponents.anchors.margins * 2
+            implicitHeight: pathComponents.implicitHeight + pathComponents.anchors.margins * 2
 
-        RowLayout {
-            id: pathComponents
+            RowLayout {
+                id: pathComponents
 
-            anchors.fill: parent
-            anchors.margins: Appearance.padding.small
-            anchors.leftMargin: 0
+                anchors.fill: parent
+                anchors.margins: Appearance.padding.small / 2
+                anchors.leftMargin: 0
 
-            spacing: Appearance.spacing.small
+                spacing: Appearance.spacing.small
 
-            Repeater {
-                model: root.dialog.cwd
+                Repeater {
+                    model: root.dialog.cwd
 
-                RowLayout {
-                    id: folder
+                    RowLayout {
+                        id: folder
 
-                    required property string modelData
-                    required property int index
+                        required property string modelData
+                        required property int index
 
-                    spacing: 0
+                        spacing: 0
 
-                    Loader {
-                        Layout.rightMargin: Appearance.spacing.small
-                        active: folder.index > 0
-                        asynchronous: true
-                        sourceComponent: StyledText {
-                            text: "/"
-                            color: Colours.palette.m3onSurfaceVariant
-                            font.bold: true
+                        Loader {
+                            Layout.rightMargin: Appearance.spacing.small
+                            active: folder.index > 0
+                            asynchronous: true
+                            sourceComponent: StyledText {
+                                text: "/"
+                                color: Colours.palette.m3onSurfaceVariant
+                                font.bold: true
+                            }
                         }
-                    }
 
-                    Item {
-                        implicitWidth: homeIcon.implicitWidth + (homeIcon.active ? Appearance.padding.small : 0) + folderName.implicitWidth + Appearance.padding.normal * 2
-                        implicitHeight: Math.max(homeIcon.implicitHeight, folderName.implicitHeight) + Appearance.padding.small * 2
+                        Item {
+                            implicitWidth: homeIcon.implicitWidth + (homeIcon.active ? Appearance.padding.small : 0) + folderName.implicitWidth + Appearance.padding.normal * 2
+                            implicitHeight: folderName.implicitHeight + Appearance.padding.small * 2
 
-                        Loader {
-                            anchors.fill: parent
-                            active: folder.index < root.dialog.cwd.length - 1
-                            asynchronous: true
-                            sourceComponent: StateLayer {
-                                radius: Appearance.rounding.small
+                            Loader {
+                                anchors.fill: parent
+                                active: folder.index < root.dialog.cwd.length - 1
+                                asynchronous: true
+                                sourceComponent: StateLayer {
+                                    radius: Appearance.rounding.small
 
-                                function onClicked(): void {
-                                    root.dialog.cwd = root.dialog.cwd.slice(0, folder.index + 1);
+                                    function onClicked(): void {
+                                        root.dialog.cwd = root.dialog.cwd.slice(0, folder.index + 1);
+                                    }
                                 }
                             }
-                        }
 
-                        Loader {
-                            id: homeIcon
+                            Loader {
+                                id: homeIcon
 
-                            anchors.left: parent.left
-                            anchors.verticalCenter: parent.verticalCenter
-                            anchors.leftMargin: Appearance.padding.normal
+                                anchors.left: parent.left
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.leftMargin: Appearance.padding.normal
 
-                            active: folder.index === 0 && folder.modelData === "Home"
-                            asynchronous: true
-                            sourceComponent: MaterialIcon {
-                                text: "home"
-                                color: root.dialog.cwd.length === 1 ? Colours.palette.m3onSurface : Colours.palette.m3onSurfaceVariant
-                                fill: 1
+                                active: folder.index === 0 && folder.modelData === "Home"
+                                asynchronous: true
+                                sourceComponent: MaterialIcon {
+                                    text: "home"
+                                    color: root.dialog.cwd.length === 1 ? Colours.palette.m3onSurface : Colours.palette.m3onSurfaceVariant
+                                    fill: 1
+                                }
                             }
-                        }
 
-                        StyledText {
-                            id: folderName
+                            StyledText {
+                                id: folderName
 
-                            anchors.left: homeIcon.right
-                            anchors.verticalCenter: parent.verticalCenter
-                            anchors.leftMargin: homeIcon.active ? Appearance.padding.small : 0
+                                anchors.left: homeIcon.right
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.leftMargin: homeIcon.active ? Appearance.padding.small : 0
 
-                            text: folder.modelData
-                            color: folder.index < root.dialog.cwd.length - 1 ? Colours.palette.m3onSurfaceVariant : Colours.palette.m3onSurface
-                            font.bold: true
+                                text: folder.modelData
+                                color: folder.index < root.dialog.cwd.length - 1 ? Colours.palette.m3onSurfaceVariant : Colours.palette.m3onSurface
+                                font.bold: true
+                            }
                         }
                     }
                 }
-            }
 
-            Item {
-                Layout.fillWidth: true
+                Item {
+                    Layout.fillWidth: true
+                }
             }
         }
     }