File processing indicator

app/assets/stylesheets/pageflow/editor/base.scss

@@ -79,6 +79,7 @@
   @import "./file_meta_data";
   @import "./file_meta_data_overlay";
   @import "./file_preview";
+  @import "./file_stage_icons";
   @import "./file_stages";
   @import "./file_thumbnails";
   @import "./file_settings_dialog";

app/assets/stylesheets/pageflow/editor/file_stage_icons.scss

@@ -0,0 +1,17 @@
+.file_stage_icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  &-spinner {
+    @include animation(spin 1s linear infinite);
+  }
+
+  &-spinner,
+  &-alert,
+  &-bell {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}

app/assets/stylesheets/pageflow/editor/file_stages.scss

@@ -34,18 +34,6 @@
     }
   }
 
-  &-spinner {
-    @include animation(spin 1s linear infinite);
-  }
-
-  &-spinner,
-  &-alert,
-  &-bell {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
   .percent {
     color: var(--ui-on-surface-color-light);
     font-size: 12px;

app/assets/stylesheets/pageflow/editor/file_thumbnails.scss

@@ -9,15 +9,35 @@
     inset: 0;
   }
 
+  // Covers thumbnail image and pictogram while the file is being
+  // processed.
+  &-stage_icon {
+    position: absolute;
+    inset: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: var(--ui-on-surface-color-light-solid);
+    color: var(--ui-on-primary-color);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .file_stage_icon {
+    width: 40%;
+    height: 40%;
+  }
+
   .pictogram {
     width: 100%;
     height: 100%;
-  }
 
-  .pictogram {
     background-color: var(--ui-on-surface-color-light-solid);
     @include background-icon-center($color: var(--ui-on-primary-color), $font-size: 30px);
-    @include background-icon-animation(blink);
 
     &.audio {
       @include note-icon;
@@ -27,38 +47,14 @@
       @include fa-cloud-download-icon;
     }
 
-    &.uploading {
-      @include up-bold-icon;
-    }
-
-    &.fetching_meta_data {
-      @include clipboard-icon;
-    }
-
-    &.processing,
-    &.encoding {
-      @include cog-icon;
-    }
-
     &.empty {
       @include picture-icon;
-      @include background-icon-animation(none);
-    }
-
-    &.action_required {
-      @include bell-icon;
     }
   }
 
-  div.pictogram.failed {
-    @include attention-icon;
-    @include background-icon-animation(none);
-  }
-
   &.ready {
     .pictogram {
       display: none;
-      @include background-icon-animation(none);
     }
   }
 

app/assets/stylesheets/pageflow/mixins/pageflow.scss

@@ -29,12 +29,16 @@
   }
 }
 
+// Deprecated: The editor displays the same icons for all processing
+// stages of a file. Pictograms per stage are no longer supported.
 @mixin pageflow-uploadable-file-stage($stage-name) {
-  .editor {
-    .file_thumbnail .pictogram.#{$stage-name},
-    .file_stage_item.#{$stage-name} {
-      @content;
-    }
+  @warn "pageflow-uploadable-file-stage is deprecated and no longer has any effect. " +
+        "Remove the include for stage '#{$stage-name}'.";
+
+  // Keeps existing call sites from failing since they pass a content
+  // block.
+  @if false {
+    @content;
   }
 }
 

doc/creating_file_types.md

@@ -308,13 +308,22 @@ know when a file shall be regarded as ready.
       readyState: 'unpacked'
     });
 
-There is a special SCSS mixin which can be used to associate a
-pictogram with the processing stage:
-
-    # app/assets/stylesheets/pageflow/panorama/editor.css.scss
-    @include pageflow-uploadable-file-stage('unpacking') {
-      @include archive-icon;
-    }
+The editor indicates the stage a file is waiting on with a common set
+of icons. All that is left to do, is providing translations for the
+states of the stage under
+`pageflow.editor.files.stages.<stage name>`:
+
+    # config/locales/en.yml
+    en:
+      pageflow:
+        editor:
+          files:
+            stages:
+              unpacking:
+                pending: Unpacking pending.
+                active: Unpacking in progress.
+                failed: Unpacking failed.
+                finished: Unpacking was successful.
 
 ## File Thumbnails
 

package/spec/editor/views/FileStageIconView-spec.js

