mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-23 16:56:07 +00:00
UBER-888: fixed dragging of the WorkItem (#3735)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
parent
a36e734dfc
commit
5f20225832
@ -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; }
|
||||||
|
@ -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; }
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user