couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From kxe...@apache.org
Subject [16/19] fauxton commit: updated refs/heads/import-master to 4ab2cde
Date Thu, 17 Apr 2014 08:37:16 GMT
Fauxton: redesign _changes-UI

Implement copying to clipboard
Change the view

Closes COUCHDB-2206


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/6ef6cc8a
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/6ef6cc8a
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/6ef6cc8a

Branch: refs/heads/import-master
Commit: 6ef6cc8a2d52dffa92d960434ed229dda8a6263c
Parents: 0411b32
Author: Robert Kowalski <rok@kowalski.gd>
Authored: Mon Mar 31 20:31:23 2014 +0200
Committer: suelockwood <deathbear@apache.org>
Committed: Mon Apr 14 14:40:15 2014 -0400

----------------------------------------------------------------------
 app/addons/documents/assets/less/documents.less | 28 +++++--
 app/addons/documents/templates/changes.html     | 78 ++++++++++++++------
 app/addons/documents/views.js                   | 27 ++++++-
 3 files changed, 102 insertions(+), 31 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/6ef6cc8a/app/addons/documents/assets/less/documents.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/documents.less b/app/addons/documents/assets/less/documents.less
index 36429ff..e629b2c 100644
--- a/app/addons/documents/assets/less/documents.less
+++ b/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;
   }
 }
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/6ef6cc8a/app/addons/documents/templates/changes.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/changes.html b/app/addons/documents/templates/changes.html
index 9408979..460ff74 100644
--- a/app/addons/documents/templates/changes.html
+++ b/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>
+<% }); %>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/6ef6cc8a/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index 351b2b0..eba2b1b 100644
--- a/app/addons/documents/views.js
+++ b/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"));
     }
   });
 


Mime
View raw message