From cf2df6ffe4f7146fe9b2eca866e21d3f261173c6 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 25 Jan 2024 09:26:14 +0300
Subject: [PATCH] Added scrolling and fixed the popup for creating and editing
 an event (#4439)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/CreateEvent.svelte         | 68 +++++++++-------
 .../src/components/EditEvent.svelte           | 81 +++++++++++--------
 .../src/components/LocationEditor.svelte      |  2 +-
 3 files changed, 88 insertions(+), 63 deletions(-)

diff --git a/plugins/calendar-resources/src/components/CreateEvent.svelte b/plugins/calendar-resources/src/components/CreateEvent.svelte
index 9a7d6eaa29..59fa1e934a 100644
--- a/plugins/calendar-resources/src/components/CreateEvent.svelte
+++ b/plugins/calendar-resources/src/components/CreateEvent.svelte
@@ -27,7 +27,8 @@
     IconMoreH,
     createFocusManager,
     getUserTimezone,
-    showPopup
+    showPopup,
+    Scroller
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import calendar from '../plugin'
@@ -178,44 +179,45 @@
       />
     </div>
   </div>
-  <div class="block first flex-no-shrink">
-    <EventTimeEditor {allDay} bind:startDate bind:dueDate {timeZone} focusIndex={10004} />
-    <EventTimeExtraButton
-      bind:allDay
-      bind:timeZone
-      bind:rules
-      on:repeat={setRecurrance}
-      on:allday={allDayChangeHandler}
-    />
-  </div>
-  <div class="block rightCropPadding">
-    <LocationEditor focusIndex={10010} bind:value={location} />
-    <EventParticipants focusIndex={10011} bind:participants bind:externalParticipants />
-  </div>
-  <div class="block flex-no-shrink">
-    <div class="flex-row-top gap-1-5">
+  <Scroller thinScrollBars>
+    <div class="block first flex-no-shrink">
+      <EventTimeEditor {allDay} bind:startDate bind:dueDate {timeZone} focusIndex={10004} />
+      <EventTimeExtraButton
+        bind:allDay
+        bind:timeZone
+        bind:rules
+        on:repeat={setRecurrance}
+        on:allday={allDayChangeHandler}
+      />
+    </div>
+    <div class="block rightCropPadding">
+      <LocationEditor focusIndex={10010} bind:value={location} />
+      <EventParticipants focusIndex={10011} bind:participants bind:externalParticipants />
+    </div>
+    <div class="block row gap-1-5">
       <div class="top-icon">
         <Icon icon={calendar.icon.Description} size={'small'} />
       </div>
       <StyledTextBox
         alwaysEdit={true}
+        isScrollable={false}
         kind={'indented'}
-        maxHeight={'limited'}
         showButtons={false}
         focusIndex={10100}
         placeholder={calendar.string.Description}
         bind:content={description}
       />
     </div>
-  </div>
-  <div class="block rightCropPadding">
-    <CalendarSelector bind:value={space} focusIndex={10101} />
-    <div class="flex-row-center flex-gap-1">
-      <Icon icon={calendar.icon.Hidden} size={'small'} />
-      <VisibilityEditor bind:value={visibility} kind={'ghost'} focusIndex={10102} withoutIcon />
+    <div class="block rightCropPadding">
+      <CalendarSelector bind:value={space} focusIndex={10101} />
+      <div class="flex-row-center flex-gap-1">
+        <Icon icon={calendar.icon.Hidden} size={'small'} />
+        <VisibilityEditor bind:value={visibility} kind={'ghost'} focusIndex={10102} withoutIcon />
+      </div>
+      <EventReminders bind:reminders focusIndex={10103} />
     </div>
-    <EventReminders bind:reminders focusIndex={10103} />
-  </div>
+  </Scroller>
+  <div class="antiDivider noMargin" />
   <div class="flex-between p-5 flex-no-shrink">
     <div />
     <Button
@@ -246,11 +248,16 @@
 
     .block {
       display: flex;
-      flex-direction: column;
+      flex-shrink: 0;
       min-width: 0;
       min-height: 0;
-      border-bottom: 1px solid var(--theme-divider-color);
 
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--theme-divider-color);
+      }
+      &:not(.row) {
+        flex-direction: column;
+      }
       &.first {
         padding-top: 0;
       }
@@ -260,10 +267,13 @@
       &.rightCropPadding {
         padding: 0.75rem 1rem 0.75rem 1.25rem;
       }
+      &.row {
+        padding: 0 1.25rem 0.5rem;
+      }
     }
     .top-icon {
       flex-shrink: 0;
-      margin-top: 0.875rem;
+      margin-top: 1.375rem;
     }
   }
 </style>
diff --git a/plugins/calendar-resources/src/components/EditEvent.svelte b/plugins/calendar-resources/src/components/EditEvent.svelte
index 7fbb4fc64f..f5bebaec9c 100644
--- a/plugins/calendar-resources/src/components/EditEvent.svelte
+++ b/plugins/calendar-resources/src/components/EditEvent.svelte
@@ -26,7 +26,8 @@
     IconClose,
     createFocusManager,
     getUserTimezone,
-    showPopup
+    showPopup,
+    Scroller
   } from '@hcengineering/ui'
   import { deepEqual } from 'fast-equals'
   import { createEventDispatcher } from 'svelte'
@@ -181,46 +182,48 @@
       />
     </div>
   </div>
-  <div class="block first flex-no-shrink">
-    <EventTimeEditor {allDay} bind:startDate {timeZone} bind:dueDate disabled={readOnly} focusIndex={10004} />
-    <EventTimeExtraButton
-      bind:allDay
-      bind:timeZone
-      bind:rules
-      on:repeat={setRecurrance}
-      {readOnly}
-      on:allday={allDayChangeHandler}
-      noRepeat
-    />
-  </div>
-  <div class="block rightCropPadding">
-    <LocationEditor bind:value={location} focusIndex={10005} />
-    <EventParticipants bind:participants bind:externalParticipants disabled={readOnly} focusIndex={10006} />
-  </div>
-  <div class="block flex-no-shrink">
-    <div class="flex-row-center gap-1-5">
-      <Icon icon={calendar.icon.Description} size={'small'} />
+  <Scroller thinScrollBars>
+    <div class="block first">
+      <EventTimeEditor {allDay} bind:startDate {timeZone} bind:dueDate disabled={readOnly} focusIndex={10004} />
+      <EventTimeExtraButton
+        bind:allDay
+        bind:timeZone
+        bind:rules
+        on:repeat={setRecurrance}
+        {readOnly}
+        on:allday={allDayChangeHandler}
+        noRepeat
+      />
+    </div>
+    <div class="block rightCropPadding">
+      <LocationEditor bind:value={location} focusIndex={10005} />
+      <EventParticipants bind:participants bind:externalParticipants disabled={readOnly} focusIndex={10006} />
+    </div>
+    <div class="block row gap-1-5">
+      <div class="top-icon">
+        <Icon icon={calendar.icon.Description} size={'small'} />
+      </div>
       <StyledTextBox
         alwaysEdit={true}
+        isScrollable={false}
         focusIndex={10007}
         kind={'indented'}
-        maxHeight={'limited'}
         showButtons={false}
         placeholder={calendar.string.Description}
         bind:content={description}
       />
     </div>
-  </div>
-  <div class="divider" />
-  <div class="block rightCropPadding">
-    <CalendarSelector bind:value={space} focusIndex={10008} />
-    <div class="flex-row-center flex-gap-1">
-      <Icon icon={calendar.icon.Hidden} size={'small'} />
-      <VisibilityEditor bind:value={visibility} kind={'ghost'} withoutIcon focusIndex={10009} />
+    <div class="divider" />
+    <div class="block rightCropPadding">
+      <CalendarSelector bind:value={space} focusIndex={10008} />
+      <div class="flex-row-center flex-gap-1">
+        <Icon icon={calendar.icon.Hidden} size={'small'} />
+        <VisibilityEditor bind:value={visibility} kind={'ghost'} withoutIcon focusIndex={10009} />
+      </div>
+      <EventReminders bind:reminders focusIndex={10010} />
     </div>
-    <EventReminders bind:reminders focusIndex={10010} />
-  </div>
-  <div class="divider" />
+  </Scroller>
+  <div class="antiDivider noMargin" />
   <div class="flex-between p-5 flex-no-shrink">
     <div />
     <Button
@@ -251,12 +254,17 @@
 
     .block {
       display: flex;
-      flex-direction: column;
+      flex-shrink: 0;
       padding: 0.75rem 1.25rem;
       min-width: 0;
       min-height: 0;
-      border-bottom: 1px solid var(--theme-divider-color);
 
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--theme-divider-color);
+      }
+      &:not(.row) {
+        flex-direction: column;
+      }
       &.first {
         padding-top: 0;
       }
@@ -266,6 +274,13 @@
       &.rightCropPadding {
         padding: 0.75rem 1rem 0.75rem 1.25rem;
       }
+      &.row {
+        padding: 0 1.25rem 0.5rem;
+      }
+    }
+    .top-icon {
+      flex-shrink: 0;
+      margin-top: 1.375rem;
     }
   }
 </style>
diff --git a/plugins/calendar-resources/src/components/LocationEditor.svelte b/plugins/calendar-resources/src/components/LocationEditor.svelte
index 3500099064..7e96c3f8d1 100644
--- a/plugins/calendar-resources/src/components/LocationEditor.svelte
+++ b/plugins/calendar-resources/src/components/LocationEditor.svelte
@@ -20,7 +20,7 @@
   }
 </script>
 
-<div class="flex-row-center flex-gap-1 container">
+<div class="flex-row-center flex-gap-1 container flex-no-shrink">
   <Icon icon={calendar.icon.Location} size={'small'} />
   <div class="flex-row-center">
     <EditBox bind:value placeholder={calendar.string.Location} kind={'ghost'} {focusIndex} fullSize focusable />