From 47b869a234647b28097c956e6e63a5d26943e376 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 27 Jul 2022 22:36:47 +0200
Subject: [PATCH] refactor(gui-v2): overflow view list items

---
 .../components/smartsheet/Sidebar.vue         | 285 +++++++++---------
 1 file changed, 149 insertions(+), 136 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
index 7f7442aac2..89d2d6b625 100644
--- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
@@ -23,6 +23,7 @@ import MdiContentCopy from '~icons/mdi/content-copy'
 import MdiXml from '~icons/mdi/xml'
 import MdiHook from '~icons/mdi/hook'
 import MdiHeartsCard from '~icons/mdi/cards-heart'
+import MdiShieldLockOutline from '~icons/mdi/shield-lock-outline'
 import type { TabItem } from '~/composables/useTabs'
 import { TabType } from '~/composables/useTabs'
 
@@ -296,167 +297,179 @@ function onApiSnippet() {
 
 <template>
   <a-layout-sider class="shadow" :width="toggleDrawer ? 0 : 250">
-    <a-menu class="flex flex-col h-full relative" :selected-keys="selected">
-      <h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3>
-
-      <a-menu-item
-        v-for="(view, i) of views"
-        :key="view.id"
-        class="group !flex !items-center"
-        @dblclick="onDblClick(i)"
-        @click="onClick(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}`" />
-
-          <a-input
-            v-if="isEditing === i"
-            :ref="setInputRef"
-            v-model:value="view.title"
-            @blur="onCancel(i)"
-            @keydown="onKeyDown($event, i)"
-          />
-          <div v-else>{{ view.alias || view.title }}</div>
-
-          <div class="flex-1" />
-
-          <template v-if="isEditing !== i && !view.is_default">
-            <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" @click.stop="onDuplicate(i)" />
-              </a-tooltip>
-
-              <a-popconfirm
-                placement="left"
-                :title="$t('msg.info.deleteProject')"
-                :ok-text="$t('general.yes')"
-                :cancel-text="$t('general.no')"
-                @confirm="onDelete(i)"
-              >
+    <div class="flex flex-col h-full">
+      <a-menu class="min-h-[250px] overflow-y-scroll scrollbar-thin-primary" :selected-keys="selected">
+        <h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3>
+
+        <a-menu-item
+          v-for="(view, i) of views"
+          :key="view.id"
+          class="group !flex !items-center"
+          @dblclick="onDblClick(i)"
+          @click="onClick(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}`" />
+
+            <a-input
+              v-if="isEditing === i"
+              :ref="setInputRef"
+              v-model:value="view.title"
+              @blur="onCancel(i)"
+              @keydown="onKeyDown($event, i)"
+            />
+            <div v-else>{{ view.alias || view.title }}</div>
+
+            <div class="flex-1" />
+
+            <template v-if="isEditing !== i && !view.is_default">
+              <div class="flex items-center gap-1">
                 <a-tooltip placement="left">
                   <template #title>
-                    {{ $t('activity.deleteView') }}
+                    {{ $t('activity.copyView') }}
                   </template>
 
-                  <MdiTrashCan class="hidden group-hover:block text-red-500" @click.stop />
+                  <MdiContentCopy class="hidden group-hover:block text-gray-500" @click.stop="onDuplicate(i)" />
                 </a-tooltip>
-              </a-popconfirm>
-            </div>
-          </template>
-        </div>
-      </a-menu-item>
-
-      <a-divider class="my-2" />
 
-      <h3 class="px-3 text-xs font-semibold">{{ $t('activity.createView') }}</h3>
+                <a-popconfirm
+                  placement="left"
+                  :title="$t('msg.info.deleteProject')"
+                  :ok-text="$t('general.yes')"
+                  :cancel-text="$t('general.no')"
+                  @confirm="onDelete(i)"
+                >
+                  <a-tooltip placement="left">
+                    <template #title>
+                      {{ $t('activity.deleteView') }}
+                    </template>
+
+                    <MdiTrashCan class="hidden group-hover:block text-red-500" @click.stop />
+                  </a-tooltip>
+                </a-popconfirm>
+              </div>
+            </template>
+          </div>
+        </a-menu-item>
+      </a-menu>
 
-      <a-menu-item key="grid" class="group !flex !items-center !h-[30px]" @click="openModal(ViewTypes.GRID)">
-        <a-tooltip placement="left">
-          <template #title>
-            {{ $t('msg.info.addView.grid') }}
-          </template>
+      <a-menu class="flex-1 flex flex-col">
+        <a-divider class="my-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}`" />
+        <h3 class="px-3 text-xs font-semibold flex items-center gap-4">
+          {{ $t('activity.createView') }}
+          <a-tooltip>
+            <template #title>
+              {{ $t('msg.info.onlyCreator') }}
+            </template>
+            <MdiShieldLockOutline class="text-pink-500" />
+          </a-tooltip>
+        </h3>
 
-            <div>{{ $t('objects.viewType.grid') }}</div>
+        <a-menu-item key="grid" class="group !flex !items-center !h-[30px]" @click="openModal(ViewTypes.GRID)">
+          <a-tooltip placement="left">
+            <template #title>
+              {{ $t('msg.info.addView.grid') }}
+            </template>
 
-            <div class="flex-1" />
+            <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}`" />
 
-            <MdiPlusIcon class="group-hover:text-primary" />
-          </div>
-        </a-tooltip>
-      </a-menu-item>
+              <div>{{ $t('objects.viewType.grid') }}</div>
 
-      <a-menu-item key="gallery" class="group !flex !items-center !h-[30px]" @click="openModal(ViewTypes.GALLERY)">
-        <a-tooltip placement="left">
-          <template #title>
-            {{ $t('msg.info.addView.gallery') }}
-          </template>
+              <div class="flex-1" />
 
-          <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}`" />
+              <MdiPlusIcon class="group-hover:text-primary" />
+            </div>
+          </a-tooltip>
+        </a-menu-item>
 
