From 7c48e86a9938aa0767c5cb4ec7222b2170c95011 Mon Sep 17 00:00:00 2001
From: Rodrigo Fernandes <rtfrodrigo@gmail.com>
Date: Sun, 15 May 2016 23:43:51 +0100
Subject: [PATCH] Add icons and tags to files indicating the type of change

---
 src/file-list-printer.js                      | 10 +++-
 src/hoganjs-utils.js                          | 12 ++--
 src/line-by-line-printer.js                   | 13 ++++-
 src/printer-utils.js                          | 19 +++++++
 src/templates/diff2html-templates.js          | 13 ++++-
 src/templates/file-summary-line.mustache      |  6 +-
 src/templates/icon-file-added.mustache        |  4 ++
 src/templates/icon-file-changed.mustache      |  4 ++
 src/templates/icon-file-deleted.mustache      |  4 ++
 src/templates/icon-file-renamed.mustache      |  4 ++
 src/templates/icon-file.mustache              |  3 +
 src/templates/line-by-line-file-diff.mustache | 11 +---
 src/templates/tag-file-added.mustache         |  1 +
 src/templates/tag-file-changed.mustache       |  1 +
 src/templates/tag-file-deleted.mustache       |  1 +
 src/templates/tag-file-renamed.mustache       |  1 +
 src/ui/css/diff2html.css                      | 55 ++++++++++++++++---
 17 files changed, 132 insertions(+), 30 deletions(-)
 create mode 100644 src/templates/icon-file-added.mustache
 create mode 100644 src/templates/icon-file-changed.mustache
 create mode 100644 src/templates/icon-file-deleted.mustache
 create mode 100644 src/templates/icon-file-renamed.mustache
 create mode 100644 src/templates/icon-file.mustache
 create mode 100644 src/templates/tag-file-added.mustache
 create mode 100644 src/templates/tag-file-changed.mustache
 create mode 100644 src/templates/tag-file-deleted.mustache
 create mode 100644 src/templates/tag-file-renamed.mustache

diff --git a/src/file-list-printer.js b/src/file-list-printer.js
index 5b6d8ff..18ccbbe 100644
--- a/src/file-list-printer.js
+++ b/src/file-list-printer.js
@@ -11,17 +11,25 @@
 
   var hoganUtils = require('./hoganjs-utils.js').HoganJsUtils;
   var baseTemplatesPath = 'file-summary';
