flea-qml 0.0.0-stage → 0.2.0

package/ui/PermissionsHeadings.qml

@@ -0,0 +1,31 @@
+import QtQuick
+import qs.Commons
+
+// The READ, WRITE and EXEC (ENTER for a folder) headings over the bit columns, each in the thirds the dialog's grid lays out.
+Row {
+    id: root
+    // The PermissionsDialog whose label width, row height and bit columns these headings sit on.
+    property var card: null
+    property bool enter: false
+    // The board's headings inherit the body's line-height of 1.6, where the note under the grid sets 1.5.
+    readonly property real headingLineRatio: 1.6
+    readonly property int lineBox: Math.round(root.headingLineRatio * Theme.font.caption)
+    readonly property int lead: Math.round((root.lineBox - metrics.height) / 2)
+    height: root.card.headingHeight
+    FontMetrics { id: metrics; font { family: Theme.font.family; pixelSize: Theme.font.caption } }
+    Item { width: root.card.labelWidth; height: parent.height }
+    Repeater {
+        model: ["READ", "WRITE", root.enter ? "ENTER" : "EXEC"]
+        // The board's row centres a one-line box in the heading and the glyphs in that box, so a floor, not Qt's half pixel, sets its top.
+        Text {
+            required property string modelData
+            required property int index
+            width: root.card.bitWidth(index); height: root.lineBox
+            y: Math.floor((parent.height - height) / 2)
+            lineHeight: height; lineHeightMode: Text.FixedHeight; topPadding: root.lead
+            horizontalAlignment: Text.AlignHCenter
+            text: modelData; textFormat: Text.PlainText; color: Theme.color.foreground
+            font { family: Theme.font.family; pixelSize: Theme.font.caption; letterSpacing: Theme.font.caption / 10 }
+        }
+    }
+}

package/ui/PhoneMounts.qml

@@ -0,0 +1,67 @@
+import QtQuick
+import Quickshell.Io
+import "js/Phones.js" as Phones
+import "js/Format.js" as Format
+import "js/Mounts.js" as Mounts
+
+// The DEVICES group's phone rows, the third Service beside ui/DeviceMounts.qml (block devices over
+// lsblk) and ui/NetworkMounts.qml (shares over gio). An Android phone or a camera is a gvfs volume
+// with no block device behind it, so lsblk can never list one; only the volume monitors can, and
+// ui/MountListing.qml's five second listing already walks them, so this Service reads that text
+// through ui/NetworkMounts.qml rather than earning a second 500 ms gio walk of its own.
+// It only lists and unmounts: mounting and opening ride ui/NetworkMounts.qml's openShare leg,
+// because an mtp:// uri mounts, resolves its FUSE folder and opens exactly the way a share does.
+Item {
+    id: root
+
+    property string listingText: ""
+    property var entries: []
+    // The rail's phones gate: an empty first listing never changes this text, so the parent also feeds the listing's own answer.
+    property bool answered: false
+    property bool listingAnswered: false
+    readonly property bool firstDone: root.answered || root.listingAnswered
+
+    signal message(string text, bool isError)
+    // Raised when an unmount ends, so the owner re-polls the listing; the poll is what flips the row.
+    signal released()
+
+    property string _unmountLabel: ""
+
+    onListingTextChanged: root.rebuild()
+
+    function rebuild() {
+        root.answered = true
+        var out = Phones.parsePhones(root.listingText)
+        // Same rule as the other two Services: an unchanged poll assigns nothing, see Mounts.sameEntries.
+        if (!Mounts.sameEntries(root.entries, out))
+            root.entries = out
+    }
+
+    // The rail hands the key back rather than an index, the same stale-index rule every release has:
+    // the poll rebuilds these rows under it, so the row is resolved fresh here.
+    function release(key) {
+        var row = Mounts.rowByKey(root.entries, key)
+        if (row >= 0)
+            root.unmount(row)
+    }
+
+    // gio's -f is offered nowhere in this tree: forcing an unmount over an open transfer is how a
+    // file manager loses somebody's photos, and a phone is the surface people copy photos from.
+    function unmount(index) {
+        var e = root.entries[index]
+        if (!e || e.kind !== "phone" || !e.mounted || unmountProcess.running)
+            return
+        root._unmountLabel = e.label
+        unmountProcess.command = ["gio", "mount", "-u", e.uri]
+        unmountProcess.running = true
+    }
+
+    Process {
+        id: unmountProcess
+        onExited: function (exitCode) {
+            if (exitCode !== 0)
+                root.message(Format.fill(Mounts.WORDS.transferUsing, root._unmountLabel), true)
+            root.released()
+        }
+    }
+}

