Fauxton: redesign _changes-UI Implement copying to clipboard Change the view
Closes COUCHDB-2206 Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/bf58b64e Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/bf58b64e Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/bf58b64e Branch: refs/heads/2200-feature-support-erlang-17.0 Commit: bf58b64e15eb6f8eaf5046c034baf4e64f8a2680 Parents: e528c0c Author: Robert Kowalski <r...@kowalski.gd> Authored: Mon Mar 31 20:31:23 2014 +0200 Committer: suelockwood <deathb...@apache.org> Committed: Mon Apr 14 14:40:15 2014 -0400 ---------------------------------------------------------------------- .gitignore | 1 + license.skip | 1 + src/Makefile.am | 5 +- .../addons/documents/assets/less/documents.less | 28 +++++-- .../app/addons/documents/templates/changes.html | 78 ++++++++++++++------ src/fauxton/app/addons/documents/views.js | 27 ++++++- 6 files changed, 108 insertions(+), 32 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb/blob/bf58b64e/.gitignore ---------------------------------------------------------------------- diff --git a/.gitignore b/.gitignore index 5e4d220..4b12bf7 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 http://git-wip-us.apache.org/repos/asf/couchdb/blob/bf58b64e/license.skip ---------------------------------------------------------------------- diff --git a/license.skip b/license.skip index 56b48bd..45558d1 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 http://git-wip-us.apache.org/repos/asf/couchdb/blob/bf58b64e/src/Makefile.am ---------------------------------------------------------------------- diff --git a/src/Makefile.am b/src/Makefile.am index ea1a11b..a0d1557 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 \ http://git-wip-us.apache.org/repos/asf/couchdb/blob/bf58b64e/src/fauxton/app/addons/documents/assets/less/documents.less ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/assets/less/documents.less b/src/fauxton/app/addons/documents/assets/less/documents.less index 36429ff..e629b2c 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; } } http://git-wip-us.apache.org/repos/asf/couchdb/blob/bf58b64e/src/fauxton/app/addons/documents/templates/changes.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/templates/changes.html b/src/fauxton/app/addons/documents/templates/changes.html index 9408979..460ff74 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> +<% }); %> http://git-wip-us.apache.org/repos/asf/couchdb/blob/bf58b64e/src/fauxton/app/addons/documents/views.js ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/views.js b/src/fauxton/app/addons/documents/views.js index 351b2b0..eba2b1b 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")); } });
