From ddd23e3bdfa1bbce047ba754b1c88f13bca8b8f4 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 17 Aug 2023 07:01:33 +0300
Subject: [PATCH] Team: Planning UI fixes (#3599)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../presentation/src/components/Card.svelte   |   2 +-
 packages/theme/styles/_layouts.scss           |  11 +-
 packages/theme/styles/button.scss             |   4 +
 packages/theme/styles/common.scss             |  13 ++
 .../src/components/DayCalendar.svelte         | 114 ++++++++++--------
 5 files changed, 91 insertions(+), 53 deletions(-)

diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte
index 14a16f810d..6bbd3a0aef 100644
--- a/packages/presentation/src/components/Card.svelte
+++ b/packages/presentation/src/components/Card.svelte
@@ -63,7 +63,7 @@
         {/if}
       </span>
     </div>
-    <div class="buttons-group small-gap content-dark-color">
+    <div class="ml-4 buttons-group small-gap content-dark-color">
       <Button
         id="card-close"
         focusIndex={10002}
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index cc387b24db..b394a669ce 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -433,6 +433,7 @@ input.search {
 .gapV-4 > *:not(:last-child) { margin-bottom: 1rem; }
 .gapV-6 > *:not(:last-child) { margin-bottom: 1.5rem; }
 .gapV-8 > *:not(:last-child) { margin-bottom: 2rem; }
+.gapV-12 > *:not(:last-child) { margin-bottom: 3rem; }
 .gap-around-2 > * { margin: .25rem; }
 .gap-around-4 > * { margin: .5rem; }
 
@@ -570,6 +571,7 @@ input.search {
 .step-lr75 + .step-lr75 { margin-left: .75rem; }
 .step-tb75 + .step-tb75 { margin-top: .75rem; }
 .step-tb-6 + .step-tb-6 { margin-top: 1.5rem; }
+.step-tb-12 + .step-tb-12 { margin-top: 3rem; }
 
 .step-tb-2-accent + .step-tb-2-accent {
   position: relative;
@@ -923,13 +925,14 @@ a.no-line {
 .border-radius-left-1 { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
 .border-radius-right-1 { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
 .border-radius-top-1 { border-top-right-radius: 0.25rem; border-top-left-radius: 0.25rem; }
-.border-divider-color {border: 1px solid var(--divider-color);}
+.border-divider-color {border: 1px solid var(--theme-divider-color);}
 .border-primary-button { border-color: var(--accented-button-border); }
 
-.top-divider { border-top: 1px solid var(--divider-color); }
-.bottom-divider { border-bottom: 1px solid var(--divider-color); }
+.top-divider { border-top: 1px solid var(--theme-divider-color); }
+.bottom-divider { border-bottom: 1px solid var(--theme-divider-color); }
+.left-divider { border-left: 1px solid var(--theme-divider-color); }
+.right-divider { border-right: 1px solid var(--theme-divider-color); }
 .bottom-highlight-select { border-bottom: 1px solid var(--highlight-select); }
-.left-divider { border-left: 1px solid var(--divider-color); }
 
 
 
diff --git a/packages/theme/styles/button.scss b/packages/theme/styles/button.scss
index f7dbe1e261..a74a1823e8 100644
--- a/packages/theme/styles/button.scss
+++ b/packages/theme/styles/button.scss
@@ -196,6 +196,10 @@
   }
   &.regular, &.ghost {
     &:hover, &:active, &:focus { color: var(--theme-caption-color); }
+    &.selected {
+      color: var(--theme-button-contrast-color);
+      background-color: var(--theme-accent-color);
+    }
   }
   &.accented,
   &.brand,
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 867e07e4b7..bef1bd5f41 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -397,6 +397,19 @@
   &.x4 { width: 1rem; }
 }
 
+.antiVSpacer {
+  flex-shrink: 0;
+  height: .25rem;
+
+  &:not(.withMargins) { margin: 0 !important; }
+
+  &.x1-5 { height: .375rem; }
+  &.x2 { height: .5rem; }
+  &.x3 { height: .75rem; }
+  &.x4 { height: 1rem; }
+  &.x7 { height: 1.75rem; }
+}
+
 .antiSection {
   display: flex;
   flex-direction: column;
diff --git a/plugins/calendar-resources/src/components/DayCalendar.svelte b/plugins/calendar-resources/src/components/DayCalendar.svelte
index 14afbcd990..92add6af54 100644
--- a/plugins/calendar-resources/src/components/DayCalendar.svelte
+++ b/plugins/calendar-resources/src/components/DayCalendar.svelte
@@ -335,15 +335,15 @@
       result.visibility = 0
     }
     result.top =
-      (showHeader ? rem(3.5) + styleAD : 0) +
+      (showHeader ? rem(3.5) : 0) +
+      styleAD +
       cellHeight * startTime.hours +
       (startTime.mins / 60) * cellHeight +
       getGridOffset(startTime.mins)
     result.bottom =
       cellHeight * (displayedHours - startHour - endTime.hours - 1) +
       ((60 - endTime.mins) / 60) * cellHeight +
-      getGridOffset(endTime.mins, true) +
-      (showHeader ? 0 : rem(3.5))
+      getGridOffset(endTime.mins, true)
     let cols = 1
     let index: number = 0
     grid[event.day].columns.forEach((col, i) =>
@@ -450,25 +450,31 @@
       : rem((heightAD + 0.125) * (adMaxRow <= maxAD ? adMaxRow : maxAD) + 0.25)
 </script>
 
-<Scroller bind:divScroll={scroller} fade={{ multipler: { top: 3.5 + styleAD / fontSize, bottom: 0 } }}>
+<Scroller
+  bind:divScroll={scroller}
+  fade={{ multipler: { top: (showHeader ? 3.5 : 0) + styleAD / fontSize, bottom: 0 } }}
+>
   <div
     bind:this={container}
     class="calendar-container"
-    style:grid={`${showHeader ? '[header] 3.5rem [all-day] ' + styleAD + 'px' : ''} repeat(${
+    style:--calendar-ad-height={styleAD + 'px'}
+    style:grid={`${showHeader ? '[header] 3.5rem ' : ''}[all-day] ${styleAD}px repeat(${
       (displayedHours - startHour) * 2
     }, [row-start] 2rem) / [time-col] 3.5rem repeat(${displayedDaysCount}, [col-start] 1fr)`}
     use:resizeObserver={(element) => checkSizes(element)}
   >
-    <div class="sticky-header head center"><span class="zone">{getTimeZone()}</span></div>
-    {#each [...Array(displayedDaysCount).keys()] as dayOfWeek}
-      {@const day = getDay(weekMonday, dayOfWeek)}
-      <div class="sticky-header head title" class:center={displayedDaysCount > 1}>
-        <span class="day" class:today={areDatesEqual(todayDate, day)}>{day.getDate()}</span>
-        <span class="weekday">{getWeekDayName(day, weekFormat)}</span>
-      </div>
-    {/each}
+    {#if showHeader}
+      <div class="sticky-header head center"><span class="zone">{getTimeZone()}</span></div>
+      {#each [...Array(displayedDaysCount).keys()] as dayOfWeek}
+        {@const day = getDay(weekMonday, dayOfWeek)}
+        <div class="sticky-header head title" class:center={displayedDaysCount > 1}>
+          <span class="day" class:today={areDatesEqual(todayDate, day)}>{day.getDate()}</span>
+          <span class="weekday">{getWeekDayName(day, weekFormat)}</span>
+        </div>
+      {/each}
+    {/if}
 
-    <div class="sticky-header allday-header text-sm content-dark-color">
+    <div class="sticky-header allday-header text-sm content-dark-color" class:top={!showHeader}>
       <Label label={calendar.string.AllDay} />
       {#if (!minimizedAD && adMaxRow > maxAD) || (minimizedAD && adMaxRow > minAD)}
         <ActionIcon
@@ -480,38 +486,38 @@
         />
       {/if}
     </div>
-    <div class="sticky-header allday-container" style:grid-column={`col-start 1 / span ${displayedDaysCount}`}>
+    <div
+      class="sticky-header allday-container"
+      class:top={!showHeader}
+      style:grid-column={`col-start 1 / span ${displayedDaysCount}`}
+    >
       {#if shownHeightAD > maxHeightAD && shownAD}
         <Scroller noFade={false}>
-          {#key styleAD}{#key calendarWidth}{#key displayedDaysCount}
-                <div style:min-height={`${shownHeightAD - cellBorder * 2}px`} />
-                {#each alldays as event, i}
-                  {@const rect = getADRect(event._id)}
-                  {@const ev = events.find((p) => p._id === event._id)}
-                  {#if ev}
-                    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-                    <div
-                      class="calendar-element"
-                      style:top={`${rect.top}px`}
-                      style:height={`${rect.height}px`}
-                      style:left={`${rect.left}px`}
-                      style:width={`${rect.width}px`}
-                      style:opacity={rect.visibility === 0 ? 0.4 : 1}
-                      style:--mask-image={getMask(rect.visibility)}
-                      tabindex={500 + i}
-                    >
-                      <EventElement
-                        hourHeight={cellHeight}
-                        event={ev}
-                        size={{ width: rect.width, height: rect.height }}
-                      />
-                    </div>
-                  {/if}
-                {/each}
-              {/key}{/key}{/key}
+          {#key [styleAD, calendarWidth, displayedDaysCount, showHeader]}
+            <div style:min-height={`${shownHeightAD - cellBorder * 2}px`} />
+            {#each alldays as event, i}
+              {@const rect = getADRect(event._id)}
+              {@const ev = events.find((p) => p._id === event._id)}
+              {#if ev}
+                <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+                <div
+                  class="calendar-element"
+                  style:top={`${rect.top}px`}
+                  style:height={`${rect.height}px`}
+                  style:left={`${rect.left}px`}
+                  style:width={`${rect.width}px`}
+                  style:opacity={rect.visibility === 0 ? 0.4 : 1}
+                  style:--mask-image={getMask(rect.visibility)}
+                  tabindex={500 + i}
+                >
+                  <EventElement hourHeight={cellHeight} event={ev} size={{ width: rect.width, height: rect.height }} />
+                </div>
+              {/if}
+            {/each}
+          {/key}
         </Scroller>
       {:else if shownAD}
-        {#key [styleAD, calendarWidth, displayedDaysCount]}
+        {#key [styleAD, calendarWidth, displayedDaysCount, showHeader]}
           {#each alldays as event, i}
             {@const rect = getADRect(event._id)}
             {@const ev = events.find((p) => p._id === event._id)}
@@ -533,7 +539,7 @@
           {/each}
         {/key}
       {:else}
-        {#key [styleAD, calendarWidth, displayedDaysCount]}
+        {#key [styleAD, calendarWidth, displayedDaysCount, showHeader]}
           {#each shortAlldays as event, i}
             {@const rect = getADRect(event.id, event.day, event.fixRow)}
             {@const ev = events.find((p) => p._id === event.id)}
@@ -580,7 +586,11 @@
 
     {#each [...Array(displayedHours - startHour).keys()] as hourOfDay}
       {#if hourOfDay === 0}
-        <div class="clear-cell" />
+        {#if showHeader}
+          <div class="clear-cell" />
+        {:else}
+          <div class="sticky-header head center zm"><span class="zone mini">{getTimeZone()}</span></div>
+        {/if}
       {:else if hourOfDay < displayedHours - startHour}
         <div
           class="time-cell"
@@ -621,7 +631,7 @@
       {#if hourOfDay === displayedHours - startHour - 1}<div class="clear-cell" />{/if}
     {/each}
 
-    {#key [styleAD, calendarWidth, displayedDaysCount]}
+    {#key [styleAD, calendarWidth, displayedDaysCount, showHeader]}
       {#each newEvents.filter((ev) => !ev.allDay) as event, i}
         {@const rect = getRect(event)}
         {@const ev = events.find((p) => p._id === event._id)}
@@ -684,14 +694,18 @@
     background-color: var(--theme-comp-header-color);
     z-index: 10;
 
-    &.head {
-      top: 0;
-    }
     &:not(.head) {
       top: 3.5rem;
       border-top: 1px solid var(--theme-divider-color);
       border-bottom: 1px solid var(--theme-divider-color);
     }
+    &.head,
+    &.top {
+      top: 0;
+    }
+    &.zm {
+      top: var(--calendar-ad-height, 2.25rem);
+    }
     &.center {
       justify-content: center;
     }
@@ -748,6 +762,10 @@
       color: var(--theme-dark-color);
       background-color: rgba(64, 109, 223, 0.1);
       border-radius: 0.25rem;
+
+      &.mini {
+        padding: 0.125rem;
+      }
     }
   }
   .calendar-container {