WIP: Prettify the diff display by using rounded corners

This wraps each changed file in its own rounded box, making the diff display easier to the eye :)
pieter · Nov 26, 2008 · 23bb165 · 23bb165
1 parent 07554fb
commit 23bb165
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 59 deletions.
diff --git a/html/css/GitX.css b/html/css/GitX.css
@@ -1,2 +1,8 @@
 @import url("diff.css");
-@import url("notification.css");
+@import url("notification.css");
+
+body {
+	margin: 0;
+	margin-top: 5px;
+	width: 100%;
+}
diff --git a/html/css/diff.css b/html/css/diff.css
@@ -1,62 +1,52 @@
-body {
-	margin: 0;
-	margin-top: 5px;
-	width: 100%;
+.diff .file {
+	margin: 10px;
+	padding: 10px;
+	-webkit-border-radius: 10px;
+	border: 1px solid gray;
+	-webkit-box-shadow: 1px 1px 3px #888;
 }
 
-.fileHeader {
-	margin-top: 0px;
-	padding-top: 2px;
+.diff .file .fileHeader {
+	margin-top: -5px;
 	padding-bottom: 1px;
-	border-top:0.1em solid #999999;
+	font-weight: bold;
 }
 
-.delline, .oldfile {
-  background-color: #FEE;
-  color: #B00;
+.diff .file .diffContent {
+	white-space: pre;
+	font-family: Monaco;
 }
 
-.addline, .newfile {
-  background-color: #DFD;
-  color: #080;
-}
-.fileline {
-  font-weight: bold;
+.diff .file .diffcontent .lineno {
+	float: left;
+	padding-left: 2px;
+	padding-right: 2px;
+	background-color: #ECECEC;
+	color: #A9A9A9;
+	border: 1px solid #DDDDDD;
+	text-align: right;
 }
 
-.hunkheader {
+.diff .file .diffContent .lines .hunkheader {
   background-color: #f7f7f7;
   color: #bbb;
 }
 
-pre {
-  width: 100%;
-}
 
-pre code {
-  width: 100%;
+.diff .file .diffcontent .lines .delline {
+  background-color: #FEE;
+  color: #B00;
 }
 
-#CurrentHunk {
-	border-left: 5px solid black;
+.diff .file .diffcontent .lines .addline {
+  background-color: #DFD;
+  color: #080;
 }
 
-.whitespace {
+.diff .file .diffcontent .lines .whitespace {
 	background-color: rgba(255,0,0,0.5);
 }
 
-
-table.diff {
-	margin-top: 15px;
-	margin-left: 5px;
-	margin-right: 5px;
-	border-spacing: 0;
-}
-.lineno {
-	padding-left: 2px;
-	padding-right: 2px;
-	background-color: #ECECEC;
-	color: #A9A9A9;
-	border: 1px solid #DDDDDD;
-	text-align: right;
+#CurrentHunk {
+	border-left: 5px solid black;
 }
diff --git a/html/lib/diffHighlighter.js b/html/lib/diffHighlighter.js
@@ -8,14 +8,16 @@ if (typeof Controller == 'undefined') {
 
 var highlightDiff = function(diff, element) {
 	var start = new Date().getTime();
-
+	element.className = "diff"
 	var content = diff.escapeHTML().replace(/\t/g, "    ");;
 
 	var file_index = 0;
 
+	var filename = "";
 	var line1 = "";
 	var line2 = "";
 	var diffContent = "";
+	var finalContent = "";
 	var lines = content.split('\n');
 
 	var hunk_start_line_1 = -1;
@@ -31,13 +33,26 @@ var highlightDiff = function(diff, element) {
 		if (header) {
 			if (firstChar == "+" || firstChar == "-")
 				continue;
-		} else if (firstChar == "d") {
-			++file_index;
+		} else if (firstChar == "d") { // New file, we have to reset everything
 			header = true;
-			line1 += '\n';
-			line2 += '\n';
-			var match = l.match(/diff --git a\/(\S*)/);
-			diffContent += '</div><div class="fileHeader" id="file_index_' + file_index + '">' + file_index + ' <span class="fileline">' + match[1] + '</span></div>';
+
+			if (file_index++) // Finish last file
+			{
+				finalContent += '<div class="file" id="file_index_' + (file_index - 2) + '">' +
+									'<div class="fileHeader">' + filename + '</div>' +
+									'<div class="diffContent">' +
+										'<div class="lineno">' + line1 + "</div>" +
+										'<div class="lineno">' + line2 + "</div>" +
+										'<div class="lines">' + diffContent + "</div>" +
+									'</div>' +
+								'</div>';
+				line1 = "";
+				line2 = "";
+				diffContent = "";
+			}
+
+			if(match = l.match(/diff --git a\/(\S*)/))
+				filename = match[1];
 			continue;
 		}
 
@@ -54,7 +69,10 @@ var highlightDiff = function(diff, element) {
 			line2 += "\n";
 			diffContent += "<div class='delline'>" + l + "</div>";
 		} else if (firstChar == "@") {
-			header = false;
+			if (header) {
+				header = false;
+			}
+
 			if (m = l.match(/@@ \-([0-9]+),\d+ \+(\d+),\d+ @@/))
 			{
 				hunk_start_line_1 = parseInt(m[1]) - 1;
@@ -70,10 +88,17 @@ var highlightDiff = function(diff, element) {
 		}
 	}
 
+	finalContent += '<div class="file" id="file_index_' + (file_index - 1) + '">' +
+						'<div class="fileHeader">' + filename + '</div>' +
+						'<div class="diffContent">' +
+							'<div class="lineno">' + line1 + "</div>" +
+							'<div class="lineno">' + line2 + "</div>" +
+							'<div class="lines">' + diffContent + "</div>" +
+						'</div>' +
+					'</div>';
+
 	// This takes about 7ms
-	element.innerHTML = "<table class='diff'><tr><td class='lineno'l><pre>" + line1 + "</pre></td>" +
-	                  "<td class='lineno'l><pre>" + line2 + "</pre></td>" +
-	                  "<td width='100%'><pre width='100%'>" + diffContent + "</pre></td></tr></table>";
+	element.innerHTML = finalContent;
 
 	// TODO: Replace this with a performance pref call
 	if (false)

diff --git a/html/test.html b/html/test.html
@@ -1,15 +1,15 @@
 <html>
 <head>
 	<title>Details for commit</title>
-	<link rel="stylesheet" href="commits.css" type="text/css" media="screen" title="no title" charset="utf-8">
-	<link rel="stylesheet" href="diff_style.css" type="text/css" media="screen" title="no title" charset="utf-8">
-	<script src="diffHighlighter.js" type="text/javascript" charset="utf-8"></script>
-	<script src="diff.js" type="text/javascript" charset="utf-8"></script>
+	<link rel="stylesheet" href="css/GitX.css" type="text/css" media="screen" title="no title" charset="utf-8">
+	<link rel="stylesheet" href="css/diff.css" type="text/css" media="screen" title="no title" charset="utf-8">
+	<script src="lib/GitX.js" type="text/javascript" charset="utf-8"></script>
+	<script src="lib/diffHighlighter.js" type="text/javascript" charset="utf-8"></script>
 
 	<script type="text/javascript" charset="utf-8">
 
 	var doeHet = function() {
-		displayDiff($("orig_diff").value.replace(/</g, "&lt;"));
+		highlightDiff($("orig_diff").value, $("diff"));
 	}
 	</script>
 </head>
@@ -858,5 +858,5 @@
  	[self.window setToolbar:toolbar];
  }
 	</textarea>
-	<pre><code class="diffcode" id='diff'></code></pre>
+	<div id='diff'></div>
 </body>
diff --git a/html/views/commit/commit.css b/html/views/commit/commit.css
@@ -48,7 +48,7 @@ table.diff {
 	margin-top: 30px;
 }
 
-table.diff tr td a.stagebutton {
+.diff a.stagebutton {
 	display: block;
 	width: 40px;
 	padding: 0 2px 0 2px;