Fix UI: DatePopup, Panel, PDFViewer. Adapting to Firefox. (#2331)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2025-04-25 09:50:19 +00:00 · 2022-10-27 06:56:21 +03:00 · 2022-10-27 06:56:21 +03:00 · fc4230c9cf
commit fc4230c9cf
parent ef65f3aee9
10 changed files with 59 additions and 31 deletions
--- 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">
--- 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>
--- 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);
--- 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;
--- 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>
--- 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>
--- 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);
      }
--- 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%;
  }

--- 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>
--- 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')}
  >