flea-qml 0.0.0-stage → 0.1.0

package/ui/FilterStrip.qml

@@ -0,0 +1,133 @@
+import QtQuick
+import "js/Filter.js" as Filter
+import "js/Focus.js" as Focus
+
+// The filter's query line: the funnel mark, the query with its caret, and the caveat when the pane
+// is not holding the whole listing. Presentation only, the way ui/SearchStrip.qml is; ui/Pane.qml
+// owns every value it draws and ui/js/Filter.js owns every transition.
+//
+// It sits below the column header rather than covering it, which is what the search's own strip
+// does: the sort mark has to stay readable, because filtering a sorted view keeps that order.
+Item {
+    id: root
+
+    property var pane: null
+
+    readonly property bool up: !root.pane.trash.opened && (root.pane.filterTyping || root.pane.filterQuery.length > 0)
+    readonly property real ruleOpacity: 0.12
+    // Twice the hairline, the same weight the cursor row's mark uses, so one caret rule serves both.
+    readonly property int caretWidth: Theme.spacing.hairline * 2
+
+    // A chrome strip is not a data row; see Theme.qml's chromeHeight comment. Collapsing rather than
+    // only hiding is what keeps the rows starting at the top of the pane when no filter is up.
+    implicitHeight: Theme.chromeHeight
+    visible: root.up
+    height: root.up ? implicitHeight : 0
+
+    // SearchFilter rule 4: the funnel sits on the pane's own ground, where the magnifier sits on the
+    // raised chrome, because a filter is about the listing under it and a search is not about here.
+    Rectangle {
+        anchors.fill: parent
+        color: Glass.on ? "transparent" : Theme.color.background
+    }
+
+    Rectangle {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: Theme.spacing.hairline
+        color: Theme.color.foreground
+        opacity: root.ruleOpacity
+    }
+
+    Glyph {
+        id: mark
+        anchors.left: parent.left
+        anchors.leftMargin: Theme.spacing.rowPaddingX
+        anchors.verticalCenter: parent.verticalCenter
+        // The chrome mark token, the size the search strip's own lens is drawn at.
+        width: Theme.chromeMarkSize
+        height: Theme.chromeMarkSize
+        name: "filter"
+        color: Theme.color.accent
+    }
+
+    // flea-qml: a real text field, as Find's is: the caret moves, blinks and selects, and copy and paste
+    // work as in any input. Every edit narrows through Filter.apply, the one writer of the query; the
+    // keys that are not editing go to the pane's own route, so Enter still hands the keyboard to the
+    // list with the filter standing, and Esc and the arrows behave as before.
+    TextInput {
+        id: field
+        objectName: "filterInput"
+        anchors.left: mark.right
+        anchors.leftMargin: Theme.spacing.gap
+        anchors.verticalCenter: parent.verticalCenter
+        width: Math.min(Math.max(contentWidth, Theme.chromeMarkSize) + root.caretWidth * 2, Math.max(0, root.width / 2))
+        clip: true
+        text: root.pane.filterQuery
+        color: Theme.color.foreground
+        selectionColor: Theme.color.accent
+        selectedTextColor: Theme.color.background
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.body
+        selectByMouse: true
+        onTextEdited: Filter.apply(root.pane, text)
+        // A click into the field takes the filter back to typing.
+        onActiveFocusChanged: if (activeFocus && !root.pane.filterTyping) root.pane.filterTyping = true
+        Keys.onPressed: function (event) {
+            switch (event.key) {
+            case Qt.Key_Return: case Qt.Key_Enter: case Qt.Key_Escape:
+            case Qt.Key_Up: case Qt.Key_Down: case Qt.Key_PageUp: case Qt.Key_PageDown:
+                event.accepted = Focus.handleKey(event, root.pane, root.pane.sidebar, "filter")
+            }
+        }
+    }
+    // Typing gives the field the keyboard; standing or closing hands it back to the list.
+    Connections {
+        target: root.pane
+        function onFilterTypingChanged() {
+            if (root.pane.filterTyping) Qt.callLater(field.forceActiveFocus)
+            else if (field.activeFocus && root.pane.listArea) root.pane.listArea.forceActiveFocus()
+        }
+    }
+
+    // SearchFilter rule 1: the strip owns what it created, so the count and its scope read here and
+    // no sentence is left standing in the listing, where it would be a row that is not a file.
+    Text {
+        id: summaryText
+        anchors.left: field.right
+        anchors.leftMargin: Theme.spacing.gap
+        anchors.right: wayOut.left
+        anchors.rightMargin: Theme.spacing.gap
+        anchors.verticalCenter: parent.verticalCenter
+        elide: Text.ElideRight
+        text: Filter.summary(root.pane.shown, root.pane.rows.length, root.pane.total)
+        color: Theme.color.muted
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+        textFormat: Text.PlainText
+    }
+
+    Text {
+        id: wayOut
+        anchors.right: closeButton.left
+        anchors.rightMargin: Theme.spacing.gap
+        anchors.verticalCenter: parent.verticalCenter
+        text: "esc clears"
+        color: Theme.color.muted
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+        textFormat: Text.PlainText
+    }
+
+    // flea-qml: ✕ clears and closes the filter, what Esc does from the list.
+    ChromeButton {
+        id: closeButton
+        anchors.right: parent.right
+        anchors.rightMargin: Theme.spacing.rowPaddingX
+        anchors.verticalCenter: parent.verticalCenter
+        glyph: "x"
+        accessName: "Close filter"
+        onActivated: Filter.close(root.pane)
+    }
+}

