mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 11:31:57 +03:00
TSK-859: Replacing icons. TSK-883: Pop-up for viewing images. (#2782)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
af7ebceb9e
commit
f0319b42e5
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
"DocumentPreview": "Предпросмотр",
|
||||
"MakePrivate": "Сделать личным",
|
||||
"MakePrivateDescription": "Только пользователи могут видеть это",
|
||||
"AddMembersHeader": "Добавить пользователей в {value}:"
|
||||
"AddMembersHeader": "Добавить пользователей в {value}:",
|
||||
"OpenInANewTab": "Открыть в новой вкладке"
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,9 +20,7 @@
|
||||
import presentation from '..'
|
||||
import { getFileUrl } from '../utils'
|
||||
import Download from './icons/Download.svelte'
|
||||
import MaximizeH from './icons/MaximizeH.svelte'
|
||||
import MaximizeO from './icons/MaximizeO.svelte'
|
||||
import MaximizeV from './icons/MaximizeV.svelte'
|
||||
import NewWindow from './icons/NewWindow.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'}
|
||||
on:click={() => {
|
||||
imgView = 'img-horizontal-fit'
|
||||
}}
|
||||
selected={imgView === 'img-horizontal-fit'}
|
||||
showTooltip={{ label: presentation.string.OpenInANewTab }}
|
||||
on:click={() => window.open(getFileUrl(file), '_blank')}
|
||||
/>
|
||||
<Button
|
||||
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>
|
||||
<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'}>
|
||||
<img class={imgView} src={getFileUrl(file)} alt="" />
|
||||
<div class="pdfviewer-content img" style:margin={$deviceInfo.minWidth ? '.5rem' : '1.5rem'}>
|
||||
<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,
|
||||
|
||||
35
packages/presentation/src/components/icons/NewWindow.svelte
Normal file
35
packages/presentation/src/components/icons/NewWindow.svelte
Normal file
@ -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>
|
||||
@ -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>,
|
||||
|
||||
@ -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"
|
||||
/>
|
||||
<path
|
||||
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"
|
||||
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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user