Browse Source

feat(nc-gui): border color & adjust height

pull/7731/head
DarkPhoenix2704 8 months ago
parent
commit
423415d6b7
  1. 4
      packages/nc-gui/components/smartsheet/calendar/MonthView.vue
  2. 2
      packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
  3. 16
      packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue

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

@ -629,7 +629,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
<div <div
v-for="(day, index) in days" v-for="(day, index) in days"
:key="index" :key="index"
class="text-center bg-gray-50 py-1 text-sm border-b-1 border-r-1 last:border-r-0 border-gray-200 font-semibold text-gray-500" class="text-center bg-gray-50 py-1 text-sm border-b-1 border-r-1 last:border-r-0 border-gray-100 font-semibold text-gray-500"
> >
{{ day }} {{ day }}
</div> </div>
@ -653,7 +653,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
isDateSelected(day) || (focusedDate && dayjs(day).isSame(focusedDate, 'day')), isDateSelected(day) || (focusedDate && dayjs(day).isSame(focusedDate, 'day')),
'!text-gray-400': !isDayInPagedMonth(day), '!text-gray-400': !isDayInPagedMonth(day),
}" }"
class="text-right relative group last:border-r-0 text-sm h-full border-r-1 border-b-1 border-gray-200 font-medium hover:bg-gray-50 text-gray-800 bg-white" class="text-right relative group last:border-r-0 text-sm h-full border-r-1 border-b-1 border-gray-100 font-medium hover:bg-gray-50 text-gray-800 bg-white"
data-testid="nc-calendar-month-day" data-testid="nc-calendar-month-day"
@click="selectDate(day)" @click="selectDate(day)"
> >

2
packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue

@ -51,7 +51,7 @@ const emit = defineEmits(['resize-start'])
'group-hover:(border-brand-500)': resize, 'group-hover:(border-brand-500)': resize,
'!border-brand-500 border-1': selected || hover, '!border-brand-500 border-1': selected || hover,
}" }"
class="relative flex items-center h-full ml-0.25 border-1 border-gray-50" class="relative flex items-center h-full ml-0.25 border-1 border-transparent"
> >
<div class="h-full py-1"> <div class="h-full py-1">
<div <div

16
packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue

@ -189,7 +189,11 @@ const recordsAcrossAllRange = computed<{
startDate = startDate.add(1, 'minute') startDate = startDate.add(1, 'minute')
} }
const dayIndex = ogStartDate.day() - 1 let dayIndex = ogStartDate.day() - 1
if (dayIndex === -1) {
dayIndex = 6
}
const hourKey = ogStartDate.format('HH:mm') const hourKey = ogStartDate.format('HH:mm')
@ -208,7 +212,7 @@ const recordsAcrossAllRange = computed<{
style = { style = {
...style, ...style,
top: `${topPx - hourIndex - hourIndex * 0.15}px`, top: `${topPx - hourIndex - hourIndex * 0.15 + 0.7}px`,
height: `${perHeight - 4}px`, height: `${perHeight - 4}px`,
} }
@ -371,14 +375,14 @@ const recordsAcrossAllRange = computed<{
overlapIndex = Math.max(overlapIndex, overlaps[dateKey][hours].id.indexOf(record.rowMeta.id!)) overlapIndex = Math.max(overlapIndex, overlaps[dateKey][hours].id.indexOf(record.rowMeta.id!))
} }
} }
const spacing = 1 const spacing = 0.1
const widthPerRecord = (100 - spacing * (maxOverlaps - 1)) / maxOverlaps / 7 const widthPerRecord = (100 - spacing * (maxOverlaps - 1)) / maxOverlaps / 7
const leftPerRecord = widthPerRecord * overlapIndex const leftPerRecord = widthPerRecord * overlapIndex
record.rowMeta.style = { record.rowMeta.style = {
...record.rowMeta.style, ...record.rowMeta.style,
left: `calc(${dayIndex * perWidth}px + ${leftPerRecord}% )`, left: `calc(${dayIndex * perWidth}px + ${leftPerRecord}% )`,
width: `calc(${widthPerRecord}%)`, width: `calc(${widthPerRecord - 0.1}%)`,
} }
return record return record
}) })
@ -744,7 +748,7 @@ const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
:class="{ :class="{
'text-brand-500': date[0].isSame(dayjs(), 'date'), 'text-brand-500': date[0].isSame(dayjs(), 'date'),
}" }"
class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-0 border-l-1 border-r-0 bg-gray-50" class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-100 last:border-r-0 border-b-0 border-l-1 border-r-0 bg-gray-50"
> >
{{ dayjs(date[0]).format('DD ddd') }} {{ dayjs(date[0]).format('DD ddd') }}
</div> </div>
@ -766,7 +770,7 @@ const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
:class="{ :class="{
'border-1 !border-brand-500 bg-gray-50': hour.isSame(selectedTime, 'hour'), 'border-1 !border-brand-500 bg-gray-50': hour.isSame(selectedTime, 'hour'),
}" }"
class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-200 border-t-gray-200" class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-100 border-t-gray-100"
data-testid="nc-calendar-week-hour" data-testid="nc-calendar-week-hour"
@click=" @click="
() => { () => {

Loading…
Cancel
Save