mirror of
https://github.com/hcengineering/platform.git
synced 2026-09-20 16:47:50 +02:00
flush to develop (#380)
Signed-off-by: Alexander Platov <sas_lord@mail.ru> Co-authored-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com> Co-authored-by: Andrey Sobolev <haiodo@gmail.com>
This commit is contained in:
Andrey Platov
co-authored by
Denis Bykhov
Andrey Sobolev
Denis Bykhov
Andrey Sobolev
parent
cd0e7da28e
commit
68ae2f2e31
@@ -20,14 +20,14 @@
|
||||
import type { Channel, ChannelProvider } from '@anticrm/contact'
|
||||
import { getClient } from '..'
|
||||
|
||||
import { AnyComponent, Icon } from '@anticrm/ui'
|
||||
import IconCopy from './icons/Copy.svelte'
|
||||
import { Tooltip, CircleButton } from '@anticrm/ui'
|
||||
import ChannelsPopup from './ChannelsPopup.svelte'
|
||||
|
||||
import contact from '@anticrm/contact'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
|
||||
export let value: Channel[] | null
|
||||
export let size: 'small' | 'medium' = 'medium'
|
||||
export let size: 'small' | 'medium' | 'large' | 'x-large' = 'large'
|
||||
export let reverse: boolean = false
|
||||
|
||||
interface Item {
|
||||
@@ -69,143 +69,20 @@
|
||||
$: if (value) update(value)
|
||||
|
||||
let displayItems: Item[] = []
|
||||
let divHTML: HTMLElement
|
||||
</script>
|
||||
|
||||
<div class="container" class:reverse>
|
||||
<div
|
||||
bind:this={divHTML}
|
||||
class="flex-row-center"
|
||||
class:safari-gap-1={size === 'small'}
|
||||
class:safari-gap-2={size !== 'small'}
|
||||
class:reverse
|
||||
on:click|stopPropagation={() => {}}
|
||||
>
|
||||
{#each displayItems as item}
|
||||
<div on:click|stopPropagation={() => {dispatch('click', 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 {reverse ? 'right' : 'left'}">
|
||||
<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>
|
||||
</div>
|
||||
<Tooltip component={ChannelsPopup} props={{ value: item }} label={undefined} anchor={divHTML}>
|
||||
<CircleButton icon={item.icon} {size} />
|
||||
</Tooltip>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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;
|
||||
|
||||
.small {
|
||||
transform-origin: center center;
|
||||
transform: scale(.55);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-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;
|
||||
bottom: -1rem;
|
||||
left: -100%;
|
||||
right: -100%;
|
||||
clip-path: polygon(0 100%, 25% 50%, 25% 0, 75% 0, 75% 50%, 100% 100%);
|
||||
// background-color: rgba(255, 255, 0, .5);
|
||||
}
|
||||
&:first-child:after {
|
||||
left: 0;
|
||||
right: -100%;
|
||||
clip-path: polygon(0 0, 0 100%, 100% 100%, 65% 50%, 65% 0);
|
||||
}
|
||||
}
|
||||
.list-small {
|
||||
margin-right: .25rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
.list-medium {
|
||||
margin-right: .5rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
.list:first-child:after {
|
||||
left: -100%;
|
||||
right: 0;
|
||||
clip-path: polygon(0 100%, 35% 50%, 35% 0, 100% 0, 100% 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.window {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
top: calc(100% + .5rem);
|
||||
min-width: 100%;
|
||||
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;
|
||||
}
|
||||
&.right { right: 0; }
|
||||
&.left { left: 0; }
|
||||
}
|
||||
}
|
||||
.label {
|
||||
font-weight: 500;
|
||||
font-size: .75rem;
|
||||
}
|
||||
.button {
|
||||
margin-left: 1.5rem;
|
||||
opacity: .4;
|
||||
cursor: pointer;
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
<!--
|
||||
// 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, Asset } from '@anticrm/platform'
|
||||
import { CircleButton, closeTooltip } from '@anticrm/ui'
|
||||
import IconCopy from './icons/Copy.svelte'
|
||||
|
||||
interface Item {
|
||||
label: IntlString,
|
||||
icon: Asset,
|
||||
value: string
|
||||
}
|
||||
|
||||
export let value: Item
|
||||
|
||||
const copyLink = (): void => {
|
||||
navigator.clipboard
|
||||
.writeText(value.value)
|
||||
// .then(() => {
|
||||
// console.log('Copied!', value.value)
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.log('Something went wrong', err)
|
||||
// })
|
||||
closeTooltip()
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex-row-center">
|
||||
<CircleButton icon={value.icon} size={'x-large'} />
|
||||
<div class="flex-col caption-color ml-3">
|
||||
<div class="label">{value.label}</div>
|
||||
<div class="overflow-label">{value.value}</div>
|
||||
</div>
|
||||
<div class="button" on:click|preventDefault={copyLink}>
|
||||
<IconCopy size={'small'}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.label {
|
||||
font-weight: 500;
|
||||
font-size: .75rem;
|
||||
}
|
||||
.button {
|
||||
margin-left: 1.5rem;
|
||||
color: var(--theme-content-dark-color);
|
||||
cursor: pointer;
|
||||
&:hover { color: var(--theme-caption-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">
|
||||
|
||||
@@ -37,6 +37,14 @@
|
||||
<code><svelte:self nodes={node.childNodes}/></code>
|
||||
{:else if node.nodeName === 'BR'}
|
||||
<br/>
|
||||
{:else if node.nodeName === 'H1'}
|
||||
<h1><svelte:self nodes={node.childNodes}/></h1>
|
||||
{:else if node.nodeName === 'H2'}
|
||||
<h2><svelte:self nodes={node.childNodes}/></h2>
|
||||
{:else if node.nodeName === 'UL'}
|
||||
<ul><svelte:self nodes={node.childNodes}/></ul>
|
||||
{:else if node.nodeName === 'LI'}
|
||||
<li><svelte:self nodes={node.childNodes}/></li>
|
||||
{:else if node.nodeName === 'SPAN'}
|
||||
<Person objectId={node.getAttribute('data-id')} title={node.getAttribute('data-label')} />
|
||||
{:else}
|
||||
|
||||
Reference in New Issue
Block a user