Fix Popup, Loading, DateRange animation (#1893)

packages/theme/styles/panel.scss

@@ -143,12 +143,10 @@
       &-content {
         display: flex;
         flex-direction: column;
-        flex-grow: 1;
         flex-shrink: 0;
         margin-left: auto;
         margin-right: auto;
         width: calc(100% - 7.5rem);
-        height: 100%;
         max-width: 860px;
       }
     }

packages/ui/src/components/Component.svelte

@@ -23,7 +23,7 @@
 
   export let is: AnyComponent
   export let props = {}
-  export let shrink: boolean = true
+  export let shrink: boolean = false
 
   $: component = is != null ? getResource(is) : Promise.reject(new Error('is not defined'))
 </script>

packages/ui/src/components/Loading.svelte

@@ -17,9 +17,14 @@
   import Spinner from './Spinner.svelte'
 
   export let shrink: boolean = false
+  export let label: string = ''
 </script>
 
-<div class="spinner-container" class:fullHeight={!shrink}><div class="inner"><Spinner /></div></div>
+<div class="spinner-container" class:fullSize={!shrink}>
+  <div data-label={label} class="inner" class:labeled={label !== ''}>
+    <Spinner />
+  </div>
+</div>
 
 <style lang="scss">
   .spinner-container {
@@ -27,7 +32,8 @@
     justify-content: center;
     align-items: center;
 
-    &.fullHeight {
+    &.fullSize {
+      width: 100%;
       height: 100%;
     }
   }
@@ -47,5 +53,21 @@
     animation-duration: 0.25s;
     animation-delay: 0.1s;
     animation-fill-mode: forwards;
+
+    &.labeled {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        content: attr(data-label);
+        bottom: -0.75rem;
+        left: 50%;
+        text-transform: uppercase;
+        font-weight: 500;
+        font-size: 0.5rem;
+        color: var(--dark-color);
+        transform: translateX(-50%);
+      }
+    }
   }
 </style>

packages/ui/src/components/PanelInstance.svelte

@@ -181,7 +181,7 @@
     background-color: transparent;
 
     &.anim {
-      will-change: top, bottom, left, right;
+      will-change: transform;
       transition-property: top, bottom, left, right, width, height;
       transition-duration: 0.15s;
       transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

packages/ui/src/components/PopupInstance.svelte

@@ -71,10 +71,10 @@
       if ((fullSize || docSize) && (element === 'float' || element === 'content')) {
         options = fitPopupElement(modalHTML, 'full')
         options.props.maxHeight = '100vh'
-        modalHTML.classList.add('fullsize')
+        if (!modalHTML.classList.contains('fullsize')) modalHTML.classList.add('fullsize')
       } else {
         options = fitPopupElement(modalHTML, element)
-        modalHTML.classList.remove('fullsize')
+        if (modalHTML.classList.contains('fullsize')) modalHTML.classList.remove('fullsize')
       }
       options.fullSize = fullSize
     }
@@ -142,7 +142,7 @@
     background-color: transparent;
 
     &.anim {
-      will-change: top, bottom, left, right;
+      will-change: transform;
       transition-property: top, bottom, left, right, width, height;
       transition-duration: 0.15s;
       transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

packages/ui/src/components/calendar/DateRangePopup.svelte

@@ -87,7 +87,7 @@
       flex-direction: column;
       padding: 0.5rem;
       top: 1rem;
-      right: calc(100% - 3.5rem);
+      right: calc(100% - 0.5rem);
       bottom: 1rem;
       width: fit-content;
       width: 12rem;
@@ -97,14 +97,11 @@
       border-radius: 0.5rem;
       box-shadow: var(--popup-shadow);
       z-index: -1;
-      transition: right 0.1s ease-in-out;
 
       .btn {
         flex-shrink: 0;
         margin-right: 0.75rem;
         padding: 0.25rem 0.5rem;
-        // font-weight: 500;
-        // color: var(--dark-color);
         background-color: transparent;
         border-radius: 0.25rem;
         cursor: pointer;
@@ -115,10 +112,6 @@
         }
       }
 
-      &:hover {
-        right: calc(100% - 0.5rem);
-      }
-
       .divider {
         margin: 0.25rem 0.75rem 0.25rem 0;
         height: 1px;

packages/ui/src/popups.ts

@@ -129,6 +129,7 @@ export function fitPopupPositionedElement (
   let direction: string = ''
   const rect = alignment.getBoundingClientRect()
   const rectPopup = modalHTML.getBoundingClientRect()
+  const docWidth = document.body.clientWidth
   newProps.left = newProps.right = newProps.top = newProps.bottom = ''
   newProps.maxHeight = newProps.height = ''
   newProps.maxWidth = newProps.width = ''
@@ -159,12 +160,15 @@ export function fitPopupPositionedElement (
     }
 
     // Horizontal
-    if (rect.left + rectPopup.width + 16 > document.body.clientWidth) {
-      newProps.right = `${document.body.clientWidth - rect.right}px`
-      direction += '|left'
-    } else {
+    if (rect.left + rectPopup.width + 16 <= docWidth) {
       newProps.left = `${rect.left}px`
       direction += '|right'
+    } else if (rect.right - rectPopup.width - 16 >= 0) {
+      newProps.right = `${docWidth - rect.right}px`
+      direction += '|left'
+    } else {
+      newProps.left = '1rem'
+      direction += '|center'
     }
   }
   return { props: newProps, showOverlay: false, direction }

plugins/attachment-resources/src/components/FileBrowser.svelte

@@ -24,7 +24,7 @@
     IconSearch,
     Label,
     navigate,
-    Spinner,
+    Loading,
     Tooltip
   } from '@anticrm/ui'
   import view from '@anticrm/view'
@@ -156,8 +156,8 @@
     <FileBrowserSortMenu bind:selectedSort />
   </div>
   {#if isLoading}
-    <div class="ml-4">
-      <Spinner />
+    <div class="flex-grow">
+      <Loading />
     </div>
   {:else if attachments?.length}
     {#if isListDisplayMode}
@@ -174,8 +174,11 @@
 
 <style lang="scss">
   .group {
-    padding: 1rem 0;
     overflow: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem 0;
+    height: 100%;
   }
 
   .groupHeader {

plugins/view-resources/src/components/Table.svelte

@@ -200,9 +200,7 @@
         </tr>
       </thead>
     {/if}
-    {#if loading > 0}
-      <Loading />
-    {:else if objects.length}
+    {#if objects.length}
       <tbody>
         {#each objects as object, row (object._id)}
           <tr
@@ -302,4 +300,5 @@
       </tbody>
     {/if}
   </table>
+  {#if loading > 0}<Loading />{/if}
 {/await}

plugins/workbench-resources/src/components/Workbench.svelte

@@ -397,7 +397,7 @@
         {#if currentApplication}
           <NavHeader label={currentApplication.label} />
           {#if currentApplication.navHeaderComponent}
-            <Component is={currentApplication.navHeaderComponent} props={{ currentSpace }} />
+            <Component is={currentApplication.navHeaderComponent} props={{ currentSpace }} shrink />
           {/if}
         {/if}
         <Navigator