Browse Source

fix(nc-gui): ui fixes

pull/7611/head
DarkPhoenix2704 9 months ago
parent
commit
ae2e080cc6
  1. 4
      packages/nc-gui/components/nc/DateWeekSelector.vue
  2. 4
      packages/nc-gui/components/nc/MonthYearSelector.vue
  3. 4
      packages/nc-gui/components/smartsheet/calendar/MonthView.vue
  4. 36
      packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
  5. 30
      packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
  6. 6
      packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
  7. 10
      packages/nc-gui/components/smartsheet/calendar/index.vue

4
packages/nc-gui/components/nc/DateWeekSelector.vue

@ -132,7 +132,7 @@ const paginate = (action: 'next' | 'prev') => {
</script>
<template>
<div class="p-4 flex flex-col gap-4">
<div class="px-4 pt-3 pb-4 flex flex-col gap-4">
<div
:class="{
'justify-center': disablePagination,
@ -160,7 +160,7 @@ const paginate = (action: 'next' | 'prev') => {
</NcTooltip>
</div>
<div class="border-1 border-gray-200 rounded-y-xl max-w-[320px]">
<div class="flex flex-row bg-gray-100 gap-2 rounded-t-xl justify-between p-2">
<div class="flex flex-row bg-gray-100 gap-2 rounded-t-xl justify-between px-2">
<span v-for="(day, index) in days" :key="index" class="h-9 flex items-center justify-center w-9 text-gray-500">{{
day
}}</span>

4
packages/nc-gui/components/nc/MonthYearSelector.vue

@ -83,7 +83,7 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
</script>
<template>
<div class="p-4 flex flex-col gap-4">
<div class="px-4 pt-3 pb-4 flex flex-col gap-4">
<div class="flex justify-between items-center">
<NcTooltip>
<NcButton size="small" type="secondary" @click="paginate('prev')">
@ -103,7 +103,7 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
</template>
</NcTooltip>
</div>
<div class="border-1 border-gray-200 rounded-y-xl max-w-[350px]">
<div class="rounded-y-xl max-w-[350px]">
<div class="grid grid-cols-4 gap-2 p-2">
<template v-if="!yearPicker">
<span

4
packages/nc-gui/components/smartsheet/calendar/MonthView.vue

@ -865,8 +865,8 @@ const isDateSelected = (date: dayjs.Dayjs) => {
<template v-if="!isRowEmpty(record, displayField)">
<div
:class="{
'!mt-2': displayField!.uidt === UITypes.SingleLineText,
'!mt-1': displayField!.uidt === UITypes.MultiSelect || displayField!.uidt === UITypes.SingleSelect,
'mt-1.4': displayField!.uidt === UITypes.SingleLineText,
'mt-1': displayField!.uidt === UITypes.MultiSelect || displayField!.uidt === UITypes.SingleSelect,
}"
>
<LazySmartsheetVirtualCell

36
packages/nc-gui/components/smartsheet/calendar/RecordCard.vue

@ -43,38 +43,36 @@ const emit = defineEmits(['resize-start'])
'group-hover:(border-brand-500 border-2)': resize,
'!border-brand-500 border-2': selected || hover,
}"
class="relative group border-2 border-white"
class="relative flex items-center px-1 group border-2 border-transparent"
>
<div class="h-full absolute py-2">
<div
v-if="position === 'leftRounded' || position === 'rounded'"
:class="{
'bg-maroon-500': color === 'maroon',
'bg-blue-500': color === 'blue',
'bg-green-500': color === 'green',
'bg-yellow-500': color === 'yellow',
'bg-pink-500': color === 'pink',
'bg-purple-500': color === 'purple',
}"
class="block h-full min-h-5 ml-1 w-1 rounded mr-2"
></div>
</div>
<div
v-if="position === 'leftRounded' || position === 'rounded'"
:class="{
'bg-maroon-500': color === 'maroon',
'bg-blue-500': color === 'blue',
'bg-green-500': color === 'green',
'bg-yellow-500': color === 'yellow',
'bg-pink-500': color === 'pink',
'bg-purple-500': color === 'purple',
}"
class="block h-full min-h-5 w-1 rounded"
></div>
<div
v-if="(position === 'leftRounded' || position === 'rounded') && resize"
:class="{
'!block !border-2 !rounded-lg !border-brand-500': selected || hover,
}"
class="absolute mt-0.6 h-7.1 hidden -left-4 resize"
class="mt-0.6 h-7.1 hidden -left-4 resize"
>
<NcButton size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'left', $event, record)">
<component :is="iconMap.drag" class="text-gray-400"></component>
</NcButton>
</div>
<div class="ml-3 pr-3 text-ellipsis overflow-hidden w-full h-8 absolute">
<span v-if="position === 'rightRounded' || position === 'none'"> .... </span>
<span class="absolute ml-1 text-sm text-gray-800">
<div class="ml-3 pr-3 overflow-hidden w-full h-8 absolute">
<span v-if="position === 'rightRounded' || position === 'none'" class="mr-1"> .... </span>
<span class="absolute text-sm text-gray-800">
<slot />
</span>
<span v-if="position === 'leftRounded' || position === 'none'" class="absolute my-0 right-5"> .... </span>

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

