github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix: tab design changes

pull/9831/head
DarkPhoenix2704 5 days ago
parent
36be93cc5f
commit
d3b77336fa
3 changed files with 39 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
  2. 33
      packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
  3. 51
      packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue

29
packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
Unescape View File

@ -464,7 +464,7 @@ const dragElement = ref<HTMLElement | null>(null)
const resizeDirection = ref<'right' | 'left' | null>()
const resizeRecord = ref<Row | null>()
const resizeRecord = ref<Row | null>(null)
const dragTimeout = ref<ReturnType<typeof setTimeout>>()
@ -680,19 +680,13 @@ const stopDrag = (event: MouseEvent) => {
const { newRow, updateProperty } = calculateNewRow(event, true)
if (!newRow && !updateProperty) return
const allRecords = document.querySelectorAll('.draggable-record')
allRecords.forEach((el) => {
el.style.visibility = ''
el.style.opacity = '100%'
})
if (dragElement.value) {
dragElement.value.style.boxShadow = 'none'
dragElement.value = null
}
if (dragRecord.value) {
dragRecord.value = undefined
dragRecord.value = null
}
if (!newRow) return
@ -719,17 +713,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
target = target.parentElement as HTMLElement
}
// When the user starts dragging a record, we reduce opacity of all other records
const allRecords = document.querySelectorAll('.draggable-record')
allRecords.forEach((el) => {
if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id!)) {
// el.style.visibility = 'hidden'
el.style.opacity = '30%'
}
})
dragRecord.value = record
dragElement.value = target
document.addEventListener('mousemove', onDrag)
@ -1050,7 +1034,14 @@ const expandRecord = (record: Row) => {
v-if="record.rowMeta.style?.display !== 'none'"
:data-testid="`nc-calendar-day-record-${record.row[displayField!.title!]}`"
:data-unique-id="record.rowMeta.id"
:style="record.rowMeta.style"
:style="{
...record.rowMeta.style,
opacity:
(dragRecord === null || record.rowMeta.id === dragRecord?.rowMeta.id) &&
(resizeRecord === null || record.rowMeta.id === resizeRecord?.rowMeta.id)
? 1
: 0.3,
}"
class="absolute draggable-record transition group cursor-pointer pointer-events-auto"
@mousedown="dragStart($event, record)"
@mouseleave="hoverRecord = null"

33
packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
Unescape View File

