From a76d4c7ec576f3b721b6f0be2ce84d0f2a11c8af Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 14:33:40 +0530
Subject: [PATCH] refactor(gui-v2): ui updates

- highlight toolbar item
- filter menu items size
- sort menu items size

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/assets/style-v2.scss       |  8 ++
 .../smartsheet-toolbar/ColumnFilter.vue       | 79 ++++++++++---------
 .../smartsheet-toolbar/ColumnFilterMenu.vue   |  2 +-
 .../FieldListAutoCompleteDropdown.vue         |  1 +
 .../smartsheet-toolbar/FieldsMenu.vue         |  2 +-
 .../smartsheet-toolbar/SortListMenu.vue       |  5 +-
 6 files changed, 57 insertions(+), 40 deletions(-)

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 740ddc4aee..c94a2803ff 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -72,6 +72,8 @@ html {
   overflow-y: auto !important;
 }
 
+
+// menu item styling
 .nc-menu-item {
   @apply cursor-pointer text-xs flex align-center gap-2 px-4 py-3 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));
 }
@@ -93,6 +95,12 @@ html {
   }
 }
 
+// show  a dot badge if some change present
 .nc-badge {
   @apply relative after:(absolute top-[-2px] right-[-2px] w-[8px] h-[8px] rounded-full bg-primary content-[''] !z-20);
 }