@ -284,7 +284,7 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
year-picker
/>
<div class="px-4 relative flex flex-col gap-y-6 pt-4">
<div class="px-4 border-t-1 border-gray-200 relative flex flex-col gap-y-4 pt-4">
<div class="flex items-center gap-2">
<a-input
v-model:value="searchQuery.value"
@ -359,20 +359,22 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
@dragover.prevent
>
<template v-if="!isRowEmpty(record, displayField)">
<LazySmartsheetVirtualCell
v-if="isVirtualCol(displayField)"
v-model="record.row[displayField.title]"
:column="displayField"
:row="record"
/>
<div :class="{}">
<LazySmartsheetVirtualCell
v-if="isVirtualCol(displayField)"
v-model="record.row[displayField.title]"
:column="displayField"
:row="record"
/>
<LazySmartsheetCell
v-else
v-model="record.row[displayField.title]"
:column="displayField"
:edit-enabled="false"
:read-only="true"
/>
<LazySmartsheetCell
v-else
v-model="record.row[displayField.title]"
:column="displayField"
:edit-enabled="false"
:read-only="true"
/>
</div>
</template>
</LazySmartsheetCalendarSideRecordCard>
</LazySmartsheetRow>

6
packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue

@ -17,7 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
<template>
<div class="border-1 cursor-pointer border-gray-200 items-center px-2 py-3 rounded-lg">
<div class="flex items-center">
<div class="flex items-center gap-2">
<span
:class="{
'bg-maroon-500': props.color === 'maroon',
@ -29,8 +29,8 @@ const props = withDefaults(defineProps<Props>(), {
}"
class="block h-10 w-1 rounded"
></span>
<div class="flex flex-col gap-1 ml-3">
<span class="text-sm max-w-36 h-8 truncate text-gray-800">
<div class="flex text-ellipsis gap-1 flex-col">
<span class="text-sm max-w-40 truncate text-gray-800">
<slot />
</span>
<span v-if="showDate" class="text-xs text-gray-500">{{ fromDate }} {{ toDate ? ` - ${toDate}` : '' }}</span>

10
packages/nc-gui/components/smartsheet/calendar/index.vue

@ -131,9 +131,13 @@ const headerText = computed(() => {
case 'day':
return dayjs(selectedDate.value).format('D MMMM YYYY')
case 'week':
return `${dayjs(selectedDateRange.value.start).format('D MMM YYYY')} - ${dayjs(selectedDateRange.value.end).format(
'D MMM YYYY',
)}`
if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'month')) {
return `${selectedDateRange.value.start.format('D')} - ${selectedDateRange.value.end.format('D MMM YYYY')}`
} else if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'year')) {
return `${selectedDateRange.value.start.format('D MMM')} - ${selectedDateRange.value.end.format('D MMM YYYY')}`
} else {
return `${selectedDateRange.value.start.format('D MMM YYYY')} - ${selectedDateRange.value.end.format('D MMM YYYY')}`
}
case 'month':
return dayjs(selectedMonth.value).format('MMMM YYYY')
case 'year':

Loading…
Cancel
Save