From 43f9a1041698050be5ec7354512d9da4cf2151c2 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Sun, 2 Jul 2017 18:15:05 -0400
Subject: [PATCH] feat: History diff UI

---
 client/js/components/history.vue    | 60 +++++++++++++++++++----------
 client/scss/app.scss                |  2 +
 client/scss/components/history.scss | 51 ++++++++++++++++++++++++
 client/scss/components/toggle.scss  | 16 +++++++-
 fuse.js                             |  8 ++++
 5 files changed, 115 insertions(+), 22 deletions(-)
 create mode 100644 client/scss/components/history.scss

diff --git a/client/js/components/history.vue b/client/js/components/history.vue
index 5917c03f..354b7261 100644
--- a/client/js/components/history.vue
+++ b/client/js/components/history.vue
@@ -1,41 +1,59 @@
 <template lang="pug">
-  div {{ currentPath }}
+  .history
+    .history-title {{ currentPath }}
+    .history-info
+      .columns
+        .column
+          p Timestamp: #[strong 2017/07/02 5:19 PM]
+          p Author: #[strong Nicolas Giard]
+          p Commit: #[strong 379ff16957b2b7f978e02bfe50cd0cee182fcb8a]
+        .column.history-info-actions
+          .button-group
+            button.button.is-blue-grey() Compare With...
+            button.button.is-blue-grey() Revert to version
+          toggle.is-dark(v-model='sidebyside', desc='Side-by-side View')
+    .history-diff#diff
+
 </template>
 
 <script>
+let diffui
 export default {
   name: 'history',
   props: ['currentPath'],
   data() {
     return {
-      tree: []
+      diffui: {},
+      sidebyside: true
     }
   },
   methods: {
-    fetch(basePath) {
-      let self = this
-      self.$store.dispatch('startLoading')
-      self.$nextTick(() => {
-        socket.emit('treeFetch', { basePath }, (data) => {
-          if (self.tree.length > 0) {
-            let branch = self._.last(self.tree)
-            branch.hasChildren = true
-            self._.find(branch.pages, { _id: basePath }).isActive = true
-          }
-          self.tree.push({
-            hasChildren: false,
-            pages: data
-          })
-          self.$store.dispatch('stopLoading')
-        })
+    draw() {
+      diffui.draw('#diff', {
+        inputFormat: 'json',
+        outputFormat: 'side-by-side',
+        matching: 'words',
+        synchronisedScroll: true
       })
-    },
-    goto(entryPath) {
-      window.location.assign(siteRoot + '/' + entryPath)
     }
   },
   mounted() {
+    diffui = new Diff2HtmlUI({
+      diff: `diff --git a/wiki/prerequisites.md b/wiki/prerequisites.md
+index 89a10de..4bc0d66 100644
+--- a/wiki/prerequisites.md
++++ b/wiki/prerequisites.md
+@@ -13,7 +13,7 @@ Wiki.js runs on pretty much any platform that supports the requirements below. H
+
+ **CPU:** Runs perfectly fine on a single CPU core machine. However, to maximize Wiki.js background agent feature, using 2 cores is highly recommended.
+
+-**RAM:** Wiki.js uses between 100-200MB of RAM. While Wiki.js itself is able to run with only 512MB total RAM, you will not be able to install and compile the dependencies. You need a minimum of 768MB just to install the dependencies. Note that Windows machines may require more RAM.
++**RAM:** Wiki.js uses between 100-200MB of RAM. While Wiki.js itself is able to run with only 512MB total RAM, you will not be able to install all the dependencies. You need a minimum of 768MB just to install the dependencies. Note that Windows machines may require more RAM.
 
+ **Disk Space:** Wiki.js requires about 300MB of disk space when including the dependencies. The actual total space needed for your installation depends on the content and most importantly, the uploads. A wiki with only text content will only use a few megabytes, even for thousands of articles. However, if you start adding images, documents, videos, etc., you must plan required disk space accordingly.
+`
+    })
+    this.draw()
   }
 }
 </script>
diff --git a/client/scss/app.scss b/client/scss/app.scss
index 36cb4690..8bf44dd7 100644
--- a/client/scss/app.scss
+++ b/client/scss/app.scss
@@ -19,6 +19,7 @@ $primary: 'indigo';
 @import 'components/form';
 @import 'components/grid';
 @import 'components/hero';
+@import 'components/history';
 @import 'components/markdown-content';
 @import 'components/modal';
 @import 'components/nav';
@@ -34,6 +35,7 @@ $primary: 'indigo';
 @import 'libs/jquery-contextmenu';
 @import 'node_modules/highlight.js/styles/atom-one-dark';
 @import 'node_modules/simplemde/dist/simplemde.min';
+@import 'node_modules/diff2html/dist/diff2html.min';
 
 @import 'components/editor';
 
diff --git a/client/scss/components/history.scss b/client/scss/components/history.scss
new file mode 100644
index 00000000..4453ca7c
--- /dev/null
+++ b/client/scss/components/history.scss
@@ -0,0 +1,51 @@
+.history {
+
+  &-title {
+    border-top: 1px solid mc('blue-grey', '900');
+    padding: 8px;
+    color: mc('blue-grey', '800');
+    font-size: 13px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    background-color: mc('blue-grey', '100');
+    text-align: center;
+    box-shadow: 0 0 5px rgba(0,0,0,0.3);
+  }
+
+  &-info {
+    background-color: mc('blue-grey', '50');
+    padding: 5px 15px;
+
+    p {
+      padding: 5px 0;
+      font-size: 14px;
+      color: mc('blue-grey', '800');
+    }
+
+    &-actions {
+      display: flex;
+      flex-basis: initial;
+      flex-grow: initial;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .button-group {
+        margin-bottom: 10px;
+      }
+    }
+
+  }
+
+  &-diff {
+    position: relative;
+
+    .d2h-wrapper {
+      position: absolute;
+      left: 0;
+      right: 0;
+    }
+
+  }
+
+}
diff --git a/client/scss/components/toggle.scss b/client/scss/components/toggle.scss
index dbfec4df..6b3bda11 100644
--- a/client/scss/components/toggle.scss
+++ b/client/scss/components/toggle.scss
@@ -14,7 +14,7 @@
     align-items: center;
     height: 24px;
     width: 50px;
-    background-color: mc('grey', '300');
+    background-color: mc('blue-grey', '200');
     border-radius: 12px;
     padding: 2px;
     transition: background-color .5s ease;
@@ -51,3 +51,17 @@
   }
 
 }
+
+/* THEME OVERRIDE - START */
+
+@each $color, $colorvalue in $material-colors {
+  .is-primary-#{$color} .toggle {
+    &.is-active {
+      .toggle-container {
+        background-color: mc($color, '500');
+      }
+    }
+  }
+}
+
+/* THEME OVERRIDE - END */
diff --git a/fuse.js b/fuse.js
index 6414c80c..61c758c9 100644
--- a/fuse.js
+++ b/fuse.js
@@ -56,6 +56,14 @@ const SHIMS = {
   jquery: {
     source: 'node_modules/jquery/dist/jquery.js',
     exports: '$'
+  },
+  diff2html: {
+    source: 'node_modules/diff2html/dist/diff2html.min.js',
+    exports: 'Diff2Html'
+  },
+  diff2htmlui: {
+    source: 'node_modules/diff2html/dist/diff2html-ui.min.js',
+    exports: 'Diff2HtmlUI'
   }
 }