fix: cmd f search shortcut

nocodb · May 4, 2024 · 2de3e3b · 2de3e3b · github-actions · May 4, 2024
1 parent f89b12d
commit 2de3e3b
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 31 deletions.
diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -35,7 +35,7 @@ const { allowCSVDownload } = useSharedView()
   <div
     v-if="!isMobileMode"
     ref="containerRef"
-    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"
+    class="nc-table-toolbar relative px-3 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" />

diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -2,7 +2,7 @@
 import type { VNodeRef } from '@vue/runtime-core'
 import { UITypes } from 'nocodb-sdk'
 import dayjs from 'dayjs'
-import { type Row, computed, iconMap, isRowEmpty, ref } from '#imports'
+import { type Row, computed, iconMap, isMac, isRowEmpty, ref } from '#imports'
 
 const props = defineProps<{
   visible: boolean
@@ -291,6 +291,38 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('resize', widthListener)
 })
+
+const showSearch = ref(false)
+const searchRef = ref()
+
+const clickSearch = () => {
+  showSearch.value = true
+  nextTick(() => {
+    searchRef.value?.focus()
+  })
+}
+
+const toggleSearch = () => {
+  if (!searchQuery.value.length) {
+    showSearch.value = false
+  } else {
+    searchRef.value?.blur()
+  }
+}
+
+useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
+  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+  if (cmdOrCtrl) {
+    switch (e.key.toLowerCase()) {
+      case 'f':
+        e.preventDefault()
+        clickSearch()
+        break
+    }
+  }
+})
+
+onClickOutside(searchRef, toggleSearch)
 </script>
 
 <template>