+
+// for highlighting toolbar menu item
+.nc-active-btn > .ant-btn{
+  @apply bg-primary/20;
+}
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 87d9420912..54daed98d4 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -95,32 +95,27 @@ watch(
 </script>
 
 <template>
-  <div class="bg-white shadow pa-2 menu-filter-dropdown" :style="{ width: nested ? '100%' : '630px' }">
-    <div v-if="filters && filters.length" class="grid" @click.stop>
+  <div
+    class=" pa-2 menu-filter-dropdown bg-gray-50"
+    :class="{ 'shadow-xl min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
+  >
+    <div v-if="filters && filters.length" class="nc-filter-grid mb-2" @click.stop>
       <template v-for="(filter, i) in filters" :key="filter.id || i">
         <template v-if="filter.status !== 'delete'">
-          <div v-if="filter.is_group" :key="i" style="grid-column: span 5; padding: 6px" class="">
-            <div class="d-flex" style="gap: 6px; padding: 0 6px">
-              <!--              <v-icon
-                v-if="!filter.readOnly"
-                :key="`${i}_3`"
-                small
-                class="nc-filter-item-remove-btn"
-                @click.stop="deleteFilter(filter, i)"
-              >
-                mdi-close-box
-              </v-icon> -->
-              <MdiDeleteIcon
-                v-if="!filter.readOnly"
-                small
-                class="nc-filter-item-remove-btn"
-                @click.stop="deleteFilter(filter, i)"
-              />
-
-              <span v-else :key="`${i}_1`" />
+          <template v-if="filter.is_group" >
+            <MdiDeleteIcon
+              :key="i"
+              v-if="!filter.readOnly"
+              small
+              class="nc-filter-item-remove-btn text-grey"
+              @click.stop="deleteFilter(filter, i)"
+            />
+            <span v-else :key="i + 'dummy'"/>
 
+            <div class="d-flex" :key="i + 'nested'">
               <a-select
                 v-model:value="filter.logical_op"
+                size="small"
                 class="flex-shrink-1 flex-grow-0 elevation-0 caption"
                 :options="logicalOps"
                 placeholder="Group op"
@@ -129,14 +124,17 @@ watch(
               >
               </a-select>
             </div>
-            <SmartsheetToolbarColumnFilter
-              v-if="filter.id || shared"
-              ref="nestedFilter"
-              v-model="filter.children"
-              :parent-id="filter.id"
-              nested
-            />
-          </div>
+            <span class="col-span-3" />
+            <div class="col-span-5">
+              <SmartsheetToolbarColumnFilter
+                v-if="filter.id || shared"
+                ref="nestedFilter"
+                v-model="filter.children"
+                :parent-id="filter.id"
+                nested
+              />
+            </div>
+          </template>
           <template v-else>
             <!--                        <v-icon
                                       v-if="!filter.readOnly"
@@ -160,6 +158,7 @@ watch(
             <a-select
               v-else
               v-model:value="filter.logical_op"
+              size="small"
               class="h-full"
               :options="logicalOps"
               hide-details
@@ -171,7 +170,7 @@ watch(
             <FieldListAutoCompleteDropdown
               :key="`${i}_6`"
               v-model="filter.fk_column_id"
-              class="caption text-sm nc-filter-field-select"
+              class="caption nc-filter-field-select"
               :columns="columns"
               :disabled="filter.readOnly"
               @click.stop
@@ -180,7 +179,8 @@ watch(
 
             <a-select
               v-model:value="filter.comparison_op"
-              class="caption nc-filter-operation-select text-sm"
+              size="small"
+              class="caption nc-filter-operation-select"
               :options="comparisonOpList"
               :placeholder="$t('labels.operation')"
               density="compact"
@@ -203,6 +203,7 @@ watch(
             <a-checkbox
               v-else-if="types[filter.field] === 'boolean'"
               v-model:value="filter.value"
+              size="small"
               dense
               :disabled="filter.readOnly"
               @change="saveOrUpdate(filter, i)"
@@ -211,7 +212,8 @@ watch(
               v-else
               :key="`${i}_7`"
               v-model="filter.value"
-              class="caption text-sm nc-filter-value-select"
+              size="small"
+              class="caption nc-filter-value-select"
               :disabled="filter.readOnly"
               @click.stop
               @input="saveOrUpdate(filter, i)"
@@ -222,7 +224,7 @@ watch(
     </div>
 
     <div class="flex gap-2">
-      <a-button size="small" class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter">
+      <a-button  size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilter">
         <div class="flex align-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
           <MdiAddIcon />
@@ -230,7 +232,7 @@ watch(
           {{ $t('activity.addFilter') }}
         </div>
       </a-button>
-      <a-button size="small" class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilterGroup">
+      <a-button size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilterGroup">
         <div class="flex align-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
           <MdiAddIcon />
@@ -244,10 +246,15 @@ watch(
 </template>
 
 <style scoped>
-.grid {
+.nc-filter-grid {
   display: grid;
-  grid-template-columns: 30px 130px auto auto auto;
+  grid-template-columns: 18px 70px auto auto auto;
   column-gap: 6px;
   row-gap: 6px;
+  align-items: center;
+}
+
+:deep(.ant-btn, .ant-select, .ant-input) {
+  @apply "!text-xs";
 }
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 198ccbf7e8..fde821e2d3 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -17,7 +17,7 @@ const applyChanges = () => {}
 
 <template>
   <a-dropdown :trigger="['click']">
-    <div :class="{ 'nc-badge': filtersLength }">
+    <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
       <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
         <div class="flex align-center gap-1">
           <MdiFilterIcon class="text-grey" />
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index b008c84b6c..4c5577a83f 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -59,6 +59,7 @@ const filterOption = (input: string, option: any) => {
 <template>
   <a-select
     v-model:value="localValue"
+    size="small"
     show-search
     placeholder="Select a field"
     :options="options"
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index ded9abae04..d725674016 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -77,7 +77,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 
 <template>
   <a-dropdown :trigger="['click']">
-    <div :class="{ 'nc-badge': isAnyFieldHidden }">
+    <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
       <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn text-xs" :disabled="isLocked" size="small">
         <div class="flex align-center gap-1">
           <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index 1e7ac2e261..2b8ca7ad0e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -27,7 +27,7 @@ watch(
 
 <template>
   <a-dropdown offset-y class="" :trigger="['click']">
-    <div :class="{ 'nc-badge': sorts?.length }">
+    <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
       <a-button v-t="['c:sort']" size="small" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
         ><div class="flex align-center gap-1">
           <MdiSortIcon class="text-grey" />
@@ -38,7 +38,7 @@ watch(
       </a-button>
     </div>
     <template #overlay>
-      <div class="bg-white shadow p-2 menu-filter-dropdown min-w-[400px]">
+      <div class="bg-gray-50 shadow p-2 menu-filter-dropdown min-w-[400px]">
         <div class="sort-grid" @click.stop>
           <template v-for="(sort, i) in sorts || []" :key="i">
             <!--          <v-icon :key="`${i}icon`" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)"> mdi-close-box </v-icon> -->
@@ -55,6 +55,7 @@ watch(
               @update:model-value="saveOrUpdate(sort, i)"
             />
             <a-select
+              size="small"
               v-model:value="sort.direction"
               class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
               :items="[