From 7fbc8c238af796292c0e92b001d66dfb8390f7bd Mon Sep 17 00:00:00 2001 From: Rodrigo Fernandes Date: Sun, 18 Nov 2018 15:38:46 +0000 Subject: [PATCH] Improve line-height --- .eslintrc.json | 1 - src/templates/diff2html-templates.js | 4 +-- src/templates/file-summary-line.mustache | 2 +- src/templates/generic-file-path.mustache | 2 +- src/ui/css/diff2html.css | 12 ++----- test/diff2html-tests.js | 30 ++++++++--------- test/file-list-printer-tests.js | 36 +++++++++----------- test/line-by-line-tests.js | 42 ++++++++++-------------- test/side-by-side-printer-tests.js | 14 ++++---- 9 files changed, 59 insertions(+), 84 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 0a24ca6..0096a89 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -2,7 +2,6 @@ "parserOptions": { "ecmaVersion": 6, "ecmaFeatures": { - "experimentalObjectRestSpread": true, "jsx": true }, "sourceType": "module" diff --git a/src/templates/diff2html-templates.js b/src/templates/diff2html-templates.js index 05d9ba8..945a9f2 100644 --- a/src/templates/diff2html-templates.js +++ b/src/templates/diff2html-templates.js @@ -1,10 +1,10 @@ (function() { if (!!!global.browserTemplates) global.browserTemplates = {}; -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("
  • ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b(t.rp("");t.b("\n" + i);t.b(" ");t.b(t.v(t.f("fileName",c,p,0)));t.b("");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b(t.v(t.f("addedLines",c,p,0)));t.b("");t.b("\n" + i);t.b(" ");t.b(t.v(t.f("deletedLines",c,p,0)));t.b("");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("
    • ");return t.fl(); },partials: {"");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(t.rp("");t.b(t.v(t.f("fileName",c,p,0)));t.b("");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b(t.v(t.f("addedLines",c,p,0)));t.b("");t.b("\n" + i);t.b(" ");t.b(t.v(t.f("deletedLines",c,p,0)));t.b("");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("");return t.fl(); },partials: {"");t.b("\n" + i);t.b("
    ");t.b("\n" + i);t.b(" Files changed (");t.b(t.v(t.f("filesNumber",c,p,0)));t.b(")");t.b("\n" + i);t.b(" hide");t.b("\n" + i);t.b(" show");t.b("\n" + i);t.b("
    ");t.b("\n" + i);t.b("
      ");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("files",c,p,0)));t.b("\n" + i);t.b("
    ");t.b("\n" + i);t.b("");return t.fl(); },partials: {}, subs: { }}); global.browserTemplates["generic-column-line-number"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("
    ");t.b(t.t(t.f("blockHeader",c,p,0)));t.b("
    ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("");return t.fl(); },partials: {}, subs: { }}); global.browserTemplates["generic-empty-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("
    ");t.b("\n" + i);t.b(" File without changes");t.b("\n" + i);t.b("
    ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("");return t.fl(); },partials: {}, subs: { }}); -global.browserTemplates["generic-file-path"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("");t.b("\n" + i);t.b(" ");t.b(t.rp("");t.b("\n" + i);t.b(" ");t.b(t.v(t.f("fileDiffName",c,p,0)));t.b("");t.b("\n" + i);t.b(t.rp("");return t.fl(); },partials: {"");t.b("\n" + i);t.b(t.rp("");t.b(t.v(t.f("fileDiffName",c,p,0)));t.b("");t.b("\n" + i);t.b(t.rp("");return t.fl(); },partials: {"");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("lineNumber",c,p,0)));t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("
    ");t.b("\n" + i);if(t.s(t.f("prefix",c,p,1),c,p,0,171,247,"{{ }}")){t.rs(c,p,function(c,p,t){t.b(" ");t.b(t.t(t.f("prefix",c,p,0)));t.b("");t.b("\n" + i);});c.pop();}if(t.s(t.f("content",c,p,1),c,p,0,279,353,"{{ }}")){t.rs(c,p,function(c,p,t){t.b(" ");t.b(t.t(t.f("content",c,p,0)));t.b("");t.b("\n" + i);});c.pop();}t.b("
    ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("");return t.fl(); },partials: {}, subs: { }}); global.browserTemplates["generic-wrapper"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("
    ");t.b("\n" + i);t.b(" ");t.b(t.t(t.f("content",c,p,0)));t.b("\n" + i);t.b("
    ");return t.fl(); },partials: {}, subs: { }}); global.browserTemplates["icon-file-added"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("");return t.fl(); },partials: {}, subs: { }}); diff --git a/src/templates/file-summary-line.mustache b/src/templates/file-summary-line.mustache index 27d373b..6202ebf 100644 --- a/src/templates/file-summary-line.mustache +++ b/src/templates/file-summary-line.mustache @@ -1,6 +1,6 @@
  • - {{>fileIcon}} + {{>fileIcon}} {{fileName}} {{addedLines}} diff --git a/src/templates/generic-file-path.mustache b/src/templates/generic-file-path.mustache index cc71b18..92eaaa7 100644 --- a/src/templates/generic-file-path.mustache +++ b/src/templates/generic-file-path.mustache @@ -1,5 +1,5 @@ - {{>fileIcon}} + {{>fileIcon}} {{fileDiffName}} {{>fileTag}} diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css index f04757c..b3cacb1 100644 --- a/src/ui/css/diff2html.css +++ b/src/ui/css/diff2html.css @@ -10,6 +10,7 @@ } .d2h-file-header { + height: 35px; padding: 5px 10px; border-bottom: 1px solid #d8d8d8; background-color: #f7f7f7; @@ -58,7 +59,6 @@ white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; - line-height: 21px; } .d2h-file-wrapper { @@ -76,7 +76,7 @@ .d2h-diff-tbody > tr > td { height: 20px; - line-height: 20px; + line-height: 1; } .d2h-files-diff { @@ -103,14 +103,12 @@ display: inline-block; white-space: nowrap; padding: 0 10px; - margin-left: 80px; } .d2h-code-side-line { display: inline-block; white-space: nowrap; padding: 0 10px; - margin-left: 50px; } .d2h-code-line del, @@ -168,7 +166,6 @@ .d2h-code-linenumber { box-sizing: border-box; - position: absolute; width: 86px; padding-left: 2px; padding-right: 2px; @@ -182,7 +179,6 @@ .d2h-code-side-linenumber { box-sizing: border-box; - position: absolute; width: 56px; padding-left: 5px; padding-right: 5px; @@ -285,10 +281,6 @@ cursor: pointer; } -.d2h-icon-wrapper { - line-height: 31px; -} - .d2h-icon { vertical-align: middle; margin-right: 10px; diff --git a/test/diff2html-tests.js b/test/diff2html-tests.js index 84258b9..23e83da 100644 --- a/test/diff2html-tests.js +++ b/test/diff2html-tests.js @@ -57,11 +57,10 @@ var filesExample1 = '
      \n' + '
    1. \n' + ' \n' + - ' \n' + - ' sample\n' + + ' sample\n' + ' \n' + ' +1\n' + ' -1\n' + @@ -76,10 +75,9 @@ var htmlLineExample1 = '
      \n' + '
      \n' + ' \n' + - ' \n' + - ' sample\n' + + ' sample\n' + ' CHANGED\n' + '
      \n' + '
      \n' + @@ -128,10 +126,9 @@ var htmlSideExample1 = '
      \n' + '
      \n' + ' \n' + - ' \n' + - ' sample\n' + + ' sample\n' + ' CHANGED\n' + '
      \n' + '
      \n' + @@ -317,10 +314,9 @@ describe('Diff2Html', function() { '
      \n' + '
      \n' + ' \n' + - ' \n' + - ' CHANGELOG.md\n' + + ' CHANGELOG.md\n' + ' CHANGED\n' + '
      \n' + '
      \n' + diff --git a/test/file-list-printer-tests.js b/test/file-list-printer-tests.js index 60ea320..6528fe1 100644 --- a/test/file-list-printer-tests.js +++ b/test/file-list-printer-tests.js @@ -45,11 +45,10 @@ describe('FileListPrinter', function() { '
        \n' + '
      1. \n' + ' \n' + - ' \n' + - ' my/file/name.js\n' + + ' my/file/name.js\n' + ' \n' + ' +12\n' + ' -41\n' + @@ -58,11 +57,10 @@ describe('FileListPrinter', function() { '
        2. \n' + '
      2. \n' + ' \n' + - ' \n' + - ' my/file/{name1.js → name2.js}\n' + + ' my/file/{name1.js → name2.js}\n' + ' \n' + ' +12\n' + ' -41\n' + @@ -71,11 +69,10 @@ describe('FileListPrinter', function() { '
        3. \n' + '
      3. \n' + ' \n' + - ' \n' + - ' my/file/name.js\n' + + ' my/file/name.js\n' + ' \n' + ' +12\n' + ' -0\n' + @@ -84,11 +81,10 @@ describe('FileListPrinter', function() { '
        4. \n' + '
      4. \n' + ' \n' + - ' \n' + - ' my/file/name.js\n' + + ' my/file/name.js\n' + ' \n' + ' +0\n' + ' -41\n' + diff --git a/test/line-by-line-tests.js b/test/line-by-line-tests.js index 483bd97..767e959 100644 --- a/test/line-by-line-tests.js +++ b/test/line-by-line-tests.js @@ -152,10 +152,9 @@ describe('LineByLinePrinter', function() { '
        \n' + '
        \n' + ' \n' + - ' \n' + - ' my/file/name.js\n' + + ' my/file/name.js\n' + ' CHANGED\n' + '
        \n' + '
        \n' + @@ -190,10 +189,9 @@ describe('LineByLinePrinter', function() { '
        \n' + '
        \n' + ' \n' + - ' \n' + - ' my/file/name.js\n' + + ' my/file/name.js\n' + ' ADDED\n' + '
        \n' + '
        \n' + @@ -228,10 +226,9 @@ describe('LineByLinePrinter', function() { '
        \n' + '
        \n' + ' \n' + - ' \n' + - ' my/file/name.js\n' + + ' my/file/name.js\n' + ' DELETED\n' + '
        \n' + '
        \n' + @@ -266,10 +263,9 @@ describe('LineByLinePrinter', function() { '
        \n' + '
        \n' + ' \n' + - ' \n' + - ' my/file/{name1.js → name2.js}\n' + + ' my/file/{name1.js → name2.js}\n' + ' RENAMED\n' + '
        \n' + '
        \n' + @@ -345,10 +341,9 @@ describe('LineByLinePrinter', function() { '
        \n' + '
        \n' + ' \n' + - ' \n' + - ' sample\n' + + ' sample\n' + ' CHANGED\n' + '
        \n' + '
        \n' + @@ -411,10 +406,9 @@ describe('LineByLinePrinter', function() { '
        \n' + '
        \n' + ' \n' + - ' \n' + - ' sample\n' + + ' sample\n' + ' CHANGED\n' + '
        \n' + '
        \n' + diff --git a/test/side-by-side-printer-tests.js b/test/side-by-side-printer-tests.js index ac211e9..eb2e4ef 100644 --- a/test/side-by-side-printer-tests.js +++ b/test/side-by-side-printer-tests.js @@ -237,10 +237,9 @@ describe('SideBySidePrinter', function() { '
        \n' + '
        \n' + ' \n' + - ' \n' + - ' sample\n' + + ' sample\n' + ' CHANGED\n' + '
        \n' + '
        \n' + @@ -314,10 +313,9 @@ describe('SideBySidePrinter', function() { '
        \n' + '
        \n' + ' \n' + - ' \n' + - ' sample\n' + + ' sample\n' + ' CHANGED\n' + '
        \n' + '
        \n' +