Skip to content

Commit

Permalink
fix: update styles and move components
Browse files Browse the repository at this point in the history
  • Loading branch information
@DarkPhoenix2704
DarkPhoenix2704 committed May 4, 2024
1 parent 2ea04f1 commit 2a93562
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 82 deletions.
53 changes: 28 additions & 25 deletions packages/nc-gui/components/smartsheet/Toolbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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" />
Expand Down
34 changes: 14 additions & 20 deletions packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand Down Expand Up @@ -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"
Expand Down
27 changes: 10 additions & 17 deletions packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
11 changes: 1 addition & 10 deletions packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,6 @@ watch(
const open = ref(false)
const isCalendar = inject(IsCalendarInj, ref(false))
const allFilters = ref({})
provide(AllFiltersInj, allFilters)
Expand All @@ -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 -->
Expand Down
11 changes: 1 addition & 10 deletions packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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" />
Expand Down

1 comment on commit 2a93562

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The PR changes have been deployed. Please run the following command to verify:

docker run -d -p 8888:8080 nocodb/nocodb-timely:0.205.0-pr-8379-20240504-0713

Please sign in to comment.