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 <[email protected]> Authored: Mon Mar 31 20:31:23 2014 +0200 Committer: suelockwood <[email protected]> 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")); } });
