TSK-859: Replacing icons. TSK-883: Pop-up for viewing images. (#2782)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/presentation/lang/en.json

@@ -38,7 +38,7 @@
     "DocumentPreview": "Preview",
     "MakePrivate": "Make private",
     "MakePrivateDescription": "Only members can see it",
-    "AddMembersHeader": "Add members to {value}:"
+    "AddMembersHeader": "Add members to {value}:",
-
+    "OpenInANewTab": "Open in a new tab"
   }
 }

packages/presentation/lang/ru.json

@@ -38,6 +38,7 @@
     "DocumentPreview": "Предпросмотр",
     "MakePrivate": "Сделать личным",
     "MakePrivateDescription": "Только пользователи могут видеть это",
-    "AddMembersHeader": "Добавить пользователей в {value}:"
+    "AddMembersHeader": "Добавить пользователей в {value}:",
+    "OpenInANewTab": "Открыть в новой вкладке"
   }
 }

packages/presentation/src/components/PDFViewer.svelte

@@ -20,9 +20,7 @@
   import presentation from '..'
   import { getFileUrl } from '../utils'
   import Download from './icons/Download.svelte'
-  import MaximizeH from './icons/MaximizeH.svelte'
+  import NewWindow from './icons/NewWindow.svelte'
-  import MaximizeO from './icons/MaximizeO.svelte'
-  import MaximizeV from './icons/MaximizeV.svelte'
   import IndexedDocumentPreview from './IndexedDocumentPreview.svelte'
 
   export let file: string
@@ -32,7 +30,7 @@
   export let value: Attachment
 
   const dispatch = createEventDispatcher()
