Add button for hiding/showing metadata

This commit is contained in:
Basti 2018-01-06 15:51:03 +00:00
parent 3deca81c1d
commit 0ab2e9e732
3 changed files with 32 additions and 13 deletions

View File

@ -24,6 +24,8 @@ export default Controller.extend({
jsonShowTree: computed.equal('jsonView', 'tree'), jsonShowTree: computed.equal('jsonView', 'tree'),
jsonShowSource: computed.equal('jsonView', 'source'), jsonShowSource: computed.equal('jsonView', 'source'),
metadataHidden: false,
actions: { actions: {
showJsonTree () { showJsonTree () {
@ -34,6 +36,10 @@ export default Controller.extend({
this.set('jsonView', 'source'); this.set('jsonView', 'source');
}, },
toggleMetadata () {
this.toggleProperty('metadataHidden');
},
deleteItem () { deleteItem () {
if (window.confirm('Sure?')) { if (window.confirm('Sure?')) {
this.get('storage.client') this.get('storage.client')

View File

@ -87,6 +87,11 @@
display: grid; display: grid;
grid-template-columns: 1.618fr 3rem 1fr; grid-template-columns: 1.618fr 3rem 1fr;
margin-bottom: 3rem; margin-bottom: 3rem;
transition: all 0.3s ease-out;
&.hide-metadata {
grid-template-columns: 1.618fr 0 0;
}
section { section {
border-top: 1px solid $light-grey-2; border-top: 1px solid $light-grey-2;

View File

@ -6,28 +6,36 @@
<button disabled={{jsonShowTree}} class="{{if jsonShowTree "active"}}" {{action "showJsonTree"}}>tree view</button> <button disabled={{jsonShowTree}} class="{{if jsonShowTree "active"}}" {{action "showJsonTree"}}>tree view</button>
<button disabled={{jsonShowSource}} class="{{if jsonShowSource "active"}}" {{action "showJsonSource"}}>source</button> <button disabled={{jsonShowSource}} class="{{if jsonShowSource "active"}}" {{action "showJsonSource"}}>source</button>
</div> </div>
<div class="button-group json-view">
<button {{action "toggleMetadata"}}>
{{if metadataHidden "show" "hide"}} metadata
</button>
</div>
{{/if}} {{/if}}
<button class="delete" {{action "deleteItem"}}>delete</button> <button class="delete" {{action "deleteItem"}}>delete</button>
</nav> </nav>
</header> </header>
<div class="inspect-details"> <div class="inspect-details {{if metadataHidden "hide-metadata"}}">
<section class="content"> <section class="content">
{{file-preview metaData=model.documentMetaData {{file-preview metaData=model.documentMetaData
isJSON=documentIsJSON isJSON=documentIsJSON
jsonShowTree=jsonShowTree jsonShowTree=jsonShowTree
jsonShowSource=jsonShowSource}} jsonShowSource=jsonShowSource}}
</section> </section>
<section class="meta">
<dl> {{#unless metadataHidden}}
<dt>Name</dt> <section class="meta">
<dd>{{model.documentMetaData.name}}</dd> <dl>
<dt>Content type</dt> <dt>Name</dt>
<dd>{{model.documentMetaData.type}}</dd> <dd>{{model.documentMetaData.name}}</dd>
<dt>Size</dt> <dt>Content type</dt>
<dd>{{human-file-size model.documentMetaData.size}}</dd> <dd>{{model.documentMetaData.type}}</dd>
<dt>Revision (ETag)</dt> <dt>Size</dt>
<dd>{{model.documentMetaData.etag}}</dd> <dd>{{human-file-size model.documentMetaData.size}}</dd>
</dl> <dt>Revision (ETag)</dt>
</section> <dd>{{model.documentMetaData.etag}}</dd>
</dl>
</section>
{{/unless}}
</div> </div>