Show line numbers for diffs in the commit view

lib/GitList/Component/Git/Model/Diff.php

@@ -12,9 +12,9 @@ class Diff
     protected $new;
     protected $file;
 
-    public function addLine($line)
+    public function addLine($line, $oldNo, $newNo)
     {
-        $this->lines[] = new Line($line);
+        $this->lines[] = new DiffLine($line, $oldNo, $newNo);
     }
 
     public function getLines()

lib/GitList/Component/Git/Repository.php

@@ -342,6 +342,8 @@ class Repository
         }
 
         // Read diff logs
+        $lineNumOld = 0;
+        $lineNumNew = 0;
         foreach ($logs as $log) {
             if ('diff' === substr($log, 0, 4)) {
                 if (isset($diff)) {
@@ -378,7 +380,30 @@ class Repository
                 }
             }
 
-            $diff->addLine($log);
+            if (!empty($log)) {
+                switch ($log[0]) {
+                    case "@":
+                        // Set the line numbers
+                        preg_match('/@@ -([0-9]+)/', $log, $matches);
+                        $lineNumOld = $matches[1] - 1;
+                        $lineNumNew = $matches[1] - 1;
+                        break;
+                    case "-":
+                        $lineNumOld++;
+                        break;
+                    case "+":
+                        $lineNumNew++;
+                        break;
+                    default:
+                        $lineNumOld++;
+                        $lineNumNew++;
+                }
+            } else {
+                $lineNumOld++;
+                $lineNumNew++;
+            }
+
+            $diff->addLine($log, $lineNumOld, $lineNumNew);
         }
 
         if (isset($diff)) {

views/commit.twig

@@ -35,9 +35,17 @@
         </div>
 
         <div class="source-diff">
-        {% for line in diff.lines %}
+        <table>
-            <pre{% if line.type %} class="{{ line.type }}"{% endif %}>{{ line.line }}</pre>
+        {% for line in diff.getLines %}
+            <tr>
+                <td class="lineNo">{{ line.getNumOld }}</td>
+                <td class="lineNo">{{ line.getNumNew }}</td>
+                <td style="width: 100%">
+                    <pre{% if line.getType %} class="{{ line.getType }}"{% endif %}>{{ line.getLine }}</pre>
+                </td>
+            </tr>
         {% endfor %}
+        </table>
         </div>
     </div>
     {% endfor %}

web/css/style.css

@@ -254,10 +254,12 @@ table .span24{float:none;width:1884px;margin-left:0;}
 .source-view{width:100%;margin-bottom:18px;border:1px solid #cacaca;}.source-view .source-header{padding:8px;line-height:18px;text-align:left;vertical-align:bottom;background-color:#f4f4f4;background-image:-moz-linear-gradient(top, #fafafa, #eaeaea);background-image:-ms-linear-gradient(top, #fafafa, #eaeaea);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#eaeaea));background-image:-webkit-linear-gradient(top, #fafafa, #eaeaea);background-image:-o-linear-gradient(top, #fafafa, #eaeaea);background-image:linear-gradient(top, #fafafa, #eaeaea);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#eaeaea', GradientType=0);border-bottom:1px solid #d7d7d7;font-weight:bold;color:#555555;text-shadow:1px 1px 1px #ffffff;height:28px;}.source-view .source-header .meta{float:left;padding:4px 0;font-size:14px;}
 .source-view pre{margin:0;padding:12px;border:none;}
 .source-view #sourcecode{margin:0;padding:0;border:none;width:100%;height:600px;}
-.source-view .source-diff{background-color:#f5f5f5;padding:12px;}.source-view .source-diff pre{margin:0;padding:0;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
+.source-view .source-diff{background-color:#f5f5f5;}.source-view .source-diff pre{margin:0;padding:0 0 0 6px;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.source-view .source-diff pre:hover{background-color:#ffc;}
+.source-view .source-diff table td{padding:0px;}
 .source-view .source-diff .new{background-color:#DFD;}
 .source-view .source-diff .old{background-color:#FDD;}
 .source-view .source-diff .chunk{background-color:#e8e8e8;color:#999999;}
+.source-view .source-diff .lineNo{color:#aaa;background-color:#e8e8e8;padding:0 6px;text-align:right;border-right:1px solid #ddd;font-family:monospace;}
 .source-view .image-blob{padding:10px;max-width:600px;}
 .blame-view{width:100%;background-color:#f5f5f5;}.blame-view td{vertical-align:top;padding:8px;}
 .blame-view tr{border-bottom:1px solid #cccccc;}

web/less/files.less

@@ -34,12 +34,18 @@
   }
   .source-diff {
     background-color: #f5f5f5;
-    padding:12px;
     pre {
       margin: 0;
-      padding: 0;
+      padding: 0 0 0 6px;
       border: none;
       .border-radius(0);
+
+      &:hover {
+        background-color: #ffc;
+      }
+    }
+    table td {
+      padding: 0px;
     }
     .new {
       background-color:#DFD;
@@ -51,6 +57,14 @@
       background-color:darken(#f5f5f5, 5%);
       color:@grayLight;
     }
+    .lineNo {
+      color: #aaa;
+      background-color: #e8e8e8;
+      padding: 0 6px;
+      text-align: right;
+      border-right: 1px solid #ddd;
+      font-family: monospace;
+    }
   }
   .image-blob {
     padding:10px;