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"> <script lang="ts">
import { Button, CircleButton, IconClose, IconArrowLeft } from '@anticrm/ui' import { Button, CircleButton, IconClose } 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 { createEventDispatcher } from 'svelte' import { createEventDispatcher } from 'svelte'
import presentation from '..' 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 file: string
export let name: string export let name: string
@ -33,9 +32,9 @@
<div class="pdfviewer-container"> <div class="pdfviewer-container">
<div class="flex-between header"> <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 class="icon"><IconArrowLeft size={'small'} /></div>
</div> </div> -->
<div class="flex-row-center flex-grow"> <div class="flex-row-center flex-grow">
<Avatar size={'medium'} /> <Avatar size={'medium'} />
<div class="flex-col user"> <div class="flex-col user">
@ -44,7 +43,7 @@
</div> </div>
</div> </div>
<div class="flex-row-center"> <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>
</div> </div>
@ -67,7 +66,7 @@
.pdfviewer-container { .pdfviewer-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 45rem; width: 55rem;
height: 100%; height: 100%;
background-color: #F2F2F2; background-color: #F2F2F2;
border-radius: 1.25rem 1.875rem 1.875rem 1.25rem; border-radius: 1.25rem 1.875rem 1.875rem 1.25rem;

View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
export let size: 'small' | 'medium' | 'large' export let size: 'small' | 'medium' | 'large'
const fill: string = 'currentColor' export let fill: string = 'currentColor'
</script> </script>
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <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 maxLenght: number = 16
const trimFilename = (fname: string): string => (fname.length > maxLenght) const trimFilename = (fname: string): string => (fname.length > maxLenght)
? fname.substr(0, (maxLenght - 1) / 2) + '...' + fname.substr(-(maxLenght - 1) / 2) ? fname.substr(0, (maxLenght - 1) / 2) + '...' + fname.substr(-(maxLenght - 1) / 2)
: fname : fname
function iconLabel(name: string): string { function iconLabel (name: string): string {
const parts = name.split('.') const parts = name.split('.')
const ext = parts[parts.length - 1] const ext = parts[parts.length - 1]
return ext.substring(0, 4).toUpperCase() return ext.substring(0, 4).toUpperCase()
} }
function openEmbedded(contentType: string) { function openEmbedded (contentType: string) {
return contentType.includes('application/pdf') || contentType.startsWith('image/') return contentType.includes('application/pdf') || contentType.startsWith('image/')
} }
</script> </script>
<div class="flex-row-center"> <div class="flex-row-center">
{#if openEmbedded(value.type)} {#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} {:else}
<a class="no-line" href={getFileUrl(value.file)} download={value.name}><div class="flex-center icon">{iconLabel(value.name)}</div></a> <a class="no-line" href={getFileUrl(value.file)} download={value.name}><div class="flex-center icon">{iconLabel(value.name)}</div></a>
{/if} {/if}
<div class="flex-col info"> <div class="flex-col info">
{#if openEmbedded(value.type)} {#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} {:else}
<div class="name"><a href={getFileUrl(value.file)} download={value.name}>{trimFilename(value.name)}</a></div> <div class="name"><a href={getFileUrl(value.file)} download={value.name}>{trimFilename(value.name)}</a></div>
{/if} {/if}