diff options
Diffstat (limited to 'widgets/filedialog')
| -rw-r--r-- | widgets/filedialog/FileDialog.qml | 10 | ||||
| -rw-r--r-- | widgets/filedialog/HeaderBar.qml | 168 |
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 + } } } } |