From 4f0f65fed0613cd69eba1cb8a80d0d18d0a79983 Mon Sep 17 00:00:00 2001
From: James Moger <james.moger@gitblit.com>
Date: Thu, 19 Sep 2013 08:13:48 -0400
Subject: Reverse line links in blob view (issue-309)

---
 releases.moxie                                     |   1 +
 .../java/com/gitblit/wicket/pages/BlobPage.java    |   7 +++--
 src/main/resources/arrow_line.png                  | Bin 0 -> 241 bytes
 src/main/resources/gitblit.css                     |  31 +++++++++++----------
 4 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 src/main/resources/arrow_line.png

diff --git a/releases.moxie b/releases.moxie
index 9ba7783c..fbddefa0 100644
--- a/releases.moxie
+++ b/releases.moxie
@@ -14,6 +14,7 @@ r20: {
 	- Ignore the default contents of .git/description file
     changes:
 	- Personal repository prefix (~) is now configurable (issue-265)
+	- Reversed line links in blob view (issue-309)
 	- Updated default binary and Lucene ignore extensions
     additions:
 	- Added branch graph image servlet based on EGit's branch graph renderer (issue-194)
diff --git a/src/main/java/com/gitblit/wicket/pages/BlobPage.java b/src/main/java/com/gitblit/wicket/pages/BlobPage.java
index b104df2d..b9f64304 100644
--- a/src/main/java/com/gitblit/wicket/pages/BlobPage.java
+++ b/src/main/java/com/gitblit/wicket/pages/BlobPage.java
@@ -174,7 +174,7 @@ public class BlobPage extends RepositoryPage {
 		sb.append("<!-- start nums column -->");
 		sb.append("<td id=\"nums\">");
 		sb.append("<pre>");
-		String numPattern = "<span id=\"L{0}\" class=\"num\">{0}</span>\n";
+		String numPattern = "<span id=\"L{0}\" class=\"jump\"></span><a href=\"#L{0}\">{0}</a>\n";
 		for (int i = 0; i < lines.length; i++) {
 			sb.append(MessageFormat.format(numPattern, "" + (i + 1)));
 		}
@@ -194,10 +194,13 @@ public class BlobPage extends RepositoryPage {
 		
 		sb.append("<table width=\"100%\"><tbody>");
 		
-		String linePattern = "<tr class=\"{0}\"><td><a href=\"#L{2}\">{1}</a>\r</tr>";
+		String linePattern = "<tr class=\"{0}\"><td><div><span class=\"line\">{1}</span></div>\r</tr>";
 		for (int i = 0; i < lines.length; i++) {
 			String line = lines[i].replace('\r', ' ');
 			String cssClass = (i % 2 == 0) ? "even" : "odd";
+			if (StringUtils.isEmpty(line.trim())) {
+				line = "&nbsp;";
+			}
 			sb.append(MessageFormat.format(linePattern, cssClass, line, "" + (i + 1)));
 		}
 		sb.append("</tbody></table></pre>");
diff --git a/src/main/resources/arrow_line.png b/src/main/resources/arrow_line.png
new file mode 100644
index 00000000..ac45c8bf
Binary files /dev/null and b/src/main/resources/arrow_line.png differ
diff --git a/src/main/resources/gitblit.css b/src/main/resources/gitblit.css
index 05e6b8ae..a69b9880 100644
--- a/src/main/resources/gitblit.css
+++ b/src/main/resources/gitblit.css
@@ -539,21 +539,29 @@ pre.prettyprint ol {
 }
 
 /* CSS trick to workaround #link topOfWindow offset problem */
-#nums .num {
-    border-top: 160px solid transparent;
-    margin-top: -160px;
-    -webkit-background-clip: padding-box;
-    -moz-background-clip: padding;
-    background-clip: padding-box;
+#nums .jump {
+    border-top: 50px solid transparent;
+    margin-top: -50px;
+	background: url(arrow_line.png) no-repeat scroll bottom right transparent;	
+}
 
+#nums .jump:target {
+	border-left: 7px solid transparent;
+	margin-right: 3px;
+}
+
+#lines .line {
+    padding-left: 5px;
     color: #888;
 }
 
-#nums span:target {
+#nums a:hover {
 	background-color: #ffffbf;
 	color: black;
 	font-weight: bold;
+	border-top: 1px solid red;
 	border-bottom: 1px solid red;
+	text-decoration: none;
 }
 
 #lines table {
@@ -568,11 +576,6 @@ pre.prettyprint ol {
 	padding-left: 5px;
 }
 
-#lines a:hover {
-	background-color: #ffffbf;
-	text-decoration: none;
-}
-
 #lines tr:hover {
 	background-color: #ffffbf;
 }
@@ -584,8 +587,6 @@ pre.prettyprint ol {
 	background-color: #fafafa;
 }
 
-
-
 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
     color: #888;
 }
@@ -1152,6 +1153,8 @@ table.pretty table.nestedTable {
 table.pretty td.graph {
 	border-right: 1px solid #ddd;
 	border-bottom: 1px solid #ddd;
+	padding: 0px;
+	/*width: 1px;*/
 }
 
 table.pretty tr.commit {
-- 
cgit v1.2.3