From 25d7840eb4a87159ce39fc44e72465d0a36bdbe1 Mon Sep 17 00:00:00 2001 From: Jeremy Press Date: Tue, 14 Nov 2017 14:13:52 -0800 Subject: [PATCH] New: Updated file icons (#484) --- src/lib/_common.scss | 4 +-- src/lib/icons/file_audio.svg | 2 +- src/lib/icons/file_box_note.svg | 2 +- src/lib/icons/file_code.svg | 2 +- src/lib/icons/file_default.svg | 2 +- src/lib/icons/file_dicom.svg | 2 +- src/lib/icons/file_document.svg | 2 +- src/lib/icons/file_excel.svg | 1 + src/lib/icons/file_google_doc.svg | 1 + src/lib/icons/file_google_sheet.svg | 1 + src/lib/icons/file_google_slide.svg | 1 + src/lib/icons/file_illustrator.svg | 2 +- src/lib/icons/file_image.svg | 2 +- src/lib/icons/file_keynote.svg | 1 + src/lib/icons/file_media.svg | 2 +- src/lib/icons/file_numbers.svg | 1 + src/lib/icons/file_obj.svg | 2 +- src/lib/icons/file_pages.svg | 1 + src/lib/icons/file_pdf.svg | 2 +- src/lib/icons/file_powerpoint.svg | 1 + src/lib/icons/file_presentation.svg | 2 +- src/lib/icons/file_spreadsheet.svg | 2 +- src/lib/icons/file_word.svg | 2 +- src/lib/icons/file_zip.svg | 2 +- src/lib/icons/icons.js | 16 ++++++++++++ src/lib/viewers/doc/DocBaseViewer.js | 26 ++++++++++++++----- .../doc/__tests__/DocBaseViewer-test.js | 4 +-- src/lib/viewers/error/PreviewErrorViewer.js | 8 +++--- .../__tests__/PreviewErrorViewer-test.js | 2 +- src/lib/viewers/office/OfficeViewer.js | 4 +-- 30 files changed, 69 insertions(+), 33 deletions(-) create mode 100755 src/lib/icons/file_excel.svg create mode 100755 src/lib/icons/file_google_doc.svg create mode 100755 src/lib/icons/file_google_sheet.svg create mode 100755 src/lib/icons/file_google_slide.svg create mode 100755 src/lib/icons/file_keynote.svg create mode 100755 src/lib/icons/file_numbers.svg create mode 100755 src/lib/icons/file_pages.svg create mode 100755 src/lib/icons/file_powerpoint.svg diff --git a/src/lib/_common.scss b/src/lib/_common.scss index e80ee9864..b3907a604 100644 --- a/src/lib/_common.scss +++ b/src/lib/_common.scss @@ -76,8 +76,8 @@ $header-height: 48px; } .bp-icon-file { - height: 120px; - margin-bottom: 20px; + // Actual height of the file icon + height: 160px; } // Dark theme for header diff --git a/src/lib/icons/file_audio.svg b/src/lib/icons/file_audio.svg index 1707901ac..fbe0a6356 100755 --- a/src/lib/icons/file_audio.svg +++ b/src/lib/icons/file_audio.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/file_box_note.svg b/src/lib/icons/file_box_note.svg index 834440512..b539ab533 100755 --- a/src/lib/icons/file_box_note.svg +++ b/src/lib/icons/file_box_note.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/file_code.svg b/src/lib/icons/file_code.svg index 55ec299c0..5c40bc3bf 100755 --- a/src/lib/icons/file_code.svg +++ b/src/lib/icons/file_code.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/file_default.svg b/src/lib/icons/file_default.svg index 478fdb000..538c2fdad 100644 --- a/src/lib/icons/file_default.svg +++ b/src/lib/icons/file_default.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/file_dicom.svg b/src/lib/icons/file_dicom.svg index cfa03a20f..d8dedd921 100755 --- a/src/lib/icons/file_dicom.svg +++ b/src/lib/icons/file_dicom.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/file_document.svg b/src/lib/icons/file_document.svg index f78dd94db..9e6222f28 100755 --- a/src/lib/icons/file_document.svg +++ b/src/lib/icons/file_document.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/file_excel.svg b/src/lib/icons/file_excel.svg new file mode 100755 index 000000000..1ab64ac8b --- /dev/null +++ b/src/lib/icons/file_excel.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_google_doc.svg b/src/lib/icons/file_google_doc.svg new file mode 100755 index 000000000..4ffc19ba2 --- /dev/null +++ b/src/lib/icons/file_google_doc.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_google_sheet.svg b/src/lib/icons/file_google_sheet.svg new file mode 100755 index 000000000..eb024f8a0 --- /dev/null +++ b/src/lib/icons/file_google_sheet.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_google_slide.svg b/src/lib/icons/file_google_slide.svg new file mode 100755 index 000000000..388ca5d54 --- /dev/null +++ b/src/lib/icons/file_google_slide.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_illustrator.svg b/src/lib/icons/file_illustrator.svg index 663765421..c7cdf1b91 100755 --- a/src/lib/icons/file_illustrator.svg +++ b/src/lib/icons/file_illustrator.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/file_image.svg b/src/lib/icons/file_image.svg index 4f4ae235f..a807555c1 100755 --- a/src/lib/icons/file_image.svg +++ b/src/lib/icons/file_image.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/file_keynote.svg b/src/lib/icons/file_keynote.svg new file mode 100755 index 000000000..4b401d32b --- /dev/null +++ b/src/lib/icons/file_keynote.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_media.svg b/src/lib/icons/file_media.svg index 15bf213a4..0f446dcbf 100644 --- a/src/lib/icons/file_media.svg +++ b/src/lib/icons/file_media.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/file_numbers.svg b/src/lib/icons/file_numbers.svg new file mode 100755 index 000000000..d7440ce20 --- /dev/null +++ b/src/lib/icons/file_numbers.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_obj.svg b/src/lib/icons/file_obj.svg index 87cf9ea92..4b146ba3a 100755 --- a/src/lib/icons/file_obj.svg +++ b/src/lib/icons/file_obj.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/file_pages.svg b/src/lib/icons/file_pages.svg new file mode 100755 index 000000000..38e2320f6 --- /dev/null +++ b/src/lib/icons/file_pages.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_pdf.svg b/src/lib/icons/file_pdf.svg index 7f956cd59..fb6fad3cd 100755 --- a/src/lib/icons/file_pdf.svg +++ b/src/lib/icons/file_pdf.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/file_powerpoint.svg b/src/lib/icons/file_powerpoint.svg new file mode 100755 index 000000000..6e331b58f --- /dev/null +++ b/src/lib/icons/file_powerpoint.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_presentation.svg b/src/lib/icons/file_presentation.svg index 63d749324..138b1b21d 100644 --- a/src/lib/icons/file_presentation.svg +++ b/src/lib/icons/file_presentation.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/file_spreadsheet.svg b/src/lib/icons/file_spreadsheet.svg index be51067d9..f072cb77e 100755 --- a/src/lib/icons/file_spreadsheet.svg +++ b/src/lib/icons/file_spreadsheet.svg @@ -1 +1 @@ - +SPREADSHEET diff --git a/src/lib/icons/file_word.svg b/src/lib/icons/file_word.svg index 57bc1fe4c..810e67faf 100755 --- a/src/lib/icons/file_word.svg +++ b/src/lib/icons/file_word.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/file_zip.svg b/src/lib/icons/file_zip.svg index 86685134a..fd70a1fc2 100644 --- a/src/lib/icons/file_zip.svg +++ b/src/lib/icons/file_zip.svg @@ -1 +1 @@ - + diff --git a/src/lib/icons/icons.js b/src/lib/icons/icons.js index a7a73de6b..9357b3e06 100644 --- a/src/lib/icons/icons.js +++ b/src/lib/icons/icons.js @@ -16,11 +16,19 @@ import FILE_CODE from './file_code.svg'; import FILE_DICOM from './file_dicom.svg'; import FILE_DEFAULT from './file_default.svg'; import FILE_DOCUMENT from './file_document.svg'; +import FILE_EXCEL from './file_excel.svg'; +import FILE_GOOGLE_DOC from './file_google_doc.svg'; +import FILE_GOOGLE_SHEET from './file_google_sheet.svg'; +import FILE_GOOGLE_SLIDE from './file_google_slide.svg'; import FILE_ILLUSTRATOR from './file_illustrator.svg'; import FILE_IMAGE from './file_image.svg'; +import FILE_KEYNOTE from './file_keynote.svg'; import FILE_MEDIA from './file_media.svg'; +import FILE_NUMBERS from './file_numbers.svg'; import FILE_OBJ from './file_obj.svg'; +import FILE_PAGES from './file_pages.svg'; import FILE_PDF from './file_pdf.svg'; +import FILE_POWERPOINT from './file_powerpoint.svg'; import FILE_PRESENTATION from './file_presentation.svg'; import FILE_SPREADSHEET from './file_spreadsheet.svg'; import FILE_WORD from './file_word.svg'; @@ -55,11 +63,19 @@ export const ICON_FILE_CODE = FILE_CODE; export const ICON_FILE_DEFAULT = FILE_DEFAULT; export const ICON_FILE_DICOM = FILE_DICOM; export const ICON_FILE_DOCUMENT = FILE_DOCUMENT; +export const ICON_FILE_EXCEL = FILE_EXCEL; +export const ICON_FILE_GOOGLE_DOC = FILE_GOOGLE_DOC; +export const ICON_FILE_GOOGLE_SHEET = FILE_GOOGLE_SHEET; +export const ICON_FILE_GOOGLE_SLIDE = FILE_GOOGLE_SLIDE; export const ICON_FILE_ILLUSTRATOR = FILE_ILLUSTRATOR; export const ICON_FILE_IMAGE = FILE_IMAGE; +export const ICON_FILE_KEYNOTE = FILE_KEYNOTE; export const ICON_FILE_MEDIA = FILE_MEDIA; +export const ICON_FILE_NUMBERS = FILE_NUMBERS; export const ICON_FILE_OBJ = FILE_OBJ; +export const ICON_FILE_PAGES = FILE_PAGES; export const ICON_FILE_PDF = FILE_PDF; +export const ICON_FILE_POWERPOINT = FILE_POWERPOINT; export const ICON_FILE_PRESENTATION = FILE_PRESENTATION; export const ICON_FILE_SPREADSHEET = FILE_SPREADSHEET; export const ICON_FILE_WORD = FILE_WORD; diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index bcb98147a..35e2bc968 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -23,7 +23,15 @@ import { checkPermission, getRepresentation } from '../../file'; import { get, createAssetUrlCreator } from '../../util'; import { ICON_FILE_DOCUMENT, + ICON_FILE_EXCEL, + ICON_FILE_GOOGLE_DOC, + ICON_FILE_GOOGLE_SHEET, + ICON_FILE_GOOGLE_SLIDE, + ICON_FILE_KEYNOTE, + ICON_FILE_NUMBERS, + ICON_FILE_PAGES, ICON_FILE_PDF, + ICON_FILE_POWERPOINT, ICON_FILE_PRESENTATION, ICON_FILE_SPREADSHEET, ICON_FILE_WORD, @@ -49,15 +57,19 @@ const LOADING_ICON_MAP = { csv: ICON_FILE_SPREADSHEET, doc: ICON_FILE_WORD, docx: ICON_FILE_WORD, - gdoc: ICON_FILE_WORD, - gsheet: ICON_FILE_SPREADSHEET, + gdoc: ICON_FILE_GOOGLE_DOC, + gsheet: ICON_FILE_GOOGLE_SHEET, + gslide: ICON_FILE_GOOGLE_SLIDE, + key: ICON_FILE_KEYNOTE, + numbers: ICON_FILE_NUMBERS, odp: ICON_FILE_PRESENTATION, + pages: ICON_FILE_PAGES, pdf: ICON_FILE_PDF, - ppt: ICON_FILE_PRESENTATION, - pptx: ICON_FILE_PRESENTATION, - xls: ICON_FILE_SPREADSHEET, - xlsm: ICON_FILE_SPREADSHEET, - xlsx: ICON_FILE_SPREADSHEET + ppt: ICON_FILE_POWERPOINT, + pptx: ICON_FILE_POWERPOINT, + xls: ICON_FILE_EXCEL, + xlsm: ICON_FILE_EXCEL, + xlsx: ICON_FILE_EXCEL }; @autobind diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js index 12ea7c8e7..fdf71ae1f 100644 --- a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js +++ b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js @@ -18,7 +18,7 @@ import { STATUS_SUCCESS, } from '../../../constants'; -import { ICON_PRINT_CHECKMARK, ICON_FILE_PRESENTATION } from '../../../icons/icons'; +import { ICON_PRINT_CHECKMARK, ICON_FILE_POWERPOINT } from '../../../icons/icons'; const LOAD_TIMEOUT_MS = 180000; // 3 min timeout const PRINT_TIMEOUT_MS = 1000; // Wait 1s before trying to print @@ -95,7 +95,7 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { }); it('should correctly set the file icon based on file extension', () => { - expect(docBase.fileLoadingIcon).to.equal(ICON_FILE_PRESENTATION); + expect(docBase.fileLoadingIcon).to.equal(ICON_FILE_POWERPOINT); }); }); diff --git a/src/lib/viewers/error/PreviewErrorViewer.js b/src/lib/viewers/error/PreviewErrorViewer.js index 0aa35461b..dcdc72d40 100644 --- a/src/lib/viewers/error/PreviewErrorViewer.js +++ b/src/lib/viewers/error/PreviewErrorViewer.js @@ -59,17 +59,17 @@ class PreviewErrorViewer extends BaseViewer { this.setup(); const { file, showDownload } = this.options; - let icon = ICON_FILE_DEFAULT; + this.icon = ICON_FILE_DEFAULT; // Generic errors will not have the file object if (file) { switch (file.extension) { case 'zip': case 'tgz': - icon = ICON_FILE_ZIP; + this.icon = ICON_FILE_ZIP; break; case 'flv': - icon = ICON_FILE_MEDIA; + this.icon = ICON_FILE_MEDIA; break; default: // no-op @@ -84,7 +84,7 @@ class PreviewErrorViewer extends BaseViewer { let displayMessage = err.displayMessage || err.message; displayMessage = typeof displayMessage === 'string' ? displayMessage : __('error_default'); - this.iconEl.innerHTML = icon; + this.iconEl.innerHTML = this.icon; this.messageEl.textContent = displayMessage; // Add optional download button diff --git a/src/lib/viewers/error/__tests__/PreviewErrorViewer-test.js b/src/lib/viewers/error/__tests__/PreviewErrorViewer-test.js index 994aa000b..1b695a460 100644 --- a/src/lib/viewers/error/__tests__/PreviewErrorViewer-test.js +++ b/src/lib/viewers/error/__tests__/PreviewErrorViewer-test.js @@ -69,7 +69,7 @@ describe('lib/viewers/error/PreviewErrorViewer', () => { error.options.file.extension = extension; error.load(err); - expect(error.iconEl).to.contain.html(expectedIcon); + expect(error.icon).to.equal(expectedIcon); expect(error.messageEl.textContent).to.equal(err.displayMessage); }); }); diff --git a/src/lib/viewers/office/OfficeViewer.js b/src/lib/viewers/office/OfficeViewer.js index f1da2fa08..5b3bcffb5 100644 --- a/src/lib/viewers/office/OfficeViewer.js +++ b/src/lib/viewers/office/OfficeViewer.js @@ -4,7 +4,7 @@ import Browser from '../../Browser'; import Popup from '../../Popup'; import { CLASS_HIDDEN } from '../../constants'; import { getRepresentation } from '../../file'; -import { ICON_FILE_SPREADSHEET, ICON_PRINT_CHECKMARK } from '../../icons/icons'; +import { ICON_FILE_EXCEL, ICON_PRINT_CHECKMARK } from '../../icons/icons'; import { get } from '../../util'; const LOAD_TIMEOUT_MS = 120000; @@ -25,7 +25,7 @@ class OfficeViewer extends BaseViewer { * @inheritdoc */ setup() { - this.fileLoadingIcon = ICON_FILE_SPREADSHEET; + this.fileLoadingIcon = ICON_FILE_EXCEL; // Call super() to set up common layout super.setup();