UBER-888: fixed dragging of the WorkItem (#3735)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-09-22 19:47:06 +03:00 committed by GitHub
parent a36e734dfc
commit 5f20225832
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 5 deletions

View File

@ -490,6 +490,7 @@ input.search {
.mr-2-5 { margin-right: .625rem; }
.mr-3 { margin-right: .75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5-5 { margin-right: 1.375rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-8 { margin-right: 2rem; }
.mr-10 { margin-right: 2.5rem; }

View File

@ -1125,13 +1125,13 @@
min-width: 0;
}
/* Tasks in Calendar (WorkSlot) */
.tasksGroup-container .task-item.dragged {
/* ToDos in Calendar (WorkSlot) */
.toDos-container .task-item.dragged {
overflow: hidden;
background-color: var(--theme-bg-color);
background-color: var(--theme-bg-dark-color);
border-color: var(--theme-divider-color);
border-radius: .125rem;
opacity: .75;
.task-icon { opacity: 0; }
.hideOnDrag { opacity: 0 !important; }
}

View File

@ -44,7 +44,8 @@
export let startHour = 0
export let startFromWeekStart = true
export let weekFormat: 'narrow' | 'short' | 'long' | undefined = displayedDaysCount > 4 ? 'short' : 'long'
export let showHeader = true
export let showHeader: boolean = true
export let clearCells: boolean = false
const dispatch = createEventDispatcher()
@ -59,6 +60,7 @@
}
}
const rem = (n: number): number => n * fontSize
const initDisplayedDaysCount = displayedDaysCount
export function getCalendarRect (): DOMRect | undefined {
return container ? calendarRect : undefined
@ -494,6 +496,9 @@
const checkSizes = (element: HTMLElement | Element) => {
calendarRect = element.getBoundingClientRect()
calendarWidth = calendarRect.width
if (calendarWidth < 356 && initDisplayedDaysCount >= 1) displayedDaysCount = 1
else if (calendarWidth < 512 && initDisplayedDaysCount >= 2) displayedDaysCount = 2
else if (calendarWidth >= 512 && displayedDaysCount < initDisplayedDaysCount) displayedDaysCount = 3
colWidth = (calendarWidth - 3.5 * fontSize) / displayedDaysCount
}
$: if (docHeight && calendarRect?.top) {
@ -534,6 +539,8 @@
})
e.preventDefault()
}
const dragOn = (e: DragEvent) => e.preventDefault()
</script>
<Scroller
@ -543,7 +550,9 @@
<div
bind:this={container}
on:dragleave
on:dragover={dragOn}
class="calendar-container"
class:clearCells
style:--calendar-ad-height={styleAD + 'px'}
style:grid={`${showHeader ? '[header] 3.5rem ' : ''}[all-day] ${styleAD}px repeat(${
(displayedHours - startHour) * 2
@ -764,6 +773,15 @@
position: relative;
display: grid;
&.clearCells .empty-cell {
position: relative;
&::after {
position: absolute;
content: '';
inset: 0;
z-index: 5;
}
}
.now-line,
.now-line::before {
position: absolute;