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>