diff options
author | Robert Kowalski <rok@kowalski.gd> | 2014-03-31 20:31:23 +0200 |
---|---|---|
committer | suelockwood <deathbear@apache.org> | 2014-04-14 14:40:15 -0400 |
commit | bf58b64e15eb6f8eaf5046c034baf4e64f8a2680 (patch) | |
tree | ef1588984a6f8f562365563ec13c6ccb7c614fc8 | |
parent | e528c0cbbb26f684fdff6147c2edf0806318ef42 (diff) | |
download | couchdb-bf58b64e15eb6f8eaf5046c034baf4e64f8a2680.tar.gz |
Fauxton: redesign _changes-UI
Implement copying to clipboard
Change the view
Closes COUCHDB-2206
-rw-r--r-- | .gitignore | 1 | ||||
-rw-r--r-- | license.skip | 1 | ||||
-rw-r--r-- | src/Makefile.am | 5 | ||||
-rw-r--r-- | src/fauxton/app/addons/documents/assets/less/documents.less | 28 | ||||
-rw-r--r-- | src/fauxton/app/addons/documents/templates/changes.html | 78 | ||||
-rw-r--r-- | src/fauxton/app/addons/documents/views.js | 27 |
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")); } }); |