mirror of
https://github.com/kennethreitz-archive/gitx.git
synced 2026-06-05 23:40:18 +00:00
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 :)
This commit is contained in:
Pieter de Bie
+7
-1
@@ -1,2 +1,8 @@
|
||||
@import url("diff.css");
|
||||
@import url("notification.css");
|
||||
@import url("notification.css");
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
+38
-48
@@ -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;
|
||||
}
|
||||
|
||||
.hunkheader {
|
||||
background-color: #f7f7f7;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
pre {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
pre code {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#CurrentHunk {
|
||||
border-left: 5px solid black;
|
||||
}
|
||||
|
||||
.whitespace {
|
||||
background-color: rgba(255,0,0,0.5);
|
||||
}
|
||||
|
||||
|
||||
table.diff {
|
||||
margin-top: 15px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
border-spacing: 0;
|
||||
}
|
||||
.lineno {
|
||||
.diff .file .diffcontent .lineno {
|
||||
float: left;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
background-color: #ECECEC;
|
||||
color: #A9A9A9;
|
||||
border: 1px solid #DDDDDD;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.diff .file .diffContent .lines .hunkheader {
|
||||
background-color: #f7f7f7;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
|
||||
.diff .file .diffcontent .lines .delline {
|
||||
background-color: #FEE;
|
||||
color: #B00;
|
||||
}
|
||||
|
||||
.diff .file .diffcontent .lines .addline {
|
||||
background-color: #DFD;
|
||||
color: #080;
|
||||
}
|
||||
|
||||
.diff .file .diffcontent .lines .whitespace {
|
||||
background-color: rgba(255,0,0,0.5);
|
||||
}
|
||||
|
||||
#CurrentHunk {
|
||||
border-left: 5px solid black;
|
||||
}
|
||||
+36
-11
@@ -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)
|
||||
|
||||
+6
-6
@@ -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, "<"));
|
||||
highlightDiff($("orig_diff").value, $("diff"));
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
@@ -858,5 +858,5 @@ index db530c0..18c2393 100644
|
||||
[self.window setToolbar:toolbar];
|
||||
}
|
||||
</textarea>
|
||||
<pre><code class="diffcode" id='diff'></code></pre>
|
||||
<div id='diff'></div>
|
||||
</body>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user