@@ -0,0 +1,81 @@
+import Backbone from 'backbone';
+
+import {FileStage, FileStageIconView} from 'pageflow/editor';
+
+import {renderBackboneView as render} from 'pageflow/testHelpers';
+
+describe('FileStageIconView', () => {
+  function stage(state) {
+    return new FileStage({name: 'encoding'}, {
+      file: new Backbone.Model({state}),
+      activeStates: ['encoding'],
+      finishedStates: ['encoded'],
+      failedStates: ['encoding_failed'],
+      actionRequiredStates: ['waiting_for_confirmation']
+    });
+  }
+
+  function icons(view) {
+    function shown(name) {
+      var element = view.$el.find('.file_stage_icon-' + name)[0];
+
+      return !!element && element.style.display !== 'none';
+    }
+
+    return {
+      spinner: shown('spinner'),
+      alert: shown('alert'),
+      bell: shown('bell')
+    };
+  }
+
+  it('shows spinner while stage is active', () => {
+    const view = new FileStageIconView({model: stage('encoding')});
+
+    render(view);
+
+    expect(icons(view)).toEqual({spinner: true, alert: false, bell: false});
+  });
+
+  it('shows spinner while stage is pending', () => {
+    const view = new FileStageIconView({model: stage('uploading')});
+
+    render(view);
+
+    expect(icons(view)).toEqual({spinner: true, alert: false, bell: false});
+  });
+
+  it('shows alert icon when stage failed', () => {
+    const view = new FileStageIconView({model: stage('encoding_failed')});
+
+    render(view);
+
+    expect(icons(view)).toEqual({spinner: false, alert: true, bell: false});
+  });
+
+  it('shows bell icon when stage requires action', () => {
+    const view = new FileStageIconView({model: stage('waiting_for_confirmation')});
+
+    render(view);
+
+    expect(icons(view)).toEqual({spinner: false, alert: false, bell: true});
+  });
+
+  it('updates icon when state changes', () => {
+    const model = stage('encoding');
+    const view = new FileStageIconView({model});
+
+    render(view);
+    model.file.set('state', 'encoding_failed');
+
+    expect(icons(view)).toEqual({spinner: false, alert: true, bell: false});
+  });
+
+  it('hides icon from screen readers', () => {
+    const view = new FileStageIconView({model: stage('encoding')});
+
+    render(view);
+
+    expect(view.el.getAttribute('aria-hidden')).toEqual('true');
+  });
+});

package/spec/editor/views/FileStageItemView-spec.js

@@ -15,59 +15,11 @@ describe('FileStageItemView', () => {
     });
   }
 
-  function icons(view) {
-    function shown(name) {
-      var element = view.$el.find('.file_stage_item-' + name)[0];
-
-      return !!element && element.style.display !== 'none';
-    }
-
-    return {
-      spinner: shown('spinner'),
-      alert: shown('alert'),
-      bell: shown('bell')
-    };
-  }
-
-  it('shows spinner while stage is active', () => {
-    const view = new FileStageItemView({model: stage('encoding')});
-
-    render(view);
-
-    expect(icons(view)).toEqual({spinner: true, alert: false, bell: false});
-  });
-
-  it('shows spinner while stage is pending', () => {
-    const view = new FileStageItemView({model: stage('uploading')});
-
-    render(view);
-
-    expect(icons(view)).toEqual({spinner: true, alert: false, bell: false});
-  });
-
-  it('shows alert icon when stage failed', () => {
+  it('renders icon for stage', () => {
     const view = new FileStageItemView({model: stage('encoding_failed')});
 
     render(view);
 
-    expect(icons(view)).toEqual({spinner: false, alert: true, bell: false});
-  });
-
-  it('shows bell icon when stage requires action', () => {
-    const view = new FileStageItemView({model: stage('waiting_for_confirmation')});
-
-    render(view);
-
-    expect(icons(view)).toEqual({spinner: false, alert: false, bell: true});
-  });
-
-  it('updates icon when state changes', () => {
-    const model = stage('encoding');
-    const view = new FileStageItemView({model});
-
-    render(view);
-    model.file.set('state', 'encoding_failed');
-
-    expect(icons(view)).toEqual({spinner: false, alert: true, bell: false});
+    expect(view.$el.find('.file_stage_icon-alert')[0].style.display).not.toEqual('none');
   });
 });