Skip to content

Commit

Permalink
fix: update styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@DarkPhoenix2704
DarkPhoenix2704 committed May 3, 2024
1 parent 03453fd commit 5d4453d
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 36 deletions.
91 changes: 74 additions & 17 deletions packages/nc-gui/components/nc/DateWeekSelector.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ interface Props {
isWeekPicker?: boolean
disableHeader?: boolean
disablePagination?: boolean
hideCalendar?: boolean
selectedWeek?: {
start: dayjs.Dayjs
end: dayjs.Dayjs
Expand All @@ -28,6 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
disablePagination: false,
activeDates: [] as Array<dayjs.Dayjs>,
selectedWeek: null,
hideCalendar: false,
})
const emit = defineEmits(['change', 'update:selectedDate', 'update:pageDate', 'update:selectedWeek'])
// Page date is the date we use to manage which month/date that is currently being displayed
Expand All @@ -49,7 +51,17 @@ const days = computed(() => {
// Used to display the current month and year
const currentMonthYear = computed(() => {
return dayjs(pageDate.value).format('MMMM YYYY')
if (props.isWeekPicker) {
if (selectedWeek.value?.start.isSame(selectedWeek.value?.end, 'month')) {
return `${selectedWeek.value.start.format('D')} - ${selectedWeek.value.end.format('D MMM YY')}`
} else if (selectedWeek.value?.start.isSame(selectedWeek.value.end, 'year')) {
return `${selectedWeek.value?.start.format('D MMM')} - ${selectedWeek.value.end.format('D MMM YY')}`
} else {
return `${selectedWeek.value?.start.format('D MMM YY')} - ${selectedWeek.value?.end.format('D MMM YY')}`
}
} else {
return dayjs(selectedDate.value).format('D MMM YYYY')
}
})
const selectWeek = (date: dayjs.Dayjs) => {
Expand Down Expand Up @@ -136,6 +148,29 @@ const paginate = (action: 'next' | 'prev') => {
pageDate.value = newDate
emit('update:pageDate', newDate)
}
const changeDate = (action: 'prev' | 'next') => {
if (props.isWeekPicker) {
const temp = selectedWeek.value || { start: dayjs(), end: dayjs().add(7, 'day') }
if (action === 'next') {
temp.start = dayjs(temp?.start).add(1, 'week')
temp.end = dayjs(temp?.end).add(1, 'week')
} else {
temp.start = dayjs(temp?.start).subtract(1, 'week')
temp.end = dayjs(temp?.end).subtract(1, 'week')
}
emit('update:selectedWeek', temp)
} else {
let date = dayjs(selectedDate.value)
if (action === 'next') {
date = date.add(1, 'day')
} else {
date = date.subtract(1, 'day')
}
emit('update:selectedDate', date)
}
}
</script>

<template>
Expand All @@ -154,14 +189,24 @@ const paginate = (action: 'next' | 'prev') => {
}"
class="flex items-center"
>
<NcTooltip v-if="!disablePagination">
<NcButton size="small" type="secondary" @click="paginate('prev')">
<component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.previousMonth') }}</span>
</template>
</NcTooltip>
<div v-if="!disablePagination" class="flex">
<NcTooltip>
<NcButton class="!border-0" size="small" type="secondary" @click="paginate('prev')">
<component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.previousMonth') }}</span>
</template>
</NcTooltip>
<NcTooltip>
<NcButton class="!border-0" size="small" type="secondary" @click="changeDate('prev')">
<component :is="iconMap.arrowLeft" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.next') }}</span>
</template>
</NcTooltip>
</div>

<span
:class="{
Expand All @@ -171,16 +216,28 @@ const paginate = (action: 'next' | 'prev') => {
class="text-gray-700"
>{{ currentMonthYear }}</span
>
<NcTooltip v-if="!disablePagination">
<NcButton size="small" type="secondary" @click="paginate('next')">
<component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.nextMonth') }}</span>
</template>
</NcTooltip>

<div v-if="!disablePagination" class="flex">
<NcTooltip>
<NcButton class="!border-0" size="small" type="secondary" @click="changeDate('next')">
<component :is="iconMap.arrowRight" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.next') }}</span>
</template>
</NcTooltip>
<NcTooltip>
<NcButton class="!border-0" size="small" type="secondary" @click="paginate('next')">
<component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.previousMonth') }}</span>
</template>
</NcTooltip>
</div>
</div>
<div
v-if="!hideCalendar"
:class="{
'rounded-lg': size === 'small',
'rounded-y-xl': size !== 'small',
Expand Down
78 changes: 60 additions & 18 deletions packages/nc-gui/components/nc/MonthYearSelector.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ interface Props {
pageDate?: dayjs.Dayjs
isYearPicker?: boolean
hideHeader?: boolean
hideCalendar?: boolean
}
const props = withDefaults(defineProps<Props>(), {
Expand All @@ -15,6 +16,7 @@ const props = withDefaults(defineProps<Props>(), {
pageDate: dayjs(),
hideHeader: false,
isYearPicker: false,
hideCalendar: false,
})
const emit = defineEmits(['update:selectedDate', 'update:pageDate'])
Expand Down Expand Up @@ -72,6 +74,25 @@ const paginateYear = (action: 'next' | 'prev') => {
emit('update:pageDate', date)
}
const changeDate = (action: 'prev' | 'next') => {
let date = dayjs(selectedDate.value)
if (props.isYearPicker) {
if (action === 'next') {
date = date.add(1, 'year')
} else {
date = date.subtract(1, 'year')
}
} else {
if (action === 'next') {
date = date.add(1, 'month')
} else {
date = date.subtract(1, 'month')
}
}
emit('update:selectedDate', date)
}
const paginate = (action: 'next' | 'prev') => {
if (props.isYearPicker) {
paginateYear(action)
Expand All @@ -89,25 +110,46 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
<template>
<div class="px-3 pb-3 pt-2 flex flex-col">
<div v-if="!hideHeader" class="flex justify-between items-center">
<NcTooltip>
<NcButton size="small" type="secondary" @click="paginate('prev')">
<component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.previous') }}</span>
</template>
</NcTooltip>
<span class="text-gray-700">{{ isYearPicker ? $t('labels.selectYear') : pageDate.year() }}</span>
<NcTooltip>
<NcButton size="small" type="secondary" @click="paginate('next')">
<component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.next') }}</span>
</template>
</NcTooltip>
<div class="flex">
<NcTooltip>
<NcButton class="!border-0" size="small" type="secondary" @click="paginate('prev')">
<component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.previous') }}</span>
</template>
</NcTooltip>
<NcTooltip>
<NcButton class="!border-0" size="small" type="secondary" @click="changeDate('prev')">
<component :is="iconMap.arrowLeft" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.next') }}</span>
</template>
</NcTooltip>
</div>

<span class="text-gray-700">{{ isYearPicker ? dayjs(selectedDate).year() : dayjs(selectedDate).format('MMM YYYY') }}</span>
<div class="flex">
<NcTooltip>
<NcButton class="!border-0" size="small" type="secondary" @click="changeDate('next')">
<component :is="iconMap.arrowRight" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.next') }}</span>
</template>
</NcTooltip>
<NcTooltip>
<NcButton class="!border-0" size="small" type="secondary" @click="paginate('next')">
<component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.next') }}</span>
</template>
</NcTooltip>
</div>
</div>
<div class="rounded-y-xl max-w-[350px]">
<div v-if="!hideCalendar" class="rounded-y-xl max-w-[350px]">
<div class="grid grid-cols-4 gap-2 py-3">
<template v-if="!isYearPicker">
<span
Expand Down
5 changes: 4 additions & 1 deletion packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,6 @@ onUnmounted(() => {
>
<div
:class="{
'!hidden': width <= 1440,
'px-3 py-3 ': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const),
}"
class="flex flex-col"
Expand All @@ -308,24 +307,28 @@ onUnmounted(() => {
v-model:active-dates="activeDates"
v-model:page-date="pageDate"
v-model:selected-date="selectedDate"
:hide-calendar="width <= 1440"
/>
<NcDateWeekSelector
v-else-if="activeCalendarView === ('week' as const)"
v-model:active-dates="activeDates"
v-model:page-date="pageDate"
v-model:selected-week="selectedDateRange"
is-week-picker
:hide-calendar="width <= 1440"
/>
<NcMonthYearSelector
v-else-if="activeCalendarView === ('month' as const)"
v-model:page-date="pageDate"
v-model:selected-date="selectedMonth"
:hide-calendar="width <= 1440"
/>
<NcMonthYearSelector
v-else-if="activeCalendarView === ('year' as const)"
v-model:page-date="pageDate"
v-model:selected-date="selectedDate"
is-year-picker
:hide-calendar="width <= 1440"
/>
</div>
Expand Down

1 comment on commit 5d4453d

@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-20240503-0600

Please sign in to comment.