fancier diff file view

Author: alexandresalome

Resources/doc/install/raw.rst

@@ -27,3 +27,16 @@ When it's done, add the extension to your Twig:
     $twig->addExtension($extension);
     $twig->addPath('/path/to/Gitonomy/Bundle/GitBundle/Resources/views', '@GitonomyGitBundle');
 
+Now, you just need to load those assets in your application:
+
+Assets installation
+:::::::::::::::::::
+
+You need to make your application load those stylesheets:
+
+* Resources/public/css/all.css
+
+And those javascripts:
+
+* Resources/public/css/log.js
+* Resources/public/css/commit.js

Resources/doc/install/symfony2.rst

@@ -83,14 +83,7 @@ If you are using Assetic:
 
     {% javascripts
         "bundles/gitonomytwig/js/log.js"
+        "bundles/gitonomytwig/js/commit.js"
     %}
         <script type="text/javascript" src="{{ asset(asset_url) }}"></script>
     {% endjavascripts %}
-
-If not, you just need to make your application load those stylesheets:
-
-* @GitonomyGitBundle/Resources/public/css/all.css
-
-And those javascripts:
-
-* @GitonomyGitBundle/Resources/public/css/log.js

Resources/public/css/all.css

@@ -1,5 +1,53 @@
 /** Diff **/
 
+ul.diff-summary {
+  list-style-type: none;
+}
+
+ul.diff-summary {
+  margin: 0;
+}
+
+ul.diff-summary input[type=checkbox] {
+  margin: 0;
+}
+
+ul.diff-summary a div.diff-file-label {
+  display: inline-block;
+  text-indent: 5px;
+  font-family: monospace;
+}
+
+ul.diff-summary a div.diff-file-label.creation:before {
+  content: "[+] ";
+  color: green;
+}
+
+ul.diff-summary a div.diff-file-label.creation {
+  color: green;
+}
+
+ul.diff-summary a div.diff-file-label.deletion:before {
+  content: "[-] ";
+  color: red;
+}
+
+ul.diff-summary a div.diff-file-label.deletion {
+  color: red;
+}
+
+ul.diff-summary a div.diff-file-label.modification:before {
+  content: "[ ] ";
+}
+
+ul.diff-summary a {
+  color: black;
+}
+
+ul.diff-summary a:hover > div {
+  text-decoration: underline;
+}
+
 .file-wrapper .file {
   margin-top: 10px;
 }

Resources/public/js/commit.js

@@ -0,0 +1,28 @@
+/**
+ * Detects changes on single-file checkbox.
+ */
+$(document).on('change', 'ul.diff-summary input[type=checkbox]', function (event) {
+    $t = $(event.currentTarget);
+    $target = $("#" + $t.attr('data-file-id'));
+
+    if (undefined == $t.attr('checked')) {
+        $target.hide();
+    } else {
+        $target.show();
+    }
+});
+
+/**
+ * Detects changes on "toggle-all" on top of a commit.
+ */
+$(document).on('change', 'input[type=checkbox].diff-toggle-all', function (event) {
+    var $t = $(event.currentTarget);
+    var $target = $("#" + $t.attr('data-target') + " input[type=checkbox][data-file-id]");
+
+    if (undefined == $t.attr('checked')) {
+        $target.removeAttr('checked');
+    } else {
+        $target.attr('checked', 'checked');
+    }
+    $target.trigger('change');
+});

Resources/translations/git.fr_FR.yml

@@ -2,7 +2,7 @@
 "Staging area": "Staging area"
 "Pending modifications": "Modifications en attente"
 "Gravatar of :user": "Gravatar de :user"
-"File mode changed from :old to :new": "Le mode de fichier a changé de :old pour :new"
 "Filename": "Nom de fichier"
 "Modification date": "Date de modification"
 "Last commit": "Dernier commit"
+"Toggle all": "Permuter tous"

Resources/views/default_theme.html.twig

@@ -165,34 +165,46 @@
 {% endspaceless %}
 {% endblock %}
 
+{% block diff_file_label %}
+{% spaceless %}
+    {% set text = file.name %}
+    {% if file.creation %}
+        {% set class = " creation" %}
+    {% elseif file.deletion %}
+        {% set class = " deletion" %}
+    {% elseif file.rename %}
+        {% set class = " rename" %}
+        {% set text = file.oldName ~ ' > ' ~ file.newName %}
+    {% else %}
+        {% set class = " modification" %}
+    {% endif %}
+    {% if file.changeMode %}
+        {% set text = text ~ " (" ~ file.oldMode ~ " > " ~ file.newMode ~ ")" %}
+    {% endif %}
+    <div class="diff-file-label{{ class }}">{{ text }}</div>
+{% endspaceless %}
+{% endblock %}
+
 {% block diff_summary %}
-    <ul class="summary">
+{% spaceless %}
+    <ul class="diff-summary" id="{{ id_prefix }}-list">
+        <li><em><input type="checkbox" class="diff-toggle-all" data-target="{{ id_prefix }}-list" checked="checked" /> {{ 'Toggle all'|trans({}, 'git') }}</em></li>
         {% for i,file in diff.files %}
             <li>
+                <input type="checkbox" data-file-id="{{ id_prefix }}{{ i }}" checked="checked" />
                 <a href="#{{ id_prefix }}{{ i }}">
-                    {{ file.name }}
+                    {{ git_render('diff_file_label', {file: file}) }}
                 </a>
             </li>
         {% endfor %}
     </ul>
+{% endspaceless %}
 {% endblock %}
 
 {% block diff_file %}
 {% spaceless %}
     <header id="{{ id }}">
-        {% if file.oldName == file.newName and file.oldMode == file.newMode %}
-            <span class="file">{{ file.oldName }}</span>
-        {% elseif file.oldName == null %}
-            <span class="file">{{ file.newName }} ({{ file.newMode }})</span>
-        {% elseif file.newName == null %}
-            <span class="file deleted">{{ file.oldName }} ({{ file.oldMode }})</span>
-        {% elseif file.oldMode != file.newMode %}
-            <span class="changemod">{{ 'File mode changed from :old to :new'|trans({':old': file.oldMode, ':new': file.newMode}) }}</span>
-        {% else %}
-            <ul>
-                <li>{{ file.oldName }} ({{ file.oldMode }}) -&gt; {{ file.newName }} ({{ file.newMode }})</li>
-            </ul>
-        {% endif %}
+        {{ git_render('diff_file_label', {file: file}) }}
     </header>
     <div class="file-changes">
         {% if file.isBinary %}