New: File specific loading icons (#170)

* New: File specific loading icons

* Chore: Responding to comments

* Fix: Fix SVGs for Word and OBJs

src/lib/_common.scss

@@ -71,6 +71,12 @@ $header-height: 48px;
     }
 }
 
+.bp-icon-file,
+.bp-icon-file > svg {
+    height: 120px;
+    margin-bottom: 20px;
+}
+
 // Dark theme for header
 .bp-theme-dark {
     .bp-header {

src/lib/constants.js

@@ -36,6 +36,7 @@ export const CLASS_DARK = 'bp-dark';
 
 export const SELECTOR_BOX_PREVIEW_CONTAINER = `.${CLASS_BOX_PREVIEW_CONTAINER}`;
 export const SELECTOR_BOX_PREVIEW = `.${CLASS_BOX_PREVIEW}`;
+export const SELECTOR_BOX_PREVIEW_CRAWLER_WRAPPER = '.bp-crawler-wrapper';
 export const SELECTOR_BOX_PREVIEW_HEADER_BTNS = `.${CLASS_BOX_PREVIEW_HEADER_BTNS}`;
 export const SELECTOR_NAVIGATION_LEFT = '.bp-navigate-left';
 export const SELECTOR_NAVIGATION_RIGHT = '.bp-navigate-right';

src/lib/icons/icons.js

@@ -14,9 +14,21 @@ import ARROW_LEFT from './arrow_left_24px.svg';
 import ARROW_RIGHT from './arrow_right_24px.svg';
 import CHECK_MARK from './checkmark_24px.svg';
 import GEAR from './gear_24px.svg';
+import FILE_AUDIO from './file_audio.svg';
+import FILE_BOX_NOTE from './file_box_note.svg';
+import FILE_CODE from './file_code.svg';
+import FILE_DICOM from './file_dicom.svg';
 import FILE_DEFAULT from './file_default.svg';
-import FILE_ZIP from './file_zip.svg';
+import FILE_DOCUMENT from './file_document.svg';
+import FILE_ILLUSTRATOR from './file_illustrator.svg';
+import FILE_IMAGE from './file_image.svg';
 import FILE_MEDIA from './file_media.svg';
+import FILE_OBJ from './file_obj.svg';
+import FILE_PDF from './file_pdf.svg';
+import FILE_PRESENTATION from './file_presentation.svg';
+import FILE_SPREADSHEET from './file_spreadsheet.svg';
+import FILE_WORD from './file_word.svg';
+import FILE_ZIP from './file_zip.svg';
 import ANIMATION from './animation_24px.svg';
 import PAUSE from './pause_24px.svg';
 import PLAY from './play_24px.svg';
@@ -45,9 +57,21 @@ export const ICON_ARROW_LEFT = ARROW_LEFT;
 export const ICON_ARROW_RIGHT = ARROW_RIGHT;
 export const ICON_CHECK_MARK = CHECK_MARK;
 export const ICON_GEAR = GEAR;
+export const ICON_FILE_AUDIO = FILE_AUDIO;
+export const ICON_FILE_BOX_NOTE = FILE_BOX_NOTE;
+export const ICON_FILE_CODE = FILE_CODE;
 export const ICON_FILE_DEFAULT = FILE_DEFAULT;
-export const ICON_FILE_ZIP = FILE_ZIP;
+export const ICON_FILE_DICOM = FILE_DICOM;
+export const ICON_FILE_DOCUMENT = FILE_DOCUMENT;
+export const ICON_FILE_ILLUSTRATOR = FILE_ILLUSTRATOR;
+export const ICON_FILE_IMAGE = FILE_IMAGE;
 export const ICON_FILE_MEDIA = FILE_MEDIA;
+export const ICON_FILE_OBJ = FILE_OBJ;
+export const ICON_FILE_PDF = FILE_PDF;
+export const ICON_FILE_PRESENTATION = FILE_PRESENTATION;
+export const ICON_FILE_SPREADSHEET = FILE_SPREADSHEET;
+export const ICON_FILE_WORD = FILE_WORD;
+export const ICON_FILE_ZIP = FILE_ZIP;
 export const ICON_ANIMATION = ANIMATION;
 export const ICON_PAUSE = PAUSE;
 export const ICON_PLAY = PLAY;

src/lib/shell.html

@@ -29,7 +29,7 @@
     <div class="bp">
         <div class="bp-loading-wrapper">
             <div class="bp-loading">
-                <div class="bp-icon"></div>
+                <div class="bp-icon bp-icon-file"></div>
                 <div class="bp-crawler-wrapper">
                     <div class="bp-crawler">
                         <div></div>

src/lib/ui.js

@@ -12,15 +12,13 @@ import {
     SELECTOR_BOX_PREVIEW_BTN_PRINT,
     SELECTOR_BOX_PREVIEW_BTN_DOWNLOAD,
     SELECTOR_BOX_PREVIEW_BTN_LOADING_DOWNLOAD,
-    SELECTOR_BOX_PREVIEW_ICON,
     SELECTOR_BOX_PREVIEW_LOADING_TEXT,
     SELECTOR_BOX_PREVIEW_LOADING_WRAPPER,
     SELECTOR_BOX_PREVIEW_LOGO_CUSTOM,
     SELECTOR_BOX_PREVIEW_LOGO_DEFAULT,
     SELECTOR_NAVIGATION_LEFT,
     SELECTOR_NAVIGATION_RIGHT
 } from './constants';
-import { ICON_FILE_DEFAULT } from './icons/icons';
 
 let container;
 let contentContainer;
@@ -70,9 +68,6 @@ function setupLoading() {
         return;
     }
 
-    const iconWrapperEl = loadingWrapperEl.querySelector(SELECTOR_BOX_PREVIEW_ICON);
-    iconWrapperEl.innerHTML = ICON_FILE_DEFAULT;
-
     const loadingTextEl = loadingWrapperEl.querySelector(SELECTOR_BOX_PREVIEW_LOADING_TEXT);
     loadingTextEl.textContent = __('loading_preview');
 

src/lib/viewers/BaseViewer.js

@@ -21,9 +21,12 @@ import {
     CLASS_BOX_PREVIEW_MOBILE,
     SELECTOR_BOX_PREVIEW,
     SELECTOR_BOX_PREVIEW_BTN_ANNOTATE,
+    SELECTOR_BOX_PREVIEW_CRAWLER_WRAPPER,
+    SELECTOR_BOX_PREVIEW_ICON,
     STATUS_SUCCESS,
     STATUS_VIEWABLE
 } from '../constants';
+import { ICON_FILE_DEFAULT } from '../icons/icons';
 
 const ANNOTATIONS_JS = ['annotations.js'];
 const ANNOTATIONS_CSS = ['annotations.css'];
@@ -33,18 +36,25 @@ const RESIZE_WAIT_TIME_IN_MILLIS = 300;
 @autobind class BaseViewer extends EventEmitter {
     /**
      * Rotation value in degrees of the document, if rotated.
-     * 
+     *
      * @property {number}
      */
     rotationAngle = 0;
 
     /**
      * Scale amount of the document, if zoomed.
-     * 
+     *
      * @property {number}
      */
     scale = 1;
 
+    /**
+     * Viewer specific file loading Icon
+     *
+     * @property {string}
+     */
+    fileLoadingIcon;
+
     /**
      * [constructor]
      *
@@ -60,11 +70,13 @@ const RESIZE_WAIT_TIME_IN_MILLIS = 300;
     }
 
     /**
-     * Sets up the vewier and its DOM
+     * Sets up the viewer and its DOM
      *
      * @return {void}
      */
     setup() {
+        this.finishLoadingSetup();
+
         // Get the container dom element if selector was passed, in tests
         let { container } = this.options;
         if (typeof container === 'string') {
@@ -93,6 +105,22 @@ const RESIZE_WAIT_TIME_IN_MILLIS = 300;
         }
     }
 
+    /**
+     * Removes the crawler and sets the file type specific loading icon
+     *
+     * @return {void}
+     */
+    finishLoadingSetup() {
+        const { container } = this.options;
+        const crawler = container.querySelector(SELECTOR_BOX_PREVIEW_CRAWLER_WRAPPER);
+        if (crawler) {
+            crawler.classList.add(CLASS_HIDDEN);
+        }
+
+        const iconWrapperEl = container.querySelector(SELECTOR_BOX_PREVIEW_ICON);
+        iconWrapperEl.innerHTML = this.fileLoadingIcon || ICON_FILE_DEFAULT;
+    }
+
     /**
      * Destroys the viewer
      *
@@ -566,7 +594,7 @@ const RESIZE_WAIT_TIME_IN_MILLIS = 300;
     /**
      * Orient anntations to the correct scale and orientatio of the annotated document.
      * @TODO(jholdstock|spramod): Remove this once we are emitting the correct messaging.
-     * 
+     *
      * @protected
      * @param {Object} data - Scale and orientation values needed to orient annotations.
      * @return {void}