Redecorate sidebar

Use a single dialog for loading event and tag files. Inline Tags.
Also do various other things.

Sidebar.qml

@@ -6,12 +6,13 @@ import QtQuick.Layouts 1.6
 import Qt.labs.platform 1.1
 
 import fuzbal 1
+import 'util.js' as Util
 
 Page {
     id: control
 
+    required property Video video
     property bool modified: false
-    property Video video
 
     EventList {
         id: eventList
@@ -26,45 +27,47 @@ Page {
     }
 
     FileDialog {
-        id: videoDialog
+        id: dialog
-        title: qsTr('Open video')
-        onAccepted: {
-            video.source = currentFile
-            const json = JSON.parse(io.read(currentFile+'.events') || '{}')
-            eventList.load(json)
-            description.text = json['description'] || ''
-            modified = false
-        }
-    }
 
-    FileDialog {
+        title: qsTr('Open video or tags')
-        id: tagsDialog
+        nameFilters: [qsTr('all files (*)'), qsTr('fuzbal files (*.events *.json)')]
-        title: qsTr('Load tags')
+
-        nameFilters: [qsTr('JSON files (*.json)'), qsTr('All files (*)')]
+        onAccepted: {
-        onAccepted: eventList.load({ 'tags': JSON.parse(io.read(currentFile)) })
+            const path = file.toString()
+            if (path.endsWith('.json')) {
+                eventList.load({ 'tags': JSON.parse(io.read(file)) })
+                modified = true
+            } else {
+                video.source = path.endsWith('.events') ? path.substr(0, path.length-7) : path
+                const json = JSON.parse(io.read(video.source+'.events') || '{}')
+                eventList.load(json)
+                description.text = json['description'] || ''
+                modified = false
+            }
+        }
     }
 
     Keys.forwardTo: [tags, video]
 
+    // Save / load buttons.
     header: ToolBar {
         horizontalPadding: 0
         RowLayout {
             anchors.fill: parent
-            ToolButton {
+            spacing: 0
-                action: Action {
+
-                    icon.name: 'document-open'
-                    shortcut: StandardKey.Open
-                    onTriggered: videoDialog.open()
-                }
-                focusPolicy: Qt.NoFocus
-            }
             Label {
-                text: video.loaded ? video.source : ''
+                text: video.loaded ? video.source : qsTr('(no video)')
                 elide: Text.ElideLeft
+                leftPadding: 5
                 Layout.fillWidth: true
             }
+
             ToolButton {
                 action: Action {
+                    icon.name: 'document-save'
+                    shortcut: StandardKey.Save
+                    enabled: video.loaded && control.modified
                     onTriggered: {
                         var json = eventList.save()
                         json['description'] = description.text
@@ -73,14 +76,20 @@ Page {
                         io.write(video.source+'.events', JSON.stringify(json))
                         modified = false
                     }
-                    shortcut: StandardKey.Save
-                    icon.name: 'document-save'
-                    enabled: video.loaded && control.modified
                 }
                 visible: video.loaded
                 opacity: enabled ? 1 : 0.25
                 focusPolicy: Qt.NoFocus
             }
+
+            ToolButton {
+                action: Action {
+                    icon.name: 'document-open'
+                    shortcut: StandardKey.Open
+                    onTriggered: dialog.open()
+                }
+                focusPolicy: Qt.NoFocus
+            }
         }
     }
 
@@ -88,22 +97,15 @@ Page {
         anchors.fill: parent
 
         // Description box.
-        ColumnLayout {
+        Frame {
-            spacing: 0
+            Layout.fillWidth: true
-            RowLayout {
+            Layout.maximumHeight: 100
-                Label {
+            padding: 1
-                    text: qsTr('Description')
-                    Layout.fillWidth: true
-                }
-                Label { text: description.enabled ? qsTr('−') : qsTr('+') }
-                TapHandler { onTapped: description.enabled = !description.enabled }
-            }
 
             ScrollView {
-                Layout.fillWidth: true
+                anchors.fill: parent
-                Layout.preferredHeight: 100
                 contentWidth: parent.availableWidth
-                padding: 1
+                padding: 0
 
                 visible: description.enabled
                 background: Frame { }
@@ -112,6 +114,7 @@ Page {
                 TextArea {
                     id: description
 
+                    placeholderText: qsTr('Description')
                     background: Rectangle { color: palette.base }
                     leftPadding: padding
                     selectByMouse: true
@@ -124,120 +127,114 @@ Page {
             }
         }
 
-        // Events list.
+        TextField {
-        ColumnLayout {
+            id: filter
-            spacing: 0
+            Layout.fillWidth: true
+            placeholderText: qsTr('Filter')
+            onTextChanged: eventFilter.setFilter(text)
+            Keys.onEscapePressed: text = ''
+        }
 
-            RowLayout {
+        Events {
-                Label {
+            id: events
-                    text: qsTr('Events')
+
-                    Layout.fillWidth: true
+            Layout.fillWidth: true
-                }
+            Layout.fillHeight: true
-                Label { text: qsTr('🔍') }
+            Layout.rightMargin: -control.padding
-                TapHandler { onTapped: filter.visible = !filter.visible }
+
+            focus: true
+            model: eventFilter
+            tags: eventList.tags
+
+            onEditingChanged: video.pause(editing)
+            onCurrentItemChanged: {
+                if (currentItem)
+                    video.seek(currentItem.time)
             }
 
-            TextField {
+            Rectangle {
-                id: filter
+                anchors { left: parent.left; right: parent.right; top: parent.top }
-                Layout.fillWidth: true
+                implicitHeight: 1
-                placeholderText: qsTr('Filter…')
+                color: palette.mid
-                visible: false
-                onTextChanged: eventFilter.setFilter(text)
             }
 
-            Frame {
+            Rectangle {
-                padding: 1
+                anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
-                Layout.fillWidth: true
+                implicitHeight: 1
-                Layout.fillHeight: true
+                color: palette.mid
+            }
 
-                Events {
+            Keys.onPressed: {
-                    id: events
+                switch (event.key) {
-
+                case Qt.Key_Home:
-                    anchors.fill: parent
+                    currentIndex = 0
-                    focus: true
+                    break
-                    model: eventFilter
+                case Qt.Key_End:
-                    tags: eventList.tags
+                    currentIndex = count-1
-
+                    break
-                    onEditingChanged: video.pause(editing)
+                case Qt.Key_Enter:
-                    onCurrentItemChanged: {
+                case Qt.Key_Return:
-                        if (currentItem)
+                    if (editing) {
-                            video.seek(currentItem.time)
+                        currentItem.store()
+                        editing = false
+                    } else {
+                        if (currentItem.fields.length > 0)
+                            editing = true
                     }
-
+                    break
-                    Keys.onPressed: {
+                case Qt.Key_Escape:
-                        switch (event.key) {
+                    if (editing) {
-                        case Qt.Key_Home:
+                        currentItem.reset()
-                            currentIndex = 0
+                        editing = false
-                            break
-                        case Qt.Key_End:
-                            currentIndex = count-1
-                            break
-                        case Qt.Key_Enter:
-                        case Qt.Key_Return:
-                            if (editing) {
-                                currentItem.store()
-                                editing = false
-                            } else {
-                                if (currentItem.fields.length > 0)
-                                    editing = true
-                            }
-                            break
-                        case Qt.Key_Escape:
-                            if (editing) {
-                                currentItem.reset()
-                                editing = false
-                            }
-                            break
-                        case Qt.Key_Delete:
-                            editing = false
-                            eventFilter.remove(currentIndex)
-                            break
-                        case Qt.Key_Tab:
-                        case Qt.Key_Backtab:
-                            // swallow tabs so we don’t lose focus when editing
-                            break
-                        default:
-                            return
-                        }
-                        event.accepted = true
                     }
+                    break
+                case Qt.Key_Delete:
+                    editing = false
+                    eventFilter.remove(currentIndex)
+                    break
+                case Qt.Key_Tab:
+                case Qt.Key_Backtab:
+                    // swallow tabs so we don’t lose focus when editing
+                    break
+                default:
+                    return
                 }
+                event.accepted = true
             }
         }
 
-        // Tag list.
+        Flow {
-        Frame {
+            id: tags
+
             Layout.fillWidth: true
-            Layout.fillHeight: false
+            enabled: video.loaded && !events.editing
-            padding: 5
 
-            ColumnLayout {
+            // Try passing key to each field input in order.
-                width: parent.width
+            Keys.enabled: enabled
-                spacing: 0
+            Keys.forwardTo: Array.from({ length: buttons.count }, (_, i) => buttons.itemAt(i))
 
-                RowLayout {
+            spacing: 5
-                    Label {
+
-                        text: qsTr('Tags')
+            Label {
-                        Layout.fillWidth: true
+                text: qsTr('(no tags)')
-                        Layout.alignment: Qt.AlignVCenter
+                visible: buttons.count === 0
-                    }
+            }
-                    ToolButton {
+
-                        icon.name: 'document-open'
+            Repeater {
-                        Layout.alignment: Qt.AlignVCenter
+                id: buttons
-                        onClicked: tagsDialog.open()
+                model: eventList.tagsOrder.map(name => eventList.tags[name])
-                        focusPolicy:Qt.NoFocus
+                delegate: Button {
-                    }
+                    readonly property string name: modelData.name || modelData.tag
-                }
+
+                    text: Util.addShortcut(name, modelData.key)
+                    focusPolicy: Qt.NoFocus
+                    implicitWidth: implicitContentWidth + 2*padding
 
-                Tags {
-                    id: tags
-                    model: eventList.tagsOrder.map(tag => eventList.tags[tag])
-                    enabled: video.loaded && !events.editing
                     onClicked: {
-                        const index = eventList.insert(tag, video.time)
+                        const index = eventList.insert(name, video.time)
                         // Reset filter if new event doesn’t match.
                         var row = eventFilter.mapFromSource(eventList.index(index, 0)).row
-                        if (eventFilter.mapFromSource(eventList.index(index, 0)).row === -1) {
+                        if (row === -1) {
                             filter.text = ''
                             row = index
                         }
@@ -246,7 +243,13 @@ Page {
                         if (event.fields.length > 0)
                             events.editing = true
                     }
-                    Layout.fillWidth: true
+
+                    Keys.onPressed: {
+                        if (event.text === modelData.key) {
+                            clicked()
+                            event.accepted = true
+                        }
+                    }
                 }
             }
         }

Tags.qml

@@ -1,37 +0,0 @@
-// SPDX-License-Identifier: Unlicense
-
-import QtQuick 2.12
-import QtQuick.Controls 2.13
-
-import 'util.js' as Util
-
-// Tag list.
-Flow {
-    id: control
-
-    property alias model: buttons.model
-
-    signal clicked(string tag)
-
-    // Try passing key to each field input in order.
-    Keys.enabled: enabled
-    Keys.forwardTo: Array.from({ length: buttons.count }, (_, i) => buttons.itemAt(i))
-
-    spacing: 5
-
-    Repeater {
-        id: buttons
-        delegate: Button {
-            text: Util.addShortcut(modelData.tag, modelData.key)
-            focusPolicy: Qt.NoFocus
-            implicitWidth: implicitContentWidth + 2*padding
-            onClicked: control.clicked(modelData.tag)
-            Keys.onPressed: {
-                if (event.text === modelData.key) {
-                    clicked()
-                    event.accepted = true
-                }
-            }
-        }
-    }
-}

main.qrc

@@ -11,7 +11,6 @@
         <file>Fields/Enum.qml</file>
         <file>Fields/Text.qml</file>
         <file>Fields/TextArea.qml</file>
-        <file>Tags.qml</file>
         <file>Sidebar.qml</file>
         <file>Video.qml</file>
         <file>Volume.qml</file>