From 9faaf849db46999be2a90a5794abc6d1a3790cd4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 27 Jul 2022 00:02:33 +0530
Subject: [PATCH] feat(gui-v2): add menu item styling

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/assets/style-v2.scss       |   5 +
 .../smartsheet-toolbar/LockMenu.vue           |  59 +--------
 .../smartsheet-toolbar/MoreActions.vue        | 120 +++++-------------
 .../smartsheet-toolbar/SearchData.vue         |   6 +-
 4 files changed, 42 insertions(+), 148 deletions(-)

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 21336be98a..410781cf29 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -64,3 +64,8 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
 html {
   overflow-y: auto !important;
 }
+
+
+.nc-menu-item {
+  @apply cursor-pointer text-xs flex align-center gap-2 p-4 relative after:(content-[''] absolute top-0 left-0  w-full h-full right 0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
+}
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
index 1a627b96e5..beca67d159 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
@@ -63,7 +63,7 @@ export default {
     <template #overlay>
       <div class="min-w-[350px] max-w-[500px] shadow bg-white">
         <div>
-          <div class="nc-menu-option">
+          <div class="nc-menu-item">
             <MdiCheckIcon v-if="!vModel || vModel === LockType.Collaborative" />
             <span v-else />
 
@@ -73,7 +73,7 @@ export default {
               <div class="nc-subtitle">Collaborators with edit permissions or higher can change the view configuration.</div>
             </div>
           </div>
-          <div class="nc-menu-option">
+          <div class="nc-menu-item">
             <MdiCheckIcon v-if="vModel === LockType.Locked" />
             <span v-else />
             <div>
@@ -82,7 +82,7 @@ export default {
               <div class="nc-subtitle">No one can edit the view configuration until it is unlocked.</div>
             </div>
           </div>
-          <div class="nc-menu-option">
+          <div class="nc-menu-item">
             <MdiCheckIcon v-if="vModel === LockType.Personal" />
             <span v-else />
             <div>
@@ -97,62 +97,11 @@ export default {
       </div>
     </template>
 
-    <!--    <v-list maxc-width="350">
-          <v-list-item two-line class="pb-4" @click="changeLockType(LockType.Collaborative)">
-            <v-list-item-icon class="mr-1 align-self-center">
-              <v-icon v-if="!vModel || vModel === LockType.Collaborative" small> mdi-check-bold </v-icon>
-            </v-list-item-icon>
-            <v-list-item-content class="pb-1">
-              <v-list-item-title>
-                <v-icon small class="mt-n1" color="primary"> mdi-account-group </v-icon>
-                Collaborative view
-              </v-list-item-title>
-
-              <v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
-                Collaborators with edit permissions or higher can change the view configuration.
-              </v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-          <v-list-item two-line class="pb-4" @click="changeLockType(LockType.Locked)">
-            <v-list-item-icon class="mr-1 align-self-center">
-              <v-icon v-if="vModel === LockType.Locked" small> mdi-check-bold </v-icon>
-            </v-list-item-icon>
-
-            <v-list-item-content class="pb-1">
-              <v-list-item-title>
-                <v-icon small class="mt-n1" color="primary"> mdi-lock </v-icon>
-                Locked View
-              </v-list-item-title>
-
-              <v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
-                No one can edit the view configuration until it is unlocked.
-              </v-list-item-subtitle>
-              <span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Locked view.</span>
-            </v-list-item-content>
-          </v-list-item>
-          <v-list-item three-line @click="changeLockType(LockType.Personal)">
-            <v-list-item-icon class="mr-1 align-self-center">
-              <v-icon v-if="vModel === LockType.Personal" small> mdi-check-bold </v-icon>
-            </v-list-item-icon>
-
-            <v-list-item-content>
-              <v-list-item-title>
-                <v-icon small class="mt-n1" color="primary"> mdi-account </v-icon>
-                Personal view
-              </v-list-item-title>
-
-              <v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
-                Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.
-              </v-list-item-subtitle>
-              <span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Coming soon.</span>
-            </v-list-item-content>
-          </v-list-item>
-        </v-list> -->
   </a-dropdown>
 </template>
 
 <style scoped>
-.nc-menu-option {
+.nc-menu-item {
   @apply grid grid-cols-[30px,auto] gap-2  p-4;
 }
 
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index e43d6e0e2f..32fe40bcea 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -1,7 +1,10 @@
 <script lang="ts" setup>
-import MdiFlashIcon from '~icons/mdi/flash-outline'
-import MdiMenuDownIcon from '~icons/mdi/menu-down'
-import MdiDownloadIcon from '~icons/mdi/download-outline'
+import MdiFlashIcon from "~icons/mdi/flash-outline";
+import MdiMenuDownIcon from "~icons/mdi/menu-down";
+import MdiDownloadIcon from "~icons/mdi/download-outline";
+import MdiUploadIcon from "~icons/mdi/upload-outline";
+import MdiHookIcon from "~icons/mdi/hook";
+import MdiViewListIcon from "~icons/mdi/view-list-outline";
 </script>
 
 <template>
@@ -10,98 +13,35 @@ import MdiDownloadIcon from '~icons/mdi/download-outline'
       <div class="flex gap-1 align-center">
         <MdiFlashIcon class="text-grey" />
         <!-- More -->
-        {{ $t('general.more') }}
+        {{ $t("general.more") }}
         <MdiMenuDownIcon class="text-grey" />
       </div>
     </a-button>
     <template #overlay>
-      <div class="p-2 bg-white">
-        <a-menu>
-          <a-menu-item>
-            <div class="text-xs flex align-center gap-2">
-              <MdiDownloadIcon />
-              <!-- Download as CSV -->
-              {{ $t('activity.downloadCSV') }}
-            </div>
-          </a-menu-item>
-        </a-menu>
+      <div class=" bg-white shadow">
+        <div>
+          <div class="nc-menu-item" @click.stop>
+            <MdiDownloadIcon />
+            <!-- Download as CSV -->
+            {{ $t("activity.downloadCSV") }}
+          </div>
+          <div class="nc-menu-item"  @click.stop>
+            <MdiUploadIcon />
+            <!-- Upload CSV -->
+            {{ $t("activity.uploadCSV") }}
+          </div>
+          <div class="nc-menu-item"  @click.stop>
+            <MdiViewListIcon />
+            <!-- Shared View List -->
+            {{ $t("activity.listSharedView") }}
+          </div>
+          <div class="nc-menu-item"  @click.stop>
+            <MdiHookIcon />
+            <!-- todo: i18n -->
+            Webhook
+          </div>
+        </div>
       </div>
     </template>
   </a-dropdown>
-  <!--  <div>
-    <v-menu open-on-hover bottom offset-y transition="slide-y-transition">
-      <template #activator="{ on }">
-        <v-btn
-          v-t="['c:actions']"
-          outlined
-          class="nc-actions-menu-btn caption px-2 nc-remove-border font-weight-medium"
-          small
-          text
-          v-on="on"
-        >
-          <v-icon small color="#777"> mdi-flash-outline </v-icon>
-          &lt;!&ndash; More &ndash;&gt;
-          {{ $t('general.more') }}
-
-          <v-icon small color="#777"> mdi-menu-down </v-icon>
-        </v-btn>
-      </template>
-
-      <v-list dense>
-        <v-list-item v-t="['a:actions:download-csv']" dense @click="exportCsv">
-          <v-list-item-title>
-            <v-icon small class="mr-1"> mdi-download-outline </v-icon>
-            <span class="caption">
-              &lt;!&ndash; Download as CSV &ndash;&gt;
-              {{ $t('activity.downloadCSV') }}
-            </span>
-          </v-list-item-title>
-        </v-list-item>
-        <v-list-item v-if="_isUIAllowed('csvImport') && !isView" v-t="['a:actions:upload-csv']" dense @click="importModal = true">
-          <v-list-item-title>
-            <v-icon small class="mr-1" color=""> mdi-upload-outline </v-icon>
-            <span class="caption">
-              &lt;!&ndash; Upload CSV &ndash;&gt;
-              {{ $t('activity.uploadCSV') }}
-            </span>
-
-            <span class="caption grey&#45;&#45;text">(<x-icon small color="grey lighten-2"> mdi-alpha </x-icon> version)</span>
-          </v-list-item-title>
-        </v-list-item>
-        <v-list-item
-          v-if="_isUIAllowed('SharedViewList') && !isView"
-          v-t="['a:actions:shared-view-list']"
-          dense
-          @click="$emit('showAdditionalFeatOverlay', 'shared-views')"
-        >
-          <v-list-item-title>
-            <v-icon small class="mr-1" color=""> mdi-view-list-outline </v-icon>
-            <span class="caption">
-              &lt;!&ndash; Shared View List &ndash;&gt;
-              {{ $t('activity.listSharedView') }}
-            </span>
-          </v-list-item-title>
-        </v-list-item>
-        <v-list-item v-if="_isUIAllowed('webhook') && !isView" v-t="['c:actions:webhook']" dense @click="webhookModal = true">
-          <v-list-item-title>
-            <v-icon small class="mr-1" color=""> mdi-hook </v-icon>
-            <span class="caption"> Webhooks </span>
-          </v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-menu>
-    <DropOrSelectFileModal v-model="importModal" accept=".csv" text="CSV" @file="onCsvFileSelection" />
-    <ColumnMappingModal
-      v-if="columnMappingModal && meta"
-      v-model="columnMappingModal"
-      :meta="meta"
-      :import-data-columns="parsedCsv.columns"
-      :parsed-csv="parsedCsv"
-      @import="importData"
-    />
-    &lt;!&ndash;    <webhook-modal v-if="webhookModal" v-model="webhookModal" :meta="meta" /> &ndash;&gt;
-    <WebhookSlider v-model="webhookModal" :meta="meta" />
-  </div> -->
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index 01986f736f..513c2d44ee 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -27,11 +27,11 @@ const columns = computed(() =>
 </script>
 
 <template>
-  <a-input-search v-model:value="localValue" size="small" class="max-w-[250px]">
+  <a-input v-model:value="localValue" size="small" class="max-w-[250px]" placeholder="Filter query">
     <template #addonBefore>
-      <a-select v-model:value="localField" :options="columns" style="width: 100px" class="!text-xs" size="small" />
+      <a-select v-model:value="localField" :options="columns" style="width: 80px" class="!text-xs" size="small" />
     </template>
-  </a-input-search>
+  </a-input>
 </template>
 
 <style scoped></style>