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 a47c949 commit 4c228fb
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 48 deletions.
24 changes: 13 additions & 11 deletions packages/nc-gui/components/nc/DateWeekSelector.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,11 @@ const days = computed(() => {
}
})
// Used to display the current month and year
const currentMonthYear = computed(() => {
if (props.disablePagination) {
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')}`
Expand Down Expand Up @@ -177,20 +180,19 @@ const changeDate = (action: 'prev' | 'next') => {
<div
:class="{
'gap-1': size === 'small',
'gap-4': size === 'medium' || size === 'large',
}"
class="flex flex-col"
>
<div
v-if="!disableHeader"
:class="{
' justify-between': !disablePagination,
' justify-between border-b-1 ': !disablePagination,
' justify-center': disablePagination,
}"
class="flex items-center"
class="flex px-2 py-2 items-center"
>
<div v-if="!disablePagination" class="flex">
<NcTooltip>
<NcTooltip v-if="!hideCalendar">
<NcButton class="!border-0" size="small" type="secondary" @click="paginate('prev')">
<component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
</NcButton>
Expand All @@ -213,7 +215,7 @@ const changeDate = (action: 'prev' | 'next') => {
'text-xs': size === 'small',
'text-sm': size === 'medium',
}"
class="text-gray-700"
class="text-gray-700 font-semibold"
>{{ currentMonthYear }}</span
>

Expand All @@ -226,7 +228,7 @@ const changeDate = (action: 'prev' | 'next') => {
<span>{{ $t('labels.next') }}</span>
</template>
</NcTooltip>
<NcTooltip>
<NcTooltip v-if="!hideCalendar">
<NcButton class="!border-0" size="small" type="secondary" @click="paginate('next')">
<component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
</NcButton>
Expand All @@ -242,7 +244,7 @@ const changeDate = (action: 'prev' | 'next') => {
'rounded-lg': size === 'small',
'rounded-y-xl': size !== 'small',
}"
class="max-w-[320px]"
class="px-3 max-w-[320px]"
>
<div
:class="{
Expand All @@ -251,7 +253,7 @@ const changeDate = (action: 'prev' | 'next') => {
'px-2 py-1 !rounded-t-lg': size === 'small',
'rounded-t-xl': size !== 'small',
}"
class="flex flex-row border-b-1 nc-date-week-header border-gray-200 justify-between"
class="flex py-1 flex-row border-b-1 nc-date-week-header border-gray-200 justify-between"
>
<span
v-for="(day, index) in days"
Expand All @@ -277,15 +279,15 @@ const changeDate = (action: 'prev' | 'next') => {
:key="index"
:class="{
'rounded-lg': !isWeekPicker,
'bg-gray-200 border-1 font-bold text-brand-500': isSelectedDate(date) && !isWeekPicker && isDayInPagedMonth(date),
'bg-gray-200 border-1 font-bold ': isSelectedDate(date) && !isWeekPicker && isDayInPagedMonth(date),
'hover:(border-1 border-gray-200 bg-gray-100)': !isSelectedDate(date) && !isWeekPicker,
'nc-selected-week z-1': isDateInSelectedWeek(date) && isWeekPicker,
'border-none': isWeekPicker,
'border-transparent': !isWeekPicker,
'text-gray-400': !isDateInCurrentMonth(date),
'nc-selected-week-start': isSameDate(date, selectedWeek?.start),
'nc-selected-week-end': isSameDate(date, selectedWeek?.end),
'rounded-md bg-brand-50 text-brand-500 nc-calendar-today ': isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
'rounded-md bg-brand-50 nc-calendar-today ': isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
'h-9 w-9': size === 'large',
'h-8 w-8': size === 'medium',
'h-6 w-6 text-[10px]': size === 'small',
Expand Down
18 changes: 10 additions & 8 deletions packages/nc-gui/components/nc/MonthYearSelector.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,10 +108,10 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
</script>

<template>
<div class="px-3 pb-3 pt-2 flex flex-col">
<div v-if="!hideHeader" class="flex justify-between items-center">
<div class="pb-3 flex flex-col">
<div v-if="!hideHeader" class="flex px-3 border-b-1 py-2 justify-between items-center">
<div class="flex">
<NcTooltip>
<NcTooltip v-if="!hideCalendar">
<NcButton class="!border-0" size="small" type="secondary" @click="paginate('prev')">
<component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
</NcButton>
Expand All @@ -129,7 +129,9 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
</NcTooltip>
</div>

<span class="text-gray-700">{{ isYearPicker ? dayjs(selectedDate).year() : dayjs(selectedDate).format('MMM YYYY') }}</span>
<span class="text-gray-700 font-semibold">{{
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')">
Expand All @@ -139,7 +141,7 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
<span>{{ $t('labels.next') }}</span>
</template>
</NcTooltip>
<NcTooltip>
<NcTooltip v-if="!hideCalendar">
<NcButton class="!border-0" size="small" type="secondary" @click="paginate('next')">
<component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
</NcButton>
Expand All @@ -149,14 +151,14 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
</NcTooltip>
</div>
</div>
<div v-if="!hideCalendar" class="rounded-y-xl max-w-[350px]">
<div v-if="!hideCalendar" class="rounded-y-xl px-3 max-w-[350px]">
<div class="grid grid-cols-4 gap-2 py-3">
<template v-if="!isYearPicker">
<span
v-for="(month, id) in months"
:key="id"
:class="{
'!bg-gray-200 !font-bold !text-brand-500': isMonthSelected(month),
'!bg-gray-200 !font-bold ': isMonthSelected(month),
}"
class="h-9 rounded-lg flex items-center font-medium justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-900 cursor-pointer"
@click="selectedDate = month"
Expand All @@ -169,7 +171,7 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
v-for="(year, id) in years"
:key="id"
:class="{
'!bg-gray-200 !font-bold !text-brand-500': compareYear(year, selectedDate),
'!bg-gray-200 !font-bold ': compareYear(year, selectedDate),
}"
class="h-9 rounded-lg flex items-center font-medium justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-900 cursor-pointer"
@click="selectedDate = year"
Expand Down
12 changes: 1 addition & 11 deletions packages/nc-gui/components/smartsheet/Toolbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,17 +64,7 @@ const { allowCSVDownload } = useSharedView()

<LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />

<!--
<div v-if="isCalendar && isTab" class="flex-1" />
-->
<div
:class="{
'absolute inset-x-0': isTab,
}"
class="flex items-center justify-center"
>
<LazySmartsheetToolbarCalendarMode v-if="isCalendar" v-model:tab="isTab" />
</div>
<LazySmartsheetToolbarCalendarMode v-if="isCalendar" v-model:tab="isTab" />

<template v-if="!isMobileMode">
<LazySmartsheetToolbarRowHeight v-if="isGrid" />
Expand Down
7 changes: 1 addition & 6 deletions packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,12 +296,7 @@ onUnmounted(() => {
class="h-full border-l-1 border-gray-200 transition-all"
data-testid="nc-calendar-side-menu"
>
<div
:class="{
'px-3 py-3 ': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const),
}"
class="flex flex-col"
>
<div class="flex flex-col">
<NcDateWeekSelector
v-if="activeCalendarView === ('day' as const)"
v-model:active-dates="activeDates"
Expand Down
32 changes: 20 additions & 12 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,22 +33,30 @@ watch(activeCalendarView, () => {
<template>
<div
v-if="props.tab"
class="flex flex-row relative px-1 mx-3 mt-3 rounded-lg gap-x-0.5 nc-calendar-mode-tab"
data-testid="nc-calendar-view-mode"
:class="{
'absolute mx-auto pointer-events-none inset-x-0': props.tab,
}"
class="flex items-center justify-center"
>
<div :style="highlightStyle" class="highlight"></div>
<div
v-for="mode in ['day', 'week', 'month', 'year']"
:key="mode"
v-e="`['c:calendar:change-calendar-view-${mode}']`"
:class="{ active: activeCalendarView === mode }"
:data-testid="`nc-calendar-view-mode-${mode}`"
class="tab"
@click="setActiveCalendarMode(mode, $event)"
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 class="tab-title nc-tab">{{ $t(`objects.${mode}`) }}</div>
<div :style="highlightStyle" class="highlight"></div>
<div
v-for="mode in ['day', 'week', 'month', 'year']"
:key="mode"
v-e="`['c:calendar:change-calendar-view-${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>
</div>

<div v-else>
<NcDropdown :trigger="['click']">
<NcButton size="small" type="secondary">
Expand Down Expand Up @@ -83,7 +91,7 @@ watch(activeCalendarView, () => {
.tab .tab-title {
@apply min-w-0 mb-3 pointer-events-none;
word-break: 'keep-all';
word-break: keep-all;
white-space: 'nowrap';
display: 'inline';
line-height: 0.95;
Expand Down

1 comment on commit 4c228fb

@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-0738

Please sign in to comment.