nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

filedialog: add nav rail

Browse source
This commit is contained in:
2 * r + 2 * t 2025-07-20 14:10:07 +10:00
parent 6ce68d5f5c
commit abf4bd8e6b
4 changed files with 244 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
widgets/filedialog/FileDialog.qml
View file

@ -18,13 +18,18 @@ FloatingWindow {
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
spacing: Appearance.spacing.normal spacing: 0
Sidebar {
Layout.fillHeight: true
dialog: root
}
ColumnLayout { ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
spacing: Appearance.spacing.small spacing: 0
HeaderBar { HeaderBar {
Layout.fillWidth: true Layout.fillWidth: true

196
widgets/filedialog/FolderContents.qml
View file

@ -8,117 +8,153 @@ import Quickshell
import Quickshell.Io import Quickshell.Io
import Quickshell.Widgets import Quickshell.Widgets
import QtQuick import QtQuick
import QtQuick.Effects
import Qt.labs.folderlistmodel import Qt.labs.folderlistmodel
GridView { Item {
id: root id: root
required property var dialog required property var dialog
cellWidth: Sizes.itemWidth + Appearance.spacing.small StyledRect {
cellHeight: Sizes.itemWidth + Appearance.spacing.small * 2 + Appearance.padding.normal * 2 + 1 anchors.fill: parent
color: Colours.palette.m3surfaceContainer
clip: true layer.enabled: true
focus: true layer.effect: MultiEffect {
currentIndex: -1 maskSource: mask
Keys.onEscapePressed: root.currentIndex = -1 maskEnabled: true
maskInverted: true
model: FolderListModel { maskThresholdMin: 0.5
showDirsFirst: true maskSpreadAtMin: 1
folder: {
let url = "file://";
if (root.dialog.cwd[0] === "Home")
url += `${Paths.strip(Paths.home)}/${root.dialog.cwd.slice(1).join("/")}`;
else
url += root.dialog.cwd.join("/");
return url;
} }
onFolderChanged: root.currentIndex = -1
} }
delegate: StyledRect { Item {
id: item id: mask
required property int index anchors.fill: parent
required property string fileName layer.enabled: true
required property string filePath visible: false
required property url fileUrl
required property string fileSuffix
required property bool fileIsDir
readonly property real nonAnimHeight: icon.implicitHeight + name.anchors.topMargin + name.implicitHeight + Appearance.padding.normal * 2 Rectangle {
anchors.fill: parent
anchors.margins: Appearance.padding.small
radius: Appearance.rounding.small
}
}
implicitWidth: Sizes.itemWidth GridView {
implicitHeight: nonAnimHeight 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
radius: Appearance.rounding.normal
color: root.currentItem === item ? Colours.palette.m3primary : "transparent"
z: root.currentItem === item || implicitHeight !== nonAnimHeight ? 1 : 0
clip: true clip: true
focus: true
currentIndex: -1
Keys.onEscapePressed: view.currentIndex = -1
StateLayer { model: FolderListModel {
color: root.currentItem === item ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface showDirsFirst: true
folder: {
onDoubleClicked: { let url = "file://";
if (item.fileIsDir) if (root.dialog.cwd[0] === "Home")
root.dialog.cwd.push(item.fileName); url += `${Paths.strip(Paths.home)}/${root.dialog.cwd.slice(1).join("/")}`;
else else
root.dialog.accepted(item.filePath); url += root.dialog.cwd.join("/");
} return url;
function onClicked(): void {
root.currentIndex = item.index;
} }
onFolderChanged: view.currentIndex = -1
} }
IconImage { delegate: StyledRect {
id: icon id: item
anchors.horizontalCenter: parent.horizontalCenter required property int index
anchors.top: parent.top required property string fileName
anchors.topMargin: Appearance.padding.normal required property string filePath
required property url fileUrl
required property string fileSuffix
required property bool fileIsDir
asynchronous: true readonly property real nonAnimHeight: icon.implicitHeight + name.anchors.topMargin + name.implicitHeight + Appearance.padding.normal * 2
implicitSize: Sizes.itemWidth - Appearance.padding.normal * 2
source: Quickshell.iconPath(item.fileIsDir ? "inode-directory" : "application-x-zerosize") implicitWidth: Sizes.itemWidth
onStatusChanged: { implicitHeight: nonAnimHeight
if (status === Image.Error)
source = Quickshell.iconPath("error"); radius: Appearance.rounding.normal
color: view.currentItem === item ? Colours.palette.m3primary : "transparent"
z: view.currentItem === item || implicitHeight !== nonAnimHeight ? 1 : 0
clip: true
StateLayer {
color: view.currentItem === item ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
onDoubleClicked: {
if (item.fileIsDir)
root.dialog.cwd.push(item.fileName);
else
root.dialog.accepted(item.filePath);
}
function onClicked(): void {
view.currentIndex = item.index;
}
} }
Process { IconImage {
running: !item.fileIsDir id: icon
command: ["file", "--mime", "-b", item.filePath]
stdout: StdioCollector { anchors.horizontalCenter: parent.horizontalCenter
onStreamFinished: { anchors.top: parent.top
const mime = text.split(";")[0].replace("/", "-"); anchors.topMargin: Appearance.padding.normal
icon.source = mime.startsWith("image-") ? item.fileUrl : Quickshell.iconPath(mime, "image-missing");
asynchronous: true
implicitSize: Sizes.itemWidth - Appearance.padding.normal * 2
source: Quickshell.iconPath(item.fileIsDir ? "inode-directory" : "application-x-zerosize")
onStatusChanged: {
if (status === Image.Error)
source = Quickshell.iconPath("error");
}
Process {
running: !item.fileIsDir
command: ["file", "--mime", "-b", item.filePath]
stdout: StdioCollector {
onStreamFinished: {
const mime = text.split(";")[0].replace("/", "-");
icon.source = mime.startsWith("image-") ? item.fileUrl : Quickshell.iconPath(mime, "image-missing");
}
} }
} }
} }
}
StyledText { StyledText {
id: name id: name
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.top: icon.bottom anchors.top: icon.bottom
anchors.topMargin: Appearance.spacing.small anchors.topMargin: Appearance.spacing.small
anchors.margins: Appearance.padding.normal anchors.margins: Appearance.padding.normal
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text: item.fileName text: item.fileName
color: root.currentItem === item ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface color: view.currentItem === item ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
elide: root.currentItem === item ? Text.ElideNone : Text.ElideRight elide: view.currentItem === item ? Text.ElideNone : Text.ElideRight
wrapMode: root.currentItem === item ? Text.WrapAtWordBoundaryOrAnywhere : Text.NoWrap wrapMode: view.currentItem === item ? Text.WrapAtWordBoundaryOrAnywhere : Text.NoWrap
} }
Behavior on implicitHeight { Behavior on implicitHeight {
NumberAnimation { NumberAnimation {
duration: Appearance.anim.durations.normal duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard easing.bezierCurve: Appearance.anim.curves.standard
}
} }
} }
} }

120
widgets/filedialog/Sidebar.qml Normal file
View 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
}
}
}
}
}
}

1
widgets/filedialog/Sizes.qml
View file

@ -4,4 +4,5 @@ import Quickshell
Singleton { Singleton {
property int itemWidth: 100 property int itemWidth: 100
property int sidebarWidth: 200
} }