filedialog: styling tweaks
This commit is contained in:
2 * r + 2 * t
parent
377a452fc1
commit
6ce68d5f5c
2 changed files with 126 additions and 104 deletions
|
|
@ -1,6 +1,7 @@
|
||||||
import qs.services
|
import qs.services
|
||||||
import qs.config
|
import qs.config
|
||||||
import Quickshell
|
import Quickshell
|
||||||
|
import QtQuick
|
||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
|
|
||||||
FloatingWindow {
|
FloatingWindow {
|
||||||
|
|
@ -16,7 +17,6 @@ FloatingWindow {
|
||||||
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.margins: Appearance.padding.normal
|
|
||||||
|
|
||||||
spacing: Appearance.spacing.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
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,122 +6,136 @@ import qs.config
|
||||||
import QtQuick
|
import QtQuick
|
||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
|
|
||||||
RowLayout {
|
StyledRect {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
required property var dialog
|
required property var dialog
|
||||||
|
|
||||||
spacing: Appearance.spacing.small
|
implicitWidth: inner.implicitWidth + Appearance.padding.normal * 2
|
||||||
|
implicitHeight: inner.implicitHeight + Appearance.padding.normal * 2
|
||||||
|
|
||||||
Item {
|
color: Colours.palette.m3surfaceContainer
|
||||||
implicitWidth: implicitHeight
|
|
||||||
implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
|
|
||||||
|
|
||||||
StateLayer {
|
RowLayout {
|
||||||
radius: Appearance.rounding.small
|
id: inner
|
||||||
|
|
||||||
function onClicked(): void {
|
anchors.fill: parent
|
||||||
root.dialog.cwd.pop();
|
anchors.margins: Appearance.padding.normal
|
||||||
}
|
spacing: Appearance.spacing.small
|
||||||
}
|
|
||||||
|
|
||||||
MaterialIcon {
|
Item {
|
||||||
id: upIcon
|
implicitWidth: implicitHeight
|
||||||
|
implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
|
||||||
|
|
||||||
anchors.centerIn: parent
|
StateLayer {
|
||||||
text: "drive_folder_upload"
|
radius: Appearance.rounding.small
|
||||||
}
|
disabled: root.dialog.cwd.length === 1
|
||||||
}
|
|
||||||
|
|
||||||
StyledRect {
|
function onClicked(): void {
|
||||||
Layout.fillWidth: true
|
root.dialog.cwd.pop();
|
||||||
|
|
||||||
radius: Appearance.rounding.small
|
|
||||||
color: Colours.palette.m3surfaceContainer
|
|
||||||
|
|
||||||
implicitHeight: pathComponents.implicitHeight + pathComponents.anchors.margins * 2
|
|
||||||
|
|
||||||
RowLayout {
|
|
||||||
id: pathComponents
|
|
||||||
|
|
||||||
anchors.fill: parent
|
|
||||||
anchors.margins: Appearance.padding.small
|
|
||||||
anchors.leftMargin: 0
|
|
||||||
|
|
||||||
spacing: Appearance.spacing.small
|
|
||||||
|
|
||||||
Repeater {
|
|
||||||
model: root.dialog.cwd
|
|
||||||
|
|
||||||
RowLayout {
|
|
||||||
id: folder
|
|
||||||
|
|
||||||
required property string modelData
|
|
||||||
required property int index
|
|
||||||
|
|
||||||
spacing: 0
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Loader {
|
|
||||||
id: homeIcon
|
|
||||||
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
id: folderName
|
|
||||||
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
MaterialIcon {
|
||||||
Layout.fillWidth: true
|
id: upIcon
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
radius: Appearance.rounding.small
|
||||||
|
color: Colours.palette.m3surfaceContainerHigh
|
||||||
|
|
||||||
|
implicitHeight: pathComponents.implicitHeight + pathComponents.anchors.margins * 2
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: pathComponents
|
||||||
|
|
||||||
|
anchors.fill: parent
|
||||||
|
anchors.margins: Appearance.padding.small / 2
|
||||||
|
anchors.leftMargin: 0
|
||||||
|
|
||||||
|
spacing: Appearance.spacing.small
|
||||||
|
|
||||||
|
Repeater {
|
||||||
|
model: root.dialog.cwd
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: folder
|
||||||
|
|
||||||
|
required property string modelData
|
||||||
|
required property int index
|
||||||
|
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
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: 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
|
||||||
|
|
||||||
|
function onClicked(): void {
|
||||||
|
root.dialog.cwd = root.dialog.cwd.slice(0, folder.index + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
id: homeIcon
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
id: folderName
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue