Add arrow for sort. Modify Popup locations. (#235)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/presentation/src/components/UsersPopup.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
-  import { createEventDispatcher } from 'svelte'
+  import { afterUpdate, createEventDispatcher } from 'svelte'
 
   import { Label, EditWithIcon, IconSearch } from '@anticrm/ui'
   import UserInfo from './UserInfo.svelte'
@@ -34,6 +34,8 @@
   const dispatch = createEventDispatcher()
   const query = createQuery()
   $: query.query(_class, { name: { $like: '%'+search+'%' } }, result => { objects = result })
+
+  afterUpdate(() => { dispatch('update', true) })
 </script>
 
 <div class="popup" style="max-height: {(maxHeight) ? maxHeight + 'px' : 'max-content'}">

packages/ui/src/components/PopupInstance.svelte

@@ -15,80 +15,87 @@
 -->
 
 <script lang="ts">
-import type { AnySvelteComponent, AnyComponent, PopupAlignment } from '../types'
-import { closePopup } from '..'
+  import { afterUpdate, onMount } from 'svelte'
+  import type { AnySvelteComponent, AnyComponent, PopupAlignment } from '../types'
+  import { closePopup } from '..'
 
-export let is: AnyComponent | AnySvelteComponent
-export let props: object
-export let element: PopupAlignment | undefined
-export let onClose: ((result: any) => void) | undefined
-export let zIndex: number
+  export let is: AnyComponent | AnySvelteComponent
+  export let props: object
+  export let element: PopupAlignment | undefined
+  export let onClose: ((result: any) => void) | undefined
+  export let zIndex: number
 
-let modalHTML: HTMLElement
-let modalOHTML: HTMLElement
-let maxHeight: number = 0
+  let modalHTML: HTMLElement
+  let modalOHTML: HTMLElement
+  let maxHeight: number = 0
 
-function close(result: any) {
-  console.log('popup close result', result)
-  if (onClose !== undefined) onClose(result)
-  closePopup()
-}
+  function close(result: any) {
+    console.log('popup close result', result)
+    if (onClose !== undefined) onClose(result)
+    closePopup()
+  }
 
-$: {
-  if (modalHTML) {
-    if (element) {
-      maxHeight = 0
-      if (typeof element !== 'string') {
-        const rect = element.getBoundingClientRect()
-        const rectPopup = modalHTML.getBoundingClientRect()
-        if (rect.bottom + rectPopup.height + 28 < document.body.clientHeight) {
-          modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
-          maxHeight = document.body.clientHeight - rect.bottom - 28
-        } else if (rect.top > document.body.clientHeight - rect.bottom) {
-          modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.y}px + .75rem)`
-          maxHeight = rect.top - 28
-        } else {
-          modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
-          maxHeight = document.body.clientHeight - rect.bottom - 28
+  const fitPopup = (): void => {
+    if (modalHTML) {
+      if (element) {
+        maxHeight = 0
+        modalHTML.style.left = modalHTML.style.right = modalHTML.style.top = modalHTML.style.bottom = ''
+        if (typeof element !== 'string') {
+          const rect = element.getBoundingClientRect()
+          const rectPopup = modalHTML.getBoundingClientRect()
+          if (rect.bottom + rectPopup.height + 28 <= document.body.clientHeight) {
+            modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
+            maxHeight = document.body.clientHeight - rect.bottom - 28
+          } else if (rectPopup.height + 28 < rect.top) {
+            modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.y}px + .75rem)`
+            maxHeight = rect.top - 28
+          } else {
+            modalHTML.style.top = modalHTML.style.bottom = '1rem'
+            maxHeight = document.body.clientHeight - 32
+          }
+          
+          if (rect.left + rectPopup.width + 16 > document.body.clientWidth) {
+            modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
+          } else {
+            modalHTML.style.left = rect.left + 'px'
+          }
+        } else if (element === 'right') {
+          modalHTML.style.top = '0'
+          modalHTML.style.bottom = '0'
+          modalHTML.style.right = '0'
+        } else if (element === 'float') {
+          modalHTML.style.top = '4rem'
+          modalHTML.style.bottom = '4rem'
+          modalHTML.style.right = '4rem'
+        } else if (element === 'full') {
+          modalHTML.style.top = '0'
+          modalHTML.style.bottom = '0'
+          modalHTML.style.left = '0'
+          modalHTML.style.right = '0'
         }
-        if (rect.left + rectPopup.width + 16 > document.body.clientWidth) {
-          modalHTML.style.left = ''
-          modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
-        } else {
-          modalHTML.style.left = rect.left + 'px'
-          modalHTML.style.right = ''
-        }
-      } else if (element === 'right') {
-        modalHTML.style.top = '0'
-        modalHTML.style.bottom = '0'
-        modalHTML.style.right = '0'
-      } else if (element === 'float') {
-        modalHTML.style.top = '4rem'
-        modalHTML.style.bottom = '4rem'
-        modalHTML.style.right = '4rem'
-      } else if (element === 'full') {
-        modalHTML.style.top = '0'
-        modalHTML.style.bottom = '0'
-        modalHTML.style.left = '0'
-        modalHTML.style.right = '0'
+      } else {
+        modalHTML.style.top = '50%'
+        modalHTML.style.left = '50%'
+        modalHTML.style.transform = 'translate(-50%, -50%)'
       }
-    } else {
-      modalHTML.style.top = '50%'
-      modalHTML.style.left = '50%'
-      modalHTML.style.transform = 'translate(-50%, -50%)'
     }
   }