package/ui/PickerAnswers.qml

@@ -0,0 +1,75 @@
+import QtQuick
+import qs.Commons
+import "." as Flea
+import "js/Picker.js" as Picker
+
+// The one row under the listing in every mode: the filter at the left, Cancel and the answer at the right.
+Item {
+    id: root
+    objectName: "pickerAnswers"
+    required property var picker
+    readonly property alias filterItem: filter
+    readonly property alias cancelItem: cancelButton
+    anchors.left: parent.left
+    anchors.right: parent.right
+    // A save sits in the save column: no rule of its own and one gap under the field; an open keeps its own strip.
+    readonly property real lead: root.picker.saving ? Theme.spacing.gap : Theme.spacing.hairline + Theme.spacing.rowPaddingX
+    height: root.lead + Theme.spacing.rowPaddingX + cancelButton.height
+
+    // Every answer is the one body control every dialog draws; the picker owns Tab.
+    component Answer: Flea.DialogButton {
+        id: answer
+        property string name: answer.label
+        tabHandle: true
+        tabStop: true
+        onTabbed: function(from, back) { root.picker.stepFocus(answer, back) }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: Theme.color.surface
+    }
+
+    Rectangle {
+        visible: !root.picker.saving
+        anchors.top: parent.top
+        width: parent.width
+        height: Theme.spacing.hairline
+        color: root.picker.edge
+    }
+
+    Flea.PickerFilter {
+        id: filter
+        picker: root.picker
+        x: Theme.spacing.rowPaddingX
+        y: root.lead
+        height: cancelButton.height
+    }
+
+    Row {
+        anchors.right: parent.right
+        anchors.rightMargin: Theme.spacing.rowPaddingX
+        y: root.lead
+        spacing: Theme.spacing.gap
+
+        Answer {
+            id: cancelButton
+            label: "Cancel"
+            onActivated: root.picker.cancel()
+        }
+
+        Answer {
+            id: acceptButton
+            label: root.picker.collisionReview ? "Replace" : Picker.acceptLabel(root.picker.req, root.picker.marks.length)
+            primary: !root.picker.collisionReview
+            destructive: root.picker.collisionReview
+            available: root.picker.canAccept
+            onActivated: root.picker.collisionReview ? root.picker.replace() : root.picker.accept()
+        }
+    }
+
+    function focusItems() { return (filter.visible ? [filter] : []).concat([cancelButton, acceptButton]) }
+    function controls() {
+        return root.focusItems().map(function(item) { return root.picker.control(item.name, item, item.available) })
+    }
+}

package/ui/PickerBox.qml

@@ -0,0 +1,26 @@
+import QtQuick
+import "." as Flea
+import "js/MarkBox.js" as MarkBox
+
+// The picker's mark box, one copy for the list and the grid; js/MarkBox.js holds its sizes.
+Rectangle {
+    id: root
+
+    property bool marked: false
+    readonly property int innerSize: MarkBox.inner(Theme.font.bodySmall, Theme.spacing.hairline)
+    readonly property int borderWidth: MarkBox.border(Theme.spacing.hairline)
+
+    width: MarkBox.outer(Theme.font.bodySmall, Theme.spacing.hairline)
+    height: root.width
+    color: "transparent"
+    border.width: root.borderWidth
+    border.color: root.marked ? Theme.color.accent : Theme.color.mutedFrame
+
+    Flea.Glyph {
+        anchors.fill: parent
+        visible: root.marked
+        name: "check"
+        maxSize: root.innerSize - root.borderWidth * 2
+        color: Theme.color.accent
+    }
+}

package/ui/PickerChrome.qml

