[gitg/vala] Improved visual style of diff view commit header

[Jesse van den Kieboom <jessevdk src gnome org>]

commit 7d65616b711d9589fb8d3224f5e4d31000c5c3f2
Author: Jesse van den Kieboom <jesse vandenkieboom epfl ch>
Date:   Thu Jul 12 14:07:28 2012 +0200

    Improved visual style of diff view commit header

 libgitg-gtk/resources/base.css  |   55 +++++++++++++----------
 libgitg-gtk/resources/base.html |   48 ++++----------------
 libgitg-gtk/resources/base.js   |   93 +++++++++++++++++++++++++++++++++------
 3 files changed, 120 insertions(+), 76 deletions(-)
---
diff --git a/libgitg-gtk/resources/base.css b/libgitg-gtk/resources/base.css
index 800b6c9..406d389 100644
--- a/libgitg-gtk/resources/base.css
+++ b/libgitg-gtk/resources/base.css
@@ -12,25 +12,6 @@ div#diff {
   -webkit-tab-size: 4;
 }
 
-div#diff div.file div.header {
-  background: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
-  color: #eeeeec;
-  padding: 5px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-div#diff div.file {
-}
-
-div#diff div.file span.old.prefix, div#diff div.file div.line.removed {
-  color: #ffcccc;
-}
-
-div#diff div.file span.new.prefix, div#diff div.file div.line.added {
-  color: #ccffcc;
-}
-
 div#diff div.hunk {
   overflow: auto;
 }
@@ -88,21 +69,22 @@ div#diff div.hunk table tr.removed td:last-child {
 }
 
 div#diff div.hunk table thead th {
-  background: -webkit-gradient(linear, left top, left bottom, from(#eeeeec), to(#d3d7cf));
+  background-color: #eeeeec;
   padding-top: 3px;
   padding-bottom: 3px;
 }
 
-div#diff div.hunk table thead th.header {
+div#diff div.hunk table thead th.filepath {
   text-align: left;
   padding-left: 5px;
+  font-family: sans-serif;
 }
 
 div#diff div.hunk table td {
   vertical-align: top;
 }
 
-div#diff div.hunk table td.gutter {
+div#diff div.hunk table .gutter {
   padding-right: 2px;
   padding-left: 2px;
   background-color: #eeeeec;
@@ -110,9 +92,36 @@ div#diff div.hunk table td.gutter {
   color: #888a85;
 }
 
-div#diff div.hunk table td:nth-child(2) {
+div#diff div.hunk table th.gutter {
+  text-align: center;
+}
+
+div#diff div.hunk table td:nth-child(2), div#diff div.hunk table th:nth-child(2)  {
   border-right: 3px solid #d3d7cf;
   border-left: 1px solid #d3d7cf;
 }
 
+div.commit {
+  position: relative;
+}
+
+div.commit .date, div.commit .sha1 {
+  color: #888a85;
+  font-size: 0.8em;
+}
+
+div.commit .sha1 {
+  font-family: monospace;
+  text-align: right;
+}
+
+div.commit .message {
+  white-space: pre-wrap;
+  margin-bottom: 5px;
+}
+
+a {
+  color: #3465a4;
+}
+
 /* vi:ts=2:et */
diff --git a/libgitg-gtk/resources/base.html b/libgitg-gtk/resources/base.html
index 8a95e37..ca6be6c 100644
--- a/libgitg-gtk/resources/base.html
+++ b/libgitg-gtk/resources/base.html
@@ -10,42 +10,12 @@
       <!-- Commit template -->
       <div class="commit">
         <img class="avatar"/>
-        <table>
-          <tr>
-            <td>SHA1:</td>
-            <td class="sha1"></td>
-          </tr>
-          <tr>
-            <td>Author:</td>
-            <td class="author"></td>
-          </tr>
-          <tr>
-            <td>Date:</td>
-            <td class="date"></td>
-          </tr>
-          <tr>
-            <td>Subject:</td>
-            <td class="subject"></td>
-          </tr>
-        </table>
-        <div class="message"></div>
-      </div>
-
-      <!-- File template -->
-      <div class="file">
-        <div class="header">
-          <span class="cmd">diff --git</span>
-          <span class="path old"></span>
-          <span class="path new"></span><br/>
-
-          <span class="old prefix">---</span>
-          <span class="path old prefix"></span><br/>
-
-          <span class="new prefix">+++</span>
-          <span class="path new prefix"></span>
-        </div>
-        <div class="hunks">
-        </div>
+        <p>
+          <span class="author"></span><br/>
+          <span class="date"></span>
+        </p>
+        <p class="message"></p>
+        <div class="sha1"></div>
       </div>
 
       <!-- Hunk template -->
