HistoryView: Make the history view prettier

The following things have changed:
* Moved the gravatar icon to the right
* Do not load default image for gravatar to speed up loading of history view
* Changed the notifier
** New spinner
** New location
** Colour coded for success / failure
* Fonts changed
* New button replacing "paste" --> "Gistie it"
This commit is contained in:
Kim Does
2008-10-16 22:49:22 +02:00
committed by Pieter de Bie
parent 0e46f27ad0
commit e75b2fe82f
4 changed files with 98 additions and 42 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 11 KiB

+12 -7
View File
@@ -11,13 +11,14 @@
</head>
<body style="padding: 0px; border: 0px">
<div id="notification" style="display:none;">
<img src="spinner.gif" width="25px" alt="Spinner" id="spinner"></img>
<span id="notification_message"></span>
<div id="rightcontent">
<div id="buttons">
<a class="servicebutton" onClick="gistie();return false" href='#'>
Gist&nbsp;it
</a>
</div>
<img id="gravatar" src="">
</div>
<div id="gistie" onClick="gistie()">Paste online</div>
<img id="gravatar" src="http://www.gravatar.com/avatar/?d=wavatar" />
<table id="commit_header">
<tr>
<td class="property_name">SHA:</td>
@@ -40,7 +41,11 @@
<td id="refs"></td>
</tr>
</table>
<div id="notification" style="display:none;">
<img src="spinner.gif" alt="Spinner" id="spinner"></img>
<div id="notification_message"></div>
</div>
<hr>
<pre id="message"></pre>
<pre><code class="diffcode" id='details'></code></pre>
</body>
</body>
+29 -17
View File
@@ -38,19 +38,28 @@ var Commit = Class.create({
}
});
var notify = function(text, busy) {
var notify = function(text, state) {
var n = $("notification");
n.style.display = "";
if (busy)
$("spinner").style.display = "";
else
$("spinner").style.display = "none";
$("notification_message").innerHTML = text;
// Change color
if (!state) { // Busy
$("spinner").style.display = "";
n.setAttribute("class", "");
}
else if (state == 1) { // Success
$("spinner").style.display = "none";
n.setAttribute("class", "success");
} else if (state == -1) {// Fail
$("spinner").style.display = "none";
n.setAttribute("class", "fail");
}
}
var gistie = function() {
notify("Uploading code to Gistie..", true);
notify("Uploading code to Gistie..", 0);
parameters = {
"file_ext[gistfile1]": "patch",
"file_name[gistfile1]": commit.object.subject.replace(/[^a-zA-Z0-9]/g, "-") + ".patch",
@@ -74,15 +83,15 @@ var gistie = function() {
onSuccess: function(t) {
if (m = t.responseText.match(/gist: ([a-f0-9]+)/))
notify("Code uploaded to gistie <a target='_new' href='http://gist.github.com/" + m[1] + "'>#" + m[1] + "</a>");
notify("Code uploaded to gistie <a target='_new' href='http://gist.github.com/" + m[1] + "'>#" + m[1] + "</a>", 1);
else
notify("Pasting to Gistie failed.");
notify("Pasting to Gistie failed.", -1);
},
onFailure: function(t) {
notify("Pasting to Gistie failed.");
notify("Pasting to Gistie failed.", -1);
},
onException: function(t) {
notify("Pasting to Gistie failed.");
notify("Pasting to Gistie failed.", -1);
},
});
@@ -127,14 +136,12 @@ var loadCommit = function() {
$("notification").style.display = "none";
$("commitID").innerHTML = commit.sha;
if (commit.author_email) {
if (commit.author_email)
$("authorID").innerHTML = commit.author_name + " &lt;<a href='mailto:" + commit.author_email + "'>" + commit.author_email + "</a>&gt;";
$("gravatar").src = "http://www.gravatar.com/avatar/" + hex_md5(commit.author_email) + "?d=wavatar";
}
else {
else
$("authorID").innerHTML = commit.author_name;
$("gravatar").src = "http://www.gravatar.com/avatar/?d=wavatar";
}
$("date").innerHTML = commit.author_date;
$("subjectID").innerHTML =CommitObject.subject.escapeHTML();
@@ -157,5 +164,10 @@ var loadCommit = function() {
$("details").innerHTML = "<a class='showdiff' href='' onclick='showDiffs(); return false;'>This is a large commit. Click here or press 'v' to view.</a>";
}
if (commit.author_email)
$("gravatar").src = "http://www.gravatar.com/avatar/" + hex_md5(commit.author_email) + "?d=wavatar&s=60";
else
$("gravatar").src = "http://www.gravatar.com/avatar/?d=wavatar&s=60";
scroll(0, 0);
}
+57 -18
View File
@@ -1,35 +1,73 @@
body {
font-family: 'Lucida Grande';
}
#commit_header {
width: 100%;
font-family: Helvetica;
font-size: 12px;
}
#gistie {
float: right;
margin-right: 100px;
color: rgb(20, 79, 174);
text-decoration: underline;
#commit_header td {
padding-left: 5px;
}
#notification {
width: 80%;
margin: auto;
border: 1px solid #A8A159;
background-color: #FFF487;
font-size: 140%;
padding: 10px;
margin: 5px;
padding: 3px;
clear: both;
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
font-size: 80%;
-webkit-border-radius: 2px;
}
#notification img {
vertical-align: bottom;
margin-right: 10px;
#notification.success {
background-color: #CCFF99;
border: 1px solid #99CC66;
}
#notification.fail {
background-color: #ff9999;
border: 1px solid #cc6666;
}
#rightcontent {
float: right;
}
#buttons {
float: left;
margin-top: 5px;
}
a.servicebutton{
display: block;
width: 80px;
padding: 2px;
margin-bottom: 4px;
border: 1px solid #3465a4;
background-color: #cce5ff;
color: #204a87;
font-size: 65%;
text-decoration: none;
text-align: center;
-webkit-border-radius: 2px;
}
#gravatar {
margin: 5px;
padding: 2px;
width: 60px;
height: 60px;
border: solid gray 1px;
float: left;
-webkit-border-radius: 2px;
}
@@ -55,8 +93,9 @@
hr {
border: 0;
height: 1px;
width: 80%;
background-color: #999;
margin: 0 8px;
background-color: #DEDEDE;
clear: both;
}
a {