Add MessageBox, fix UsersPopup (#258)

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

packages/presentation/src/components/MessageBox.svelte

@@ -0,0 +1,69 @@
+<!--
+// 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 type { IntlString } from '@anticrm/platform'
+  import { createEventDispatcher } from 'svelte'
+  import { Label, Button } from '@anticrm/ui'
+
+  export let label: IntlString
+  export let message: IntlString
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="msgbox-container">
+  <div class="overflow-label title"><Label {label} /></div>
+  <div class="message"><Label label={message} /></div>
+  <div class="footer">
+    <Button label={'Ok'} size={'small'} primary on:click={() => dispatch('close', 'OK')} />
+    <Button label={'Cancel'} size={'small'} on:click={() => dispatch('close', 'CANCEL')} />
+  </div>
+</div>
+
+<style lang="scss">
+  .msgbox-container {
+    display: flex;
+    flex-direction: column;
+    padding: 2rem 1.75rem 1.75rem;
+    background: var(--theme-msgbox-bg);
+    border-radius: 1.25rem;
+    user-select: none;
+    box-shadow: 0px 20px 70px rgba(0, 0, 0, .4);
+    backdrop-filter: blur(10px);
+
+    .title {
+      margin-bottom: 1rem;
+      font-weight: 500;
+      font-size: 1rem;
+      color: var(--theme-caption-color);
+    }
+    .message {
+      margin-bottom: 1.75rem;
+      color: var(--theme-content-accent-color);
+    }
+    .footer {
+      flex-shrink: 0;
+      display: grid;
+      grid-auto-flow: column;
+      direction: rtl;
+      justify-content: start;
+      align-items: center;
+      column-gap: .5rem;
+      // mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
+      // overflow: hidden;
+    }
+  }
+</style>

packages/presentation/src/components/UsersPopup.svelte

@@ -43,7 +43,7 @@
     <div class="caption"><Label label={caption} /></div>
   </div>
   <div class="scroll">
-    <div class="box">
+    <div class="flex-col box">
       {#each objects as person}
         <button class="menu-item" on:click={() => { dispatch('close', person) }}>
           <UserInfo size={'medium'} value={person} />

packages/presentation/src/index.ts

@@ -26,3 +26,4 @@ export { default as Card } from './components/Card.svelte'
 export { default as Channels } from './components/Channels.svelte'
 export { default as Backlink } from './components/Backlink.svelte'
 export { default as PDFViewer } from './components/PDFViewer.svelte'
+export { default as MessageBox } from './components/MessageBox.svelte'

packages/theme/styles/_colors.scss

@@ -77,6 +77,7 @@
   --theme-avatar-hover: radial-gradient(86.62% 86.62% at 50% 13.38%, rgba(196, 196, 204, 0.4) 0%, rgba(137, 140, 150, 0.4) 100%);
   --theme-avatar-border: rgba(255, 255, 255, .1);
   --theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
+  --theme-msgbox-bg: rgba(170, 170, 191, .25);
 
   --theme-bg-accent-color: rgba(255, 255, 255, .03);
   --theme-bg-accent-hover: rgba(255, 255, 255, .06);
@@ -146,6 +147,7 @@
   --theme-avatar-hover: radial-gradient(86.62% 86.62% at 50% 13.38%, rgba(196, 196, 204, 0.4) 0%, rgba(137, 140, 150, 0.4) 100%);
   --theme-avatar-border: rgba(255, 255, 255, .1);
   --theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
+  --theme-msgbox-bg: rgba(170, 170, 191, .25);
 
   --theme-bg-accent-color: rgba(255, 255, 255, .03);
   --theme-bg-accent-hover: rgba(255, 255, 255, .06);
@@ -214,6 +216,7 @@
   --theme-avatar-hover: #EEEDED;
   --theme-avatar-border: rgba(255, 255, 255, .7);
   --theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
+  --theme-msgbox-bg: rgba(170, 170, 191, .25);
 
   --theme-bg-accent-color: rgba(0, 0, 0, .03);
   --theme-bg-accent-hover: rgba(0, 0, 0, .05);

packages/ui/src/components/PopupInstance.svelte

@@ -28,6 +28,7 @@
   let modalHTML: HTMLElement
   let modalOHTML: HTMLElement
   let componentInstance: any
+  let show: boolean = false
 
   function close(result: any) {
     console.log('popup close result', result)
@@ -45,6 +46,7 @@
   const fitPopup = (): void => {
     if (modalHTML) {
       if (element) {
+        show = false
         modalHTML.style.left = modalHTML.style.right = modalHTML.style.top = modalHTML.style.bottom = ''
         if (typeof element !== 'string') {
           const rect = element.getBoundingClientRect()
@@ -77,6 +79,7 @@
         modalHTML.style.top = '50%'
         modalHTML.style.left = '50%'
         modalHTML.style.transform = 'translate(-50%, -50%)'
+        show = true
       }
     }
   }
@@ -88,7 +91,7 @@
 <div class="popup" bind:this={modalHTML} style={`z-index: ${zIndex + 1};`}>
   <svelte:component bind:this={componentInstance} this={is} {...props} on:update={fitPopup} on:close={ (ev) => close(ev.detail) } />
 </div>
-<div bind:this={modalOHTML} class="modal-overlay" style={`z-index: ${zIndex};`} on:click={() => escapeClose()} />
+<div bind:this={modalOHTML} class="modal-overlay" class:show style={`z-index: ${zIndex};`} on:click={() => escapeClose()} />
 
 <style lang="scss">
   .popup {
@@ -104,6 +107,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    // background: rgba(0, 0, 0, 0.25);
+    &.show { background: rgba(0, 0, 0, .5); }
   }
 </style>

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

@@ -22,7 +22,7 @@
   
   import type { Ref, Space, Client } from '@anticrm/core'
   import type { Application, NavigatorModel, ViewConfiguration } from '@anticrm/workbench'
-  import { setClient, Avatar } from '@anticrm/presentation'
+  import { setClient, Avatar, MessageBox } from '@anticrm/presentation'
   import workbench from '@anticrm/workbench'
 
   import Navigator from './Navigator.svelte'
@@ -79,7 +79,15 @@
     </div>
     {#if navigator}
     <div class="panel-navigator">
-      <NavHeader label={'Chat'}/>
+      <NavHeader label={'Chat'} action={() => {
+        showPopup(MessageBox, {
+                                label: 'Dialog title',
+                                message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor anem isto orem ipsum dolor sit amet?'
+                              }, undefined, (result) => {
+          if (result && result === 'OK') console.log('MessageBox - Ok!')
+          else console.log('MessageBox - Cancel')
+        })
+      }} />
       <Navigator model={navigatorModel}/>
     </div>
     {/if}