Add diff stats

Author: takezoe

src/main/twirl/gitbucket/gist/revisions.scala.html

@@ -30,13 +30,19 @@
                   <th style="font-weight: normal; line-height: 27px;" class="box-header">
                     @diff.changeType match {
                       case ChangeType.ADD => {
-                        <img src="@assets/common/images/diff_add.png"/> @diff.newPath
+                        <span class="diffstat">
+                          <i class="octicon octicon-diff-added"></i>
+                        </span> @diff.newPath
                       }
                       case ChangeType.MODIFY => {
-                        <img src="@assets/common/images/diff_edit.png"/> @diff.newPath
+                        <span class="diffstat">
+                          <i class="octicon octicon-diff-modified"></i>
+                        </span> @diff.newPath
                       }
                       case ChangeType.DELETE => {
-                        <img src="@assets/common/images/diff_delete.png"/> @diff.oldPath
+                        <span class="diffstat">
+                          <i class="octicon octicon-diff-removed"></i>
+                        </span> @diff.oldPath
                       }
                       case _ => {
                       }
@@ -74,12 +80,45 @@
         @diffs.zipWithIndex.map { case (diff, i) =>
           @if(diff.newContent != None || diff.oldContent != None){
             if($('#oldText-@revision.id.substring(0, 7)-@i').length > 0){
+              // Render Diff
               diffUsingJS('oldText-@revision.id.substring(0, 7)-@i', 'newText-@revision.id.substring(0, 7)-@i', 'diffText-@revision.id.substring(0, 7)-@i', viewType);
+              // Render Stats
+              var diffText = $('#diffText-@revision.id.substring(0, 7)-@i');
+              var add = diffText.find("table").attr("add") * 1;
+              var del = diffText.find("table").attr("del") * 1;
+              var table = diffText.closest("table");
+              table.find(".diffstat").text(add + del + " ").append(renderStatBar(add, del)).attr("title", add + " additions & " + del + " deletions").tooltip();
             }
           }
         }
       }
     }
+
+    function renderStatBar(add, del){
+      if(add + del > 5){
+        if(add){
+          if(add < del){
+            add = Math.floor(1 + (add * 4 / (add+del)));
+          }else{
+            add = Math.ceil(1 + (add * 4 / (add+del)));
+          }
+        }
+        del = 5 - add;
+      }
+      var ret = $('<div class="diffstat-bar">');
+      for(var i = 0; i < 5; i++){
+        if(add){
+          ret.append('<span class="text-diff-added">■</span>');
+          add--;
+        } else if(del){
+          ret.append('<span class="text-diff-deleted">■</span>');
+          del--;
+        } else {
+          ret.append('■');
+        }
+      }
+      return ret;
+    }
   });
   </script>
 }