@@ -350,9 +382,10 @@ onUnmounted(() => {
 
     <div
       :class="{
-        '!border-t-0': width <= 1440,
+        '!border-t-0 ': width <= 1440,
+        '!pt-3': width > 1440,
       }"
-      class="border-t-1 border-gray-200 relative flex flex-col gap-y-4 pt-3"
+      class="border-t-1 border-gray-200 relative flex flex-col gap-y-4"
     >
       <div class="flex px-4 items-center gap-3">
         <span class="capitalize text-base font-bold">{{ $t('objects.records') }}</span>
@@ -375,7 +408,34 @@ onUnmounted(() => {
           </a-select-option>
         </NcSelect>
       </div>
-      <div class="px-4 flex items-cemter justify-between">
+      <div
+        :class="{
+          hidden: !showSearch,
+        }"
+        class="mx-4"
+      >
+        <a-input
+          ref="searchRef"
+          v-model:value="searchQuery.value"
+          :class="{
+            '!border-brand-500': searchQuery.value.length > 0,
+            '!hidden': !showSearch,
+          }"
+          class="!rounded-lg !h-8 !placeholder:text-gray-500 !border-gray-200 !px-4"
+          data-testid="nc-calendar-sidebar-search"
+          placeholder="Search records"
+          @keydown.esc="toggleSearch"
+        >
+          <template #prefix>
+            <component :is="iconMap.search" class="h-4 w-4 mr-1 text-gray-500" />
+          </template>
+        </a-input>
+      </div>
+      <div class="mx-4 gap-2 flex items-center">
+        <NcButton v-if="!showSearch" size="small" type="secondary" @click="clickSearch">
+          <component :is="iconMap.search" />
+        </NcButton>
+
         <LazySmartsheetToolbarSortListMenu />
 
         <NcButton
@@ -387,26 +447,12 @@ onUnmounted(() => {
           @click="newRecord"
         >
           <div class="flex items-center gap-2">
-            New Record
             <component :is="iconMap.plus" />
+
+            Record
           </div>
         </NcButton>
       </div>
-      <div class="flex px-4 items-center gap-2">
-        <a-input
-          v-model:value="searchQuery.value"
-          :class="{
-            '!border-brand-500': searchQuery.value.length > 0,
-          }"
-          class="!rounded-lg !h-8 !placeholder:text-gray-500 !border-gray-200 !px-4"
-          data-testid="nc-calendar-sidebar-search"
-          placeholder="Search records"
-        >
-          <template #prefix>
-            <component :is="iconMap.search" class="h-4 w-4 mr-1 text-gray-500" />
-          </template>
-        </a-input>
-      </div>
 
       <div
         v-if="calendarRange?.length && !isCalendarMetaLoading"

diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Header.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Header.vue
@@ -27,12 +27,22 @@ const headerText = computed(() => {
 </script>
 
 <template>
-  <span class="font-semibold text-xl whitespace-nowrap" data-testid="nc-calendar-active-date"
-    >{{ activeCalendarView === 'month' ? headerText.split(' ')[0] : headerText }}
+  <div
+    :class="{
+      'w-23': activeCalendarView === 'month',
+      'min-w-42': activeCalendarView === 'week',
+      'w-28': activeCalendarView === 'day',
+    }"
+    class="font-bold text-xl whitespace-nowrap"
+    data-testid="nc-calendar-active-date"
+  >
+    {{ activeCalendarView === 'month' ? headerText.split(' ')[0] : headerText }}
     <template v-if="activeCalendarView === 'month'">
-      {{ ` ${headerText.split(' ')[1]}` }}
+      <span class="!font-semibold">
+        {{ ` ${headerText.split(' ')[1]}` }}
+      </span>
     </template>
-  </span>
+  </div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue
@@ -51,13 +51,18 @@ watch(activeCalendarView, () => {
 
   <div v-else>
     <NcDropdown :trigger="['click']">
-      <NcButton class="!h-7" data-testid="nc-calendar-view-mode" size="small" type="secondary">
+      <NcButton class="!h-7 !text-[13px]" data-testid="nc-calendar-view-mode" size="small" type="secondary">
         {{ $t(`objects.${activeCalendarView}`) }}
         <component :is="iconMap.arrowDown" />
       </NcButton>
       <template #overlay>
-        <NcMenu>
-          <NcMenuItem v-for="mode in ['day', 'week', 'month', 'year']" :key="mode" @click="changeCalendarView(mode)">
+        <NcMenu class="nc-calendar-mode-menu">
+          <NcMenuItem
+            v-for="mode in ['day', 'week', 'month', 'year']"
+            :key="mode"
+            class="!text-[13px]"
+            @click="changeCalendarView(mode)"
+          >
             {{ $t(`objects.${mode}`) }}
           </NcMenuItem>
         </NcMenu>
@@ -72,6 +77,12 @@ watch(activeCalendarView, () => {
   z-index: 0;
 }
 
+.nc-calendar-mode-menu {
+  :deep(.nc-menu-item-inner) {
+    @apply !text-[13px];
+  }
+}
+
 .tab {
   @apply flex items-center h-9 w-14 z-10 justify-center px-2 py-1 rounded-lg gap-x-1.5 text-gray-500 hover:text-black cursor-pointer transition-all duration-300 select-none;
 }

diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
@@ -131,7 +131,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
       </NcButton>
     </div>
     <template #overlay>
-      <div v-if="calendarRangeDropdown" class="w-full p-6" data-testid="nc-calendar-range-menu" @click.stop>
+      <div v-if="calendarRangeDropdown" class="w-full p-4" data-testid="nc-calendar-range-menu" @click.stop>
         <div
           v-for="(range, id) in _calendar_ranges"
           :key="id"
@@ -216,6 +216,9 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
           </NcButton>
             -->
         </div>
+
+        <div class="text-sm text-gray-600 py-2">Records in this view will be based on the specified date field.</div>
+
         <NcButton
           v-if="_calendar_ranges.length === 0"
           class="mt-2"

diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Today.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Today.vue
@@ -24,8 +24,8 @@ const goToToday = () => {
 
 <template>
   <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 class="text-gray-600 !text-[13px]">
+      {{ $t('labels.today') }}
     </span>
   </NcButton>
 </template>

diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
@@ -447,6 +447,7 @@
     "noResultsMatchedYourSearch": "Your search did not yield any matching results"
   },
   "labels": {
+    "today": "Today",
     "txt": "TXT Record value",
     "transferOwnership": "Transfer Ownership",
     "recentActivity": "Recent Activity",