diff --git a/common/changes/@uifabric/file-type-icons/kathayer-updateicons_2018-03-12-22-39.json b/common/changes/@uifabric/file-type-icons/kathayer-updateicons_2018-03-12-22-39.json new file mode 100644 index 00000000000000..6e5ad1143ddedd --- /dev/null +++ b/common/changes/@uifabric/file-type-icons/kathayer-updateicons_2018-03-12-22-39.json @@ -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" +} \ No newline at end of file diff --git a/packages/file-type-icons/src/FileTypeIconMap.ts b/packages/file-type-icons/src/FileTypeIconMap.ts index f6afa3259c8b1c..c747a95e71c264 100644 --- a/packages/file-type-icons/src/FileTypeIconMap.ts +++ b/packages/file-type-icons/src/FileTypeIconMap.ts @@ -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' ] @@ -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'] }, @@ -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: [ @@ -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', diff --git a/packages/file-type-icons/src/getFileTypeIconProps.ts b/packages/file-type-icons/src/getFileTypeIconProps.ts index 831b4cf0a5201d..8a7b7307c1eb54 100644 --- a/packages/file-type-icons/src/getFileTypeIconProps.ts +++ b/packages/file-type-icons/src/getFileTypeIconProps.ts @@ -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'; } } diff --git a/packages/file-type-icons/src/initializeFileTypeIcons.tsx b/packages/file-type-icons/src/initializeFileTypeIcons.tsx index 6cac0f4b1f8e04..2854caee2aa3ad 100644 --- a/packages/file-type-icons/src/initializeFileTypeIcons.tsx +++ b/packages/file-type-icons/src/initializeFileTypeIcons.tsx @@ -6,15 +6,18 @@ 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): 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): void { @@ -22,64 +25,36 @@ function _initializeIcons(baseUrl: string, size: number, options?: Partial { - fileTypeIcons[type + size + PNG_SUFFIX] = ; - fileTypeIcons[type + size + SVG_SUFFIX] = ; + fileTypeIcons[type + size + PNG_SUFFIX] = ( + + ); + fileTypeIcons[type + size + SVG_SUFFIX] = ( + + ); // 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] = ( - + + ); + fileTypeIcons[type + size + '_1.5x' + SVG_SUFFIX] = ( + ); - if (size !== 40) { - fileTypeIcons[type + size + '_1.5x' + SVG_SUFFIX] = ( - - ); - } } fileTypeIcons[type + size + '_2x' + PNG_SUFFIX] = ( - + ); fileTypeIcons[type + size + '_3x' + PNG_SUFFIX] = ( - + ); fileTypeIcons[type + size + '_4x' + PNG_SUFFIX] = ( - - ); - }); - - registerIcons({ - fontFace: {}, - style: { - width: size, - height: size, - overflow: 'hidden' - }, - icons: fileTypeIcons - }, options); -} - -function _initializeSize64Icons(baseUrl: string, options?: Partial): 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] = ; - fileTypeIcons[type + size + SVG_SUFFIX] = ; - - // For high resolution screens, register additional versions. - // Size 64 only has PNGs for 1.5x and 2x. - fileTypeIcons[type + size + '_1.5x' + PNG_SUFFIX] = ( - - ); - fileTypeIcons[type + size + '_2x' + PNG_SUFFIX] = ( - + ); });