diff --git a/packages/presentation/lang/en.json b/packages/presentation/lang/en.json index 0104d79040..42654fad15 100644 --- a/packages/presentation/lang/en.json +++ b/packages/presentation/lang/en.json @@ -9,6 +9,7 @@ "NotSelected": "Not selected", "Deselect": "Deselect", "AddSocialLinks": "Add social links", + "EditSocialLinks": "Edit social links", "Change": "Change", "Remove": "Remove", "Members": "Members", diff --git a/packages/presentation/lang/ru.json b/packages/presentation/lang/ru.json index 6501865233..c4337c18f5 100644 --- a/packages/presentation/lang/ru.json +++ b/packages/presentation/lang/ru.json @@ -9,6 +9,7 @@ "NotSelected": "Не выбрано", "Deselect": "Снять выделение", "AddSocialLinks": "Добавить контактную информацию", + "EditSocialLinks": "Редактировать контактную информацию", "Change": "Изменить", "Remove": "Удалить", "Members": "Участники", diff --git a/packages/presentation/src/plugin.ts b/packages/presentation/src/plugin.ts index a739eda3cb..e23d7e02d0 100644 --- a/packages/presentation/src/plugin.ts +++ b/packages/presentation/src/plugin.ts @@ -38,6 +38,7 @@ export default plugin(presentationId, { NotSelected: '' as IntlString, Deselect: '' as IntlString, AddSocialLinks: '' as IntlString, + EditSocialLinks: '' as IntlString, Change: '' as IntlString, Remove: '' as IntlString, Members: '' as IntlString, diff --git a/plugins/contact-resources/src/components/ChannelsDropdown.svelte b/plugins/contact-resources/src/components/ChannelsDropdown.svelte index 78923237ca..d89a8ff661 100644 --- a/plugins/contact-resources/src/components/ChannelsDropdown.svelte +++ b/plugins/contact-resources/src/components/ChannelsDropdown.svelte @@ -26,6 +26,7 @@ import ChannelsPopup from './ChannelsPopup.svelte' import ChannelEditor from './ChannelEditor.svelte' import { NotificationClientImpl } from '@anticrm/notification-resources' + import { onDestroy } from 'svelte' export let value: AttachedData<Channel>[] | Channel | null export let editable = false @@ -40,6 +41,8 @@ const lastViews = notificationClient.getLastViews() const dispatch = createEventDispatcher() + let editMode = false + interface Item { label: IntlString icon: Asset @@ -159,8 +162,10 @@ } else if (displayItems[n].value === '') dropItem(n) saveItems() if (actions.length > 0 && addBtn) { - if (result === undefined) addBtn.focus() - else addBtn.click() + if (result !== undefined) addBtn.click() + else disableEdit() + } else { + disableEdit() } }, result => { @@ -190,7 +195,11 @@ ) } const showMenu = (ev: MouseEvent): void => { - showPopup(Menu, { actions }, ev.target as HTMLElement, () => {}, result => { + showPopup(Menu, { actions }, ev.target as HTMLElement, (result) => { + if (result === undefined) { + disableEdit() + } + }, result => { if (result != undefined && displayItems.length > 0) { if (result === 'left') { closePopup() @@ -203,9 +212,30 @@ }) } let copied: boolean = false -</script> + let div: HTMLDivElement + function listener (e: MouseEvent): void { + if (e.target !== null && !div.contains(e.target as Node)) { + disableEdit() + } + } + + function enableEdit () { + window.addEventListener('click', listener) + editMode = true + } + + function disableEdit () { + window.removeEventListener('click', listener) + editMode = false + } + + onDestroy(() => { + window.removeEventListener('click', listener) + }) +</script> <div + bind:this={div} class="{displayItems.length === 0 ? 'clear-mins' : 'buttons-group'} {kind === 'no-border' ? 'xsmall-gap' : 'xxsmall-gap'}" class:short={displayItems.length > 4 && length === 'short'} > @@ -213,7 +243,7 @@ {#if item.value === ''} <Button icon={item.icon} {kind} {size} {shape} click={item.value === ''} - on:click={(ev) => { if (editable) editChannel(item, i, ev) }} + on:click={(ev) => { if (editMode) editChannel(item, i, ev) }} /> {:else} <div class="tooltip-container"> @@ -221,14 +251,17 @@ <Button bind:input={btns[i]} icon={item.icon} {kind} {size} {shape} - highlight={item.integration || item.notification} + highlight={item.integration || item.notification || editMode} on:click={(ev) => { - if (item.integration || item.notification) dispatch('click', item) - if (editable) editChannel(item, i, ev) - if (!copied && !editable) { - navigator.clipboard.writeText(item.value) - copied = true - setTimeout(() => { copied = false }, 1000) + if (editMode) { + editChannel(item, i, ev) + } else { + dispatch('click', item) + if (!copied) { + navigator.clipboard.writeText(item.value) + copied = true + setTimeout(() => { copied = false }, 1000) + } } }} /> @@ -239,9 +272,10 @@ <Button bind:input={addBtn} icon={contact.icon.SocialEdit} - label={presentation.string.AddSocialLinks} + highlight={editMode} + label={editMode ? presentation.string.AddSocialLinks : presentation.string.EditSocialLinks} {kind} {size} {shape} - on:click={showMenu} + on:click={editMode ? showMenu : enableEdit} /> {/if} </div> diff --git a/tests/sanity/tests/settings.spec.ts b/tests/sanity/tests/settings.spec.ts index c194a8f3c3..466034700c 100644 --- a/tests/sanity/tests/settings.spec.ts +++ b/tests/sanity/tests/settings.spec.ts @@ -22,6 +22,7 @@ test.describe('contact tests', () => { // Fill [placeholder="Location"] await page.fill('[placeholder="Location"]', 'LoPlaza') // Click .flex-center.icon-button + await page.click('button:has-text("Edit social links")') await page.click('button:has-text("Add social links")') // Click [placeholder="john\.appleseed\@apple\.com"] await page.click('button:has-text("Email")')