[gitg/wip/commit: 27/28] Render stage/unstage buttons in diff view

[Jesse van den Kieboom <jessevdk src gnome org>]

commit a0fc546817cb0e96a7b1a2512922bff4495322b8
Author: Jesse van den Kieboom <jessevdk gmail com>
Date:   Wed Jul 3 16:44:13 2013 +0200

    Render stage/unstage buttons in diff view

 libgitg/gitg-diff-view.vala                 |    8 +++++
 libgitg/resources/diff-view-html-builder.js |   38 ++++++++++++++++++++++++++-
 libgitg/resources/diff-view.css             |   28 +++++++++++++++++++
 libgitg/resources/diff-view.html            |    2 +-
 libgitg/resources/diff-view.js              |    7 ++++-
 po/POTFILES.in                              |    1 +
 6 files changed, 81 insertions(+), 3 deletions(-)
---
diff --git a/libgitg/gitg-diff-view.vala b/libgitg/gitg-diff-view.vala
index 41aa7b7..2c8b642 100644
--- a/libgitg/gitg-diff-view.vala
+++ b/libgitg/gitg-diff-view.vala
@@ -83,6 +83,14 @@ namespace Gitg
                        o.set_boolean_member("unstaged", unstaged);
                        o.set_boolean_member("debug", Environment.get_variable("GITG_GTK_DIFF_VIEW_DEBUG") != 
null);
 
+                       var strings = new Json.Object();
+
+                       strings.set_string_member("stage", _("stage"));
+                       strings.set_string_member("unstage", _("unstage"));
+                       strings.set_string_member("loading_diff", _("Loading diff..."));
+
+                       o.set_object_member("strings", strings);
+
                        var gen = new Json.Generator();
 
                        var node = new Json.Node(Json.NodeType.OBJECT);
diff --git a/libgitg/resources/diff-view-html-builder.js b/libgitg/resources/diff-view-html-builder.js
index cfd12c4..8ba4eb7 100644
--- a/libgitg/resources/diff-view-html-builder.js
+++ b/libgitg/resources/diff-view-html-builder.js
@@ -18,7 +18,25 @@ function diff_file(file, lnstate, data)
                var cold = h.range.old.start;
                var cnew = h.range.new.start;
 
-               var hunkheader = '@@ -' + h.range.old.start + ',' + h.range.old.lines + ' +' + 
h.range.new.start + ',' + h.range.new.lines + ' @@';
+               var hunkheader = '<span class="hunk_header">@@ -' + h.range.old.start + ',' + 
h.range.old.lines + ' +' + h.range.new.start + ',' + h.range.new.lines + ' @@</span>';
+
+               if (data.settings.staged || data.settings.unstaged)
+               {
+                       var cls;
+
+                       if (data.settings.staged)
+                       {
+                               cls = 'unstage';
+                               nm = data.settings.strings.unstage;
+                       }
+                       else
+                       {
+                               cls = 'stage';
+                               nm = data.settings.strings.stage;
+                       }
+
+                       hunkheader = '<span class="' + cls + '">' + nm + '</span>' + hunkheader;
+               }
 
                tablecontent += '<tr class="hunk_header">\
                        <td class="gutter old">' + lnstate.gutterdots + '</td> \
@@ -108,6 +126,24 @@ function diff_file(file, lnstate, data)
 
        var stats = '<div class="expander">-</div><div class="stats"><span class="number">' + (added + 
removed)  + '</span><span class="bar"><span class="added" style="width: ' + addedp + '%;"></span><span 
class="removed" style="width: ' + removedp + '%;"></span></span></div>';
 
+       if (data.settings.staged || data.settings.unstaged)
+       {
+               var cls;
+
+               if (data.settings.staged)
+               {
+                       cls = 'unstage';
+                       nm = data.settings.strings.unstage;
+               }
+               else
+               {
+                       cls = 'stage';
+                       nm = data.settings.strings.stage;
+               }
+
+               stats += '<span class="' + cls + '">' + nm + '</span>';
+       }
+
        var template = data.file_template;
        var repls = {
                'FILEPATH': filepath,
diff --git a/libgitg/resources/diff-view.css b/libgitg/resources/diff-view.css
index d3a9193..c4f755f 100644
--- a/libgitg/resources/diff-view.css
+++ b/libgitg/resources/diff-view.css
@@ -216,4 +216,32 @@ div.loading {
   font-family: sans-serif;
 }
 
+span.stage, span.unstage {
+  border-radius: 5px;
+  padding: 1px 3px 1px 3px;
+  color: #3465a4;
+  cursor: pointer;
+  margin-right: 6px;
+  display: inline-block;
+  vertical-align: middle;
+  box-shadow: 1px 1px #d3d7cf inset;
+}
+
+tr.file_header span.stage, tr.file_header span.unstage {
+  box-shadow: 1px 1px #ccc inset;
+}
+
+span.stage {
+  background-color: #ddffdd;
+}
+
+span.unstage {
+  background-color: #ffdddd;
+}
+
+span.hunk_header, span.file_path {
+  display: inline-block;
+  vertical-align: middle;
+}
+
 /* vi:ts=2:et */
diff --git a/libgitg/resources/diff-view.html b/libgitg/resources/diff-view.html
index 21eaf01..82f92e7 100644
--- a/libgitg/resources/diff-view.html
+++ b/libgitg/resources/diff-view.html
@@ -28,7 +28,7 @@
           </colgroup>
           <tbody>
             <tr class="file_header">
-              <td colspan="3"><!-- ${STATS} --><!-- ${FILEPATH} --></td>
+              <td colspan="3"><!-- ${STATS} --><span class="file_path"><!-- ${FILEPATH} --></span></td>
             </tr>
             <!-- ${TABLE_BODY} -->
           </tbody>
diff --git a/libgitg/resources/diff-view.js b/libgitg/resources/diff-view.js
index 1b6b159..5103eb1 100644
--- a/libgitg/resources/diff-view.js
+++ b/libgitg/resources/diff-view.js
@@ -21,6 +21,11 @@ var settings = {
        debug: false,
        staged: false,
        unstaged: false,
+       strings: {
+               stage: 'stage',
+               unstage: 'unstage',
+               loading_diff: 'Loading diff...'
+       }
 };
 
 if ('settings' in params)
@@ -146,7 +151,7 @@ function update_diff(id, lsettings)
                if (eta > 1000)
                {
                        // Show the progress
-                       content.innerHTML = '<div class="loading">Loading diff...</div>.';
+                       content.innerHTML = '<div class="loading">' + settings.strings.loading_diff + 
'</div>.';
                }
 
                html_builder_progress_timeout = 0;
diff --git a/po/POTFILES.in b/po/POTFILES.in
index 78479a3..7ee6c11 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -11,6 +11,7 @@ gitg/history/gitg-history.vala
 gitg/preferences/gitg-preferences-history.vala
 gitg/preferences/gitg-preferences-interface.vala
 libgitg/gitg-commit.vala
+libgitg/gitg-diff-view.vala
 plugins/diff/gitg-diff.vala
 plugins/files/gitg-files.vala
 [type: gettext/glade]gitg/resources/ui/gitg-clone-dialog.ui