Add graphical diffstat to commit view

The diffstat is calculated against the leftmost parent of the commit. This
gives nice information for "normal" merges while octopus merges are less
than optimal, so the diffstat isn't calculated for those merges.

Signed-off-by: Lars Hjemli <hjemli@gmail.com>

1 files changed, 28 insertions, 2 deletions

diff --git a/cgit.css b/cgit.css
index cded981..b736b19 100644
--- a/cgit.css
+++ b/cgit.css
@@ -1,76 +1,83 @@
 body {
         font-family: arial;
         font-size: 11pt;
         background: white;
 }
 
 body, table {
         padding: 0em;
         margin: 0em;
 }
 
 table {
       border-collapse: collapse;
 }
 
 h2 {
         font-size: 120%;
         font-weight: bold;
         margin-top: 0em;
         margin-bottom: 0.25em;
 }
 
 h3 {
         margin-top: 0em;
         font-size: 100%;
         font-weight: normal;
 }
 
+h4 {
+        margin-top: 1.5em;
+        margin-bottom: 0.1em;
+        font-size: 100%;
+        font-weight: bold;
+}
+
 a {
         color: blue;
         text-decoration: none;
 }
 
 a:hover {
         text-decoration: underline;
 }
 
 table.list {
         border: none;
         border-collapse: collapse;
 }
 
 table.list tr {
         background: white;
 }
 
 table.list tr:hover {
         background: #eee;
 }
 
 table.list tr.nohover:hover {
         background: white;
 }
 
 table.list th {
         font-weight: normal;
         border-bottom: solid 1px #777;
         padding: 0.1em 0.5em 0.1em 0.5em;
         vertical-align: baseline;
 }
 
 table.list td {
         border: none;
         padding: 0.1em 0.5em 0.1em 0.5em;
 }
 
 img {
         border: none;
 }
 
 table#layout {
         width: 100%;
         border-collapse: collapse;
         margin: 0px;
 }
 
@@ -182,115 +189,134 @@ td.filesize {
         font-family: monospace;
 }
 
 td.filemode {
         font-family: monospace;
 }
 
 td.blob {
         white-space: pre;
         font-family: monospace;
         background-color: white;
 }
 
 table.nowrap td {
         white-space: nowrap;
 }
 
 table.commit-info {
         border-collapse: collapse;
         margin-top: 1.5em;
 }
 
 table.commit-info th {
         text-align: left;
         font-weight: normal;
         padding: 0.1em 1em 0.1em 0.1em;
 }
 
 table.commit-info td {
         font-weight: normal;
         padding: 0.1em 1em 0.1em 0.1em;
 }
 
 div.commit-subject {
         font-weight: bold;
         font-size: 125%;
         margin: 1.5em 0em 0.5em 0em;
         padding: 0em;
 }
 
 div.commit-msg {
         white-space: pre;
         font-family: monospace;
 }
 
 table.diffstat {
         border-collapse: collapse;
         margin-top: 1.5em;
+        width: 100%;
+        border: solid 1px #aaa;
+}
+
+table.diffstat tr:hover {
+        background-color: #eee;
 }
 
 table.diffstat th {
         font-weight: normal;
         text-align: left;
         text-decoration: underline;
         padding: 0.1em 1em 0.1em 0.1em;
         font-size: 100%;
 }
 
 table.diffstat td {
-        padding: 0.1em 1em 0.1em 0.1em;
+        padding: 0.2em 0.2em 0.1em 0.1em;
         font-size: 100%;
+        border: none;
+        border-top: solid 1px #aaa;
+        border-bottom: solid 1px #aaa;
 }
 
 table.diffstat td span.modechange {
         padding-left: 1em;
         color: red;
 }
 
 table.diffstat td.add a {
         color: green;
 }
 
 table.diffstat td.del a {
         color: red;
 }
 
 table.diffstat td.upd a {
         color: blue;
 }
 
-table.diffstat td.summary {
+table.diffstat td.graph {
+        width: 75%;
+        vertical-align: center;
+}
+
+table.diffstat td.graph img {
+        border: none;
+        height: 11pt;
+}
+
+div.diffstat-summary {
         color: #888;
         padding-top: 0.5em;
 }
 
 table.diff td {
         border: solid 1px black;
         font-family: monospace;
         white-space: pre;
 }
 
 table.diff td div.hunk {
         background: #ccc;
 }
 
 table.diff td div.add {
         color: green;
 }
 
 table.diff td div.del {
         color: red;
 }
 
 .sha1 {
         font-family: courier;
         font-size: 90%;
 }
 
 .left {
         text-align: left;
 }
 
 .right {
         text-align: right;
 }