Add YesNo, changed Create Candidate (#211)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-09-22 17:06:21 +03:00 committed by GitHub
parent e6715a1970
commit 343aa5828e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 97 additions and 11 deletions

View File

@ -27,11 +27,13 @@
import type { Candidate } from '@anticrm/recruit'
import type { Attachment } from '@anticrm/chunter'
import { EditBox, Link, showPopup, Component, CircleButton, IconFile as FileIcon, Spinner } from '@anticrm/ui'
import { EditBox, Link, showPopup, Component, CircleButton, IconFile as FileIcon, Spinner, Label } from '@anticrm/ui'
import FileUpload from './icons/FileUpload.svelte'
import Avatar from './icons/Avatar.svelte'
import Edit from './icons/Edit.svelte'
import SocialEditor from './SocialEditor.svelte'
import YesNo from './YesNo.svelte'
import Girl from '../../img/girl.png'
import Elon from '../../img/elon.png'
import Bond from '../../img/bond.png'
@ -141,7 +143,7 @@
bind:space={_space}
on:close={() => { dispatch('close') }}>
<div class="flex">
<div class="flex-row-center">
<div class="avatar" on:click={() => { (kl < 3) ? kl++ : kl = 0 }}>
<div class="border"/>
{#if kl === 0}
@ -158,8 +160,9 @@
<div class="flex-col">
<div class="name"><EditBox placeholder="John" maxWidth="9.5rem" bind:value={object.firstName}/></div>
<div class="name"><EditBox placeholder="Appleseed" maxWidth="9.5rem" bind:value={object.lastName}/></div>
<div class="title"><EditBox placeholder="Title" maxWidth="9.5rem"/></div>
<div class="city"><EditBox placeholder="Location" maxWidth="9.5rem" bind:value={object.city}/></div>
<div class="flex resume">
<!-- <div class="flex resume">
{#if resume.uuid}
<Link label={resume.name} href={'#'} icon={FileIcon} maxLenght={16} on:click={ () => { showPopup(PDFViewer, { file: resume.uuid }, 'right') } }/>
{:else}
@ -170,9 +173,14 @@
{/if}
<input bind:this={inputFile} type="file" name="file" id="file" style="display: none" on:change={fileSelected}/>
{/if}
</div>
</div> -->
</div>
</div>
<div class="flex-col locations">
<span><Label label={'Work location preferences'} /></span>
<div class="row"><Label label={'Onsite'} /><YesNo state={'yes'} /></div>
<div class="row"><Label label={'Remote'} /><YesNo state={'unknown'} /></div>
</div>
<svelte:fragment slot="contacts">
<Channels value={object.channels} />
<CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { object.channels = result })} />
@ -219,15 +227,33 @@
font-size: 1.25rem;
color: var(--theme-caption-color);
}
.city {
margin: .75rem 0 .125rem;
.title, .city {
font-weight: 500;
font-size: .75rem;
color: var(--theme-content-color);
color: var(--theme-content-accent-color);
}
.resume a {
font-size: .75rem;
color: var(--theme-content-dark-color);
&:hover { color: var(--theme-content-color); }
.title { margin-top: .5rem; }
.locations {
margin-top: 1.5rem;
span {
margin-bottom: .125rem;
font-weight: 500;
font-size: .75rem;
color: var(--theme-content-accent-color);
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: .75rem;
color: var(--theme-caption-color);
}
}
// .resume a {
// font-size: .75rem;
// color: var(--theme-content-dark-color);
// &:hover { color: var(--theme-content-color); }
// }
</style>

View File

@ -0,0 +1,60 @@
<!--
// Copyright © 2020, 2021 Anticrm Platform Contributors.
//
// 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 { Label } from '@anticrm/ui'
export let state: 'yes' | 'no' | 'unknown'
</script>
<div class="flex-row-center yesno-container {state}" on:click={() => {
if (state === 'yes') state = 'no'
else if (state === 'no') state = 'unknown'
else state = 'yes'
}}>
<svg class="svg-small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<circle fill="#fff" cx="8" cy="8" r="6"/>
{#if state === 'yes'}
<polygon fill="var(--primary-button-enabled)" points="7.4,10.9 4.9,8.4 5.7,7.6 7.3,9.1 10.2,5.6 11.1,6.4 "/>
{:else if state === 'no'}
<polygon fill="#F06C63" points="10.7,6 10,5.3 8,7.3 6,5.3 5.3,6 7.3,8 5.3,10 6,10.7 8,8.7 10,10.7 10.7,10 8.7,8 "/>
{:else}
<path fill="#77818E" d="M7.3,9.3h1.3V9c0.1-0.5,0.6-0.9,1.1-1.4c0.4-0.4,0.8-0.9,0.8-1.6c0-1.1-0.8-1.8-2.2-1.8c-1.4,0-2.4,0.8-2.5,2.2 h1.4c0.1-0.6,0.4-1,1-1C8.8,5.4,9,5.7,9,6.2c0,0.4-0.3,0.7-0.7,1.1c-0.5,0.5-1,0.9-1,1.7V9.3z M8,11.6c0.5,0,0.9-0.4,0.9-0.9 c0-0.5-0.4-0.9-0.9-0.9c-0.5,0-0.9,0.4-0.9,0.9C7.1,11.2,7.5,11.6,8,11.6z"/>
{/if}
</svg>
<span><Label label={state} /></span>
</div>
<style lang="scss">
.yesno-container {
padding: .25rem .5rem .25rem .25rem;
max-width: fit-content;
border-radius: 1.25rem;
user-select: none;
cursor: pointer;
&.yes { background-color: var(--primary-button-enabled); }
&.no { background-color: #F06C63; }
&.unknown { background-color: #77818E; }
span {
margin-left: .25rem;
text-transform: uppercase;
font-weight: 500;
font-size: .625rem;
color: var(--theme-caption-color);
}
}
</style>