Fix Card footer (#178)

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

packages/presentation/src/components/Card.svelte

@@ -22,10 +22,8 @@
 
   // import Close from './internal/icons/Close.svelte'
   // import ScrollBox from './ScrollBox.svelte'
-  import { Button, Label, CircleButton } from '@anticrm/ui'
+  import { Button, Label } from '@anticrm/ui'
   import SpaceSelect from './SpaceSelect.svelte'
-  import Edit from './icons/Edit.svelte'
-  import Mail from './icons/Mail.svelte'
 
   export let spaceClass: Ref<Class<Space>>
   export let space: Ref<Space>
@@ -33,7 +31,6 @@
   export let okLabel: IntlString
   export let okAction: () => void
   export let canSave: boolean = false
-  export let contacts: boolean = true
 
   const dispatch = createEventDispatcher()
 </script>
@@ -45,17 +42,13 @@
     <div class="tool"><Button disabled={!canSave} label={okLabel} size={'small'} transparent on:click={() => { okAction(); dispatch('close') }} /></div>
   </div>
   <div class="content"><slot /></div>
-  <div class="flex-col pool" class:shrink={contacts}>
+  <div class="flex-col pool" class:shrink={$$slots.contacts}>
     <div class="separator" />
     <SpaceSelect _class={spaceClass} label={'Title'} placeholder={'Select Project'} bind:value={space} />
   </div>
-  {#if contacts}
+  {#if $$slots.contacts}
     <div class="flex-between contacts">
-      <div class="flex-row-center">
+      <slot name="contacts" />
-        <CircleButton icon={Mail} />
-        <CircleButton icon={Edit} />
-      </div>
-      <CircleButton icon={Edit} />
     </div>
   {/if}
 </form>
@@ -65,7 +58,9 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    width: 20rem;
     min-width: 20rem;
+    max-width: 20rem;
     border-radius: 1.25rem;
 
     .header {

packages/presentation/src/components/Channels.svelte

@@ -0,0 +1,188 @@
+<!--
+// 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 { Ref } from '@anticrm/core'
+  import type { IntlString, Asset } from '@anticrm/platform'
+  import type { Channel, ChannelProvider } from '@anticrm/contact'
+  import { getClient } from '..'
+
+  import { Icon } from '@anticrm/ui'
+  import IconCopy from './icons/Copy.svelte'
+
+  import contact from '@anticrm/contact'
+
+  export let value: Channel[] | null
+  export let size: 'small' | 'medium' = 'medium'
+  export let reverse: boolean = false
+
+  interface Item {
+    label: IntlString,
+    icon: Asset,
+    value: string
+  }
+
+  const client = getClient()
+
+  async function getProviders(): Promise<Map<Ref<ChannelProvider>, ChannelProvider>> {
+    const providers = await client.findAll(contact.class.ChannelProvider, {})
+    const map = new Map<Ref<ChannelProvider>, ChannelProvider>()
+    for (const provider of providers) { map.set(provider._id, provider) }
+    return map
+  }
+
+  async function update(value: Channel[]) {
+    const result = []
+    const map = await getProviders()
+    for (const item of value) {
+      const provider = map.get(item.provider)
+      if (provider) {
+        result.push({
+          label: provider.label as IntlString,
+          icon: provider.icon as Asset,
+          value: item.value,
+        })
+      } else {
+        console.log('provider not found: ', item.provider)
+      }
+    }
+    displayItems = result
+  }
+
+  $: if (value) update(value)
+
+  let displayItems: Item[] = []
+</script>
+
+<div class="container" class:reverse on:click|stopPropagation={() => {}}>
+  {#each displayItems as item}
+    <div class="circle list list-{size}">
+      <div class="icon" class:small={size === 'small'}>
+        <Icon icon={item.icon} size={'small'}/>
+      </div>
+    </div>
+    <div class="window">
+      <div class="circle circle-icon">
+        <div class="icon"><Icon icon={item.icon} size={'small'}/></div>
+      </div>
+      <div class="flex-grow flex-col caption-color">
+        <div class="overflow-label label">{item.label}</div>
+        <div class="overflow-label">{item.value}</div>
+      </div>
+      <div class="button" on:click|preventDefault={() => { alert('Copied: ' + item.value) }}>
+        <IconCopy size={'small'}/>
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    &.reverse { flex-direction: row-reverse; }
+
+    .circle {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 1px solid var(--theme-bg-focused-color);
+      border-radius: 50%;
+      cursor: pointer;
+
+      .small {
+        transform-origin: center center;
+        transform: scale(.75);
+        opacity: .4;
+      }
+
+      &-icon {
+        margin-right: .75rem;
+        width: 2.25rem;
+        height: 2.25rem;
+
+        .icon {
+          transform: none;
+          opacity: 1;
+        }
+      }
+    }
+
+    .list {
+      &:hover {
+        border-color: var(--theme-bg-focused-border);
+        z-index: 5;
+        .icon { opacity: 1; }
+        & + .window {
+          z-index: 4;
+          visibility: visible;
+        }
+        &::after { content: ''; }
+      }
+
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: -1rem;
+      }
+    }
+    .list-small {
+      margin-right: .25rem;
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+    .list-medium {
+      margin-right: .5rem;
+      width: 2rem;
+      height: 2rem;
+    }
+
+    .window {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem;
+      top: 2.25rem;
+      right: 0;
+      background-color: var(--theme-button-bg-focused);
+      border: 1px solid var(--theme-button-border-enabled);
+      border-radius: .75rem;
+      box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, .2);
+      visibility: hidden;
+
+      &:hover {
+        z-index: 4;
+        visibility: visible;
+      }
+    }
+  }
+  .label {
+    font-weight: 500;
+    font-size: .75rem;
+  }
+  .button {
+    margin-left: 1.5rem;
+    opacity: .4;
+    cursor: pointer;
+    &:hover { opacity: 1; }
+  }
+</style>

packages/presentation/src/index.ts

@@ -22,3 +22,4 @@ export { default as Avatar } from './components/Avatar.svelte'
 export { default as MessageViewer } from './components/MessageViewer.svelte'
 export { default as AttributeEditor } from './components/AttributeEditor.svelte'
 export { default as Card } from './components/Card.svelte'
+export { default as Channels } from './components/Channels.svelte'

packages/ui/src/components/CircleButton.svelte

@@ -48,7 +48,7 @@
       transform: scale(.75);
       pointer-events: none;
     }
-    &:hover { background-color: var(--theme-bg-accent-hover); }
+    &:hover { border-color: var(--theme-bg-focused-border); }
     &:active { background-color: var(--theme-bg-accent-color); }
   }
 </style>

plugins/contact-resources/src/components/ChannelsPresenter.svelte

@@ -15,164 +15,10 @@
 -->
 
 <script lang="ts">
-import type { Ref } from '@anticrm/core'
+  import type { Channel } from '@anticrm/contact'
-import type { IntlString, Asset } from '@anticrm/platform'
+  import { Channels } from '@anticrm/presentation'
-import type { Channel, ChannelProvider } from '@anticrm/contact'
-import { getClient } from '@anticrm/presentation'
-
-import { Icon } from '@anticrm/ui'
-import IconCopy from './icons/Copy.svelte'
-
-import contact from '@anticrm/contact'
-
-export let value: Channel[] | null
-
-interface Item {
-  label: IntlString,
-  icon: Asset,
-  value: string
-}
-
-const client = getClient()
-
-async function getProviders(): Promise<Map<Ref<ChannelProvider>, ChannelProvider>> {
-  const providers = await client.findAll(contact.class.ChannelProvider, {})
-  const map = new Map<Ref<ChannelProvider>, ChannelProvider>()
-  for (const provider of providers) { map.set(provider._id, provider) }
-  return map
-}
-
-async function update(value: Channel[]) {
-  const result = []
-  const map = await getProviders()
-  for (const item of value) {
-    const provider = map.get(item.provider)
-    if (provider) {
-      result.push({
-        label: provider.label as IntlString,
-        icon: provider.icon as Asset,
-        value: item.value,
-      })
-    } else {
-      console.log('provider not found: ', item.provider)
-    }
-  }
-  displayItems = result
-}
-
-$: if (value) update(value)
-
-let displayItems: Item[] = []
 
+  export let value: Channel[] | null
 </script>
 
-<div class="container" on:click|stopPropagation={() => {}}>
+<Channels {value} size={'small'} reverse />
-  {#each displayItems as item}
-    <div class="circle list">
-      <div class="icon"><Icon icon={item.icon} size={'small'}/></div>
-    </div>
-    <div class="window">
-      <div class="circle circle-icon">
-        <div class="icon"><Icon icon={item.icon} size={'small'}/></div>
-      </div>
-      <div class="flex-grow flex-col caption-color">
-        <div class="overflow-label label">{item.label}</div>
-        <div class="overflow-label">{item.value}</div>
-      </div>
-      <div class="button" on:click|preventDefault={() => { alert('Copied: ' + item.value) }}>
-        <IconCopy size={'small'}/>
-      </div>
-    </div>
-  {/each}
-</div>
-
-<style lang="scss">
-  .container {
-    position: relative;
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-
-    .circle {
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border: 1px solid var(--theme-bg-focused-color);
-      border-radius: 50%;
-      cursor: pointer;
-
-      .icon {
-        transform-origin: center center;
-        transform: scale(.75);
-        opacity: .4;
-      }
-
-      &-icon {
-        margin-right: .75rem;
-        width: 2.25rem;
-        height: 2.25rem;
-
-        .icon {
-          transform: none;
-          opacity: 1;
-        }
-      }
-    }
-
-    .list {
-      margin-right: .25rem;
-      width: 1.5rem;
-      height: 1.5rem;
-
-      &:hover {
-        border-color: var(--theme-bg-focused-border);
-        z-index: 5;
-        .icon { opacity: 1; }
-        & + .window {
-          z-index: 4;
-          visibility: visible;
-        }
-        &::after { content: ''; }
-      }
-
-      &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: -1rem;
-      }
-    }
-
-    .window {
-      position: absolute;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 1rem;
-      top: 2.25rem;
-      right: 0;
-      background-color: var(--theme-button-bg-focused);
-      border: 1px solid var(--theme-button-border-enabled);
-      border-radius: .75rem;
-      box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, .2);
-      visibility: hidden;
-
-      &:hover {
-        z-index: 4;
-        visibility: visible;
-      }
-    }
-  }
-  .label {
-    font-weight: 500;
-    font-size: .75rem;
-  }
-  .button {
-    margin-left: 1.5rem;
-    opacity: .4;
-    cursor: pointer;
-    &:hover { opacity: 1; }
-  }
-</style>

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

