mirror of
https://github.com/hcengineering/platform.git
synced 2026-09-27 20:14:57 +02:00
Notification (#934)
Signed-off-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>
This commit is contained in:
@@ -1,101 +0,0 @@
|
||||
<!--
|
||||
// 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 { Channel, ChannelProvider } from '@anticrm/contact'
|
||||
import type { AttachedData, Doc, Ref } from '@anticrm/core'
|
||||
import type { Asset, IntlString } from '@anticrm/platform'
|
||||
import type { AnyComponent } from '@anticrm/ui'
|
||||
import { CircleButton, Tooltip } from '@anticrm/ui'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import { getClient } from '..'
|
||||
import { getChannelProviders } from '../utils'
|
||||
import ChannelsPopup from './ChannelsPopup.svelte'
|
||||
|
||||
export let value: AttachedData<Channel>[] | AttachedData<Channel> | null
|
||||
export let size: 'small' | 'medium' | 'large' | 'x-large' = 'large'
|
||||
export let reverse: boolean = false
|
||||
export let integrations: Set<Ref<Doc>> = new Set<Ref<Doc>>()
|
||||
|
||||
interface Item {
|
||||
label: IntlString
|
||||
icon: Asset
|
||||
value: string
|
||||
presenter?: AnyComponent
|
||||
integration: boolean
|
||||
}
|
||||
|
||||
const client = getClient()
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
function getProvider (item: AttachedData<Channel>, map: Map<Ref<ChannelProvider>, ChannelProvider>): any | undefined {
|
||||
const provider = map.get(item.provider)
|
||||
if (provider) {
|
||||
return {
|
||||
label: provider.label as IntlString,
|
||||
icon: provider.icon as Asset,
|
||||
value: item.value,
|
||||
presenter: provider.presenter,
|
||||
integration: provider.integrationType !== undefined ? integrations.has(provider.integrationType) : false
|
||||
}
|
||||
} else {
|
||||
console.log('provider not found: ', item.provider)
|
||||
}
|
||||
}
|
||||
|
||||
async function update (value: AttachedData<Channel>[] | AttachedData<Channel>) {
|
||||
const result = []
|
||||
const map = await getChannelProviders()
|
||||
if (Array.isArray(value)) {
|
||||
for (const item of value) {
|
||||
const provider = getProvider(item, map)
|
||||
if (provider !== undefined) {
|
||||
result.push(provider)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const provider = getProvider(value, map)
|
||||
if (provider !== undefined) {
|
||||
result.push(provider)
|
||||
}
|
||||
}
|
||||
displayItems = result
|
||||
}
|
||||
|
||||
$: if (value) update(value)
|
||||
|
||||
let displayItems: Item[] = []
|
||||
let divHTML: HTMLElement
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={divHTML}
|
||||
class="flex-row-center"
|
||||
class:safari-gap-1={size === 'small'}
|
||||
class:safari-gap-2={size !== 'small'}
|
||||
class:reverse
|
||||
>
|
||||
{#each displayItems as item}
|
||||
<div
|
||||
on:click|stopPropagation={() => {
|
||||
dispatch('click', item)
|
||||
}}
|
||||
>
|
||||
<Tooltip component={ChannelsPopup} props={{ value: item }} label={undefined} anchor={divHTML}>
|
||||
<CircleButton icon={item.icon} {size} primary={item.integration} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -1,65 +0,0 @@
|
||||
<!--
|
||||
// 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,8 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M11.5,1H6.6C5.3,1,4.2,2,4.1,3.3C2.9,3.5,2,4.6,2,5.8v6.7C2,13.9,3.1,15,4.5,15h4.9c1.3,0,2.4-1,2.5-2.3 c1.2-0.2,2.1-1.2,2.1-2.5V3.5C14,2.1,12.9,1,11.5,1z M9.4,14H4.5C3.7,14,3,13.3,3,12.5V5.8c0-0.7,0.5-1.3,1.1-1.4v5.8 c0,1.4,1.1,2.5,2.5,2.5h4.3C10.8,13.4,10.2,14,9.4,14z M13,10.2c0,0.8-0.7,1.5-1.5,1.5H6.6c-0.8,0-1.5-0.7-1.5-1.5V3.5 C5.1,2.7,5.8,2,6.6,2h4.9C12.3,2,13,2.7,13,3.5V10.2z"/>
|
||||
</svg>
|
||||
Reference in New Issue
Block a user