Fix PDF viewer close with Cross mark (#942)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
This commit is contained in:
Andrey Sobolev 2022-02-07 16:07:35 +07:00 committed by GitHub
parent fa171012d5
commit dab0f365f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 17 deletions

View File

@ -14,14 +14,13 @@
-->
<script lang="ts">
import { Button, CircleButton, IconClose, IconArrowLeft } from '@anticrm/ui'
import Avatar from './Avatar.svelte'
import ExpandUp from './icons/ExpandUp.svelte'
import ExpandDown from './icons/ExpandDown.svelte'
import { getFileUrl } from '../utils'
import { Button, CircleButton, IconClose } from '@anticrm/ui'
import { createEventDispatcher } from 'svelte'
import presentation from '..'
import { getFileUrl } from '../utils'
import Avatar from './Avatar.svelte'
import ExpandDown from './icons/ExpandDown.svelte'
import ExpandUp from './icons/ExpandUp.svelte'
export let file: string
export let name: string
@ -33,9 +32,9 @@
<div class="pdfviewer-container">
<div class="flex-between header">
<div class="flex-center arrow-back">
<!-- <div class="flex-center arrow-back">
<div class="icon"><IconArrowLeft size={'small'} /></div>
</div>
</div> -->
<div class="flex-row-center flex-grow">
<Avatar size={'medium'} />
<div class="flex-col user">
@ -44,7 +43,7 @@
</div>
</div>
<div class="flex-row-center">
<div class="tool" on:click={() => dispatch('close')}><IconClose size={'small'} /></div>
<div class="tool" on:click={() => dispatch('close')}><IconClose fill={'black'} size={'small'} /></div>
</div>
</div>
@ -67,7 +66,7 @@
.pdfviewer-container {
display: flex;
flex-direction: column;
width: 45rem;
width: 55rem;
height: 100%;
background-color: #F2F2F2;
border-radius: 1.25rem 1.875rem 1.875rem 1.25rem;

View File

@ -1,6 +1,6 @@
<script lang="ts">
export let size: 'small' | 'medium' | 'large'
const fill: string = 'currentColor'
export let fill: string = 'currentColor'
</script>
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">

View File

@ -24,29 +24,32 @@
const maxLenght: number = 16
const trimFilename = (fname: string): string => (fname.length > maxLenght)
? fname.substr(0, (maxLenght - 1) / 2) + '...' + fname.substr(-(maxLenght - 1) / 2)
: fname
? fname.substr(0, (maxLenght - 1) / 2) + '...' + fname.substr(-(maxLenght - 1) / 2)
: fname
function iconLabel(name: string): string {
function iconLabel (name: string): string {
const parts = name.split('.')
const ext = parts[parts.length - 1]
return ext.substring(0, 4).toUpperCase()
}
function openEmbedded(contentType: string) {
function openEmbedded (contentType: string) {
return contentType.includes('application/pdf') || contentType.startsWith('image/')
}
</script>
<div class="flex-row-center">
{#if openEmbedded(value.type)}
<div class="flex-center icon" on:click={()=> { closeTooltip(); showPopup(PDFViewer, { file: value.file, name: value.name }, 'right') }}>{iconLabel(value.name)}</div>
<div class="flex-center icon" on:click={() => {
closeTooltip()
showPopup(PDFViewer, { file: value.file, name: value.name }, 'right')
}}>{iconLabel(value.name)}</div>
{:else}
<a class="no-line" href={getFileUrl(value.file)} download={value.name}><div class="flex-center icon">{iconLabel(value.name)}</div></a>
{/if}
<div class="flex-col info">
{#if openEmbedded(value.type)}
<div class="name" on:click={()=> { closeTooltip(); showPopup(PDFViewer, { file: value.file, name: value.name }, 'right') }}>{trimFilename(value.name)}</div>
<div class="name" on:click={() => { closeTooltip(); showPopup(PDFViewer, { file: value.file, name: value.name }, 'right') }}>{trimFilename(value.name)}</div>
{:else}
<div class="name"><a href={getFileUrl(value.file)} download={value.name}>{trimFilename(value.name)}</a></div>
{/if}