Merge pull request #901 from makhov/fix-diff-view

fix lines highlighting at diff view

public/ng/js/gogs.js

@@ -141,6 +141,7 @@ var Gogs = {};
     Gogs.renderCodeView = function () {
         function selectRange($list, $select, $from) {
             $list.removeClass('active');
+            $list.parents('tr').find('td').removeClass('selected-line');
             if ($from) {
                 var a = parseInt($select.attr('rel').substr(1));
                 var b = parseInt($from.attr('rel').substr(1));
@@ -153,21 +154,27 @@ var Gogs = {};
                     }
                     var classes = [];
                     for (i = a; i <= b; i++) {
-                        classes.push('.L' + i);
+                        classes.push('[rel=L' + i + ']');
                     }
                     $list.filter(classes.join(',')).addClass('active');
+                    $list.filter(classes.join(',')).parents('tr').find('td').addClass('selected-line');
                     $.changeHash('#L' + a + '-' + 'L' + b);
                     return
                 }
             }
             $select.addClass('active');
+            $select.parents('tr').find('td').addClass('selected-line');
             $.changeHash('#' + $select.attr('rel'));
         }
 
         $(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));
+            var $list = $select.parent().siblings('.lines-code').parents().find('td.lines-num > span');
+            selectRange(
+                $list,
+                $list.filter('[rel=' + $select.attr('rel') + ']'),
+                (e.shiftKey && $list.filter('.active').length ? $list.filter('.active').eq(0) : null)
+            );
             $.deSelect();
         });
 
@@ -185,17 +192,17 @@ var Gogs = {};
 
         $(window).on('hashchange', function (e) {
             var m = window.location.hash.match(/^#(L\d+)\-(L\d+)$/);
-            var $list = $('.code-view ol.linenums > li');
+            var $list = $('.code-view td.lines-num > span');
             var $first;
             if (m) {
-                $first = $list.filter('.' + m[1]);
-                selectRange($list, $first, $list.filter('.' + m[2]));
+                $first = $list.filter('[rel=' + m[1] + ']');
+                selectRange($list, $first, $list.filter('[rel=' + m[2] + ']'));
                 $("html, body").scrollTop($first.offset().top - 200);
                 return;
             }
             m = window.location.hash.match(/^#(L\d+)$/);
             if (m) {
-                $first = $list.filter('.' + m[1]);
+                $first = $list.filter('[rel=' + m[1] + ']');
                 selectRange($list, $first);
                 $("html, body").scrollTop($first.offset().top - 200);
             }

public/ng/less/gogs/repository.less

@@ -665,6 +665,9 @@
                         background-color: #d1ffd6 !important;
                         border-color: #b4e2b4 !important;
                     }
+                    td.selected-line, td.selected-line pre {
+                        background-color: #ffffdd !important;
+                    }
                 }
                 &:hover {
                     td, pre {

templates/repo/diff.tmpl

@@ -74,11 +74,11 @@
             </ol>
         </div>
 
-        {{range .Diff.Files}}
+        {{range $i, $file := .Diff.Files}}
         <div class="panel panel-radius diff-file-box diff-box file-content" id="diff-{{.Index}}">
             <div class="panel-header">
                 <div class="diff-counter count pull-left">
-                    {{if not .IsBin}}
+                    {{if not $file.IsBin}}
                     <span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
                     <span class="bar">
                         <span class="pull-left add"></span>
@@ -90,9 +90,9 @@
                     {{end}}
                 </div>
                 <a class="btn btn-gray btn-header btn-radius text-black pull-right" rel="nofollow" href="{{$.SourcePath}}/{{.Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
-                <span class="file">{{.Name}}</span>
+                <span class="file">{{$file.Name}}</span>
             </div>
-            {{$isImage := (call $.IsImageFile .Name)}}
+            {{$isImage := (call $.IsImageFile $file.Name)}}
             <div class="panel-body file-body file-code code-view code-diff">
                 {{if $isImage}}
                     <div class="text-center">
@@ -101,18 +101,18 @@
                 {{else}}
                 <table>
                     <tbody>
-                        {{range .Sections}}
-                        {{range .Lines}}
-                        <tr class="{{DiffLineTypeToStr .Type}}-code nl-1 ol-1">
+                        {{range $j, $section := $file.Sections}}
+                        {{range $k, $line := $section.Lines}}                        
+                        <tr class="{{DiffLineTypeToStr .Type}}-code nl-{{$i}} ol-{{$i}}">
                             <td class="lines-num lines-num-old">
-                                <span rel="L1">{{if .LeftIdx}}{{.LeftIdx}}{{end}}</span>
+                                <span rel="L{{Add $i 1}}{{$j}}{{$k}}">{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}</span>
                             </td>
                             <td class="lines-num lines-num-new">
-                                <span rel="L1">{{if .RightIdx}}{{.RightIdx}}{{end}}</span>
+                                <span rel="L{{Add $i 1}}{{$j}}{{$k}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
                             </td>
                             
                             <td class="lines-code">
-                                <pre>{{.Content}}</pre>
+                                <pre>{{$line.Content}}</pre>
                             </td>
                         </tr>
                         {{end}}