Fix Popup Position on default (#89)

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

packages/ui/src/components/Dialog copy.svelte

@@ -0,0 +1,113 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// 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 type { IntlString } from '@anticrm/platform'
+
+  import { createEventDispatcher } from 'svelte'
+
+  import Close from './internal/icons/Close.svelte'
+  import ScrollBox from './ScrollBox.svelte'
+  import Button from './Button.svelte'
+  import Label from './Label.svelte'
+
+  export let label: IntlString
+  export let okLabel: IntlString
+  export let okAction: () => void
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="dialog-container">
+  <form class="dialog" on:submit|preventDefault={() => { okAction(); dispatch('close') }}>
+    <div class="flex-between header">
+      <div class="title"><Label {label} /></div>
+      <div class="tool" on:click={() => { dispatch('close') }}><Close size={'small'} /></div>
+    </div>
+    <div class="content">
+      <ScrollBox vertical stretch><slot /></ScrollBox>
+    </div>
+    <div class="footer">
+      <Button label={okLabel} primary />
+      <Button label={'Cancel'} on:click={() => { dispatch('close') }} />
+    </div>
+  </form>
+</div>
+
+<style lang="scss">
+  .dialog-container {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    width: 100vw;
+    min-height: 100vh;
+    max-height: 100vh;
+
+    .dialog {
+      display: flex;
+      flex-direction: column;
+      width: 45rem;
+      min-height: 100vh;
+      max-height: 100vh;
+      background-color: var(--theme-bg-color);
+      border-radius: 1.875rem 0 0 1.875rem;
+      box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
+
+      .header {
+        flex-shrink: 0;
+        padding: 0 2rem 0 2.5rem;
+        height: 4.5rem;
+
+        .title {
+          flex-grow: 1;
+          font-weight: 500;
+          font-size: 1.125rem;
+          color: var(--theme-caption-color);
+          user-select: none;
+        }
+
+        .tool {
+          margin-left: .75rem;
+          opacity: .4;
+          cursor: pointer;
+          &:hover { opacity: 1; }
+        }
+      }
+
+      .content {
+        flex-shrink: 0;
+        flex-grow: 1;
+        // margin: 0 2.5rem;
+        height: fit-content;
+      }
+
+      .footer {
+        flex-shrink: 0;
+        display: grid;
+        grid-auto-flow: column;
+        direction: rtl;
+        justify-content: start;
+        align-items: center;
+        column-gap: .75rem;
+        padding: 0 2.5rem;
+        height: 6rem;
+        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
+        overflow: hidden;
+      }
+    }
+  }
+</style>

packages/ui/src/components/Dialog.svelte

@@ -31,84 +31,66 @@
   const dispatch = createEventDispatcher()
 </script>
 
-<div class="dialog-container">
+<form class="dialog" on:submit|preventDefault={() => { okAction(); dispatch('close') }}>
-  <form class="dialog" on:submit|preventDefault={() => { okAction(); dispatch('close') }}>
+  <div class="content">
-    <!-- <div class="flex-between header">
+    <ScrollBox vertical stretch><slot /></ScrollBox>
-      <div class="title"><Label {label} /></div>
+  </div>
-      <div class="tool" on:click={() => { dispatch('close') }}><Close size={'small'} /></div>
+  <div class="footer">
-    </div> -->
+    <Button label={okLabel} primary />
-    <div class="content">
+    <Button label={'Cancel'} on:click={() => { dispatch('close') }} />
-      <ScrollBox vertical stretch><slot /></ScrollBox>
+  </div>
-    </div>
+</form>
-    <div class="footer">
-      <Button label={okLabel} primary />
-      <Button label={'Cancel'} on:click={() => { dispatch('close') }} />
-    </div>
-  </form>
-</div>
 
 <style lang="scss">
-  .dialog-container {
+  .dialog {
-    position: relative;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    flex-direction: row-reverse;
+    width: 45rem;
-    width: 100vw;
+    height: 100%;
-    min-height: 100vh;
+    background-color: var(--theme-bg-color);
-    max-height: 100vh;
+    border-radius: 1.875rem;
+    box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
 
-    .dialog {
+    .header {
-      display: flex;
+      flex-shrink: 0;
-      flex-direction: column;
+      padding: 0 2rem 0 2.5rem;
-      margin-top: 100px;
+      height: 4.5rem;
-      width: 45rem;
-      min-height: calc(100vh - 100px);
-      max-height: calc(100vh - 100px);
-      background-color: var(--theme-bg-color);
-      border-radius: 1.875rem 0 0 1.875rem;
-      box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
 
-      .header {
+      .title {
-        flex-shrink: 0;
-        padding: 0 2rem 0 2.5rem;
-        height: 4.5rem;
-
-        .title {
-          flex-grow: 1;
-          font-weight: 500;
-          font-size: 1.125rem;
-          color: var(--theme-caption-color);
-          user-select: none;
-        }
-
-        .tool {
-          margin-left: .75rem;
-          opacity: .4;
-          cursor: pointer;
-          &:hover { opacity: 1; }
-        }
-      }
-
-      .content {
-        flex-shrink: 0;
         flex-grow: 1;
-        // margin: 0 2.5rem;
+        font-weight: 500;
-        height: fit-content;
+        font-size: 1.125rem;
+        color: var(--theme-caption-color);
+        user-select: none;
       }
 
-      .footer {
+      .tool {
-        flex-shrink: 0;
+        margin-left: .75rem;
-        display: grid;
+        opacity: .4;
-        grid-auto-flow: column;
+        cursor: pointer;
-        direction: rtl;
+        &:hover { opacity: 1; }
-        justify-content: start;
-        align-items: center;
-        column-gap: .75rem;
-        padding: 0 2.5rem;
-        height: 6rem;
-        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
-        overflow: hidden;
       }
     }
+
+    .content {
+      flex-shrink: 0;
+      flex-grow: 1;
+      // margin: 0 2.5rem;
+      height: fit-content;
+    }
+
+    .footer {
+      flex-shrink: 0;
+      display: grid;
+      grid-auto-flow: column;
+      direction: rtl;
+      justify-content: start;
+      align-items: center;
+      column-gap: .75rem;
+      padding: 0 2.5rem;
+      height: 6rem;
+      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
+      overflow: hidden;
+    }
   }
 </style>

packages/ui/src/components/Popup.svelte

@@ -48,17 +48,17 @@
         }
         if (rect.left > document.body.clientWidth - rect.right) {
           // style += 'left'
-          // modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
+          modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
-          modalHTML.style.right = '0px'
         } else {
           // style += 'right'
           modalHTML.style.left = rect.left + 'px'
         }
         // modalHTML.classList.add(style)
       } else {
-        modalHTML.style.top = '50%'
+        modalHTML.style.top = '16px'
-        modalHTML.style.left = '50%'
+        modalHTML.style.bottom = '16px'
-        modalHTML.style.transform = 'translate(-50%, -50%)'
+        modalHTML.style.right = '16px'
+        // modalHTML.style.transform = 'translateY(-50%)'
       }
     }
   }

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

@@ -19,7 +19,7 @@
   import type { Ref, Class, Doc, Space, FindOptions } from '@anticrm/core'
   import { buildModel } from '../utils'
   import { getClient } from '@anticrm/presentation'
-  import { Label, showModal, Loading, ScrollBox } from '@anticrm/ui'
+  import { Label, showPopup, Loading, ScrollBox } from '@anticrm/ui'
   import type { AnyComponent } from '@anticrm/ui'
 
   import { createQuery } from '@anticrm/presentation'
@@ -50,7 +50,7 @@
   const client = getClient()
 
   function onClick(object: Doc) {
-    showModal(open, { object, space })
+    showPopup(open, { object, space })
   }
 </script>