From fd2708ba42850cb02b08c5a35ba97d10b73afe94 Mon Sep 17 00:00:00 2001
From: brunosimon <simon.bruno.77@gmail.com>
Date: Wed, 30 Aug 2017 22:22:42 +0200
Subject: [PATCH] :sparkles: Site > Viewer > Add differences toggle

---
 site/src/components/file/script.js       | 15 +++++++++++++++
 site/src/components/file/template.html   |  3 ++-
 site/src/components/viewer/script.js     |  3 ++-
 site/src/components/viewer/template.html |  4 ++--
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/site/src/components/file/script.js b/site/src/components/file/script.js
index 9619d92..1d4887c 100644
--- a/site/src/components/file/script.js
+++ b/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
+        }
     }
 }
\ No newline at end of file
diff --git a/site/src/components/file/template.html b/site/src/components/file/template.html
index d8271ff..4361a40 100644
--- a/site/src/components/file/template.html
+++ b/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>
\ No newline at end of file
diff --git a/site/src/components/viewer/script.js b/site/src/components/viewer/script.js
index 683b669..1bcbe7e 100644
--- a/site/src/components/viewer/script.js
+++ b/site/src/components/viewer/script.js
@@ -7,8 +7,9 @@ export default
 {
     name: 'viewer',
 
-    components:
+    props:
     {
+        differencesActive: { type: Boolean, default: true }
     },
 
     computed:
diff --git a/site/src/components/viewer/template.html b/site/src/components/viewer/template.html
index cf4f16c..4f47f21 100644
--- a/site/src/components/viewer/template.html
+++ b/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>