Update CreateVacancy & CreateCandidates layouts. Add Dropdown. (#292)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-11-02 11:45:08 +03:00 committed by GitHub
parent 15f309c2db
commit b80efb543c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 569 additions and 50 deletions

View 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>

View File

@ -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'

View File

@ -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;

View File

@ -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; }

View 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
View 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

View File

@ -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>

View 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>

View 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>

View File

@ -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 {

View File

@ -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: '';

View File

@ -43,7 +43,7 @@
span {
display: block;
font-size: .75rem;
color: var(--theme-caption-trans-color);
color: var(--theme-content-trans-color);
}
}
</style>

View File

@ -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">

View File

@ -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'

View File

@ -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
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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)
}
}

View File

@ -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}