Add button for hiding/showing metadata

app/controllers/inspect.js

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

app/styles/_layout.scss

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

app/templates/inspect.hbs

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