package/ui/FitMetrics.qml

@@ -0,0 +1,22 @@
+import QtQuick
+import "js/ColumnFit.js" as ColumnFit
+
+// Fit-only metrics, so Header carries no fit helper until a fit runs.
+Item {
+    TextMetrics {
+        id: fitText
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+    }
+
+    // One held row's measured width, in the cells' own caption face.
+    function cellWidth(key, row, kindNames, dirSize) {
+        fitText.text = ColumnFit.cellText(key, row, kindNames, dirSize)
+        return Math.ceil(fitText.advanceWidth)
+    }
+
+    // The held index behind one held row, for the dirsize the row would draw.
+    function dirSizeFor(state, held, at) {
+        return ColumnFit.dirSizeFor(state, held, at)
+    }
+}

package/ui/FlashDriveRows.qml

@@ -0,0 +1,137 @@
+import QtQuick
+import qs.Commons
+import "." as Flea
+import "js/Flash.js" as Flash
+import "js/Format.js" as Format
+
+// The DRIVES step: one file row per drive with its refusal hint, or the empty row while no drive is plugged in.
+Column {
+    id: root
+    property var drives: []
+    property bool drivesReady: false
+    property int selected: -1
+    property int cursor: 0
+    property bool focused: true
+    property bool running: false
+    signal chooseDrive(int index)
+    width: 0
+    // The board's detail column, 190 px at bodySmall 13, scaled with the text.
+    readonly property int detailBoard: 190
+    readonly property int bodySmallBoard: 13
+    Text {
+        x: Theme.spacing.rowPaddingX
+        // A later section opens a panel gap under the one above, as the rail's FAVORITES does.
+        topPadding: Math.round(Style.spacing.panelGap * Theme.sizeRatio) + Math.ceil(font.pixelSize * 0.15)
+        bottomPadding: Theme.spacing.gap
+        text: "DRIVES"
+        color: Theme.color.muted
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+        font.letterSpacing: 1
+        textFormat: Text.PlainText
+    }
+    Repeater {
+        model: root.drives
+        delegate: Column {
+            required property var modelData
+            required property int index
+            // Read once through the delegate: every bare modelData or index below would warn on its own.
+            readonly property var row: modelData
+            readonly property int idx: index
+            // Detail ink lifts to foreground on the cursor or chosen row, muted at rest.
+            readonly property color detailInk: (root.cursor === idx + 1 || root.selected === idx) ? Theme.color.foreground : Theme.color.muted
+            width: root.width
+            Rectangle {
+                width: parent.width
+                height: Theme.fileRowHeight
+                // The cursor uses accent ink; the chosen drive keeps the marked rung, as Row.qml draws both.
+                color: root.cursor === idx + 1 ? (root.focused ? Style.selectedAccentFill : "transparent")
+                    : root.selected === idx ? Style.selectionFill : "transparent"
+                opacity: Flash.fits(row) ? 1 : Theme.disabledOpacity
+                Rectangle {
+                    visible: root.cursor === idx + 1
+                    width: Theme.spacing.hairline * 2
+                    height: parent.height
+                    color: root.focused ? Theme.color.accent : Theme.color.mutedFrame
+                }
+                Row {
+                    anchors.fill: parent
+                    anchors.leftMargin: Theme.spacing.rowPaddingX
+                    anchors.rightMargin: Theme.spacing.rowPaddingX
+                    spacing: Theme.spacing.gap
+                    Flea.Glyph { width: Theme.markSize; height: parent.height; name: "drive"; color: Theme.color.foreground }
+                    Text {
+                        width: Math.max(0, parent.width - Theme.markSize - driveDetail.width - driveSize.width - 3 * parent.spacing)
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: row ? Flash.driveName(row, root.drives) : ""
+                        textFormat: Text.PlainText
+                        elide: Text.ElideRight
+                        color: Theme.color.foreground
+                        font { family: Theme.font.family; pixelSize: Theme.font.body }
+                    }
+                    Text {
+                        id: driveDetail
+                        width: Math.round(root.detailBoard * Theme.font.bodySmall / root.bodySmallBoard)
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: row ? Flash.driveDetail(row, root.drives) : ""
+                        textFormat: Text.PlainText
+                        elide: Text.ElideRight
+                        color: detailInk
+                        font { family: Theme.font.family; pixelSize: Theme.font.caption }
+                    }
+                    Text {
+                        id: driveSize
+                        width: Theme.column.size
+                        anchors.verticalCenter: parent.verticalCenter
+                        horizontalAlignment: Text.AlignRight
+                        text: row ? Format.size(row.bytes) : ""
+                        textFormat: Text.PlainText
+                        elide: Text.ElideRight
+                        color: detailInk
+                        font { family: Theme.font.family; pixelSize: Theme.font.caption }
+                    }
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    acceptedButtons: Qt.LeftButton
+                    onClicked: {
+                        if (!root.running && Flash.fits(row))
+                            root.chooseDrive(idx)
+                    }
+                }
+            }
+            Text {
+                visible: !Flash.fits(row)
+                x: Theme.spacing.rowPaddingX + Theme.markSize + Theme.spacing.gap
+                topPadding: Theme.spacing.rowPaddingY
+                bottomPadding: Theme.spacing.rowPaddingY
+                width: parent.width - x - Theme.spacing.rowPaddingX
+                wrapMode: Text.Wrap
+                text: Flash.refusedHint(row)
+                color: Theme.color.muted
+                font { family: Theme.font.family; pixelSize: Theme.font.caption }
+                textFormat: Text.PlainText
+            }
+        }
+    }
+    Item {
+        visible: root.drivesReady && root.drives.length === 0
+        width: root.width
+        height: Theme.fileRowHeight
+        Row {
+            anchors.fill: parent
+            anchors.leftMargin: Theme.spacing.rowPaddingX
+            anchors.rightMargin: Theme.spacing.rowPaddingX
+            spacing: Theme.spacing.gap
+            Flea.Glyph { width: Theme.markSize; height: parent.height; name: "drive"; color: Theme.color.mutedFrame }
+            Text {
+                anchors.verticalCenter: parent.verticalCenter
+                text: "Plug in a USB drive or SD card"
+                textFormat: Text.PlainText
+                elide: Text.ElideRight
+                color: Theme.color.muted
+                font { family: Theme.font.family; pixelSize: Theme.font.body }
+            }
+        }
+    }
+}

