Merge pull request biigle#840 from biigle/patch-1

Favourite label key icon biigle#797 _ first attempt
MARE-Madeira · Jun 18, 2024 · 9d7d543 · 9d7d543
2 parents 1ed7ba2 + f1b65e5
commit 9d7d543
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/resources/assets/js/label-trees/components/labelTree.vue b/resources/assets/js/label-trees/components/labelTree.vue
@@ -8,7 +8,7 @@
             {{name}}
         </h4>
         <ul v-if="!collapsed" class="label-tree__list">
-            <label-tree-label :key="label.id" :label="label" :editable="editable" :show-favourites="showFavourites" :flat="flat" v-for="label in rootLabels" @select="emitSelect" @deselect="emitDeselect" @save="emitSave" @delete="emitDelete" @add-favourite="emitAddFavourite" @remove-favourite="emitRemoveFavourite"></label-tree-label>
+            <label-tree-label :key="label.id" :label="label" :editable="editable" :show-favourites="showFavourites" :flat="flat" :showFavouriteShortcuts="showFavouriteShortcuts" v-for="(label, index) in rootLabels" :position="index" @select="emitSelect" @deselect="emitDeselect" @save="emitSave" @delete="emitDelete" @add-favourite="emitAddFavourite" @remove-favourite="emitRemoveFavourite"></label-tree-label>
             <li v-if="hasNoLabels" class="text-muted">No labels</li>
         </ul>
     </div>
@@ -85,6 +85,11 @@ export default {
             type: Boolean,
             default: false,
         },
+        // Indicates whether shortcuts of favourites are shown.
+        showFavouriteShortcuts: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         labelMap() {

diff --git a/resources/assets/js/label-trees/components/labelTreeLabel.vue b/resources/assets/js/label-trees/components/labelTreeLabel.vue
@@ -12,8 +12,12 @@
                 <span v-text="label.name" @click.stop="toggleSelect" @mouseenter="dontHover"></span>
             </span>
             <span class="label-tree-label__buttons">
+                <span v-if="showFavouriteShortcuts" class="text-muted label-tree-label_position">
+                    <span class="fa fa-keyboard" aria-hidden="true"></span>
+                    <span v-text="actualPosition"></span>
+                </span>
                 <button v-if="showFavourites" type="button" class="label-tree-label__favourite" :class="favouriteClass" @click.stop="toggleFavourite" :title="favouriteTitle">
-                    <span class="fa fa-star" aria-hidden="true" title=""></span>
+                    <span class="fa fa-star" aria-hidden="true"></span>
                 </button>
                 <span if="editable">
                     <button v-show="showEditButton" :title="editTitle" @click.stop="editThis" class="btn btn-default btn-xs"><span aria-hidden="true" class="fa fa-pencil-alt"></span></button>
@@ -65,6 +69,14 @@ export default {
             type: Boolean,
             default: false,
         },
+        showFavouriteShortcuts: {
+            type: Boolean,
+            default: false,
+        },
+        position:{
+            type: Number,
+            default:-1,
+        },
     },
     computed: {
         showColor() {
@@ -113,6 +125,9 @@ export default {
         showEditButton() {
             return this.editable && this.hover && !this.editing;
         },
+        actualPosition(){
+            return this.position + 1
+        }
     },
     methods: {
         toggleSelect(e) {

diff --git a/resources/assets/js/label-trees/components/labelTrees.vue b/resources/assets/js/label-trees/components/labelTrees.vue
@@ -5,7 +5,7 @@
             <typeahead 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" :collapsible="collapsible" @select="handleSelect" @deselect="handleDeselect" @remove-favourite="handleRemoveFavourite"></label-tree>
+            <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>
             <label-tree v-for="tree in trees" :key="tree.id" :name="tree.versionedName" :labels="tree.labels" :multiselect="multiselect" :allow-select-siblings="allowSelectSiblings" :allow-select-children="allowSelectChildren" :show-favourites="showFavourites" :collapsible="collapsible" @select="handleSelect" @deselect="handleDeselect"  @add-favourite="handleAddFavourite" @remove-favourite="handleRemoveFavourite"></label-tree>
         </div>
     </div>

diff --git a/resources/assets/sass/label-trees/components/_labelTreeLabel.scss b/resources/assets/sass/label-trees/components/_labelTreeLabel.scss
@@ -100,4 +100,8 @@
         }
     }
 
+    .label-tree-label_position {
+        pointer-events: none;
+    }
+
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -100,4 +100,8 @@ @@
             }
         }
+        .label-tree-label_position {
+            pointer-events: none;
+        }
     }