From bd779dfc0d68e95bb399d10e5c5cf11c2c97c892 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 16 Sep 2021 10:23:58 +0300
Subject: [PATCH] Fix Link and Attachments. Add FileGroup. Correct hover on
 Channels. (#194)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/Channels.svelte            | 23 ++++-
 packages/ui/src/components/Link.svelte        | 32 ++++++-
 .../src/components/AttachmentPresenter.svelte | 14 ++--
 .../src/components/FileGroup.svelte           | 84 +++++++++++++++++++
 .../src/components/Attachments.svelte         |  6 +-
 .../src/components/CreateCandidate.svelte     |  7 +-
 6 files changed, 146 insertions(+), 20 deletions(-)
 create mode 100644 plugins/chunter-resources/src/components/FileGroup.svelte

diff --git a/packages/presentation/src/components/Channels.svelte b/packages/presentation/src/components/Channels.svelte
index 108170ff17..b67626061c 100644
--- a/packages/presentation/src/components/Channels.svelte
+++ b/packages/presentation/src/components/Channels.svelte
@@ -95,7 +95,6 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    &.reverse { flex-direction: row-reverse; }
 
     .circle {
       position: relative;
@@ -139,9 +138,16 @@
       &::after {
         position: absolute;
         top: 0;
-        left: 0;
-        right: 0;
         bottom: -1rem;
+        left: -100%;
+        right: -100%;
+        clip-path: polygon(0 100%, 25% 50%, 25% 0, 75% 0, 75% 50%, 100% 100%);
+        // background-color: rgba(255, 255, 0, .5);
+      }
+      &:first-child:after {
+        left: 0;
+        right: -100%;
+        clip-path: polygon(0 0, 0 100%, 100% 100%, 65% 50%, 65% 0);
       }
     }
     .list-small {
@@ -155,13 +161,22 @@
       height: 2rem;
     }
 
+    &.reverse {
+      flex-direction: row-reverse;
+      .list:first-child:after {
+        left: -100%;
+        right: 0;
+        clip-path: polygon(0 100%, 35% 50%, 35% 0, 100% 0, 100% 100%);
+      }
+    }
+
     .window {
       position: absolute;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1rem;
-      top: 2.25rem;
+      top: calc(100% + .5rem);
       min-width: 100%;
       background-color: var(--theme-button-bg-focused);
       border: 1px solid var(--theme-button-border-enabled);
diff --git a/packages/ui/src/components/Link.svelte b/packages/ui/src/components/Link.svelte
index 45d1ac3282..6c90fd61f2 100644
--- a/packages/ui/src/components/Link.svelte
+++ b/packages/ui/src/components/Link.svelte
@@ -20,9 +20,15 @@
   export let label: IntlString
   export let href: string
   export let icon: Asset | AnySvelteComponent | undefined
+  export let disabled: boolean = false
+  export let maxLenght: number = 26
+
+  const trimFilename = (fname: string): string => (fname.length > maxLenght)
+                        ? fname.substr(0, (maxLenght - 1) / 2) + '...' + fname.substr(-(maxLenght - 1) / 2)
+                        : fname
 </script>
 
-<span class="container" on:click>
+<span class="container" class:disabled on:click>
   {#if icon}
     <span class="icon">
       {#if typeof (icon) === 'string'}
@@ -32,7 +38,11 @@
       {/if}
     </span>
   {/if}
-  <a {href}>{label}</a>
+  {#if disabled}
+    {trimFilename(label)}
+  {:else}
+    <a class="overflow-label" {href}>{trimFilename(label)}</a>
+  {/if}
 </span>
 
 <style lang="scss">
@@ -40,6 +50,7 @@
     display: inline-flex;
     align-items: center;
     line-height: 100%;
+    cursor: pointer;
 
     .icon {
       margin-right: .25rem;
@@ -47,7 +58,20 @@
       transform: scale(.75);
       opacity: .6;
     }
-    &:hover .icon { opacity: 1; }
-    &:active .icon { opacity: .6; }
+    &:hover {
+      a { color: var(--theme-caption-color); }
+      .icon { opacity: 1; }
+    }
+    &:active {
+      a { color: var(--theme-content-color); }
+      .icon { opacity: .6; }
+    }
+  }
+  .disabled {
+    cursor: not-allowed;
+    color: var(--theme-content-trans-color);
+    .icon { opacity: .3; }
+    &:hover .icon { opacity: .3; }
+    &:active .icon { opacity: .3; }
   }
 </style>
diff --git a/plugins/chunter-resources/src/components/AttachmentPresenter.svelte b/plugins/chunter-resources/src/components/AttachmentPresenter.svelte
index b1c188e36d..69d495fb2d 100644
--- a/plugins/chunter-resources/src/components/AttachmentPresenter.svelte
+++ b/plugins/chunter-resources/src/components/AttachmentPresenter.svelte
@@ -15,13 +15,13 @@
 -->
 
 <script lang="ts">
+  import type { Bag } from '@anticrm/core'
+  import type { Attachment } from '@anticrm/chunter'
+  import { IconFile, Link, showPopup } from '@anticrm/ui'
+  import { PDFViewer } from '@anticrm/presentation'
+  import FileGroup from './FileGroup.svelte'
 
-import type { Bag } from '@anticrm/core'
-import type { Attachment } from '@anticrm/chunter'
-import { IconFile, Link, showPopup } from '@anticrm/ui'
-import { PDFViewer } from '@anticrm/presentation'
-
-export let value: { attachments: Bag<Attachment> }
+  export let value: { attachments: Bag<Attachment> }
 
 </script>
 
@@ -29,6 +29,6 @@ export let value: { attachments: Bag<Attachment> }
   {#if Object.keys(value.attachments).length === 1}
     <Link label={Object.values(value.attachments)[0].name} href={'#'} icon={IconFile} on:click={ () => { showPopup(PDFViewer, { file: Object.values(value.attachments)[0].file }, 'right') } }/>
   {:else if Object.keys(value.attachments).length > 1}
-    <IconFile size='small'/>Files
+    <FileGroup files={value.attachments} />
   {/if}
 {/if}
diff --git a/plugins/chunter-resources/src/components/FileGroup.svelte b/plugins/chunter-resources/src/components/FileGroup.svelte
new file mode 100644
index 0000000000..8ba14352ee
--- /dev/null
+++ b/plugins/chunter-resources/src/components/FileGroup.svelte
@@ -0,0 +1,84 @@
+<!--
+// 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">
+  import type { Bag } from '@anticrm/core'
+  import type { Attachment } from '@anticrm/chunter'
+  import { IconFile, Link, showPopup } from '@anticrm/ui'
+  import { PDFViewer } from '@anticrm/presentation'
+
+  export let files: Bag<Attachment>
+</script>
+
+<div class="files-container">
+  <span class="icon"><IconFile size={'small'}/></span>
+  {Object.values(files).length} file(s)
+  <div class="window">
+    {#each Object.values(files) as file}
+      <div class="flex-row-center file">
+        <Link label={file.name} href={'#'} icon={IconFile} on:click={ () => { showPopup(PDFViewer, { file: file.file }, 'right') } }/>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style lang="scss">
+  .files-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    color: var(--theme-caption-color);
+    cursor: pointer;
+
+    .icon {
+      margin-right: .25rem;
+      transform-origin: center center;
+      transform: scale(.75);
+      opacity: .6;
+    }
+    &:hover {
+      .icon { opacity: 1; }
+      .window { visibility: visible; }
+      &::after { content: ''; }
+    }
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: -1rem;
+    }
+
+    .window {
+      visibility: hidden;
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      padding: 1rem;
+      top: 1.5rem;
+      left: 0;
+      min-width: 100%;
+      background-color: var(--theme-button-bg-focused);
+      border: 1px solid var(--theme-button-border-enabled);
+      border-radius: .75rem;
+      box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, .2);
+      z-index: 1;
+
+      .file + .file { margin-top: .25rem; }
+    }
+  }
+</style>
diff --git a/plugins/recruit-resources/src/components/Attachments.svelte b/plugins/recruit-resources/src/components/Attachments.svelte
index cb448ea25b..41bc4585ea 100644
--- a/plugins/recruit-resources/src/components/Attachments.svelte
+++ b/plugins/recruit-resources/src/components/Attachments.svelte
@@ -65,6 +65,10 @@
     if (file !== undefined) { createAttachment(file) }
   }
 
+  const maxLenght: number = 52
+  const trimFilename = (fname: string): string => (fname.length > maxLenght)
+                        ? fname.substr(0, (maxLenght - 1) / 2) + '...' + fname.substr(-(maxLenght - 1) / 2)
+                        : fname
 </script>
 
 <div class="attachments-container">
@@ -91,7 +95,7 @@
           <td class="item flex-row-center">
             <div class="flex-center file-icon">pdf</div>
             <div class="flex-col flex-grow" style="cursor: pointer" on:click={ () => { showPopup(PDFViewer, { file: file.file }, 'right') } }>
-              <div class="overflow-label caption-color">{file.name}</div>
+              <div class="overflow-label caption-color">{trimFilename(file.name)}</div>
               <div class="overflow-label file-desc">{file.type}</div>
             </div>
           </td>
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index 9f4d6f6881..060778d811 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -161,13 +161,12 @@
       <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} on:click={ () => { showPopup(PDFViewer, { file: resume.uuid }, 'right') } }/>
+          <Link label={resume.name} href={'#'} icon={FileIcon} maxLenght={16} on:click={ () => { showPopup(PDFViewer, { file: resume.uuid }, 'right') } }/>
         {:else}
           {#if loading}
-            <Spinner/> Uploading...
+            <Link label={'Uploading...'} href={'#'} icon={Spinner} disabled />
           {:else}
-            <FileUpload size='small'/>
-            <a href={'#'} on:click={ () => { inputFile.click() } }>Upload resume</a>
+            <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}