fix: update styles and move components

Author: DarkPhoenix2704

packages/nc-gui/components/smartsheet/Toolbar.vue

@@ -14,24 +14,18 @@ const { isGrid, isGallery, isKanban, isMap, isCalendar } = useSmartsheetStoreOrT
 
 const isPublic = inject(IsPublicInj, ref(false))
 
-const { isViewsLoading } = storeToRefs(useViewsStore())
-
 const { isMobileMode } = useGlobal()
+const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
 
-const containerRef = ref<HTMLElement>()
-
-const isTab = ref(true)
+const { isViewsLoading } = storeToRefs(useViewsStore())
 
-const handleResize = () => {
-  isTab.value = !!containerRef.value && containerRef.value.offsetWidth > 970
-}
+const containerRef = ref<HTMLElement>()
 
-onMounted(() => {
-  window.addEventListener('resize', handleResize)
-})
+const { width } = useElementSize(containerRef)
 
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
+const isTab = computed(() => {
+  if (!isCalendar.value) return false
+  return width.value > 1200
 })
 
 const { allowCSVDownload } = useSharedView()
@@ -47,24 +41,33 @@ const { allowCSVDownload } = useSharedView()
       <a-skeleton-input :active="true" class="!w-44 !h-4 ml-2 !rounded overflow-hidden" />
     </template>
     <template v-else>
-      <LazySmartsheetToolbarMappedBy v-if="isMap" />
-      <LazySmartsheetToolbarCalendarHeader v-if="isCalendar" />
-      <LazySmartsheetToolbarCalendarRange v-if="isCalendar" />
+      <div
+        :class="{
+          '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"
+      >
+        <LazySmartsheetToolbarMappedBy v-if="isMap" />
+        <LazySmartsheetToolbarCalendarHeader v-if="isCalendar" />
+        <LazySmartsheetToolbarCalendarRange v-if="isCalendar" />
 
-      <LazySmartsheetToolbarFieldsMenu
-        v-if="isGrid || isGallery || isKanban || isMap || isCalendar"
-        :show-system-fields="false"
-      />
+        <LazySmartsheetToolbarFieldsMenu
+          v-if="isGrid || isGallery || isKanban || isMap || isCalendar"
+          :show-system-fields="false"
+        />
 
-      <LazySmartsheetToolbarStackedBy v-if="isKanban" />
+        <LazySmartsheetToolbarStackedBy v-if="isKanban" />
 
-      <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap" />
+        <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap || isCalendar" />
 
-      <LazySmartsheetToolbarGroupByMenu v-if="isGrid" />
+        <LazySmartsheetToolbarGroupByMenu v-if="isGrid" />
 
-      <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
+        <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban || isCalendar" />
+        <LazySmartsheetToolbarCalendarMode v-if="isCalendar && !isTab" :tab="isTab" />
+      </div>
 
-      <LazySmartsheetToolbarCalendarMode v-if="isCalendar" v-model:tab="isTab" />
+      <LazySmartsheetToolbarCalendarMode v-if="isCalendar && isTab" :tab="isTab" />
 
       <template v-if="!isMobileMode">
         <LazySmartsheetToolbarRowHeight v-if="isGrid" />

packages/nc-gui/components/smartsheet/calendar/SideMenu.vue

