Skip to content

Commit

Permalink
Fix bugs in resolving icon and color for file extension (#10059)
Browse files Browse the repository at this point in the history
  • Loading branch information
pascalwengerter authored and AlexAndBear committed Dec 13, 2023
1 parent 14766d6 commit 9f664a7
Show file tree
Hide file tree
Showing 9 changed files with 250 additions and 669 deletions.
7 changes: 7 additions & 0 deletions changelog/unreleased/bugfix-icon-extension-mapping
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
Bugfix: Icon extension mapping

We have simplified the mapping between file extensions and their display in the web UI (icon and its color).
Now, further formats/extensions (`.tar.gz`,`.tar.xz`,`.bz2`, ...) get displayed correctly.

https://github.com/owncloud/web/issues/10031
https://github.com/owncloud/web/pull/10059
4 changes: 0 additions & 4 deletions packages/design-system/build/webpack.system.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,6 @@ const webpackConfig = merge(baseWebpackConfig, {
{
from: path.resolve(__dirname, '../l10n/translations.json'),
to: config.system.assetsSubDirectory
},
{
from: path.resolve(__dirname, '../src/helpers/resourceIconMapping.json'),
to: config.system.assetsSubDirectory
}
]
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ const resourceIconMapping: OcResourceIconMapping = {
},
mimeType: {
'not-a-real-mimetype': {
name: 'resource-type-madeup-mimetype',
color: 'blue'
name: 'resource-type-file',
color: 'var(--oc-color-text-default)'
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ import { computed, defineComponent, inject, PropType, unref } from 'vue'
import { Resource } from '@ownclouders/web-client'
import OcIcon from '../OcIcon/OcIcon.vue'
import { AVAILABLE_SIZES, IconType } from '../../helpers'
import * as iconMapping from '../../helpers/resourceIconMapping.json'
import { AVAILABLE_SIZES, IconType, createDefaultFileIconMapping } from '../../helpers'
import { OcResourceIconMapping, ocResourceIconMappingInjectionKey } from './types'
Expand All @@ -39,6 +38,8 @@ const defaultFallbackIcon: IconType = {
color: 'var(--oc-color-text-default)'
}
const defaultFileIconMapping = createDefaultFileIconMapping()
export default defineComponent({
name: 'OcResourceIcon',
status: 'ready',
Expand Down Expand Up @@ -92,10 +93,11 @@ export default defineComponent({
return defaultFolderIcon
}
let icon =
(iconMapping[unref(extension)] as IconType) ||
const icon =
defaultFileIconMapping[unref(extension)] ||
iconMappingInjection?.mimeType[unref(mimeType)] ||
iconMappingInjection?.extension[unref(extension)]
return {
...defaultFallbackIcon,
...icon
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,49 +100,49 @@ exports[`OcResourceIcon renders OcIcon for resource type file with extension "no

exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size large 1`] = `
<span>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="large" type="span" variation="passive"></oc-icon-stub>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="large" type="span" variation="passive"></oc-icon-stub>
<!--v-if-->
</span>
`;

exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size medium 1`] = `
<span>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="medium" type="span" variation="passive"></oc-icon-stub>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="medium" type="span" variation="passive"></oc-icon-stub>
<!--v-if-->
</span>
`;

exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size small 1`] = `
<span>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="small" type="span" variation="passive"></oc-icon-stub>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="small" type="span" variation="passive"></oc-icon-stub>
<!--v-if-->
</span>
`;

exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xlarge 1`] = `
<span>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="xlarge" type="span" variation="passive"></oc-icon-stub>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xlarge" type="span" variation="passive"></oc-icon-stub>
<!--v-if-->
</span>
`;

exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xsmall 1`] = `
<span>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="xsmall" type="span" variation="passive"></oc-icon-stub>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xsmall" type="span" variation="passive"></oc-icon-stub>
<!--v-if-->
</span>
`;

exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xxlarge 1`] = `
<span>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="xxlarge" type="span" variation="passive"></oc-icon-stub>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xxlarge" type="span" variation="passive"></oc-icon-stub>
<!--v-if-->
</span>
`;

exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xxxlarge 1`] = `
<span>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="xxxlarge" type="span" variation="passive"></oc-icon-stub>
<oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xxxlarge" type="span" variation="passive"></oc-icon-stub>
<!--v-if-->
</span>
`;
Expand Down
225 changes: 225 additions & 0 deletions packages/design-system/src/helpers/createDefaultFileIconMapping.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
import { IconType } from './types'

const fileIcon = {
archive: {
icon: { name: 'resource-type-archive', color: 'var(--oc-color-icon-archive)' },
extensions: [
'7z',
'apk',
'bz2',
'deb',
'gz',
'gzip',
'rar',
'tar',
'tar.bz2',
'tar.gz',
'tar.xz',
'tbz2',
'tgz',
'zip'
]
},
audio: {
icon: { name: 'resource-type-audio', color: 'var(--oc-color-icon-audio)' },
extensions: [
'3gp',
'8svx',
'aa',
'aac',
'aax',
'act',
'aiff',
'alac',
'amr',
'ape',
'au',
'awb',
'cda',
'dss',
'dvf',
'flac',
'gsm',
'iklax',
'ivs',
'm4a',
'm4b',
'm4p',
'mmf',
'mogg',
'movpkg',
'mp3',
'mpc',
'msv',
'nmf',
'oga',
'ogga',
'opus',
'ra',
'raw',
'rf64',
'rm',
'sln',
'tta',
'voc',
'vox',
'wav',
'wma',
'wv'
]
},
code: {
icon: { name: 'resource-type-code', color: 'var(--oc-color-text-default)' },
extensions: [
'bash',
'c++',
'c',
'cc',
'cpp',
'css',
'feature',
'go',
'h',
'hh',
'hpp',
'htm',
'html',
'java',
'js',
'json',
'php',
'pl',
'py',
'scss',
'sh',
'sh-lib',
'sql',
'ts',
'xml',
'yaml',
'yml'
]
},
default: {
icon: { name: 'resource-type-file', color: 'var(--oc-color-text-default)' },
extensions: ['accdb', 'rss', 'swf']
},
drawio: {
icon: { name: 'resource-type-drawio', color: 'var(--oc-color-icon-drawio)' },
extensions: ['drawio']
},
document: {
icon: { name: 'resource-type-document', color: 'var(--oc-color-icon-document)' },
extensions: ['doc', 'docm', 'docx', 'dot', 'dotx', 'lwp', 'odt', 'one', 'vsd', 'wpd']
},
ifc: {
icon: { name: 'resource-type-ifc', color: 'var(--oc-color-icon-ifc)' },
extensions: ['ifc']
},
ipynb: {
icon: { name: 'resource-type-jupyter', color: 'var(--oc-color-icon-jupyter)' },
extensions: ['ipynb']
},
image: {
icon: { name: 'resource-type-image', color: 'var(--oc-color-icon-image)' },
extensions: [
'ai',
'cdr',
'eot',
'eps',
'gif',
'jpeg',
'jpg',
'otf',
'pfb',
'png',
'ps',
'psd',
'svg',
'ttf',
'woff',
'xcf'
]
},
form: {
icon: { name: 'resource-type-form', color: 'var(--oc-color-icon-form)' },
extensions: ['docf', 'docxf', 'oform']
},
markdown: {
icon: { name: 'resource-type-markdown', color: 'var(--oc-color-icon-markdown)' },
extensions: ['md']
},
odg: {
icon: { name: 'resource-type-graphic', color: 'var(--oc-color-icon-graphic)' },
extensions: ['odg']
},
pdf: {
icon: { name: 'resource-type-pdf', color: 'var(--oc-color-icon-pdf)' },
extensions: ['pdf']
},
presentation: {
icon: { name: 'resource-type-presentation', color: 'var(--oc-color-icon-presentation)' },
extensions: [
'odp',
'pot',
'potm',
'potx',
'ppa',
'ppam',
'pps',
'ppsm',
'ppsx',
'ppt',
'pptm',
'pptx'
]
},
root: {
icon: { name: 'resource-type-root', color: 'var(--oc-color-icon-root)' },
extensions: ['root']
},
spreadsheet: {
icon: { name: 'resource-type-spreadsheet', color: 'var(--oc-color-icon-spreadsheet)' },
extensions: ['csv', 'ods', 'xla', 'xlam', 'xls', 'xlsb', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx']
},
text: {
icon: { name: 'resource-type-text', color: 'var(--oc-color-text-default)' },
extensions: [
'cb7',
'cba',
'cbr',
'cbt',
'cbtc',
'cbz',
'cvbdl',
'eml',
'epub',
'mdb',
'tex',
'txt'
]
},
url: {
icon: { name: 'resource-type-url', color: 'var(--oc-color-text-default)' },
extensions: ['url']
},
video: {
icon: {
name: 'resource-type-video',
color: 'var(--oc-color-icon-video)'
},
extensions: ['mov', 'mp4', 'webm', 'wmv']
}
}

export function createDefaultFileIconMapping() {
const fileIconMapping: Record<string, IconType> = {}

Object.values(fileIcon).forEach((value) => {
value.extensions.forEach((extension) => {
fileIconMapping[extension] = value.icon
})
})

return fileIconMapping
}
3 changes: 2 additions & 1 deletion packages/design-system/src/helpers/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './colors'
export * from './constants'
export * from './createDefaultFileIconMapping'
export * from './types'
export * from './colors'
Loading

0 comments on commit 9f664a7

Please sign in to comment.