Add buttons for switching JSON preview style
This commit is contained in:
parent
3c9bf3f322
commit
a832f5614c
@ -1,7 +1,9 @@
|
||||
import Controller from '@ember/controller';
|
||||
import { inject as controller } from '@ember/controller';
|
||||
import { inject as service } from '@ember/service';
|
||||
import { computed } from '@ember/object';
|
||||
import { alias } from '@ember/object/computed';
|
||||
import { isEmpty } from '@ember/utils';
|
||||
|
||||
export default Controller.extend({
|
||||
|
||||
@ -12,8 +14,26 @@ export default Controller.extend({
|
||||
|
||||
queryParams: ['path'],
|
||||
|
||||
documentIsJSON: computed('model.documentMetaData.type', function(){
|
||||
if (isEmpty(this.get('model.documentMetaData'))) { return false; }
|
||||
|
||||
return !!this.get('model.documentMetaData.type').match(/application\/json/i);
|
||||
}),
|
||||
|
||||
jsonView: 'source',
|
||||
jsonShowTree: computed.equal('jsonView', 'tree'),
|
||||
jsonShowSource: computed.equal('jsonView', 'source'),
|
||||
|
||||
actions: {
|
||||
|
||||
showJsonTree () {
|
||||
this.set('jsonView', 'tree');
|
||||
},
|
||||
|
||||
showJsonSource () {
|
||||
this.set('jsonView', 'source');
|
||||
},
|
||||
|
||||
deleteItem () {
|
||||
if (window.confirm('Sure?')) {
|
||||
this.get('storage.client')
|
||||
|
8
app/styles/_buttons.scss
Normal file
8
app/styles/_buttons.scss
Normal file
@ -0,0 +1,8 @@
|
||||
div.button-group {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.button-group + button,
|
||||
div.button-group + div.button-group {
|
||||
margin-left: 1rem;
|
||||
}
|
@ -16,9 +16,11 @@ body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@import "buttons";
|
||||
|
||||
@import "components/account-info";
|
||||
@import "components/breadcrumb-nav";
|
||||
@import "components/categories-nav";
|
||||
@import "components/directory-listing";
|
||||
@import "components/item-icon";
|
||||
@import "components/file-preview";
|
||||
@import "components/item-icon";
|
||||
|
@ -1,6 +1,12 @@
|
||||
<header>
|
||||
{{breadcrumb-nav currentDirPath=currentDirPath}}
|
||||
<nav class="actions">
|
||||
{{#if documentIsJSON}}
|
||||
<div class="button-group json-view">
|
||||
<button disabled={{jsonShowTree}} class="{{if jsonShowTree "active"}}" {{action "showJsonTree"}}>tree view</button>
|
||||
<button disabled={{jsonShowSource}} class="{{if jsonShowSource "active"}}" {{action "showJsonSource"}}>source</button>
|
||||
</div>
|
||||
{{/if}}
|
||||
<button class="delete" {{action "deleteItem"}}>delete</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
@ -4,8 +4,45 @@ moduleFor('controller:inspect', 'Unit | Controller | inspect', {
|
||||
needs: ['controller:application', 'service:storage']
|
||||
});
|
||||
|
||||
// Replace this with your real tests.
|
||||
test('it exists', function(assert) {
|
||||
test('#documentIsJSON', function(assert) {
|
||||
let controller = this.subject();
|
||||
assert.ok(controller);
|
||||
|
||||
controller.set('model', {});
|
||||
|
||||
controller.set('model.documentMetaData', {
|
||||
"name": "869575AF-84AE-49B3-8752-5782E9CA2BC5",
|
||||
"type": "application/json",
|
||||
"isBinary": false,
|
||||
"isFolder": false,
|
||||
"size": 202,
|
||||
"path": "/documents/notes/869575AF-84AE-49B3-8752-5782E9CA2BC5",
|
||||
"etag": "776662336"
|
||||
});
|
||||
|
||||
assert.ok(controller.get('documentIsJSON'), 'is true when content type is JSON');
|
||||
|
||||
controller.set('model.documentMetaData', {
|
||||
"name": "171127-1708-32c3.png",
|
||||
"type": "image/png",
|
||||
"isBinary": true,
|
||||
"isFolder": false,
|
||||
"size": 42624,
|
||||
"path": "public/shares/171127-1708-32c3.png",
|
||||
"etag": "894001114"
|
||||
});
|
||||
|
||||
assert.notOk(controller.get('documentIsJSON'), 'is false when content type is not JSON');
|
||||
});
|
||||
|
||||
test('jsonView actions/methods', function(assert) {
|
||||
let controller = this.subject();
|
||||
controller.set('jsonView', null);
|
||||
|
||||
controller.send('showJsonTree');
|
||||
assert.ok(controller.get('jsonShowTree'));
|
||||
assert.notOk(controller.get('jsonShowSource'));
|
||||
|
||||
controller.send('showJsonSource');
|
||||
assert.ok(controller.get('jsonShowSource'));
|
||||
assert.notOk(controller.get('jsonShowTree'));
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user