mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-22 21:50:34 +03:00
UBERF-6946 Improve drive file and folder icons (#5650)
Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
This commit is contained in:
Alexander Onnikov
GitHub
parent
858e8f866b
commit
d3361752cf
@ -89,22 +89,6 @@
|
||||
handleDriveSelected(space._id)
|
||||
}}
|
||||
>
|
||||
<!-- <TreeNode
|
||||
{collapsed}
|
||||
_id={space._id}
|
||||
icon={drive.icon.Drive}
|
||||
title={space.name}
|
||||
folder
|
||||
parent={descendants.size > 0}
|
||||
actions={() => getActions(space)}
|
||||
on:click={() => {
|
||||
if (selected === space?._id) {
|
||||
collapsed = !collapsed
|
||||
} else {
|
||||
handleDriveSelected(space._id)
|
||||
}
|
||||
}}
|
||||
> -->
|
||||
<FolderTreeLevel
|
||||
{folders}
|
||||
{descendants}
|
||||
@ -114,6 +98,5 @@
|
||||
handleFolderSelected(ev.detail)
|
||||
}}
|
||||
/>
|
||||
<!-- </TreeNode> -->
|
||||
</FolderTreeElement>
|
||||
{/if}
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
import { ObjectPresenterType } from '@hcengineering/view'
|
||||
import { DocNavLink, ObjectMention } from '@hcengineering/view-resources'
|
||||
|
||||
import drive from '../plugin'
|
||||
import { getFileTypeIcon } from '../utils'
|
||||
|
||||
export let value: WithLookup<File>
|
||||
export let inline: boolean = false
|
||||
@ -33,6 +33,8 @@
|
||||
export let shouldShowAvatar = true
|
||||
export let type: ObjectPresenterType = 'link'
|
||||
|
||||
$: icon = getFileTypeIcon(value.$lookup?.file?.contentType ?? '')
|
||||
|
||||
function handleClick (): void {
|
||||
if (disabled) {
|
||||
return
|
||||
@ -65,7 +67,7 @@
|
||||
<div class="flex-presenter" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
|
||||
{#if shouldShowAvatar}
|
||||
<div class="icon">
|
||||
<Icon icon={drive.icon.File} size={'small'} />
|
||||
<Icon {icon} size={'small'} />
|
||||
</div>
|
||||
{/if}
|
||||
<span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
import { DocNavLink, ObjectMention } from '@hcengineering/view-resources'
|
||||
import { ObjectPresenterType } from '@hcengineering/view'
|
||||
|
||||
import drive from '../plugin'
|
||||
import FolderIcon from './icons/Folder.svelte'
|
||||
|
||||
export let value: Folder
|
||||
export let inline: boolean = false
|
||||
@ -40,7 +40,7 @@
|
||||
<div class="flex-presenter" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
|
||||
{#if shouldShowAvatar}
|
||||
<div class="icon">
|
||||
<Icon icon={drive.icon.Folder} size={'small'} />
|
||||
<Icon icon={FolderIcon} size={'small'} fill="#5195D7" />
|
||||
</div>
|
||||
{/if}
|
||||
<span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}>
|
||||
|
||||
@ -22,8 +22,7 @@
|
||||
import { getActions as getContributedActions } from '@hcengineering/view-resources'
|
||||
|
||||
import FolderTreeElement from './FolderTreeElement.svelte'
|
||||
|
||||
import drive from '../plugin'
|
||||
import FolderIcon from './icons/Folder.svelte'
|
||||
|
||||
export let folders: Ref<Folder>[]
|
||||
export let folderById: Map<Ref<Folder>, Folder>
|
||||
@ -69,7 +68,10 @@
|
||||
{#if doc}
|
||||
<FolderTreeElement
|
||||
_id={doc._id}
|
||||
icon={drive.icon.Folder}
|
||||
icon={FolderIcon}
|
||||
iconProps={{
|
||||
fill: '#5195D7'
|
||||
}}
|
||||
title={doc.name}
|
||||
selected={selected === doc._id}
|
||||
parent={desc.length > 0}
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
<!--
|
||||
// Copyright © 2024 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 fill: string = 'currentColor'
|
||||
export let size: 'small' | 'medium' | 'large' = 'small'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 15V23L20 19L13 15Z" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M9 4C7.89543 4 7 4.89543 7 6V26C7 27.1046 7.89543 28 9 28H23C24.1046 28 25 27.1046 25 26V12H21C18.7909 12 17 10.2091 17 8V4H9ZM19 4.41421V8C19 9.10457 19.8954 10 21 10H24.5858L19 4.41421ZM5 6C5 3.79086 6.79086 2 9 2H18.5858C19.1162 2 19.6249 2.21071 20 2.58579L26.4142 9C26.7893 9.37507 27 9.88378 27 10.4142V26C27 28.2091 25.2091 30 23 30H9C6.79086 30 5 28.2091 5 26V6Z"
|
||||
/>
|
||||
</svg>
|
||||
@ -0,0 +1,32 @@
|
||||
<!--
|
||||
// Copyright © 2024 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 fill: string = 'currentColor'
|
||||
export let size: 'small' | 'medium' | 'large' = 'small'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M20.6667 13.4944C20.1734 13.8241 19.5933 14 19 14C18.2044 14 17.4413 13.6839 16.8787 13.1213C16.3161 12.5587 16 11.7957 16 11C16 10.4067 16.1759 9.82664 16.5056 9.33329C16.8352 8.83994 17.3038 8.45543 17.8519 8.22836C18.4001 8.0013 19.0033 7.94189 19.5853 8.05765C20.1672 8.1734 20.7018 8.45912 21.1213 8.87868C21.5409 9.29824 21.8266 9.83279 21.9424 10.4147C22.0581 10.9967 21.9987 11.5999 21.7716 12.1481C21.5446 12.6962 21.1601 13.1648 20.6667 13.4944ZM19.5556 10.1685C19.3911 10.0587 19.1978 10 19 10C18.7348 10 18.4804 10.1054 18.2929 10.2929C18.1054 10.4804 18 10.7348 18 11C18 11.1978 18.0586 11.3911 18.1685 11.5556C18.2784 11.72 18.4346 11.8482 18.6173 11.9239C18.8 11.9996 19.0011 12.0194 19.1951 11.9808C19.3891 11.9422 19.5673 11.847 19.7071 11.7071C19.847 11.5673 19.9422 11.3891 19.9808 11.1951C20.0194 11.0011 19.9996 10.8 19.9239 10.6173C19.8482 10.4346 19.72 10.2784 19.5556 10.1685Z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M4 8C4 5.79086 5.79086 4 8 4H24C26.2091 4 28 5.79086 28 8V24C28 26.2091 26.2091 28 24 28H8C5.79086 28 4 26.2091 4 24V8ZM8 6C6.89543 6 6 6.89543 6 8V17.1715L9.58569 13.5858C10.3667 12.8047 11.6331 12.8047 12.4141 13.5858L17.9999 19.1716L19.5857 17.5858C20.3667 16.8047 21.6331 16.8047 22.4141 17.5858L26 21.1717V8C26 6.89543 25.1046 6 24 6H8ZM6 24V19.9999L10.9999 15L16.5857 20.5858C17.3667 21.3668 18.6331 21.3668 19.4141 20.5858L20.9999 19L26 24.0001C26 25.1046 25.1045 26 24 26H8C6.89543 26 6 25.1046 6 24Z"
|
||||
/>
|
||||
</svg>
|
||||
@ -0,0 +1,27 @@
|
||||
<!--
|
||||
// Copyright © 2024 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 fill: string = 'currentColor'
|
||||
export let size: 'small' | 'medium' | 'large' = 'small'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M9 4C7.89543 4 7 4.89543 7 6V26C7 27.1046 7.89543 28 9 28H23C24.1046 28 25 27.1046 25 26V12H21C18.7909 12 17 10.2091 17 8V4H9ZM19 4.41421V8C19 9.10457 19.8954 10 21 10H24.5858L19 4.41421ZM5 6C5 3.79086 6.79086 2 9 2H18.5858C19.1162 2 19.6249 2.21071 20 2.58579L26.4142 9C26.7893 9.37507 27 9.88378 27 10.4142V26C27 28.2091 25.2091 30 23 30H9C6.79086 30 5 28.2091 5 26V6ZM10 17C10 16.4477 10.4477 16 11 16H21C21.5523 16 22 16.4477 22 17C22 17.5523 21.5523 18 21 18H11C10.4477 18 10 17.5523 10 17ZM10 23C10 22.4477 10.4477 22 11 22H21C21.5523 22 22 22.4477 22 23C22 23.5523 21.5523 24 21 24H11C10.4477 24 10 23.5523 10 23Z"
|
||||
/>
|
||||
</svg>
|
||||
@ -0,0 +1,27 @@
|
||||
<!--
|
||||
// Copyright © 2024 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 fill: string = 'currentColor'
|
||||
export let size: 'small' | 'medium' | 'large' = 'small'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M9 4C7.89543 4 7 4.89543 7 6V26C7 27.1046 7.89543 28 9 28H23C24.1046 28 25 27.1046 25 26V12H21C18.7909 12 17 10.2091 17 8V4H9ZM19 4.41421V8C19 9.10457 19.8954 10 21 10H24.5858L19 4.41421ZM5 6C5 3.79086 6.79086 2 9 2H18.5858C19.1162 2 19.6249 2.21071 20 2.58579L26.4142 9C26.7893 9.37507 27 9.88378 27 10.4142V26C27 28.2091 25.2091 30 23 30H9C6.79086 30 5 28.2091 5 26V6ZM10 17C10 16.4477 10.4477 16 11 16H21C21.5523 16 22 16.4477 22 17C22 17.5523 21.5523 18 21 18H11C10.4477 18 10 17.5523 10 17ZM10 23C10 22.4477 10.4477 22 11 22H21C21.5523 22 22 22.4477 22 23C22 23.5523 21.5523 24 21 24H11C10.4477 24 10 23.5523 10 23Z"
|
||||
/>
|
||||
</svg>
|
||||
@ -0,0 +1,28 @@
|
||||
<!--
|
||||
// Copyright © 2024 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 fill: string = 'currentColor'
|
||||
export let size: 'small' | 'medium' | 'large' = 'small'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 15V23L20 19L13 15Z" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M9 4C7.89543 4 7 4.89543 7 6V26C7 27.1046 7.89543 28 9 28H23C24.1046 28 25 27.1046 25 26V12H21C18.7909 12 17 10.2091 17 8V4H9ZM19 4.41421V8C19 9.10457 19.8954 10 21 10H24.5858L19 4.41421ZM5 6C5 3.79086 6.79086 2 9 2H18.5858C19.1162 2 19.6249 2.21071 20 2.58579L26.4142 9C26.7893 9.37507 27 9.88378 27 10.4142V26C27 28.2091 25.2091 30 23 30H9C6.79086 30 5 28.2091 5 26V6Z"
|
||||
/>
|
||||
</svg>
|
||||
33
plugins/drive-resources/src/components/icons/Folder.svelte
Normal file
33
plugins/drive-resources/src/components/icons/Folder.svelte
Normal file
@ -0,0 +1,33 @@
|
||||
<!--
|
||||
// Copyright © 2024 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 fill: string = 'currentColor'
|
||||
export let size: 'small' | 'medium' | 'large' = 'small'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M2 9C2 6.23858 4.23858 4 7 4H10.6716C11.4672 4 12.2303 4.31607 12.7929 4.87868L15.6213 7.70711C15.8089 7.89464 16.0632 8 16.3284 8H25C27.7614 8 30 10.2386 30 13V23C30 25.7614 27.7614 28 25 28H7C4.23858 28 2 25.7614 2 23V9ZM7 6C5.34315 6 4 7.34315 4 9V23C4 24.6569 5.34315 26 7 26H25C26.6569 26 28 24.6569 28 23V13C28 11.3431 26.6569 10 25 10H16.3284C15.5328 10 14.7697 9.68393 14.2071 9.12132L11.3787 6.29289C11.1911 6.10536 10.9368 6 10.6716 6H7Z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M7 6C5.34315 6 4 7.34315 4 9V23C4 24.6569 5.34315 26 7 26H25C26.6569 26 28 24.6569 28 23V13C28 11.3431 26.6569 10 25 10H16.3284C15.5328 10 14.7697 9.68393 14.2071 9.12132L11.3787 6.29289C11.1911 6.10536 10.9368 6 10.6716 6H7Z"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
</svg>
|
||||
@ -15,15 +15,21 @@
|
||||
|
||||
import { type Class, type Doc, type Ref } from '@hcengineering/core'
|
||||
import drive, { type Drive, type Folder, type Resource } from '@hcengineering/drive'
|
||||
import { setPlatformStatus, unknownError } from '@hcengineering/platform'
|
||||
import { type Asset, setPlatformStatus, unknownError } from '@hcengineering/platform'
|
||||
import { getClient, getFileMetadata, uploadFile } from '@hcengineering/presentation'
|
||||
import { showPopup } from '@hcengineering/ui'
|
||||
import { type AnySvelteComponent, showPopup } from '@hcengineering/ui'
|
||||
import { openDoc } from '@hcengineering/view-resources'
|
||||
|
||||
import CreateDrive from './components/CreateDrive.svelte'
|
||||
import CreateFolder from './components/CreateFolder.svelte'
|
||||
import RenamePopup from './components/RenamePopup.svelte'
|
||||
|
||||
import FileTypeAudio from './components/icons/FileTypeAudio.svelte'
|
||||
import FileTypeImage from './components/icons/FileTypeImage.svelte'
|
||||
import FileTypeVideo from './components/icons/FileTypeVideo.svelte'
|
||||
import FileTypePdf from './components/icons/FileTypePdf.svelte'
|
||||
import FileTypeText from './components/icons/FileTypeText.svelte'
|
||||
|
||||
async function navigateToDoc (_id: Ref<Doc>, _class: Ref<Class<Doc>>): Promise<void> {
|
||||
const client = getClient()
|
||||
const doc = await client.findOne(_class, { _id })
|
||||
@ -91,3 +97,16 @@ export async function renameResource (resource: Resource): Promise<void> {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const fileTypesMap: Record<string, AnySvelteComponent> = {
|
||||
'application/pdf': FileTypePdf,
|
||||
audio: FileTypeAudio,
|
||||
image: FileTypeImage,
|
||||
video: FileTypeVideo,
|
||||
text: FileTypeText
|
||||
}
|
||||
|
||||
export function getFileTypeIcon (contentType: string): Asset | AnySvelteComponent {
|
||||
const type = contentType.split('/', 1)[0]
|
||||
return fileTypesMap[type] ?? fileTypesMap[contentType] ?? drive.icon.File
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user