From dab0f365f532a81055ffa1fc8e75e2e8a0286c3e Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@users.noreply.github.com>
Date: Mon, 7 Feb 2022 16:07:35 +0700
Subject: [PATCH] Fix PDF viewer close with Cross mark (#942)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
 .../src/components/PDFViewer.svelte           | 19 +++++++++----------
 packages/ui/src/components/icons/Close.svelte |  2 +-
 .../src/components/AttachmentPresenter.svelte | 15 +++++++++------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte
index edc2331167..4023fd5d36 100644
--- a/packages/presentation/src/components/PDFViewer.svelte
+++ b/packages/presentation/src/components/PDFViewer.svelte
@@ -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;
diff --git a/packages/ui/src/components/icons/Close.svelte b/packages/ui/src/components/icons/Close.svelte
index 52bf98a62e..fd89466599 100644
--- a/packages/ui/src/components/icons/Close.svelte
+++ b/packages/ui/src/components/icons/Close.svelte
@@ -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">
diff --git a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
index edc722d0d1..c2e89e27fc 100644
--- a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
@@ -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}