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,13 +27,14 @@ const load = () => {
   }
 }
 
-const selectIcon = (icon: string) => {
+const selectIcon = (icon?: string) => {
   search = ''
-  emit('selectIcon', `emojione:${icon}`)
+  emit('selectIcon', icon && `emojione:${icon}`)
 }
 </script>
 
 <template>
+  <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
@@ -49,6 +54,14 @@ const selectIcon = (icon: string) => {
         <InfiniteLoading @infinite="load"><span /></InfiniteLoading>
       </div>
     </div>
+    <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>
+    </div>
+  </div>
 </template>
 
 <style scoped>

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>