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-2-5 { margin-right: .625rem; }
.mr-3 { margin-right: .75rem; } .mr-3 { margin-right: .75rem; }
.mr-4 { margin-right: 1rem; } .mr-4 { margin-right: 1rem; }
.mr-5-5 { margin-right: 1.375rem; }
.mr-6 { margin-right: 1.5rem; } .mr-6 { margin-right: 1.5rem; }
.mr-8 { margin-right: 2rem; } .mr-8 { margin-right: 2rem; }
.mr-10 { margin-right: 2.5rem; } .mr-10 { margin-right: 2.5rem; }

View File

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

View File

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