Add SocialEditor (#113)

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

packages/ui/src/components/CircleButton.svelte

@@ -21,7 +21,7 @@
   export let icon: Asset | AnySvelteComponent
 </script>
 
-<div class="icon-button">
+<div class="icon-button" on:click>
   <div class="content">
     {#if typeof (icon) === 'string'}
       <Icon {icon} size={'small'}/>
@@ -46,6 +46,7 @@
     .content {
       transform-origin: center center;
       transform: scale(.75);
+      pointer-events: none;
     }
 
     &:hover {

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

@@ -19,13 +19,15 @@
   import type { Ref, Space, Doc } from '@anticrm/core'
   import { generateId } from '@anticrm/core'
 
-  import { EditBox, Button, CircleButton, Grid, Label, showModal, Link } from '@anticrm/ui'
+  import { EditBox, Button, CircleButton, Grid, Label, showModal, Link, showPopup } from '@anticrm/ui'
+  import type { AnyComponent } from '@anticrm/ui'
   import AvatarEditor from './AvatarEditor.svelte'
   import FileIcon from './icons/File.svelte'
   import FileUpload from './icons/FileUpload.svelte'
   import Edit from './icons/Edit.svelte'
   import Twitter from './icons/Twitter.svelte'
   import User from './icons/User.svelte'
+  import SocialEditor from './SocialEditor.svelte'
 
   import { uploadFile } from '../utils'
   import { Candidate } from '@anticrm/recruit'
@@ -124,7 +126,7 @@
   <div class="abs-rt-content">
     <Grid column={2} columnGap={.5}>
       <CircleButton icon={Twitter} label={'Twitter'} />
-      <CircleButton icon={Edit} label={'Edit'} />
+      <CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, {}, ev.target)} />
     </Grid>
   </div>
 </div>

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

@@ -0,0 +1,61 @@
+<!--
+// 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 { EditBox } from '@anticrm/ui'
+</script>
+
+<div class="popup">
+  <div class="popup-block">
+    <span>Contact</span>
+    <EditBox label={'Phone'} placeholder={'+7 (000) 000-00-00'} />
+    <EditBox label={'Email'} placeholder={'rosamund.chen@gmail.com'} />
+  </div>
+  <div class="popup-block">
+    <span>SOCIAL LINKS</span>
+    <EditBox label={'Twitter'} placeholder={'@rosychen'} />
+    <EditBox label={'Facebook'} placeholder={'facebook/rosamundch'} />
+  </div>
+</div>
+
+<style lang="scss">
+  .popup {
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem 1.25rem;
+    color: var(--theme-caption-color);
+    background-color: var(--theme-button-bg-hovered);
+    border: 1px solid var(--theme-button-border-enabled);
+    border-radius: .75rem;
+    box-shadow: 0px 1.25rem 3.75rem rgba(0, 0, 0, .6);
+
+    &-block {
+      display: grid;
+      grid-auto-flow: row;
+      row-gap: .75rem;
+
+      span {
+        font-weight: 600;
+        font-size: 0.625rem;
+        color: var(--theme-caption-color);
+        text-transform: uppercase;
+      }
+    }
+  }
+  .popup-block + .popup-block {
+    margin-top: 2rem;
+  }
+</style>