refactor(gui-v2): lock menu style

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components.d.ts

@@ -96,6 +96,8 @@ declare module '@vue/runtime-core' {
     MdiAccount: typeof import('~icons/mdi/account')['default']
     MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
+    MdiAccountGroupIcon: typeof import('~icons/mdi/account-group-icon')['default']
+    MdiAccountIcon: typeof import('~icons/mdi/account-icon')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
     MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
@@ -165,6 +167,7 @@ declare module '@vue/runtime-core' {
     MdiLinkVariant: typeof import('~icons/mdi/link-variant')['default']
     MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
     MdiLoading: typeof import('~icons/mdi/loading')['default']
+    MdiLockOutlineIcon: typeof import('~icons/mdi/lock-outline-icon')['default']
     MdiLogin: typeof import('~icons/mdi/login')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']

packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
+import MdiAccountIcon from '~icons/mdi/account'
+import MdiAccountGroupIcon from '~icons/mdi/account-group'
+
+import { LockType } from '~/lib'
+
+const { type, hideTick } = defineProps<{ hideTick?: boolean; type: LockType }>()
+
+const emit = defineEmits(['select'])
+
+const types = {
+  [LockType.Personal]: {
+    title: 'title.personalView',
+    icon: MdiAccountIcon,
+    subtitle: 'Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.',
+  },
+  [LockType.Collaborative]: {
+    title: 'title.collabView',
+    icon: MdiAccountGroupIcon,
+    subtitle: 'Collaborators with edit permissions or higher can change the view configuration.',
+  },
+  [LockType.Locked]: {
+    title: 'title.lockedView',
+    icon: MdiLockOutlineIcon,
+    subtitle: 'No one can edit the view configuration until it is unlocked.',
+  },
+}
+
+const selectedView = inject(ActiveViewInj)
+</script>
+
+<template>
+  <div class="nc-locked-menu-item"  @click="emit('select', type)">
+    <div :class="{ 'show-tick': !hideTick }">
+      <template v-if="!hideTick">
+        <MdiCheck v-if="selectedView?.lock_type === type" />
+        <span v-else />
+      </template>
+      <div>
+        <component :is="types[type].icon" />
+        {{ $t(types[type].title) }}
+        <div class="nc-subtitle">
+          {{ types[type].subtitle }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.nc-locked-menu-item > div {
+  @apply p-2 items-center min-w-[350px] max-w-[350px];
+
+  &.show-tick {
+    @apply grid gap-2  grid-cols-[30px,auto];
+  }
+
+  .nc-subtitle {
+    @apply text-xs text-gray-500 font-weight-light;
+  }
+}
+
+</style>

packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue

@@ -3,6 +3,7 @@ import * as XLSX from 'xlsx'
 import { ExportTypes } from 'nocodb-sdk'
 import FileSaver from 'file-saver'
 import { message } from 'ant-design-vue'
+import { LockType } from '~/lib'
 import { viewIcons } from '~/utils'
 import {
   ActiveViewInj,
@@ -21,12 +22,6 @@ import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
 import MdiAccountIcon from '~icons/mdi/account'
 import MdiAccountGroupIcon from '~icons/mdi/account-group'
 
-enum LockType {
-  Personal = 'personal',
-  Locked = 'locked',
-  Collaborative = 'collaborative',
-}
-
 const sharedViewListDlg = ref(false)
 
 const isPublicView = inject(IsPublicInj, ref(false))
@@ -35,7 +30,7 @@ const isView = false
 
 const { project } = useProject()
 
-const { $api } = useNuxtApp()
+const { $api, $e } = useNuxtApp()
 
 const meta = inject(MetaInj)
 
@@ -112,12 +107,14 @@ const Icon = computed(() => {
 async function changeLockType(type: LockType) {
   $e('a:grid:lockmenu', { lockType: type })
 
+  if (!selectedView?.value) return
+
   if (type === 'personal') {
     return message.info('Coming soon')
   }
   try {
-    ;(view.value as any).lock_type = type
+    ;(selectedView.value as any).lock_type = type
-    $api.dbView.update(view.value.id as string, {
+    $api.dbView.update(selectedView.value.id as string, {
       lock_type: type,
     })
 
@@ -130,7 +127,7 @@ async function changeLockType(type: LockType) {
 
 <template>
   <div>
-    <a-dropdown>
+    <a-dropdown :trigger="['click']">
       <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-2 items-center">
           <component
@@ -147,77 +144,43 @@ async function changeLockType(type: LockType) {
       <template #overlay>
         <a-menu class="ml-6 !text-sm !p-0 !rounded">
           <a-menu-item-group>
-            <a-sub-menu v-if="isUIAllowed('view-type')" key="lock-type">
+            <a-sub-menu
+              v-if="isUIAllowed('view-type')"
+              key="lock-type"
+              class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0"
+            >
               <template #title>
-                <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0">
-                  <MdiFileEyeOutline class="group-hover:text-pink-500" />
+
-                  Lock Type
+                  <SmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
-                  <div class="flex-1" />
 
                   <MaterialSymbolsChevronRightRounded
-                    class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
                   />
                 </div>
               </template>
 
               <template #expandIcon></template>
-              <a-menu-item>
+              <a-menu-item @click="changeLockType(LockType.Collaborative)">
-                <!--              <div class=" max-w-[500px] shadow bg-white"> -->
+                <SmartsheetToolbarLockType :type="LockType.Collaborative" />
-                <!--                <div> -->
-                <div class="nc-locked-menu-item" @click="changeLockType(LockType.Collaborative)">
-                  <div>
-                    <MdiCheck v-if="!view?.lock_type || view?.lock_type === LockType.Collaborative" />
-                    <span v-else />
-                    <div>
-                      <MdiAccountGroupIcon />
-                      {{ $t('title.collabView') }}
-                      <div class="nc-subtitle">
-                        Collaborators with edit permissions or higher can change the view configuration.
-                      </div>
-                    </div>
-                  </div>
-                </div>
               </a-menu-item>
-              <a-menu-item>
+              <a-menu-item @click="changeLockType(LockType.Locked)">
-                <div class="nc-locked-menu-item" @click="changeLockType(LockType.Locked)">
+                <SmartsheetToolbarLockType :type="LockType.Locked" />
-                  <div>
-                    <MdiCheck v-if="selectedView?.lock_type === LockType.Locked" />
-                    <span v-else />
-                    <div>
-                      <MdiLockOutlineIcon />
-                      {{ $t('title.lockedView') }}
-                      <div class="nc-subtitle">No one can edit the view configuration until it is unlocked.</div>
-                    </div>
-                  </div>
-                </div>
               </a-menu-item>
-              <a-menu-item>
+              <a-menu-item @click="changeLockType(LockType.Personal)">
-                <div class="nc-locked-menu-item" @click="changeLockType(LockType.Personal)">
+                <SmartsheetToolbarLockType :type="LockType.Personal" />
-                  <div>
-                    <MdiCheck v-if="selectedView?.lock_type === LockType.Personal" />
-                    <span v-else />
-                    <div>
-                      <MdiAccountIcon />
-                      {{ $t('title.personalView') }}
-                      <div class="nc-subtitle">
-                        Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <!--                </div> -->
-                <!--              </div> -->
               </a-menu-item>
             </a-sub-menu>
+            <a-menu-divider />
             <a-sub-menu key="download">
               <template #title>
                 <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
-                  <MdiDownload class="group-hover:text-pink-500" />
+                  <MdiDownload class="group-hover:text-accent" />
                   Download
                   <div class="flex-1" />
 
                   <MaterialSymbolsChevronRightRounded
-                    class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
                   />
                 </div>
               </template>
@@ -238,15 +201,16 @@ async function changeLockType(type: LockType) {
                 </div>
               </a-menu-item>
             </a-sub-menu>
+            <a-menu-divider />
             <a-sub-menu key="upload">
               <template #title>
                 <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
-                  <MdiUpload class="group-hover:text-pink-500" />
+                  <MdiUpload class="group-hover:text-accent" />
                   Upload
                   <div class="flex-1" />
 
                   <MaterialSymbolsChevronRightRounded
-                    class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
                   />
                 </div>
               </template>
@@ -267,6 +231,7 @@ async function changeLockType(type: LockType) {
               </a-menu-item>
             </a-sub-menu>
 
+            <a-menu-divider />
             <a-menu-item>
               <div
                 v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView"
@@ -306,7 +271,11 @@ async function changeLockType(type: LockType) {
 </template>
 
 <style scoped>
-.nc-locked-menu-item > div {
+:deep(.ant-dropdown-menu-submenu-title) {
-  @apply grid grid-cols-[30px, auto] gap-2  p-2 items-center min-w-[350px];
+  @apply py-0;
+}
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply hidden;
 }
 </style>

packages/nc-gui-v2/lib/enums.ts

@@ -54,3 +54,9 @@ export enum NavigateDir {
   NEXT,
   PREV,
 }
+
+export enum LockType {
+  Personal = 'personal',
+  Locked = 'locked',
+  Collaborative = 'collaborative',
+}