Notification (#934)

Signed-off-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>
This commit is contained in:
Denis Bykhov
2022-02-07 10:03:14 +01:00
committed by GitHub
parent bf2e0aba30
commit e026683db0
64 changed files with 847 additions and 140 deletions
@@ -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>