✨ Site > Viewer > Add differences toggle

site/src/components/file/script.js

@@ -11,8 +11,23 @@ export default
         Viewer
     },
 
+    data()
+    {
+        return {
+            differencesActive: true
+        }
+    },
+
     props:
     {
         content: { type: Object }
+    },
+
+    methods:
+    {
+        onDifferencesClick()
+        {
+            this.differencesActive = !this.differencesActive
+        }
     }
 }

site/src/components/file/template.html

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

site/src/components/viewer/script.js

@@ -7,8 +7,9 @@ export default
 {
     name: 'viewer',
 
-    components:
+    props:
     {
+        differencesActive: { type: Boolean, default: true }
     },
 
     computed:

site/src/components/viewer/template.html

@@ -2,8 +2,8 @@
     <pre class="code" v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
     <div class="lines">
         <div class="line" v-for="line in lines">
-            <div class="added" v-if="line.added">+</div>
-            <div class="removed" v-if="line.removed">-</div>
+            <div class="added" v-if="line.added && differencesActive">+</div>
+            <div class="removed" v-if="line.removed && differencesActive">-</div>
             <span class="index">{{ line.index }}.</span>
         </div>
     </div>