GNOME.org
 

[gitg/vala] Improved visual style and added commit message

commit 59643a0d0626eec45d3252f2b5a846d109620074
Author: Jesse van den Kieboom <jesse vandenkieboom epfl ch>
Date:   Wed Jul 11 14:04:38 2012 +0200

    Improved visual style and added commit message

 libgitg-gtk/resources/base.css  |  114 ++++++++++++++++++++----
 libgitg-gtk/resources/base.html |   58 ++++++++++++
 libgitg-gtk/resources/base.js   |  186 ++++++++++++++++++++++++++++++++------
 3 files changed, 312 insertions(+), 46 deletions(-)
---
diff --git a/libgitg-gtk/resources/base.css b/libgitg-gtk/resources/base.css
index 447acd8..800b6c9 100644
--- a/libgitg-gtk/resources/base.css
+++ b/libgitg-gtk/resources/base.css
@@ -1,36 +1,118 @@
-body {
+body, html {
+  padding: 0;
+  margin: 0;
+}
+
+div#templates {
+  display: none;
 }
 
 div#diff {
   font-family: monospace;
+  -webkit-tab-size: 4;
 }
 
 div#diff div.file div.header {
-  border: 1px solid #888a85;
-  background: -webkit-gradient(linear, left top, left bottom, from(#eeeeec), to(#d3d7cf));
-
-  border-radius: 10px 10px 10px 10px;
+  background: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
+  color: #eeeeec;
   padding: 5px;
-  margin-bottom: 5px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 div#diff div.file {
-  margin-bottom: 30px;
-}
-
-div#diff div.file div.hunk div.header {
-  background: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
-  color: #eeeeec;
-  border: 1px solid #204a87;
-  border-radius: 5px 5px 5px 5px;
 }
 
 div#diff div.file span.old.prefix, div#diff div.file div.line.removed {
-  color: #a40000;
+  color: #ffcccc;
 }
 
 div#diff div.file span.new.prefix, div#diff div.file div.line.added {
-  color: #4e9a06;
+  color: #ccffcc;
+}
+
+div#diff div.hunk {
+  overflow: auto;
+}
+
+div#diff div.hunk table {
+  border-collapse: collapse;
+  width: 100%;
+  border-bottom: 1px solid #d3d7cf;
+}
+
+img.avatar {
+  float: right;
+  border-radius: 10px 10px 10px 10px;
+}
+
+div.commit {
+  padding: 10px;
+  font-family: sans-serif;
+  background: -webkit-gradient(linear, left top, left bottom, from(#eeeeec), to(#d3d7cf));
+}
+
+div.commit table {
+  border-collapse: collapse;
+}
+
+div.commit table td:first-child {
+  font-weight: bold;
+  padding-right: 15px;
+}
+
+div.commit div.message {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+div#diff div.hunk table td {
+  white-space: pre;
+}
+
+span.tab {
+  overflow: hidden;
+  display: inline-block;
+}
+
+div#diff div.hunk table.wrapped td {
+  white-space: pre-wrap;
+}
+
+div#diff div.hunk table tr.added td:last-child {
+  background-color: #ccffcc;
+}
+
+div#diff div.hunk table tr.removed td:last-child {
+  background-color: #ffcccc;
+}
+
+div#diff div.hunk table thead th {
+  background: -webkit-gradient(linear, left top, left bottom, from(#eeeeec), to(#d3d7cf));
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+div#diff div.hunk table thead th.header {
+  text-align: left;
+  padding-left: 5px;
+}
+
+div#diff div.hunk table td {
+  vertical-align: top;
+}
+
+div#diff div.hunk table td.gutter {
+  padding-right: 2px;
+  padding-left: 2px;
+  background-color: #eeeeec;
+  text-align: right;
+  color: #888a85;
+}
+
+div#diff div.hunk table td:nth-child(2) {
+  border-right: 3px solid #d3d7cf;
+  border-left: 1px solid #d3d7cf;
 }
 
 /* vi:ts=2:et */
diff --git a/libgitg-gtk/resources/base.html b/libgitg-gtk/resources/base.html
index 9040a42..8a95e37 100644
--- a/libgitg-gtk/resources/base.html
+++ b/libgitg-gtk/resources/base.html
@@ -6,6 +6,64 @@
     <script type="text/javascript" src="base.js"></script>
   </head>
   <body>
+    <div id="templates">
+      <!-- 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>
+      </div>
+
+      <!-- Hunk template -->
+      <div class="hunk">
+        <table class="contents">
+          <colgroup>
+            <col width="0">
+            <col width="0">
+            <col width="100%">
+          </colgroup>
+          <thead>
+            <th>-</th>
+            <th>+</th>
+            <th class="header"></th>
+          </thead>
+        </table>
+      </div>
+    </div>
     <div id="diff">
     </div>
   </body>
diff --git a/libgitg-gtk/resources/base.js b/libgitg-gtk/resources/base.js
index 3932a4b..c6d5dc4 100644
--- a/libgitg-gtk/resources/base.js
+++ b/libgitg-gtk/resources/base.js
@@ -15,72 +15,165 @@ var params = function(query) {
 	return ret;
 }(document.location.search.substring(1));
 
-var file_template = '<div class="file"><div class="header"><span class="cmd">diff --git</span> <span class="path old">#{this.file.old.path}</span> <span class="path new">#{this.file.new.path}</span><br/><span class="old prefix">---</span> <span class="path old prefix">#{this.file.old.path}</span><br/><span class="new prefix">+++</span> <span class="path new prefix">#{this.file.new.path}</span></div><div class="hunks"></div></div>';
+var settings = {
+	wrap: true,
+	tab_width: 4,
+};
 
