diff --git a/.scss-lint.yml b/.scss-lint.yml
index 7ecd5f0..c94b52c 100644
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -169,7 +169,7 @@ linters:
allow_single_line_rule_sets: true
SingleLinePerSelector:
- enabled: true
+ enabled: false
SpaceAfterComma:
enabled: true
diff --git a/app/components/file-preview/component.js b/app/components/file-preview/component.js
new file mode 100644
index 0000000..3b52aaa
--- /dev/null
+++ b/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')
+
+});
diff --git a/app/components/file-preview/template.hbs b/app/components/file-preview/template.hbs
new file mode 100644
index 0000000..64669ff
--- /dev/null
+++ b/app/components/file-preview/template.hbs
@@ -0,0 +1,9 @@
+{{#if fileLoaded}}
+ {{#if isImage}}
+
+ {{/if}}
+
+ {{#if isText}}
+ {{fileContent}}
+ {{/if}}
+{{/if}}
\ No newline at end of file
diff --git a/app/services/storage.js b/app/services/storage.js
index 06ce5df..2ecd63f 100644
--- a/app/services/storage.js
+++ b/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,
diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss
index ad3659e..7ec976f 100644
--- a/app/styles/_layout.scss
+++ b/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;
}
}
}
diff --git a/app/styles/app.scss b/app/styles/app.scss
index f9c2df0..e00c6c3 100644
--- a/app/styles/app.scss
+++ b/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";
diff --git a/app/styles/components/_file-preview.scss b/app/styles/components/_file-preview.scss
new file mode 100644
index 0000000..b7adc36
--- /dev/null
+++ b/app/styles/components/_file-preview.scss
@@ -0,0 +1,8 @@
+.file-preview {
+
+ code {
+ word-break: break-all;
+ line-height: 1.5rem;
+ }
+
+}
diff --git a/app/templates/inspect.hbs b/app/templates/inspect.hbs
index a6cbec2..2a75f10 100644
--- a/app/templates/inspect.hbs
+++ b/app/templates/inspect.hbs
@@ -1,6 +1,7 @@