Upload files layout

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

packages/theme/styles/_colors.scss

@@ -25,6 +25,8 @@
   --primary-button-outline: rgba(87, 132, 255, .3);
   --primary-button-border: rgba(255, 255, 255, .09);
 
+  --duotone-color: rgba(126, 134, 158, .25);
+
   --trans-primary-button-color: #fff;
   --trans-primary-button-bg: #4474F6;
   --trans-primary-button-border: transparent;

packages/theme/styles/_layouts.scss

@@ -198,6 +198,7 @@ table {
 .mr-1 { margin-right: .25rem; }
 .mr-4 { margin-right: 1rem; }
 .mr-8 { margin-right: 2rem; }
+.mt-2 { margin-top: .5rem; }
 .mt-5 { margin-top: 1.25rem; }
 .mb-1 { margin-bottom: .25rem; }
 

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

@@ -14,7 +14,7 @@
 -->
 
 <script lang="ts">
-  import { CircleButton, IconAdd, showPopup, Spinner } from '@anticrm/ui'
+  import { CircleButton, IconAdd, showPopup, Spinner, Link } from '@anticrm/ui'
 
   import type { Doc, Ref, Space, Class, Bag } from '@anticrm/core'
   import { setPlatformStatus, unknownError } from '@anticrm/platform'
@@ -24,6 +24,7 @@
   import { Table } from '@anticrm/view-resources'
 
   import { uploadFile } from '../utils'
+  import Upload from './icons/Upload.svelte'
 
   import chunter from '@anticrm/chunter'
 
@@ -66,6 +67,9 @@
     if (file !== undefined) { createAttachment(file) }
   }
 
+  let kl = true
+  let dragover = false
+  $: if (loading) kl = false
 </script>
 
 <div class="attachments-container">
@@ -78,12 +82,27 @@
     {/if}
     <input bind:this={inputFile} type="file" name="file" id="file" style="display: none" on:change={fileSelected}/>
   </div>
-  <Table 
-    _class={chunter.class.Attachment}
-    config={['', 'lastModified']}
-    options={ {} }
-    query={ { attachedTo: objectId } }
-  />
+
+  {#if kl}
+    <div class="flex-col-center mt-5 resume" class:solid={dragover} 
+      on:dragover|preventDefault={ () => { dragover = true } } 
+      on:dragleave={ () => { dragover = false } } 
+      on:drop|preventDefault|stopPropagation
+    >
+      <Upload size={'large'} />
+      <div class="small-text content-dark-color mt-2">There are no attachments for this candidate.</div>
+      <div class="small-text">
+        <Link label={'Upload'} href={'#'} on:click={ () => { inputFile.click() } } /> or drop files here
+      </div>
+    </div>
+  {:else}
+    <Table 
+      _class={chunter.class.Attachment}
+      config={['', 'lastModified']}
+      options={ {} }
+      query={ { attachedTo: objectId } }
+    />
+  {/if}
 </div>
 
 <style lang="scss">
@@ -139,4 +158,12 @@
     font-size: 0.75rem;
     color: var(--theme-content-dark-color);
   }
+
+  .resume {
+    padding: 1rem;
+    color: var(--theme-caption-color);
+    background: rgba(255, 255, 255, .03);
+    border: 1px dashed rgba(255, 255, 255, .16);
+    border-radius: .75rem;
+  }
 </style>

plugins/recruit-resources/src/components/icons/Upload.svelte

@@ -0,0 +1,28 @@
+<!--
+// 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">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="var(--duotone-color)" d="M18,6.4c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.1,0c0,0,0,0-0.1-0.1c0,0,0,0-0.1-0.1 c0-0.1-0.1-0.2-0.2-0.4c-0.9-1.9-2.8-3.3-5.1-3.3c-2.3,0-4.2,1.4-5.1,3.3C6.8,5.9,6.7,6,6.7,6.1c0,0.1-0.1,0.1-0.1,0.1 C6.6,6.3,6.6,6.3,6.5,6.3c0,0,0,0-0.1,0c0,0,0,0-0.1,0c-0.1,0-0.2,0-0.3,0C4,6.4,2.4,8,2.4,10S4,13.6,6,13.6h6h6 c2,0,3.6-1.6,3.6-3.6S20,6.4,18,6.4z"/>
+  <g {fill}>
+    <path d="M18,6.4c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.1,0c0,0,0,0-0.1-0.1c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0-0.1-0.1c0-0.1-0.1-0.2-0.2-0.4c-0.9-1.9-2.8-3.3-5.1-3.3c-2.3,0-4.2,1.4-5.1,3.3 C6.8,5.9,6.7,6,6.7,6.1c0,0.1-0.1,0.1-0.1,0.1c0,0,0,0,0,0C6.6,6.3,6.6,6.3,6.5,6.3c0,0,0,0-0.1,0c0,0,0,0-0.1,0 c-0.1,0-0.2,0-0.3,0C4,6.4,2.4,8,2.4,10S4,13.6,6,13.6h0.6l1.2-1.2H6c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4h0.1 c0.2,0,0.4,0,0.6,0c0.2,0,0.4-0.1,0.6-0.2c0.2-0.1,0.3-0.3,0.4-0.4c0.1-0.1,0.1-0.2,0.2-0.3C7.8,6.5,7.9,6.4,8,6.2l0,0 c0.7-1.5,2.2-2.6,4-2.6s3.3,1.1,4,2.6l0,0c0.1,0.2,0.1,0.3,0.2,0.4c0,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.3,0.4,0.4 c0.2,0.1,0.4,0.2,0.6,0.2c0.2,0,0.4,0,0.6,0H18c1.3,0,2.4,1.1,2.4,2.4c0,1.3-1.1,2.4-2.4,2.4h-1.8l1.2,1.2H18c2,0,3.6-1.6,3.6-3.6 S20,6.4,18,6.4z"/>
+    <path d="M12,11.2l-4.4,4.4l0.8,0.8l3-3V21c0,0.3,0.3,0.6,0.6,0.6s0.6-0.3,0.6-0.6v-7.6l3,3l0.8-0.8L12,11.2z"/>
+  </g>
+</svg>