-            <div>{{ $t('objects.viewType.gallery') }}</div>
+        <a-menu-item key="gallery" class="group !flex !items-center !h-[30px]" @click="openModal(ViewTypes.GALLERY)">
+          <a-tooltip placement="left">
+            <template #title>
+              {{ $t('msg.info.addView.gallery') }}
+            </template>
 
-            <div class="flex-1" />
+            <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}`" />
 
-            <MdiPlusIcon class="group-hover:text-primary" />
-          </div>
-        </a-tooltip>
-      </a-menu-item>
+              <div>{{ $t('objects.viewType.gallery') }}</div>
 
-      <a-menu-item v-if="!isView" key="form" class="group !flex !items-center !h-[30px]" @click="openModal(ViewTypes.FORM)">
-        <a-tooltip placement="left">
-          <template #title>
-            {{ $t('msg.info.addView.form') }}
-          </template>
+              <div class="flex-1" />
 
-          <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}`" />
+              <MdiPlusIcon class="group-hover:text-primary" />
+            </div>
+          </a-tooltip>
+        </a-menu-item>
 
-            <div>{{ $t('objects.viewType.form') }}</div>
+        <a-menu-item v-if="!isView" key="form" class="group !flex !items-center !h-[30px]" @click="openModal(ViewTypes.FORM)">
+          <a-tooltip placement="left">
+            <template #title>
+              {{ $t('msg.info.addView.form') }}
+            </template>
 
-            <div class="flex-1" />
+            <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}`" />
 
-            <MdiPlusIcon class="group-hover:text-primary" />
-          </div>
-        </a-tooltip>
-      </a-menu-item>
+              <div>{{ $t('objects.viewType.form') }}</div>
 
-      <div class="flex-auto justify-end flex flex-col gap-4 mt-8">
-        <button
-          class="flex items-center gap-2 w-full mx-3 p-4 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
-          @click="onApiSnippet"
-        >
-          <MdiXml />Get API Snippet
-        </button>
+              <div class="flex-1" />
 
-        <button
-          class="flex items-center gap-2 w-full mx-3 p-4 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
-          @click="onApiSnippet"
-        >
-          <MdiHook />{{ $t('objects.webhooks') }}
-        </button>
-      </div>
-
-      <general-flipping-card class="my-4 h-[150px] w-[250px]" :triggers="['click', { duration: 15000 }]">
-        <template #front>
-          <div class="flex h-full w-full gap-6 flex-col">
-            <general-social />
-
-            <div>
-              <a
-                v-t="['e:hiring']"
-                class="p-4 bg-primary/75 rounded accent-pink-500 shadow border border-primary text-white"
-                href="https://angel.co/company/nocodb"
-                target="_blank"
-                @click.stop
-              >
-                🚀 We are Hiring! 🚀
-              </a>
+              <MdiPlusIcon class="group-hover:text-primary" />
             </div>
-          </div>
-        </template>
-
-        <template #back>
-          <!-- todo: add project cost -->
-          <a
-            href="https://github.com/sponsors/nocodb"
-            target="_blank"
-            class="group flex items-center gap-2 w-full mx-3 p-3 rounded-l !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg !opacity-100) transition duration-150 ease"
-            @click.stop
+          </a-tooltip>
+        </a-menu-item>
+
+        <div class="justify-end flex flex-col gap-4">
+          <button
+            class="flex items-center gap-2 w-full mx-3 p-4 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
+            @click="onApiSnippet"
           >
-            <MdiHeartsCard class="text-red-500" />
-            {{ $t('activity.sponsorUs') }}
-          </a>
-        </template>
-      </general-flipping-card>
-    </a-menu>
+            <MdiXml />Get API Snippet
+          </button>
+
+          <button
+            class="flex items-center gap-2 w-full mx-3 p-4 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
+            @click="onApiSnippet"
+          >
+            <MdiHook />{{ $t('objects.webhooks') }}
+          </button>
+        </div>
+
+        <general-flipping-card class="my-4 h-[150px] w-[250px]" :triggers="['click', { duration: 15000 }]">
+          <template #front>
+            <div class="flex h-full w-full gap-6 flex-col">
+              <general-social />
+
+              <div>
+                <a
+                  v-t="['e:hiring']"
+                  class="p-4 bg-primary/75 rounded accent-pink-500 shadow border border-primary text-white"
+                  href="https://angel.co/company/nocodb"
+                  target="_blank"
+                  @click.stop
+                >
+                  🚀 We are Hiring! 🚀
+                </a>
+              </div>
+            </div>
+          </template>
+
+          <template #back>
+            <!-- todo: add project cost -->
+            <a
+              href="https://github.com/sponsors/nocodb"
+              target="_blank"
+              class="group flex items-center gap-2 w-full mx-3 p-3 rounded-l !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg !opacity-100) transition duration-150 ease"
+              @click.stop
+            >
+              <MdiHeartsCard class="text-red-500" />
+              {{ $t('activity.sponsorUs') }}
+            </a>
+          </template>
+        </general-flipping-card>
+      </a-menu>
+    </div>
 
     <dlg-view-create v-if="views" v-model="modalOpen" :title="viewCreateTitle" :type="viewCreateType" @created="onCreate" />
   </a-layout-sider>