Update telegram sharing UI as designed (#503)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
This commit is contained in:
Denis Bykhov 2021-12-02 21:47:34 +06:00 committed by GitHub
parent 7d8880a0cd
commit 9cbd2f2160
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 75 additions and 30 deletions

View File

@ -16,11 +16,13 @@
<script lang="ts"> <script lang="ts">
export let checked: boolean = false export let checked: boolean = false
export let symbol: 'check' | 'minus' = 'check' export let symbol: 'check' | 'minus' = 'check'
export let circle: boolean = false
export let primaryColor: boolean = false
</script> </script>
<label class="checkbox"> <label class="checkbox">
<input class="chBox" type="checkbox" bind:checked={checked}> <input class="chBox" type="checkbox" bind:checked={checked}>
<svg class="checkSVG" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <svg class="checkSVG" class:circle class:primaryColor viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path class="back" d="M4,0h8c2.2,0,4,1.8,4,4v8c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4V4C0,1.8,1.8,0,4,0z"/> <path class="back" d="M4,0h8c2.2,0,4,1.8,4,4v8c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4V4C0,1.8,1.8,0,4,0z"/>
{#if symbol === 'minus'} {#if symbol === 'minus'}
<rect class="check" x="4" y="7.4" width="8" height="1.2"/> <rect class="check" x="4" y="7.4" width="8" height="1.2"/>
@ -55,6 +57,12 @@
visibility: visible; visibility: visible;
fill: var(--theme-button-bg-enabled); fill: var(--theme-button-bg-enabled);
} }
&.primaryColor > .back {
fill: var(--trans-primary-button-bg);
}
&.primaryColor > .check {
fill: var(--theme-caption-color);
}
& > .border { & > .border {
visibility: hidden; visibility: hidden;
} }
@ -75,6 +83,10 @@
height: 1rem; height: 1rem;
border-radius: .25rem; border-radius: .25rem;
&.circle {
border-radius: 50%;
}
.back { .back {
fill: var(--theme-button-bg-hovered); fill: var(--theme-button-bg-hovered);
} }

View File

@ -74,6 +74,7 @@ export { default as IconExpand } from './components/icons/Expand.svelte'
export { default as IconActivity } from './components/icons/Activity.svelte' export { default as IconActivity } from './components/icons/Activity.svelte'
export { default as IconUp } from './components/icons/Up.svelte' export { default as IconUp } from './components/icons/Up.svelte'
export { default as IconDown } from './components/icons/Down.svelte' export { default as IconDown } from './components/icons/Down.svelte'
export { default as IconShare } from './components/icons/Share.svelte'
export { default as IconDelete } from './components/icons/Delete.svelte' export { default as IconDelete } from './components/icons/Delete.svelte'
export { default as IconEdit } from './components/icons/Edit.svelte' export { default as IconEdit } from './components/icons/Edit.svelte'
export { default as IconInfo } from './components/icons/Info.svelte' export { default as IconInfo } from './components/icons/Info.svelte'

View File

