diff: able to highlight line with hashtag URL

3 files changed, 55 insertions, 23 deletions

diff --git a/public/css/gogs.css b/public/css/gogs.css
index 2b044a92..ed6ef2a9 100644
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -2065,8 +2065,15 @@ footer .ui.language .menu {
   border-right: 1px solid #d4d4d5;
   padding: 0 5px;
 }
-.repository .diff-file-box .code-diff tbody tr.tag-code td,
-.repository .diff-file-box .code-diff tbody tr.tag-code pre {
+.repository .diff-file-box .code-diff .lines-num.lines-num-old,
+.repository .diff-file-box .code-diff .lines-num.lines-num-new {
+  cursor: pointer;
+}
+.repository .diff-file-box .code-diff .lines-num.lines-num-old:hover,
+.repository .diff-file-box .code-diff .lines-num.lines-num-new:hover {
+  color: #383636;
+}
+.repository .diff-file-box .code-diff tbody tr.tag-code td {
   background-color: #F0F0F0 !important;
   border-color: #D2CECE!important;
   padding-top: 4px;
@@ -2075,6 +2082,9 @@ footer .ui.language .menu {
 .repository .diff-file-box .code-diff tbody tr.tag-code td.halfwidth {
   width: 50%;
 }
+.repository .diff-file-box .code-diff tbody tr.same-code td.active {
+  background-color: #ffffdd !important;
+}
 .repository .diff-file-box .code-diff tbody tr.del-code td.add-code {
   background-color: #eaffea !important;
   border-color: #c1e9c1 !important;
@@ -2083,22 +2093,26 @@ footer .ui.language .menu {
   background-color: #eaffea !important;
   border-color: #c1e9c1 !important;
 }
-.repository .diff-file-box .code-diff tbody tr.del-code td,
-.repository .diff-file-box .code-diff tbody tr.del-code pre {
+.repository .diff-file-box .code-diff tbody tr.del-code td {
   background-color: #ffecec !important;
   border-color: #f1c0c0 !important;
 }
+.repository .diff-file-box .code-diff tbody tr.del-code td.active {
+  background-color: #ffffdd !important;
+}
 .repository .diff-file-box .code-diff tbody tr.del-code td.halfwidth {
   width: 50%;
 }
-.repository .diff-file-box .code-diff tbody tr.add-code td,
-.repository .diff-file-box .code-diff tbody tr.add-code pre {
+.repository .diff-file-box .code-diff tbody tr.add-code td {
   background-color: #eaffea !important;
   border-color: #c1e9c1 !important;
 }
 .repository .diff-file-box .code-diff tbody tr.add-code td.halfwidth {
   width: 50%;
 }
+.repository .diff-file-box .code-diff tbody tr.add-code td.active {
+  background-color: #ffffdd !important;
+}
 .repository .diff-file-box .code-diff tbody tr .removed-code {
   background-color: #ff9999;
 }
diff --git a/public/js/gogs.js b/public/js/gogs.js
index b7770fde..2cd98d3b 100644
--- a/public/js/gogs.js
+++ b/public/js/gogs.js
@@ -542,6 +542,20 @@ function initRepository() {
                 $item.find(".bar .add").css("width", addPercent + "%");
             });
         }
+
+        $('.diff-file-box .lines-num').click(function () {
+            if ($(this).attr('id')) {
+                window.location.href = '#' + $(this).attr('id');
+            }
+        });
+
+        $(window).on('hashchange', function (e) {
+            $('.diff-file-box .lines-code.active').removeClass('active');
+            var m = window.location.hash.match(/^#diff-.+$/);
+            if (m) {
+                $(m[0]).siblings('.lines-code').addClass('active');
+            }
+        }).trigger('hashchange');
     }
 
     // Quick start and repository home
diff --git a/public/less/_repository.less b/public/less/_repository.less
index a39d2f75..f80f9d56 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -1005,12 +1005,19 @@
 			.lines-num {
 				border-right: 1px solid #d4d4d5;
 				padding: 0 5px;
+
+				&.lines-num-old, &.lines-num-new {
+					cursor: pointer;
+					&:hover {
+						color: #383636;
+					}
+				}
 			}
 			tbody {
 				tr {
 
 					&.tag-code {
-						td, pre {
+						td {
 							background-color: #F0F0F0 !important;
 							border-color: #D2CECE!important;
 							padding-top: 4px;
@@ -1019,15 +1026,12 @@
 						td.halfwidth {
 							width: 50%;
 						}
-						// td.selected-line, td.selected-line pre {
-						// 	background-color: #ffffdd !important;
-						// }
 					}
-					// &.same-code {
-					// 	td.selected-line, td.selected-line pre {
-					// 		background-color: #ffffdd !important;
-					// 	}
-					// }
+					&.same-code {
+						td.active {
+							background-color: #ffffdd !important;
+						}
+					}
 					&.del-code {
 						// Duplicate here to enforce add code color.
 						td.add-code {
@@ -1039,29 +1043,29 @@
 
 							}
 						}
-						td, pre {
+						td {
 							background-color: #ffecec !important;
 					    border-color: #f1c0c0 !important;
 						}
+						td.active {
+							background-color: #ffffdd !important;
+						}
 
 						td.halfwidth {
 							width: 50%;
 						}
-						// td.selected-line, td.selected-line pre {
-						// 	background-color: #ffffdd !important;
-						// }
 					}
 					&.add-code {
-						td, pre {
+						td {
 							background-color: #eaffea !important;
 							border-color: #c1e9c1 !important;
 						}
 						td.halfwidth {
 							width: 50%;
 						}
-						// td.selected-line, td.selected-line pre {
-						// 	background-color: #ffffdd !important;
-						// }
+						td.active {
+							background-color: #ffffdd !important;
+						}
 					}
 
 					.removed-code {