From 624dec89c73cdb5a4e82676623a0312f8e6a4cf8 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Sun, 26 Sep 2021 16:48:53 +0300
Subject: [PATCH] Layout ApplicationsPresenter (#215)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../components/ApplicationsPresenter.svelte   | 111 +++++++++++++++++-
 .../src/components/icons/Vacancy.svelte       |  25 ++++
 2 files changed, 132 insertions(+), 4 deletions(-)
 create mode 100644 plugins/recruit-resources/src/components/icons/Vacancy.svelte

diff --git a/plugins/recruit-resources/src/components/ApplicationsPresenter.svelte b/plugins/recruit-resources/src/components/ApplicationsPresenter.svelte
index fce09aa711..a93aeda858 100644
--- a/plugins/recruit-resources/src/components/ApplicationsPresenter.svelte
+++ b/plugins/recruit-resources/src/components/ApplicationsPresenter.svelte
@@ -16,13 +16,116 @@
 
 <script lang="ts">
 
-import type { Candidate } from '@anticrm/recruit'
-import { IconFile } from '@anticrm/ui'
+  import type { Candidate } from '@anticrm/recruit'
+  import { CircleButton, IconFile, Label } from '@anticrm/ui'
+  import Vacancy from './icons/Vacancy.svelte'
 
-export let value: Candidate
+  export let value: Candidate
 
+  const apps = [{ label: 'Lead analyst', description: 'Tesla' },
+                { label: 'Principal analyst', description: 'Google' }]
 </script>
 
 {#if value.applications && value.applications > 0}
-  <IconFile size={'small'}/> {value.applications}
+  <div class="apps-container">
+    <div class="icon"><IconFile size={'small'} /></div>
+    {value.applications}
+
+    <div class="flex-col popup">
+      <div class="header">
+        <Label label={'Applications'} /> ({value.applications})
+      </div>
+      
+      {#each apps as app}
+        <div class="flex-row-center app">
+          <div class="app-icon"><CircleButton icon={Vacancy} size={'large'} /></div>
+          <div class="flex-grow flex-col">
+            <div class="overflow-label label">{app.label}</div>
+            <div class="overflow-label desc">{app.description}</div>
+          </div>
+        </div>
+      {/each}
+    </div>    
+  </div>
 {/if}
+
+
+<style lang="scss">
+  .apps-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    color: var(--theme-content-color);
+    cursor: pointer;
+
+    .icon {
+      margin-right: .25rem;
+      transform-origin: center center;
+      transform: scale(.75);
+      opacity: .6;
+    }
+    &:hover {
+      color: var(--theme-caption-color);
+      .icon { opacity: 1; }
+      .popup { visibility: visible; }
+      &::after { content: ''; }
+    }
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: -1rem;
+    }
+
+    .popup {
+      visibility: hidden;
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      padding: 1.25rem 1.5rem;
+      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;
+
+      .header {
+        margin-bottom: 1.5rem;
+        font-weight: 500;
+        font-size: 1rem;
+        color: var(--theme-caption-color);
+      }
+
+      .app {
+        position: relative;
+        .app-icon {
+          margin-right: 1.25rem;
+          width: 2rem;
+          height: 2rem;
+        }
+        .label { color: var(--theme-caption-color); }
+        .desc {
+          font-size: .75rem;
+          color: var(--theme-content-dark-color);
+        }
+      }
+
+      .app + .app {
+        margin-top: 1.5rem;
+        &::before {
+          content: '';
+          position: absolute;
+          top: -.75rem;
+          left: 0;
+          width: 100%;
+          height: 1px;
+          background-color: var(--theme-button-border-hovered);
+        }
+      }
+    }
+  }
+</style>
diff --git a/plugins/recruit-resources/src/components/icons/Vacancy.svelte b/plugins/recruit-resources/src/components/icons/Vacancy.svelte
new file mode 100644
index 0000000000..1385f7367d
--- /dev/null
+++ b/plugins/recruit-resources/src/components/icons/Vacancy.svelte
@@ -0,0 +1,25 @@
+<!--
+// 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 = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.9,2.1h-1.5C11.2,0.9,10.2,0,9,0H7C5.8,0,4.8,0.9,4.6,2.1H3.1C1.4,2.1,0,3.5,0,5.2V8c0,0.2,0.1,0.5,0.3,0.6 c2.1,1.3,4.8,2,7.7,2c2.8,0,5.6-0.7,7.7-2C15.9,8.4,16,8.2,16,8V5.2C16,3.5,14.6,2.1,12.9,2.1z M7,1.3h2c0.5,0,0.9,0.3,1,0.7H6 C6.1,1.6,6.5,1.3,7,1.3z M14.7,7.6c-1.9,1-4.2,1.6-6.7,1.6c-2.4,0-4.8-0.6-6.7-1.6V5.2c0-1,0.8-1.8,1.8-1.8h9.8 c1,0,1.8,0.8,1.8,1.8V7.6z"/>
+  <path d="M15.4,10.2c-0.4,0-0.7,0.2-0.7,0.6l-0.1,2c-0.1,1-0.9,1.8-1.9,1.8H3.4c-1,0-1.8-0.8-1.9-1.8l-0.2-2 c0-0.4-0.3-0.6-0.7-0.6C0.3,10.3,0,10.6,0,11l0.2,2c0.1,1.7,1.5,3,3.2,3h9.2c1.7,0,3.1-1.3,3.2-3l0.1-2 C16,10.6,15.7,10.3,15.4,10.2z"/>
+</svg>