css for diff

Author: alexandresalome

src/Gitonomy/Browser/Resources/views/git/default_theme.html.twig

@@ -100,6 +100,7 @@
                 {{ git_render('diff_file', {file: file}) }}
             </div>
         {% endfor %}
+    </div>
 {% endspaceless %}
 {% endblock %}
 
@@ -153,6 +154,7 @@
 
 {% block diff_file %}
 {% spaceless %}
+    <header>
         {% if file.oldName == file.newName and file.oldMode == file.newMode %}
             <span class="file">{{ file.oldName }}</span>
         {% elseif file.oldName == null %}
@@ -166,40 +168,32 @@
                 <li>{{ file.oldName }} ({{ file.oldMode }}) -&gt; {{ file.newName }} ({{ file.newMode }})</li>
             </ul>
         {% endif %}
-        {% if not file.binary %}
-            <div class="btn-group pull-right">
-                <a rel="tooltip" title="{{ 'label.button.old'|trans }}" class="btn btn-small show-old"><i class="icon-chevron-left"></i></a>
-                <a rel="tooltip" title="{{ 'label.button.diff'|trans }}" disabled="disabled" class="btn btn-small show-diff"><i class="icon-eye-close"></i></a>
-                <a rel="tooltip" title="{{ 'label.button.new'|trans }}" class="btn btn-small show-new"><i class="icon-chevron-right"></i></a>
-                {% if reference|default(null) and slug|default(null) %}
-                    <a rel="tooltip" data-placement="left" title="{{ 'label.button.full_file'|trans }}" class="btn btn-small" href="{{ path('project_tree', {slug: slug, reference: reference, path: file.name}) }}"><i class="icon-file"></i></a>
-                {% endif %}
-            </div>
-        {% endif %}
     </header>
     <div class="file-changes">
-        {% for change in file.changes %}
-            {% if not loop.first %}
-                <tr><td class="skip" colspan="3">&nbsp;</td></tr>
-            {% endif %}
-            {% set old = change.rangeOldStart %}
-            {% set new = change.rangeNewStart %}
-            {%- for x, line in change.lines -%}
-                <tr class="{{ line[0] == 1 ? 'new' : line[0] == -1 ? 'old' : '' }}">
-                    <td class="old">{{ line[0] != 1 ? old : ' ' }}</td>
-                    <td class="new">{{ line[0] != -1 ? new : ' ' }}</td>
-                    <td class="{{ line[0] == 1 ? 'plus' : line[0] == -1 ? 'minus' : '' }} source"><pre>{{ line[1] }}</pre></td>
-                </tr>
-                {%- if line[0] == 1 -%}
-                    {%- set new = new + 1 -%}
-                {%- elseif line[0] == -1 -%}
-                    {%- set old = old + 1 -%}
-                {%- else -%}
-                    {%- set new = new + 1 -%}
-                    {%- set old = old + 1 -%}
-                {%- endif -%}
-            {%- endfor -%}
-        {% endfor %}
+        <table class="diff-lines">
+            {% for change in file.changes %}
+                {% if not loop.first %}
+                    <tr><td class="skip" colspan="3">&nbsp;</td></tr>
+                {% endif %}
+                {% set old = change.rangeOldStart %}
+                {% set new = change.rangeNewStart %}
+                {%- for x, line in change.lines -%}
+                    <tr class="{{ line[0] == 1 ? 'new' : line[0] == -1 ? 'old' : '' }}">
+                        <td class="old">{{ line[0] != 1 ? old : ' ' }}</td>
+                        <td class="new">{{ line[0] != -1 ? new : ' ' }}</td>
+                        <td class="{{ line[0] == 1 ? 'plus' : line[0] == -1 ? 'minus' : '' }} source"><pre>{{ line[1] }}</pre></td>
+                    </tr>
+                    {%- if line[0] == 1 -%}
+                        {%- set new = new + 1 -%}
+                    {%- elseif line[0] == -1 -%}
+                        {%- set old = old + 1 -%}
+                    {%- else -%}
+                        {%- set new = new + 1 -%}
+                        {%- set old = old + 1 -%}
+                    {%- endif -%}
+                {%- endfor -%}
+            {% endfor %}
+        </table>
     </div>
 {% endspaceless %}
 {% endblock %}

src/Gitonomy/Browser/Resources/views/layout.html.twig

@@ -2,6 +2,7 @@
 <html>
     <head>
         <title>{% block title '' %}</title>
+        <link rel="stylesheet" href="{{ app.request.basepath }}/css/git/diff.css" />
         <link rel="stylesheet" href="{{ app.request.basepath }}/css/git/log.css" />
         <link rel="stylesheet" href="{{ app.request.basepath }}/css/layout.css" />
     </head>

web/css/git/diff.css

@@ -0,0 +1,60 @@
+.git-diff .file {
+  margin-top: 10px;
+}
+
+.git-diff .file > header {
+  background-color: #efefef;
+  padding: 10px;
+}
+
+.git-diff .file > header span.file {
+  font-weight: bold;
+}
+
+
+.git-diff .file > header span.file.deleted {
+  font-weight: normal;
+  text-decoration: line-through;
+}
+
+
+.git-diff table.diff-lines {
+  border-spacing: 0;
+  border-collapse: collapse;
+  border: 1px solid #dfdfdf;
+  width: 100%;
+}
+
+.git-diff table.diff-lines td {
+  font-family: monospace;
+}
+
+.git-diff table.diff-lines td.old, .git-diff table.diff-lines td.new {
+  padding: 0 5px;
+  background-color: #efefef;
+  border-right: 1px solid #dfdfdf;
+}
+
+.git-diff table.diff-lines td.source {
+  width: 100%;
+}
+
+.git-diff table.diff-lines td.source pre {
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.git-diff table.diff-lines td.source.plus {
+  background-color: #ddffdd;
+}
+
+.git-diff table.diff-lines td.source.minus {
+  background-color: #ffdddd;
+}
+
+.git-diff table.diff-lines td.skip {
+  background-color: #efefef;
+}
+

web/css/layout.css

@@ -1,4 +1,4 @@
-h1, h2, h3, p, body, ul, li {
+h1, h2, h3, p, body, ul, li, table, tr, td, th {
     margin: 0;
     padding: 0;
 }