From ff32e16960abcb054d90aea63a0f500bc22f5fcf Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Fri, 22 Sep 2023 18:08:16 +0300
Subject: [PATCH] UBER-888: fixed dragging of the WorkItem

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/styles/_layouts.scss           |  1 +
 packages/theme/styles/components.scss         |  8 ++++----
 .../src/components/DayCalendar.svelte         | 20 ++++++++++++++++++-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 739c368117..9f706f97aa 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -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; }
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index e323234854..c87b9e7061 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -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; }
 }
diff --git a/plugins/calendar-resources/src/components/DayCalendar.svelte b/plugins/calendar-resources/src/components/DayCalendar.svelte
index fbe0b527b2..16fe395d02 100644
--- a/plugins/calendar-resources/src/components/DayCalendar.svelte
+++ b/plugins/calendar-resources/src/components/DayCalendar.svelte
@@ -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;