hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-11-23 14:06:00 +03:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Telegram: latest messages below. Update AttachmentPreview layout. (#1768)

Browse Source
This commit is contained in:
Alexander Platov 2022-05-18 07:05:29 +03:00 committed by GitHub
parent fb0340eb24
commit c6b757d67c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 68 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
plugins/attachment-resources/src/components/AttachmentActions.svelte
View File

@ -15,7 +15,7 @@
<script lang="ts">
import type { Attachment } from '@anticrm/attachment'
import { getResource } from '@anticrm/platform'
import { showPopup, ActionIcon, IconMoreH, Menu, Icon } from '@anticrm/ui'
import { showPopup, ActionIcon, IconMoreH, Menu } from '@anticrm/ui'
import { Action } from '@anticrm/view'
import { getFileUrl } from '@anticrm/presentation'
@ -55,19 +55,9 @@
}
</script>
<div class="actions">
<a class="downloadButton" href={getFileUrl(attachment.file)} download={attachment.name} on:click|stopPropagation>
<Icon icon={FileDownload} size={'small'} />
<div class="flex">
<a class="mr-1" href={getFileUrl(attachment.file)} download={attachment.name} on:click|stopPropagation>
<ActionIcon icon={FileDownload} size={'small'} action={() => {}} />
</a>
<ActionIcon icon={IconMoreH} size={'small'} action={showMenu} />
</div>
<style lang="scss">
.actions {
display: flex;
}
.downloadButton {
margin-right: 0.2rem;
}
</style>

10
plugins/attachment-resources/src/components/AttachmentList.svelte
View File

@ -22,17 +22,11 @@
</script>
{#if attachments.length}
<div class="container">
<div class="flex-col">
{#each attachments as attachment}
<div class="item">
<div class="step-tb75">
<AttachmentPreview value={attachment} isSaved={savedAttachmentsIds?.includes(attachment._id) ?? false} />
</div>
{/each}
</div>
{/if}
<style lang="scss">
.item {
padding: 0.5rem;
}
</style>

104
plugins/attachment-resources/src/components/AttachmentPreview.svelte
View File

@ -28,63 +28,81 @@
$: type = getType(value.type)
</script>
<div class="flex-row-center">
{#if type === 'image'}
<div
class="content flex-center buttonContainer cursor-pointer"
on:click={() => {
closeTooltip()
showPopup(PDFViewer, { file: value.file, name: value.name, contentType: value.type }, 'right')
}}
>
<img src={getFileUrl(value.file)} alt={value.name} />
<div class="actions">
<AttachmentActions attachment={value} {isSaved} />
</div>
{#if type === 'image'}
<div
class="content flex-center buttonContainer cursor-pointer"
on:click={() => {
closeTooltip()
showPopup(PDFViewer, { file: value.file, name: value.name, contentType: value.type }, 'right')
}}
>
<img src={getFileUrl(value.file)} alt={value.name} />
<div class="actions conner">
<AttachmentActions attachment={value} {isSaved} />
</div>
{:else if type === 'audio'}
<div class="buttonContainer">
<AudioPlayer {value} />
<div class="actions">
<AttachmentActions attachment={value} {isSaved} />
</div>
</div>
{:else if type === 'audio'}
<div class="buttonContainer">
<AudioPlayer {value} />
<div class="actions conner" style:padding={'0.125rem 0.25rem'}>
<AttachmentActions attachment={value} {isSaved} />
</div>
{:else if type === 'video'}
<div class="content buttonContainer flex-center">
<video controls>
<source src={getFileUrl(value.file)} type={value.type} />
<track kind="captions" label={value.name} />
<div class="container">
<AttachmentPresenter {value} />
</div>
</video>
<div class="actions">
<AttachmentActions attachment={value} {isSaved} />
</div>
{:else if type === 'video'}
<div class="content buttonContainer flex-center">
<video controls>
<source src={getFileUrl(value.file)} type={value.type} />
<track kind="captions" label={value.name} />
<div class="container">
<AttachmentPresenter {value} />
</div>
</video>
<div class="actions conner">
<AttachmentActions attachment={value} {isSaved} />
</div>
{:else}
<div class="flex container buttonContainer">
<AttachmentPresenter {value} />
<div class="actions">
<AttachmentActions attachment={value} {isSaved} />
</div>
</div>
{:else}
<div class="flex container buttonContainer extraWidth">
<AttachmentPresenter {value} />
<div class="actions conner">
<AttachmentActions attachment={value} {isSaved} />
</div>
{/if}
</div>
</div>
{/if}
<style lang="scss">
.container {
background-color: var(--theme-bg-accent-color);
border: 1px solid var(--theme-bg-accent-color);
border-radius: 0.75rem;
background-color: var(--board-card-bg-color);
border: 1px solid var(--button-border-color);
border-radius: 0.5rem;
padding: 0.5rem;
}
.buttonContainer {
align-items: flex-start;
position: relative;
width: fit-content;
height: fit-content;
&.extraWidth {
padding-right: 2.5rem;
}
.actions {
margin-left: 0.5rem;
visibility: hidden;
position: absolute;
top: 0.25rem;
right: 0.25rem;
padding: 0.25rem;
background-color: var(--button-bg-color);
border-radius: 0.75rem;
box-shadow: var(--board-card-shadow);
&.conner {
top: 0;
right: 0;
padding: 0.25rem;
border-radius: 0 0.4rem 0 0.25rem;
}
}
}

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

@ -74,7 +74,7 @@
telegram.class.Message,
{ attachedTo: channelId },
(res) => {
messages = res
messages = res.reverse()
if (channel !== undefined) {
notificationClient.updateLastView(channel._id, channel._class, undefined, true)
}