Add Hotkey type for defining and displaying shortcuts

Hotkey.qml

@@ -0,0 +1,30 @@
+// SPDX-License-Identifier: Unlicense
+
+import QtQuick 2.12
+import QtQuick.Controls 2.13
+
+// Define and display a shortcut to focus the given control.
+Label {
+    required property Item control
+    property alias sequence: shortcut.sequence
+
+    text: shortcut.nativeText
+    visible: !control.activeFocus
+
+    color: 'gray'
+    padding: 1
+    leftPadding: 2*padding
+    rightPadding: 2*padding
+
+    background: Rectangle {
+        color: palette.base
+        border { color: Qt.lighter(parent.color); width: 1 }
+        opacity: 0.9
+        radius: 2
+    }
+
+    Shortcut {
+        id: shortcut
+        onActivated: control.forceActiveFocus()
+    }
+}

Sidebar.qml

@@ -97,67 +97,63 @@ Page {
         anchors.fill: parent
 
         // Description box.
-        ScrollView {
+        Rectangle {
             Layout.fillWidth: true
             Layout.maximumHeight: 100
-            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+            Layout.preferredHeight: description.implicitHeight
 
-            padding: 0
+            border.color: description.activeFocus ? palette.highlight : palette.dark
+            color: palette.base
+            radius: 2
 
-            visible: description.enabled
+            ScrollView {
-            background: Rectangle {
+                anchors.fill: parent
-                color: palette.base
+                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-                border.color: description.activeFocus ? palette.highlight : palette.dark
+                padding: 0
-                radius: 2
+
+                TextArea {
+                    id: description
+
+                    placeholderText: qsTr('Description')
+                    padding: filter.padding
+                    leftPadding: filter.leftPadding
+                    selectByMouse: true
+                    wrapMode: Text.Wrap
+
+                    onTextChanged: modified = true
+                    KeyNavigation.priority: KeyNavigation.BeforeItem
+                    KeyNavigation.tab: nextItemInFocusChain()
+                }
             }
 
-            TextArea {
+            Hotkey {
-                id: description
+                control: description
-
+                sequence: 'Ctrl+D'
-                placeholderText: qsTr('Description')
+                anchors { right: parent.right; bottom: parent.bottom; margins: 4 }
-                padding: filter.padding
+                font.pixelSize: description.font.pixelSize * 0.75
-                leftPadding: filter.leftPadding
-                selectByMouse: true
-                wrapMode: Text.Wrap
-
-                onTextChanged: modified = true
-                KeyNavigation.priority: KeyNavigation.BeforeItem
-                KeyNavigation.tab: nextItemInFocusChain()
-
-                Shortcut {
-                    id: shortcutDescription
-                    sequence: 'Ctrl+D'
-                    onActivated: description.forceActiveFocus()
-                }
-                Label {
-                    anchors { right: parent.right; bottom: parent.bottom; margins: 4 }
-                    visible: !parent.activeFocus
-                    text: shortcutDescription.nativeText
-                    font.pixelSize: parent.font.pixelSize * 0.75
-                    color: 'gray'
-                }
             }
         }
 
         // Filter box.
         TextField {
             id: filter
+
             Layout.fillWidth: true
             placeholderText: qsTr('Filter')
+            background: Rectangle {
+                border.color: parent.activeFocus ? palette.highlight : palette.dark
+                color: palette.base
+                radius: 2
+            }
+
             onTextChanged: eventFilter.setFilter(text)
             Keys.onEscapePressed: text = ''
 
-            Shortcut {
+            Hotkey {
-                id: shortcutFilter
+                control: filter
-                sequence: 'Ctrl+F'
+                sequence: StandardKey.Find
-                onActivated: filter.forceActiveFocus()
-            }
-            Label {
                 anchors { right: parent.right; bottom: parent.bottom; margins: 4 }
-                visible: !parent.activeFocus
-                text: shortcutFilter.nativeText
                 font.pixelSize: filter.font.pixelSize * 0.75
-                color: 'gray'
             }
         }
 
@@ -165,15 +161,15 @@ Page {
         Frame {
             Layout.fillWidth: true
             Layout.fillHeight: true
-            Layout.rightMargin: -control.padding
+            Layout.rightMargin: -control.padding // fill to window edge for easier scrolling
 
             focusPolicy: Qt.StrongFocus
+
             padding: 1
             rightPadding: 0
-
             background: Rectangle {
+                border.color: parent.activeFocus ? palette.highlight : palette.dark
                 color: 'transparent'
-                border.color: events.activeFocus ? palette.highlight : palette.dark
                 radius: 2
             }
 
@@ -192,19 +188,18 @@ Page {
                     video.seek(event.time)
                 }
                 Keys.forwardTo: control
+            }
 
-                Shortcut {
+            Hotkey {
-                    id: shortcutEvents
+                control: events
-                    sequence: 'Ctrl+E'
+                sequence: 'Ctrl+E'
-                    onActivated: events.forceActiveFocus()
+                anchors {
-                }
+                    right: parent.right
-                Label {
+                    top: parent.top
-                    anchors { right: parent.right; bottom: parent.bottom; margins: 4 }
+                    margins: 4
-                    visible: !parent.activeFocus
+                    rightMargin: control.padding + anchors.margins
-                    text: shortcutEvents.nativeText
-                    font.pixelSize: filter.font.pixelSize * 0.75
-                    color: 'gray'
                 }
+                font.pixelSize: filter.font.pixelSize * 0.75
             }
         }
 
@@ -215,9 +210,9 @@ Page {
             Layout.fillWidth: true
             enabled: video.loaded && !events.editing
 
-            // Try passing key to each field input in order.
+            // Try passing key to each tag button in order.
-            Keys.enabled: enabled
             Keys.forwardTo: Array.from({ length: buttons.count }, (_, i) => buttons.itemAt(i))
+            Keys.enabled: enabled
 
             spacing: 5
 
@@ -237,6 +232,7 @@ Page {
                     implicitWidth: implicitContentWidth + 2*padding
 
                     onClicked: {
+                        // Create a new event with this tag and current 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

main.qrc

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