@@ -314,9 +314,22 @@ onUnmounted(() => {
       'min-w-[288px]': width <= 1440 && props.visible,
       'nc-calendar-side-menu-open': props.visible,
     }"
-    class="h-full border-l-1 border-gray-200 transition-all"
+    class="h-full relative border-l-1 border-gray-200 transition-all"
     data-testid="nc-calendar-side-menu"
   >
+    <NcButton
+      v-if="isUIAllowed('dataEdit') && props.visible"
+      v-e="['c:calendar:calendar-sidemenu-new-record-btn']"
+      class="!absolute right-5 !border-brand-500 bottom-5 !h-12 !w-12"
+      data-testid="nc-calendar-side-menu-new-btn"
+      type="secondary"
+      @click="newRecord"
+    >
+      <div class="px-4 flex items-center gap-2 justify-center">
+        <component :is="iconMap.plus" class="h-6 w-6 text-lg text-brand-500" />
+      </div>
+    </NcButton>
+
     <div class="flex flex-col">
       <NcDateWeekSelector
         v-if="activeCalendarView === ('day' as const)"
@@ -390,25 +403,6 @@ onUnmounted(() => {
           </template>
         </a-input>
       </div>
-      <div class="flex px-4 justify-between items-center">
-        <div class="flex">
-          <LazySmartsheetToolbarColumnFilterMenu />
-
-          <LazySmartsheetToolbarSortListMenu />
-        </div>
-
-        <NcButton
-          v-if="isUIAllowed('dataEdit') && props.visible"
-          v-e="['c:calendar:calendar-sidemenu-new-record-btn']"
-          data-testid="nc-calendar-side-menu-new-btn"
-          size="small"
-          type="secondary"
-          @click="newRecord"
-        >
-          New
-          <component :is="iconMap.plus" class="flex mx-auto" />
-        </NcButton>
-      </div>
 
       <div
         v-if="calendarRange?.length && !isCalendarMetaLoading"

packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue

@@ -33,26 +33,19 @@ watch(activeCalendarView, () => {
 <template>
   <div
     v-if="props.tab"
-    :class="{
-      'absolute mx-auto pointer-events-none inset-x-0': props.tab,
-    }"
-    class="flex items-center justify-center"
+    class="flex flex-row px-1 pointer-events-auto mx-3 mt-3 rounded-lg gap-x-0.5 nc-calendar-mode-tab"
+    data-testid="nc-calendar-view-mode"
   >
+    <div :style="highlightStyle" class="highlight"></div>
     <div
-      class="flex flex-row px-1 pointer-events-auto mx-3 mt-3 rounded-lg gap-x-0.5 nc-calendar-mode-tab"
-      data-testid="nc-calendar-view-mode"
+      v-for="mode in ['day', 'week', 'month', 'year']"
+      :key="mode"
+      :class="{ active: activeCalendarView === mode }"
+      :data-testid="`nc-calendar-view-mode-${mode}`"
+      class="tab"
+      @click="setActiveCalendarMode(mode, $event)"
     >
-      <div :style="highlightStyle" class="highlight"></div>
-      <div
-        v-for="mode in ['day', 'week', 'month', 'year']"
-        :key="mode"
-        :class="{ active: activeCalendarView === mode }"
-        :data-testid="`nc-calendar-view-mode-${mode}`"
-        class="tab"
-        @click="setActiveCalendarMode(mode, $event)"
-      >
-        <div class="tab-title nc-tab">{{ $t(`objects.${mode}`) }}</div>
-      </div>
+      <div class="tab-title nc-tab">{{ $t(`objects.${mode}`) }}</div>
     </div>
   </div>
 

packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue

@@ -51,8 +51,6 @@ watch(
 
 const open = ref(false)
 
-const isCalendar = inject(IsCalendarInj, ref(false))
-
 const allFilters = ref({})
 
 provide(AllFiltersInj, allFilters)
@@ -79,14 +77,7 @@ eventBus.on(async (event, column: ColumnType) => {
     class="!xs:hidden"
   >
     <div :class="{ 'nc-active-btn': filtersLength }">
-      <a-button
-        v-e="['c:filter']"
-        :class="{
-          '!border-y-1 !border-x-1 !rounded-lg !rounded-r-none': isCalendar,
-        }"
-        :disabled="isLocked"
-        class="nc-filter-menu-btn nc-toolbar-btn text-sm"
-      >
+      <a-button v-e="['c:filter']" :disabled="isLocked" class="nc-filter-menu-btn nc-toolbar-btn text-sm">
         <div class="flex items-center gap-2">
           <component :is="iconMap.filter" class="h-4 w-4" />
           <!-- Filter -->

packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue

@@ -36,8 +36,6 @@ const { isMobileMode } = useGlobal()
 
 const { getPlanLimit } = useWorkspace()
 
-const isCalendar = inject(IsCalendarInj, ref(false))
-
 eventBus.on((event) => {
   if (event === SmartsheetStoreEvents.SORT_RELOAD) {
     loadSorts()
@@ -128,14 +126,7 @@ onMounted(() => {
     overlay-class-name="nc-dropdown-sort-menu nc-toolbar-dropdown"
   >
     <div :class="{ 'nc-active-btn': sorts?.length }">
-      <a-button
-        v-e="['c:sort']"
-        :class="{
-          '!border-y-1 !border-r-1 !rounded-lg !rounded-l-none': isCalendar,
-        }"
-        :disabled="isLocked"
-        class="nc-sort-menu-btn nc-toolbar-btn"
-      >
+      <a-button v-e="['c:sort']" :disabled="isLocked" class="nc-sort-menu-btn nc-toolbar-btn">
         <div class="flex items-center gap-2">
           <component :is="iconMap.sort" class="h-4 w-4 text-inherit" />