package/ui/FlashHost.qml

@@ -0,0 +1,72 @@
+import QtQuick
+import "js/Focus.js" as Focus
+import "js/Flash.js" as Flash
+import "js/FlashPane.js" as FlashPane
+
+// Built once per window on first use with no placeholder; one host serves every later open and marks its pane active.
+Loader {
+    id: root
+    property var coverPane: null
+    active: false
+    visible: opened
+    readonly property bool opened: item !== null && item.opened
+    readonly property int count: item ? item.driveCount : 0
+    // The counts zone's own line while the host owns the pane, read by the window.
+    readonly property string countText: Flash.drivesLine(root.count)
+
+    // Covers the opening pane's slot as Trash does; a second pane cannot take it while a flash runs.
+    function openFor(pane, image, device) {
+        if (root.item && root.item.pane !== pane && root.item.transfer.running === true) {
+            pane.message(Flash.alreadyRunning(), false)
+            return
+        }
+        FlashPane.cover(root, pane)
+        root.parent = pane
+        root.anchors.fill = pane
+        root.anchors.leftMargin = pane.sidebarWidth
+        root.active = true
+        if (!root.item || root.item.pane !== pane)
+            root.setSource("FlashView.qml", { pane: pane, statusBar: pane.statusBar })
+        if (image && image.length > 0)
+            root.item.openWithImage(image)
+        else
+            root.item.openWithDrive(device)
+    }
+    function close() {
+        if (root.opened)
+            root.item.close()
+        FlashPane.uncover(root)
+    }
+    // The read-only seam's own flash readers, so ui/Ipc.qml stays one call per entry point.
+    function describe() {
+        var view = root.item
+        if (!view)
+            return "{\"opened\":false}"
+        return JSON.stringify({ opened: view.opened, cursor: view.cursor,
+            image: view.image ? view.image.path : "", drives: view.drives.length,
+            selected: view.selected, live: view.live, running: view.running,
+            phase: view.running ? view.transfer.phase : "",
+            ending: view.ending ? view.ending.headline : "" })
+    }
+    function controlItem(name) {
+        var view = root.item
+        if (!view)
+            return null
+        return name === "flash" ? view.flashItem : name === "cancel" ? view.cancelItem
+            : name === "end" ? view.endItem : null
+    }
+    Connections {
+        target: root.item
+        function onBackRequested() {
+            if (!root.coverPane)
+                return
+            FlashPane.uncover(root)
+            root.coverPane.focusView = Focus.LIST
+            root.coverPane.listArea.forceActiveFocus()
+        }
+        function onFocusRailRequested() {
+            if (root.coverPane)
+                root.coverPane.focusView = Focus.RAIL
+        }
+    }
+}