@@ -0,0 +1,295 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Commons
+import "." as Flea
+import "js/Format.js" as Format
+import "js/Picker.js" as Picker
+
+// The picker's two chrome strips: what was asked for on top, where the list is standing underneath; the answers are ui/PickerAnswers.qml.
+Item {
+    id: root
+    // Its Jump dropdown hangs below the strip, so the chrome rises over the places and the listing while it shows.
+    z: entry.jumpShown ? 1 : 0
+
+    property var picker: null
+    property var submissionFocus: null
+    property var listing: null
+    property var backend: null
+
+    readonly property bool editing: entry.editing
+    readonly property var jump: entry.jump
+    function startEdit() { entry.startEdit() }
+
+    function submissionChanged() {
+        var window = root.Window.window
+        if (root.picker.submitting) {
+            var before = window ? window.activeFocusItem : null
+            root.submissionFocus = null
+            root.picker.stepFocus(null, false)
+            root.submissionFocus = {before: before, stepped: window ? window.activeFocusItem : null}
+            return
+        }
+        var pending = root.submissionFocus
+        // Replies clear submitting before they answer and before disabled controls re-enable.
+        Qt.callLater(function() {
+            if (!pending || root.submissionFocus !== pending) return
+            root.submissionFocus = null
+            if (root.picker.answered || root.picker.submitting || root.picker.backendUnavailable) return
+            var before = pending.before
+            if (before && before.visible && before.enabled && pending.stepped && pending.stepped.activeFocus)
+                before.forceActiveFocus()
+        })
+    }
+
+    Connections {
+        target: root.Window.window
+        function onActiveFocusItemChanged() {
+            if (root.submissionFocus && root.Window.window.activeFocusItem !== root.submissionFocus.stepped)
+                root.submissionFocus = null
+        }
+    }
+
+    signal backRequested()
+    signal upRequested()
+    signal viewChosen(string mode)
+
+    readonly property var req: root.picker.req
+
+    readonly property color edge: root.picker.edge
+
+    implicitHeight: ask.height + where.height
+
+    // Back and Up rest in the foreground like the main chrome; only an unlit view mark rests muted.
+    component Mark: Flea.ChromeButton {
+        id: mark
+        ruleRows: Theme.spacing.hairline
+        property bool lit: false
+        readonly property bool available: mark.enabled
+        property string name: mark.accessName
+        gesturePolicy: TapHandler.ReleaseWithinBounds
+        restingColor: Theme.color.foreground
+        activeFocusOnTab: mark.enabled
+        keyboardFocused: mark.activeFocus
+        Keys.onTabPressed: function(event) { root.picker.stepFocus(mark, (event.modifiers & Qt.ShiftModifier) !== 0) }
+        Keys.onBacktabPressed: root.picker.stepFocus(mark, true)
+    }
+
+    // One 33 px line at body: the caller's title as it came, then the requester after a middot when the portal names one.
+    Item {
+        id: ask
+        objectName: "pickerAsk"
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        height: Math.max(Theme.chromeHeight, caller.implicitHeight + 2 * Theme.spacing.rowPaddingY)
+
+        Rectangle {
+            anchors.fill: parent
+            color: Theme.color.surface
+        }
+
+        RowLayout {
+            id: titles
+            objectName: "pickerTitleLine"
+            anchors.left: parent.left
+            anchors.leftMargin: Theme.spacing.rowPaddingX
+            anchors.right: parent.right
+            anchors.rightMargin: Theme.spacing.rowPaddingX
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 0
+
+            // The caller's own words, and a filename is arbitrary text, so PlainText here too.
+            Text {
+                id: caller
+                Layout.alignment: Qt.AlignBaseline
+                Layout.fillWidth: true
+                Layout.maximumWidth: implicitWidth
+                text: Picker.title(root.req)
+                color: Theme.color.foreground
+                font.family: Theme.font.family
+                font.pixelSize: Theme.font.body
+                elide: Text.ElideRight
+                textFormat: Text.PlainText
+            }
+
+            // Only a portal identity is drawn, in a Text of its own that the caller's title never reaches.
+            Text {
+                Layout.alignment: Qt.AlignBaseline
+                visible: requester.visible
+                text: "\u00a0\u00b7\u00a0"
+                color: Theme.color.muted
+                font.family: Theme.font.family
+                font.pixelSize: Theme.font.caption
+                textFormat: Text.PlainText
+            }
+
+            Text {
+                id: requester
+                objectName: "pickerRequester"
+                Layout.alignment: Qt.AlignBaseline
+                Layout.fillWidth: true
+                visible: text.length > 0
+                text: Picker.subtitle(root.req)
+                color: Theme.color.foreground
+                font.family: Theme.font.family
+                font.pixelSize: Theme.font.caption
+                elide: Text.ElideRight
+                textFormat: Text.PlainText
+            }
+        }
+
+        Rectangle {
+            anchors.bottom: parent.bottom
+            width: parent.width
+            height: Theme.spacing.hairline
+            color: root.edge
+        }
+    }
+
+    Item {
+        id: where
+        objectName: "pickerWhere"
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: ask.bottom
+        // The board's 27 px strip at base-size 14: the chrome's own height, so the field and its dropdown sit as in the main window.
+        height: Theme.chromeHeight
+
+        Rectangle {
+            anchors.bottom: parent.bottom
+            width: parent.width
+            height: Theme.spacing.hairline
+            color: root.edge
+        }
+
+        Row {
+            id: moves
+            anchors.left: parent.left
+            anchors.leftMargin: Theme.spacing.rowPaddingX
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: Theme.spacing.gap
+
+            Mark {
+                id: backButton
+                objectName: "pickerBack"
+                glyph: "arrow-left"
+                enabled: !root.picker.backendUnavailable && root.picker.history.length > 0 && !root.picker.submitting
+                onActivated: root.backRequested()
+            }
+
+            Mark {
+                id: upButton
+                objectName: "pickerUp"
+                glyph: "arrow-up"
+                accessName: root.picker.recent ? "Parent folder unavailable in Recent" : "Parent folder"
+                // The board's own rule, drawn as its disabled Up: a history has no directory above it.
+                enabled: !root.picker.backendUnavailable && !root.picker.submitting && !root.picker.recent && Picker.parentOf(root.picker.path) !== root.picker.path
+                onActivated: root.upRequested()
+            }
+        }
+
+        // Parents muted, the leaf lit inline after them; a long path elides its parents from the left and keeps the leaf whole.
+        Row {
+            id: strip
+            objectName: "pickerStrip"
+            anchors.left: moves.right
+            anchors.leftMargin: Theme.spacing.gap
+            anchors.right: parent.right
+            anchors.rightMargin: views.width + Theme.spacing.rowPaddingX + Theme.spacing.gap
+            anchors.verticalCenter: parent.verticalCenter
+            // The marks centre in the band above the rule, so the path does too.
+            anchors.verticalCenterOffset: -Theme.spacing.hairline / 2
+            visible: !entry.editing
+            // Recent is a location and not a path, so the strip says its name, never a tilde form of the token.
+            readonly property string display: root.picker.recent ? Picker.RECENT_LABEL : Format.tilde(root.picker.path, root.picker.home)
+            readonly property string leaf: root.picker.recent ? strip.display : Format.leafPart(strip.display)
+            readonly property string parents: root.picker.recent ? "" : strip.display.substring(0, strip.display.length - strip.leaf.length)
+            Text {
+                id: stripParents
+                width: Math.min(implicitWidth, Math.max(0, strip.width - stripLeaf.width))
+                visible: strip.parents.length > 0
+                text: strip.parents
+                color: Theme.color.muted
+                font.family: Theme.font.family
+                font.pixelSize: Theme.font.caption
+                elide: Text.ElideLeft
+                textFormat: Text.PlainText
+            }
+            Text {
+                id: stripLeaf
+                width: Math.min(implicitWidth, strip.width)
+                text: strip.leaf
+                color: Theme.color.foreground
+                font.family: Theme.font.family
+                font.pixelSize: Theme.font.caption
+                elide: Text.ElideMiddle
+                textFormat: Text.PlainText
+            }
+        }
+
+        // Picker040 path entry: the shared field, whose line pathLogic below answers.
+        Flea.PathEntry {
+            id: entry
+            anchors.left: moves.right
+            anchors.leftMargin: Theme.spacing.gap
+            anchors.right: parent.right
+            anchors.rightMargin: views.width + Theme.spacing.rowPaddingX + Theme.spacing.gap
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: Theme.spacing.hairline
+            path: pathLogic.basePath
+            home: root.picker.home
+            showHidden: root.picker.showHidden
+            onCommitLine: function (text) { pathLogic.commitTyped(text) }
+            onJumpChosen: function (path) { pathLogic.ask(path) }
+            onEditClosed: pathLogic.editClosed()
+            onCompleteRequested: function (dir, hidden) { root.listing.peek(dir, root.picker.windowSize, hidden) }
+            onSaid: function (text) { root.picker.say(text, false) }
+            onJumpRequested: function (id, ranking, favourites, recent) { root.listing.jump(id, ranking, favourites, recent) }
+        }
+
+        Flea.PickerPathBar {
+            id: pathLogic
+            picker: root.picker
+            listing: root.listing
+            backend: root.backend
+            entry: entry
+        }
+    }
+
+    // Pointer and ctrl-1/ctrl-3 targets only; callout 12 keeps them out of the Tab walk.
+    Row {
+        id: views
+        anchors.right: parent.right
+        anchors.rightMargin: Theme.spacing.rowPaddingX
+        anchors.verticalCenter: where.verticalCenter
+        spacing: Theme.spacing.gap
+
+        Mark {
+            id: listButton
+            objectName: "pickerListView"
+            glyph: "list"
+            lit: root.picker.viewMode === "list"
+            restingColor: listButton.lit ? Theme.color.foreground : Theme.color.mutedFrame
+            activeFocusOnTab: false
+            onActivated: root.viewChosen("list")
+        }
+
+        Mark {
+            id: gridButton
+            objectName: "pickerGridView"
+            glyph: "grid"
+            lit: root.picker.viewMode === "grid"
+            restingColor: gridButton.lit ? Theme.color.foreground : Theme.color.mutedFrame
+            activeFocusOnTab: false
+            onActivated: root.viewChosen("grid")
+        }
+    }
+
+    function focusItems() {
+        return [backButton, upButton]
+    }
+    function controls() {
+        return root.focusItems().concat([listButton, gridButton]).map(function(item) { return root.picker.control(item.name, item, item.available) })
+    }
+}

