Layout CreateApplication (#136)

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

packages/ui/src/components/Card.svelte

@@ -23,6 +23,7 @@
   // import ScrollBox from './ScrollBox.svelte'
   import Button from './Button.svelte'
   import Label from './Label.svelte'
+  import IconFolder from './icons/Folder.svelte'
 
   export let label: IntlString
   export let okLabel: IntlString
@@ -38,6 +39,14 @@
     <div class="tool"><Button label={okLabel} size={'small'} transparent on:click={() => { okAction(); dispatch('close') }} /></div>
   </div>
   <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>
+  </div>
 </form>
 
 <style lang="scss">
@@ -45,15 +54,12 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    padding: 0;
-    background-color: transparent;
+    min-width: 20rem;
     border-radius: 1.25rem;
-    // box-shadow: 0 2rem 4.5rem rgba(0, 0, 0, .55);
 
     .header {
       flex-shrink: 0;
       padding: 1rem 1.25rem 1rem 1.75rem;
-
       .label {
         font-weight: 500;
         font-size: 1rem;
@@ -65,10 +71,32 @@
     .content {
       flex-shrink: 0;
       flex-grow: 1;
-      margin: 0 1.75rem 1.75rem;
+      margin: 0 1.75rem;
       height: fit-content;
     }
 
+    .pool {
+      margin: 0 1.75rem 1.5rem;
+      color: var(--theme-caption-color);
+      .separator {
+        margin: 1rem 0;
+        height: 1px;
+        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 {
       position: absolute;
       top: 0;

packages/ui/src/components/icons/Folder.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M11.6,2.7H9.4c-0.3,0-0.7-0.1-0.9-0.4L7.8,1.5C7.4,0.9,6.7,0.6,5.9,0.6H4.4C1.5,0.6,0,2.1,0,5.2v5.5 c0,2.9,1.9,4.7,5,4.7H11c3.1,0,5-1.8,5-4.7l0-3.5C16,4.2,14.6,2.7,11.6,2.7z M14.6,10.7C14.6,10.8,14.6,10.8,14.6,10.7 c0,2.2-1.3,3.4-3.7,3.4H5c-2.4,0-3.7-1.2-3.7-3.3V5.2c0-2.4,0.9-3.3,3.1-3.3h1.5c0.3,0,0.7,0.1,0.9,0.4l0.7,0.9C8,3.7,8.7,4,9.4,4 h2.2c2.2,0,3.1,0.9,3.1,3.2L14.6,10.7z"/>
+  <path d="M11.4,9.3H4.3C4,9.3,3.7,9.6,3.7,10c0,0.4,0.3,0.7,0.7,0.7h7.1c0.4,0,0.7-0.3,0.7-0.7 C12.1,9.6,11.8,9.3,11.4,9.3z"/>
+</svg>

packages/ui/src/index.ts

@@ -59,6 +59,7 @@ export { default as IconClose } from './components/icons/Close.svelte'
 export { default as IconSearch } from './components/icons/Search.svelte'
 export { default as IconToDo } from './components/icons/ToDo.svelte'
 export { default as IconComments } from './components/icons/Comments.svelte'
+export { default as IconFolder } from './components/icons/Folder.svelte'
 
 export * from './utils'
 

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

@@ -48,10 +48,8 @@
       okLabel={'Save'} 
       okAction={createCandidate}
       on:close={() => { dispatch('close') }}>
-  <Grid rowGap={1.5}>
-    <Row><EditBox label={'Name'} placeholder={'John Connor'} /></Row>
-    <Row><UserInfo value={{firstName: 'First', lastName: 'Last', city: 'Cityvech'}} size={'large'} subtitle={'Candidate'} /></Row>
+  <Grid column={1} rowGap={1.75}>
     <UserBox _class={recruit.class.Candidate} title='Candidate' caption='Candidates' bind:value={candidate} />
-    <DatePicker title={'Pick due date'} />
+    <UserBox _class={recruit.class.Candidate} title='Assigned recruiter' caption='Recruiters' bind:value={candidate} />
   </Grid>
 </Card>