package/ui/FlashImageRow.qml

@@ -0,0 +1,104 @@
+import QtQuick
+import qs.Commons
+import "." as Flea
+import "js/Flash.js" as Flash
+import "js/Format.js" as Format
+
+// The IMAGE step: heading, the chosen image with its sizes or the picker row, and the refusal hint under a refused image.
+Column {
+    id: root
+    property var image: null
+    property bool cursor: false
+    property bool focused: true
+    property bool running: false
+    signal choose()
+    width: 0
+    // The board's detail column, 190 px at bodySmall 13, scaled with the text.
+    readonly property int detailBoard: 190
+    readonly property int bodySmallBoard: 13
+    // Detail ink lifts to foreground under the cursor, muted at rest, as Row.qml cellInk does.
+    readonly property color detailInk: root.cursor ? Theme.color.foreground : Theme.color.muted
+    Text {
+        x: Theme.spacing.rowPaddingX
+        // The first section opens one row padding under the strip, as the rail's PLACES does.
+        topPadding: Theme.spacing.rowPaddingX + Math.ceil(font.pixelSize * 0.15)
+        bottomPadding: Theme.spacing.gap
+        text: "IMAGE"
+        color: Theme.color.muted
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+        font.letterSpacing: 1
+        textFormat: Text.PlainText
+    }
+    Rectangle {
+        width: root.width
+        height: Theme.fileRowHeight
+        // The cursor uses accent ink, as every listing row does; a refused image only dims.
+        color: root.cursor ? (root.focused ? Style.selectedAccentFill : "transparent") : "transparent"
+        opacity: root.image && root.image.refused ? Theme.disabledOpacity : 1
+        // Twice the hairline, the cursor mark against the row edge, as Row.qml draws it.
+        Rectangle {
+            visible: root.cursor
+            width: Theme.spacing.hairline * 2
+            height: parent.height
+            color: root.focused ? Theme.color.accent : Theme.color.mutedFrame
+        }
+        Row {
+            anchors.fill: parent
+            anchors.leftMargin: Theme.spacing.rowPaddingX
+            anchors.rightMargin: Theme.spacing.rowPaddingX
+            spacing: Theme.spacing.gap
+            Flea.Glyph { width: Theme.markSize; height: parent.height; name: root.image ? "file" : "folder-open"; color: Theme.color.foreground }
+            Text {
+                width: Math.max(0, parent.width - Theme.markSize - imageDetail.width - imageSize.width - 3 * parent.spacing)
+                anchors.verticalCenter: parent.verticalCenter
+                text: root.image ? Flash.leaf(root.image.path) : "Choose an image…"
+                textFormat: Text.PlainText
+                elide: Text.ElideRight
+                color: Theme.color.foreground
+                font { family: Theme.font.family; pixelSize: Theme.font.body }
+            }
+            Text {
+                id: imageDetail
+                width: Math.round(root.detailBoard * Theme.font.bodySmall / root.bodySmallBoard)
+                anchors.verticalCenter: parent.verticalCenter
+                text: Flash.imageDetail(root.image)
+                textFormat: Text.PlainText
+                elide: Text.ElideRight
+                color: root.detailInk
+                font { family: Theme.font.family; pixelSize: Theme.font.caption }
+            }
+            Text {
+                id: imageSize
+                width: Theme.column.size
+                anchors.verticalCenter: parent.verticalCenter
+                horizontalAlignment: Text.AlignRight
+                text: root.image ? Format.size(root.image.bytes) : ""
+                textFormat: Text.PlainText
+                elide: Text.ElideRight
+                color: root.detailInk
+                font { family: Theme.font.family; pixelSize: Theme.font.caption }
+            }
+        }
+        MouseArea {
+            anchors.fill: parent
+            acceptedButtons: Qt.LeftButton
+            onClicked: {
+                if (!root.running)
+                    root.choose()
+            }
+        }
+    }
+    Text {
+        visible: root.image !== null && root.image.refused === true
+        x: Theme.spacing.rowPaddingX + Theme.markSize + Theme.spacing.gap
+        topPadding: Theme.spacing.rowPaddingY
+        bottomPadding: Theme.spacing.rowPaddingY
+        width: root.width - x - Theme.spacing.rowPaddingX
+        wrapMode: Text.Wrap
+        text: "This file is not a disk image."
+        color: Theme.color.muted
+        font { family: Theme.font.family; pixelSize: Theme.font.caption }
+        textFormat: Text.PlainText
+    }
+}

