wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-13 11:50:56 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix ApplicationsPresenter (#216)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-09-26 17:17:05 +03:00 committed by GitHub
parent 624dec89c7
commit d735fbd218
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 106 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
plugins/recruit-resources/src/components/ApplicationsPopup.svelte Normal file
View File

@ -0,0 +1,89 @@
<!--
// 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 { Candidate } from '@anticrm/recruit'
import { CircleButton, Label } from '@anticrm/ui'
import Vacancy from './icons/Vacancy.svelte'
export let value: Candidate
const apps = [{ label: 'Lead analyst', description: 'Tesla' },
{ label: 'Principal analyst', description: 'Google' }]
</script>
<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>
<style lang="scss">
.popup {
display: flex;
flex-direction: column;
padding: 1.25rem 1.5rem;
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);
.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>

94
plugins/recruit-resources/src/components/ApplicationsPresenter.svelte
View File

@ -17,35 +17,25 @@
<script lang="ts">
import type { Candidate } from '@anticrm/recruit'
import { CircleButton, IconFile, Label } from '@anticrm/ui'
import { CircleButton, IconFile, Label, showPopup, closePopup } from '@anticrm/ui'
import Vacancy from './icons/Vacancy.svelte'
import ApplicationsPopup from './ApplicationsPopup.svelte'
export let value: Candidate
let trigger: HTMLElement
const apps = [{ label: 'Lead analyst', description: 'Tesla' },
{ label: 'Principal analyst', description: 'Google' }]
</script>
{#if value.applications && value.applications > 0}
<div class="apps-container">
<div class="apps-container"
bind:this={trigger}
on:mouseenter={() => { showPopup(ApplicationsPopup, {value}, trigger) }}
on:mouseleave={() => { closePopup() }}
>
<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}
@ -67,65 +57,15 @@
&: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);
}
}
// &::after { content: ''; }
}
// &::after {
// position: absolute;
// top: 0;
// left: 0;
// right: 0;
// bottom: -2rem;
// background-color: rgba(255, 255, 0, .2);
// }
}
</style>