Make file summary more appealing
This commit is contained in:
Rodrigo Fernandes
parent
15a2794ea3
commit
024c37da67
7 changed files with 83 additions and 53 deletions
|
|
@ -9,34 +9,26 @@
|
|||
|
||||
var printerUtils = require('./printer-utils.js').PrinterUtils;
|
||||
|
||||
var hoganUtils = require('./hoganjs-utils.js').HoganJsUtils;
|
||||
var baseTemplatesPath = 'file-summary';
|
||||
|
||||
function FileListPrinter() {
|
||||
}
|
||||
|
||||
FileListPrinter.prototype.generateFileList = function(diffFiles) {
|
||||
return '<div class="d2h-file-list-wrapper">\n' +
|
||||
' <div class="d2h-file-list-header">\n' +
|
||||
' <span class="d2h-file-list-title">Files changed (' + diffFiles.length + ')  </span>\n' +
|
||||
' <a class="d2h-file-switch d2h-hide">hide</a>\n' +
|
||||
' <a class="d2h-file-switch d2h-show">show</a>\n' +
|
||||
' </div>\n' +
|
||||
' <table class="d2h-file-list">\n' +
|
||||
var files = diffFiles.map(function(file) {
|
||||
return hoganUtils.render(baseTemplatesPath, 'line', {
|
||||
fileHtmlId: printerUtils.getHtmlId(file),
|
||||
fileName: printerUtils.getDiffName(file),
|
||||
deletedLines: '-' + file.deletedLines,
|
||||
addedLines: '+' + file.addedLines
|
||||
});
|
||||
}).join('\n');
|
||||
|
||||
diffFiles.map(function(file) {
|
||||
return ' <tr class="d2h-file-list-line">\n' +
|
||||
' <td class="d2h-lines-added">\n' +
|
||||
' <span>+' + file.addedLines + '</span>\n' +
|
||||
' </td>\n' +
|
||||
' <td class="d2h-lines-deleted">\n' +
|
||||
' <span>-' + file.deletedLines + '</span>\n' +
|
||||
' </td>\n' +
|
||||
' <td class="d2h-file-name-wrapper">\n' +
|
||||
' <a href="#' + printerUtils.getHtmlId(file) + '" class="d2h-file-name">' +
|
||||
' ' + printerUtils.getDiffName(file) +
|
||||
' </a>\n' +
|
||||
' </td>\n' +
|
||||
' </tr>\n';
|
||||
}).join('\n') +
|
||||
'</table></div>\n';
|
||||
return hoganUtils.render(baseTemplatesPath, 'wrapper', {
|
||||
filesNumber: diffFiles.length,
|
||||
files: files
|
||||
});
|
||||
};
|
||||
|
||||
module.exports.FileListPrinter = new FileListPrinter();
|
||||
|
|
|
|||
|
|
@ -26,14 +26,6 @@
|
|||
SideBySidePrinter.prototype.makeDiffHtml = function(file, diffs) {
|
||||
return '<div id="' + printerUtils.getHtmlId(file) + '" class="d2h-file-wrapper" data-lang="' + file.language + '">\n' +
|
||||
' <div class="d2h-file-header">\n' +
|
||||
' <span class="d2h-file-stats">\n' +
|
||||
' <span class="d2h-lines-added">\n' +
|
||||
' <span>+' + file.addedLines + '</span>\n' +
|
||||
' </span>\n' +
|
||||
' <span class="d2h-lines-deleted">\n' +
|
||||
' <span>-' + file.deletedLines + '</span>\n' +
|
||||
' </span>\n' +
|
||||
' </span>\n' +
|
||||
' <span class="d2h-file-name-wrapper">\n' +
|
||||
' <span class="d2h-file-name">' + printerUtils.getDiffName(file) + '</span>\n' +
|
||||
' </span>\n' +
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
(function() {
|
||||
if (!!!global.browserTemplates) global.browserTemplates = {};
|
||||
var Hogan = require("hogan.js");global.browserTemplates["line-by-line-column-line-number"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b(" <td class=\"d2h-code-linenumber ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\"></td>");t.b("\n" + i);t.b(" <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"d2h-code-line ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b(t.t(t.f("blockHeader",c,p,0)));t.b("</div>");t.b("\n" + i);t.b(" </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: { }});
|
||||
var Hogan = require("hogan.js");global.browserTemplates["file-summary-line"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<li class=\"d2h-file-list-line\">");t.b("\n" + i);t.b(" <span class=\"d2h-file-name-wrapper\">");t.b("\n" + i);t.b(" <span>");t.b("\n" + i);t.b(" <svg aria-hidden=\"true\" class=\"d2h-icon\" height=\"16\" version=\"1.1\" viewBox=\"0 0 12 16\" width=\"12\">");t.b("\n" + i);t.b(" <path d=\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\"></path>");t.b("\n" + i);t.b(" </svg>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <a href=\"");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-name\">");t.b(t.v(t.f("fileName",c,p,0)));t.b("</a>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"d2h-file-stats\">");t.b("\n" + i);t.b(" <span class=\"d2h-lines-added\">");t.b(t.v(t.f("addedLines",c,p,0)));t.b("</span><span class=\"d2h-lines-deleted\">");t.b(t.v(t.f("deletedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</li>");return t.fl(); },partials: {}, subs: { }});
|
||||
global.browserTemplates["file-summary-wrapper"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"d2h-file-list-wrapper\">");t.b("\n" + i);t.b(" <div class=\"d2h-file-list-header\">");t.b("\n" + i);t.b(" <span class=\"d2h-file-list-title\">Files changed (");t.b(t.v(t.f("filesNumber",c,p,0)));t.b(")</span>");t.b("\n" + i);t.b(" <a class=\"d2h-file-switch d2h-hide\">hide</a>");t.b("\n" + i);t.b(" <a class=\"d2h-file-switch d2h-show\">show</a>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <ol class=\"d2h-file-list\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("files",c,p,0)));t.b("\n" + i);t.b(" </ol>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
|
||||
global.browserTemplates["line-by-line-column-line-number"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b(" <td class=\"d2h-code-linenumber ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\"></td>");t.b("\n" + i);t.b(" <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"d2h-code-line ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b(t.t(t.f("blockHeader",c,p,0)));t.b("</div>");t.b("\n" + i);t.b(" </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: { }});
|
||||
global.browserTemplates["line-by-line-empty-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b(" <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"d2h-code-line ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" File without changes");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: { }});
|
||||
global.browserTemplates["line-by-line-file-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div id=\"");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-wrapper\" data-lang=\"");t.b(t.v(t.d("file.language",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"d2h-file-header\">");t.b("\n" + i);t.b(" <span class=\"d2h-file-stats\">");t.b("\n" + i);t.b(" <span class=\"d2h-lines-added\">");t.b("\n" + i);t.b(" <span>+");t.b(t.v(t.d("file.addedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"d2h-lines-deleted\">");t.b("\n" + i);t.b(" <span>-");t.b(t.v(t.d("file.deletedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"d2h-file-name-wrapper\">");t.b("\n" + i);t.b(" <span class=\"d2h-file-name\"> ");t.b(t.v(t.f("fileDiffName",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <div class=\"d2h-file-diff\">");t.b("\n" + i);t.b(" <div class=\"d2h-code-wrapper\">");t.b("\n" + i);t.b(" <table class=\"d2h-diff-table\">");t.b("\n" + i);t.b(" <tbody class=\"d2h-diff-tbody\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("diffs",c,p,0)));t.b("\n" + i);t.b(" </tbody>");t.b("\n" + i);t.b(" </table>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
|
||||
global.browserTemplates["line-by-line-file-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div id=\"");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-wrapper\" data-lang=\"");t.b(t.v(t.d("file.language",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"d2h-file-header\">");t.b("\n" + i);t.b(" <span class=\"d2h-file-name-wrapper\">");t.b("\n" + i);t.b(" <span class=\"d2h-icon-wrapper\">");t.b("\n" + i);t.b(" <svg aria-hidden=\"true\" class=\"d2h-icon\" height=\"16\" version=\"1.1\" viewBox=\"0 0 12 16\" width=\"12\">");t.b("\n" + i);t.b(" <path d=\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\"></path>");t.b("\n" + i);t.b(" </svg>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"d2h-file-name\">");t.b("\n" + i);t.b(" ");t.b(t.v(t.f("fileDiffName",c,p,0)));t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <div class=\"d2h-file-diff\">");t.b("\n" + i);t.b(" <div class=\"d2h-code-wrapper\">");t.b("\n" + i);t.b(" <table class=\"d2h-diff-table\">");t.b("\n" + i);t.b(" <tbody class=\"d2h-diff-tbody\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("diffs",c,p,0)));t.b("\n" + i);t.b(" </tbody>");t.b("\n" + i);t.b(" </table>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
|
||||
global.browserTemplates["line-by-line-line"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b(" <td class=\"d2h-code-linenumber ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"line-num1\">");t.b(t.v(t.f("oldNumber",c,p,0)));t.b("</div>");t.b("\n" + i);t.b(" <div class=\"line-num2\">");t.b(t.v(t.f("newNumber",c,p,0)));t.b("</div>");t.b("\n" + i);t.b(" </td>");t.b("\n" + i);t.b(" <td class=\"");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b(" <div class=\"d2h-code-line ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);if(t.s(t.f("prefix",c,p,1),c,p,0,253,329,"{{ }}")){t.rs(c,p,function(c,p,t){t.b(" <span class=\"d2h-code-line-prefix\">");t.b(t.t(t.f("prefix",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}if(t.s(t.f("content",c,p,1),c,p,0,361,435,"{{ }}")){t.rs(c,p,function(c,p,t){t.b(" <span class=\"d2h-code-line-ctn\">");t.b(t.t(t.f("content",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}t.b(" </div>");t.b("\n" + i);t.b(" </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: { }});
|
||||
global.browserTemplates["line-by-line-wrapper"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"d2h-wrapper\">");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("content",c,p,0)));t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
|
||||
module.exports = global.browserTemplates;
|
||||
|
|
|
|||
13
src/templates/file-summary-line.mustache
Normal file
13
src/templates/file-summary-line.mustache
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<li class="d2h-file-list-line">
|
||||
<span class="d2h-file-name-wrapper">
|
||||
<span>
|
||||
<svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">
|
||||
<path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<a href="{{fileHtmlId}}" class="d2h-file-name">{{fileName}}</a>
|
||||
</span>
|
||||
<span class="d2h-file-stats">
|
||||
<span class="d2h-lines-added">{{addedLines}}</span><span class="d2h-lines-deleted">{{deletedLines}}</span>
|
||||
</span>
|
||||
</li>
|
||||
10
src/templates/file-summary-wrapper.mustache
Normal file
10
src/templates/file-summary-wrapper.mustache
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<div class="d2h-file-list-wrapper">
|
||||
<div class="d2h-file-list-header">
|
||||
<span class="d2h-file-list-title">Files changed ({{filesNumber}})</span>
|
||||
<a class="d2h-file-switch d2h-hide">hide</a>
|
||||
<a class="d2h-file-switch d2h-show">show</a>
|
||||
</div>
|
||||
<ol class="d2h-file-list">
|
||||
{{{files}}}
|
||||
</ol>
|
||||
</div>
|
||||
|
|
@ -1,15 +1,14 @@
|
|||
<div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
|
||||
<div class="d2h-file-header">
|
||||
<span class="d2h-file-stats">
|
||||
<span class="d2h-lines-added">
|
||||
<span>+{{file.addedLines}}</span>
|
||||
</span>
|
||||
<span class="d2h-lines-deleted">
|
||||
<span>-{{file.deletedLines}}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="d2h-file-name-wrapper">
|
||||
<span class="d2h-file-name"> {{fileDiffName}}</span>
|
||||
<span class="d2h-icon-wrapper">
|
||||
<svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">
|
||||
<path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="d2h-file-name">
|
||||
{{fileDiffName}}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="d2h-file-diff">
|
||||
|
|
|
|||
|
|
@ -16,32 +16,32 @@
|
|||
}
|
||||
|
||||
.d2h-file-stats {
|
||||
display: inline;
|
||||
display: block;
|
||||
text-align: center;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
top: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.d2h-lines-added {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.d2h-lines-added > * {
|
||||
background-color: #ceffce;
|
||||
/*background-color: #ceffce;*/
|
||||
border: 1px solid #b4e2b4;
|
||||
color: #399839;
|
||||
border-radius: 5px 0 0 5px;
|
||||
color: #399839;
|
||||
padding: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.d2h-lines-deleted {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.d2h-lines-deleted > * {
|
||||
background-color: #f7c8c8;
|
||||
/*background-color: #f7c8c8;*/
|
||||
border: 1px solid #e9aeae;
|
||||
color: #c33;
|
||||
border-radius: 0 5px 5px 0;
|
||||
color: #c33;
|
||||
padding: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.d2h-file-name-wrapper {
|
||||
|
|
@ -258,6 +258,19 @@
|
|||
|
||||
.d2h-file-list {
|
||||
display: block;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.d2h-file-list > li {
|
||||
border-bottom: #ddd solid 1px;
|
||||
padding: 5px 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.d2h-file-list > li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.d2h-file-switch {
|
||||
|
|
@ -266,6 +279,15 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.d2h-icon-wrapper {
|
||||
line-height: 31px;
|
||||
}
|
||||
|
||||
.d2h-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Selection util.
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in a new issue