@ -553,11 +553,11 @@ const hoverRecord = ref<string | null>()
const resizeDirection = ref<'right' | 'left' | null>()
const resizeRecord = ref<Row | null>()
const resizeRecord = ref<Row | null>(null)
const isDragging = ref(false)
const dragRecord = ref<Row>()
const dragRecord = ref<Row | null>(null)
const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
updateRowProperty(row, updateProperty, isDelete)
@ -771,16 +771,12 @@ const stopDrag = (event: MouseEvent) => {
const { newRow, updatedProperty } = calculateNewRow(event, false, true)
// We set the visibility and opacity of the records back to normal
const allRecords = document.querySelectorAll('.draggable-record')
allRecords.forEach((el) => {
el.style.visibility = ''
el.style.opacity = '100%'
})
if (newRow) {
updateRowProperty(newRow, updatedProperty, false)
}
dragRecord.value = null
$e('c:calendar:week:drag-record')
document.removeEventListener('mousemove', onDrag)
@ -802,14 +798,6 @@ const dragStart = (event: MouseEvent, record: Row) => {
target = target.parentElement as HTMLElement
}
const allRecords = document.querySelectorAll('.draggable-record')
allRecords.forEach((el) => {
if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id!)) {
// el.style.visibility = 'hidden'
el.style.opacity = '30%'
}
})
isDragging.value = true
dragRecord.value = record
@ -1016,7 +1004,7 @@ watch(
() => {
selectedDate = hour
selectedTime = hour
dragRecord = undefined
dragRecord = null
}
"
>
@ -1043,7 +1031,14 @@ watch(
v-if="record.rowMeta.style?.display !== 'none'"
:data-testid="`nc-calendar-week-record-${record.row[displayField!.title!]}`"
:data-unique-id="record.rowMeta!.id"
:style="record.rowMeta!.style "
:style="{
...record.rowMeta.style,
opacity:
(dragRecord === null || record.rowMeta.id === dragRecord?.rowMeta.id) &&
(resizeRecord === null || record.rowMeta.id === resizeRecord?.rowMeta.id)
? 1
: 0.3,
}"
:class="{
'w-1/5': maxVisibleDays === 5,
'w-1/7': maxVisibleDays === 7,

51
packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue
Unescape View File

@ -13,6 +13,7 @@ const setActiveCalendarMode = (mode: 'day' | 'week' | 'month' | 'year', event: M
changeCalendarView(mode)
const tabElement = event.target as HTMLElement
highlightStyle.value.left = `${tabElement.offsetLeft}px`
highlightStyle.value.width = `${tabElement.offsetWidth}px`
}
const updateHighlightPosition = () => {
@ -20,6 +21,7 @@ const updateHighlightPosition = () => {
const activeTab = document.querySelector('.nc-calendar-mode-tab .tab.active') as HTMLElement
if (activeTab) {
highlightStyle.value.left = `${activeTab.offsetLeft}px`
highlightStyle.value.width = `${activeTab.offsetWidth}px`
}
})
}
@ -37,19 +39,21 @@ watch(activeCalendarView, () => {
<template>
<div
v-if="isTab"
class="flex flex-row px-1 pointer-events-auto mx-3 mt-3 rounded-lg gap-x-0.5 nc-calendar-mode-tab"
class="px-1 pointer-events-auto relative mx-3 mt-1 mb-2.5 rounded-lg gap-x-0.5 relative nc-calendar-mode-tab"
data-testid="nc-calendar-view-mode"
>
<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 !text-xs nc-tab">{{ $t(`objects.${mode}`) }}</div>
<div class="flex flex-row">
<div :style="highlightStyle" class="highlight h-0.5 rounded-t-md absolute transition-all -bottom-2.5 bg-brand-500"></div>
<div
v-for="mode in ['day', 'week', 'month', 'year']"
:key="mode"
:class="{ '!text-brand-500 !font-bold bg-transparent active': activeCalendarView === mode }"
:data-testid="`nc-calendar-view-mode-${mode}`"
class="tab flex items-center h-7 w-14 z-10 justify-center px-2 py-1 rounded-lg gap-x-1.5 text-gray-600 hover:text-black cursor-pointer transition-all duration-300 select-none"
@click="setActiveCalendarMode(mode, $event)"
>
<div class="min-w-0 pointer-events-none !text-[13px]]">{{ $t(`objects.${mode}`) }}</div>
</div>
</div>
</div>
@ -79,11 +83,6 @@ watch(activeCalendarView, () => {
</template>
<style lang="scss" scoped>
.highlight {
@apply absolute h-6.5 w-14 transition-all border-b-2 border-brand-500 duration-200;
z-index: 0;
}
.nc-calendar-mode-menu {
:deep(.nc-menu-item-inner) {
@apply !text-[13px];
@ -95,26 +94,6 @@ watch(activeCalendarView, () => {
}
}
.tab {
@apply flex items-center h-7 w-14 z-10 justify-center px-2 py-1 rounded-lg gap-x-1.5 text-gray-500 hover:text-black cursor-pointer transition-all duration-300 select-none;
}
.tab .tab-title {
@apply min-w-0 mb-3 pointer-events-none;
word-break: keep-all;
white-space: 'nowrap';
display: 'inline';
line-height: 0.95;
}
.active {
@apply !text-brand-500 !font-bold bg-transparent;
}
.nc-calendar-mode-tab {
@apply relative;
}
:deep(.ant-select-selector) {
@apply !h-7;
}

Write Preview
Loading…
Cancel
Save