From fc4230c9cf60d965274d4f430df453138bb0f49f Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 27 Oct 2022 06:56:21 +0300
Subject: [PATCH] Fix UI: DatePopup, Panel, PDFViewer. Adapting to Firefox.
 (#2331)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/panel/src/components/Panel.svelte    | 29 ++++++++++---------
 .../src/components/PDFViewer.svelte           | 19 ++++++++----
 packages/theme/styles/global.scss             |  2 +-
 packages/theme/styles/panel.scss              |  9 ++++--
 packages/ui/src/components/EditBox.svelte     |  3 ++
 packages/ui/src/components/Panel.svelte       |  9 +++---
 .../components/calendar/MonthSquare.svelte    | 14 ++++++---
 .../src/components/FileBrowser.svelte         |  2 +-
 .../src/components/FileBrowserFilters.svelte  |  2 +-
 .../components/issues/edit/EditIssue.svelte   |  1 +
 10 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index a0aac60dfd..f231fce793 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -26,6 +26,7 @@
   export let subtitle: string | undefined = undefined
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let withoutActivity: boolean = false
+  export let withoutTitle: boolean = false
   export let object: Doc
   export let panelWidth: number = 0
   export let innerWidth: number = 0
@@ -35,7 +36,7 @@
   export let isCustomAttr: boolean = true
 </script>
 
-<Panel bind:isAside isHeader={$$slots.header || isHeader} bind:panelWidth bind:innerWidth on:close>
+<Panel bind:isAside isHeader={$$slots.header || isHeader} bind:panelWidth bind:innerWidth bind:withoutTitle on:close>
   <svelte:fragment slot="navigator">
     {#if $$slots.navigator}
       <div class="buttons-group xsmall-gap mx-2">
@@ -45,19 +46,21 @@
   </svelte:fragment>
 
   <svelte:fragment slot="title">
-    <div class="popupPanel-title__content-container antiTitle">
-      {#if $$slots.title}
-        <slot name="title" />
-      {:else}
-        <div class="icon-wrapper">
-          {#if icon}<div class="wrapped-icon"><Icon {icon} size={'medium'} /></div>{/if}
-          <div class="title-wrapper">
-            {#if title}<span class="wrapped-title">{title}</span>{/if}
-            {#if subtitle}<span class="wrapped-subtitle">{subtitle}</span>{/if}
+    {#if !withoutTitle}
+      <div class="popupPanel-title__content-container antiTitle">
+        {#if $$slots.title}
+          <slot name="title" />
+        {:else}
+          <div class="icon-wrapper">
+            {#if icon}<div class="wrapped-icon"><Icon {icon} size={'medium'} /></div>{/if}
+            <div class="title-wrapper">
+              {#if title}<span class="wrapped-title">{title}</span>{/if}
+              {#if subtitle}<span class="wrapped-subtitle">{subtitle}</span>{/if}
+            </div>
           </div>
-        </div>
-      {/if}
-    </div>
+        {/if}
+      </div>
+    {/if}
   </svelte:fragment>
 
   <svelte:fragment slot="utils">
diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte
index 0577448cad..bce98e18ef 100644
--- a/packages/presentation/src/components/PDFViewer.svelte
+++ b/packages/presentation/src/components/PDFViewer.svelte
@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Button, Panel } from '@hcengineering/ui'
+  import { Button, Panel, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import type { PopupOptions } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
@@ -29,7 +29,7 @@
   export let options: PopupOptions
 
   const dispatch = createEventDispatcher()
-  let imgView: 'img-horizontal-fit' | 'img-vertical-fit' | 'img-original-fit' = 'img-horizontal-fit'
+  let imgView: 'img-horizontal-fit' | 'img-vertical-fit' | 'img-original-fit' = 'img-original-fit'
 
   function iconLabel (name: string): string {
     const parts = name.split('.')
@@ -100,11 +100,17 @@
   </svelte:fragment>
 
   {#if contentType && contentType.startsWith('image/')}
-    <div class="pdfviewer-content">
+    <div class="pdfviewer-content" style:margin={$deviceInfo.minWidth ? '.5rem' : '1.5rem'}>
       <img class={imgView} src={getFileUrl(file)} alt="" />
     </div>
+    <div class="space" />
   {:else}
-    <iframe class="pdfviewer-content" src={getFileUrl(file)} title="" />
+    <iframe
+      class="pdfviewer-content"
+      style:margin={$deviceInfo.minWidth ? '.5rem' : '1.5rem'}
+      src={getFileUrl(file)}
+      title=""
+    />
   {/if}
 </Panel>
 
@@ -125,7 +131,6 @@
   .pdfviewer-content {
     flex-grow: 1;
     overflow: auto;
-    margin: 1.5rem;
     border-style: none;
     border-radius: 0.5rem;
     background-color: var(--theme-menu-color);
@@ -158,4 +163,8 @@
     gap: 0.5rem;
     align-items: center;
   }
+  .space {
+    min-height: 0.5rem;
+    height: 0.5rem;
+  }
 </style>
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index 776abe24f2..a5cfcbc7c7 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -63,7 +63,7 @@
   box-sizing: border-box;
   touch-action: manipulation;
   scrollbar-color: var(--theme-menu-color) var(--theme-bg-color);
-  scrollbar-width: thin;
+  scrollbar-width: none;
   --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
   --timing-shadow: cubic-bezier(0,.65,.35,1);
   --timing-main: cubic-bezier(0.25, 0.46, 0.45, 0.94);
diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index 4951cc849d..743c8be9e1 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -122,8 +122,13 @@
       flex-direction: column;
       min-width: 0;
       min-height: 0;
+    }
+    &__main, &__aside {
       height: 100%;
     }
+    &__mobile {
+      flex-grow: 1;
+    }
     
     &__main {
       flex-grow: 2;
@@ -172,7 +177,7 @@
       .header-row + .header-row { margin-top: .625rem; }
     }
     .popupPanel-body__mobile-content {
-      padding: 0 .75rem 1rem;
+      padding: .5rem;
       min-width: 700px;
     }
 
@@ -248,7 +253,7 @@
     border-radius: 0;
     border: none;
   }
-  .popupPanel-title { border-bottom: 1px solid var(--divider-color); }
+  // .popupPanel-title { border-bottom: 1px solid var(--divider-color); }
 }
 .popup.fullsize {
   transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) !important;
diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte
index 1a09dcbe42..160e4b8633 100644
--- a/packages/ui/src/components/EditBox.svelte
+++ b/packages/ui/src/components/EditBox.svelte
@@ -238,5 +238,8 @@
         -webkit-appearance: none;
       }
     }
+    input[type='number'] {
+      -moz-appearance: textfield;
+    }
   }
 </style>
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index 74aa70dedd..644e484a01 100644
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@@ -28,6 +28,7 @@
   export let isHeader: boolean = true
   export let isAside: boolean = true
   export let isFullSize: boolean = false
+  export let withoutTitle: boolean = false
 
   const dispatch = createEventDispatcher()
 
@@ -56,8 +57,8 @@
     checkPanel()
   }}
 >
-  <div class="popupPanel-title__bordered {twoRows ? 'flex-col flex-no-shrink' : 'flex-row-center'}">
-    <div class="popupPanel-title {twoRows ? 'row-top' : 'row'}">
+  <div class="popupPanel-title__bordered {twoRows && !withoutTitle ? 'flex-col flex-no-shrink' : 'flex-row-center'}">
+    <div class="popupPanel-title {twoRows && !withoutTitle ? 'row-top' : 'row'}">
       <Button
         icon={IconClose}
         kind={'transparent'}
@@ -68,7 +69,7 @@
       />
       {#if $$slots.navigator}<slot name="navigator" />{/if}
       <div class="popupPanel-title__content">
-        {#if !twoRows}<slot name="title" />{/if}
+        {#if !twoRows && !withoutTitle}<slot name="title" />{/if}
       </div>
       <div class="buttons-group xsmall-gap">
         <slot name="utils" />
@@ -98,7 +99,7 @@
         {/if}
       </div>
     </div>
-    {#if twoRows}
+    {#if twoRows && !withoutTitle}
       <div class="popupPanel-title row-bottom"><slot name="title" /></div>
     {/if}
   </div>
diff --git a/packages/ui/src/components/calendar/MonthSquare.svelte b/packages/ui/src/components/calendar/MonthSquare.svelte
index 2e1abf0875..32205dacae 100644
--- a/packages/ui/src/components/calendar/MonthSquare.svelte
+++ b/packages/ui/src/components/calendar/MonthSquare.svelte
@@ -80,6 +80,7 @@
 
       {#each [...Array(displayedWeeksCount).keys()] as weekIndex}
         {#each [...Array(7).keys()] as dayOfWeek}
+          {@const wrongM = weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek).getMonth() !== viewDate.getMonth()}
           <div
             class="day"
             class:weekend={isWeekend(weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek))}
@@ -87,9 +88,13 @@
             class:selected={currentDate &&
               weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek).getMonth() === currentDate.getMonth() &&
               areDatesEqual(currentDate, weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek))}
-            class:wrongMonth={weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek).getMonth() !== viewDate.getMonth()}
+            class:wrongMonth={wrongM}
             style={`grid-column-start: ${dayOfWeek + 1}; grid-row-start: ${weekIndex + 2};`}
-            on:click|stopPropagation={() => {
+            on:click|stopPropagation={(ev) => {
+              if (wrongM) {
+                ev.preventDefault()
+                return
+              }
               viewDate = weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek)
               if (currentDate) {
                 viewDate.setHours(currentDate.getHours())
@@ -194,6 +199,7 @@
       }
       &.wrongMonth {
         color: var(--dark-color);
+        cursor: default;
       }
       &.today {
         font-weight: 500;
@@ -201,8 +207,8 @@
         background-color: var(--button-bg-color);
         border-color: var(--dark-color);
       }
-      &.selected,
-      &:hover {
+      &.selected:not(.wrongMonth),
+      &:not(.wrongMonth):hover {
         color: var(--caption-color);
         background-color: var(--primary-bg-color);
       }
diff --git a/plugins/attachment-resources/src/components/FileBrowser.svelte b/plugins/attachment-resources/src/components/FileBrowser.svelte
index c49d0bfdde..08a6c7fac6 100644
--- a/plugins/attachment-resources/src/components/FileBrowser.svelte
+++ b/plugins/attachment-resources/src/components/FileBrowser.svelte
@@ -168,7 +168,7 @@
     overflow: auto;
     display: flex;
     flex-direction: column;
-    padding: 1rem 0;
+    padding: 1rem 0 1rem 0.5rem;
     height: 100%;
   }
 
diff --git a/plugins/attachment-resources/src/components/FileBrowserFilters.svelte b/plugins/attachment-resources/src/components/FileBrowserFilters.svelte
index 03dd97fe04..e63ee55bb0 100644
--- a/plugins/attachment-resources/src/components/FileBrowserFilters.svelte
+++ b/plugins/attachment-resources/src/components/FileBrowserFilters.svelte
@@ -73,6 +73,6 @@
   }
   .simpleFilterButton {
     max-width: 12rem;
-    margin-left: 0.75rem;
+    margin: 0.125rem 0.5rem 0.125rem 0;
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
index f9d83e33c5..43db074c03 100644
--- a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
@@ -178,6 +178,7 @@
     isAside={true}
     isSub={false}
     withoutActivity={isEditing}
+    withoutTitle
     bind:innerWidth
     on:close={() => dispatch('close')}
   >