@@ -57,9 +27,9 @@
             <col width="100%">
           </colgroup>
           <thead>
-            <th>-</th>
-            <th>+</th>
-            <th class="header"></th>
+            <th class="gutter">-</th>
+            <th class="gutter">+</th>
+            <th class="filepath"></th>
           </thead>
         </table>
       </div>
diff --git a/libgitg-gtk/resources/base.js b/libgitg-gtk/resources/base.js
index c6d5dc4..4379154 100644
--- a/libgitg-gtk/resources/base.js
+++ b/libgitg-gtk/resources/base.js
@@ -62,6 +62,11 @@ function create_template(name, bindmap)
 						return;
 					}
 
+					if (retval.nodeType || retval.jquery)
+					{
+						ee.replace(retval);
+					}
+
 					if (typeof(retval) == 'string')
 					{
 						ee.text(retval);
@@ -91,12 +96,12 @@ function run_template(name, context)
 
 function diff_file(file)
 {
-	var f = run_template('file', file);
+	var f = $('<div/>');
 
 	for (var i = 0; i < file.hunks.length; ++i)
 	{
 		var h = file.hunks[i];
-		var ht = run_template('hunk', h);
+		var ht = run_template('hunk', {file: file, hunk: h});
 
 		var table = ht.children('table');
 
@@ -196,30 +201,90 @@ function update_diff()
 	r.send();
 }
 
-addEventListener('DOMContentLoaded', function () {
-	create_template("file", {
-		'.path.old': function () { return this.file.old.path; },
-		'.path.new': function () { return this.file.new.path; }
-	});
+function date_to_string(d)
+{
+	var t = ((new Date()).getTime() - d.getTime()) / 1000.0;
+
+	if (t < 1)
+	{
+		return "Less than a second ago";
+	}
+	else if (t < 60)
+	{
+		return "Less than a minute ago";
+	}
+	else if (t < 600)
+	{
+		return "Less than 10 minutes ago";
+	}
+	else if (t < 1800)
+	{
+		return "Half an hour ago";
+	}
+	else if (t < 3600)
+	{
+		return "One hour ago";
+	}
+	else if (t < 3600 * 12)
+	{
+		var tt = Math.round(t / 3600)
+		return tt + " hours ago";
+	}
+	else if (t < 3600 * 24)
+	{
+		return "One day ago";
+	}
+	else if (t < 3600 * 24 * 6)
+	{
+		return Math.Round(t / (3600 * 24)) + " days ago";
+	}
+
+	return d.toLocaleString();
+}
 
+addEventListener('DOMContentLoaded', function () {
 	create_template("hunk", {
-		'.header': function () { return this.header; }
+		'.filepath': function () {
+			var f = this.file.file;
+
+			if (f.new.path)
+			{
+				return f.new.path;
+			}
+			else
+			{
+				return f.old.path;
+			}
+		},
 	});
 
 	create_template("commit", {
-		'.author': function () { return this.author.name + ' <' + this.author.email + '>'; },
+		'.author': function () {
+			var name = $('<span/>', {'class': 'author name'}).text(this.author.name);
+			var a = $('<a/>', {href: this.author.email}).text(this.author.email);
+
+			return {html: $('<span/>').append(name).append(' <').append(a).append('>')};
+		},
 		'.date': function () {
 			var d = new Date();
 			d.setTime(this.author.time * 1000);
-			return {text: d.toLocaleString()};
+			return {text: date_to_string(d)};
+		},
+		'.subject': function () {
+			return this.subject;
+		},
+		'.message': function () {
+			return this.message;
+		},
+		'.sha1': function () {
+			return this.id;
 		},
-		'.subject': function () { return this.subject; },
-		'.message': function () { return this.message; },
-		'.sha1': function () { return this.id; },
 		'.avatar': function (e) {
 			var h = this.author.email_md5;
 
-			e.attr('src', 'http://www.gravatar.com/avatar/' + h + '?s=80');
+			var robo = 'http://robohash.org/' + h + '.png?size=80x80';
+
+			e.attr('src', 'http://www.gravatar.com/avatar/' + h + '?d=' + encodeURIComponent(robo) + '&s=80');
 		},
 	});
 }, false);