mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-16 05:13:06 +00:00
Fix Tooltip. Update PDFViewer layout. (#1131)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
776b657e79
commit
2b0b6a8202
@ -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>
|
||||
|
||||
24
packages/presentation/src/components/icons/MaximizeH.svelte
Normal file
24
packages/presentation/src/components/icons/MaximizeH.svelte
Normal file
@ -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>
|
||||
24
packages/presentation/src/components/icons/MaximizeO.svelte
Normal file
24
packages/presentation/src/components/icons/MaximizeO.svelte
Normal file
@ -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>
|
||||
24
packages/presentation/src/components/icons/MaximizeV.svelte
Normal file
24
packages/presentation/src/components/icons/MaximizeV.svelte
Normal file
@ -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>
|
||||
@ -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; }
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -116,7 +116,7 @@
|
||||
.app {
|
||||
height: calc(100vh - #{$status-bar-height});
|
||||
min-width: 1200px;
|
||||
min-height: 600px;
|
||||
min-height: 480px;
|
||||
|
||||
.error {
|
||||
margin-top: 45vh;
|
||||
|
||||
@ -38,5 +38,6 @@
|
||||
{/each}
|
||||
|
||||
<style lang="scss">
|
||||
.item { max-width: 30rem; }
|
||||
.item + .item { margin-top: 1.25rem; }
|
||||
</style>
|
||||
|
||||
@ -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>
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user