Skip to content

File type icons: Update icon mapping #4243

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jahnp merged 3 commits into from
Mar 13, 2018
Merged

File type icons: Update icon mapping #4243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c2ac1c
Update file type icon mapping
KatherineThayerMicrosoft Mar 12, 2018
08439c3
Fix tslint errors
KatherineThayerMicrosoft Mar 12, 2018
278c272
Add change file
KatherineThayerMicrosoft Mar 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/@uifabric/file-type-icons/kathayer-updateicons_2018-03-12-22-39.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "@uifabric/file-type-icons",
"comment": "Update file type icon mappings",
"type": "minor"
}
],
"packageName": "@uifabric/file-type-icons",
"email": "kathayer@microsoft.com"
}
17 changes: 10 additions & 7 deletions packages/file-type-icons/src/FileTypeIconMap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const FileTypeIconMap: { [key: string]: { extensions?: string[] } } = {
'profile', 'ps1', 'pss', 'pt', 'py', 'pyw', 'r', 'rake', 'rb', 'rbx', 'rc', 'rdf', 're', 'reg',
'rest', 'resw', 'resx', 'rhtml', 'rjs', 'rprofile', 'rpy', 'rss', 'rst', 'ruby', 'rxml', 's',
'sass', 'scala', 'scm', 'sconscript', 'sconstruct', 'script', 'scss', 'sgml', 'sh', 'sh',
'shtml', 'sml', 'svn-base', 'sql', 'sql', 'sty', 'tcl', 'tex', 'textile', 'tld', 'tli',
'shtml', 'sml', 'svn-base', 'swift', 'sql', 'sty', 'tcl', 'tex', 'textile', 'tld', 'tli',
'tmpl', 'tpl', 'vb', 'vi', 'vim', 'vmg', 'webpart', 'wsp', 'wsdl', 'xhtml', 'xoml', 'xsd',
'xslt', 'yaml', 'yaws', 'yml', 'zsh'
]
Expand All @@ -49,14 +49,11 @@ export const FileTypeIconMap: { [key: string]: { extensions?: string[] } } = {
'model': {
extensions: [
'3ds', '3mf', 'blend', 'cool', 'dae', 'df', 'dwfx', 'dwg', 'dxf', 'fbx', 'glb', 'gltf', 'holo',
'layout', 'max', 'off', 'ply', 'skp', 'stp', 'stl', 't', 'thl', 'x'
'layout', 'max', 'mtl', 'obj', 'off', 'ply', 'skp', 'stp', 'stl', 't', 'thl', 'x'
]
},
'mpp': { extensions: ['mpp'] },
'mpt': { extensions: ['mpt'] },
'odp': { extensions: ['odp'] },
'ods': { extensions: ['ods'] },
'odt': { extensions: ['odt'] },
'one': { extensions: ['one', 'onepkg'] }, // this is a format for exported single-file notebook pages
'onetoc': { extensions: ['ms-one-stub', 'onetoc', 'onetoc2'] }, // this icon represents a complete, logical notebook.
'pdf': { extensions: ['pdf'] },
Expand All @@ -70,9 +67,11 @@ export const FileTypeIconMap: { [key: string]: { extensions?: string[] } } = {
'potx': { extensions: ['pot', 'potm', 'potx'] },
'ppsx': { extensions: ['pps', 'ppsm', 'ppsx'] },
'pptx': { extensions: ['ppt', 'pptm', 'pptx'] },
'presentation': { extensions: ['odp', 'gslides', 'key'] },
'pub': { extensions: ['pub'] },
'spo': { extensions: ['aspx'] },
'rtf': { extensions: ['epub', 'rtf', 'wri'] },
'spreadsheet': { extensions: ['ods', 'gsheet', 'numbers'] },
'rtf': { extensions: ['epub', 'gdoc', 'odt', 'rtf', 'wri', 'pages'] },
'sharedfolder': {},
'sysfile': {
extensions: [
Expand All @@ -82,7 +81,11 @@ export const FileTypeIconMap: { [key: string]: { extensions?: string[] } } = {
]
},
'txt': { extensions: ['dif', 'diff', 'readme', 'out', 'plist', 'properties', 'text', 'txt'] },
'vector': { extensions: ['ai', 'dgn', 'pd', 'emf', 'eps', 'indd', 'indt', 'ps', 'svg', 'svgz', 'wmf', 'oxps', 'xps', 'xd', 'sketch'] },
'vector': {
extensions: [
'ai', 'dgn', 'gdraw', 'pd', 'emf', 'eps', 'indd', 'indt', 'ps', 'svg', 'svgz', 'wmf', 'oxps', 'xps', 'xd', 'sketch'
]
},
'video': {
extensions: ['3gp', 'asf', 'avi', 'dvr-ms', 'flv', 'm1v', 'm4v', 'mkv', 'mod', 'mov',
'mm4p', 'mp2', 'mp2v', 'mp4', ' mpa', 'mpe', 'mpeg', 'mpg', 'mpv', 'mpv2', 'mts', 'ogg', 'qt',
Expand Down
46 changes: 17 additions & 29 deletions packages/file-type-icons/src/getFileTypeIconProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,36 +105,24 @@ function _getFileTypeIconSuffix(size: FileTypeIconSize, imageFileType: ImageFile
let devicePixelRatio: number = window.devicePixelRatio;
let devicePixelRatioSuffix = ''; // Default is 1x

if (size !== 64) {
// SVGs scale well, so you can generally use the default image.
// 1.5x is a special case where SVGs need a different image.
if (imageFileType === 'svg' && 1 < devicePixelRatio && devicePixelRatio <= 1.5) {
// Currently missing 1.5x SVGs at sizes 20 and 40, snap to 1x for now
if (size !== 20 && size !== 40) {
devicePixelRatioSuffix = '_1.5x';
}
} else if (imageFileType === 'png') {
// To look good, PNGs should use a different image for higher device pixel ratios
if (1 < devicePixelRatio && devicePixelRatio <= 1.5) {
// Currently missing 1.5x icons for size 20, snap to 2x for now
devicePixelRatioSuffix = (size === 20) ? '_2x' : '_1.5x';
} else if (1.5 < devicePixelRatio && devicePixelRatio <= 2) {
devicePixelRatioSuffix = '_2x';
} else if (2 < devicePixelRatio && devicePixelRatio <= 3) {
devicePixelRatioSuffix = '_3x';
} else if (3 < devicePixelRatio) {
devicePixelRatioSuffix = '_4x';
}
// SVGs scale well, so you can generally use the default image.
// 1.5x is a special case where SVGs need a different image.
if (imageFileType === 'svg' && 1 < devicePixelRatio && devicePixelRatio <= 1.5) {
// Currently missing 1.5x SVGs at size 20, snap to 1x for now
if (size !== 20) {
devicePixelRatioSuffix = '_1.5x';
}
} else {
// Currently we have a more limited set of image files for size 64.
// For SVGs, we only have the default 1x. For PNGs, we have 1x, 1.5x, and 2x.
if (imageFileType === 'png') {
if (1 < devicePixelRatio && devicePixelRatio <= 1.5) {
devicePixelRatioSuffix = '_1.5x';
} else if (1.5 < devicePixelRatio) {
devicePixelRatioSuffix = '_2x';
}
} else if (imageFileType === 'png') {
// To look good, PNGs should use a different image for higher device pixel ratios
if (1 < devicePixelRatio && devicePixelRatio <= 1.5) {
// Currently missing 1.5x icons for size 20, snap to 2x for now
devicePixelRatioSuffix = (size === 20) ? '_2x' : '_1.5x';
} else if (1.5 < devicePixelRatio && devicePixelRatio <= 2) {
devicePixelRatioSuffix = '_2x';
} else if (2 < devicePixelRatio && devicePixelRatio <= 3) {
devicePixelRatioSuffix = '_3x';
} else if (3 < devicePixelRatio) {
devicePixelRatioSuffix = '_4x';
}
}

Expand Down
67 changes: 21 additions & 46 deletions packages/file-type-icons/src/initializeFileTypeIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,80 +6,55 @@ const PNG_SUFFIX = '_png';
const SVG_SUFFIX = '_svg';

const DEFAULT_BASE_URL = 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/';
const ICON_SIZES: number[] = [16, 20, 32, 40, 48, 96];
const ICON_SIZES: number[] = [16, 20, 32, 40, 48, 64, 96];

// Due to CDN cache, images updated in place may take up to a year to appear for some users
// (though most users will see them within a week). To force immediate refresh, append a
// unique string to the end of the URL. The CDN uses the URL as the cache key, so passing a
// new URL will cause the CDN to create a new cache key.
const REFRESH_STRING = '?refresh1';

export function initializeFileTypeIcons(baseUrl: string = DEFAULT_BASE_URL, options?: Partial<IIconOptions>): void {
ICON_SIZES.forEach((size: number) => {
_initializeIcons(baseUrl, size, options);
});
// Currently we have a more limited set of image files for size 64.
// When we have the full set, add 64 to ICON_SIZES and remove _initializeSize64Icons.
_initializeSize64Icons(baseUrl, options);
}

function _initializeIcons(baseUrl: string, size: number, options?: Partial<IIconOptions>): void {
const iconTypes: string[] = Object.keys(FileTypeIconMap);
const fileTypeIcons: { [key: string]: JSX.Element } = {};

iconTypes.forEach((type: string) => {
fileTypeIcons[type + size + PNG_SUFFIX] = <img src={ baseUrl + size + '/' + type + '.png' } />;
fileTypeIcons[type + size + SVG_SUFFIX] = <img src={ baseUrl + size + '/' + type + '.svg' } />;
fileTypeIcons[type + size + PNG_SUFFIX] = (
<img src={ baseUrl + size + '/' + type + '.png' + REFRESH_STRING } />
);
fileTypeIcons[type + size + SVG_SUFFIX] = (
<img src={ baseUrl + size + '/' + type + '.svg' + REFRESH_STRING } />
);

// For high resolution screens, register additional versions
// Apply height=100% and width=100% to force image to fit into containing element

// SVGs scale well, so you can generally use the default image.
// 1.5x is a special case where both SVGs and PNGs need a different image.
// Remove if statements when missing image files for sizes 20 and 40 are provided.
// Remove if statements when missing image files for 20_1.5x are provided.
if (size !== 20) {
fileTypeIcons[type + size + '_1.5x' + PNG_SUFFIX] = (
<img src={ baseUrl + size + '_1.5x/' + type + '.png' } height='100%' width='100%' />
<img src={ baseUrl + size + '_1.5x/' + type + '.png' + REFRESH_STRING } height='100%' width='100%' />
);
fileTypeIcons[type + size + '_1.5x' + SVG_SUFFIX] = (
<img src={ baseUrl + size + '_1.5x/' + type + '.svg' + REFRESH_STRING } height='100%' width='100%' />
);
if (size !== 40) {
fileTypeIcons[type + size + '_1.5x' + SVG_SUFFIX] = (
<img src={ baseUrl + size + '_1.5x/' + type + '.svg' } height='100%' width='100%' />
);
}
}

fileTypeIcons[type + size + '_2x' + PNG_SUFFIX] = (
<img src={ baseUrl + size + '_2x/' + type + '.png' } height='100%' width='100%' />
<img src={ baseUrl + size + '_2x/' + type + '.png' + REFRESH_STRING } height='100%' width='100%' />
);
fileTypeIcons[type + size + '_3x' + PNG_SUFFIX] = (
<img src={ baseUrl + size + '_3x/' + type + '.png' } height='100%' width='100%' />
<img src={ baseUrl + size + '_3x/' + type + '.png' + REFRESH_STRING } height='100%' width='100%' />
);
fileTypeIcons[type + size + '_4x' + PNG_SUFFIX] = (
<img src={ baseUrl + size + '_4x/' + type + '.png' } height='100%' width='100%' />
);
});

registerIcons({
fontFace: {},
style: {
width: size,
height: size,
overflow: 'hidden'
},
icons: fileTypeIcons
}, options);
}

function _initializeSize64Icons(baseUrl: string, options?: Partial<IIconOptions>): void {
const iconTypes: string[] = Object.keys(FileTypeIconMap);
const fileTypeIcons: { [key: string]: JSX.Element } = {};
const size = 64;

iconTypes.forEach((type: string) => {
fileTypeIcons[type + size + PNG_SUFFIX] = <img src={ baseUrl + size + '/' + type + '.png' } />;
fileTypeIcons[type + size + SVG_SUFFIX] = <img src={ baseUrl + size + '/' + type + '.svg' } />;

// For high resolution screens, register additional versions.
// Size 64 only has PNGs for 1.5x and 2x.
fileTypeIcons[type + size + '_1.5x' + PNG_SUFFIX] = (
<img src={ baseUrl + size + '_1.5x/' + type + '.png' } height='100%' width='100%' />
);
fileTypeIcons[type + size + '_2x' + PNG_SUFFIX] = (
<img src={ baseUrl + size + '_2x/' + type + '.png' } height='100%' width='100%' />
<img src={ baseUrl + size + '_4x/' + type + '.png' + REFRESH_STRING } height='100%' width='100%' />
);
});

Expand Down