mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-13 19:58:09 +00:00
Layout ApplicationsPresenter (#215)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
b11d3c46b6
commit
624dec89c7
@ -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>
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user