Create attachments tab (#85)

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

packages/theme/styles/_layouts.scss

@@ -84,6 +84,7 @@ table {
 }
 
 .flex { display: flex; }
+.flex-grow { flex-grow: 1; }
 .flex-nowrap {
   display: flex;
   flex-wrap: nowrap;
@@ -178,6 +179,13 @@ table {
   overflow: hidden;
   white-space: pre-wrap;
 }
+.overflow-label {
+  flex-grow: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  user-select: none;
+}
 
 .focused-button {
   background-color: var(--theme-button-bg-focused);
@@ -209,6 +217,7 @@ table {
 
 .content-color { color: var(--theme-content-color); }
 .content-trans-color { color: var(--theme-content-trans-color); }
+.content-dark-color { color: var(--theme-content-dark-color); }
 .caption-color { color: var(--theme-caption-color); }
 
 .border-primary-button { border-color: var(--primary-button-border); }

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

@@ -0,0 +1,99 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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 { ScrollBox, IconAdd } from '@anticrm/ui'
+
+  interface IFile {
+    id: number,
+    name: string,
+    ext: string,
+    description: string,
+    tags: Array<string>
+  }
+
+  export let files: Array<IFile> = [
+    { id: 1, name: 'Application description.pdf', ext: 'pdf', description: 'PDF / 2,5 MB', tags: ['Description', 'Tag'] },
+    { id: 2, name: 'Location', ext: 'jpg', description: 'JPG / 2,5 MB', tags: ['Benefits'] },
+    { id: 1, name: 'Application description.pdf', ext: 'pdf', description: 'PDF / 2,5 MB', tags: ['Description', 'Tag'] },
+    { id: 2, name: 'Location', ext: 'jpg', description: 'JPG / 2,5 MB', tags: ['Benefits'] },
+    { id: 1, name: 'Application description.pdf', ext: 'pdf', description: 'PDF / 2,5 MB', tags: ['Description', 'Tag'] },
+    { id: 2, name: 'Location', ext: 'jpg', description: 'JPG / 2,5 MB', tags: ['Benefits'] },
+    { id: 1, name: 'Application description.pdf', ext: 'pdf', description: 'PDF / 2,5 MB', tags: ['Description', 'Tag'] },
+    { id: 2, name: 'Location', ext: 'jpg', description: 'JPG / 2,5 MB', tags: ['Benefits'] },
+    { id: 1, name: 'Application description.pdf', ext: 'pdf', description: 'PDF / 2,5 MB', tags: ['Description', 'Tag'] },
+    { id: 2, name: 'Location', ext: 'jpg', description: 'JPG / 2,5 MB', tags: ['Benefits'] },
+    { id: 1, name: 'Application description.pdf', ext: 'pdf', description: 'PDF / 2,5 MB', tags: ['Description', 'Tag'] },
+    { id: 2, name: 'Location', ext: 'jpg', description: 'JPG / 2,5 MB', tags: ['Benefits'] },
+    { id: 3, name: 'Requirements', ext: 'doc', description: 'DOC / 2,5 MB', tags: ['Requirements'] }
+  ]
+</script>
+
+<ScrollBox vertical>
+  {#each files as file}
+    <div class="item flex-between">
+      <div class="flex-center file-icon">{file.ext}</div>
+      <div class="flex-col flex-grow">
+        <div class="overflow-label caption-color">{file.name}</div>
+        <div class="overflow-label file-desc">{file.description}</div>
+      </div>
+      <div class="flex-row-center">
+        {#each file.tags as tag}
+          <div class="tag">{tag}</div>
+        {/each}
+      </div>
+    </div>
+  {/each}
+  <div class="item add-file">
+    <button class="add-btn focused-button"><IconAdd size={'small'} /></button>
+    <div class="caption-color">Add attachment</div>
+  </div>
+</ScrollBox>
+
+<style lang="scss">
+  .item {
+    display: flex;
+    align-items: center;
+    padding: .75rem 1rem;
+  }
+  .file-icon, .add-btn {
+    margin-right: 1.25rem;
+    width: 2rem;
+    height: 2rem;
+    border-radius: .5rem;
+  }
+  .file-icon {
+    font-weight: 500;
+    font-size: 0.625rem;
+    line-height: 150%;
+    text-transform: uppercase;
+    color: #fff;
+    background-color: #7C6FCD;
+    border: 1px solid rgba(0, 0, 0, .1);
+  }
+  .file-desc {
+    font-size: 0.75rem;
+    color: var(--theme-content-dark-color);
+  }
+  .tag {
+    margin-left: 0.5rem;
+    padding: .25rem .75rem;
+    color: var(--theme-caption-color);
+    background-color: var(--theme-button-bg-hovered);
+    border: 1px solid var(--theme-bg-accent-hover);
+    border-radius: 1.875rem;
+  }
+  .item + .add-file, .item + .item { border-top: 1px solid var(--theme-bg-accent-hover); }
+</style>

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

@@ -57,6 +57,14 @@
         object,
         space
       }
+    },
+    {
+      label: 'Attachments',
+      component: 'recruit:component:Attachments',
+      props: {
+        object,
+        space
+      }
     }
   ]
 

plugins/recruit-resources/src/index.ts

@@ -19,6 +19,7 @@ import CreateCandidate from './components/CreateCandidate.svelte'
 import CreateApplication from './components/CreateApplication.svelte'
 import EditCandidate from './components/EditCandidate.svelte'
 import CandidateGeneral from './components/CandidateGeneral.svelte'
+import Attachments from './components/Attachments.svelte'
 
 export default async () => ({
   component: {
@@ -27,6 +28,7 @@ export default async () => ({
     CreateCandidate,
     CreateApplication,
     EditCandidate,
-    CandidateGeneral
+    CandidateGeneral,
+    Attachments
   },
 })

plugins/workbench-resources/src/components/NavHeader.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <div class="container">
-  <span class="label">{label}</span>
+  <span class="overflow-label label">{label}</span>
   <ActionIcon label={'More...'} icon={MoreH} size={'small'} {action}/>
 </div>
 
@@ -36,11 +36,6 @@
     height: 4.5rem;
 
     .label {
-      flex-grow: 1;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      user-select: none;
       font-weight: 500;
       font-size: 1rem;
       color: var(--theme-caption-color);