Fauxton: redesign _changes-UI

Implement copying to clipboard
Change the view

Closes COUCHDB-2206

6 files changed, 108 insertions, 32 deletions

diff --git a/.gitignore b/.gitignore
index 5e4d22006..4b12bf780 100644
--- a/.gitignore
+++ b/.gitignore
@@ -111,6 +111,7 @@ src/fauxton/app/addons/*
 src/fauxton/settings.json*
 !src/fauxton/settings.json.default
 !src/fauxton/settings.json.dev
+!src/fauxton/assets/js/plugins/zeroclipboard/ZeroClipboard.swf
 src/ibrowse/ibrowse.app
 src/ibrowse/ibrowse.app
 src/mochiweb/mochiweb.app
diff --git a/license.skip b/license.skip
index 56b48bdbd..45558d1ab 100644
--- a/license.skip
+++ b/license.skip
@@ -131,6 +131,7 @@
 ^src/fauxton/assets/js/libs/ace/.*.js
 ^src/fauxton/assets/js/libs/ace/snippets/.*.js
 ^src/fauxton/assets/js/plugins/.*.js
+^src/fauxton/assets/js/plugins/zeroclipboard/ZeroClipboard.swf
 ^src/fauxton/assets/less/bootstrap/.*.less
 ^src/fauxton/assets/less/bootstrap/tests/css-tests.css
 ^src/fauxton/assets/less/bootstrap/tests/buttons.html
diff --git a/src/Makefile.am b/src/Makefile.am
index ea1a11ba3..a0d1557ae 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -163,6 +163,7 @@ FAUXTON_FILES = \
     fauxton/app/addons/pouchdb/base.js \
     fauxton/app/addons/pouchdb/pouch.collate.js \
     fauxton/app/addons/pouchdb/pouchdb.mapreduce.js \
+    fauxton/app/addons/documents/assets/less/documents.less \
     fauxton/app/addons/databases/templates/item.html \
     fauxton/app/addons/databases/templates/list.html \
     fauxton/app/addons/databases/templates/newdatabase.html \
@@ -261,7 +262,9 @@ FAUXTON_FILES = \
     fauxton/assets/js/plugins/cloudant.pagingcollection.js \
     fauxton/assets/js/plugins/jquery.form.js \
     fauxton/assets/js/plugins/prettify.js \
-    fauxton/assets/js/plugins/beautify.js\
+    fauxton/assets/js/plugins/beautify.js \
+    fauxton/assets/js/plugins/zeroclipboard/ZeroClipboard.js \
+    fauxton/assets/js/plugins/zeroclipboard/ZeroClipboard.swf \
     fauxton/assets/less/bootstrap/accordion.less \
     fauxton/assets/less/bootstrap/alerts.less \
     fauxton/assets/less/bootstrap/bootstrap.less \
diff --git a/src/fauxton/app/addons/documents/assets/less/documents.less b/src/fauxton/app/addons/documents/assets/less/documents.less
index 36429ff81..e629b2cc4 100644
--- a/src/fauxton/app/addons/documents/assets/less/documents.less
+++ b/src/fauxton/app/addons/documents/assets/less/documents.less
@@ -80,14 +80,30 @@ button.beautify {
 }
 
 /** used in changes.html **/
-#changes-table {
+.change-box {
+  margin: 0 20px 20px 20px;
+}
 
-  #changes {
-    width: 50%;
+.change-wrapper {
+  margin-top: 57px;
+  border-bottom: 1px solid #dddddd;
+  &:last-child {
+    border-bottom: none;
   }
-
-  #seq, #deleted {
-    width: 5%;
+  .row-fluid {
+    padding: 10px 0 10px 0;
+  }
+  .row-fluid:first {
+    padding: 0px 0 10px 0;
+  }
+  a:hover.js-copy {
+    text-decoration: none;
+  }
+  .js-json-container {
+    display: none;
+  }
+  .span2 {
+    font-weight: bold;
   }
 }
 
