mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-13 11:50:56 +00:00
Rework UserBox to use Popup (#130)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
3b50e07756
commit
601d971147
133
packages/presentation/src/components/UserBox copy.svelte
Normal file
133
packages/presentation/src/components/UserBox copy.svelte
Normal file
@ -0,0 +1,133 @@
|
||||
<!--
|
||||
// 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 { PopupMenu, Label, EditWithIcon, IconSearch } from '@anticrm/ui'
|
||||
import Avatar from './Avatar.svelte'
|
||||
import UserInfo from './UserInfo.svelte'
|
||||
import Add from './icons/Add.svelte'
|
||||
import Close from './icons/Close.svelte'
|
||||
|
||||
import type { Ref, Class } from '@anticrm/core'
|
||||
import type { Person } from '@anticrm/contact'
|
||||
import { createQuery } from '../utils'
|
||||
|
||||
export let _class: Ref<Class<Person>>
|
||||
export let title: IntlString
|
||||
export let caption: IntlString
|
||||
export let value: Ref<Person>
|
||||
export let show: boolean = false
|
||||
|
||||
let search: string = ''
|
||||
let selected: Person | undefined
|
||||
|
||||
let objects: Person[] = []
|
||||
|
||||
const query = createQuery()
|
||||
$: query.query(_class, {}, result => { objects = result })
|
||||
</script>
|
||||
|
||||
<div class="flex-row-center">
|
||||
<PopupMenu bind:show={show}>
|
||||
<button
|
||||
slot="trigger"
|
||||
class="focused-button btn"
|
||||
class:selected={show}
|
||||
on:click|preventDefault={() => {
|
||||
show = !show
|
||||
}}
|
||||
>
|
||||
{#if selected}
|
||||
<Avatar size={'medium'} />
|
||||
{:else}
|
||||
<div class="icon">
|
||||
{#if show}<Close size={'small'} />{:else}<Add size={'small'} />{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<div class="header">
|
||||
<div class="title"><Label label={title} /></div>
|
||||
<EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
|
||||
<div class="caption"><Label label={caption} /></div>
|
||||
</div>
|
||||
|
||||
{#each objects as person}
|
||||
<button class="menu-item" on:click={() => {
|
||||
selected = person
|
||||
value = person._id
|
||||
show = !show
|
||||
}}><UserInfo size={'medium'} value={person} /></button>
|
||||
{/each}
|
||||
</PopupMenu>
|
||||
|
||||
<div class="selectUser">
|
||||
<div class="title"><Label label={title} /></div>
|
||||
<div class="caption-color">
|
||||
{#if selected}{selected.firstName + ' ' + selected.lastName}{:else}<Label label={'Not selected'} />{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.btn {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: left;
|
||||
.title {
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.caption {
|
||||
margin: 1rem 0 .625rem .375rem;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--theme-content-dark-color);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
justify-content: start;
|
||||
padding: .375rem;
|
||||
border-radius: .5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-button-bg-pressed);
|
||||
border: 1px solid var(--theme-bg-accent-color);
|
||||
}
|
||||
&:focus {
|
||||
border: 1px solid var(--primary-button-focused-border);
|
||||
box-shadow: 0 0 0 3px var(--primary-button-outline);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.selectUser {
|
||||
margin-left: .75rem;
|
||||
.title {
|
||||
font-size: .75rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-content-accent-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -13,17 +13,17 @@
|
||||
// limitations under the License.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import type { IntlString } from '@anticrm/platform'
|
||||
|
||||
import { PopupMenu, Label, EditWithIcon, IconSearch } from '@anticrm/ui'
|
||||
import { Label, showPopup } from '@anticrm/ui'
|
||||
import Avatar from './Avatar.svelte'
|
||||
import UserInfo from './UserInfo.svelte'
|
||||
import UsersPopup from './UsersPopup.svelte'
|
||||
import Add from './icons/Add.svelte'
|
||||
import Close from './icons/Close.svelte'
|
||||
|
||||
import type { Ref, Class } from '@anticrm/core'
|
||||
import type { Person } from '@anticrm/contact'
|
||||
import { createQuery } from '../utils'
|
||||
|
||||
export let _class: Ref<Class<Person>>
|
||||
export let title: IntlString
|
||||
@ -31,48 +31,39 @@
|
||||
export let value: Ref<Person>
|
||||
export let show: boolean = false
|
||||
|
||||
let search: string = ''
|
||||
let selected: Person | undefined
|
||||
let btn: HTMLElement
|
||||
|
||||
let objects: Person[] = []
|
||||
|
||||
const query = createQuery()
|
||||
$: query.query(_class, {}, result => { objects = result })
|
||||
onMount(() => {
|
||||
if (btn && show) {
|
||||
btn.click()
|
||||
show = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="flex-row-center">
|
||||
<PopupMenu bind:show={show}>
|
||||
<button
|
||||
slot="trigger"
|
||||
class="focused-button btn"
|
||||
class:selected={show}
|
||||
on:click|preventDefault={() => {
|
||||
show = !show
|
||||
}}
|
||||
>
|
||||
{#if selected}
|
||||
<Avatar size={'medium'} />
|
||||
{:else}
|
||||
<div class="icon">
|
||||
{#if show}<Close size={'small'} />{:else}<Add size={'small'} />{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<div class="header">
|
||||
<div class="title"><Label label={title} /></div>
|
||||
<EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
|
||||
<div class="caption"><Label label={caption} /></div>
|
||||
</div>
|
||||
|
||||
{#each objects as person}
|
||||
<button class="menu-item" on:click={() => {
|
||||
selected = person
|
||||
value = person._id
|
||||
show = !show
|
||||
}}><UserInfo size={'medium'} value={person} /></button>
|
||||
{/each}
|
||||
</PopupMenu>
|
||||
<button
|
||||
class="focused-button btn"
|
||||
class:selected={show}
|
||||
bind:this={btn}
|
||||
on:click|preventDefault={(ev) => {
|
||||
showPopup(UsersPopup, { _class, title, caption }, ev.target, (result) => {
|
||||
if (result) {
|
||||
selected = result
|
||||
value = result._id
|
||||
}
|
||||
})
|
||||
}}
|
||||
>
|
||||
{#if selected}
|
||||
<Avatar size={'medium'} />
|
||||
{:else}
|
||||
<div class="icon">
|
||||
{#if show}<Close size={'small'} />{:else}<Add size={'small'} />{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<div class="selectUser">
|
||||
<div class="title"><Label label={title} /></div>
|
||||
@ -90,38 +81,6 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: left;
|
||||
.title {
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.caption {
|
||||
margin: 1rem 0 .625rem .375rem;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--theme-content-dark-color);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
justify-content: start;
|
||||
padding: .375rem;
|
||||
border-radius: .5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-button-bg-pressed);
|
||||
border: 1px solid var(--theme-bg-accent-color);
|
||||
}
|
||||
&:focus {
|
||||
border: 1px solid var(--primary-button-focused-border);
|
||||
box-shadow: 0 0 0 3px var(--primary-button-outline);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.selectUser {
|
||||
margin-left: .75rem;
|
||||
.title {
|
||||
|
||||
94
packages/presentation/src/components/UsersPopup.svelte
Normal file
94
packages/presentation/src/components/UsersPopup.svelte
Normal file
@ -0,0 +1,94 @@
|
||||
<!--
|
||||
// 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, EditWithIcon, IconSearch } from '@anticrm/ui'
|
||||
import UserInfo from './UserInfo.svelte'
|
||||
|
||||
import type { Ref, Class } from '@anticrm/core'
|
||||
import type { Person } from '@anticrm/contact'
|
||||
import { createQuery } from '../utils'
|
||||
|
||||
export let _class: Ref<Class<Person>>
|
||||
export let title: IntlString
|
||||
export let caption: IntlString
|
||||
|
||||
let search: string = ''
|
||||
let objects: Person[] = []
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const query = createQuery()
|
||||
$: query.query(_class, {}, result => { objects = result })
|
||||
</script>
|
||||
|
||||
<div class="popup">
|
||||
<div class="header">
|
||||
<div class="title"><Label label={title} /></div>
|
||||
<EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
|
||||
<div class="caption"><Label label={caption} /></div>
|
||||
</div>
|
||||
{#each objects as person}
|
||||
<button class="menu-item" on:click={() => { dispatch('close', person) }}>
|
||||
<UserInfo size={'medium'} value={person} />
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.popup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-bg-hovered);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-radius: .75rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: left;
|
||||
.title {
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.caption {
|
||||
margin: 1rem 0 .625rem .375rem;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--theme-content-dark-color);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
justify-content: start;
|
||||
padding: .375rem;
|
||||
border-radius: .5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-button-bg-pressed);
|
||||
border: 1px solid var(--theme-bg-accent-color);
|
||||
}
|
||||
&:focus {
|
||||
border: 1px solid var(--primary-button-focused-border);
|
||||
box-shadow: 0 0 0 3px var(--primary-button-outline);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -48,7 +48,7 @@
|
||||
on:close={() => { dispatch('close') }}>
|
||||
<Section icon={File} label={'General Information'}>
|
||||
<Grid>
|
||||
<UserBox _class={recruit.class.Candidate} title='Candidate' caption='Candidates' bind:value={candidate} show/>
|
||||
<UserBox _class={recruit.class.Candidate} title='Candidate' caption='Candidates' bind:value={candidate} show />
|
||||
<DatePicker title={'Pick due date'} />
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user