✨ Site > Versions > Add toggle

site/src/components/file/script.js

@@ -14,7 +14,8 @@ export default
     data()
     {
         return {
-            differencesActive: true
+            differencesActive: true,
+            versionsActive: true
         }
     },
 
@@ -28,6 +29,11 @@ export default
         onDifferencesClick()
         {
             this.differencesActive = !this.differencesActive
+        },
+
+        onVersionsClick()
+        {
+            this.versionsActive = !this.versionsActive
         }
     }
 }

site/src/components/file/template.html

@@ -1,9 +1,9 @@
-<div class="file">
+<div class="file" :class="[versionsActive ? 'version-active' : '']">
     <header>
         <a href="#" @click.prevent="onDifferencesClick">Differences <span v-if="differencesActive">(on)</span></a>
-        File
+        <a href="#" @click.prevent="onVersionsClick">Versions <span v-if="versionsActive">(on)</span></a>
         {{ content.path.directory }} {{ content.name }}
     </header>
-    <versions :file="content" :content="content.versions"></versions>
+    <versions :file="content" :content="content.versions" v-if="versionsActive"></versions>
     <viewer :differences-active="differencesActive"></viewer>
 </div>

site/src/components/viewer/style.styl

@@ -16,7 +16,7 @@
     position absolute
     top 30px
     right 0
-    width 75%
+    width 100%
     height 100%
     font-family Inconsolata, Monaco, Consolas, 'Courier New', Courier
     line-height 20px
@@ -25,6 +25,9 @@
     background #2d2d49
     overflow scroll
 
+    .version-active &
+        width 75%
+
 .lines
     position absolute
     top 0