hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-23 19:44:59 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Update telegram sharing UI as designed (#503)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/ui/src/components/CheckBox.svelte
View File

@ -16,11 +16,13 @@
<script lang="ts">
export let checked: boolean = false
export let symbol: 'check' | 'minus' = 'check'
export let circle: boolean = false
export let primaryColor: boolean = false
</script>
<label class="checkbox">
<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"/>
{#if symbol === 'minus'}
<rect class="check" x="4" y="7.4" width="8" height="1.2"/>
@ -55,6 +57,12 @@
visibility: visible;
fill: var(--theme-button-bg-enabled);
}
&.primaryColor > .back {
fill: var(--trans-primary-button-bg);
}
&.primaryColor > .check {
fill: var(--theme-caption-color);
}
& > .border {
visibility: hidden;
}
@ -75,6 +83,10 @@
height: 1rem;
border-radius: .25rem;
&.circle {
border-radius: 50%;
}
.back {
fill: var(--theme-button-bg-hovered);
}

0
plugins/chunter-resources/src/components/icons/Share.svelte → packages/ui/src/components/icons/Share.svelte
View File

1
packages/ui/src/index.ts
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 IconUp } from './components/icons/Up.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 IconEdit } from './components/icons/Edit.svelte'
export { default as IconInfo } from './components/icons/Info.svelte'

52
plugins/telegram-resources/src/components/Chat.svelte
View File

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

38
plugins/telegram-resources/src/components/Message.svelte
View File

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