filedialog: add nav rail
This commit is contained in:
2 * r + 2 * t
parent
6ce68d5f5c
commit
abf4bd8e6b
4 changed files with 244 additions and 82 deletions
|
|
@ -18,13 +18,18 @@ FloatingWindow {
|
|||
RowLayout {
|
||||
anchors.fill: parent
|
||||
|
||||
spacing: Appearance.spacing.normal
|
||||
spacing: 0
|
||||
|
||||
Sidebar {
|
||||
Layout.fillHeight: true
|
||||
dialog: root
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
spacing: Appearance.spacing.small
|
||||
spacing: 0
|
||||
|
||||
HeaderBar {
|
||||
Layout.fillWidth: true
|
||||
|
|
|
|||
|
|
@ -8,20 +8,55 @@ import Quickshell
|
|||
import Quickshell.Io
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Effects
|
||||
import Qt.labs.folderlistmodel
|
||||
|
||||
GridView {
|
||||
Item {
|
||||
id: root
|
||||
|
||||
required property var dialog
|
||||
|
||||
StyledRect {
|
||||
anchors.fill: parent
|
||||
color: Colours.palette.m3surfaceContainer
|
||||
|
||||
layer.enabled: true
|
||||
layer.effect: MultiEffect {
|
||||
maskSource: mask
|
||||
maskEnabled: true
|
||||
maskInverted: true
|
||||
maskThresholdMin: 0.5
|
||||
maskSpreadAtMin: 1
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: mask
|
||||
|
||||
anchors.fill: parent
|
||||
layer.enabled: true
|
||||
visible: false
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.small
|
||||
radius: Appearance.rounding.small
|
||||
}
|
||||
}
|
||||
|
||||
GridView {
|
||||
id: view
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.small + Appearance.padding.normal
|
||||
|
||||
cellWidth: Sizes.itemWidth + Appearance.spacing.small
|
||||
cellHeight: Sizes.itemWidth + Appearance.spacing.small * 2 + Appearance.padding.normal * 2 + 1
|
||||
|
||||
clip: true
|
||||
focus: true
|
||||
currentIndex: -1
|
||||
Keys.onEscapePressed: root.currentIndex = -1
|
||||
Keys.onEscapePressed: view.currentIndex = -1
|
||||
|
||||
model: FolderListModel {
|
||||
showDirsFirst: true
|
||||
|
|
@ -33,7 +68,7 @@ GridView {
|
|||
url += root.dialog.cwd.join("/");
|
||||
return url;
|
||||
}
|
||||
onFolderChanged: root.currentIndex = -1
|
||||
onFolderChanged: view.currentIndex = -1
|
||||
}
|
||||
|
||||
delegate: StyledRect {
|
||||
|
|
@ -52,12 +87,12 @@ GridView {
|
|||
implicitHeight: nonAnimHeight
|
||||
|
||||
radius: Appearance.rounding.normal
|
||||
color: root.currentItem === item ? Colours.palette.m3primary : "transparent"
|
||||
z: root.currentItem === item || implicitHeight !== nonAnimHeight ? 1 : 0
|
||||
color: view.currentItem === item ? Colours.palette.m3primary : "transparent"
|
||||
z: view.currentItem === item || implicitHeight !== nonAnimHeight ? 1 : 0
|
||||
clip: true
|
||||
|
||||
StateLayer {
|
||||
color: root.currentItem === item ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
|
||||
color: view.currentItem === item ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
|
||||
|
||||
onDoubleClicked: {
|
||||
if (item.fileIsDir)
|
||||
|
|
@ -67,7 +102,7 @@ GridView {
|
|||
}
|
||||
|
||||
function onClicked(): void {
|
||||
root.currentIndex = item.index;
|
||||
view.currentIndex = item.index;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -109,9 +144,9 @@ GridView {
|
|||
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: item.fileName
|
||||
color: root.currentItem === item ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
|
||||
elide: root.currentItem === item ? Text.ElideNone : Text.ElideRight
|
||||
wrapMode: root.currentItem === item ? Text.WrapAtWordBoundaryOrAnywhere : Text.NoWrap
|
||||
color: view.currentItem === item ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
|
||||
elide: view.currentItem === item ? Text.ElideNone : Text.ElideRight
|
||||
wrapMode: view.currentItem === item ? Text.WrapAtWordBoundaryOrAnywhere : Text.NoWrap
|
||||
}
|
||||
|
||||
Behavior on implicitHeight {
|
||||
|
|
@ -123,3 +158,4 @@ GridView {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
120
widgets/filedialog/Sidebar.qml
Normal file
120
widgets/filedialog/Sidebar.qml
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
pragma ComponentBehavior: Bound
|
||||
|
||||
import ".."
|
||||
import qs.services
|
||||
import qs.config
|
||||
import Quickshell
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
StyledRect {
|
||||
id: root
|
||||
|
||||
required property var dialog
|
||||
|
||||
implicitWidth: Sizes.sidebarWidth
|
||||
implicitHeight: inner.implicitHeight + Appearance.padding.normal * 2
|
||||
|
||||
color: Colours.palette.m3surfaceContainer
|
||||
|
||||
ColumnLayout {
|
||||
id: inner
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
anchors.margins: Appearance.padding.normal
|
||||
spacing: Appearance.spacing.small / 2
|
||||
|
||||
StyledText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.topMargin: Appearance.padding.small / 2
|
||||
Layout.bottomMargin: Appearance.spacing.normal
|
||||
text: qsTr("Files")
|
||||
color: Colours.palette.m3onSurface
|
||||
font.pointSize: Appearance.font.size.larger
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: ["Home", "Downloads", "Desktop", "Documents", "Music", "Pictures", "Videos"]
|
||||
|
||||
StyledRect {
|
||||
id: place
|
||||
|
||||
required property string modelData
|
||||
readonly property bool selected: modelData === root.dialog.cwd[root.dialog.cwd.length - 1]
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
implicitHeight: placeInner.implicitHeight + Appearance.padding.normal * 2
|
||||
|
||||
radius: Appearance.rounding.full
|
||||
color: selected ? Colours.palette.m3secondaryContainer : "transparent"
|
||||
|
||||
StateLayer {
|
||||
color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
|
||||
|
||||
function onClicked(): void {
|
||||
if (place.modelData === "Home")
|
||||
root.dialog.cwd = ["Home"];
|
||||
else
|
||||
root.dialog.cwd = ["Home", place.modelData];
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: placeInner
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.normal
|
||||
anchors.leftMargin: Appearance.padding.large
|
||||
anchors.rightMargin: Appearance.padding.large
|
||||
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
MaterialIcon {
|
||||
text: {
|
||||
const p = place.modelData;
|
||||
if (p === "Home")
|
||||
return "home";
|
||||
if (p === "Downloads")
|
||||
return "file_download";
|
||||
if (p === "Desktop")
|
||||
return "desktop_windows";
|
||||
if (p === "Documents")
|
||||
return "description";
|
||||
if (p === "Music")
|
||||
return "music_note";
|
||||
if (p === "Pictures")
|
||||
return "image";
|
||||
if (p === "Videos")
|
||||
return "video_library";
|
||||
return "folder";
|
||||
}
|
||||
color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
|
||||
font.pointSize: Appearance.font.size.large
|
||||
fill: place.selected ? 1 : 0
|
||||
|
||||
Behavior on fill {
|
||||
NumberAnimation {
|
||||
duration: Appearance.anim.durations.normal
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Appearance.anim.curves.standard
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
Layout.fillWidth: true
|
||||
text: place.modelData
|
||||
color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,4 +4,5 @@ import Quickshell
|
|||
|
||||
Singleton {
|
||||
property int itemWidth: 100
|
||||
property int sidebarWidth: 200
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue