Allow searching for icon name in the GenericIndicator mini-widget

bluerobotics · Aug 9, 2023 · 784ddbb · 784ddbb
1 parent 6a71f67
commit 784ddbb
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/src/components/mini-widgets/GenericIndicator.vue b/src/components/mini-widgets/GenericIndicator.vue
@@ -30,7 +30,15 @@
           <span class="mr-1 text-slate-100">Icon</span>
           <input v-model="options.iconName" class="w-40 px-2 py-1 rounded-md bg-slate-200" />
         </div>
+        <div class="flex items-center justify-center w-full mt-2">
+          <input
+            v-model="iconSearchString"
+            class="w-40 px-2 py-1 rounded-md bg-slate-200"
+            placeholder="Search icons..."
+          />
+        </div>
         <RecycleScroller
+          v-if="iconSearchString === ''"
           v-slot="{ item }"
           class="w-full h-40 mt-3"
           :items="iconsNames.filter((name) => name.includes(iconSearchString))"
@@ -40,6 +48,15 @@
           <span class="m-1 text-white cursor-pointer mdi icon-symbol" :class="[item]" @click="options.iconName = item">
           </span>
         </RecycleScroller>
+        <div v-else class="grid w-full h-40 grid-cols-6 mt-3 overflow-x-hidden overflow-y-scroll">
+          <span
+            v-for="icon in iconsNames.filter((name) => name.includes(iconSearchString))"
+            :key="icon"
+            class="m-1 text-white cursor-pointer mdi icon-symbol"
+            :class="[icon]"
+            @click="options.iconName = icon"
+          />
+        </div>
       </div>
     </div>
   </Dialog>
@@ -94,6 +111,7 @@ watch(options, updateVariableState)
 let iconsNames: string[] = []
 
 const showConfigurationMenu = ref(false)
+const iconSearchString = ref('')
 </script>
 
 <style>