Sidebar improvements Some UX improvements to the sidebar in a database view
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/b7c32c2d Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/b7c32c2d Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/b7c32c2d Branch: refs/heads/secondary-indexes Commit: b7c32c2d104f7498942c57f0ab7676383eee4a33 Parents: 3628fe5 Author: Garren Smith <[email protected]> Authored: Wed Aug 13 11:54:07 2014 +0200 Committer: Garren Smith <[email protected]> Committed: Wed Aug 20 10:56:13 2014 +0200 ---------------------------------------------------------------------- app/addons/documents/routes.js | 10 +-- .../documents/templates/design_doc_menu.html | 2 +- .../documents/templates/index_menu_item.html | 4 +- app/addons/documents/templates/sidebar.html | 2 +- app/addons/documents/tests/routeSpec.js | 35 +++++++++++ app/addons/documents/views-sidebar.js | 65 +++++++++++++------- assets/less/fauxton.less | 2 + 7 files changed, 88 insertions(+), 32 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b7c32c2d/app/addons/documents/routes.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js index 3fd94f9..8eca7f6 100644 --- a/app/addons/documents/routes.js +++ b/app/addons/documents/routes.js @@ -134,7 +134,7 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou route: "allDocs", roles: ["_reader","_writer","_admin"] }, - "database/:database/_design/:ddoc/_view/:view": { + "database/:database/_design/:ddoc/_views/:view": { route: "viewFn", roles: ['_admin'] }, @@ -182,8 +182,8 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou pageSize: 500 }, params: { - startkey: '_design', - endkey: '_design1', + startkey: '_design/', + endkey: '_design0', include_docs: true, limit: 500 } @@ -503,7 +503,7 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou } }, - changes: function (event) { + changes: function () { var docParams = app.getParams(); this.data.database.buildChanges(docParams); @@ -531,7 +531,7 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou }; this.apiUrl = function() { - return [this.data.database.url("apiurl"), this.data.database.documentation()]; + return [this.data.database.url("changes-apiurl"), this.data.database.documentation()]; }; }, http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b7c32c2d/app/addons/documents/templates/design_doc_menu.html ---------------------------------------------------------------------- diff --git a/app/addons/documents/templates/design_doc_menu.html b/app/addons/documents/templates/design_doc_menu.html index 1227d33..8180f48 100644 --- a/app/addons/documents/templates/design_doc_menu.html +++ b/app/addons/documents/templates/design_doc_menu.html @@ -16,7 +16,7 @@ the License. <div class="js-collapse-toggle accordion-header" data-toggle="collapse" data-target="#<%- ddoc_clean %>" id="nav-header-<%- ddoc_clean %>" > <div class="accordion-list-item"> <div class="fonticon-play"></div> - <p><%- designDoc%></p> + <p>_design/<%- designDoc%></p> </div> <div class="new-button add-dropdown"></div> </div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b7c32c2d/app/addons/documents/templates/index_menu_item.html ---------------------------------------------------------------------- diff --git a/app/addons/documents/templates/index_menu_item.html b/app/addons/documents/templates/index_menu_item.html index 8519f42..434a02a 100644 --- a/app/addons/documents/templates/index_menu_item.html +++ b/app/addons/documents/templates/index_menu_item.html @@ -14,12 +14,12 @@ the License. <a class="js-toggle-<%-ddocType%> accordion-header js-collapse-toggle" data-toggle="collapse" data-target="#<%- removeSpecialCharacters(ddoc) + ddocType %>" id="nav-design-function-<%= removeSpecialCharacters(ddoc) + ddocType %>"> <div class="fonticon-play"></div> <span class="<%- icon %> fonticon"></span> - <%- ddocType %> + <%- name %> </a> <ul class="accordion-body collapse" id="<%- removeSpecialCharacters(ddoc) + ddocType %>"> <% _.each(collection, function (item, index) { %> <li> - <a data-ddoctype="<%- ddocType %>" id="<%- removeSpecialCharacters(ddoc) %>_<%- removeSpecialCharacters(index) %>" href="#/database/<%- safeURL(database) %>/_design/<%= safeURL(ddoc)%>/_<%=ddocType%>/<%= safeURL(index) %>" class="toggle-view"> + <a data-ddoctype="<%- ddocType %>" id="<%- removeSpecialCharacters(ddoc) %>_<%- removeSpecialCharacters(index) %>" href="#/database/<%- safeURL(database) %>/_design/<%= safeURL(ddoc)%>/_<%-ddocType%>/<%= safeURL(index) %>" class="toggle-view"> <%- index %> </a> </li> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b7c32c2d/app/addons/documents/templates/sidebar.html ---------------------------------------------------------------------- diff --git a/app/addons/documents/templates/sidebar.html b/app/addons/documents/templates/sidebar.html index 8d2ea4c..23d113f 100644 --- a/app/addons/documents/templates/sidebar.html +++ b/app/addons/documents/templates/sidebar.html @@ -23,7 +23,7 @@ the License. <div id="new-all-docs-button" class="add-dropdown"> </div> </li> <li> - <a id="design-docs" href='#<%= database.url("index") %>?startkey="_design"&endkey="_e"' class="toggle-view"> All Design Docs</a> + <a id="design-docs" href='#<%= database.url("index") %>?startkey="_design"&endkey="_design0"' class="toggle-view"> All Design Docs</a> <div id="new-design-docs-button" class="add-dropdown"> </div> </li> </ul> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b7c32c2d/app/addons/documents/tests/routeSpec.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/tests/routeSpec.js b/app/addons/documents/tests/routeSpec.js new file mode 100644 index 0000000..d7ecebd --- /dev/null +++ b/app/addons/documents/tests/routeSpec.js @@ -0,0 +1,35 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. +define([ + 'addons/documents/routes', + 'testUtils' +], function (Documents, testUtils) { + var assert = testUtils.assert; + var DocumentRoute = Documents.RouteObjects[2]; + + describe('Documents Route', function () { + + describe('changes route', function () { + + it('Should set correct changes api url', function () { + var docRoute = new DocumentRoute('changes', {}, ['fakeDB']); + docRoute.changes(); + + console.log('docRoute.apiUrl()', docRoute.apiUrl()); + assert.ok(/\/database\/fakeDB\/_changes\?descending=true&limit=100&include_docs=true/.test(docRoute.apiUrl()[0])); + }); + + }); + }); + +}); + http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b7c32c2d/app/addons/documents/views-sidebar.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/views-sidebar.js b/app/addons/documents/views-sidebar.js index 8699417..9f8c0ee 100644 --- a/app/addons/documents/views-sidebar.js +++ b/app/addons/documents/views-sidebar.js @@ -60,27 +60,41 @@ function(app, FauxtonAPI, Components, Documents, Databases) { }; }, + getNewButtonLinks: function () { + var database = this.collection.database, + newurlPrefix = "#" + database.url('app'), + addLinks = FauxtonAPI.getExtensions('sidebar:links'); - beforeRender: function(manage) { - this.deleteDBModal = this.setView( - '#delete-db-modal', - new Views.DeleteDBModal({database: this.database}) - ); + return _.reduce(FauxtonAPI.getExtensions('sidebar:links'), function (menuLinks, link) { - var database = this.collection.database, - newurlPrefix = "#" + database.url('app'); + menuLinks.push({ + title: link.title, + url: newurlPrefix + "/" + link.url, + icon: 'fonticon-plus-circled' + }); - var newLinks = [{ - title: 'Add new', - links: [{ + return menuLinks; + }, [{ title: 'New Doc', url: newurlPrefix + '/new', icon: 'fonticon-plus-circled' },{ - title: 'New Design Doc', + title: 'New View', url: newurlPrefix + '/new_view', icon: 'fonticon-plus-circled' - }] + }]); + }, + + + beforeRender: function(manage) { + this.deleteDBModal = this.setView( + '#delete-db-modal', + new Views.DeleteDBModal({database: this.database}) + ); + + var newLinks = [{ + title: 'Add new', + links: this.getNewButtonLinks() }]; this.insertView("#new-all-docs-button", new Components.MenuDropDown({ @@ -137,14 +151,14 @@ function(app, FauxtonAPI, Components, Documents, Databases) { toggleArrow: function(e){ this.$(e.currentTarget).toggleClass("down"); }, - buildIndexList: function(collection, selector, ddocType){ + buildIndexList: function(collection, info){ var design = this.model.id.replace(/^_design\//,""); this.insertView(".accordion-body", new Views.IndexItem({ - selector: selector, + selector: info.selector, ddoc: design, - collection: collection[selector], - ddocType: ddocType, + collection: collection[info.selector], + name: info.name, database: this.model.collection.database.id })); }, @@ -175,7 +189,7 @@ function(app, FauxtonAPI, Components, Documents, Databases) { return menuLinks; }, [{ - title: 'Secondary View', + title: 'New View', url: "#" + database.url('app') + "/new_view/" + docSafe, icon: 'fonticon-plus-circled' }]); @@ -188,9 +202,13 @@ function(app, FauxtonAPI, Components, Documents, Databases) { if (!ddocDocs){ return; } - this.buildIndexList(ddocDocs, "views", "view"); - _.each(sidebarListTypes, function (type) { - this.buildIndexList(ddocDocs, type); + this.buildIndexList(ddocDocs, { + selector: "views", + name: 'Views' + }); + + _.each(sidebarListTypes, function (info) { + this.buildIndexList(ddocDocs, info); },this); }, @@ -220,9 +238,9 @@ function(app, FauxtonAPI, Components, Documents, Databases) { this.database = options.database; this.selected = !! options.selected; this.selector = options.selector; - this.ddocType = options.ddocType || this.selector; + this.name = options.name; this.icons = { - "view": "fonticon-sidenav-map-reduce", + "Views": "fonticon-sidenav-map-reduce", "indexes": "fonticon-sidenav-search" }; @@ -231,7 +249,8 @@ function(app, FauxtonAPI, Components, Documents, Databases) { serialize: function() { return { icon: this.icons[this.ddocType], - ddocType: this.ddocType, + ddocType: this.selector, + name: this.name, index: this.index, ddoc: this.ddoc, database: this.database, http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b7c32c2d/assets/less/fauxton.less ---------------------------------------------------------------------- diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less index 2032b04..93afce6 100644 --- a/assets/less/fauxton.less +++ b/assets/less/fauxton.less @@ -365,6 +365,8 @@ table.databases { .transition(all @transitionSpeed @transitionEaseType); padding: 22px 0 0 18px; position: fixed; + z-index: 100; + width: 64px; top: 0; background-color: @primaryNav; width: @navWidth;