+  var iconsBaseTemplatesPath = 'icon';
 
   function FileListPrinter() {
   }
 
   FileListPrinter.prototype.generateFileList = function(diffFiles) {
+    var lineTemplate = hoganUtils.template(baseTemplatesPath, 'line');
+
     var files = diffFiles.map(function(file) {
-      return hoganUtils.render(baseTemplatesPath, 'line', {
+      var fileTypeName = printerUtils.getFileTypeIcon(file);
+      var iconTemplate = hoganUtils.template(iconsBaseTemplatesPath, fileTypeName);
+
+      return lineTemplate.render({
         fileHtmlId: printerUtils.getHtmlId(file),
         fileName: printerUtils.getDiffName(file),
         deletedLines: '-' + file.deletedLines,
         addedLines: '+' + file.addedLines
+      }, {
+        fileIcon: iconTemplate
       });
     }).join('\n');
 
diff --git a/src/hoganjs-utils.js b/src/hoganjs-utils.js
index 0f050d7..70a5d12 100644
--- a/src/hoganjs-utils.js
+++ b/src/hoganjs-utils.js
@@ -20,10 +20,7 @@
   }
 
   HoganJsUtils.prototype.render = function(namespace, view, params, configuration) {
-    var config = configuration || {};
-    var templateKey = this._templateKey(namespace, view);
-
-    var template = this._getTemplate(templateKey, config);
+    var template = this.template(namespace, view, configuration);
     if (template) {
       return template.render(params);
     }
@@ -31,6 +28,13 @@
     return null;
   };
 
+  HoganJsUtils.prototype.template = function(namespace, view, configuration) {
+    var config = configuration || {};
+    var templateKey = this._templateKey(namespace, view);
+
+    return this._getTemplate(templateKey, config);
+  };
+
   HoganJsUtils.prototype._getTemplate = function(templateKey, config) {
     var template;
 
diff --git a/src/line-by-line-printer.js b/src/line-by-line-printer.js
index 401cb22..6086bec 100644
--- a/src/line-by-line-printer.js
+++ b/src/line-by-line-printer.js
@@ -14,18 +14,27 @@
 
   var hoganUtils = require('./hoganjs-utils.js').HoganJsUtils;
   var baseTemplatesPath = 'line-by-line';
+  var iconsBaseTemplatesPath = 'icon';
+  var tagsBaseTemplatesPath = 'tag';
 
   function LineByLinePrinter(config) {
     this.config = config;
   }
 
   LineByLinePrinter.prototype.makeFileDiffHtml = function(file, diffs) {
-    return hoganUtils.render(baseTemplatesPath, 'file-diff', {
+    var fileDiffTemplate = hoganUtils.template(baseTemplatesPath, 'file-diff');
+    var fileIconTemplate = hoganUtils.template(iconsBaseTemplatesPath, 'file');
+    var fileTagTemplate = hoganUtils.template(tagsBaseTemplatesPath, printerUtils.getFileTypeIcon(file));
+
+    return fileDiffTemplate.render({
       file: file,
       fileDiffName: printerUtils.getDiffName(file),
       fileHtmlId: printerUtils.getHtmlId(file),
       diffs: diffs
-    });
+    }, {
+      fileIcon: fileIconTemplate,
+      fileTag: fileTagTemplate
+    })
   };
 
   LineByLinePrinter.prototype.makeLineByLineHtmlWrapper = function(content) {
diff --git a/src/printer-utils.js b/src/printer-utils.js
index adf879e..1add31c 100644
--- a/src/printer-utils.js
+++ b/src/printer-utils.js
@@ -95,6 +95,25 @@
     return 'unknown/file/path';
   };
 
+  PrinterUtils.prototype.getFileTypeIcon = function(file) {
+    var templateName = 'file-changed';
+
+    if (file.isRename) {
+      templateName = 'file-renamed';
+    } else if (file.isCopy) {
+      templateName = 'file-renamed';
+    } else if (file.isNew) {
+      templateName = 'file-added';
+    } else if (file.isDeleted) {
+      templateName = 'file-deleted';
+    } else if (file.newName !== file.oldName) {
+      // If file is not Added, not Deleted and the names changed it must be a rename :)
+      templateName = 'file-renamed';
+    }
+
+    return templateName;
+  };
+
   PrinterUtils.prototype.diffHighlight = function(diffLine1, diffLine2, config) {
     var linePrefix1, linePrefix2, unprefixedLine1, unprefixedLine2;
 
diff --git a/src/templates/diff2html-templates.js b/src/templates/diff2html-templates.js
index 6b11375..0dd9b78 100644
--- a/src/templates/diff2html-templates.js
+++ b/src/templates/diff2html-templates.js
@@ -1,11 +1,20 @@
 (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("<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: {  }});
+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(t.rp("<fileIcon0",c,p,""));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: {"<fileIcon0":{name:"fileIcon", partials: {}, subs: {  }}}, 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["icon-file-added"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon d2h-added\" height=\"16\" title=\"added\" version=\"1.1\" viewBox=\"0 0 14 16\"");t.b("\n" + i);t.b("     width=\"14\">");t.b("\n" + i);t.b("    <path d=\"M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM6 9H3V7h3V4h2v3h3v2H8v3H6V9z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["icon-file-changed"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon d2h-changed\" height=\"16\" title=\"modified\" version=\"1.1\"");t.b("\n" + i);t.b("     viewBox=\"0 0 14 16\" width=\"14\">");t.b("\n" + i);t.b("    <path d=\"M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["icon-file-deleted"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon d2h-deleted\" height=\"16\" title=\"removed\" version=\"1.1\"");t.b("\n" + i);t.b("     viewBox=\"0 0 14 16\" width=\"14\">");t.b("\n" + i);t.b("    <path d=\"M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM11 9H3V7h8v2z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["icon-file-renamed"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon d2h-moved\" height=\"16\" title=\"renamed\" version=\"1.1\"");t.b("\n" + i);t.b("     viewBox=\"0 0 14 16\" width=\"14\">");t.b("\n" + i);t.b("    <path d=\"M6 9H3V7h3V4l5 4-5 4V9z m8-7v12c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h12c0.55 0 1 0.45 1 1z m-1 0H1v12h12V2z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["icon-file"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=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>");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-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-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(t.rp("<fileIcon0",c,p,""));t.b("</span>");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(t.rp("<fileTag1",c,p,"      "));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: {"<fileIcon0":{name:"fileIcon", partials: {}, subs: {  }},"<fileTag1":{name:"fileTag", partials: {}, subs: {  }}}, 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: {  }});
+global.browserTemplates["tag-file-added"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-tag d2h-added d2h-added-tag\">ADDED</span>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["tag-file-changed"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-tag d2h-changed d2h-changed-tag\">CHANGED</span>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["tag-file-deleted"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-tag d2h-deleted d2h-deleted-tag\">DELETED</span>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["tag-file-renamed"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-tag d2h-moved d2h-moved-tag\">RENAMED</span>");return t.fl(); },partials: {}, subs: {  }});
 module.exports = global.browserTemplates;
 })();
