wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-06-08 08:51:12 +00:00
Code Issues Actions 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"> <script lang="ts">
import type { Attachment } from '@anticrm/attachment' import type { Attachment } from '@anticrm/attachment'
import { getResource } from '@anticrm/platform' 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 { Action } from '@anticrm/view'
import { getFileUrl } from '@anticrm/presentation' import { getFileUrl } from '@anticrm/presentation'
@ -55,19 +55,9 @@
} }
</script> </script>
<div class="actions"> <div class="flex">
<a class="downloadButton" href={getFileUrl(attachment.file)} download={attachment.name} on:click|stopPropagation> <a class="mr-1" href={getFileUrl(attachment.file)} download={attachment.name} on:click|stopPropagation>
<Icon icon={FileDownload} size={'small'} /> <ActionIcon icon={FileDownload} size={'small'} action={() => {}} />
</a> </a>
<ActionIcon icon={IconMoreH} size={'small'} action={showMenu} /> <ActionIcon icon={IconMoreH} size={'small'} action={showMenu} />
</div> </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> </script>
{#if attachments.length} {#if attachments.length}
<div class="container"> <div class="flex-col">
{#each attachments as attachment} {#each attachments as attachment}
<div class="item"> <div class="step-tb75">
<AttachmentPreview value={attachment} isSaved={savedAttachmentsIds?.includes(attachment._id) ?? false} /> <AttachmentPreview value={attachment} isSaved={savedAttachmentsIds?.includes(attachment._id) ?? false} />
</div> </div>
{/each} {/each}
</div> </div>
{/if} {/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) $: type = getType(value.type)
</script> </script>
<div class="flex-row-center"> {#if type === 'image'}
{#if type === 'image'} <div
<div class="content flex-center buttonContainer cursor-pointer"
class="content flex-center buttonContainer cursor-pointer" on:click={() => {
on:click={() => { closeTooltip()
closeTooltip() showPopup(PDFViewer, { file: value.file, name: value.name, contentType: value.type }, 'right')
showPopup(PDFViewer, { file: value.file, name: value.name, contentType: value.type }, 'right') }}
}} >
> <img src={getFileUrl(value.file)} alt={value.name} />
<img src={getFileUrl(value.file)} alt={value.name} /> <div class="actions conner">
<div class="actions"> <AttachmentActions attachment={value} {isSaved} />
<AttachmentActions attachment={value} {isSaved} />
</div>
</div> </div>
{:else if type === 'audio'} </div>
<div class="buttonContainer"> {:else if type === 'audio'}
<AudioPlayer {value} /> <div class="buttonContainer">
<div class="actions"> <AudioPlayer {value} />
<AttachmentActions attachment={value} {isSaved} /> <div class="actions conner" style:padding={'0.125rem 0.25rem'}>
</div> <AttachmentActions attachment={value} {isSaved} />
</div> </div>
{:else if type === 'video'} </div>
<div class="content buttonContainer flex-center"> {:else if type === 'video'}
<video controls> <div class="content buttonContainer flex-center">
<source src={getFileUrl(value.file)} type={value.type} /> <video controls>
<track kind="captions" label={value.name} /> <source src={getFileUrl(value.file)} type={value.type} />
<div class="container"> <track kind="captions" label={value.name} />
<AttachmentPresenter {value} /> <div class="container">
</div> <AttachmentPresenter {value} />
</video>
<div class="actions">
<AttachmentActions attachment={value} {isSaved} />
</div> </div>
</video>
<div class="actions conner">
<AttachmentActions attachment={value} {isSaved} />
</div> </div>
{:else} </div>
<div class="flex container buttonContainer"> {:else}
<AttachmentPresenter {value} /> <div class="flex container buttonContainer extraWidth">
<div class="actions"> <AttachmentPresenter {value} />
<AttachmentActions attachment={value} {isSaved} /> <div class="actions conner">
</div> <AttachmentActions attachment={value} {isSaved} />
</div> </div>
{/if} </div>
</div> {/if}
<style lang="scss"> <style lang="scss">
.container { .container {
background-color: var(--theme-bg-accent-color); background-color: var(--board-card-bg-color);
border: 1px solid var(--theme-bg-accent-color); border: 1px solid var(--button-border-color);
border-radius: 0.75rem; border-radius: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
} }
.buttonContainer { .buttonContainer {
align-items: flex-start; position: relative;
width: fit-content;
height: fit-content;
&.extraWidth {
padding-right: 2.5rem;
}
.actions { .actions {
margin-left: 0.5rem;
visibility: hidden; 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, telegram.class.Message,
{ attachedTo: channelId }, { attachedTo: channelId },
(res) => { (res) => {
messages = res messages = res.reverse()
if (channel !== undefined) { if (channel !== undefined) {
notificationClient.updateLastView(channel._id, channel._class, undefined, true) notificationClient.updateLastView(channel._id, channel._class, undefined, true)
} }