Update Card layout (#257)

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

packages/presentation/src/components/Card.svelte

@@ -31,6 +31,7 @@
   export let spacePlaceholder: IntlString
   export let label: IntlString
   export let okLabel: IntlString
+  export let cancelLabel: IntlString
   export let okAction: () => void
   export let canSave: boolean = false
 
@@ -41,23 +42,21 @@
   <div class="card-bg" />
   <div class="flex-between header">
     <div class="overflow-label label"><Label {label} /></div>
-    <div class="tool"><Button disabled={!canSave} label={okLabel} size={'small'} transparent on:click={() => { okAction(); dispatch('close') }} /></div>
+    {#if $$slots.error}
+      <div class="error">
+        <slot name="error" />
+      </div>
+    {/if}
   </div>
-  {#if $$slots.error}
-    <div class="flex-center error">
-      <slot name="error" />
-    </div>
-  {/if}
   <div class="content"><slot /></div>
-  <div class="flex-col pool" class:shrink={$$slots.contacts}>
+  <div class="flex-col pool">
     <div class="separator" />
     <SpaceSelect _class={spaceClass} label={spaceLabel} placeholder={spacePlaceholder} bind:value={space} />
   </div>
-  {#if $$slots.contacts}
-    <div class="flex-between contacts">
-      <slot name="contacts" />
-    </div>
-  {/if}
+  <div class="footer">
+    <Button disabled={!canSave} label={okLabel} size={'small'} transparent primary on:click={() => { okAction(); dispatch('close') }} />
+    <Button label={cancelLabel} size={'small'} transparent on:click={() => { dispatch('close') }} />
+  </div>
 </form>
 
 <style lang="scss">
@@ -71,25 +70,28 @@
     border-radius: 1.25rem;
 
     .header {
+      position: relative;
       flex-shrink: 0;
-      padding: 1rem 1.25rem 1rem 1.75rem;
+      padding: 1.75rem;
+
       .label {
         font-weight: 500;
         font-size: 1rem;
         color: var(--theme-caption-color);
       }
-      .tool { margin-left: .75rem; }
-    }
 
-    .error {
-      margin-bottom: 1rem;
-      padding: .75rem 0;
-      color: var(--system-error-color);
-      background-color: var(--theme-card-bg-accent);
-      &:empty {
-        visibility: hidden;
-        margin: 0;
-        padding: 0;
+      .error {
+        position: absolute;
+        top: 3.25rem;
+        left: 1.75rem;
+        right: 1.75rem;
+        font-weight: 500;
+        font-size: .75rem;
+        color: var(--system-error-color);
+        &:empty { visibility: hidden; }
+        &::-webkit-scrollbar:horizontal {
+          height: 2px;
+        }
       }
     }
 
@@ -101,19 +103,27 @@
     }
 
     .pool {
-      margin: 0 1.75rem 1.5rem;
+      margin: 0 1.75rem .75rem;
       color: var(--theme-caption-color);
       .separator {
         margin: 1rem 0;
         height: 1px;
         background-color: var(--theme-card-divider);
       }
-      &.shrink { margin: 0 1.75rem 1rem; }
     }
 
-    .contacts {
-      padding: 1.25rem 1.75rem;
-      background-color: var(--theme-card-bg-accent);
+    .footer {
+      flex-shrink: 0;
+      display: grid;
+      grid-auto-flow: column;
+      direction: rtl;
+      justify-content: start;
+      align-items: center;
+      column-gap: .75rem;
+      padding: 1rem 1.75rem 1.75rem;
+      height: 5.25rem;
+      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
+      overflow: hidden;
       border-radius: 0 0 1.25rem 1.25rem;
     }
 

packages/theme/styles/_colors.scss

@@ -26,10 +26,10 @@
   --primary-button-border: rgba(255, 255, 255, .09);
 
   --trans-primary-button-color: #fff;
-  --trans-primary-button-bg: rgba(255, 255, 255, .2);
-  --trans-primary-button-border: rgba(255, 255, 255, .2);
-  --trans-primary-button-bg-hovered: rgba(255, 255, 255, .25);
-  --trans-primary-button-border-hovered: rgba(255, 255, 255, .25);
+  --trans-primary-button-bg: #4474F6;
+  --trans-primary-button-border: transparent;
+  --trans-primary-button-bg-hovered: #2A5FF6;
+  --trans-primary-button-border-hovered: transparent;
   
   --trans-button-color: #fff;
   --trans-button-bg: transparent;

packages/ui/src/components/Button.svelte

@@ -160,7 +160,7 @@
         box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
       }
       &:disabled {
-        background-color: var(--trans-primary-button-bg);
+        background-color: var(--primary-button-disabled);
         border-color: var(--trans-primary-button-border);
       }
     }

packages/ui/src/components/Status.svelte

@@ -8,10 +8,10 @@
   export let status: Status
 </script>
 
-<div class="flex-center container {status.severity}">
+<div class="flex-center overflow-label container {status.severity}">
   {#if status.severity !== Severity.OK}
     <Info size={'small'}/>
-    <span><Label label={status.code} params={status.params}/></span>
+    <div class="overflow-label"><Label label={status.code} params={status.params}/></div>
   {/if}
 </div>
 
@@ -19,7 +19,7 @@
   .container {
     user-select: none;
     color: var(--theme-content-color);
-    span { margin-left: .75em; }
+    div { margin-left: .75em; }
     &.WARNING { color: yellow; }
     &.ERROR { color: var(--system-error-color); }
   }

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

@@ -17,7 +17,8 @@
   import { createEventDispatcher } from 'svelte'
   import type { Ref, Space, Data } from '@anticrm/core'
   import { generateId } from '@anticrm/core'
-  import { setPlatformStatus, unknownError } from '@anticrm/platform'
+  import { setPlatformStatus, unknownError, Severity } from '@anticrm/platform'
+  import type { Status } from '@anticrm/platform'
 
   import { getClient, Card, Channels, PDFViewer } from '@anticrm/presentation'
   import { uploadFile } from '../utils'
@@ -27,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 } from '@anticrm/ui'
+  import { EditBox, Link, showPopup, Component, CircleButton, IconFile as FileIcon, 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'
@@ -140,6 +141,7 @@
 
 <Card label={'Create Candidate'} 
       okLabel={'Save'}
+      cancelLabel={'Cancel'}
       okAction={createCandidate}
       canSave={firstName.length > 0 && lastName.length > 0}
       spaceClass={recruit.class.Candidates}
@@ -148,6 +150,7 @@
       bind:space={_space}
       on:close={() => { dispatch('close') }}>
 
+  <!-- <StatusComponent slot="error" status={{ severity: Severity.ERROR, code: 'Can’t save the object because it already exists' }} /> -->
   <div class="flex-row-center">
     <div class="avatar-container">
       <div class="flex-center avatar-shadow">
@@ -194,6 +197,7 @@
       </div> -->
     </div>
   </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>
@@ -283,6 +287,11 @@
       color: var(--theme-caption-color);
     }
   }
+  .separator {
+    margin: 1rem 0;
+    height: 1px;
+    background-color: var(--theme-card-divider);
+  }
   // .resume a {
   //   font-size: .75rem;
   //   color: var(--theme-content-dark-color);