From 2b0b6a820250de22d4202e5d815c42ab693e1fc3 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Fri, 11 Mar 2022 16:08:06 +0700
Subject: [PATCH] Fix Tooltip. Update PDFViewer layout. (#1131)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/PDFViewer.svelte           | 142 +++++++-----------
 .../src/components/icons/MaximizeH.svelte     |  24 +++
 .../src/components/icons/MaximizeO.svelte     |  24 +++
 .../src/components/icons/MaximizeV.svelte     |  24 +++
 packages/theme/styles/components.scss         |   4 +-
 .../ui/src/components/TooltipInstance.svelte  |   1 -
 .../ui/src/components/internal/Root.svelte    |   2 +-
 .../src/components/CommentPopup.svelte        |   1 +
 .../src/components/CommentPresenter.svelte    |   9 --
 .../src/components/kanban/KanbanView.svelte   |   1 +
 10 files changed, 135 insertions(+), 97 deletions(-)
 create mode 100644 packages/presentation/src/components/icons/MaximizeH.svelte
 create mode 100644 packages/presentation/src/components/icons/MaximizeO.svelte
 create mode 100644 packages/presentation/src/components/icons/MaximizeV.svelte

diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte
index b91e21ef8c..c009899e53 100644
--- a/packages/presentation/src/components/PDFViewer.svelte
+++ b/packages/presentation/src/components/PDFViewer.svelte
@@ -14,117 +14,89 @@
 -->
 
 <script lang="ts">
-  import { Button, CircleButton, IconClose } from '@anticrm/ui'
+  import { Button, CircleButton, IconClose, ActionIcon } 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'
+  import MaximizeH from './icons/MaximizeH.svelte'
+  import MaximizeV from './icons/MaximizeV.svelte'
+  import MaximizeO from './icons/MaximizeO.svelte'
 
   export let file: string
   export let name: string
   export let contentType: string | undefined
 
   const dispatch = createEventDispatcher()
-
+  let imgView: 'img-horizontal-fit' | 'img-vertical-fit' | 'img-original-fit' = 'img-horizontal-fit'
 </script>
 
-<div class="pdfviewer-container">
-
-  <div class="flex-between header">
-    <!-- <div class="flex-center arrow-back">
-      <div class="icon"><IconArrowLeft size={'small'} /></div>
-    </div> -->
-    <div class="flex-row-center flex-grow">
-      <Avatar size={'medium'} />
-      <div class="flex-col user">
-        <div class="overflow-label name">{name}</div>
-        <!-- <div class="overflow-label description">Candidate</div> -->
-      </div>
-    </div>
-    <div class="flex-row-center">
-      <div class="tool" on:click={() => dispatch('close')}><IconClose fill={'black'} size={'small'} /></div>
+<div class="antiOverlay" on:click={() => { dispatch('close') }} />
+<div class="antiDialogs antiComponent pdfviewer-container">
+  <div class="ac-header short mirror">
+    <div class="ac-header__wrap-title">
+      <div class="ac-header__icon"><Avatar size={'medium'} /></div>
+      <span class="ac-header__title">{name}</span>
     </div>
+    <ActionIcon icon={IconClose} size={'medium'} action={() => dispatch('close')} />
   </div>
 
   {#if contentType && contentType.startsWith('image/') }
-    <img src={getFileUrl(file)} alt=''/>
+    <div class="pdfviewer-content">
+      <img class={imgView} src={getFileUrl(file)} alt="" />
+    </div>
   {:else}
-    <iframe class="flex-grow content" src={getFileUrl(file)} title=""/>
+    <iframe class="pdfviewer-content" src={getFileUrl(file)} title="" />
   {/if}
 
-  <div class="flex-between footer">
+  <div class="pdfviewer-footer">
     <div class="flex-row-reverse">
-      <a class="no-line ml-4" href={getFileUrl(file)} download={name}><Button label={presentation.string.Download} primary /></a>
-      <Button label={presentation.string.Delete} />
-    </div>
-    <div class="flex-row-center">
-      <CircleButton icon={ExpandDown} />
-      <CircleButton icon={ExpandUp} />
+      <a class="no-line ml-4" href={getFileUrl(file)} download={name}><Button label={presentation.string.Download} size={'small'} primary /></a>
+      <Button label={presentation.string.Delete} size={'small'} />
     </div>
+    {#if contentType && contentType.startsWith('image/') }
+      <div class="img-nav">
+        <CircleButton icon={MaximizeH} on:click={() => { imgView = 'img-horizontal-fit' }} selected={imgView === 'img-horizontal-fit'} />
+        <CircleButton icon={MaximizeV} on:click={() => { imgView = 'img-vertical-fit' }} selected={imgView === 'img-vertical-fit'} />
+        <CircleButton icon={MaximizeO} on:click={() => { imgView = 'img-original-fit' }} selected={imgView === 'img-original-fit'} />
+      </div>
+    {/if}
   </div>
 
 </div>
 
 <style lang="scss">
-  .pdfviewer-container {
+  .pdfviewer-container { left: 40%; }
+  .pdfviewer-content {
+    flex-grow: 1;
+    overflow: auto;
+    margin: 0 1.5rem;
+    border-style: none;
+    border-radius: .5rem;
+    background-color: var(--theme-menu-color);
+  }
+  .img-horizontal-fit, .img-vertical-fit, .img-original-fit {
+    margin: 0 auto;
+    width: auto;
+    height: auto;
+  }
+  .img-horizontal-fit { width: 100%; }
+  .img-vertical-fit { height: 100%; }
+  .pdfviewer-footer {
+    flex-shrink: 0;
     display: flex;
-    flex-direction: column;
-    width: 55rem;
-    height: 100%;
-    background-color: #F2F2F2;
-    border-radius: 1.25rem 1.875rem 1.875rem 1.25rem;
-
-    .header {
-      margin: 0 2rem 0 2.25rem;
-      height: 4.5rem;
-      min-height: 4.5rem;
-
-      // .arrow-back {
-      //   margin-right: 1rem;
-      //   width: 1.5rem;
-      //   height: 1.5rem;
-      //   cursor: pointer;
-      //   .icon {
-      //     color: #1F212B;
-      //     opacity: .4;
-      //   }
-      //   &:hover .icon { opacity: 1; }
-      // }
-
-      .user { margin-left: .75rem; }
-      .name {
-        font-weight: 500;
-        font-size: 1rem;
-        color: black;
-      }
-      // .description {
-      //   font-size: .75rem;
-      //   color: #1F212B;
-      //   opacity: .6;
-      // }
-      .tool {
-        margin-left: 0.75rem;
-        opacity: .4;
-        cursor: pointer;
-        &:hover { opacity: 1; }
-      }
-    }
-
-    .content {
-      margin: 0 .75rem;
-      background-color: #fff;
-      border: 1px solid var(--theme-bg-accent-color);
-      border-radius: .72rem;
-    }
-
-    .footer {
-      flex-direction: row-reverse;
-      margin: 0 2.5rem 0 1.75rem;
-      height: 6rem;
-      min-height: 6rem;
-      color: #1F212B;
-    }
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    align-items: center;
+    padding: 0 2.25rem;
+    height: 5.25rem;
+  }
+  .img-nav {
+    display: grid;
+    grid-template-columns: auto;
+    grid-auto-flow: column;
+    grid-auto-columns: min-content;
+    gap: .5rem;
+    align-items: center;
   }
 </style>
diff --git a/packages/presentation/src/components/icons/MaximizeH.svelte b/packages/presentation/src/components/icons/MaximizeH.svelte
new file mode 100644
index 0000000000..a2d4a11fbf
--- /dev/null
+++ b/packages/presentation/src/components/icons/MaximizeH.svelte
@@ -0,0 +1,24 @@
+<!--
+// 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 d="M17.7,11.3l-2.5-2.5c-0.2-0.2-0.4-0.3-0.7-0.3S14,8.6,13.8,8.8s-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7l0.8,0.8H9.4l0.8-0.8 c0.2-0.2,0.3-0.4,0.3-0.7S10.4,9,10.2,8.8S9.8,8.5,9.5,8.5S9,8.6,8.8,8.8l-2.5,2.5c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8 c0,0.1,0.1,0.2,0.2,0.3l2.5,2.5c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.4,0.1s0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2 c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.1-0.3,0.1-0.4s0-0.3-0.1-0.4c-0.1-0.1-0.1-0.2-0.2-0.3L9.4,13h5.2l-0.8,0.8 c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.1-0.1,0.3-0.1,0.4s0,0.3,0.1,0.4c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.2,0.3,0.2 c0.1,0.1,0.3,0.1,0.4,0.1s0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2l2.5-2.5c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.2,0.1-0.5,0-0.8 C17.9,11.5,17.8,11.4,17.7,11.3z M3,6C2.7,6,2.5,6.1,2.3,6.3C2.1,6.5,2,6.7,2,7v10c0,0.3,0.1,0.5,0.3,0.7C2.5,17.9,2.7,18,3,18 s0.5-0.1,0.7-0.3C3.9,17.5,4,17.3,4,17V7c0-0.3-0.1-0.5-0.3-0.7C3.5,6.1,3.3,6,3,6z M21,6c-0.3,0-0.5,0.1-0.7,0.3 C20.1,6.5,20,6.7,20,7v10c0,0.3,0.1,0.5,0.3,0.7S20.7,18,21,18s0.5-0.1,0.7-0.3S22,17.3,22,17V7c0-0.3-0.1-0.5-0.3-0.7 C21.5,6.1,21.3,6,21,6z" />
+</svg>
diff --git a/packages/presentation/src/components/icons/MaximizeO.svelte b/packages/presentation/src/components/icons/MaximizeO.svelte
new file mode 100644
index 0000000000..ea5909c1d6
--- /dev/null
+++ b/packages/presentation/src/components/icons/MaximizeO.svelte
@@ -0,0 +1,24 @@
+<!--
+// 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 d="M9.3,13.3L4,18.6V17c0-0.3-0.1-0.5-0.3-0.7C3.5,16.1,3.3,16,3,16s-0.5,0.1-0.7,0.3C2.1,16.5,2,16.7,2,17v4 c0,0.1,0,0.3,0.1,0.4c0.1,0.2,0.3,0.4,0.5,0.5C2.7,22,2.9,22,3,22h4c0.3,0,0.5-0.1,0.7-0.3C7.9,21.5,8,21.3,8,21s-0.1-0.5-0.3-0.7 C7.5,20.1,7.3,20,7,20H5.4l5.3-5.3c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7S10.3,13,10,13S9.5,13.1,9.3,13.3z M5.4,4H7 c0.3,0,0.5-0.1,0.7-0.3C7.9,3.5,8,3.3,8,3S7.9,2.5,7.7,2.3C7.5,2.1,7.3,2,7,2H3C2.9,2,2.7,2,2.6,2.1C2.4,2.2,2.2,2.4,2.1,2.6 C2,2.7,2,2.9,2,3v4c0,0.3,0.1,0.5,0.3,0.7C2.5,7.9,2.7,8,3,8s0.5-0.1,0.7-0.3C3.9,7.5,4,7.3,4,7V5.4l5.3,5.3 c0.1,0.1,0.2,0.2,0.3,0.2C9.7,11,9.9,11,10,11c0.1,0,0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.2,0.2-0.3 C11,10.3,11,10.1,11,10c0-0.1,0-0.3-0.1-0.4c-0.1-0.1-0.1-0.2-0.2-0.3L5.4,4z M21,16c-0.3,0-0.5,0.1-0.7,0.3S20,16.7,20,17v1.6 l-5.3-5.3C14.5,13.1,14.3,13,14,13s-0.5,0.1-0.7,0.3S13,13.7,13,14s0.1,0.5,0.3,0.7l5.3,5.3H17c-0.3,0-0.5,0.1-0.7,0.3 S16,20.7,16,21s0.1,0.5,0.3,0.7S16.7,22,17,22h4c0.1,0,0.3,0,0.4-0.1c0.2-0.1,0.4-0.3,0.5-0.5C22,21.3,22,21.1,22,21v-4 c0-0.3-0.1-0.5-0.3-0.7S21.3,16,21,16z M21.9,2.6c-0.1-0.2-0.3-0.4-0.5-0.5C21.3,2,21.1,2,21,2h-4c-0.3,0-0.5,0.1-0.7,0.3 C16.1,2.5,16,2.7,16,3s0.1,0.5,0.3,0.7C16.5,3.9,16.7,4,17,4h1.6l-5.3,5.3c-0.1,0.1-0.2,0.2-0.2,0.3C13,9.7,13,9.9,13,10 c0,0.1,0,0.3,0.1,0.4c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.2,0.3,0.2C13.7,11,13.9,11,14,11s0.3,0,0.4-0.1 c0.1-0.1,0.2-0.1,0.3-0.2L20,5.4V7c0,0.3,0.1,0.5,0.3,0.7C20.5,7.9,20.7,8,21,8s0.5-0.1,0.7-0.3C21.9,7.5,22,7.3,22,7V3 C22,2.9,22,2.7,21.9,2.6z" />
+</svg>
diff --git a/packages/presentation/src/components/icons/MaximizeV.svelte b/packages/presentation/src/components/icons/MaximizeV.svelte
new file mode 100644
index 0000000000..7d82a249ed
--- /dev/null
+++ b/packages/presentation/src/components/icons/MaximizeV.svelte
@@ -0,0 +1,24 @@
+<!--
+// 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 d="M11.3,6.3L8.8,8.8C8.6,9,8.5,9.2,8.5,9.5s0.1,0.5,0.3,0.7s0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3L11,9.4v5.2l-0.8-0.8 c-0.2-0.2-0.4-0.3-0.7-0.3S9,13.6,8.8,13.8s-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7l2.5,2.5c0.1,0.1,0.2,0.2,0.3,0.2 c0.2,0.1,0.5,0.1,0.8,0c0.1,0,0.2-0.1,0.3-0.2l2.5-2.5c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.1-0.3,0.1-0.4s0-0.3-0.1-0.4 c-0.1-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.2-0.2-0.3-0.2c-0.1-0.1-0.3-0.1-0.4-0.1s-0.3,0-0.4,0.1c-0.1,0.1-0.2,0.1-0.3,0.2L13,14.6V9.4 l0.8,0.8c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.4,0.1s0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.2,0.2-0.3 c0.1-0.1,0.1-0.3,0.1-0.4s0-0.3-0.1-0.4c-0.1-0.1-0.1-0.2-0.2-0.3l-2.5-2.5c-0.1-0.1-0.2-0.2-0.3-0.2c-0.2-0.1-0.5-0.1-0.8,0 C11.5,6.1,11.4,6.2,11.3,6.3z M6,21c0,0.3,0.1,0.5,0.3,0.7C6.5,21.9,6.7,22,7,22h10c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.4,0.3-0.7 s-0.1-0.5-0.3-0.7C17.5,20.1,17.3,20,17,20H7c-0.3,0-0.5,0.1-0.7,0.3C6.1,20.5,6,20.7,6,21z M6,3c0,0.3,0.1,0.5,0.3,0.7 C6.5,3.9,6.7,4,7,4h10c0.3,0,0.5-0.1,0.7-0.3S18,3.3,18,3s-0.1-0.5-0.3-0.7S17.3,2,17,2H7C6.7,2,6.5,2.1,6.3,2.3C6.1,2.5,6,2.7,6,3z" />
+</svg>
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index d8f2ca8f7b..b9e6b7e60c 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -393,7 +393,6 @@
     &:last-child { border-bottom: none; }
     &:hover .antiTable-cells__firstCell .antiTable-cells__firstCell-menuRow { visibility: visible; }
     &:hover, &.checking {
-      // background-color: var(--theme-table-bg-hover);
       .antiTable-cells__checkCell { visibility: visible; }
       .antiTable-cells__notifyCell .notify-table-kind {
         width: 1rem;
@@ -412,3 +411,6 @@
     &:hover, &.checking { background-color: var(--theme-table-bg-hover); }
   }
 }
+
+// Hide row menu in Tooltip
+.popup-tooltip .antiTable .antiTable-body__row:hover .antiTable-cells__firstCell .antiTable-cells__firstCell-menuRow { visibility: hidden; }
diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte
index 6bd02c56d4..0dc4b93d8f 100644
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@@ -178,7 +178,6 @@
     position: fixed;
     display: flex;
     flex-direction: column;
-    max-width: 30rem;
     padding: 1rem;
     color: var(--theme-caption-color);
     background-color: var(--theme-tooltip-color);
diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte
index 60c25b7ff3..2e4d255cf3 100644
--- a/packages/ui/src/components/internal/Root.svelte
+++ b/packages/ui/src/components/internal/Root.svelte
@@ -116,7 +116,7 @@
     .app {
       height: calc(100vh - #{$status-bar-height});
       min-width: 1200px;
-      min-height: 600px;
+      min-height: 480px;
 
       .error {
         margin-top: 45vh;
diff --git a/plugins/chunter-resources/src/components/CommentPopup.svelte b/plugins/chunter-resources/src/components/CommentPopup.svelte
index 12afcfb55c..07730f8052 100644
--- a/plugins/chunter-resources/src/components/CommentPopup.svelte
+++ b/plugins/chunter-resources/src/components/CommentPopup.svelte
@@ -38,5 +38,6 @@
 {/each}
 
 <style lang="scss">
+  .item { max-width: 30rem; }
   .item + .item { margin-top: 1.25rem; }
 </style>
diff --git a/plugins/chunter-resources/src/components/CommentPresenter.svelte b/plugins/chunter-resources/src/components/CommentPresenter.svelte
index cb0b68ca1a..3edfb64c14 100644
--- a/plugins/chunter-resources/src/components/CommentPresenter.svelte
+++ b/plugins/chunter-resources/src/components/CommentPresenter.svelte
@@ -58,13 +58,4 @@
     align-items: baseline;
     margin-bottom: .25rem;
   }
-  // .comment-content {
-  //   overflow: hidden;
-  //   visibility: visible;
-  //   display: -webkit-box;
-  //   -webkit-line-clamp: 7;
-  //   line-clamp: 7;
-  //   /* autoprefixer: ignore next */
-  //   -webkit-box-orient: vertical;
-  // }
 </style>
\ No newline at end of file
diff --git a/plugins/task-resources/src/components/kanban/KanbanView.svelte b/plugins/task-resources/src/components/kanban/KanbanView.svelte
index fb1b1ff81c..5e01f3331c 100644
--- a/plugins/task-resources/src/components/kanban/KanbanView.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanView.svelte
@@ -285,6 +285,7 @@
     padding: .5rem 2.5rem;
     background-color: var(--theme-bg-color);
     border-top: 1px solid var(--theme-dialog-divider);
+    border-radius: 0 0 1.25rem 1.25rem;
   }
 
   .done-item {