fix: update toolbar styles

nocodb · May 4, 2024 · 59fd05b · 59fd05b
1 parent ec5e731
commit 59fd05b
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 59 deletions.
diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
@@ -515,7 +515,7 @@ a {
 }
 
 .nc-toolbar-btn {
-  @apply !shadow-none rounded hover:(ring-1 ring-gray-200 ring-opacity-100 bg-gray-100 !text-gray-800) focus:(ring-1 ring-gray-300 ring-opacity-100 !text-gray-800 bg-gray-100) text-gray-600 text-xs font-medium px-2 border-0;
+  @apply !shadow-none rounded hover:(bg-gray-50 !text-gray-800) focus:(!text-gray-800 bg-gray-50) text-gray-600 text-xs font-medium px-2 border-0;
 }
 .nc-toolbar-btn[disabled] {
   @apply !text-gray-400 !cursor-not-allowed !hover:ring-0;

diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -33,9 +33,9 @@ const { allowCSVDownload } = useSharedView()
 
 <template>
   <div
-    v-if="!isMobileMode || !isCalendar"
+    v-if="!isMobileMode"
     ref="containerRef"
-    class="nc-table-toolbar relative py-1 px-2.25 xs:(px-1) flex gap-2 items-center border-b border-gray-200 overflow-hidden xs:(min-h-14) max-h-[var(--topbar-height)] min-h-[var(--topbar-height)] z-7"
+    class="nc-table-toolbar relative px-2.25 xs:(px-1) flex gap-2 items-center border-b border-gray-200 overflow-hidden xs:(min-h-14) min-h-9 max-h-9 z-7"
   >
     <template v-if="isViewsLoading">
       <a-skeleton-input :active="true" class="!w-44 !h-4 ml-2 !rounded overflow-hidden" />
@@ -46,7 +46,7 @@ const { allowCSVDownload } = useSharedView()
           'min-w-34/100 max-w-34/100': !isMobileMode && isLeftSidebarOpen && isCalendar,
           'min-w-39/100 max-w-39/100': !isMobileMode && !isLeftSidebarOpen && isCalendar,
         }"
-        class="flex gap-2"
+        class="flex items-center gap-2"
       >
         <LazySmartsheetToolbarMappedBy v-if="isMap" />
         <LazySmartsheetToolbarCalendarHeader v-if="isCalendar" />

diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue
@@ -51,7 +51,7 @@ watch(activeCalendarView, () => {
 
   <div v-else>
     <NcDropdown :trigger="['click']">
-      <NcButton data-testid="nc-calendar-view-mode" size="small" type="secondary">
+      <NcButton class="!h-7" data-testid="nc-calendar-view-mode" size="small" type="secondary">
         {{ $t(`objects.${activeCalendarView}`) }}
         <component :is="iconMap.arrowDown" />
       </NcButton>

diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
@@ -114,19 +114,21 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
 <template>
   <NcDropdown v-if="!IsPublic" v-model:visible="calendarRangeDropdown" :trigger="['click']" class="!xs:hidden">
     <div class="nc-calendar-btn">
-      <a-button
+      <NcButton
         v-e="['c:calendar:change-calendar-range']"
         :disabled="isLocked"
-        class="nc-toolbar-btn"
+        class="nc-toolbar-btn !border-0 !h-7"
+        size="small"
+        type="secondary"
         data-testid="nc-calendar-range-btn"
       >
         <div class="flex items-center gap-2">
           <component :is="iconMap.calendar" class="h-4 w-4" />
-          <span class="text-capitalize !text-sm font-medium">
+          <span class="text-capitalize !text-[13px] font-medium">
             {{ $t('activity.settings') }}
           </span>
         </div>
-      </a-button>
+      </NcButton>
     </div>
     <template #overlay>
       <div v-if="calendarRangeDropdown" class="w-full p-6" data-testid="nc-calendar-range-menu" @click.stop>

diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Today.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Today.vue
@@ -23,7 +23,7 @@ const goToToday = () => {
 </script>
 
 <template>
-  <NcButton class="!border-0" data-testid="nc-calendar-today-btn" size="small" type="secondary" @click="goToToday">
+  <NcButton class="!border-0 !h-7" data-testid="nc-calendar-today-btn" size="small" type="secondary" @click="goToToday">
     <span class="text-gray-600 !text-sm">
       {{ $t('activity.goToToday') }}
     </span>

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -76,17 +76,16 @@ eventBus.on(async (event, column: ColumnType) => {
     overlay-class-name="nc-dropdown-filter-menu nc-toolbar-dropdown"
     class="!xs:hidden"
   >
-    <div :class="{ 'nc-active-btn': filtersLength }">
-      <a-button v-e="['c:filter']" :disabled="isLocked" class="nc-filter-menu-btn nc-toolbar-btn text-sm">
+    <NcButton v-e="['c:filter']" :disabled="isLocked" class="nc-filter-menu-btn nc-toolbar-btn !border-0 !h-7" size="small" type="secondary">
+      <div class="flex items-center gap-1">
         <div class="flex items-center gap-2">
           <component :is="iconMap.filter" class="h-4 w-4" />
           <!-- Filter -->
-          <span v-if="!isMobileMode" class="text-capitalize !text-sm font-medium">{{ $t('activity.filter') }}</span>
-
-          <span v-if="filtersLength" class="bg-brand-50 text-brand-500 py-1 px-2 text-md rounded-md">{{ filtersLength }}</span>
+          <span v-if="!isMobileMode" class="text-capitalize !text-[13px] font-medium">{{ $t('activity.filter') }}</span>
         </div>
-      </a-button>
-    </div>
+        <span v-if="filtersLength" class="bg-brand-50 text-brand-500 py-1 px-2 text-md rounded-md">{{ filtersLength }}</span>
+      </div>
+    </NcButton>
 
     <template #overlay>
       <SmartsheetToolbarColumnFilter

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -332,29 +332,31 @@ useMenuCloseOnEsc(open)
     overlay-class-name="nc-dropdown-fields-menu nc-toolbar-dropdown"
   >
     <div :class="{ 'nc-active-btn': numberOfHiddenFields }">
-      <a-button v-e="['c:fields']" :disabled="isLocked" class="nc-fields-menu-btn nc-toolbar-btn">
-        <div class="flex items-center gap-2">
-          <GeneralIcon
-            v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY"
-            class="h-4 w-4"
-            icon="creditCard"
-          />
-          <component :is="iconMap.fields" v-else class="h-4 w-4" />
-
-          <!-- Fields -->
-          <span v-if="!isMobileMode" class="text-capitalize text-sm font-medium">
-            <template v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY">
-              {{ $t('title.editCards') }}
-            </template>
-            <template v-else>
-              {{ $t('objects.fields') }}
-            </template>
-          </span>
+      <NcButton v-e="['c:fields']" :disabled="isLocked" class="nc-fields-menu-btn nc-toolbar-btn !h-7 !border-0" size="small" type="secondary">
+        <div class="flex items-center gap-1">
+          <div class="flex items-center gap-2">
+            <GeneralIcon
+              v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY"
+              class="h-4 w-4"
+              icon="creditCard"
+            />
+            <component :is="iconMap.fields" v-else class="h-4 w-4" />
+
+            <!-- Fields -->
+            <span v-if="!isMobileMode" class="text-capitalize !text-[13px] font-medium">
+              <template v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY">
+                {{ $t('title.editCards') }}
+              </template>
+              <template v-else>
+                {{ $t('objects.fields') }}
+              </template>
+            </span>
+          </div>
           <span v-if="numberOfHiddenFields" class="bg-brand-50 text-brand-500 py-1 px-2 text-md rounded-md">
             {{ numberOfHiddenFields }}
           </span>
         </div>
-      </a-button>
+      </NcButton>
     </div>
 
     <template #overlay>

diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -178,18 +178,25 @@ eventBus.on(async (event, column) => {
     overlay-class-name="nc-dropdown-group-by-menu nc-toolbar-dropdown overflow-hidden"
   >
     <div :class="{ 'nc-active-btn': groupedByColumnIds?.length }">
-      <a-button v-e="['c:group-by']" class="nc-group-by-menu-btn nc-toolbar-btn" :disabled="isLocked">
-        <div class="flex items-center gap-2">
-          <component :is="iconMap.group" class="h-4 w-4" />
-
-          <!-- Group By -->
-          <span v-if="!isMobileMode" class="text-capitalize !text-sm font-medium">{{ $t('activity.group') }}</span>
+      <NcButton
+        v-e="['c:group-by']"
+        :disabled="isLocked"
+        class="nc-group-by-menu-btn nc-toolbar-btn !border-0 !h-7"
+        size="small"
+        type="secondary"
+      >
+        <div class="flex items-center gap-1">
+          <div class="flex items-center gap-2">
+            <component :is="iconMap.group" class="h-4 w-4" />
 
+            <!-- Group By -->
+            <span v-if="!isMobileMode" class="text-capitalize !text-[13px] font-medium">{{ $t('activity.group') }}</span>
+          </div>
           <span v-if="groupedByColumnIds?.length" class="bg-brand-50 text-brand-500 py-1 px-2 text-md rounded-md">{{
             groupedByColumnIds.length
           }}</span>
         </div>
-      </a-button>
+      </NcButton>
     </div>
     <template #overlay>
       <SmartsheetToolbarCreateGroupBy

diff --git a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { OrgUserRoles, ProjectRoles, extractRolesObj } from 'nocodb-sdk'
 import type { GridType } from 'nocodb-sdk'
+import { OrgUserRoles, ProjectRoles, extractRolesObj } from 'nocodb-sdk'
 import { ActiveViewInj, IsLockedInj, iconMap, inject, ref, storeToRefs, useMenuCloseOnEsc, useUndoRedo } from '#imports'
 
 const rowHeightOptions: { icon: keyof typeof iconMap; heightClass: string }[] = [
@@ -85,12 +85,18 @@ useMenuCloseOnEsc(open)
 <template>
   <a-dropdown v-model:visible="open" offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-height-menu">
     <div>
-      <a-button v-e="['c:row-height']" class="nc-height-menu-btn nc-toolbar-btn" :disabled="isLocked">
+      <NcButton
+        v-e="['c:row-height']"
+        :disabled="isLocked"
+        class="nc-height-menu-btn nc-toolbar-btn !border-0 !h-7"
+        size="small"
+        type="secondary"
+      >
         <div class="flex items-center gap-0.5">
           <component :is="iconMap.rowHeight" class="!h-3.75 !w-3.75" />
           <!-- <span v-if="!isMobileMode" class="!text-sm !font-medium">{{ $t('objects.rowHeight') }}</span> -->
         </div>
-      </a-button>
+      </NcButton>
     </div>
     <template #overlay>
       <div

diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { UITypes, isSystemColumn } from 'nocodb-sdk'
 import type { ColumnType, TableType } from 'nocodb-sdk'
+import { UITypes, isSystemColumn } from 'nocodb-sdk'
 import {
   ActiveViewInj,
   ReloadViewDataHookInj,
@@ -72,7 +72,7 @@ const onSelectOption = (column: ColumnType) => {
 
 <template>
   <div
-    class="flex flex-row border-1 rounded-lg h-8 xs:(h-10 ml-0) ml-1 border-gray-200 overflow-hidden focus-within:border-primary"
+    class="flex flex-row border-1 rounded-lg h-7 xs:(h-10 ml-0) ml-1 border-gray-200 overflow-hidden focus-within:border-primary"
     :class="{ 'border-primary': search.query.length !== 0 }"
   >
     <NcDropdown

diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -128,23 +128,27 @@ onMounted(() => {
     overlay-class-name="nc-dropdown-sort-menu nc-toolbar-dropdown"
   >
     <div :class="{ 'nc-active-btn': sorts?.length }">
-      <a-button
+      <NcButton
         v-e="['c:sort']"
         :class="{
           '!border-1 !rounded-lg': isCalendar,
+          '!border-0 !h-7': !isCalendar,
         }"
         :disabled="isLocked"
         class="nc-sort-menu-btn nc-toolbar-btn"
+        size="small"
+        type="secondary"
       >
-        <div class="flex items-center gap-2">
-          <component :is="iconMap.sort" class="h-4 w-4 text-inherit" />
-
-          <!-- Sort -->
-          <span v-if="!isMobileMode" class="text-capitalize !text-sm font-medium">{{ $t('activity.sort') }}</span>
+        <div class="flex items-center gap-1">
+          <div class="flex items-center gap-2">
+            <component :is="iconMap.sort" class="h-4 w-4 text-inherit" />
 
+            <!-- Sort -->
+            <span v-if="!isMobileMode" class="text-capitalize !text-[13px] font-medium">{{ $t('activity.sort') }}</span>
+          </div>
           <span v-if="sorts?.length" class="bg-brand-50 text-brand-500 py-1 px-2 text-md rounded-md">{{ sorts.length }}</span>
         </div>
-      </a-button>
+      </NcButton>
     </div>
     <template #overlay>
       <SmartsheetToolbarCreateSort v-if="!sorts.length" :is-parent-open="open" @created="addSort" />

diff --git a/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue b/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { UITypes } from 'nocodb-sdk'
 import type { KanbanType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
 import type { SelectProps } from 'ant-design-vue'
 import {
   ActiveViewInj,
@@ -112,9 +112,11 @@ const handleChange = () => {
     class="!xs:hidden"
   >
     <div class="nc-kanban-btn">
-      <a-button
+      <NcButton
         v-e="['c:kanban:change-grouping-field']"
-        class="nc-kanban-stacked-by-menu-btn nc-toolbar-btn"
+        class="nc-kanban-stacked-by-menu-btn nc-toolbar-btn !border-0 !h-7"
+        size="small"
+        type="secondary"
         :disabled="isLocked"
       >
         <div class="flex items-center gap-1">
@@ -124,7 +126,7 @@ const handleChange = () => {
             <span class="font-bold ml-0.25">{{ groupingField }}</span>
           </span>
         </div>
-      </a-button>
+      </NcButton>
     </div>
     <template #overlay>
       <div v-if="open" class="p-6 w-90 bg-white shadow-lg nc-table-toolbar-menu !border-1 border-gray-50 rounded-2xl" @click.stop>