feat(gui-v2): add delete and copy icons

packages/nc-gui-v2/components/smartsheet/Sidebar.vue

@@ -5,6 +5,8 @@ import { inject, provide, ref, useTabs, useViews, watch } from '#imports'
 import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
 import { viewIcons } from '~/utils'
 import MdiPlusIcon from '~icons/mdi/plus'
+import MdiTrashCan from '~icons/mdi/trash-can'
+import MdiContentCopy from '~icons/mdi/content-copy'
 
 const meta = inject(MetaInj, ref())
 
@@ -16,7 +18,6 @@ const { views } = useViews(meta)
 
 provide(ViewListInj, views)
 
-// todo decide based on route param
 watch(
   views,
   (nextViews) => {
@@ -28,7 +29,7 @@ watch(
 )
 
 const toggleDrawer = ref(false)
-// todo: identify based on meta
+
 const isView = ref(false)
 
 const enableDummyFeat = ref(false)
@@ -77,28 +78,48 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi
     <div class="flex flex-col h-full">
       <div class="flex-1">
         <a-menu :selected-keys="selected">
-          <h3 class="pt-3 px-3 text-sm font-semibold">{{ $t('objects.views') }}</h3>
-          <a-menu-item v-for="view in views" :key="view.id" @click="changeView(view)">
-            <div v-t="['a:view:open', { view: view.type }]" class="flex items-center w-full gap-2">
+          <h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3>
+          <a-menu-item v-for="view in views" :key="view.id" class="group !flex !items-center !h-[30px]" @click="changeView(view)">
+            <div v-t="['a:view:open', { view: view.type }]" class="text-xs flex items-center w-full gap-2">
               <component :is="viewIcons[view.type].icon" :class="`text-${viewIcons[view.type].color}`" />
 
               <div>{{ view.alias || view.title }}</div>
+
+              <div class="flex-1" />
+
+              <div class="flex items-center gap-1">
+                <a-tooltip placement="left">
+                  <template #title>
+                    {{ $t('activity.copyView') }}
+                  </template>
+
+                  <MdiContentCopy class="hidden group-hover:block text-gray-500" />
+                </a-tooltip>
+
+                <a-tooltip placement="left">
+                  <template #title>
+                    {{ $t('activity.deleteView') }}
+                  </template>
+
+                  <MdiTrashCan class="hidden group-hover:block text-red-500" />
+                </a-tooltip>
+              </div>
             </div>
           </a-menu-item>
 
-          <a-divider class="my-4" />
+          <a-divider class="my-2" />
 
-          <h3 class="px-3 text-sm font-semibold" @dblclick="enableDummyFeat = true">
+          <h3 class="px-3 text-xs font-semibold" @dblclick="enableDummyFeat = true">
             {{ $t('activity.createView') }}
           </h3>
 
-          <a-menu-item key="grid" class="group" @click="openCreateViewDlg(ViewTypes.GRID)">
+          <a-menu-item key="grid" class="group !flex !items-center !h-[30px]" @click="openCreateViewDlg(ViewTypes.GRID)">
             <a-tooltip placement="left">
               <template #title>
                 {{ $t('msg.info.addView.grid') }}
               </template>
 
-              <div class="flex items-center w-full gap-2">
+              <div class="text-xs flex items-center h-full w-full gap-2">
                 <component :is="viewIcons[ViewTypes.GRID].icon" :class="`text-${viewIcons[ViewTypes.GRID].color}`" />
 
                 <div>{{ $t('objects.viewType.grid') }}</div>
@@ -110,13 +131,13 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi
             </a-tooltip>
           </a-menu-item>
 
-          <a-menu-item key="gallery" class="group" @click="openCreateViewDlg(ViewTypes.GALLERY)">
+          <a-menu-item key="gallery" class="group !flex !items-center !h-[30px]" @click="openCreateViewDlg(ViewTypes.GALLERY)">
             <a-tooltip placement="left">
               <template #title>
                 {{ $t('msg.info.addView.gallery') }}
               </template>
 
-              <div class="flex items-center w-full gap-2">
+              <div class="text-xs flex items-center h-full w-full gap-2">
                 <component :is="viewIcons[ViewTypes.GALLERY].icon" :class="`text-${viewIcons[ViewTypes.GALLERY].color}`" />
 
                 <div>{{ $t('objects.viewType.gallery') }}</div>
@@ -128,13 +149,18 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi
             </a-tooltip>
           </a-menu-item>
 
-          <a-menu-item v-if="!isView" key="form" class="group" @click="openCreateViewDlg(ViewTypes.FORM)">
+          <a-menu-item
+            v-if="!isView"
+            key="form"
+            class="group !flex !items-center !h-[30px]"
+            @click="openCreateViewDlg(ViewTypes.FORM)"
+          >
             <a-tooltip placement="left">
               <template #title>
                 {{ $t('msg.info.addView.form') }}
               </template>
 
-              <div class="flex items-center w-full gap-2">
+              <div class="text-xs flex items-center h-full w-full gap-2">
                 <component :is="viewIcons[ViewTypes.FORM].icon" :class="`text-${viewIcons[ViewTypes.FORM].color}`" />
 
                 <div>{{ $t('objects.viewType.form') }}</div>
@@ -152,3 +178,9 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi
     <DlgViewCreate v-if="views" v-model="viewCreateDlg" :type="viewCreateType" @created="onViewCreate" />
   </a-layout-sider>
 </template>
+
+<style scoped>
+:deep(.ant-menu-title-content) {
+  @apply w-full;
+}
+</style>