-  let imgView: 'img-horizontal-fit' | 'img-vertical-fit' | 'img-original-fit' = 'img-vertical-fit'
+  // let imgView: 'img-horizontal-fit' | 'img-vertical-fit' | 'img-original-fit' = 'img-vertical-fit'
 
   function iconLabel (name: string): string {
     const parts = name.split('.')
@@ -66,41 +64,18 @@
   </svelte:fragment>
 
   <svelte:fragment slot="utils">
-    {#if contentType && contentType.startsWith('image/')}
+    <a class="no-line" target="_salf" href={getFileUrl(file)}>
       <Button
-        icon={MaximizeH}
+        icon={NewWindow}
         kind={'transparent'}
-        shape={'circle'}
+        showTooltip={{ label: presentation.string.OpenInANewTab }}
-        on:click={() => {
+        on:click={() => window.open(getFileUrl(file), '_blank')}
-          imgView = 'img-horizontal-fit'
-        }}
-        selected={imgView === 'img-horizontal-fit'}
       />
-      <Button
+    </a>
-        icon={MaximizeV}
-        kind={'transparent'}
-        shape={'circle'}
-        on:click={() => {
-          imgView = 'img-vertical-fit'
-        }}
-        selected={imgView === 'img-vertical-fit'}
-      />
-      <Button
-        icon={MaximizeO}
-        kind={'transparent'}
-        shape={'circle'}
-        on:click={() => {
-          imgView = 'img-original-fit'
-        }}
-        selected={imgView === 'img-original-fit'}
-      />
-      <div class="buttons-divider" />
-    {/if}
     <a class="no-line" href={getFileUrl(file)} download={name} bind:this={download}>
       <Button
         icon={Download}
         kind={'transparent'}
-        shape={'circle'}
         on:click={() => {
           download.click()
         }}
@@ -110,8 +85,8 @@
   </svelte:fragment>
 
   {#if contentType && contentType.startsWith('image/')}
-    <div class="pdfviewer-content" style:margin={$deviceInfo.minWidth ? '.5rem' : '1.5rem'}>
+    <div class="pdfviewer-content img" style:margin={$deviceInfo.minWidth ? '.5rem' : '1.5rem'}>
-      <img class={imgView} src={getFileUrl(file)} alt="" />
+      <img class="img-fit" src={getFileUrl(file)} alt="" />
     </div>
     <div class="space" />
   {:else if contentType && contentType.startsWith('application/msword')}
@@ -146,6 +121,21 @@
     border-style: none;
     border-radius: 0.5rem;
     background-color: var(--board-bg-color);
+
+    &.img {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      min-height: 0;
+    }
+  }
+  .img-fit {
+    margin: 0 auto;
+    width: fit-content;
+    height: fit-content;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
   }
   .img-horizontal-fit,
   .img-vertical-fit,

packages/presentation/src/components/icons/NewWindow.svelte

@@ -0,0 +1,35 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M19,9.8c-0.4,0-0.8,0.3-0.8,0.8V20c0,0.1-0.1,0.2-0.2,0.2H4c-0.1,0-0.2-0.1-0.2-0.2V6c0-0.1,0.1-0.2,0.2-0.2h9.2C13.6,5.8,14,5.5,14,5s-0.3-0.8-0.8-0.8H4C3,4.2,2.2,5,2.2,6v14c0,1,0.8,1.8,1.8,1.8h14c1,0,1.8-0.8,1.8-1.8v-9.5C19.8,10.1,19.4,9.8,19,9.8z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M21,4.2h-1.3V2.9c0-0.4-0.3-0.8-0.8-0.8c-0.4,0-0.8,0.3-0.8,0.8v1.4H17c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h1.2V7c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8V5.8H21c0.4,0,0.8-0.3,0.8-0.8S21.4,4.2,21,4.2z"
+  />
+  <path
+    d="M16.2,12.1l-4.4-4.4c-0.2-0.2-0.5-0.3-0.8-0.2c-0.3,0.1-0.5,0.4-0.5,0.7v2c-1.6,0.2-2.9,0.9-3.7,2.2c-0.8,1.2-1.2,3-1.2,5.4c0,0.4,0.3,0.7,0.6,0.7c0,0,0.1,0,0.1,0c0.3,0,0.6-0.2,0.7-0.5l0-0.1c0-0.1,0.1-0.2,0.2-0.4c0.2-0.3,0.4-0.7,0.8-1.1c0.7-0.8,1.5-1.3,2.4-1.5v1.9c0,0.3,0.2,0.6,0.4,0.7c0.3,0.1,0.6,0.1,0.8-0.1l4.4-4.1c0.1-0.1,0.2-0.3,0.2-0.5C16.4,12.4,16.3,12.3,16.2,12.1z M12,10.9V10l2.6,2.6L12,15.1v-1c0-0.4-0.3-0.7-0.7-0.7c-1.8,0-3,0.8-3.9,1.7c0.2-0.7,0.4-1.4,0.7-1.8c0.7-1,1.7-1.5,3.2-1.5C11.7,11.7,12,11.3,12,10.9z"
+  />
+</svg>

packages/presentation/src/plugin.ts

@@ -67,7 +67,8 @@ export default plugin(presentationId, {
     DocumentPreview: '' as IntlString,
     MakePrivate: '' as IntlString,
     MakePrivateDescription: '' as IntlString,
-    AddMembersHeader: '' as IntlString
+    AddMembersHeader: '' as IntlString,
+    OpenInANewTab: '' as IntlString
   },
   metadata: {
     RequiredVersion: '' as Metadata<string>,

packages/text-editor/src/components/icons/Attach.svelte

@@ -5,9 +5,8 @@
 
 <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path
-    d="M21.6,10.4c-0.3-0.3-0.7-0.3-1.1-0.1c-0.3,0.3-0.3,0.7-0.1,1.1c0.5,0.6,0.8,1.3,0.8,2.1c0,1.8-1.5,3.2-3.2,3.2h-8c-1.8,0-3.2-1.5-3.2-3.2s1.5-3.2,3.2-3.2h5c0.4,0,0.8-0.3,0.8-0.8S15.4,8.8,15,8.8h-5c-2.6,0-4.8,2.1-4.8,4.8s2.1,4.8,4.8,4.8h8c2.6,0,4.8-2.1,4.8-4.8C22.8,12.3,22.3,11.2,21.6,10.4z"
+    fill-rule="evenodd"
-  />
+    clip-rule="evenodd"
-  <path
+    d="M15.4,5c1.5-1.5,3.8-1.5,5.3,0l-0.5,0.5L20.7,5c1.5,1.5,1.5,3.8,0,5.3l0,0l-8.8,8.8c-2.1,2.1-5.4,2.1-7.4,0l0.5-0.5l-0.5,0.5c-2.1-2.1-2.1-5.4,0-7.4l7.4-7.4c0.3-0.3,0.8-0.3,1.1,0c0.3,0.3,0.3,0.8,0,1.1l-7.4,7.4l-0.5-0.5l0.5,0.5C4,14.2,4,16.6,5.5,18l-0.5,0.5L5.5,18c1.5,1.5,3.8,1.5,5.3,0l0.5,0.5L10.8,18l8.8-8.8v0c0.9-0.9,0.9-2.3,0-3.2c-0.9-0.9-2.3-0.9-3.2,0v0l-8.8,8.8c-0.3,0.3-0.3,0.8,0,1.1c0.3,0.3,0.8,0.3,1.1,0l7.4-7.4c0.3-0.3,0.8-0.3,1.1,0c0.3,0.3,0.3,0.8,0,1.1L9.7,17c-0.9,0.9-2.3,0.9-3.2,0h0c-0.9-0.9-0.9-2.3,0-3.2h0L15.4,5C15.4,5,15.4,5,15.4,5z"
-    d="M2.8,9.5c0-1.8,1.5-3.2,3.2-3.2h8c1.8,0,3.2,1.5,3.2,3.2s-1.5,3.2-3.2,3.2H9c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h5c2.6,0,4.8-2.1,4.8-4.8c0-2.6-2.1-4.8-4.8-4.8H6c-2.6,0-4.8,2.1-4.8,4.8c0,1.2,0.4,2.3,1.2,3.1C2.7,13,3.2,13,3.5,12.7c0.3-0.3,0.3-0.7,0.1-1.1C3.1,11.1,2.8,10.3,2.8,9.5z"
   />
 </svg>

plugins/attachment-resources/src/components/Attachments.svelte

@@ -22,7 +22,7 @@
   import attachment from '../plugin'
   import AddAttachment from './AddAttachment.svelte'
   import AttachmentDroppable from './AttachmentDroppable.svelte'
-  import IconAttachment from './icons/Attachment.svelte'
+  import IconAttachments from './icons/Attachments.svelte'
   import UploadDuo from './icons/UploadDuo.svelte'
 
   export let objectId: Ref<Doc>
@@ -46,7 +46,7 @@
   <div class="antiSection-header">
     <div class="antiSection-header__icon">
       {#if showHeader}
-        <Icon icon={IconAttachment} size={'small'} />
+        <Icon icon={IconAttachments} size={'small'} />
       {/if}
     </div>
     <span class="antiSection-header__title">

plugins/attachment-resources/src/components/icons/Attachment.svelte

@@ -19,6 +19,8 @@
 
 <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path
-    d="M20.7,5c-1.5-1.5-3.8-1.5-5.3,0l-8.8,8.8c-0.9,0.9-0.9,2.3,0,3.2c0.9,0.9,2.3,0.9,3.2,0l7.4-7.4 c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0l-7.4,7.4c-0.3,0.3-0.8,0.3-1.1,0c-0.3-0.3-0.3-0.8,0-1.1L16.4,6c0.9-0.9,2.3-0.9,3.2,0 s0.9,2.3,0,3.2L10.8,18c-1.5,1.5-3.8,1.5-5.3,0c-1.5-1.5-1.5-3.8,0-5.3l7.4-7.4c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.8-0.3-1.1,0 l-7.4,7.4c-2.1,2.1-2.1,5.4,0,7.4c2.1,2.1,5.4,2.1,7.4,0l8.8-8.8C22.1,8.8,22.1,6.4,20.7,5z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M15.4,5c1.5-1.5,3.8-1.5,5.3,0l-0.5,0.5L20.7,5c1.5,1.5,1.5,3.8,0,5.3l0,0l-8.8,8.8c-2.1,2.1-5.4,2.1-7.4,0l0.5-0.5l-0.5,0.5c-2.1-2.1-2.1-5.4,0-7.4l7.4-7.4c0.3-0.3,0.8-0.3,1.1,0c0.3,0.3,0.3,0.8,0,1.1l-7.4,7.4l-0.5-0.5l0.5,0.5C4,14.2,4,16.6,5.5,18l-0.5,0.5L5.5,18c1.5,1.5,3.8,1.5,5.3,0l0.5,0.5L10.8,18l8.8-8.8v0c0.9-0.9,0.9-2.3,0-3.2c-0.9-0.9-2.3-0.9-3.2,0v0l-8.8,8.8c-0.3,0.3-0.3,0.8,0,1.1c0.3,0.3,0.8,0.3,1.1,0l7.4-7.4c0.3-0.3,0.8-0.3,1.1,0c0.3,0.3,0.3,0.8,0,1.1L9.7,17c-0.9,0.9-2.3,0.9-3.2,0h0c-0.9-0.9-0.9-2.3,0-3.2h0L15.4,5C15.4,5,15.4,5,15.4,5z"
   />
 </svg>

plugins/attachment-resources/src/components/icons/Attachments.svelte

@@ -0,0 +1,24 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path
+    d="M12.6429 7.69048L8.92925 11.4041C7.48164 12.8517 5.34347 13.0101 4.16667 11.8333C2.98733 10.654 3.14447 8.52219 4.59216 7.07451L8.00206 3.66461C8.93557 2.73109 10.2976 2.63095 11.0333 3.36667C11.7681 4.10139 11.6658 5.4675 10.7361 6.39727L7.32363 9.8097C6.90202 10.2313 6.32171 10.2741 6.02381 9.97619C5.72651 9.6789 5.76949 9.09718 6.1989 8.66776L9.29048 5.57619C9.56662 5.30005 9.56662 4.85233 9.29048 4.57619C9.01433 4.30005 8.56662 4.30005 8.29048 4.57619L5.1989 7.66776C4.24737 8.6193 4.13865 10.091 5.02381 10.9762C5.9095 11.8619 7.37984 11.7535 8.32363 10.8097L11.7361 7.39727C13.1876 5.94573 13.3564 3.68975 12.0333 2.36667C10.7099 1.04326 8.45782 1.20884 7.00206 2.66461L3.59216 6.07451C1.62229 8.04437 1.39955 11.0662 3.16667 12.8333C4.93146 14.5981 7.9596 14.3737 9.92925 12.4041L13.6429 8.69048C13.919 8.41433 13.919 7.96662 13.6429 7.69048C13.3667 7.41433 12.919 7.41433 12.6429 7.69048Z"
+  />
+</svg>