mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-23 08:48:01 +00:00
Fix PDF viewer close with Cross mark (#942)
Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
This commit is contained in:
parent
fa171012d5
commit
dab0f365f5
@ -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;
|
||||||
|
@ -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">
|
||||||
|
@ -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}
|
||||||
|
Loading…
Reference in New Issue
Block a user