-var hunk_template = '<div class="hunk"><div class="header">@@ -#{this.range.old.start},#{this.range.old.lines} +#{this.range.new.start},#{this.range.new.lines} @@</div><div>';
+if ('settings' in params)
+{
+	settings = $.merge(settings, JSON.parse(params.setttings));
+}
 
-function run_template(html, context)
+var templates = {};
+
+function create_template(name, bindmap)
 {
-	var r = /#{([^}]+)}/g;
+	templ = $('#templates').children('.' + name);
 
-	return $(html.replace(r, function (m, p1) {
-		var f = function () {
-			return eval(p1);
+	if (templ.length != 1)
+	{
+		return;
+	}
+
+	templ = $(templ[0]);
+
+	props = [];
+
+	$.each(bindmap, function (key, callback) {
+		props.push({
+			elements: templ.find(key),
+			callback: callback
+		});
+	});
+
+	templates[name] = {
+		template: templ,
+		props: props,
+		execute: function (context) {
+			$.each(this.props, function (i, val) {
+				$.each(val.elements, function (i, e) {
+					var ee = $(e);
+
+					retval = val.callback.call(context, ee);
+
+					if (typeof(retval) == 'undefined')
+					{
+						return;
+					}
+
+					if (typeof(retval) == 'string')
+					{
+						ee.text(retval);
+					}
+					else if ('text' in retval)
+					{
+						ee.text(retval.text);
+					}
+					else if ('html' in retval)
+					{
+						ee.html(retval.html);
+					}
+				});
+			});
+
+			return this.template.clone();
 		}
+	};
 
-		return f.call(context);
-	}));
+	return templates[name];
+}
+
+function run_template(name, context)
+{
+	return templates[name].execute(context);
 }
 
 function diff_file(file)
 {
-	var f = run_template(file_template, file);
+	var f = run_template('file', file);
 
 	for (var i = 0; i < file.hunks.length; ++i)
 	{
 		var h = file.hunks[i];
-		var ht = run_template(hunk_template, h);
+		var ht = run_template('hunk', h);
+
+		var table = ht.children('table');
+
+		if (settings.wrap)
+		{
+			table.addClass('wrapped');
+		}
+
+		var cold = h.range.old.start;
+		var cnew = h.range.new.start;
 
 		for (var j = 0; j < h.lines.length; ++j)
 		{
 			var l = h.lines[j];
-
 			var o = String.fromCharCode(l.type);
 
-			var cls = {
-				' ': 'context',
-				'+': 'added',
-				'-': 'removed'
-			}[o];
+			var oldtd = $('<td/>', {'class': 'gutter'});
+			var newtd = $('<td/>', {'class': 'gutter'});
+
+			var row = $('<tr/>');
 
-			if (o == ' ')
+			switch (o)
 			{
-				o = '&nbsp';
+				case ' ':
+					row.addClass('context');
+
+					oldtd.text(cold);
+					newtd.text(cnew);
+
+					cold++;
+					cnew++;
+				break;
+				case '+':
+					row.addClass('added');
+
+					newtd.text(cnew);
+					cnew++;
+				break;
+				case '-':
+					row.addClass('removed');
+
+					oldtd.text(cold);
+					cold++;
+				break;
 			}
 
-			var ll = $('<div/>', {'class': 'line ' + cls}).html(o);
-			ll.append($('<span/>').text(l.content));
+			var texttd = $('<td/>').text(l.content);
 
-			ht.append(ll);
+			texttd.html(texttd.html().replace(/\t/g, '<span class="tab" style="width: ' + settings.tab_width + 'ex">\t</span>'));
+
+			row.append(oldtd).append(newtd).append(texttd);
+			table.append(row);
 		}
 
+
 		f.append(ht);
 	}
 
 	return f;
 }
 
-function write_diff(res)
+function write_diff(content, res)
 {
-	var content = $('#diff');
-	content.empty();
-
-	for (var i = 0; i < res.diff.length; ++i)
+	for (var i = 0; i < res.length; ++i)
 	{
-		content.append(diff_file(res.diff[i]));
+		var df = diff_file(res[i]);
+
+		content.append(df);
 	}
 }
 
+function write_commit(content, commit)
+{
+	var c = run_template('commit', commit);
+	content.append(c);
+}
+
 function update_diff()
 {
 	var r = new XMLHttpRequest();
@@ -88,14 +181,47 @@ function update_diff()
 	r.onload = function(e) {
 		j = JSON.parse(r.responseText);
 
+		var content = $('#diff');
+		content.empty();
+
 		if ('commit' in j)
 		{
-			console.log(JSON.stringify(j.commit, null, 2));
+			write_commit(content, j.commit);
 		}
 
-		write_diff(j);
+		write_diff(content, j.diff);
 	}
 
 	r.open("GET", "gitg-internal:/diff/?viewid=" + params.viewid);
 	r.send();
 }
+
+addEventListener('DOMContentLoaded', function () {
+	create_template("file", {
+		'.path.old': function () { return this.file.old.path; },
+		'.path.new': function () { return this.file.new.path; }
+	});
+
+	create_template("hunk", {
+		'.header': function () { return this.header; }
+	});
+
+	create_template("commit", {
+		'.author': function () { return this.author.name + ' <' + this.author.email + '>'; },
+		'.date': function () {
+			var d = new Date();
+			d.setTime(this.author.time * 1000);
+			return {text: d.toLocaleString()};
+		},
+		'.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');
+		},
+	});
+}, false);
+
+// vi:ts=4
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]