mirror of
https://github.com/hcengineering/platform.git
synced 2025-01-26 05:14:39 +00:00
Fix Card footer (#178)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
bdf41f17d4
commit
83f68f7e00
@ -22,10 +22,8 @@
|
||||
|
||||
// import Close from './internal/icons/Close.svelte'
|
||||
// import ScrollBox from './ScrollBox.svelte'
|
||||
import { Button, Label, CircleButton } from '@anticrm/ui'
|
||||
import { Button, Label } from '@anticrm/ui'
|
||||
import SpaceSelect from './SpaceSelect.svelte'
|
||||
import Edit from './icons/Edit.svelte'
|
||||
import Mail from './icons/Mail.svelte'
|
||||
|
||||
export let spaceClass: Ref<Class<Space>>
|
||||
export let space: Ref<Space>
|
||||
@ -33,7 +31,6 @@
|
||||
export let okLabel: IntlString
|
||||
export let okAction: () => void
|
||||
export let canSave: boolean = false
|
||||
export let contacts: boolean = true
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
@ -45,17 +42,13 @@
|
||||
<div class="tool"><Button disabled={!canSave} label={okLabel} size={'small'} transparent on:click={() => { okAction(); dispatch('close') }} /></div>
|
||||
</div>
|
||||
<div class="content"><slot /></div>
|
||||
<div class="flex-col pool" class:shrink={contacts}>
|
||||
<div class="flex-col pool" class:shrink={$$slots.contacts}>
|
||||
<div class="separator" />
|
||||
<SpaceSelect _class={spaceClass} label={'Title'} placeholder={'Select Project'} bind:value={space} />
|
||||
</div>
|
||||
{#if contacts}
|
||||
{#if $$slots.contacts}
|
||||
<div class="flex-between contacts">
|
||||
<div class="flex-row-center">
|
||||
<CircleButton icon={Mail} />
|
||||
<CircleButton icon={Edit} />
|
||||
</div>
|
||||
<CircleButton icon={Edit} />
|
||||
<slot name="contacts" />
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
@ -65,7 +58,9 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 20rem;
|
||||
min-width: 20rem;
|
||||
max-width: 20rem;
|
||||
border-radius: 1.25rem;
|
||||
|
||||
.header {
|
||||
|
||||
188
packages/presentation/src/components/Channels.svelte
Normal file
188
packages/presentation/src/components/Channels.svelte
Normal file
@ -0,0 +1,188 @@
|
||||
<!--
|
||||
// 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 { Ref } from '@anticrm/core'
|
||||
import type { IntlString, Asset } from '@anticrm/platform'
|
||||
import type { Channel, ChannelProvider } from '@anticrm/contact'
|
||||
import { getClient } from '..'
|
||||
|
||||
import { Icon } from '@anticrm/ui'
|
||||
import IconCopy from './icons/Copy.svelte'
|
||||
|
||||
import contact from '@anticrm/contact'
|
||||
|
||||
export let value: Channel[] | null
|
||||
export let size: 'small' | 'medium' = 'medium'
|
||||
export let reverse: boolean = false
|
||||
|
||||
interface Item {
|
||||
label: IntlString,
|
||||
icon: Asset,
|
||||
value: string
|
||||
}
|
||||
|
||||
const client = getClient()
|
||||
|
||||
async function getProviders(): Promise<Map<Ref<ChannelProvider>, ChannelProvider>> {
|
||||
const providers = await client.findAll(contact.class.ChannelProvider, {})
|
||||
const map = new Map<Ref<ChannelProvider>, ChannelProvider>()
|
||||
for (const provider of providers) { map.set(provider._id, provider) }
|
||||
return map
|
||||
}
|
||||
|
||||
async function update(value: Channel[]) {
|
||||
const result = []
|
||||
const map = await getProviders()
|
||||
for (const item of value) {
|
||||
const provider = map.get(item.provider)
|
||||
if (provider) {
|
||||
result.push({
|
||||
label: provider.label as IntlString,
|
||||
icon: provider.icon as Asset,
|
||||
value: item.value,
|
||||
})
|
||||
} else {
|
||||
console.log('provider not found: ', item.provider)
|
||||
}
|
||||
}
|
||||
displayItems = result
|
||||
}
|
||||
|
||||
$: if (value) update(value)
|
||||
|
||||
let displayItems: Item[] = []
|
||||
</script>
|
||||
|
||||
<div class="container" class:reverse on:click|stopPropagation={() => {}}>
|
||||
{#each displayItems as item}
|
||||
<div class="circle list list-{size}">
|
||||
<div class="icon" class:small={size === 'small'}>
|
||||
<Icon icon={item.icon} size={'small'}/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window">
|
||||
<div class="circle circle-icon">
|
||||
<div class="icon"><Icon icon={item.icon} size={'small'}/></div>
|
||||
</div>
|
||||
<div class="flex-grow flex-col caption-color">
|
||||
<div class="overflow-label label">{item.label}</div>
|
||||
<div class="overflow-label">{item.value}</div>
|
||||
</div>
|
||||
<div class="button" on:click|preventDefault={() => { alert('Copied: ' + item.value) }}>
|
||||
<IconCopy size={'small'}/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
&.reverse { flex-direction: row-reverse; }
|
||||
|
||||
.circle {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid var(--theme-bg-focused-color);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
.small {
|
||||
transform-origin: center center;
|
||||
transform: scale(.75);
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
margin-right: .75rem;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
|
||||
.icon {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
&:hover {
|
||||
border-color: var(--theme-bg-focused-border);
|
||||
z-index: 5;
|
||||
.icon { opacity: 1; }
|
||||
& + .window {
|
||||
z-index: 4;
|
||||
visibility: visible;
|
||||
}
|
||||
&::after { content: ''; }
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -1rem;
|
||||
}
|
||||
}
|
||||
.list-small {
|
||||
margin-right: .25rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
.list-medium {
|
||||
margin-right: .5rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.window {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
top: 2.25rem;
|
||||
right: 0;
|
||||
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);
|
||||
visibility: hidden;
|
||||
|
||||
&:hover {
|
||||
z-index: 4;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
.label {
|
||||
font-weight: 500;
|
||||
font-size: .75rem;
|
||||
}
|
||||
.button {
|
||||
margin-left: 1.5rem;
|
||||
opacity: .4;
|
||||
cursor: pointer;
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
@ -22,3 +22,4 @@ export { default as Avatar } from './components/Avatar.svelte'
|
||||
export { default as MessageViewer } from './components/MessageViewer.svelte'
|
||||
export { default as AttributeEditor } from './components/AttributeEditor.svelte'
|
||||
export { default as Card } from './components/Card.svelte'
|
||||
export { default as Channels } from './components/Channels.svelte'
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
transform: scale(.75);
|
||||
pointer-events: none;
|
||||
}
|
||||
&:hover { background-color: var(--theme-bg-accent-hover); }
|
||||
&:hover { border-color: var(--theme-bg-focused-border); }
|
||||
&:active { background-color: var(--theme-bg-accent-color); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,164 +15,10 @@
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import type { Ref } from '@anticrm/core'
|
||||
import type { IntlString, Asset } from '@anticrm/platform'
|
||||
import type { Channel, ChannelProvider } from '@anticrm/contact'
|
||||
import { getClient } from '@anticrm/presentation'
|
||||
|
||||
import { Icon } from '@anticrm/ui'
|
||||
import IconCopy from './icons/Copy.svelte'
|
||||
|
||||
import contact from '@anticrm/contact'
|
||||
|
||||
export let value: Channel[] | null
|
||||
|
||||
interface Item {
|
||||
label: IntlString,
|
||||
icon: Asset,
|
||||
value: string
|
||||
}
|
||||
|
||||
const client = getClient()
|
||||
|
||||
async function getProviders(): Promise<Map<Ref<ChannelProvider>, ChannelProvider>> {
|
||||
const providers = await client.findAll(contact.class.ChannelProvider, {})
|
||||
const map = new Map<Ref<ChannelProvider>, ChannelProvider>()
|
||||
for (const provider of providers) { map.set(provider._id, provider) }
|
||||
return map
|
||||
}
|
||||
|
||||
async function update(value: Channel[]) {
|
||||
const result = []
|
||||
const map = await getProviders()
|
||||
for (const item of value) {
|
||||
const provider = map.get(item.provider)
|
||||
if (provider) {
|
||||
result.push({
|
||||
label: provider.label as IntlString,
|
||||
icon: provider.icon as Asset,
|
||||
value: item.value,
|
||||
})
|
||||
} else {
|
||||
console.log('provider not found: ', item.provider)
|
||||
}
|
||||
}
|
||||
displayItems = result
|
||||
}
|
||||
|
||||
$: if (value) update(value)
|
||||
|
||||
let displayItems: Item[] = []
|
||||
import type { Channel } from '@anticrm/contact'
|
||||
import { Channels } from '@anticrm/presentation'
|
||||
|
||||
export let value: Channel[] | null
|
||||
</script>
|
||||
|
||||
<div class="container" on:click|stopPropagation={() => {}}>
|
||||
{#each displayItems as item}
|
||||
<div class="circle list">
|
||||
<div class="icon"><Icon icon={item.icon} size={'small'}/></div>
|
||||
</div>
|
||||
<div class="window">
|
||||
<div class="circle circle-icon">
|
||||
<div class="icon"><Icon icon={item.icon} size={'small'}/></div>
|
||||
</div>
|
||||
<div class="flex-grow flex-col caption-color">
|
||||
<div class="overflow-label label">{item.label}</div>
|
||||
<div class="overflow-label">{item.value}</div>
|
||||
</div>
|
||||
<div class="button" on:click|preventDefault={() => { alert('Copied: ' + item.value) }}>
|
||||
<IconCopy size={'small'}/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
|
||||
.circle {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid var(--theme-bg-focused-color);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
transform-origin: center center;
|
||||
transform: scale(.75);
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
margin-right: .75rem;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
|
||||
.icon {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-right: .25rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-bg-focused-border);
|
||||
z-index: 5;
|
||||
.icon { opacity: 1; }
|
||||
& + .window {
|
||||
z-index: 4;
|
||||
visibility: visible;
|
||||
}
|
||||
&::after { content: ''; }
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.window {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
top: 2.25rem;
|
||||
right: 0;
|
||||
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);
|
||||
visibility: hidden;
|
||||
|
||||
&:hover {
|
||||
z-index: 4;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
.label {
|
||||
font-weight: 500;
|
||||
font-size: .75rem;
|
||||
}
|
||||
.button {
|
||||
margin-left: 1.5rem;
|
||||
opacity: .4;
|
||||
cursor: pointer;
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
<Channels {value} size={'small'} reverse />
|
||||
|
||||
@ -17,21 +17,25 @@
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import type { Ref, Space, Doc } from '@anticrm/core'
|
||||
|
||||
import { getClient, Card } from '@anticrm/presentation'
|
||||
import { getClient, Card, Channels } from '@anticrm/presentation'
|
||||
|
||||
import recruit from '../plugin'
|
||||
import chunter from '@anticrm/chunter'
|
||||
import type { Candidate } from '@anticrm/recruit'
|
||||
import type { Attachment } from '@anticrm/chunter'
|
||||
|
||||
import { EditBox, Link, showPopup, IconFile as FileIcon } from '@anticrm/ui'
|
||||
import { EditBox, Link, showPopup, Component, CircleButton, IconFile as FileIcon } 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 PDFViewer from './PDFViewer.svelte'
|
||||
import Girl from '../../img/girl.png'
|
||||
import Elon from '../../img/elon.png'
|
||||
import Bond from '../../img/bond.png'
|
||||
|
||||
import equals from 'deep-equal'
|
||||
|
||||
export let space: Ref<Space>
|
||||
|
||||
const object: Candidate = {
|
||||
@ -86,6 +90,17 @@
|
||||
|
||||
let inputFile: HTMLInputElement
|
||||
let kl: number = 0
|
||||
let changed = false
|
||||
|
||||
function isChanged(): void {
|
||||
for (const key in newValue) {
|
||||
if (!equals((newValue as any)[key], (object as any)[key])) {
|
||||
changed = true
|
||||
return
|
||||
}
|
||||
}
|
||||
changed = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- <DialogHeader {space} {object} {newValue} {resume} create={true} on:save={createCandidate}/> -->
|
||||
@ -111,9 +126,9 @@
|
||||
</div>
|
||||
|
||||
<div class="flex-col">
|
||||
<div class="name"><EditBox placeholder="Name*" /></div>
|
||||
<div class="name"><EditBox placeholder="Surname*" /></div>
|
||||
<div class="city"><EditBox placeholder="Location" /></div>
|
||||
<div class="name"><EditBox placeholder="Name*" maxWidth="9.5rem"/></div>
|
||||
<div class="name"><EditBox placeholder="Surname*" maxWidth="9.5rem" /></div>
|
||||
<div class="city"><EditBox placeholder="Location" maxWidth="9.5rem" /></div>
|
||||
<div class="flex resume">
|
||||
{#if kl === 0}
|
||||
<a href={'#'} on:click={ () => { showPopup(PDFViewer, { file: resume.uuid }, 'right') } }>Upload resume</a>
|
||||
@ -124,12 +139,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<svelte:fragment slot="contacts">
|
||||
<Channels value={newValue.channels} />
|
||||
<CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: newValue.channels ?? [] }, ev.target, (result) => { newValue.channels = result; isChanged() })} />
|
||||
</svelte:fragment>
|
||||
</Card>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../../../packages/theme/styles/mixins.scss';
|
||||
|
||||
.avatar {
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user