mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 11:31:57 +03:00
Update CreateVacancy & CreateCandidates layouts. Add Dropdown. (#292)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
15f309c2db
commit
b80efb543c
116
packages/presentation/src/components/SpaceCreateCard.svelte
Normal file
116
packages/presentation/src/components/SpaceCreateCard.svelte
Normal file
@ -0,0 +1,116 @@
|
||||
<!--
|
||||
// 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 { IntlString } from '@anticrm/platform'
|
||||
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import { Button, Label } from '@anticrm/ui'
|
||||
|
||||
export let label: IntlString
|
||||
export let okAction: () => void
|
||||
export let canSave: boolean = false
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<form class="card-container" on:submit|preventDefault={ () => {} }>
|
||||
<div class="card-bg" />
|
||||
<div class="flex-between header">
|
||||
<div class="overflow-label label"><Label {label} /></div>
|
||||
{#if $$slots.error}
|
||||
<div class="flex-grow error">
|
||||
<slot name="error" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="content"><slot /></div>
|
||||
<div class="footer">
|
||||
<Button disabled={!canSave} label={'Create'} size={'small'} transparent primary on:click={() => { okAction(); dispatch('close') }} />
|
||||
<Button label={'Cancel'} size={'small'} transparent on:click={() => { dispatch('close') }} />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style lang="scss">
|
||||
.card-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 20rem;
|
||||
min-width: 20rem;
|
||||
max-width: 20rem;
|
||||
border-radius: 1.25rem;
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
padding: 1.75rem;
|
||||
|
||||
.label {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
|
||||
.error {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 3.25rem;
|
||||
left: 1.75rem;
|
||||
right: 1.75rem;
|
||||
font-weight: 500;
|
||||
font-size: .75rem;
|
||||
color: var(--system-error-color);
|
||||
&:empty { visibility: hidden; }
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
margin: 0 1.75rem .75rem;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
direction: rtl;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
column-gap: .75rem;
|
||||
padding: 1rem 1.75rem 1.75rem;
|
||||
height: 5.25rem;
|
||||
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 1.25rem 1.25rem;
|
||||
}
|
||||
|
||||
.card-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--theme-card-bg);
|
||||
border-radius: 1.25rem;
|
||||
backdrop-filter: blur(24px);
|
||||
box-shadow: var(--theme-card-shadow);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -27,3 +27,4 @@ export { default as Channels } from './components/Channels.svelte'
|
||||
export { default as Backlink } from './components/Backlink.svelte'
|
||||
export { default as PDFViewer } from './components/PDFViewer.svelte'
|
||||
export { default as MessageBox } from './components/MessageBox.svelte'
|
||||
export { default as SpaceCreateCard } from './components/SpaceCreateCard.svelte'
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
--theme-bg-focused-color: rgba(255, 255, 255, .1);
|
||||
--theme-bg-focused-border: rgba(255, 255, 255, .4);
|
||||
--theme-bg-accent-error: rgba(251, 158, 158, .06);
|
||||
--theme-on-color: #94AEF3;
|
||||
--theme-on-color: #4474F6;
|
||||
--theme-off-color: #77818E;
|
||||
--theme-bg-check: #F2F2F2;
|
||||
--theme-tooltip-color: #2C2C34;
|
||||
@ -155,7 +155,7 @@
|
||||
--theme-bg-focused-color: rgba(255, 255, 255, .1);
|
||||
--theme-bg-focused-border: rgba(255, 255, 255, .4);
|
||||
--theme-bg-accent-error: rgba(251, 158, 158, .06);
|
||||
--theme-on-color: #94AEF3;
|
||||
--theme-on-color: #4474F6;
|
||||
--theme-off-color: #77818E;
|
||||
--theme-bg-check: #F2F2F2;
|
||||
--theme-tooltip-color: #4D4C58;
|
||||
|
||||
@ -161,6 +161,7 @@ table {
|
||||
.step-tb75 + .step-tb75 { margin-top: .75rem; }
|
||||
|
||||
.ml-2 { margin-left: .5rem; }
|
||||
.mr-1 { margin-right: .25rem; }
|
||||
.mt-5 { margin-top: 1.25rem; }
|
||||
.mb-1 { margin-bottom: .25rem; }
|
||||
|
||||
|
||||
23
packages/ui/img/google.svg
Normal file
23
packages/ui/img/google.svg
Normal file
@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#B82C2E;}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#6FA94C;}
|
||||
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#687EB9;}
|
||||
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#E6C12D;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M4.9,11.3c0.6-1.3,1.5-2.5,2.5-3.6c2.3-2.4,5.1-3.9,8.4-4.5c4.6-0.7,8.7,0.4,12.3,3.4c0.2,0.2,0.3,0.3,0,0.5
|
||||
c-1.3,1.2-2.5,2.5-3.7,3.7c-0.1,0.1-0.2,0.3-0.4,0.1c-3.1-2.9-8.2-2.8-11.6,0.3c-1.1,1.1-2,2.3-2.5,3.8c-0.1-0.1-0.2-0.1-0.2-0.2
|
||||
C8,13.7,6.5,12.5,4.9,11.3z"/>
|
||||
<path class="st1" d="M9.8,20.9c0.4,1.1,1,2.2,1.8,3.1c2.1,2.3,4.7,3.3,7.9,3c1.5-0.2,2.8-0.6,4-1.4c0.1,0.1,0.2,0.2,0.4,0.3
|
||||
c1.5,1.1,2.9,2.3,4.4,3.4c-1.6,1.5-3.5,2.5-5.6,3.1c-5,1.3-9.6,0.5-13.7-2.8c-1.7-1.3-3-3-4-4.9C6.5,23.4,8.2,22.2,9.8,20.9z"/>
|
||||
<path class="st2" d="M28.2,29.4c-1.5-1.1-2.9-2.3-4.4-3.4c-0.1-0.1-0.2-0.2-0.4-0.3c1-0.8,1.8-1.6,2.3-2.8c0.2-0.4,0.4-0.9,0.5-1.4
|
||||
c0.1-0.3,0.1-0.5-0.3-0.5c-2.4,0-4.8,0-7.2,0c-0.5,0-0.5,0-0.5-0.5c0-1.6,0-3.3,0-4.9c0-0.3,0.1-0.4,0.4-0.4c4.5,0,8.9,0,13.4,0
|
||||
c0.2,0,0.4,0,0.4,0.3c0.6,3.9,0.1,7.6-1.9,11.1C29.9,27.6,29.2,28.6,28.2,29.4z"/>
|
||||
<path class="st3" d="M9.8,20.9c-1.6,1.3-3.3,2.5-4.9,3.8c-0.8-1.5-1.3-3.1-1.5-4.7c-0.4-2.9,0-5.6,1.3-8.3c0.1-0.1,0.2-0.3,0.2-0.4
|
||||
c1.6,1.2,3.1,2.4,4.7,3.6C9.7,14.9,9.8,15,9.8,15C9.2,17,9.2,18.9,9.8,20.9z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
25
packages/ui/img/tesla.svg
Normal file
25
packages/ui/img/tesla.svg
Normal file
@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:url(#SVGID_1_);}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_2_);}
|
||||
</style>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="14.3791" y1="-2.5354" x2="21.6209" y2="38.5354">
|
||||
<stop offset="5.076140e-03" style="stop-color:#C52229"/>
|
||||
<stop offset="1" style="stop-color:#802022"/>
|
||||
</linearGradient>
|
||||
<rect class="st0" width="36" height="36"/>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="18" y1="6.2743" x2="18" y2="29.7257">
|
||||
<stop offset="0" style="stop-color:#FFFFFF"/>
|
||||
<stop offset="0.5066" style="stop-color:#FDFDFD"/>
|
||||
<stop offset="0.7696" style="stop-color:#F5F5F5"/>
|
||||
<stop offset="0.9763" style="stop-color:#E8E8E8"/>
|
||||
<stop offset="1" style="stop-color:#E6E6E6"/>
|
||||
</linearGradient>
|
||||
<path class="st1" d="M7.3,9.8c2.8-1.1,7.4-1.3,9.4-1.2l1.3,1.6l1.3-1.6c2-0.1,6.6,0.1,9.4,1.2c-0.4,0.7-2.1,1.8-3,2
|
||||
c-0.1-1.4-2.1-1.7-4-1.7L18,29.7l-3.7-19.7c-2,0-4,0.3-4,1.7C9.4,11.6,7.7,10.5,7.3,9.8L7.3,9.8z M6,7.8l0.7,1.1
|
||||
c2.7-1,5.9-1.4,9.3-1.5c1.3,0,2.6,0,3.9,0c3.4,0.1,6.6,0.6,9.3,1.5L30,7.8c-3.2-1.1-6.6-1.4-10-1.5c-1.3,0-2.6,0-4,0
|
||||
C12.6,6.4,9.2,6.7,6,7.8L6,7.8z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -24,7 +24,7 @@
|
||||
export let direction: TooltipAligment | undefined
|
||||
export let icon: Asset | AnySvelteComponent
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
export let action: () => Promise<void>
|
||||
export let action: (ev?: Event) => Promise<void>
|
||||
export let invisible: boolean = false
|
||||
</script>
|
||||
|
||||
|
||||
101
packages/ui/src/components/Dropdown.svelte
Normal file
101
packages/ui/src/components/Dropdown.svelte
Normal file
@ -0,0 +1,101 @@
|
||||
<!--
|
||||
// Copyright © 2020 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 { onMount } from 'svelte'
|
||||
import type { IntlString, Asset } from '@anticrm/platform'
|
||||
|
||||
import Label from './Label.svelte'
|
||||
import Icon from './Icon.svelte'
|
||||
import { showPopup } from '..'
|
||||
import type { AnySvelteComponent, ListItem } from '../types'
|
||||
import DropdownPopup from './DropdownPopup.svelte'
|
||||
import Add from './icons/Add.svelte'
|
||||
|
||||
import tesla from '../../img/tesla.svg'
|
||||
import google from '../../img/google.svg'
|
||||
|
||||
export let icon: Asset | AnySvelteComponent = Add
|
||||
export let label: IntlString
|
||||
export let placeholder: IntlString
|
||||
export let items: ListItem[] = [{ item: tesla, label: 'Tesla' }, { item: google, label: 'Google' }]
|
||||
export let selected: ListItem | undefined
|
||||
export let show: boolean = false
|
||||
|
||||
let btn: HTMLElement
|
||||
let container: HTMLElement
|
||||
|
||||
onMount(() => {
|
||||
if (btn && show) {
|
||||
btn.click()
|
||||
show = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="flex-row-center container" bind:this={container}
|
||||
on:click|preventDefault={() => {
|
||||
btn.focus()
|
||||
showPopup(DropdownPopup, { title: label, caption: 'suggested', items }, container, (result) => {
|
||||
if (result) selected = result
|
||||
})
|
||||
}}
|
||||
>
|
||||
<button class="btn" class:selected bind:this={btn}>
|
||||
{#if selected}
|
||||
<img src={selected.item} alt={selected.label} />
|
||||
{:else}
|
||||
{#if typeof (icon) === 'string'}
|
||||
<Icon {icon} size={'small'} />
|
||||
{:else}
|
||||
<svelte:component this={icon} size={'small'} />
|
||||
{/if}
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<div class="selectUser">
|
||||
<div class="title"><Label {label} /></div>
|
||||
<div class="caption-color" class:empty={selected ? false : true}>
|
||||
{#if selected}{selected.label}{:else}<Label label={placeholder} />{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container { cursor: pointer; }
|
||||
.btn {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
color: var(--theme-caption-color);
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--theme-card-divider);
|
||||
border-radius: .5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.selected {
|
||||
border-color: transparent;
|
||||
img { max-width: fit-content; }
|
||||
}
|
||||
|
||||
.selectUser {
|
||||
margin-left: .75rem;
|
||||
.title {
|
||||
font-size: .75rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-content-accent-color);
|
||||
}
|
||||
.empty { color: var(--theme-content-trans-color); }
|
||||
}
|
||||
</style>
|
||||
130
packages/ui/src/components/DropdownPopup.svelte
Normal file
130
packages/ui/src/components/DropdownPopup.svelte
Normal file
@ -0,0 +1,130 @@
|
||||
<!--
|
||||
// Copyright © 2020 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 type { IntlString } from '@anticrm/platform'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
|
||||
import Label from './Label.svelte'
|
||||
import EditWithIcon from './EditWithIcon.svelte'
|
||||
import IconSearch from './icons/Search.svelte'
|
||||
import type { ListItem } from '../types'
|
||||
|
||||
export let title: IntlString
|
||||
export let caption: IntlString
|
||||
export let items: ListItem[]
|
||||
export let header: boolean = true
|
||||
|
||||
let search: string = ''
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<div class="popup">
|
||||
<div class="card-bg" />
|
||||
<div class="title"><Label label={title} /></div>
|
||||
{#if header}
|
||||
<div class="flex-col header">
|
||||
<EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
|
||||
<div class="caption"><Label label={caption} /></div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="scroll">
|
||||
<div class="flex-col box">
|
||||
{#each items.filter((x) => x.label.toLowerCase().includes(search.toLowerCase())) as item}
|
||||
<button class="flex-row-center menu-item" on:click={() => { dispatch('close', item) }}>
|
||||
<div class="flex-center img">
|
||||
<img src={item.item} alt={item.label} />
|
||||
</div>
|
||||
<div class="flex-grow caption-color">{item.label}</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.popup {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: .75rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 1rem 1rem .25rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.header {
|
||||
margin: .25rem 1rem 0;
|
||||
text-align: left;
|
||||
.caption {
|
||||
margin-top: .5rem;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--theme-content-trans-color);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll {
|
||||
flex-grow: 1;
|
||||
padding: .5rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
.box {
|
||||
margin-right: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
text-align: left;
|
||||
padding: .5rem;
|
||||
border-radius: .5rem;
|
||||
|
||||
.img {
|
||||
margin-right: .75rem;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
color: var(--theme-caption-color);
|
||||
border-radius: .5rem;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover { background-color: var(--theme-button-bg-focused); }
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px var(--primary-button-outline);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.card-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--theme-card-bg);
|
||||
border-radius: .75rem;
|
||||
backdrop-filter: blur(24px);
|
||||
box-shadow: var(--theme-card-shadow);
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
@ -15,10 +15,13 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte'
|
||||
import type { IntlString } from '@anticrm/platform'
|
||||
import type { IntlString, Asset } from '@anticrm/platform'
|
||||
import type { AnySvelteComponent } from '../types'
|
||||
import Label from './Label.svelte'
|
||||
import Icon from './Icon.svelte'
|
||||
|
||||
export let label: IntlString | undefined
|
||||
export let icon: Asset | AnySvelteComponent | undefined = undefined
|
||||
export let maxWidth: string | undefined
|
||||
export let value: string | undefined
|
||||
export let placeholder: string = 'placeholder'
|
||||
@ -53,12 +56,23 @@
|
||||
<div class="container" on:click={() => { input.focus() }}>
|
||||
<div class="hidden-text" bind:this={text}></div>
|
||||
{#if label}<div class="label"><Label label={label}/></div>{/if}
|
||||
<div class="wrap">
|
||||
{#if password}
|
||||
<input bind:this={input} type="password" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
|
||||
{:else}
|
||||
<input bind:this={input} type="text" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
|
||||
<div class="flex-row-center">
|
||||
{#if icon}
|
||||
<div class="icon">
|
||||
{#if typeof (icon) === 'string'}
|
||||
<Icon {icon} size={'small'}/>
|
||||
{:else}
|
||||
<svelte:component this={icon} size={'small'} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="wrap">
|
||||
{#if password}
|
||||
<input bind:this={input} type="password" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
|
||||
{:else}
|
||||
<input bind:this={input} type="text" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -95,22 +109,26 @@
|
||||
margin-bottom: .25rem;
|
||||
font-size: .75rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
opacity: .8;
|
||||
color: var(--theme-content-accent-color);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: .25rem;
|
||||
transform-origin: center center;
|
||||
transform: scale(.75);
|
||||
color: var(--theme-content-trans-color);
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
color: var(--theme-caption-color);
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--theme-content-dark-color);
|
||||
}
|
||||
&::placeholder { color: var(--theme-content-dark-color); }
|
||||
|
||||
&::-webkit-contacts-auto-fill-button,
|
||||
&::-webkit-credentials-auto-fill-button {
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
border-radius: 3.125rem;
|
||||
// vertical-align: top;
|
||||
background-color: var(--theme-off-color);
|
||||
border: 1px solid transparent;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
transition: left .2s;
|
||||
&:before {
|
||||
content: '';
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
span {
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
color: var(--theme-caption-trans-color);
|
||||
color: var(--theme-content-trans-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'var(--theme-caption-color)'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
|
||||
@ -58,6 +58,7 @@ export { default as Popup } from './components/Popup.svelte'
|
||||
export { default as CircleButton } from './components/CircleButton.svelte'
|
||||
export { default as Link } from './components/Link.svelte'
|
||||
export { default as TimeSince } from './components/TimeSince.svelte'
|
||||
export { default as Dropdown } from './components/Dropdown.svelte'
|
||||
|
||||
export { default as IconAdd } from './components/icons/Add.svelte'
|
||||
export { default as IconClose } from './components/icons/Close.svelte'
|
||||
|
||||
@ -33,7 +33,7 @@ export type AnyComponent = Resource<AnySvelteComponent>
|
||||
export interface Action {
|
||||
label: IntlString
|
||||
icon: Asset | AnySvelteComponent
|
||||
action: (props: any) => Promise<void>
|
||||
action: (props: any, ev?: Event) => Promise<void>
|
||||
}
|
||||
|
||||
export interface IPopupItem {
|
||||
@ -65,3 +65,8 @@ export interface LabelAndProps {
|
||||
component?: AnySvelteComponent | AnyComponent
|
||||
props?: any
|
||||
}
|
||||
|
||||
export interface ListItem {
|
||||
item: any | undefined
|
||||
label: string
|
||||
}
|
||||
|
||||
@ -15,9 +15,9 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import { TextArea, EditBox, Dialog, ToggleWithLabel, Grid } from '@anticrm/ui'
|
||||
import { IconFolder, EditBox, ToggleWithLabel, Grid } from '@anticrm/ui'
|
||||
|
||||
import { getClient } from '@anticrm/presentation'
|
||||
import { getClient, SpaceCreateCard } from '@anticrm/presentation'
|
||||
|
||||
import recruit from '../plugin'
|
||||
import core from '@anticrm/core'
|
||||
@ -39,13 +39,15 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog label={recruit.string.CreateCandidates}
|
||||
okLabel={recruit.string.CreateCandidates}
|
||||
okAction={createCandidates}
|
||||
on:close={() => { dispatch('close') }}>
|
||||
<Grid column={1}>
|
||||
<EditBox label={recruit.string.CandidatesName} bind:value={name} focus/>
|
||||
<TextArea label={recruit.string.CandidatesDescription} bind:value={description}/>
|
||||
<SpaceCreateCard
|
||||
label={recruit.string.CreateCandidates}
|
||||
okAction={createCandidates}
|
||||
canSave={name ? true : false}
|
||||
on:close={() => { dispatch('close') }}
|
||||
>
|
||||
<Grid column={1} rowGap={1.5}>
|
||||
<EditBox label={recruit.string.CandidatesName} icon={IconFolder} bind:value={name} placeholder={'The Boring Pool'} focus/>
|
||||
<!-- <TextArea label={recruit.string.CandidatesDescription} bind:value={description}/> -->
|
||||
<ToggleWithLabel label={recruit.string.MakePrivate} description={recruit.string.MakePrivateDescription}/>
|
||||
</Grid>
|
||||
</Dialog>
|
||||
</SpaceCreateCard>
|
||||
|
||||
@ -0,0 +1,98 @@
|
||||
<!--
|
||||
// Copyright © 2020 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 { createEventDispatcher } from 'svelte'
|
||||
import { TextArea, EditBox, Dialog, ToggleWithLabel, Tabs, Section, Grid, IconFile } from '@anticrm/ui'
|
||||
|
||||
import { getClient } from '@anticrm/presentation'
|
||||
import Recruiting from './icons/Recruiting.svelte'
|
||||
|
||||
import recruit from '../plugin'
|
||||
import core from '@anticrm/core'
|
||||
import view from '@anticrm/view'
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let name: string = ''
|
||||
let description: string = ''
|
||||
|
||||
const client = getClient()
|
||||
|
||||
const colors = [
|
||||
'#7C6FCD',
|
||||
'#6F7BC5',
|
||||
'#A5D179',
|
||||
'#77C07B',
|
||||
'#F28469'
|
||||
]
|
||||
|
||||
async function createVacancy() {
|
||||
const id = await client.createDoc(recruit.class.Vacancy, core.space.Model, {
|
||||
name,
|
||||
description,
|
||||
private: false,
|
||||
members: [],
|
||||
states: [],
|
||||
order: []
|
||||
})
|
||||
const s1 = await client.createDoc(core.class.State, id, {
|
||||
title: 'Initial',
|
||||
color: colors[0]
|
||||
})
|
||||
const s2 = await client.createDoc(core.class.State, id, {
|
||||
title: 'Interview 1',
|
||||
color: colors[1]
|
||||
})
|
||||
const s3 = await client.createDoc(core.class.State, id, {
|
||||
title: 'Interview 2',
|
||||
color: colors[2]
|
||||
})
|
||||
const s4 = await client.createDoc(core.class.State, id, {
|
||||
title: 'Interview 3',
|
||||
color: colors[3]
|
||||
})
|
||||
const s5 = await client.createDoc(core.class.State, id, {
|
||||
title: 'Interview 4',
|
||||
color: colors[4]
|
||||
})
|
||||
const s6 = await client.createDoc(core.class.State, id, {
|
||||
title: 'Final',
|
||||
color: colors[0]
|
||||
})
|
||||
// await client.updateDoc(recruit.class.Vacancy, core.space.Model, id, {
|
||||
// })
|
||||
await client.createDoc(view.class.Kanban, id, {
|
||||
attachedTo: id,
|
||||
states: [s1, s2, s3, s4, s5, s6],
|
||||
order: []
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog label={recruit.string.CreateVacancy}
|
||||
okLabel={recruit.string.CreateVacancy}
|
||||
okAction={createVacancy}
|
||||
on:close={() => { dispatch('close') }}>
|
||||
<Section icon={IconFile} label={'General Information'}>
|
||||
<Grid column={1}>
|
||||
<EditBox label={recruit.string.VacancyName} bind:value={name} placeholder="Software Engineer" maxWidth="39rem" focus/>
|
||||
<TextArea label={recruit.string.VacancyDescription} bind:value={description} placeholder="Start typing..."/>
|
||||
<ToggleWithLabel label={recruit.string.MakePrivate} description={recruit.string.MakePrivateDescription}/>
|
||||
</Grid>
|
||||
</Section>
|
||||
<Section icon={Recruiting} label={'Vacancy Members'}>
|
||||
</Section>
|
||||
</Dialog>
|
||||
@ -15,10 +15,11 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import { TextArea, EditBox, Dialog, ToggleWithLabel, Tabs, Section, Grid, IconFile } from '@anticrm/ui'
|
||||
import { EditBox, Grid, Dropdown } from '@anticrm/ui'
|
||||
|
||||
import { getClient } from '@anticrm/presentation'
|
||||
import Recruiting from './icons/Recruiting.svelte'
|
||||
import { getClient, SpaceCreateCard } from '@anticrm/presentation'
|
||||
import Company from './icons/Company.svelte'
|
||||
import Vacancy from './icons/Vacancy.svelte'
|
||||
|
||||
import recruit from '../plugin'
|
||||
import core from '@anticrm/core'
|
||||
@ -82,17 +83,14 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog label={recruit.string.CreateVacancy}
|
||||
okLabel={recruit.string.CreateVacancy}
|
||||
okAction={createVacancy}
|
||||
on:close={() => { dispatch('close') }}>
|
||||
<Section icon={IconFile} label={'General Information'}>
|
||||
<Grid column={1}>
|
||||
<EditBox label={recruit.string.VacancyName} bind:value={name} placeholder="Software Engineer" maxWidth="39rem" focus/>
|
||||
<TextArea label={recruit.string.VacancyDescription} bind:value={description} placeholder="Start typing..."/>
|
||||
<ToggleWithLabel label={recruit.string.MakePrivate} description={recruit.string.MakePrivateDescription}/>
|
||||
</Grid>
|
||||
</Section>
|
||||
<Section icon={Recruiting} label={'Vacancy Members'}>
|
||||
</Section>
|
||||
</Dialog>
|
||||
<SpaceCreateCard
|
||||
label={recruit.string.CreateVacancy}
|
||||
okAction={createVacancy}
|
||||
canSave={name ? true : false}
|
||||
on:close={() => { dispatch('close') }}
|
||||
>
|
||||
<Grid column={1} rowGap={1.5}>
|
||||
<EditBox label={recruit.string.VacancyName} bind:value={name} icon={Vacancy} placeholder="The boring vacancy" maxWidth="39rem" focus/>
|
||||
<Dropdown icon={Company} label={'Company *'} placeholder={'The Boring Company'} />
|
||||
</Grid>
|
||||
</SpaceCreateCard>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'var(--theme-caption-color)'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
@ -43,8 +43,8 @@
|
||||
const addSpace: Action = {
|
||||
label: model.addSpaceLabel,
|
||||
icon: IconAdd,
|
||||
action: async (): Promise<void> => {
|
||||
showPopup(model.createComponent, {}, 'right')
|
||||
action: async (_id: Ref<Doc>, ev?: Event): Promise<void> => {
|
||||
showPopup(model.createComponent, {}, ev?.target as HTMLElement)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
</span>
|
||||
{#each actions as action}
|
||||
<div class="tool">
|
||||
<ActionIcon label={action.label} icon={action.icon} size={'small'} action={() => { action.action(_id) }} />
|
||||
<ActionIcon label={action.label} icon={action.icon} size={'small'} action={(ev) => { action.action(_id, ev) }} />
|
||||
</div>
|
||||
{/each}
|
||||
{#if notifications > 0 && collapsed}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user