From a9f2e54e42896a0d970f70aa016501d5d1c403bb Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 27 Oct 2021 17:18:00 +0300
Subject: [PATCH] Fix layout for CreateCandidate (#289)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/styles/_layouts.scss           |   2 +
 .../src/components/CreateCandidate.svelte     | 103 +++++++++++-------
 2 files changed, 63 insertions(+), 42 deletions(-)

diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 29a8e54ab5..5f9e52df43 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -161,6 +161,8 @@ table {
 .step-tb75 + .step-tb75 { margin-top: .75rem; }
 
 .ml-2 { margin-left: .5rem; }
+.mt-5 { margin-top: 1.25rem; }
+.mb-1 { margin-bottom: .25rem; }
 
 /* --------- */
 .relative { position: relative; }
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index 62412f5158..dde30cef6c 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -28,7 +28,7 @@
   import type { Candidate } from '@anticrm/recruit'
   import type { Attachment } from '@anticrm/chunter'
 
-  import { EditBox, Link, showPopup, Component, CircleButton, IconFile as FileIcon, Spinner, Label, Status as StatusComponent } from '@anticrm/ui'
+  import { EditBox, Link, showPopup, Component, CircleButton, IconFile as FileIcon, IconAdd, Spinner, Label, Status as StatusComponent } from '@anticrm/ui'
   import FileUpload from './icons/FileUpload.svelte'
   import Avatar from './icons/Avatar.svelte'
   import Edit from './icons/Edit.svelte'
@@ -133,6 +133,11 @@
     if (file !== undefined) { createAttachment(file) }
   }
 
+  function saveChannels(result: any) {
+    object.channels = result
+    client.updateDoc(recruit.class.Candidate, object.space, object._id, { channels: result })
+  }
+
   let kl: number = 0
 </script>
 
@@ -166,44 +171,56 @@
         {#if kl === 0}
           <Avatar />
         {:else if kl === 1}
-          <img src={Girl} alt="Avatar" />
+          <img width="100%" src={Girl} alt="Avatar" />
         {:else if kl === 2}
-          <img src={Elon} alt="Avatar" />
+          <img width="100%" src={Elon} alt="Avatar" />
         {:else}
-          <img src={Bond} alt="Avatar" />
+          <img width="100%" src={Bond} alt="Avatar" />
         {/if}
       </div>
     </div>
 
     <div class="flex-col">
-      <div class="name"><EditBox placeholder="John" maxWidth="9.5rem" bind:value={firstName}/></div>
-      <div class="name"><EditBox placeholder="Appleseed" maxWidth="9.5rem" bind:value={lastName}/></div>
-      <div class="title"><EditBox placeholder="Title" maxWidth="9.5rem" bind:value={object.title}/></div>
-      <div class="city"><EditBox placeholder="Location" maxWidth="9.5rem" bind:value={object.city}/></div>
-      <!-- <div class="flex resume">
-        {#if resume.uuid}
-          <Link label={resume.name} href={'#'} icon={FileIcon} maxLenght={16} on:click={ () => { showPopup(PDFViewer, { file: resume.uuid }, 'right') } }/>
-        {:else}
-          {#if loading}
-            <Link label={'Uploading...'} href={'#'} icon={Spinner} disabled />
-          {:else}
-            <Link label={'Upload resume'} href={'#'} icon={FileUpload} on:click={ () => { inputFile.click() } } />
-          {/if}
-          <input bind:this={inputFile} type="file" name="file" id="file" style="display: none" on:change={fileSelected}/>
-        {/if}
-      </div> -->
+      <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="fs-subtitle"><EditBox placeholder="Location" maxWidth="10rem" bind:value={object.city}/></div>
     </div>
   </div>
+
+  <div class="flex-row-center channels">
+    {#if !object.channels || object.channels.length === 0}
+      <CircleButton icon={IconAdd} size={'small'} selected on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
+      <span><Label label={'Add social links'} /></span>
+    {:else}
+      <Channels value={object.channels} size={'small'} />
+      <CircleButton icon={Edit} size={'small'} selected on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
+    {/if}
+  </div>
+
+  <div class="flex-center resume" class:solid={resume.uuid}>
+    {#if resume.uuid}
+      <Link label={resume.name} href={'#'} icon={FileIcon} maxLenght={16} on:click={ () => { showPopup(PDFViewer, { file: resume.uuid }, 'right') } }/>
+    {:else}
+      {#if loading}
+        <Link label={'Uploading...'} href={'#'} icon={Spinner} disabled />
+      {:else}
+        <Link label={'Add or drop resume'} href={'#'} icon={FileUpload} on:click={ () => { inputFile.click() } } />
+      {/if}
+      <input bind:this={inputFile} type="file" name="file" id="file" style="display: none" on:change={fileSelected}/>
+    {/if}
+  </div>
+
   <div class="separator" />
   <div class="flex-col locations">
     <span><Label label={'Work location preferences'} /></span>
     <div class="row"><Label label={'Onsite'} /><YesNo bind:value={object.onsite} /></div>
     <div class="row"><Label label={'Remote'} /><YesNo bind:value={object.remote} /></div>
   </div>
-  <svelte:fragment slot="contacts">
+  <!-- <svelte:fragment slot="contacts">
     <Channels value={object.channels} />
     <CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { object.channels = result })} />
-  </svelte:fragment>
+  </svelte:fragment> -->
 </Card>
 
 <style lang="scss">
@@ -213,26 +230,25 @@
     flex-shrink: 0;
     position: relative;
     margin-right: 1rem;
-    width: 6rem;
-    height: 6rem;
+    width: 4.5rem;
+    height: 4.5rem;
     user-select: none;
   }
   .avatar-shadow {
     position: absolute;
-    width: 6rem;
-    height: 6rem;
+    width: 4.5rem;
+    height: 4.5rem;
 
     .bg-avatar {
-      transform: scale(1.1);
       filter: blur(10px);
-      opacity: .75;
+      opacity: .25;
     }
   }
   .avatar {
     overflow: hidden;
     position: absolute;
-    width: 6rem;
-    height: 6rem;
+    width: 4.5rem;
+    height: 4.5rem;
     border-radius: 50%;
     filter: var(--theme-avatar-shadow);
     cursor: pointer;
@@ -255,20 +271,12 @@
     }
   }
 
-  .name {
-    font-weight: 500;
-    font-size: 1.25rem;
-    color: var(--theme-caption-color);
+  .channels {
+    margin-top: 1.25rem;
+    span { margin-left: .5rem; }
   }
-  .title, .city {
-    font-weight: 500;
-    font-size: .75rem;
-    color: var(--theme-content-accent-color);
-  }
-  .title { margin-top: .5rem; }
+
   .locations {
-    margin-top: 1.5rem;
-    
     span {
       margin-bottom: .125rem;
       font-weight: 500;
@@ -284,11 +292,22 @@
       color: var(--theme-caption-color);
     }
   }
+
   .separator {
     margin: 1rem 0;
     height: 1px;
     background-color: var(--theme-card-divider);
   }
+
+  .resume {
+    margin-top: 1rem;
+    padding: .75rem;
+    background: rgba(255, 255, 255, .05);
+    border: 1px dashed rgba(255, 255, 255, .2);
+    border-radius: .5rem;
+    backdrop-filter: blur(10px);
+    &.solid { border-style: solid; }
+  }
   // .resume a {
   //   font-size: .75rem;
   //   color: var(--theme-content-dark-color);