Layout SpaceSelect (#169)

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

packages/presentation/src/components/Card.svelte

@@ -24,7 +24,6 @@
   // import ScrollBox from './ScrollBox.svelte'
   import Button from '@anticrm/ui/src/components/Button.svelte'
   import Label from '@anticrm/ui/src/components/Label.svelte'
-  import IconFolder from '@anticrm/ui/src/components/icons/Folder.svelte'
   import SpaceSelect from './SpaceSelect.svelte'
 
   export let spaceClass: Ref<Class<Space>>
@@ -45,12 +44,7 @@
   <div class="content"><slot /></div>
   <div class="flex-col pool">
     <div class="separator" />
-    <div class="overflow-label label">Project</div>
-    <div class="flex-row-center">
-      <span class="icon"><IconFolder size={'small'} /></span>
-      <span class="overflow-label">Select Project</span>
-    </div>
-    <SpaceSelect _class={spaceClass} title="Title" caption="Caption"/>
+    <SpaceSelect _class={spaceClass} label={'Title'} placeholder={'Select Project'} />
   </div>
 </form>
 
@@ -91,17 +85,6 @@
         background-color: #fff;
         opacity: .1;
       }
-      .label {
-        margin-bottom: .125rem;
-        font-weight: 500;
-        font-size: .75rem;
-        color: var(--theme-content-accent-color);
-      }
-      .icon {
-        transform-origin: center center;
-        transform: scale(.75);
-        margin-right: .25rem;
-      }
     }
 
     .card-bg {

packages/presentation/src/components/SpaceInfo.svelte

@@ -14,17 +14,17 @@
 -->
 
 <script lang="ts">
-  import Avatar from './Avatar.svelte'
+  import { IconFolder } from '@anticrm/ui'
 
   import type { Space } from '@anticrm/core'
 
   export let value: Space
   export let subtitle: string | undefined = undefined
-  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
+  export let size: 'medium' | 'large'
 </script>
 
 <div class="flex-row-center">
-  <Avatar {size} />
+  <div class="flex-center {size}"><IconFolder size={'small'} /></div>
   <div class="flex-col user-info">
     {#if subtitle}<div class="subtitle">{subtitle}</div>{/if}
     <div class="title">{value.name}</div>
@@ -32,6 +32,14 @@
 </div>
 
 <style lang="scss">
+  .medium {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+  .large {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
   .user-info {
     margin-left: .5rem;
     color: var(--theme-content-accent-color);

packages/presentation/src/components/SpaceSelect.svelte

@@ -17,17 +17,14 @@
   import type { IntlString } from '@anticrm/platform'
   import { getClient } from '../utils'
 
-  import { Label, showPopup } from '@anticrm/ui'
-  import Avatar from './Avatar.svelte'
+  import { Label, showPopup, IconFolder } from '@anticrm/ui'
   import SpacesPopup from './SpacesPopup.svelte'
-  import Add from './icons/Add.svelte'
-  import Close from './icons/Close.svelte'
 
   import type { Ref, Class, Space } from '@anticrm/core'
 
   export let _class: Ref<Class<Space>>
-  export let title: IntlString
-  export let caption: IntlString
+  export let label: IntlString
+  export let placeholder: IntlString
   export let value: Ref<Space>
   export let show: boolean = false
 
@@ -50,50 +47,47 @@
   })
 </script>
 
-<div class="flex-row-center">
-  <button
-    class="focused-button btn"
-    class:selected={show}
-    bind:this={btn}
-    on:click|preventDefault={(ev) => {
-      showPopup(SpacesPopup, { _class, title, caption }, ev.target, (result) => {
-        if (result) {
-          value = result._id
-        }
-      })
-    }}
-  >
-    {#if selected}
-      <Avatar size={'medium'} />
-    {:else}
-      <div class="icon">
-        {#if show}<Close size={'small'} />{:else}<Add size={'small'} />{/if}
-      </div>
-    {/if}
-  </button>
-
-  <div class="selectUser">
-    <div class="title"><Label label={title} /></div>
-    <div class="caption-color">
-      {#if selected}{selected.name}{:else}<Label label={'Not selected'} />{/if}
-    </div>
+<div class="flex-col spaceselect-container"
+  bind:this={btn}
+  on:click|preventDefault={() => {
+    showPopup(SpacesPopup, { _class }, btn, (result) => {
+      if (result) {
+        value = result._id
+      }
+    })
+  }}
+>
+  <div class="overflow-label label"><Label {label} /></div>
+  <div class="flex-row-center space" class:selected={selected}>
+    <span class="icon"><IconFolder size={'small'} /></span>
+    <span class="overflow-label">
+      {#if selected}
+        {selected.name}
+      {:else}
+        <Label label={placeholder} />
+      {/if}
+    </span>
   </div>
 </div>
 
 <style lang="scss">
-  .btn {
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: 50%;
-    border: none;
-  }
-
-  .selectUser {
-    margin-left: .75rem;
-    .title {
-      font-size: .75rem;
+  .spaceselect-container {
+    cursor: pointer;
+    .label {
+      margin-bottom: .125rem;
       font-weight: 500;
+      font-size: .75rem;
       color: var(--theme-content-accent-color);
     }
+    .space {
+      opacity: .3;
+
+      .icon {
+        transform-origin: center center;
+        transform: scale(.75);
+        margin-right: .25rem;
+      }
+      &.selected { opacity: 1; }
+    }
   }
 </style>

packages/presentation/src/components/SpacesPopup.svelte

@@ -23,8 +23,6 @@
   import { createQuery } from '../utils'
 
   export let _class: Ref<Class<Space>>
-  export let title: IntlString
-  export let caption: IntlString
 
   let search: string = ''
   let objects: Space[] = []
@@ -35,14 +33,13 @@
 </script>
 
 <div class="popup">
-  <div class="header">
-    <div class="title"><Label label={title} /></div>
+  <div class="flex-col">
     <EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
-    <div class="caption"><Label label={caption} /></div>
+    <div class="label"><Label label={'SUGGESTED'} /></div>
   </div>
   {#each objects as space}
     <button class="menu-item" on:click={() => { dispatch('close', space) }}>
-      <SpaceInfo size={'medium'} value={space} />
+      <SpaceInfo size={'large'} value={space} />
     </button>
   {/each}
 </div>
@@ -57,22 +54,15 @@
     border: 1px solid var(--theme-button-border-enabled);
     border-radius: .75rem;
     user-select: none;
+    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .35));
   }
 
-  .header {
-    text-align: left;
-    .title {
-      margin-bottom: 1rem;
-      font-weight: 500;
-      color: var(--theme-caption-color);
-    }
-    .caption {
-      margin: 1rem 0 .625rem .375rem;
-      font-size: .75rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      color: var(--theme-content-dark-color);
-    }
+  .label {
+    margin: 1rem 0 .625rem .375rem;
+    font-size: .75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--theme-content-dark-color);
   }
 
   .menu-item {

packages/presentation/src/components/UsersPopup.svelte

@@ -58,6 +58,7 @@
     border: 1px solid var(--theme-button-border-enabled);
     border-radius: .75rem;
     user-select: none;
+    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .35));
   }
 
   .header {