-}
+
+  afterUpdate(() => { fitPopup() })
 </script>
 
+<svelte:window on:scroll={fitPopup} on:resize={fitPopup} />
 <div class="popup" bind:this={modalHTML} style={`z-index: ${zIndex + 1};`}>
-  <svelte:component this={is} {...props} {maxHeight} on:close={ (ev) => close(ev.detail) } />
+  <svelte:component this={is} {...props} {maxHeight} on:close={ (ev) => close(ev.detail) } on:update={fitPopup} />
 </div>
 <div bind:this={modalOHTML} class="modal-overlay" style={`z-index: ${zIndex};`} on:click={() => close(undefined)} />
 
 <style lang="scss">
   .popup {
     position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     background-color: transparent;
   }
   .modal-overlay {

packages/ui/src/index.ts

@@ -71,6 +71,8 @@ export { default as IconAttachment } from './components/icons/Attachment.svelte'
 export { default as IconThread } from './components/icons/Thread.svelte'
 export { default as IconExpand } from './components/icons/Expand.svelte'
 export { default as IconActivity } from './components/icons/Activity.svelte'
+export { default as IconUp } from './components/icons/Up.svelte'
+export { default as IconDown } from './components/icons/Down.svelte'
 
 export * from './utils'
 

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

@@ -20,7 +20,7 @@
   import { SortingOrder } from '@anticrm/core'
   import { buildModel } from '../utils'
   import { getClient } from '@anticrm/presentation'
-  import { Label, showPopup, Loading, ScrollBox, CheckBox } from '@anticrm/ui'
+  import { Label, showPopup, Loading, ScrollBox, CheckBox, IconDown, IconUp } from '@anticrm/ui'
   import MoreV from './icons/MoreV.svelte'
   import Menu from './Menu.svelte'
 
@@ -100,15 +100,19 @@
                 </div>
               </th>
             {/if}
-            <th on:click={() => changeSorting(attribute.key)}>
-              <Label label = {attribute.label}/>
-              {#if attribute.key === sortKey}
-                {#if sortOrder === SortingOrder.Ascending}
-                  ^
-                {:else}
-                  v
+            <th class="sortable" class:sorted={attribute.key === sortKey} on:click={() => changeSorting(attribute.key)}>
+              <div class="flex-row-center">
+                <Label label = {attribute.label}/>
+                {#if attribute.key === sortKey}
+                  <div class="icon">
+                    {#if sortOrder === SortingOrder.Ascending}
+                      <IconUp size={'small'} />
+                    {:else}
+                      <IconDown size={'small'} />
+                    {/if}
+                  </div>
                 {/if}
-              {/if}
+              </div>
             </th>
           {/each}
         </tr>
@@ -185,8 +189,14 @@
     color: var(--theme-content-dark-color);
     background-color: var(--theme-bg-color);
     box-shadow: inset 0 -1px 0 0 var(--theme-bg-focused-color);
+    user-select: none;
     z-index: 5;
 
+    &.sortable { cursor: pointer; }
+    &.sorted .icon {
+      margin-left: .25rem;
+      opacity: .6;
+    }
     .checkall { visibility: visible; }
   }