From 246a4b3b5ecf72d3cdd67ee8db36333b6aa42bc8 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Fri, 3 Sep 2021 16:59:05 +0300
Subject: [PATCH] Add Card component. Fix Popup. (#135)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/styles/_colors.scss            |  3 +
 packages/ui/src/components/Card.svelte        | 83 +++++++++++++++++
 packages/ui/src/components/Dialog.svelte      | 93 +++++++++----------
 .../ui/src/components/PopupInstance.svelte    |  7 +-
 packages/ui/src/index.ts                      |  1 +
 packages/ui/src/types.ts                      |  2 +-
 .../src/components/CreateApplication.svelte   | 27 +++---
 .../src/components/TableView.svelte           |  2 +-
 .../src/components/navigator/SpacesNav.svelte |  2 +-
 9 files changed, 151 insertions(+), 69 deletions(-)
 create mode 100644 packages/ui/src/components/Card.svelte

diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index d4ae85c3f0..e81693424a 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -65,6 +65,7 @@
   --theme-menu-divider: rgba(255, 255, 255, .05);
   --theme-scroll-bar: #2C2C34;
   --theme-bg-modal: #2C2B35;
+  --theme-card-bg: rgba(222, 222, 240, .2);
   --theme-border-modal: rgba(0, 0, 0, 0.2);
   --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
   --theme-chat-divider: rgb(36, 36, 41);
@@ -120,6 +121,7 @@
   --theme-menu-divider: rgba(255, 255, 255, .05);
   --theme-scroll-bar: #494852;
   --theme-bg-modal: #2C2B35;
+  --theme-card-bg: rgba(222, 222, 240, .2);
   --theme-border-modal: rgba(0, 0, 0, 0.2);
   --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
   --theme-chat-divider: rgb(66, 65, 76);
@@ -174,6 +176,7 @@
   --theme-menu-divider: rgba(0, 0, 0, .08);
   --theme-scroll-bar: #CBCBCB;
   --theme-bg-modal: #fff;
+  --theme-card-bg: rgba(255, 255, 255, .4);
   --theme-border-modal: rgba(0, 0, 0, 0.2);
   --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
   --theme-chat-divider: rgb(233, 233, 233);
diff --git a/packages/ui/src/components/Card.svelte b/packages/ui/src/components/Card.svelte
new file mode 100644
index 0000000000..06086339e6
--- /dev/null
+++ b/packages/ui/src/components/Card.svelte
@@ -0,0 +1,83 @@
+<!--
+// 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>
+
+<form class="card-container" on:submit|preventDefault={() => { okAction(); dispatch('close') }}>
+  <div class="card-bg" />
+  <div class="flex-between header">
+    <div class="overflow-label label"><Label {label} /></div>
+    <div class="tool"><Button label={okLabel} size={'small'} transparent on:click={() => { dispatch('close') }} /></div>
+  </div>
+  <div class="content"><slot /></div>
+</form>
+
+<style lang="scss">
+  .card-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    background-color: transparent;
+    border-radius: 1.25rem;
+    // box-shadow: 0 2rem 4.5rem rgba(0, 0, 0, .55);
+
+    .header {
+      flex-shrink: 0;
+      padding: 1rem 1.25rem 1rem 1.75rem;
+
+      .label {
+        font-weight: 500;
+        font-size: 1rem;
+        color: var(--theme-caption-color);
+      }
+      .tool { margin-left: .75rem; }
+    }
+
+    .content {
+      flex-shrink: 0;
+      flex-grow: 1;
+      margin: 0 1.75rem 1.75rem;
+      height: fit-content;
+    }
+
+    .card-bg {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: var(--theme-card-bg);
+      border-radius: 1.25rem;
+      z-index: -1;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/packages/ui/src/components/Dialog.svelte b/packages/ui/src/components/Dialog.svelte
index 75bf18d697..598df70096 100644
--- a/packages/ui/src/components/Dialog.svelte
+++ b/packages/ui/src/components/Dialog.svelte
@@ -48,66 +48,57 @@
 </div>
 
 <style lang="scss">
-  .dialog-container {
-    position: relative;
+  .dialog {
     display: flex;
-    justify-content: space-between;
-    flex-direction: row-reverse;
-    width: 100vw;
+    flex-direction: column;
+    width: 45rem;
+    height: 100vh;
     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);
 
-    .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;
 
-      .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;
+      .title {
         flex-grow: 1;
-        margin: 0 2.5rem;
-        height: fit-content;
+        font-weight: 500;
+        font-size: 1.125rem;
+        color: var(--theme-caption-color);
+        user-select: none;
       }
 
-      .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;
+      .tool {
+        margin-left: .75rem;
+        opacity: .4;
+        cursor: pointer;
+        &:hover { opacity: 1; }
       }
     }
+
+    .content {
+      flex-shrink: 0;
+      flex-grow: 1;
+      margin: 0 2.5rem;
+      height: max-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>
\ No newline at end of file
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index 1a6bac3825..758734184f 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/packages/ui/src/components/PopupInstance.svelte
@@ -50,6 +50,10 @@ $: {
           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'
@@ -76,6 +80,7 @@ $: {
   .popup {
     position: fixed;
     background-color: transparent;
+    backdrop-filter: blur(.5rem);
     filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .6));
   }
   .modal-overlay {
@@ -84,6 +89,6 @@ $: {
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.25);
+    // background: rgba(0, 0, 0, 0.25);
   }
 </style>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 31029db1d7..b9c68ac4f3 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -52,6 +52,7 @@ export { default as Loading } from './components/Loading.svelte'
 export { default as Popup } from './components/Popup.svelte'
 export { default as CircleButton } from './components/CircleButton.svelte'
 export { default as Link } from './components/Link.svelte'
+export { default as Card } from './components/Card.svelte'
 
 export { default as IconAdd } from './components/icons/Add.svelte'
 export { default as IconClose } from './components/icons/Close.svelte'
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 20dd740b20..54dadfc116 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -54,4 +54,4 @@ export interface Tab {
 
 export type TabModel = Tab[]
 
-export type PopupAlignment = HTMLElement | 'right'
+export type PopupAlignment = HTMLElement | 'right' | 'float'
diff --git a/plugins/recruit-resources/src/components/CreateApplication.svelte b/plugins/recruit-resources/src/components/CreateApplication.svelte
index bedbd22472..8adc1af02a 100644
--- a/plugins/recruit-resources/src/components/CreateApplication.svelte
+++ b/plugins/recruit-resources/src/components/CreateApplication.svelte
@@ -16,8 +16,8 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import type { Ref, Space } from '@anticrm/core'
-  import { DatePicker, EditBox, Dialog, Tabs, Section, Grid, Button } from '@anticrm/ui'
-  import { UserBox } from '@anticrm/presentation'
+  import { DatePicker, EditBox, Card, Tabs, Section, Grid, Row, Button } from '@anticrm/ui'
+  import { UserBox, UserInfo, Avatar } from '@anticrm/presentation'
   import type { Person } from '@anticrm/contact'
   import File from './icons/File.svelte'
   import Address from './icons/Address.svelte'
@@ -44,15 +44,14 @@
 
 </script>
 
-<!-- <Dialog label={'Create Application'} 
-        okLabel={'Create Application'} 
-        okAction={createCandidate}
-        on:close={() => { dispatch('close') }}> -->
-  <!-- <Section icon={File} label={'General Information'}> -->
-    <Button label="Save" on:click={createCandidate}/>
-    <Grid>
-      <UserBox _class={recruit.class.Candidate} title='Candidate' caption='Candidates' bind:value={candidate} show />
-      <DatePicker title={'Pick due date'} />
-    </Grid>
-  <!-- </Section> -->
-<!-- </Dialog> -->
+<Card label={'Create Application'} 
+      okLabel={'Save'} 
+      okAction={createCandidate}
+      on:close={() => { dispatch('close') }}>
+  <Grid rowGap={1.5}>
+    <Row><EditBox label={'Name'} placeholder={'John Connor'} /></Row>
+    <Row><UserInfo value={{firstName: 'First', lastName: 'Last', city: 'Cityvech'}} size={'large'} subtitle={'Candidate'} /></Row>
+    <UserBox _class={recruit.class.Candidate} title='Candidate' caption='Candidates' bind:value={candidate} />
+    <DatePicker title={'Pick due date'} />
+  </Grid>
+</Card>
diff --git a/plugins/view-resources/src/components/TableView.svelte b/plugins/view-resources/src/components/TableView.svelte
index a962826127..3f563c30fb 100644
--- a/plugins/view-resources/src/components/TableView.svelte
+++ b/plugins/view-resources/src/components/TableView.svelte
@@ -50,7 +50,7 @@
   const client = getClient()
 
   function onClick(object: Doc) {
-    showPopup(open, { object, space }, 'right')
+    showPopup(open, { object, space }, 'float')
   }
 </script>
 
diff --git a/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte b/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
index 94c289fa6c..1baf7183cc 100644
--- a/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
+++ b/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
@@ -42,7 +42,7 @@
     label: model.addSpaceLabel,
     icon: IconAdd,
     action: async (): Promise<void> => {
-      showPopup(model.createComponent, {})
+      showPopup(model.createComponent, {}, 'right')
     }
   }