@@ -17,21 +17,25 @@
   import { createEventDispatcher } from 'svelte'
   import type { Ref, Space, Doc } from '@anticrm/core'
 
-  import { getClient, Card } from '@anticrm/presentation'
+  import { getClient, Card, Channels } from '@anticrm/presentation'
 
   import recruit from '../plugin'
   import chunter from '@anticrm/chunter'
   import type { Candidate } from '@anticrm/recruit'
   import type { Attachment } from '@anticrm/chunter'
 
-  import { EditBox, Link, showPopup, IconFile as FileIcon } from '@anticrm/ui'
+  import { EditBox, Link, showPopup, Component, CircleButton, IconFile as FileIcon } from '@anticrm/ui'
   import FileUpload from './icons/FileUpload.svelte'
   import Avatar from './icons/Avatar.svelte'
+  import Edit from './icons/Edit.svelte'
+  import SocialEditor from './SocialEditor.svelte'
   import PDFViewer from './PDFViewer.svelte'
   import Girl from '../../img/girl.png'
   import Elon from '../../img/elon.png'
   import Bond from '../../img/bond.png'
 
+  import equals from 'deep-equal'
+
   export let space: Ref<Space>
 
   const object: Candidate = {
@@ -86,6 +90,17 @@
 
   let inputFile: HTMLInputElement
   let kl: number = 0
+  let changed = false
+
+  function isChanged(): void {
+    for (const key in newValue) {
+      if (!equals((newValue as any)[key], (object as any)[key])) {
+        changed = true
+        return
+      }
+    }
+    changed = false
+  }
 </script>
 
 <!-- <DialogHeader {space} {object} {newValue} {resume} create={true} on:save={createCandidate}/> -->
@@ -111,9 +126,9 @@
     </div>
 
     <div class="flex-col">
-      <div class="name"><EditBox placeholder="Name*" /></div>
+      <div class="name"><EditBox placeholder="Name*" maxWidth="9.5rem"/></div>
-      <div class="name"><EditBox placeholder="Surname*" /></div>
+      <div class="name"><EditBox placeholder="Surname*" maxWidth="9.5rem" /></div>
-      <div class="city"><EditBox placeholder="Location" /></div>
+      <div class="city"><EditBox placeholder="Location" maxWidth="9.5rem" /></div>
       <div class="flex resume">
         {#if kl === 0}
           <a href={'#'} on:click={ () => { showPopup(PDFViewer, { file: resume.uuid }, 'right') } }>Upload resume</a>
@@ -124,12 +139,17 @@
       </div>
     </div>
   </div>
+  <svelte:fragment slot="contacts">
+    <Channels value={newValue.channels} />
+    <CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: newValue.channels ?? [] }, ev.target, (result) => { newValue.channels = result; isChanged() })} />
+  </svelte:fragment>
 </Card>
 
 <style lang="scss">
   @import '../../../../packages/theme/styles/mixins.scss';
 
   .avatar {
+    flex-shrink: 0;
     overflow: hidden;
     position: relative;
     display: flex;