Merge pull request #938 from biigle/findLabelShortcut

Shortcut to focus the "find label" input field
biigle · Dec 12, 2024 · a2b95ab · a2b95ab
2 parents 6f32bff + 97aea8b
commit a2b95ab
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 5 deletions.
diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue
@@ -596,7 +596,10 @@ export default {
         selectLastAnnotation() {
             let lastAnnotation = this.annotations.reduce((lastAnnotated, a) => a.id > lastAnnotated.id ? a : lastAnnotated, { id: 0 });
             this.handleSelectAnnotation(lastAnnotation);
-        }
+        },
+        openSidebarLabels() {
+            this.$refs.sidebar.$emit('open', 'labels');
+        },
     },
     watch: {
         async imageId(id) {

diff --git a/resources/assets/js/annotations/components/labelsTab.vue b/resources/assets/js/annotations/components/labelsTab.vue
@@ -1,5 +1,6 @@
 <script>
 import LabelTrees from '../../label-trees/components/labelTrees';
+import Keyboard from '../../core/keyboard';
 
 /**
  * Additional components that can be dynamically added by other Biigle modules via
@@ -23,8 +24,15 @@ export default {
         return {
             labelTrees: [],
             selectedLabel: null,
+            focusInputFindlabel: false,
         };
     },
+    props: {
+        focusInput:{
+            type: Boolean,
+            default: false,
+        }
+    },
     computed: {
         plugins() {
             return plugins;
@@ -39,9 +47,18 @@ export default {
             this.selectedLabel = null;
             this.$emit('select', null);
         },
+        setFocusInputFindLabel() {
+            this.$emit('open', 'labels');
+            this.focusInputFindlabel = false;
+            this.$nextTick(() => {
+                this.focusInputFindlabel = true;
+            });
+        },
     },
     created() {
         this.labelTrees = biigle.$require('annotations.labelTrees');
+
+        Keyboard.on('control+k', this.setFocusInputFindLabel, 0, this.listenerSet);
     },
 };
 </script>
diff --git a/resources/assets/js/label-trees/components/labelTrees.vue b/resources/assets/js/label-trees/components/labelTrees.vue
@@ -2,7 +2,7 @@
     <div class="label-trees">
         <div v-if="typeahead || clearable" class="label-trees__head">
             <button v-if="clearable" @click="clear" class="btn btn-default" title="Clear selected labels" type="button"><span class="fa fa-times fa-fw" aria-hidden="true"></span></button>
-            <typeahead v-if="typeahead" :items="labels" more-info="tree.versionedName" @select="handleSelect" placeholder="Find label"></typeahead>
+            <typeahead ref="typeaheadInput" v-if="typeahead" :items="labels" more-info="tree.versionedName" @select="handleSelect" placeholder="Find label"></typeahead>
         </div>
         <div class="label-trees__body">
             <label-tree v-if="hasFavourites" name="Favourites" :labels="favourites" :show-favourites="showFavourites" :flat="true" :showFavouriteShortcuts="true" :collapsible="collapsible" @select="handleSelect" @deselect="handleDeselect" @remove-favourite="handleRemoveFavourite"></label-tree>
@@ -74,6 +74,10 @@ export default {
             type: String,
             default: 'default',
         },
+        focusInput:{
+            type: Boolean,
+            default: false,
+        }
     },
     computed: {
         localeCompareSupportsLocales() {
@@ -193,7 +197,14 @@ export default {
                 });
             },
         },
+        focusInput() {
+            if (this.focusInput) {
+                this.$refs.typeaheadInput.$el.querySelector('input').focus();
+            }
+        }
+        
     },
+
     mounted() {
         if (this.showFavourites) {
             let favouriteIds = JSON.parse(localStorage.getItem(this.favouriteStorageKey));

diff --git a/resources/assets/js/videos/videoContainer.vue b/resources/assets/js/videos/videoContainer.vue
@@ -99,6 +99,7 @@ export default {
             swappingLabel: false,
             disableJobTracking: false,
             supportsJumpByFrame: false,
+            focusInputFindlabel: false,
         };
     },
     computed: {
@@ -677,6 +678,16 @@ export default {
         selectLastAnnotation() {
             let lastAnnotation = this.annotations.reduce((lastAnnotated, a) => a.id > lastAnnotated.id ? a : lastAnnotated, { id: 0 });
             this.selectAnnotations([lastAnnotation], this.selectedAnnotations, lastAnnotation.startFrame);
+        },
+        openSidebarLabels() {
+            this.$refs.sidebar.$emit('open', 'labels');
+            this.setFocusInputFindLabel()
+        },
+        setFocusInputFindLabel() {
+            this.focusInputFindlabel = false;
+            this.$nextTick(() => {
+                this.focusInputFindlabel = true;
+            });
         }
     },
     watch: {
@@ -742,6 +753,9 @@ export default {
         if ("requestVideoFrameCallback" in HTMLVideoElement.prototype) {
             this.supportsJumpByFrame = true;
         }
+
+        Keyboard.on('control+k', this.openSidebarLabels, 0, this.listenerSet);
+
     },
     mounted() {
         // Wait for the sub-components to register their event listeners before

diff --git a/resources/views/annotations/show/tabs/labels.blade.php b/resources/views/annotations/show/tabs/labels.blade.php
@@ -1,8 +1,8 @@
 <sidebar-tab name="labels" icon="tags" title="Label trees">
-    <labels-tab v-on:select="handleSelectedLabel" v-cloak inline-template>
+    <labels-tab v-on:select="handleSelectedLabel" v-on:open="openSidebarLabels" v-cloak inline-template>
         <div class="labels-tab">
             <div class="labels-tab__trees">
-                <label-trees :trees="labelTrees" :show-favourites="true" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
+                <label-trees :trees="labelTrees" :show-favourites="true" :focus-input="focusInputFindlabel" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
             </div>
             <div class="labels-tab__plugins">
                 @mixin('annotationsLabelsTab')

diff --git a/resources/views/manual/tutorials/annotations/shortcuts.blade.php b/resources/views/manual/tutorials/annotations/shortcuts.blade.php
@@ -127,6 +127,10 @@
                     <td><kbd>c</kbd></td>
                     <td>Select last created annotation</td>
                 </tr>
+                <tr>
+                    <td><kbd>Ctrl</kbd>+<kbd>k</kbd></td>
+                    <td>Open label trees sidebar and focus the find label input field</td>
+                </tr>
             </tbody>
         </table>
 

diff --git a/resources/views/manual/tutorials/videos/shortcuts.blade.php b/resources/views/manual/tutorials/videos/shortcuts.blade.php
@@ -119,6 +119,10 @@
                     <td><kbd>c</kbd></td>
                     <td>Select last created annotation</td>
                 </tr>
+                <tr>
+                    <td><kbd>Ctrl</kbd>+<kbd>k</kbd></td>
+                    <td>Open label trees sidebar and focus the find label input field</td>
+                </tr>
             </tbody>
         </table>
 

diff --git a/resources/views/videos/show/sidebar-labels.blade.php b/resources/views/videos/show/sidebar-labels.blade.php
@@ -1,7 +1,7 @@
 <sidebar-tab name="labels" icon="tags" title="Label trees">
     <div class="labels-tab">
         <div class="labels-tab__trees">
-            <label-trees :trees="labelTrees" :show-favourites="true" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
+            <label-trees :trees="labelTrees" :focus-input="focusInputFindlabel" :show-favourites="true" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
         </div>
     </div>
 </sidebar-tab>