diff --git a/src/templates/file-summary-line.mustache b/src/templates/file-summary-line.mustache
index d4cae43..279d3f4 100644
--- a/src/templates/file-summary-line.mustache
+++ b/src/templates/file-summary-line.mustache
@@ -1,10 +1,6 @@
 <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>
+      <span>{{>fileIcon}}</span>
       <a href="{{fileHtmlId}}" class="d2h-file-name">{{fileName}}</a>
     </span>
     <span class="d2h-file-stats">
diff --git a/src/templates/icon-file-added.mustache b/src/templates/icon-file-added.mustache
new file mode 100644
index 0000000..cf855b9
--- /dev/null
+++ b/src/templates/icon-file-added.mustache
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" class="d2h-icon d2h-added" height="16" title="added" version="1.1" viewBox="0 0 14 16"
+     width="14">
+    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM6 9H3V7h3V4h2v3h3v2H8v3H6V9z"></path>
+</svg>
diff --git a/src/templates/icon-file-changed.mustache b/src/templates/icon-file-changed.mustache
new file mode 100644
index 0000000..19a150e
--- /dev/null
+++ b/src/templates/icon-file-changed.mustache
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
+     viewBox="0 0 14 16" width="14">
+    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>
+</svg>
diff --git a/src/templates/icon-file-deleted.mustache b/src/templates/icon-file-deleted.mustache
new file mode 100644
index 0000000..fc3b8f4
--- /dev/null
+++ b/src/templates/icon-file-deleted.mustache
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" class="d2h-icon d2h-deleted" height="16" title="removed" version="1.1"
+     viewBox="0 0 14 16" width="14">
+    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM11 9H3V7h8v2z"></path>
+</svg>
diff --git a/src/templates/icon-file-renamed.mustache b/src/templates/icon-file-renamed.mustache
new file mode 100644
index 0000000..1bf266d
--- /dev/null
+++ b/src/templates/icon-file-renamed.mustache
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" class="d2h-icon d2h-moved" height="16" title="renamed" version="1.1"
+     viewBox="0 0 14 16" width="14">
+    <path d="M6 9H3V7h3V4l5 4-5 4V9z m8-7v12c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h12c0.55 0 1 0.45 1 1z m-1 0H1v12h12V2z"></path>
+</svg>
diff --git a/src/templates/icon-file.mustache b/src/templates/icon-file.mustache
new file mode 100644
index 0000000..514972c
--- /dev/null
+++ b/src/templates/icon-file.mustache
@@ -0,0 +1,3 @@
+<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>
diff --git a/src/templates/line-by-line-file-diff.mustache b/src/templates/line-by-line-file-diff.mustache
index c711788..23efff8 100644
--- a/src/templates/line-by-line-file-diff.mustache
+++ b/src/templates/line-by-line-file-diff.mustache
@@ -1,14 +1,9 @@
 <div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
     <div class="d2h-file-header">
     <span class="d2h-file-name-wrapper">