package/ui/PickerFilter.qml

@@ -0,0 +1,97 @@
+import QtQuick
+import qs.Commons
+import "." as Flea
+import "js/Picker.js" as Picker
+
+// Picker040's filter dropdown: one trigger at the menu's width, its menu opening flush above it.
+Item {
+    id: root
+    required property var picker
+    readonly property var chips: Picker.chips(root.picker.req)
+    readonly property int current: root.chips.findIndex(function(chip) { return chip.index === root.picker.filterIndex })
+    // The focus walk and the probe read these two the way they read a button's.
+    readonly property string name: "Filter"
+    readonly property bool available: root.enabled
+    // The board draws the chevron in the foreground at four fifths.
+    readonly property real chevronAlpha: 0.8
+    // The chevron's box is the body text plus two pixels, the board's 16 px at base size 14.
+    readonly property real chevronSize: Theme.font.body + 2
+    // Built at the first open, so a picker that never opens it holds no menu.
+    property Item menu: null
+
+    width: Theme.menuWidth
+    visible: root.chips.length > 0
+    enabled: !root.picker.backendUnavailable && !root.picker.submitting
+    opacity: root.enabled ? 1 : Theme.disabledOpacity
+    activeFocusOnTab: root.enabled
+
+    Accessible.role: Accessible.ComboBox
+    Accessible.name: root.name
+    Accessible.description: root.current >= 0 ? root.chips[root.current].label : ""
+    Accessible.onPressAction: root.open()
+
+    Keys.onTabPressed: function(event) { root.picker.stepFocus(root, (event.modifiers & Qt.ShiftModifier) !== 0) }
+    Keys.onBacktabPressed: root.picker.stepFocus(root, true)
+    Keys.onReturnPressed: root.open()
+    Keys.onEnterPressed: root.open()
+    Keys.onSpacePressed: root.open()
+    Keys.onDownPressed: root.open()
+
+    // One entry per filter then All files, the mark slot empty; the action carries the filter index.
+    function open() {
+        if (!root.enabled) return
+        if (!root.menu) {
+            root.menu = Qt.createComponent("ContextMenu.qml").createObject(root.picker.contentItem)
+            root.menu.railChosen.connect(function(action) { if (root.enabled) root.picker.filterIndex = parseInt(action) })
+        }
+        var entries = root.chips.map(function(chip) { return {label: chip.label, action: String(chip.index), mark: "", hint: ""} })
+        // The menu is as tall as its rows and padding, so its bottom edge is the trigger's top.
+        var shut = root.mapToItem(root.picker.contentItem, 0, 0)
+        root.menu.openForRail("filter", entries, Qt.point(shut.x, shut.y - entries.length * Theme.rowHeight - 2 * Theme.spacing.rowPaddingY))
+        root.menu.cursor = root.current
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: Qt.alpha(Theme.color.foreground, hover.hovered || press.pressed ? Theme.washHover : 0)
+        border.width: Theme.spacing.hairline
+        border.color: root.activeFocus ? Theme.color.accent : Theme.color.muted
+    }
+
+    Text {
+        anchors.left: parent.left
+        anchors.leftMargin: Theme.spacing.gap
+        anchors.right: chevron.left
+        anchors.rightMargin: Theme.spacing.gap
+        anchors.verticalCenter: parent.verticalCenter
+        text: root.current >= 0 ? root.chips[root.current].label : ""
+        color: Theme.color.foreground
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.body
+        textFormat: Text.PlainText
+        elide: Text.ElideRight
+    }
+
+    Flea.Glyph {
+        id: chevron
+        anchors.right: parent.right
+        anchors.rightMargin: Theme.spacing.gap
+        anchors.verticalCenter: parent.verticalCenter
+        width: root.chevronSize
+        height: width
+        maxSize: width
+        name: "chevron-down"
+        color: Qt.alpha(Theme.color.foreground, root.chevronAlpha)
+    }
+
+    HoverHandler {
+        id: hover
+        cursorShape: Qt.PointingHandCursor
+    }
+
+    TapHandler {
+        id: press
+        acceptedButtons: Qt.LeftButton
+        onTapped: { root.forceActiveFocus(Qt.MouseFocusReason); root.open() }
+    }
+}