Add AccountPopup

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

packages/theme/styles/_layouts.scss

@@ -243,15 +243,18 @@ a.no-line {
   &:active { color: var(--theme-content-accent-color); }
   &:visited { color: var(--theme-caption-color); }
 }
+.cursor-pointer { cursor: pointer; }
 
 /* Text */
+.small-text { font-size: .75rem; }
 .fs-title {
   font-weight: 500;
   font-size: 1rem;
   color: var(--theme-caption-color);
   user-select: none;
 }
-.fs-subtitle { font-size: .75rem; }
+.fs-bold { font-weight: 500; }
+
 .over-underline {
   cursor: pointer;
   &:hover { text-decoration: underline; }
@@ -269,7 +272,6 @@ a.no-line {
   overflow: hidden;
   user-select: none;
 }
-.small-text { font-size: .75rem; }
 
 .focused-button {
   background-color: var(--theme-button-bg-focused);

packages/ui/src/components/PopupInstance.svelte

@@ -69,6 +69,9 @@
           modalHTML.style.top = '4rem'
           modalHTML.style.bottom = '4rem'
           modalHTML.style.right = '4rem'
+        } else if (element === 'account') {
+          modalHTML.style.bottom = '2.75rem'
+          modalHTML.style.left = '5rem'
         } else if (element === 'full') {
           modalHTML.style.top = '0'
           modalHTML.style.bottom = '0'

packages/ui/src/types.ts

@@ -54,7 +54,7 @@ export interface Tab {
 
 export type TabModel = Tab[]
 
-export type PopupAlignment = HTMLElement | 'right' | 'float' | 'full'
+export type PopupAlignment = HTMLElement | 'right' | 'float' | 'account' | 'full'
 
 export type TooltipAligment = 'top' | 'bottom' | 'left' | 'right'
 

plugins/recruit-resources/src/components/CreateCandidate.svelte

@@ -142,8 +142,8 @@
     <div class="flex-col">
       <div class="fs-title"><EditBox placeholder="John" maxWidth="10rem" bind:value={firstName}/></div>
       <div class="fs-title mb-1"><EditBox placeholder="Appleseed" maxWidth="10rem" bind:value={lastName}/></div>
-      <div class="fs-subtitle"><EditBox placeholder="Title" maxWidth="10rem" bind:value={object.title}/></div>
+      <div class="small-text"><EditBox placeholder="Title" maxWidth="10rem" bind:value={object.title}/></div>
-      <div class="fs-subtitle"><EditBox placeholder="Location" maxWidth="10rem" bind:value={object.city}/></div>
+      <div class="small-text"><EditBox placeholder="Location" maxWidth="10rem" bind:value={object.city}/></div>
     </div>
   </div>
 

plugins/recruit-resources/src/components/KanbanCard.svelte

@@ -43,7 +43,7 @@
       <Avatar avatar={object.$lookup?.attachedTo?.avatar} size={'medium'} />
       <div class="flex-col ml-2">
         <div class="fs-title over-underline" on:click={showCandidate}><Label label={formatName(object.$lookup?.attachedTo?.name)} /></div>
-        <div class="fs-subtitle"><Label label={formatName(object.$lookup?.attachedTo?.title)} /></div>
+        <div class="small-text"><Label label={formatName(object.$lookup?.attachedTo?.title)} /></div>
       </div>
     </div>
     <ActionIcon label={'More...'} icon={IconMoreH} size={'small'} />

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

@@ -0,0 +1,87 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import { Label } from '@anticrm/ui'
+  import { Avatar } from '@anticrm/presentation'
+
+  let items: string[] = ['Settings', 'Integrations', 'Support', 'Privacy', 'Terms & policy', 'Sign out']
+</script>
+
+<div class="account-popup">
+  <div class="popup-bg" />
+  <div class="flex-row-center header">
+    <Avatar size={'medium'} />
+    <div class="ml-2 flex-col">
+      <div class="overflow-label fs-bold caption-color">User Name</div>
+      <div class="overflow-label small-text content-dark-color">rosamund.chen@gmail.com</div>
+    </div>
+  </div>
+  <div class="content">
+    {#each items as item }
+      <div class="item">{item}</div>
+    {/each}
+  </div>
+</div>
+
+<style lang="scss">
+  .account-popup {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 16rem;
+    min-width: 16rem;
+    max-width: 16rem;
+    border-radius: 1.25rem;
+
+    .header {
+      flex-shrink: 0;
+      margin: .75rem 1rem;
+    }
+
+    .content {
+      flex-shrink: 0;
+      flex-grow: 1;
+      margin: 0 .5rem 1rem;
+      height: fit-content;
+
+      .item {
+        padding: .5rem;
+        color: var(--theme-content-accent-color);
+        border-radius: .5rem;
+        cursor: pointer;
+
+        &:hover {
+          color: var(--theme-caption-color);
+          background-color: var(--theme-button-bg-focused);
+        }
+      }
+    }
+
+    .popup-bg {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: var(--theme-card-bg);
+      border-radius: 1.25rem;
+      backdrop-filter: blur(15px);
+      box-shadow: var(--theme-card-shadow);
+      z-index: -1;
+    }
+  }
+</style>

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

@@ -1,31 +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 { createEventDispatcher } from 'svelte'
-  import { TextArea, EditBox, Dialog, ToggleWithLabel, Grid } from '@anticrm/ui'
-
-</script>
-
-<div class="container">
-  Hello
-</div>
-
-<style lang="scss">
-  .container {
-    width: 100px;
-    height: 100px;
-  }
-</style>

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

@@ -31,7 +31,7 @@
   
   import { AnyComponent, location, Popup, showPopup, TooltipInstance } from '@anticrm/ui'
   import core from '@anticrm/core'
-  import CreateUser from './CreateUser.svelte'
+  import AccountPopup from './AccountPopup.svelte'
 
   export let client: Client
 
@@ -74,7 +74,9 @@
       <ActivityStatus status="active"/>
       <Applications active={currentApp}/>
       <div class="flex-center" style="min-height: 6.25rem;">
-        <div on:click={(el) => { showPopup(CreateUser, { }, el.target) }}><Avatar size={'medium'} /></div>
+        <div class="cursor-pointer" on:click={(el) => { showPopup(AccountPopup, { }, 'account') }}>
+          <Avatar size={'medium'} />
+        </div>
       </div>
     </div>
     {#if navigator}