Replace Modal with Popup (#119)

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

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

@@ -1,83 +0,0 @@
-<!--
-// Copyright © 2020 Anticrm Platform Contributors.
-//
-// Licensed under the Eclipse Public License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License. You may
-// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//
-// See the License for the specific language governing permissions and
-// limitations under the License.
--->
-<script lang="ts">
-  import { store as modal } from '@anticrm/ui'
-  import { Component } from '@anticrm/ui'
-
-  let modalHTML: HTMLElement
-  let modalOHTML: HTMLElement
-
-  function close () {
-    modalHTML.style.animationDirection = modalOHTML.style.animationDirection = 'reverse'
-    modalHTML.style.animationDuration = modalOHTML.style.animationDuration = '.2s'
-    modal.set({ is: undefined, props: {}, element: undefined })
-  }
-
-  function handleKeydown (ev: KeyboardEvent) {
-    if (ev.key === 'Escape' && $modal.is) {
-      close()
-    }
-  }
-  
-  function getStyle (element: HTMLElement | undefined) {
-    if (element) {
-      const rect = element.getBoundingClientRect()
-      return `top: ${rect.top + rect.height + 2}px; left: ${rect.left}px;`
-    } else {
-      return 'top: 50%; left: 50%; transform: translate(-50%, -50%);'
-    }
-  }
-</script>
-
-<svelte:window on:keydown={handleKeydown} />
-
-{#if $modal.is}
-  <div class="modal" class:top-arrow={$modal.element} bind:this={modalHTML} style={getStyle($modal.element)}>
-    {#if typeof($modal.is) === 'string'}
-      <Component is={$modal.is} props={$modal.props} on:close={close}/>
-    {:else}
-      <svelte:component this={$modal.is} {...$modal.props} on:close={close} />
-    {/if}
-  </div>
-  <div bind:this={modalOHTML} class="modal-overlay" />
-{/if}
-
-<style lang="scss">
-  @keyframes show {
-    from { opacity: 0; filter: blur(3px); }
-    99% { opacity: 1; filter: blur(0px); }
-    to { filter: none; }
-  }
-  @keyframes showOverlay {
-    from { backdrop-filter: blur(0px); }
-    to { backdrop-filter: blur(1px); }
-  }
-  .modal {
-    position: fixed;
-    background: transparent;
-    z-index: 1001;
-    animation: show .2s ease-in-out forwards;
-  }
-  .modal-overlay {
-    z-index: 1000;
-    background: rgba(0, 0, 0, .5);
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    animation: showOverlay .2s ease-in-out forwards;
-  }
-</style>

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

@@ -26,7 +26,6 @@
   import workbench from '@anticrm/workbench'
 
   import Navigator from './Navigator.svelte'
-  import Modal from './Modal.svelte'
   import SpaceHeader from './SpaceHeader.svelte'
   import SpaceView from './SpaceView.svelte'
   
@@ -92,7 +91,6 @@
     </div>
     <!-- <div class="aside"><Chat thread/></div> -->
   </div>
-  <Modal />
   <Popup />
 {:else}
   No client

plugins/workbench-resources/src/components/navigator/SpacesNav.svelte

@@ -23,7 +23,7 @@
 
   import { IconAdd } from '@anticrm/ui'
   import { getClient, createQuery } from '@anticrm/presentation'
-  import { showModal } from '@anticrm/ui'
+  import { showPopup } from '@anticrm/ui'
 
   import { classIcon } from '../../utils'
 
@@ -42,7 +42,7 @@
     label: model.addSpaceLabel,
     icon: IconAdd,
     action: async (): Promise<void> => {
-      showModal(model.createComponent, {})
+      showPopup(model.createComponent, {})
     }
   }