-      <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 class="d2h-icon-wrapper">{{>fileIcon}}</span>
+      <span class="d2h-file-name">{{fileDiffName}}</span>
+      {{>fileTag}}
     </span>
     </div>
     <div class="d2h-file-diff">
diff --git a/src/templates/tag-file-added.mustache b/src/templates/tag-file-added.mustache
new file mode 100644
index 0000000..3c32eb0
--- /dev/null
+++ b/src/templates/tag-file-added.mustache
@@ -0,0 +1 @@
+<span class="d2h-tag d2h-added d2h-added-tag">ADDED</span>
diff --git a/src/templates/tag-file-changed.mustache b/src/templates/tag-file-changed.mustache
new file mode 100644
index 0000000..5e83001
--- /dev/null
+++ b/src/templates/tag-file-changed.mustache
@@ -0,0 +1 @@
+<span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span>
diff --git a/src/templates/tag-file-deleted.mustache b/src/templates/tag-file-deleted.mustache
new file mode 100644
index 0000000..f1aed8b
--- /dev/null
+++ b/src/templates/tag-file-deleted.mustache
@@ -0,0 +1 @@
+<span class="d2h-tag d2h-deleted d2h-deleted-tag">DELETED</span>
diff --git a/src/templates/tag-file-renamed.mustache b/src/templates/tag-file-renamed.mustache
new file mode 100644
index 0000000..9a67397
--- /dev/null
+++ b/src/templates/tag-file-renamed.mustache
@@ -0,0 +1 @@
+<span class="d2h-tag d2h-moved d2h-moved-tag">RENAMED</span>
diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index abab8d5..e02efe4 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -16,17 +16,13 @@
 }
 
 .d2h-file-stats {
-  display: block;
-  text-align: center;
-  float: right;
+  display: flex;
+  margin-left: auto;
   font-size: 14px;
-  top: 2px;
-  position: relative;
 }
 
 .d2h-lines-added {
   text-align: right;
-  /*background-color: #ceffce;*/
   border: 1px solid #b4e2b4;
   border-radius: 5px 0 0 5px;
   color: #399839;
@@ -36,19 +32,21 @@
 
 .d2h-lines-deleted {
   text-align: left;
-  /*background-color: #f7c8c8;*/
   border: 1px solid #e9aeae;
   border-radius: 0 5px 5px 0;
   color: #c33;
   padding: 2px;
   vertical-align: middle;
+  margin-left: 1px;
 }
 
 .d2h-file-name-wrapper {
-  display: inline-flex;
+  display: flex;
+  align-items: center;
   width: 90%;
   font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 15px;
+  line-height: 15px;
 }
 
 .d2h-file-name {
@@ -249,6 +247,7 @@
 }
 
 .d2h-file-list-line {
+  display: flex;
   text-align: left;
 }
 
@@ -286,6 +285,46 @@
 .d2h-icon {
   vertical-align: middle;
   margin-right: 10px;
+  fill: currentColor;
+}
+
+.d2h-deleted {
+  color: #c33;
+}
+
+.d2h-added {
+  color: #399839;
+}
+
+.d2h-changed {
+  color: #d0b44c;
+}
+
+.d2h-moved {
+  color: #3572b0;
+}
+
+.d2h-tag {
+  display: flex;
+  font-size: 10px;
+  margin-left: 5px;
+  padding: 0 2px;
+}
+
+.d2h-deleted-tag {
+  border: #c33 1px solid;
+}
+
+.d2h-added-tag {
+  border: #399839 1px solid;
+}
+
+.d2h-changed-tag {
+  border: #d0b44c 1px solid;
+}
+
+.d2h-moved-tag {
+  border: #3572b0 1px solid;
 }
 
 /*