Merge pull request #5357 from nocodb/feat/5356-icon-reset-option

enhancement: add icon reset option

packages/nc-gui/components.d.ts

@@ -226,6 +226,7 @@ declare module '@vue/runtime-core' {
     MdiReddit: typeof import('~icons/mdi/reddit')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
+    MdiReset: typeof import('~icons/mdi/reset')['default']
     MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']
     MdiScriptTextKeyOutline: typeof import('~icons/mdi/script-text-key-outline')['default']
     MdiScriptTextOutline: typeof import('~icons/mdi/script-text-outline')['default']
@@ -287,6 +288,7 @@ declare module '@vue/runtime-core' {
     PhTranslateThin: typeof import('~icons/ph/translate-thin')['default']
     PhUserPlusThin: typeof import('~icons/ph/user-plus-thin')['default']
     PhUsersThreeThin: typeof import('~icons/ph/users-three-thin')['default']
+    PhXCircleLight: typeof import('~icons/ph/x-circle-light')['default']
     RiLineHeight: typeof import('~icons/ri/line-height')['default']
     RiTeamFill: typeof import('~icons/ri/team-fill')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

packages/nc-gui/components/dashboard/TreeView.vue

@@ -654,7 +654,11 @@ const setIcon = async (icon: string, table: TableType) => {
                               </component>
                             </div>
                             <template v-if="isUIAllowed('tableIconCustomisation')" #overlay>
-                              <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
+                              <GeneralEmojiIcons
+                                class="shadow bg-white p-2"
+                                :show-reset="!!table.meta?.icon"
+                                @select-icon="setIcon($event, table)"
+                              />
                             </template>
                           </component>
                         </div>
@@ -964,7 +968,11 @@ const setIcon = async (icon: string, table: TableType) => {
                                 </component>
                               </div>
                               <template v-if="isUIAllowed('tableIconCustomisation')" #overlay>
-                                <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
+                                <GeneralEmojiIcons
+                                  class="shadow bg-white p-2"
+                                  :show-reset="!!table.meta?.icon"
+                                  @select-icon="setIcon($event, table)"
+                                />
                               </template>
                             </component>
                           </div>

packages/nc-gui/components/general/EmojiIcons.vue

@@ -3,6 +3,10 @@ import { Icon } from '@iconify/vue'
 import InfiniteLoading from 'v3-infinite-loading'
 import { emojiIcons } from '#imports'
 
+const props = defineProps<{
+  showReset?: boolean
+}>()
+
 const emit = defineEmits(['selectIcon'])
 let search = $ref('')
 
@@ -23,30 +27,39 @@ const load = () => {
   }
 }
 
-const selectIcon = (icon: string) => {
+const selectIcon = (icon?: string) => {
   search = ''
-  emit('selectIcon', `emojione:${icon}`)
+  emit('selectIcon', icon && `emojione:${icon}`)
 }
 </script>
 
 <template>
-  <div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start nc-emoji" data-testid="nc-emoji-container">
-    <div @click.stop>
-      <input
-        v-model="search"
-        data-testid="nc-emoji-filter"
-        class="p-1 text-xs border-1 w-full overflow-y-auto"
-        placeholder="Search"
-        @input="toIndex = 60"
-      />
+  <div>
+    <div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start nc-emoji" data-testid="nc-emoji-container">
+      <div @click.stop>
+        <input
+          v-model="search"
+          data-testid="nc-emoji-filter"
+          class="p-1 text-xs border-1 w-full overflow-y-auto"
+          placeholder="Search"
+          @input="toIndex = 60"
+        />
+      </div>
+      <div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
+        <div v-for="icon of filteredIcons" :key="icon" @click="selectIcon(icon)">
+          <span class="cursor-pointer nc-emoji-item">
+            <Icon class="text-xl iconify" :icon="`emojione:${icon}`"></Icon>
+          </span>
+        </div>
+        <InfiniteLoading @infinite="load"><span /></InfiniteLoading>
+      </div>
     </div>
-    <div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
-      <div v-for="icon of filteredIcons" :key="icon" @click="selectIcon(icon)">
-        <span class="cursor-pointer nc-emoji-item">
-          <Icon class="text-xl iconify" :icon="`emojione:${icon}`"></Icon>
-        </span>
+    <div v-if="props.showReset" class="m-1">
+      <a-divider class="!my-2 w-full" />
+      <div class="p-1 mt-1 cursor-pointer text-xs inline-block border-gray-200 border-1 rounded" @click="selectIcon()">
+        <PhXCircleLight class="text-sm" />
+        Reset Icon
       </div>
-      <InfiniteLoading @infinite="load"><span /></InfiniteLoading>
     </div>
   </div>
 </template>

packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue

@@ -183,7 +183,11 @@ function onStopEdit() {
           </component>
 
           <template v-if="isUIAllowed('viewIconCustomisation')" #overlay>
-            <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="emits('selectIcon', $event)" />
+            <GeneralEmojiIcons
+              class="shadow bg-white p-2"
+              :show-reset="!!view.meta?.icon"
+              @select-icon="emits('selectIcon', $event)"
+            />
           </template>
         </a-dropdown>
       </div>