package/ui/FlashRunner.qml

@@ -0,0 +1,119 @@
+import QtQuick
+import "js/FlashCard.js" as FlashCard
+import "js/FlashEndings.js" as FlashEndings
+import "js/FlashPane.js" as FlashPane
+import "js/Ops.js" as Ops
+
+// The flash run: owns what the backend answers, so a Back mid-flash keeps answering into the pane's transfer.
+Item {
+    id: root
+    required property var pane
+    // The running flash in Transfer.js's own shape, so the card after Back draws it unchanged.
+    property var transfer: Ops.emptyTransfer()
+    property var ending: null
+    // A Flash press already sent and not yet started, so a second Enter cannot double it; pendingId is its request.
+    property bool pressSent: false
+    property int pendingId: 0
+    property real rate: 0
+    property real rateAt: 0
+    property real rateBytes: 0
+    // The rate is the bytes since the last sample over at least this many seconds, so one burst never reads as the speed.
+    readonly property real rateWindowSeconds: 2
+    readonly property real msPerSecond: 1000
+    readonly property bool running: root.transfer.running === true
+
+    function reset() {
+        root.ending = null
+        root.pressSent = false
+        root.transfer = Ops.emptyTransfer()
+        root.rate = 0
+    }
+
+    // Every line the flash draws is rendered beside its fields, so Transfer.js never names the job.
+    function rendered(base) {
+        var drawn = FlashCard.render(base, root.rate)
+        return Object.assign({}, base, { headText: drawn.headText, fileText: drawn.fileText,
+            byteText: drawn.byteText, share: drawn.share, noCancel: drawn.noCancel })
+    }
+
+    function startTransfer(id, total, known, imageName, driveLabel, opened) {
+        root.pressSent = false
+        root.rate = 0
+        root.rateAt = Date.now()
+        root.rateBytes = 0
+        root.transfer = root.rendered(Object.assign(Ops.emptyTransfer(),
+            { id: id, flash: true, phase: "prepare", drive: driveLabel, name: imageName,
+              bytes: 0, total: total, known: known, permille: 0, running: true }))
+        root.ending = null
+        if (!opened) {
+            root.pane.transfer = root.transfer
+            root.pane.sticky(Ops.progressLine(root.transfer))
+        }
+    }
+
+    function noteRate(bytes) {
+        var now = Date.now()
+        var span = (now - root.rateAt) / root.msPerSecond
+        if (span >= root.rateWindowSeconds && bytes >= root.rateBytes) {
+            root.rate = (bytes - root.rateBytes) / span
+            root.rateAt = now
+            root.rateBytes = bytes
+        }
+    }
+
+    function progressTransfer(id, phase, bytes, total, permille, opened) {
+        if (!root.running || id !== root.transfer.id)
+            return
+        root.noteRate(bytes)
+        root.transfer = root.rendered(Object.assign({}, root.transfer,
+            { phase: phase, bytes: bytes, total: total, permille: permille }))
+        if (!opened) {
+            root.pane.transfer = root.transfer
+            root.pane.sticky(Ops.progressLine(root.transfer))
+        }
+    }
+
+    function finishTransfer(message, imageName, driveLabel, driveBytes, opened) {
+        var answer = FlashPane.doneFor({ running: root.running, transferId: root.transfer.id,
+            pressSent: root.pressSent, pendingId: root.pendingId }, message)
+        if (answer === "ignore")
+            return false
+        root.pressSent = false
+        // A probe refusal answers before any flashstarted, so the view asks the image row again.
+        if (answer === "refused" && String(message.phase || "") === "probe")
+            return "refused"
+        var ok = message.ok === true
+        var err = ok ? "" : String(message.err || "error")
+        var figures = FlashPane.endingContext(root.transfer, message)
+        var ctx = { image: imageName, drive: driveLabel, at: figures.at,
+            total: figures.total, blank: message.blank === true,
+            tool: message.tool || "", phase: String(message.phase || ""), driveBytes: driveBytes }
+        root.transfer = Ops.emptyTransfer()
+        root.rate = 0
+        if (opened) {
+            root.ending = FlashEndings.endingFor(err, ctx)
+            return true
+        }
+        FlashPane.reclaim(root.pane)
+        var line = FlashEndings.statusFor(err, ctx)
+        root.pane.message(line.text, line.isError)
+        return false
+    }
+
+    function finishEject(message, driveLabel) {
+        if (message.ok === true) {
+            root.pane.message(FlashEndings.ejectDoneLine(driveLabel), false)
+            return
+        }
+        if (String(message.err || "") === "busy")
+            root.pane.message(FlashEndings.ejectBusyLine(driveLabel), true)
+        else
+            root.pane.message(FlashEndings.ejectFailedLine(driveLabel), true)
+    }
+
+    Connections {
+        target: root.pane.backend
+        // A refused claim (another flash holds the slot) answers with an error and no flashdone, so the press ends here.
+        function onFailed(where) { if (where === "flash") root.pressSent = false }
+    }
+}