@ -21,7 +21,7 @@
import type { TelegramMessage } from '@anticrm/telegram' import type { TelegramMessage } from '@anticrm/telegram'
import type { Contact, EmployeeAccount } from '@anticrm/contact' import type { Contact, EmployeeAccount } from '@anticrm/contact'
import contact from '@anticrm/contact' import contact from '@anticrm/contact'
import { Button, Grid, ScrollBox, showPopup } from '@anticrm/ui' import { ActionIcon, IconShare, Button, Grid, ScrollBox, showPopup } from '@anticrm/ui'
import Message from './Message.svelte' import Message from './Message.svelte'
import TelegramIcon from './icons/Telegram.svelte' import TelegramIcon from './icons/Telegram.svelte'
import { getCurrentAccount, Ref, Space } from '@anticrm/core' import { getCurrentAccount, Ref, Space } from '@anticrm/core'
@ -40,6 +40,7 @@
let account: EmployeeAccount | undefined let account: EmployeeAccount | undefined
let enabled: boolean let enabled: boolean
let selected: Ref<TelegramMessage>[] = [] let selected: Ref<TelegramMessage>[] = []
let selectable = false
const url = getMetadata(login.metadata.TelegramUrl) ?? '' const url = getMetadata(login.metadata.TelegramUrl) ?? ''
const messagesQuery = createQuery() const messagesQuery = createQuery()
@ -138,6 +139,7 @@
} }
function select (id: Ref<TelegramMessage>): void { function select (id: Ref<TelegramMessage>): void {
if (!selectable) return
const index = selected.indexOf(id) const index = selected.indexOf(id)
if (index === -1) { if (index === -1) {
selected.push(id) selected.push(id)
@ -173,20 +175,19 @@
} }
function clear (): void { function clear (): void {
selectable = false
selected = [] selected = []
} }
</script> </script>
<div class="flex-row-center header"> <div class="flex-between header">
{#if selected.length} <div class="flex">
<div class="flex-between actions">
<Button label={`Share ${selected.length}`} primary on:click={share} />
<Button label='Cancel' on:click={clear} />
</div>
{:else}
<div class="icon"><TelegramIcon size={'small'} /></div> <div class="icon"><TelegramIcon size={'small'} /></div>
<div class="title">Telegram</div> <div class="title">Telegram</div>
{/if} </div>
<div>
<ActionIcon icon={IconShare} size='medium' label='Share messages' direction='bottom' action={() => { selectable = !selectable }} />
</div>
</div> </div>
<div class="flex-col h-full right-content"> <div class="flex-col h-full right-content">
<ScrollBox vertical stretch> <ScrollBox vertical stretch>
@ -196,16 +197,30 @@
{#if isNewDate(messages, i)} {#if isNewDate(messages, i)}
<DateView {message} /> <DateView {message} />
{/if} {/if}
<Message {message} selected={selected.includes(message._id)} name={getName(messages, account, i)} on:click={() => {select(message._id)}}/> <Message {message} {selectable} selected={selected.includes(message._id)} name={getName(messages, account, i)} on:select={() => {select(message._id)}}/>
{/each} {/each}
</Grid> </Grid>
{/if} {/if}
</ScrollBox> </ScrollBox>
</div> </div>
<div class="ref-input">
{#if enabled} <div class="ref-input" class:selectable>
<ReferenceInput on:message={onMessage}/> {#if selectable}
<div class="flex-between">
<span>{selected.length} messages selected</span>
<div class="flex">
<div>
<Button label='Cancel' on:click={clear} />
</div>
<div class="ml-3">
<Button label='Publish selected' primary disabled={!selected.length} on:click={share} />
</div>
</div>
</div>
{:else if enabled}
<ReferenceInput on:message={onMessage}/>
{:else} {:else}
<ReferenceInput on:message={onMessage}/>
<div class="flex-center"> <div class="flex-center">
<Button label='Connect' primary on:click={(e) => { <Button label='Connect' primary on:click={(e) => {
showPopup(Connect, {}, e.target) showPopup(Connect, {}, e.target)
@ -217,15 +232,10 @@
<style lang="scss"> <style lang="scss">
.header { .header {
flex-shrink: 0; flex-shrink: 0;
padding: 0 2.5rem; padding: 0 5.5rem 0 2.5rem;
height: 4.5rem; height: 4.5rem;
border-bottom: 1px solid var(--theme-card-divider); border-bottom: 1px solid var(--theme-card-divider);
.actions {
width: 100%;
margin-right: 4rem;
}
.icon { .icon {
opacity: 0.6; opacity: 0.6;
} }
@ -241,6 +251,10 @@
.ref-input { .ref-input {
padding: 1.5rem 2.5rem; padding: 1.5rem 2.5rem;
&.selectable {
border-top: 1px solid var(--theme-card-divider);
}
} }
.right-content { .right-content {

View File

@ -17,10 +17,13 @@
import type { TelegramMessage } from '@anticrm/telegram' import type { TelegramMessage } from '@anticrm/telegram'
import { MessageViewer } from '@anticrm/presentation' import { MessageViewer } from '@anticrm/presentation'
import { formatName } from '@anticrm/contact' import { formatName } from '@anticrm/contact'
import { CheckBox } from '@anticrm/ui'
import { createEventDispatcher } from 'svelte'
export let message: TelegramMessage export let message: TelegramMessage
export let name: string | undefined = undefined export let name: string | undefined = undefined
export let selected: boolean = false export let selected: boolean = false
export let selectable: boolean = false
export let colors: string[] = ['#A5D179', '#77C07B', '#60B96E', '#45AEA3', '#46CBDE', '#47BDF6', export let colors: string[] = ['#A5D179', '#77C07B', '#60B96E', '#45AEA3', '#46CBDE', '#47BDF6',
'#5AADF6', '#73A6CD', '#B977CB', '#7C6FCD', '#6F7BC5', '#F28469'] '#5AADF6', '#73A6CD', '#B977CB', '#7C6FCD', '#6F7BC5', '#F28469']
@ -34,34 +37,45 @@
} }
return colors[Math.abs(hash) % colors.length] return colors[Math.abs(hash) % colors.length]
} }
const dispatch = createEventDispatcher()
</script> </script>
<div class="message" class:selected class:incoming={message.incoming} on:click> <div class={message.incoming ? "flex-between" : "flex-row-center"} class:outcoming={!message.incoming} on:click={() => { dispatch('select', message) }}>
{#if name} <div class="message" class:incoming={message.incoming} class:mr-4={selectable} class:selected>
<div class="name" style="color: {getNameColor(name)}">{formatName(name)}</div> {#if name}
{/if} <div class="name" style="color: {getNameColor(name)}">{formatName(name)}</div>
<div class="flex"> {/if}
<div class="text"><MessageViewer message={message.content}/></div> <div class="flex">
<div class="time">{new Date(message.modifiedOn).toLocaleString('default', { hour: 'numeric', minute: 'numeric'})}</div> <div class="text"><MessageViewer message={message.content}/></div>
<div class="time">{new Date(message.modifiedOn).toLocaleString('default', { hour: 'numeric', minute: 'numeric'})}</div>
</div>
</div> </div>
{#if selectable}
<div class="check">
<CheckBox circle primaryColor bind:checked={selected} />
</div>
{/if}
</div> </div>
<style lang="scss"> <style lang="scss">
.outcoming {
justify-content: end;
}
.message { .message {
max-width: 66%; max-width: 66%;
border-radius: .75rem; border-radius: .75rem;
padding: .75rem; padding: .75rem;
width: fit-content; width: fit-content;
justify-self: flex-end;
background-color: rgba(67, 67, 72, .6); background-color: rgba(67, 67, 72, .6);
&.incoming { &.incoming {
background-color: rgba(67, 67, 72, .3); background-color: rgba(67, 67, 72, .3);
justify-self: flex-start;
} }
&.selected { &.selected {
background-color: var(--theme-content-trans-color) !important; background-color: var(--primary-button-enabled) !important;
} }
.text { .text {
@ -78,4 +92,8 @@
} }
} }
.check {
justify-self: flex-end;
}
</style> </style>