(refs #487) split diff is available

src/main/twirl/helper/diff.scala.html

@@ -9,9 +9,12 @@
 @if(showIndex){
   <div>
     <div class="pull-right" style="margin-bottom: 10px;">
-      <input id="toggle-file-list" type="button" class="btn" value="Show file list"/>
+      <div class="btn-group" data-toggle="buttons-radio">
+        <input type="button" id="btn-unified" class="btn btn-default btn-small active" value="Unified">
+        <input type="button" id="btn-split" class="btn btn-default btn-small" value="Split">
       </div>
-    Showing @diffs.size changed @plural(diffs.size, "file")
+    </div>
+    Showing <a href="javascript:void(0);" id="toggle-file-list">@diffs.size changed @plural(diffs.size, "file")</a>
   </div>
   <ul id="commit-file-list" style="display: none;">
   @diffs.zipWithIndex.map { case (diff, i) =>
@@ -94,10 +97,25 @@ $(function(){
     });
   }
 
+  // Render diffs as unified mode initially
+  renderDiffs(1);
+
+  $('#btn-unified').click(function(){
+    $('.container-wide').removeClass('container-wide').addClass('container');
+    renderDiffs(1);
+  });
+
+  $('#btn-split').click(function(){
+    $('.container').removeClass('container').addClass('container-wide');
+    renderDiffs(0);
+  });
+
+  function renderDiffs(viewType){
     @diffs.zipWithIndex.map { case (diff, i) =>
       @if(diff.newContent != None || diff.oldContent != None){
         if($('#oldText-@i').length > 0){
-        diffUsingJS('oldText-@i', 'newText-@i', 'diffText-@i');
+          diffUsingJS('oldText-@i', 'newText-@i', 'diffText-@i', viewType);
+        }
       }
     }
   }

src/main/twirl/repo/delete.scala.html

@@ -56,6 +56,6 @@
 <link href="@assets/vendors/jsdifflib/diffview.css" type="text/css" rel="stylesheet" />
 <script>
 $(function(){
-  diffUsingJS('oldText', 'newText', 'diffText');
+  diffUsingJS('oldText', 'newText', 'diffText', 1);
 });
 </script>

src/main/twirl/repo/editor.scala.html

@@ -139,7 +139,7 @@ $(function(){
         .append($('<div id="diffText">'))
         .append($('<textarea id="newText" style="display: none;">').html(editor.getValue()))
         .append($('<textarea id="oldText" style="display: none;">').html($('#initial').val()));
-      diffUsingJS('oldText', 'newText', 'diffText');
+      diffUsingJS('oldText', 'newText', 'diffText', 1);
     }
   });
 });

src/main/webapp/assets/common/css/gitbucket.css

@@ -119,6 +119,11 @@ div.container {
   width: 920px;
 }
 
+div.container-wide {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
 div.pagination {
   margin-top: 0px;
   margin-bottom: 0px;

src/main/webapp/assets/common/js/gitbucket.js

@@ -68,7 +68,15 @@ function displayErrors(data){
   };
 })(jQuery);
 
-function diffUsingJS(oldTextId, newTextId, outputId) {
+/**
+ * Render diff using jsdifflib.
+ *
+ * @param oldTextId {String} element id of old text
+ * @param newTextId {String} element id of new text
+ * @param outputId {String} element id of output element
+ * @param viewType {Number} 0: split, 1: unified
+ */
+function diffUsingJS(oldTextId, newTextId, outputId, viewType) {
   // get the baseText and newText values from the two textboxes, and split them into lines
   var oldText = document.getElementById(oldTextId).value;
   var oldLines = [];
@@ -98,7 +106,7 @@ function diffUsingJS(oldTextId, newTextId, outputId) {
     newTextLines: newLines,
     opcodes: opcodes,
     contextSize: 4,
-    viewType: 1
+    viewType: viewType
   }));
 }