Show file content for non-binary files

.scss-lint.yml

@@ -169,7 +169,7 @@ linters:
     allow_single_line_rule_sets: true
 
   SingleLinePerSelector:
-    enabled: true
+    enabled: false
 
   SpaceAfterComma:
     enabled: true

app/components/file-preview/component.js

@@ -0,0 +1,33 @@
+import Component from '@ember/component';
+import { alias } from '@ember/object/computed';
+
+export default Component.extend({
+
+  storage: null,
+
+  classNames: ['file-preview'],
+
+  fileLoaded: false,
+  fileContent: null,
+  metaData: null,
+  type: alias('metaData.type'),
+  isBinary: alias('metaData.isBinary'),
+
+  isImage: function() {
+    return this.get('type').match(/^image\/.+$/);
+  }.property('type'),
+
+  isText: function() {
+    return !this.get('isBinary');
+  }.property('isBinary'),
+
+  fetchFile: function() {
+    let path = this.get('metaData.path');
+
+    this.get('storage.client').getFile(path).then(file => {
+      this.set('fileContent', file.data);
+      this.set('fileLoaded', true);
+    });
+  }.on('init')
+
+});

app/components/file-preview/template.hbs

@@ -0,0 +1,9 @@
+{{#if fileLoaded}}
+  {{#if isImage}}
+    <img src="" alt={{metaData.name}}>
+  {{/if}}
+
+  {{#if isText}}
+    <code>{{fileContent}}</code>
+  {{/if}}
+{{/if}}

app/services/storage.js

@@ -85,11 +85,16 @@ export default Service.extend({
       Object.keys(listing).forEach(name => {
         let item = listing[name];
         let type = item['Content-Type'] || 'folder';
-        if (type !== 'folder') { type = simpleContentType(type); }
+        let isBinary = false;
+        if (type !== 'folder') {
+          isBinary = !!type.match(/charset=binary/);
+          type = simpleContentType(type);
+        }
 
         items.push(EmberObject.create({
           name: name,
           type: type,
+          isBinary: isBinary,
           isFolder: type === 'folder',
           size: item['Content-Length'] || null,
           path: path + name,

app/styles/_layout.scss

@@ -46,7 +46,7 @@
 .inspect-details {
   width: 100%;
   display: grid;
-  grid-template-columns: 1.618fr 2rem 1fr;
+  grid-template-columns: 1.618fr 3rem 1fr;
 
   section {
     border-top: 1px solid $light-grey-2;
@@ -58,17 +58,22 @@
 
     &.meta {
       grid-column-start: 3;
+
       dl {
         margin: 0;
+
         dt, dd {
           display: block;
         }
         dt {
+          font-size: 0.76rem;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
           color: $dark-grey-3;
-          margin-bottom: 0.5rem;
+          margin-bottom: 0.4rem;
         }
         dd {
-          margin: 0 0 1.5rem 0;
+          margin: 0 0 1.5rem;
         }
       }
     }

app/styles/app.scss

@@ -20,3 +20,4 @@ body {
 @import "components/categories-nav";
 @import "components/directory-listing";
 @import "components/item-icon";
+@import "components/file-preview";

app/styles/components/_file-preview.scss

@@ -0,0 +1,8 @@
+.file-preview {
+
+  code {
+    word-break: break-all;
+    line-height: 1.5rem;
+  }
+
+}

app/templates/inspect.hbs

@@ -1,6 +1,7 @@
 <div class="inspect-details">
   <section class="content">
-    Foo
+    {{file-preview metaData=model.documentMetaData
+                   storage=storage}}
   </section>
   <section class="meta">
     <dl>

tests/integration/components/file-preview/component-test.js

@@ -0,0 +1,24 @@
+// import { moduleForComponent, test } from 'ember-qunit';
+// import hbs from 'htmlbars-inline-precompile';
+//
+// moduleForComponent('file-preview', 'Integration | Component | file preview', {
+//   integration: true
+// });
+//
+// test('it renders', function(assert) {
+//   // Set any properties with this.set('myProperty', 'value');
+//   // Handle any actions with this.on('myAction', function(val) { ... });
+//
+//   this.render(hbs`{{file-preview}}`);
+//
+//   assert.equal(this.$().text().trim(), '');
+//
+//   // Template block usage:
+//   this.render(hbs`
+//     {{#file-preview}}
+//       template block text
+//     {{/file-preview}}
+//   `);
+//
+//   assert.equal(this.$().text().trim(), 'template block text');
+// });