diff --git a/src/fauxton/app/addons/documents/templates/changes.html b/src/fauxton/app/addons/documents/templates/changes.html
index 9408979a2..460ff74aa 100644
--- a/src/fauxton/app/addons/documents/templates/changes.html
+++ b/src/fauxton/app/addons/documents/templates/changes.html
@@ -12,27 +12,57 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<table id="changes-table" class="table">
-  <thead>
-    <th id="seq"> seq </th>
-    <th> id </th>
-    <th id="changes"> changes </th>
-    <th id="deleted"> deleted? </th>
-  </thead>
-  <tbody>
-  <% _.each(changes, function (change) { %>
-    <tr>
-      <td> <%= change.seq %> </td>
-      <% if (change.deleted) { %>
-        <td> <%= change.id %> </td>
-      <% } else { %>
-        <td> <a href="#<%= database.url('app') %>/<%= change.id %>"><%= change.id %></a> </td>
-      <% } %>
-        <td> 
-          <pre class="prettyprint">  <%- JSON.stringify({changes: change.changes, doc: change.doc}, null, " ") %> </pre>
-      </td>
-      <td><%= change.deleted ? "true" : "false" %></td>
-    </tr>
-  <% }); %>
-  </tbody>
-</table>
+<% _.each(changes, function (change) { %>
+  <div class="change-wrapper">
+    <div class="change-box">
+      <div class="row-fluid">
+        <div class="span2">
+          seq
+        </div>
+        <div class="span8">
+          <%= change.seq %>
+        </div>
+        <div class="span2">
+          <a class="js-copy" data-clipboard-text="<%= change.seq %>" data-bypass="true" href="#">
+            <i class="icon-share"></i>
+          </a>
+        </div>
+      </div>
+      <div class="row-fluid">
+        <div class="span2">
+          id
+        </div>
+        <div class="span8">
+          <% if (change.deleted) { %>
+            <%= change.id %>
+          <% } else { %>
+            <a href="#<%= database.url('app') %>/<%= safeURL(change.id) %>"><%= change.id %></a>
+          <% } %>    </div>
+        <div class="span2">
+          <a class="js-copy" data-clipboard-text="<%= change.id %>" data-bypass="true" href="#">
+            <i class="icon-share"></i>
+          </a>
+        </div>
+      </div>
+      <div class="row-fluid">
+        <div class="span2">
+          changes
+        </div>
+        <div class="span10">
+          <button class="js-toggle-json btn-large btn-primary" type="button">View JSON</button>
+        </div>
+      </div>
+      <div class="js-json-container">
+        <pre class="prettyprint"><%- JSON.stringify({changes: change.changes, doc: change.doc}, null, " ") %></pre>
+      </div>
+      <div class="row-fluid">
+        <div class="span2">
+          deleted
+        </div>
+        <div class="span10">
+          <%= change.deleted ? "True" : "False" %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% }); %>
diff --git a/src/fauxton/app/addons/documents/views.js b/src/fauxton/app/addons/documents/views.js
index 351b2b0e2..eba2b1b75 100644
--- a/src/fauxton/app/addons/documents/views.js
+++ b/src/fauxton/app/addons/documents/views.js
@@ -26,9 +26,13 @@ define([
        // Plugins
        "plugins/beautify",
        "plugins/prettify",
+       // this should be never global available:
+       // https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/security.md
+       "plugins/zeroclipboard/ZeroClipboard"
 ],
 
-function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColumns, beautify) {
+function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
+         resizeColumns, beautify, prettify, ZeroClipboard) {
   var Views = {};
   Views.Tabs = FauxtonAPI.View.extend({
     template: "addons/documents/templates/tabs",
@@ -1934,6 +1938,25 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
       this.listenTo( this.model.changes, 'cachesync', this.render);
     },
 
+    events: {
+      "click button.js-toggle-json": "toggleJson"
+    },
+
+    toggleJson: function(event) {
+      event.preventDefault();
+
+      var $button = this.$(event.target),
+          $container = $button.closest('.change-box').find(".js-json-container");
+
+      if ($container.hasClass("js-hidden")) {
+        $button.text("Close JSON");
+      } else {
+        $button.text("View JSON");
+      }
+
+      $container.slideToggle();
+    },
+
     establish: function() {
       return [ this.model.changes.fetchOnce({prefill: true})];
     },
@@ -1947,6 +1970,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
 
     afterRender: function(){
       prettyPrint();
+      ZeroClipboard.config({ moviePath: "/assets/js/plugins/zeroclipboard/ZeroClipboard.swf" });
+      var client = new ZeroClipboard(this.$(".js-copy"));
     }
   });