refactor(gui-v2): ui changes

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

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

@@ -39,7 +39,7 @@ const applyChanges = async () => await filterComp.value?.applyChanges()
         <div class="flex items-center gap-1">
           <MdiFilterOutline />
           <!-- Filter -->
-          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('activity.filter') }}</span>
+          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.filter') }}</span>
           <MdiMenuDown class="text-grey" />
         </div>
       </a-button>

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

@@ -86,7 +86,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
           <MdiEyeOffOutline />
 
           <!-- Fields -->
-          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('objects.fields') }}</span>
+          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('objects.fields') }}</span>
 
           <MdiMenuDown class="text-grey" />
         </div>

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

@@ -126,7 +126,7 @@ onMounted(() => {
       <div class="flex items-center gap-1" @click="genShareLink">
         <MdiOpenInNewIcon />
         <!-- Share View -->
-        <span class="!text-sm font-weight-medium"> {{ $t('activity.shareView') }}</span>
+        <span class="!text-sm font-weight-normal"> {{ $t('activity.shareView') }}</span>
       </div>
     </a-button>
 

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

@@ -40,7 +40,7 @@ watch(
         ><div class="flex items-center gap-1">
           <MdiSortIcon />
           <!-- Sort -->
-          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('activity.sort') }}</span>
+          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.sort') }}</span>
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>

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

@@ -136,10 +136,10 @@ async function changeLockType(type: LockType) {
           <component
             :is="viewIcons[selectedView?.type].icon"
             class="nc-view-icon group-hover:hidden"
-            :class="`text-${viewIcons[selectedView?.type].color}`"
+            :style="{ color: viewIcons[selectedView?.type].color }"
           />
-          <span class="!text-sm font-weight-medium">{{ selectedView?.title }}</span>
+          <span class="!text-sm font-weight-normal">{{ selectedView?.title }}</span>
-          <component :is="Icon" />
+          <component :is="Icon" class="text-gray-500" />
           <MdiMenuDown class="text-grey" />
         </div>
       </a-button>
@@ -162,7 +162,7 @@ async function changeLockType(type: LockType) {
 
               <template #expandIcon></template>
               <a-menu-item>
-                <!--              <div class="min-w-[350px] max-w-[500px] shadow bg-white"> -->
+                <!--              <div class=" max-w-[500px] shadow bg-white"> -->
                 <!--                <div> -->
                 <div class="nc-locked-menu-item" @click="changeLockType(LockType.Collaborative)">
                   <div>
@@ -307,6 +307,6 @@ async function changeLockType(type: LockType) {
 
 <style scoped>
 .nc-locked-menu-item > div {
-  @apply grid grid-cols-[30px,auto] gap-2  p-2 items-center;
+  @apply grid grid-cols-[30px, auto] gap-2  p-2 items-center min-w-[350px];
 }
 </style>

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

@@ -31,7 +31,7 @@ const { isOpen } = useSidebar()
 
     <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
 
-    <ToggleDrawer class="mr-2" />
+    <ToggleDrawer v-if="!isOpen" class="mr-2" />
   </div>
 </template>
 

packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue

@@ -36,6 +36,7 @@ function onOpenModal(type: ViewTypes, title = '') {
 
 <template>
   <a-menu :selected-keys="[]" class="flex-1 flex flex-col">
+    <div class="flex-1"></div>
     <div v-if="isUIAllowed('virtualViewsCreateOrEdit')">
       <h3 class="px-3 py-1 text-xs font-semibold flex items-center gap-4 text-gray-500">
         {{ $t('activity.createView') }}
@@ -52,7 +53,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           </template>
 
           <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}`" />
+            <component :is="viewIcons[ViewTypes.GRID].icon" :style="{ color: viewIcons[ViewTypes.GRID].color }" />
 
             <div>{{ $t('objects.viewType.grid') }}</div>
 
@@ -74,7 +75,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           </template>
 
           <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}`" />
+            <component :is="viewIcons[ViewTypes.GALLERY].icon" :style="{ color: viewIcons[ViewTypes.GALLERY].color }" />
 
             <div>{{ $t('objects.viewType.gallery') }}</div>
 
@@ -97,7 +98,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           </template>
 
           <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}`" />
+            <component :is="viewIcons[ViewTypes.FORM].icon" :style="{ color: viewIcons[ViewTypes.FORM].color }" />
 
             <div>{{ $t('objects.viewType.form') }}</div>
 
@@ -107,9 +108,10 @@ function onOpenModal(type: ViewTypes, title = '') {
           </div>
         </a-tooltip>
       </a-menu-item>
+
+      <div class="w-full h-4"></div>
     </div>
 
-    <div class="flex-1"></div>
     <!--    <SmartsheetSidebarMenuApiSnippet v-model="showApiSnippet" /> -->
 
     <!--    <div class="flex-auto justify-end flex flex-col gap-3 mt-3"> -->
@@ -129,7 +131,7 @@ function onOpenModal(type: ViewTypes, title = '') {
     <!--      </button> -->
     <!--    </div> -->
 
-    <general-flipping-card class="my-4 lg:my-6 min-h-[100px]" :triggers="['click', { duration: 15000 }]">
+    <!--    <general-flipping-card class="my-4 lg:my-6 min-h-[100px]" :triggers="['click', { duration: 15000 }]">
       <template #front>
         <div class="flex h-full w-full gap-6 flex-col">
           <general-social />
@@ -149,7 +151,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </template>
 
       <template #back>
-        <!-- todo: add project cost -->
+        &lt;!&ndash; todo: add project cost &ndash;&gt;
         <a
           href="https://github.com/sponsors/nocodb"
           target="_blank"
@@ -160,7 +162,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           {{ $t('activity.sponsorUs') }}
         </a>
       </template>
-    </general-flipping-card>
+    </general-flipping-card> -->
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
   </a-menu>

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

@@ -160,7 +160,7 @@ function onStopEdit() {
         <component
           :is="viewIcons[vModel.type].icon"
           class="nc-view-icon group-hover:hidden"
-          :class="`text-${viewIcons[vModel.type].color}`"
+          :style="{ color: viewIcons[vModel?.type]?.color }"
         />
       </div>
 

packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

@@ -99,13 +99,13 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     class="relative shadow-md h-full"
     theme="light"
   >
-    <!--
     <Toolbar
       v-if="isOpen"
       class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)]"
       :class="{ 'flex items-center py-3 px-3 justify-between border-b-1': !isForm }"
     />
 
+    <!--
     <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
       <template #start>
         <a-tooltip v-if="isUIAllowed('virtualViewsCreateOrEdit')" placement="left">

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue

@@ -15,8 +15,12 @@ const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
       />
     </div>
   </a-tooltip> -->
-
+  <div :class="{ 'nc-active-btn': isOpen }">
-  <a-button size="small" @click="toggle(!isOpen)">
+    <a-button size="small" @click="toggle(!isOpen)">
-    <div class="flex items-center gap-2"><MdiMenu /> Views</div>
+      <div class="flex items-center gap-1 text-xs" :class="{ 'text-gray-500': !isOpen }">
-  </a-button>
+        <MdiMenu class="!text-xs" />
+        Views
+      </div>
+    </a-button>
+  </div>
 </template>

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue

@@ -22,7 +22,7 @@ const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 <template>
   <div
     v-if="!isForm"
-    class="flex gap-2"
+    class="flex gap-2 justify-start"
     @click="
       () => {
         clickCount = clickCount + 1
@@ -45,7 +45,7 @@ const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 
       <div class="dot" />
     </template>
-    <h3 class="pt-3 px-3 text-xs text-gray-500 font-semibold">{{ $t('objects.views') }}</h3>
+    <!--    <h3 class="pt-3 px-3 text-xs text-gray-500 font-semibold">{{ $t('objects.views') }}</h3> -->
 
     <!--    <LockMenu v-if="isUIAllowed('view-type')" @click.stop /> -->
 
@@ -60,7 +60,7 @@ const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
     <!--    <div :class="{ 'w-[calc(100%_+_16px)] h-[1px] bg-gray-200 mt-1 -ml-1': !isOpen, 'dot': isOpen }" /> -->
 
     <ToggleDrawer />
-
+    <span></span>
     <slot name="end" />
   </div>
   <div v-else>

packages/nc-gui-v2/components/tabs/Smartsheet.vue

@@ -83,10 +83,10 @@ watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immedi
 
             <SmartsheetForm v-else-if="isForm" />
           </div>
-          <SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
         </div>
       </template>
     </div>
+    <SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
   </div>
 </template>
 

packages/nc-gui-v2/utils/viewUtils.ts

@@ -8,8 +8,8 @@ import MdiKanbanIcon from '~icons/mdi/tablet-dashboard'
 import MdiEyeIcon from '~icons/mdi/eye-circle-outline'
 
 export const viewIcons = {
-  [ViewTypes.GRID]: { icon: MdiGridIcon, color: 'blue' },
+  [ViewTypes.GRID]: { icon: MdiGridIcon, color: '#8f96f2' },
-  [ViewTypes.FORM]: { icon: MdiFormIcon, color: 'pink' },
+  [ViewTypes.FORM]: { icon: MdiFormIcon, color: '#ec4899' },
   calendar: { icon: MdiCalendarIcon, color: 'purple' },
   [ViewTypes.GALLERY]: { icon: MdiGalleryIcon, color: 'orange' },
   [ViewTypes.KANBAN]: { icon: MdiKanbanIcon, color: 'green' },