Add background filler for more consistent diff look

This commit is contained in:
Jesse van den Kieboom 2013-12-31 15:13:53 +01:00
parent 0f595bf0fe
commit a356836779
3 changed files with 54 additions and 12 deletions

View file

@ -16,6 +16,16 @@ function diff_file(file, lnstate, data)
{
var h = file.hunks[i];
if (!h)
{
file_body += '<tr class="context">\
<td class="gutter old">' + lnstate.gutterdots + '</td>\
<td class="gutter new">' + lnstate.gutterdots + '</td>\
<td></td>\
</tr>';
continue;
}
var cold = h.range.old.start;
var cnew = h.range.new.start;
@ -97,29 +107,39 @@ function diff_file(file, lnstate, data)
}
}
var file_path;
var file_path = '';
var file_stats = '';
var file_classes = '';
if (file.file.new.path)
if (file.file)
{
file_path = file.file.new.path;
if (file.file.new.path)
{
file_path = file.file.new.path;
}
else
{
file_path = file.file.old.path;
}
var total = added + removed;
var addedp = Math.floor(added / total * 100);
var removedp = 100 - addedp;
file_stats = '<span class="file_stats"><span class="number">' + (added + removed) + '</span><span class="bar"><span class="added" style="width: ' + addedp + '%;"></span><span class="removed" style="width: ' + removedp + '%;"></span></span></span>';
}
else
{
file_path = file.file.old.path;
file_classes = 'background';
}
var total = added + removed;
var addedp = Math.floor(added / total * 100);
var removedp = 100 - addedp;
var file_stats = '<span class="file_stats"><span class="number">' + (added + removed) + '</span><span class="bar"><span class="added" style="width: ' + addedp + '%;"></span><span class="removed" style="width: ' + removedp + '%;"></span></span></span>';
var template = data.file_template;
var repls = {
'FILE_PATH': file_path,
'FILE_BODY': file_body,
'FILE_STATS': file_stats,
'FILE_STAGE': lnstate.stagebutton,
'FILE_CLASSES': file_classes
};
for (var r in repls)
@ -145,6 +165,7 @@ function diff_files(files, lines, maxlines, data)
'FILE_BODY',
'FILE_STATS',
'FILE_STAGE'
'FILE_CLASSES'
];
var replacements = {};
@ -183,6 +204,8 @@ function diff_files(files, lines, maxlines, data)
lnstate.stagebutton = '<span class="' + cls + '">' + nm + '</span>';
}
// special empty background filler
f += diff_file({hunks: [null]}, lnstate, data);
for (var i = 0; i < files.length; ++i)
{

View file

@ -1,6 +1,7 @@
body, html {
padding: 0;
margin: 0;
min-height: 100%;
}
div#templates {
@ -21,6 +22,24 @@ div#diff div.file table {
width: 100%;
}
div#diff div.file.background tr.file_header {
display: none;
}
div#diff div.file.background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
opacity: 0.5;
}
div#diff div.file.background table.file {
height: 100%;
}
img.avatar {
float: left;
margin-right: 10px;

View file

@ -20,8 +20,8 @@
</div>
<!-- Diff template -->
<div class="file">
<table>
<div class="file ${FILE_CLASSES}" data-filename="${FILE_FILENAME}">
<table class="file">
<colgroup>
<col width="0">
<col width="0">