Show file content for non-binary files
This commit is contained in:
parent
f190b6aabb
commit
7263f092d0
|
@ -169,7 +169,7 @@ linters:
|
||||||
allow_single_line_rule_sets: true
|
allow_single_line_rule_sets: true
|
||||||
|
|
||||||
SingleLinePerSelector:
|
SingleLinePerSelector:
|
||||||
enabled: true
|
enabled: false
|
||||||
|
|
||||||
SpaceAfterComma:
|
SpaceAfterComma:
|
||||||
enabled: true
|
enabled: true
|
||||||
|
|
|
@ -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')
|
||||||
|
|
||||||
|
});
|
|
@ -0,0 +1,9 @@
|
||||||
|
{{#if fileLoaded}}
|
||||||
|
{{#if isImage}}
|
||||||
|
<img src="" alt={{metaData.name}}>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if isText}}
|
||||||
|
<code>{{fileContent}}</code>
|
||||||
|
{{/if}}
|
||||||
|
{{/if}}
|
|
@ -85,11 +85,16 @@ export default Service.extend({
|
||||||
Object.keys(listing).forEach(name => {
|
Object.keys(listing).forEach(name => {
|
||||||
let item = listing[name];
|
let item = listing[name];
|
||||||
let type = item['Content-Type'] || 'folder';
|
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({
|
items.push(EmberObject.create({
|
||||||
name: name,
|
name: name,
|
||||||
type: type,
|
type: type,
|
||||||
|
isBinary: isBinary,
|
||||||
isFolder: type === 'folder',
|
isFolder: type === 'folder',
|
||||||
size: item['Content-Length'] || null,
|
size: item['Content-Length'] || null,
|
||||||
path: path + name,
|
path: path + name,
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
.inspect-details {
|
.inspect-details {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1.618fr 2rem 1fr;
|
grid-template-columns: 1.618fr 3rem 1fr;
|
||||||
|
|
||||||
section {
|
section {
|
||||||
border-top: 1px solid $light-grey-2;
|
border-top: 1px solid $light-grey-2;
|
||||||
|
@ -58,17 +58,22 @@
|
||||||
|
|
||||||
&.meta {
|
&.meta {
|
||||||
grid-column-start: 3;
|
grid-column-start: 3;
|
||||||
|
|
||||||
dl {
|
dl {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
dt, dd {
|
dt, dd {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
dt {
|
dt {
|
||||||
|
font-size: 0.76rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
color: $dark-grey-3;
|
color: $dark-grey-3;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.4rem;
|
||||||
}
|
}
|
||||||
dd {
|
dd {
|
||||||
margin: 0 0 1.5rem 0;
|
margin: 0 0 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,3 +20,4 @@ body {
|
||||||
@import "components/categories-nav";
|
@import "components/categories-nav";
|
||||||
@import "components/directory-listing";
|
@import "components/directory-listing";
|
||||||
@import "components/item-icon";
|
@import "components/item-icon";
|
||||||
|
@import "components/file-preview";
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
.file-preview {
|
||||||
|
|
||||||
|
code {
|
||||||
|
word-break: break-all;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -1,6 +1,7 @@
|
||||||
<div class="inspect-details">
|
<div class="inspect-details">
|
||||||
<section class="content">
|
<section class="content">
|
||||||
Foo
|
{{file-preview metaData=model.documentMetaData
|
||||||
|
storage=storage}}
|
||||||
</section>
|
</section>
|
||||||
<section class="meta">
|
<section class="meta">
|
||||||
<dl>
|
<dl>
|
||||||
|
|
|
@ -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');
|
||||||
|
// });
|
Loading…
Reference in New Issue