diff page ui

2 files changed, 173 insertions, 31 deletions

diff --git a/public/css/gogs.css b/public/css/gogs.css
index 65a6c03d71..ec37721fd6 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -798,7 +798,7 @@ html, body {
     margin-left: .5em;
 }
 
-.commit-box .avatar {
+.commit-box .avatar, .diff-head-box .avatar {
     width: 20px;
     height: 20px;
     margin-right: 8px;
@@ -831,10 +831,137 @@ html, body {
     background-color: #FFF;
 }
 
-.guide-box {
+.guide-box, .diff-head-box {
     margin-top: 20px;
 }
 
+.diff-head-box h4 {
+    margin-top: 0;
+    margin-bottom: 0;
+    line-height: 26px;
+}
+
+.diff-head-box p {
+    margin-bottom: 0;
+}
+
+.diff-head-box .sha {
+    margin-left: 8px;
+}
+
+.diff-head-box a.name {
+    color: #444;
+    margin-right: 8px;
+}
+
+.diff-head-box span.time {
+    color: #888;
+}
+
+.diff-detail-box {
+    margin-bottom: 16px;
+    line-height: 30px;
+}
+
+.diff-detail-box span.status {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+.diff-detail-box ol {
+    padding-left: 0;
+    margin-bottom: 28px;
+}
+
+.diff-detail-box li {
+    list-style: none;
+    padding-bottom: 4px;
+    margin-bottom: 4px;
+    border-bottom: 1px dashed #DDD;
+    padding-left: 6px;
+}
+
+.diff-detail-box span.status.modify {
+    background-color: #f0db88;
+}
+
+.diff-detail-box span.status.add {
+    background-color: #b4e2b4;
+}
+
+.diff-detail-box span.status.del {
+    background-color: #e9aeae;
+}
+
+.diff-detail-box span.status.rename{
+    background-color: #dad8ff;
+}
+
+.diff-file-box .panel-heading {
+    padding: 10px 20px;
+    line-height: 26px;
+}
+
+.diff-box .count {
+    margin-right: 12px;
+}
+
+.diff-box .count .bar {
+    width: 40px;
+    display: inline-block;
+    margin: 2px 4px 0 4px;
+    vertical-align: text-top;
+}
+
+.diff-box .file {
+    color: #888;
+}
+
+#gogs-source .file-content.diff-file-box {
+    margin-bottom: 20px;
+}
+
+.diff-box .count .bar .add {
+    background-color: #77c64a;
+    height: 12px;
+}
+
+.diff-box .count .bar .del, .diff-box .count .bar {
+    background-color: #e75316;
+    height: 12px;
+}
+
+.diff-file-box .file-body.file-code .lines-code > pre {
+    margin: 0;
+    padding: 3px;
+}
+
+.diff-file-box .file-body.file-code .lines-num-old {
+    border-right: 1px solid #DDD;
+}
+
+.diff-file-box .code-bin td {
+    padding: 20px;
+}
+
+.diff-file-box .code-diff tbody tr.add-code td, .diff-file-box .code-diff tbody tr.add-code pre {
+    background-color: #d1ffd6 !important;
+    border-color: #b4e2b4 !important;
+}
+
+.diff-file-box .code-diff tbody tr.del-code td, .diff-file-box .code-diff tbody tr.del-code pre {
+    background-color: #ffe2dd !important;
+    border-color: #e9aeae !important;
+}
+
+.diff-file-box .code-diff tbody tr:hover td, .diff-file-box .code-diff tbody tr:hover pre {
+    background-color: #fff8d2 !important;
+    border-color: #f0db88 !important;
+}
+
 /* wrapper and footer */
 
 #wrapper {
diff --git a/public/js/app.js b/public/js/app.js
index 4bf4b29e5f..9a58a6f2f2 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -2,11 +2,11 @@ var Gogits = {
     "PageIsSignup": false
 };
 
-(function($){
+(function ($) {
     // extend jQuery ajax, set csrf token value
     var ajax = $.ajax;
     $.extend({
-        ajax: function(url, options) {
+        ajax: function (url, options) {
             if (typeof url === 'object') {
                 options = url;
                 url = undefined;
@@ -17,24 +17,24 @@ var Gogits = {
             var headers = options.headers || {};
             var domain = document.domain.replace(/\./ig, '\\.');
             if (!/^(http:|https:).*/.test(url) || eval('/^(http:|https:)\\/\\/(.+\\.)*' + domain + '.*/').test(url)) {
-                headers = $.extend(headers, {'X-Csrf-Token':csrftoken});
+                headers = $.extend(headers, {'X-Csrf-Token': csrftoken});
             }
             options.headers = headers;
             var callback = options.success;
-            options.success = function(data){
-                if(data.once){
+            options.success = function (data) {
+                if (data.once) {
                     // change all _once value if ajax data.once exist
                     $('[name=_once]').val(data.once);
                 }
-                if(callback){
+                if (callback) {
                     callback.apply(this, arguments);
                 }
             };
             return ajax(url, options);
         },
 
-        changeHash: function(hash) {
-            if(history.pushState) {
+        changeHash: function (hash) {
+            if (history.pushState) {
                 history.pushState(null, null, hash);
             }
             else {
@@ -42,8 +42,8 @@ var Gogits = {
             }
         },
 
-        deSelect: function() {
-            if(window.getSelection) {
+        deSelect: function () {
+            if (window.getSelection) {
                 window.getSelection().removeAllRanges();
             } else {
                 document.selection.empty();
@@ -114,8 +114,8 @@ var Gogits = {
         $tabs.find("li:eq(0) a").tab("show");
     };
     // fix dropdown inside click
-    Gogits.initDropDown = function(){
-        $('.dropdown-menu.no-propagation').on('click',function(e){
+    Gogits.initDropDown = function () {
+        $('.dropdown-menu.no-propagation').on('click', function (e) {
             e.stopPropagation();
         });
     };
@@ -144,24 +144,24 @@ var Gogits = {
             node = node.wrap('<div id="' + name + '" class="anchor-wrap" ></div>');
             node.append('<a class="anchor" href="#' + name + '"><span class="octicon octicon-link"></span></a>');
         });
-    }
+    };
 
     Gogits.renderCodeView = function () {
-        function selectRange($list, $select, $from){
+        function selectRange($list, $select, $from) {
             $list.removeClass('active');
-            if($from){
+            if ($from) {
                 var a = parseInt($select.attr('rel').substr(1));
                 var b = parseInt($from.attr('rel').substr(1));
                 var c;
-                if(a != b){
-                    if(a > b){
+                if (a != b) {
+                    if (a > b) {
                         c = a;
                         a = b;
                         b = c;
                     }
                     var classes = [];
-                    for(i = a; i <= b; i++) {
-                        classes.push('.L'+i);
+                    for (i = a; i <= b; i++) {
+                        classes.push('.L' + i);
                     }
                     $list.filter(classes.join(',')).addClass('active');
                     $.changeHash('#L' + a + '-' + 'L' + b);
@@ -175,11 +175,11 @@ var Gogits = {
         $(document).on('click', '.lines-num span', function (e) {
             var $select = $(this);
             var $list = $select.parent().siblings('.lines-code').find('ol.linenums > li');
-            selectRange($list, $list.filter('[rel='+$select.attr('rel')+']'), (e.shiftKey?$list.filter('.active').eq(0):null));
+            selectRange($list, $list.filter('[rel=' + $select.attr('rel') + ']'), (e.shiftKey ? $list.filter('.active').eq(0) : null));
             $.deSelect();
         });
 
-        $('.code-view .lines-code > pre').each(function(){
+        $('.code-view .lines-code > pre').each(function () {
             var $pre = $(this);
             var $lineCode = $pre.parent();
             var $lineNums = $lineCode.siblings('.lines-num');
@@ -191,20 +191,20 @@ var Gogits = {
             }
         });
 
-        $(window).on('hashchange', function(e) {
+        $(window).on('hashchange',function (e) {
             var m = window.location.hash.match(/^#(L\d+)\-(L\d+)$/);
             var $list = $('.code-view ol.linenums > li');
-            if(m){
-                var $first = $list.filter('.'+m[1]);
-                selectRange($list, $first, $list.filter('.'+m[2]));
-                $("html, body").scrollTop($first.offset().top-200);
+            if (m) {
+                var $first = $list.filter('.' + m[1]);
+                selectRange($list, $first, $list.filter('.' + m[2]));
+                $("html, body").scrollTop($first.offset().top - 200);
                 return;
             }
             m = window.location.hash.match(/^#(L\d+)$/);
-            if(m){
-                var $first = $list.filter('.'+m[1]);
+            if (m) {
+                var $first = $list.filter('.' + m[1]);
                 selectRange($list, $first);
-                $("html, body").scrollTop($first.offset().top-200);
+                $("html, body").scrollTop($first.offset().top - 200);
             }
         }).trigger('hashchange');
     };
@@ -334,6 +334,21 @@ function initRepository() {
             return false;
         });
     })();
+
+    // repo diff counter
+    (function () {
+        var $counter = $('.diff-counter');
+        if ($counter.length < 1) {
+            return;
+        }
+        $counter.each(function (i, item) {
+            var $item = $(item);
+            var addLine = $item.find('span[data-line].add').data("line");
+            var delLine = $item.find('span[data-line].del').data("line");
+            var addPercent = parseFloat(addLine) / (parseFloat(addLine) + parseFloat(delLine)) * 100;
+            $item.find(".bar .add").css("width", addPercent + "%");
+        });
+    }());
 }
 
 (function ($) {