Update Changes so that it's got the sidebar Comment out filters, show, list functions from the nav for now Extensions for the menu and commented out the links to the functions we don't have UIs for yet. css updates add metadata as a sidebar option remove filter by in active tasks Fix Active Tasks sidebar dom cleanup sidebar ui Make Sidebar show all design doc functions
Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/da25852c Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/da25852c Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/da25852c Branch: refs/heads/Update-Sidebar-Ui Commit: da25852c5ddab947cf11a48cc820431484e7c746 Parents: 319c489 Author: suelockwood <[email protected]> Authored: Tue Apr 15 16:20:02 2014 -0400 Committer: suelockwood <[email protected]> Committed: Wed Apr 16 16:47:39 2014 -0400 ---------------------------------------------------------------------- .../app/addons/activetasks/templates/tabs.html | 11 +- src/fauxton/app/addons/activetasks/views.js | 2 + .../addons/documents/assets/less/documents.less | 61 +++++++ src/fauxton/app/addons/documents/routes.js | 135 ++++++++++----- .../templates/add_new_ddoc_fn_dropdown.html | 31 ++++ .../documents/templates/attachments_footer.html | 20 +++ .../documents/templates/design_doc_menu.html | 27 +++ .../templates/design_doc_selector.html | 3 + .../documents/templates/index_menu_item.html | 4 +- .../app/addons/documents/templates/sidebar.html | 40 ++--- src/fauxton/app/addons/documents/views.js | 166 ++++++++++++++----- src/fauxton/app/templates/layouts/two_pane.html | 1 - .../assets/less/bootstrap/dropdowns.less | 33 +++- src/fauxton/assets/less/bootstrap/navs.less | 3 - .../assets/less/bootstrap/variables.less | 8 +- src/fauxton/assets/less/fauxton.less | 155 ++++++++--------- src/fauxton/assets/less/variables.less | 1 + 17 files changed, 496 insertions(+), 205 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/app/addons/activetasks/templates/tabs.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/activetasks/templates/tabs.html b/src/fauxton/app/addons/activetasks/templates/tabs.html index 5869748..624c386 100644 --- a/src/fauxton/app/addons/activetasks/templates/tabs.html +++ b/src/fauxton/app/addons/activetasks/templates/tabs.html @@ -14,14 +14,6 @@ the License. - - -<div id="sidenav"> - <header class="row-fluid"> - <h3>Filter by: </h3> - </header> - - <nav> <ul class="task-tabs nav nav-list"> <% for (var filter in filters) { %> <li data-type="<%=filter%>"> @@ -42,5 +34,4 @@ the License. <label for="pollingRange"><span>5</span> second(s)</label> </li> </ul> - </nav> -</div> + http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/app/addons/activetasks/views.js ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/activetasks/views.js b/src/fauxton/app/addons/activetasks/views.js index b0940bf..453069f 100644 --- a/src/fauxton/app/addons/activetasks/views.js +++ b/src/fauxton/app/addons/activetasks/views.js @@ -29,6 +29,8 @@ function (app, FauxtonAPI, activetasks) { Views.Events = _.extend(Events, Backbone.Events); Views.TabMenu = FauxtonAPI.View.extend({ + tagName: "nav", + className: "sidenav", template: "addons/activetasks/templates/tabs", events: { "click .task-tabs li": "requestByType", http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/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 e49720b..0dc10a0 100644 --- a/src/fauxton/app/addons/documents/assets/less/documents.less +++ b/src/fauxton/app/addons/documents/assets/less/documents.less @@ -131,4 +131,65 @@ button.beautify { word-wrap: break-word; } +.sidenav{ + margin-bottom: 40px; + li.nav-header { + position: relative; + .accordion-body{ + &.in { + border-bottom: 1px solid #d3d7db; + } + color: #eee; + margin-left: 0; + li a{ + padding-left: 55px; + font-size: 14px; + &:hover { + text-decoration: none; + color: #af2d24; + } + } + } + > span{ + display: block; + padding: 10px 13px 10px 30px; + color: #333333; + border-bottom: 1px solid #d3d7db; + &:before{ + vertical-align: bottom; + font-size: 12px; + padding-right: 10px; + margin-bottom: 2px; + } + &.down:before { + margin-bottom: -2px; + transform:rotate(90deg); + -ms-transform:rotate(90deg); /* IE 9 */ + -webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */ + } + } + div.new-button { + position: absolute; + top: 2px; + right: 15px; + .dropdown-menu{ + left: -82px; + padding-bottom: 0; + width: auto; + min-width: 0; + li a { + padding: 10px 15px 10px; + } + } + .dropdown-toggle{ + text-decoration: none; + } + > a { + border-bottom: none; + text-decoration: none; + font-size: 16px; + } + } + } +} http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/app/addons/documents/routes.js ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/routes.js b/src/fauxton/app/addons/documents/routes.js index 5497a30..e69cecb 100644 --- a/src/fauxton/app/addons/documents/routes.js +++ b/src/fauxton/app/addons/documents/routes.js @@ -17,10 +17,11 @@ define([ // Modules "addons/documents/views", - "addons/databases/base" + "addons/databases/base", + "addons/documents/resources" ], -function(app, FauxtonAPI, Documents, Databases) { +function(app, FauxtonAPI, Documents, Databases, Resources) { var DocEditorRouteObject = FauxtonAPI.RouteObject.extend({ layout: "one_pane", @@ -90,7 +91,7 @@ function(app, FauxtonAPI, Documents, Databases) { database = this.database; doc.copy(newId).then(function () { - doc.set({_id: newId}); + doc.set({_id: newId}); docView.forceRender(); FauxtonAPI.navigate('/database/' + database.safeID() + '/' + app.utils.safeURLName(newId), {trigger: true}); FauxtonAPI.addNotification({ @@ -143,12 +144,30 @@ function(app, FauxtonAPI, Documents, Databases) { layout: "with_tabs_sidebar", selectedHeader: "Databases", routes: { - "database/:database/_all_docs(:extra)": "allDocs", - "database/:database/_design/:ddoc/_view/:view": { + "database/:database/_all_docs(:extra)": "allDocs", + "database/:database/_design/:ddoc/_views/:view": { route: "viewFn", roles: ['_admin'] }, - "database/:database/new_view": "newViewEditor" + "database/:database/_design/:ddoc/_lists/:fn": { + route: "tempFn", + roles: ['_admin'] + }, + "database/:database/_design/:ddoc/_filters/:fn": { + route: "tempFn", + roles: ['_admin'] + }, + "database/:database/_design/:ddoc/_show/:fn": { + route: "tempFn", + roles: ['_admin'] + }, + "database/:database/_design/:ddoc/metadata": { + route: "designDocMetadata", + roles: ['_admin'] + }, + "database/:database/new_view": "newViewEditor", + "database/:database/new_view/:designDoc": "newViewEditor", + "database/:database/_changes(:params)": "changes" }, events: { @@ -184,6 +203,21 @@ function(app, FauxtonAPI, Documents, Databases) { database: this.data.database })); }, + designDocMetadata: function(database, ddoc){ + var DesignDocInfo = new Resources.DdocInfo({_id: "_design/"+ddoc},{database: this.data.database }); + this.setView("#dashboard-lower-content", new Documents.Views.DdocInfo({ + model: DesignDocInfo + })); + }, + tempFn: function(databaseName, ddoc, fn){ + this.setView("#dashboard-upper-content", new Documents.Views.temp({})); + this.crumbs = function () { + return [ + {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)}, + ]; + }; + + }, establish: function () { return this.data.designDocs.fetch({reset: true}); @@ -198,7 +232,7 @@ function(app, FauxtonAPI, Documents, Databases) { }, /* - * docParams are the options collection uses to fetch from the server + * docParams are the options collection uses to fetch from the server * urlParams are what are shown in the url and to the user * They are not the same when paginating */ @@ -229,7 +263,7 @@ function(app, FauxtonAPI, Documents, Databases) { this.data.database.allDocs.paging.pageSize = this.getDocPerPageLimit(urlParams, parseInt(docParams.limit, 10)); - this.setView("#dashboard-upper-content", new Documents.Views.AllDocsLayout({ + this.viewEditor = this.setView("#dashboard-upper-content", new Documents.Views.AllDocsLayout({ database: this.data.database, collection: this.data.database.allDocs, params: urlParams, @@ -266,7 +300,7 @@ function(app, FauxtonAPI, Documents, Databases) { pageSize: this.getDocPerPageLimit(urlParams, parseInt(docParams.limit, 10)) } }); - + this.viewEditor = this.setView("#dashboard-upper-content", new Documents.Views.ViewEditor({ model: this.data.database, ddocs: this.data.designDocs, @@ -281,7 +315,7 @@ function(app, FauxtonAPI, Documents, Databases) { this.documentsView = this.createViewDocumentsView({ designDoc: decodeDdoc, - docParams: docParams, + docParams: docParams, urlParams: urlParams, database: this.data.database, indexedDocs: this.data.indexedDocs, @@ -308,7 +342,7 @@ function(app, FauxtonAPI, Documents, Databases) { }; }, - createViewDocumentsView: function (options) { + createViewDocumentsView: function (options) { return this.setView("#dashboard-lower-content", new Documents.Views.AllDocsList({ database: options.database, @@ -321,13 +355,14 @@ function(app, FauxtonAPI, Documents, Databases) { })); }, - newViewEditor: function () { + newViewEditor: function (database, designDoc) { var params = app.getParams(); this.toolsView && this.toolsView.remove(); this.documentsView && this.documentsView.remove(); this.viewEditor = this.setView("#dashboard-upper-content", new Documents.Views.ViewEditor({ + currentddoc: "_design/"+designDoc || "", ddocs: this.data.designDocs, params: params, database: this.data.database, @@ -374,7 +409,7 @@ function(app, FauxtonAPI, Documents, Databases) { if (!this.documentsView) { this.documentsView = this.createViewDocumentsView({ designDoc: ddoc, - docParams: docParams, + docParams: docParams, urlParams: urlParams, database: this.data.database, indexedDocs: this.indexedDocs, @@ -453,53 +488,73 @@ function(app, FauxtonAPI, Documents, Databases) { } else { storedPerPage = parseInt(storedPerPage, 10); } - } + } if (!urlParams.limit || urlParams.limit > storedPerPage) { return parseInt(storedPerPage, 10); } else { return parseInt(urlParams.limit, 10); } - } + }, - }); + // }); - var ChangesRouteObject = FauxtonAPI.RouteObject.extend({ - layout: "with_tabs", - selectedHeader: "Databases", - crumbs: function () { - return [ - {"name": this.database.id, "link": Databases.databaseUrl(this.database)}, - {"name": "_changes", "link": "/_changes"} - ]; - }, + // var ChangesRouteObject = FauxtonAPI.RouteObject.extend({ + // layout: "with_tabs", + // selectedHeader: "Databases", + // crumbs: function () { + // return [ + // {"name": this.database.id, "link": Databases.databaseUrl(this.database)}, + // {"name": "_changes", "link": "/_changes"} + // ]; + // }, - routes: { - "database/:database/_changes(:params)": "changes" - }, + // routes: { - initialize: function (route, masterLayout, options) { - this.databaseName = options[0]; - this.database = new Databases.Model({id: this.databaseName}); + // }, - var docParams = app.getParams(); + // initialize: function (route, masterLayout, options) { + // this.databaseName = options[0]; + // this.database = new Databases.Model({id: this.databaseName}); - this.database.buildChanges(docParams); - }, + // var docParams = app.getParams(); + + // this.database.buildChanges(docParams); + // }, changes: function (event) { - this.setView("#dashboard-content", new Documents.Views.Changes({ - model: this.database + var docParams = app.getParams(); + this.data.database.buildChanges(docParams); + + this.documentsView = this.setView("#dashboard-lower-content", new Documents.Views.Changes({ + model: this.data.database })); - }, - apiUrl: function() { - return [this.database.url("apiurl"), this.database.documentation()]; + if (this.viewEditor) { + this.viewEditor.remove(); + } + + if (this.toolsView) { + this.toolsView.remove(); + } + + this.sidebar.setSelectedTab('changes'); + + this.crumbs = function () { + return [ + {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)}, + {"name": "_changes", "link": "/_changes"} + ]; + }; + + this.apiUrl = function() { + return [this.data.database.url("apiurl"), this.data.database.documentation()]; + } } }); - Documents.RouteObjects = [DocEditorRouteObject, NewDocEditorRouteObject, DocumentsRouteObject, ChangesRouteObject]; + Documents.RouteObjects = [DocEditorRouteObject, NewDocEditorRouteObject, DocumentsRouteObject]; return Documents; }); http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/app/addons/documents/templates/add_new_ddoc_fn_dropdown.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/templates/add_new_ddoc_fn_dropdown.html b/src/fauxton/app/addons/documents/templates/add_new_ddoc_fn_dropdown.html new file mode 100644 index 0000000..77323a9 --- /dev/null +++ b/src/fauxton/app/addons/documents/templates/add_new_ddoc_fn_dropdown.html @@ -0,0 +1,31 @@ +<!-- +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. +--> + +<div class="dropdown"> + <a class="dropdown-toggle icon fonticon-circle-plus" data-toggle="dropdown" href="#" data-bypass="true"></a> + <ul class="dropdown-menu arrow" role="menu" aria-labelledby="dLabel"> + <% if (full){ %> + <li><a class="icon fonticon-replication" href="#replicate/<%=database.id%>">Replicate</a><li> + <li><a class="icon fonticon-trash" href="#" data-bypass="true">Delete</a><li> + <%}%> + <li class="header-label">Add new</li> + <li><a class="icon fonticon-circle-plus" href="#<%= database.url('app') %>/new_view/<%=ddocSafe%>">Secondary View</a><li> +<!-- <li><a class="icon fonticon-circle-plus" href="#<%= database.url('app') %>/new_filter/<%=ddocSafe%>">Filter Function</a><li> + <li><a class="icon fonticon-circle-plus" href="#<%= database.url('app') %>/new_show/<%=ddocSafe%>">Show Function</a><li> + <li><a class="icon fonticon-circle-plus" href="#<%= database.url('app') %>/new_list/<%=ddocSafe%>">List function</a><li> --> + <% _.each(extensionLinks, function(link) { %> + <li><a class="icon fonticon-circle-plus" href="#<%= database.url('app') %>/<%=link.url%>/<%=ddocSafe%>"><%=link.title%></a><li> + <%});%> + </ul> +</div> http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/app/addons/documents/templates/attachments_footer.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/templates/attachments_footer.html b/src/fauxton/app/addons/documents/templates/attachments_footer.html new file mode 100644 index 0000000..31bd5a5 --- /dev/null +++ b/src/fauxton/app/addons/documents/templates/attachments_footer.html @@ -0,0 +1,20 @@ +<!-- +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. +--> + +<ul> + <li> attachment 1</li> + <li> attachment 2 </li> + <li> attachment 3</li> + <li> attachment 4</li> +</ul> http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/app/addons/documents/templates/design_doc_menu.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/templates/design_doc_menu.html b/src/fauxton/app/addons/documents/templates/design_doc_menu.html new file mode 100644 index 0000000..c5bd392 --- /dev/null +++ b/src/fauxton/app/addons/documents/templates/design_doc_menu.html @@ -0,0 +1,27 @@ +<!-- +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. +--> +<li class="nav-header"> + <span class="fonticon-play js-collapse-toggle" data-toggle="collapse" data-target="#<%= ddoc_clean %>"> + <%= designDoc%> + </span> + <div class="new-button"></div> + <ul class="accordion-body collapse" id="<%= ddoc_clean %>"> + <li> + <a id="<%= ddoc_clean %>_metadata" href="#database/<%= database_encoded %>/_design/<%= ddoc_encoded %>/metadata" class="toggle-view"> + Design Doc Metadata + </a> + </li> + + </ul> +</li> http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/app/addons/documents/templates/design_doc_selector.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/templates/design_doc_selector.html b/src/fauxton/app/addons/documents/templates/design_doc_selector.html index 7bbe310..0a5bee2 100644 --- a/src/fauxton/app/addons/documents/templates/design_doc_selector.html +++ b/src/fauxton/app/addons/documents/templates/design_doc_selector.html @@ -16,7 +16,10 @@ the License. <select id="ddoc"> <optgroup label="Select a document"> <option value="new-doc">New document</option> + <% ddocs.each(function(ddoc) { %> + <%= ddoc.id %> + <%= ddocName %> <% if (ddoc.id === ddocName) { %> <option selected="selected" value="<%= ddoc.id %>"><%= ddoc.id %></option> <% } else { %> http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/app/addons/documents/templates/index_menu_item.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/templates/index_menu_item.html b/src/fauxton/app/addons/documents/templates/index_menu_item.html index 7ca9012..77b51d0 100644 --- a/src/fauxton/app/addons/documents/templates/index_menu_item.html +++ b/src/fauxton/app/addons/documents/templates/index_menu_item.html @@ -12,6 +12,6 @@ License for the specific language governing permissions and limitations under the License. --> -<a id="<%= ddoc_clean %>_<%= index_clean %>" href="#database/<%= database_encoded %>/_design/<%= ddoc_encoded %>/_view/<%= index_encoded %>" class="toggle-view"> - <%= ddoc %><span class="divider">/</span><%= index %> +<a id="<%= ddoc_clean %>_<%= index_clean %>" href="#database/<%= database_encoded %>/_design/<%= ddoc_encoded %>/_<%=type%>/<%= index_encoded %>" class="toggle-view"> + <%= index %> </a> http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/app/addons/documents/templates/sidebar.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/templates/sidebar.html b/src/fauxton/app/addons/documents/templates/sidebar.html index 750cd30..74c8605 100644 --- a/src/fauxton/app/addons/documents/templates/sidebar.html +++ b/src/fauxton/app/addons/documents/templates/sidebar.html @@ -11,34 +11,17 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - -<div id="sidenav"> - <header class="row-fluid"> +<!-- <header class="row-fluid"> <div class="span12"> - <div class="btn-group"> - <button class="btn dropdown-toggle dropdown-toggle-btn" data-toggle="dropdown"> - Docs - <span class="caret"></span> - </button> - <ul class="dropdown-menu"> - <!-- dropdown menu links --> - <li><a href="<%= db_url %>"><i class="icon icon-file"></i> Docs</a></li> - <li><a href="<%= permissions_url %>"><i class="icon icon-lock"></i> Permissions</a></li> - <li><a href="<%= changes_url %>"><i class="icon icon-forward"></i> Changes</a></li> - <% _.each(docLinks, function (link) { %> - <li><a href="<%= database_url + '/' + link.url %>"><i class="icon <%= link.icon %>"></i> <%= link.title %></a></li> - <% }); %> - </ul> - </div> <div class="btn-group"> <button class="btn dropdown-toggle dropdown-toggle-btn" data-toggle="dropdown"> - New + Create New <span class="caret"></span> </button> <ul class="dropdown-menu"> <!-- dropdown menu links --> - <li> +<!-- <li> <a id="doc" href="#<%= database.url('app') %>/new">Document</a> </li> <li> @@ -51,18 +34,17 @@ the License. </div> <button id="delete-database" class="btn pull-right"><i class="icon-trash"></i> Database</button> </div> - </header> + </header> --> + - <nav> <ul class="nav nav-list"> + <li><a id="permissions" href="<%= permissions_url %>">Permissions</a><li> + <li><a id="changes" href="<%= changes_url %>">Changes</a><li> + <% _.each(docLinks, function (link) { %> + <li><a href="<%= database_url + '/' + link.url %>"><%= link.title %></a></li> + <% }); %> <li class="active"><a id="all-docs" href="#<%= database.url('index') %>" class="toggle-view"> All documents</a></li> <li><a id="design-docs" href='#<%= database.url("index") %>?startkey="_design"&endkey="_e"' class="toggle-view"> All design docs</a></li> </ul> - <ul class="nav nav-list views"> - <li class="nav-header">Secondary Indexes</li> - <li><a id="new-view" href="#<%= database.url('app') %>/new_view" class="new"><i class="icon-plus"></i> New</a></li> - </ul> - <div id="extension-navs"></div> - </nav> + <div id="delete-db-modal"> </div> -</div> http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/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 bae49c0..6d61e4f 100644 --- a/src/fauxton/app/addons/documents/views.js +++ b/src/fauxton/app/addons/documents/views.js @@ -361,10 +361,12 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, this.ddoc = options.ddoc; this.database = options.database; this.selected = !! options.selected; + this.selector = options.selector; }, serialize: function() { return { + type: this.selector, index: this.index, ddoc: this.ddoc, database: this.database, @@ -379,7 +381,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, afterRender: function() { if (this.selected) { - $("#sidenav ul.nav-list li").removeClass("active"); + $(".sidenav ul.nav-list li").removeClass("active"); this.$el.addClass("active"); } } @@ -392,7 +394,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, this.newView = options.newView || false; this.pagination = options.pagination; _.bindAll(this); - + this._perPage = options.perPageDefault || 20; this.listenTo(this.collection, 'totalRows:decrement', this.render); }, @@ -1064,7 +1066,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, //highlight current this.$(".toggle-btns > label").removeClass('active'); this.$(e.currentTarget).addClass("active"); - + this.$("[id^='js-show']").hide(); //show section & disable what needs to be disabled @@ -1114,7 +1116,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, if (_.isUndefined(parsedValue)) { errorMsg = "Keys must be valid json."; } else if (!_.isArray(parsedValue)) { - errorMsg = "Keys values must be in an array. E.g [1,2,3]"; + errorMsg = "Keys values must be in an array. E.g [1,2,3]"; } if (errorMsg) { @@ -1128,7 +1130,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, return false; } - return true; + return true; }, queryParams: function () { var $form = this.$(".js-view-query-update"), @@ -1217,8 +1219,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, } this.updateFiltersFor(key, $ele); break; - case "key": - case "keys": + case "key": + case "keys": $form.find("textarea[name='"+key+"']").val(val); break; default: @@ -1339,6 +1341,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, this.ddocs = options.ddocs; this.params = options.params; this.database = options.database; + this.currentDdoc = options.currentddoc; if (this.newView) { this.viewName = 'newView'; } else { @@ -1619,7 +1622,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, toggleIndexNav: function (event) { $('#dashboard-content').scrollTop(0); //scroll up - + var $targetId = this.$(event.target).attr('id'), $previousTab = this.$(this.$('li.active a').attr('href')), $targetTab = this.$(this.$(event.target).attr('href')); @@ -1628,7 +1631,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, $previousTab.removeAttr('style'); } //stop polling - this.ddocInfoView.stopRefreshInterval(); + this.ddocInfoView.stopRefreshInterval(); if ($targetId === 'index-nav') { if (this.newView) { return; } @@ -1640,8 +1643,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, } else if ($targetId === "meta-nav"){ if (!$("#ddoc-info").is(":visible")){ this.ddocInfoView.startRefreshInterval(); - } - $targetTab.toggle('slow'); + } + $targetTab.toggle('slow'); } else { $targetTab.toggle('slow'); } @@ -1688,7 +1691,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, renderDdocInfo: function(){ if(this.ddocInfoView){ this.ddocInfoView.remove(); - } + } if (this.newView) { return; } this.ddocInfoView = this.setView('#ddoc-info', new Views.DdocInfo({model: this.ddocInfo })); @@ -1713,7 +1716,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, this.designDocSelector = this.setView('.design-doc-group', new Views.DesignDocSelector({ collection: this.ddocs, - ddocName: this.model.id, + ddocName: this.currentDdoc || this.model.id, database: this.database })); @@ -1816,6 +1819,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, Views.Sidebar = FauxtonAPI.View.extend({ template: "addons/documents/templates/sidebar", + className: "sidenav", + tagName: "nav", events: { "click button#delete-database": "showDeleteDatabaseModal" }, @@ -1849,17 +1854,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, }; }, - buildIndexList: function(collection, selector, design){ - _.each(_.keys(collection), function(key){ - var selected = this.ddocID == "_design/"+design; - this.insertView("ul.nav." + selector, new Views.IndexItem({ - ddoc: design, - index: key, - database: this.collection.database.id, - selected: selected && key == this.currView - })); - }, this); - }, beforeRender: function(manage) { this.deleteDBModal = this.setView( @@ -1867,21 +1861,14 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, new Views.DeleteDBModal({database: this.database}) ); - var sidebarListViews = FauxtonAPI.getExtensions('sidebar:list'); - _.each(sidebarListViews, function (view) { - var extension = this.insertView('#extension-navs', view); - extension.update(this.database, this.collection, this.viewName); - extension.render(); - }, this); - this.collection.each(function(design) { if (design.has('doc')){ - var ddoc = design.id.replace(/^_design\//,""); - if (design.get('doc').views){ - this.buildIndexList(design.get('doc').views, "views", ddoc); - } + this.insertView(new Views.DdocSidenav({ + model: design, + collection: this.collection + })); } - }, this); + },this); }, @@ -1893,8 +1880,88 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, setSelectedTab: function (selectedTab) { this.selectedTab = selectedTab; + var $selectedTab = this.$('#' + selectedTab); + this.$('li').removeClass('active'); - this.$('#' + selectedTab).parent().addClass('active'); + $selectedTab.parent().addClass('active'); + + if ($selectedTab.parents(".accordion-body").length !== 0){ + $selectedTab + .parents(".accordion-body") + .addClass("in") + .parents(".nav-header") + .find(".js-collapse-toggle").addClass("down"); + } + + } + }); + + + Views.DdocSidenav = FauxtonAPI.View.extend({ + tagName: "ul", + className: "nav nav-list", + template: "addons/documents/templates/design_doc_menu", + events: { + "click button": "no", + "click .js-collapse-toggle": "toggleArrow" + }, + initialize: function(){ + + }, + toggleArrow: function(e){ + this.$(e.currentTarget).toggleClass("down"); + }, + no: function(event){ + event.preventDefault(); + alert("no"); + }, + buildIndexList: function(collection, selector){ + var design = this.model.id.replace(/^_design\//,""); + _.each(_.keys(collection[selector]), function(key){ + this.insertView(".accordion-body", new Views.IndexItem({ + selector: selector, + ddoc: design, + index: key, + database: this.model.collection.database.id + })); + }, this); + }, + + serialize: function(){ + var ddocName = this.model.id.replace(/^_design\//,""); + return{ + database: this.collection.database, + designDoc: ddocName, + ddoc_clean: app.utils.removeSpecialCharacters(ddocName), + ddoc_encoded: app.utils.safeURLName(ddocName), + database_encoded: app.utils.safeURLName(this.model.collection.database.id), + }; + }, + beforeRender: function(manage) { + var ddocDocs = this.model.get("doc"); + var ddocName = this.model.id.replace(/^_design\//,""); + + var sidebarListTypes = FauxtonAPI.getExtensions('sidebar:list'); + if (ddocDocs){ + //Views + this.buildIndexList(ddocDocs, "views"); + //lists + // this.buildIndexList(ddocDocs, "lists"); + // //show + // this.buildIndexList(ddocDocs, "show"); + // //filters + // this.buildIndexList(ddocDocs, "filters"); + //extensions + _.each(sidebarListTypes, function (type) { + this.buildIndexList(ddocDocs, type); + },this); + } + this.insertView(".new-button", new Views.newMenuDropdown({ + database: this.collection.database, + ddocSafeName: app.utils.safeURLName(ddocName), + fullMenu: false + })); + } }); @@ -1950,6 +2017,31 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, } }); + + Views.newMenuDropdown = FauxtonAPI.View.extend({ + template: "addons/documents/templates/add_new_ddoc_fn_dropdown", + tagName: "div", + className: "dropdown", + initialize: function(options){ + this.database = options.database; + this.fullMenu = options.fullMenu; + this.ddocSafeName = options.ddocSafeName || ""; + }, + serialize: function(){ + var sidebarItem = FauxtonAPI.getExtensions('sidebar:links'); + return { + extensionLinks: sidebarItem, + database: this.database, + ddocSafe: this.ddocSafeName, + full: this.fullMenu + }; + } + }); + + + Views.temp = FauxtonAPI.View.extend({ + }); + Views.DdocInfo = FauxtonAPI.View.extend({ template: "addons/documents/templates/ddoc_info", http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/app/templates/layouts/two_pane.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/templates/layouts/two_pane.html b/src/fauxton/app/templates/layouts/two_pane.html index 0c3165e..031ad12 100644 --- a/src/fauxton/app/templates/layouts/two_pane.html +++ b/src/fauxton/app/templates/layouts/two_pane.html @@ -22,7 +22,6 @@ the License. <div class="row-fluid content-area"> - <div id="tabs" class="row"></div> <div id="left-content" class="span6"></div> <div id="right-content" class="span6"></div> </div> http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/assets/less/bootstrap/dropdowns.less ---------------------------------------------------------------------- diff --git a/src/fauxton/assets/less/bootstrap/dropdowns.less b/src/fauxton/assets/less/bootstrap/dropdowns.less index 9e47b47..5b3ca77 100644 --- a/src/fauxton/assets/less/bootstrap/dropdowns.less +++ b/src/fauxton/assets/less/bootstrap/dropdowns.less @@ -39,6 +39,7 @@ // The dropdown menu (ul) // ---------------------- .dropdown-menu { + position: absolute; top: 100%; left: 0; @@ -46,7 +47,6 @@ display: none; // none by default, but block on "open" of the menu float: left; min-width: 160px; - padding: 5px 0; margin: 2px 0 0; // override default ul list-style: none; background-color: @dropdownBackground; @@ -54,8 +54,6 @@ border: 1px solid @dropdownBorder; *border-right-width: 2px; *border-bottom-width: 2px; - .border-radius(6px); - .box-shadow(0 5px 10px rgba(0,0,0,.2)); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; @@ -65,7 +63,29 @@ right: 0; left: auto; } - + li.header-label{ + background-color: #1A1A1A; + color: #676767; + padding: 3px 20px; + font-size: 13px; + } + &.arrow { + &:before{ + content: ""; + display: block; + position: absolute; + border-style: solid; + top: -20px; + right: 10%; + width: 0; + height: 0; + margin-left: -10px; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid #2b2f33; + border-top: 10px solid transparent; + } + } // Dividers (basically an hr) within the dropdown .divider { .nav-divider(@dropdownDividerTop, @dropdownDividerBottom); @@ -73,6 +93,10 @@ // Links within the dropdown menu > li > a { + &.icon:before{ + padding-right: 5px; + } + font-size: 12px; display: block; padding: 3px 20px; clear: both; @@ -80,6 +104,7 @@ line-height: @baseLineHeight; color: @dropdownLinkColor; white-space: nowrap; + border-bottom: 1px solid #1A1A1A; } } http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/assets/less/bootstrap/navs.less ---------------------------------------------------------------------- diff --git a/src/fauxton/assets/less/bootstrap/navs.less b/src/fauxton/assets/less/bootstrap/navs.less index 01cd805..0013179 100644 --- a/src/fauxton/assets/less/bootstrap/navs.less +++ b/src/fauxton/assets/less/bootstrap/navs.less @@ -37,12 +37,9 @@ .nav-header { display: block; padding: 3px 15px; - font-size: 11px; - font-weight: bold; line-height: @baseLineHeight; color: @grayLight; text-shadow: 0 1px 0 rgba(255,255,255,.5); - text-transform: uppercase; } // Space them out when they follow another list item (link) .nav li + .nav-header { http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/assets/less/bootstrap/variables.less ---------------------------------------------------------------------- diff --git a/src/fauxton/assets/less/bootstrap/variables.less b/src/fauxton/assets/less/bootstrap/variables.less index 31c131b..f52b2cb 100644 --- a/src/fauxton/assets/less/bootstrap/variables.less +++ b/src/fauxton/assets/less/bootstrap/variables.less @@ -119,12 +119,12 @@ // Dropdowns // ------------------------- -@dropdownBackground: @white; +@dropdownBackground: #2B2F33; @dropdownBorder: rgba(0,0,0,.2); -@dropdownDividerTop: #e5e5e5; -@dropdownDividerBottom: @white; +@dropdownDividerTop: #1A1A1A; +@dropdownDividerBottom: #1A1A1A; -@dropdownLinkColor: @grayDark; +@dropdownLinkColor: #D9D9D9; @dropdownLinkColorHover: @white; @dropdownLinkColorActive: @white; http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/assets/less/fauxton.less ---------------------------------------------------------------------- diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less index dc6435b..420876a 100644 --- a/src/fauxton/assets/less/fauxton.less +++ b/src/fauxton/assets/less/fauxton.less @@ -499,7 +499,7 @@ table.databases { background-color: @bottomNav; &.active{ background-color:@linkRed; - } + } &:hover{ background-color: @navBGHover; } @@ -558,12 +558,15 @@ table.databases { padding: 0px; bottom: 0px; top: 60px; - position: absolute; + position: fixed; overflow-x: hidden; overflow-y: auto; - left: @sidebarWidth; + left: @sidebarWidth+@navWidth; right: 0; .box-sizing(border-box); + .closeMenu & { + left: @sidebarWidth+@collapsedNavWidth; + } } > div.inner { display: block; @@ -667,7 +670,7 @@ table.databases { } } -#sidenav{ +.sidenav{ padding: 0; header { width: @sidebarWidth; @@ -675,46 +678,48 @@ table.databases { background: transparent url('../img/linen.png') repeat 0 0; .topmenu-defaults; } - nav { - .nav-list{ - .divider { - border: none; - } - li.active a { - background-color: @darkRed; - color: #fff; - } - a{ - display: block; - padding: 10px 5px 10px 15px; - color: #333333; - border-bottom: 1px solid #989898; - .divider { - background: none; - color: #ccc; - padding: 0 2px; - } - } - .nav-header{ - background-color: #B2B2B2; - padding: 5px; - text-shadow: none; - color: #333333; - border-bottom: 1px solid #989898; + .nav-list{ + .divider { + border: none; + } + li.active a { + background-color: @darkRed; + color: #fff; + } + > li > a{ + padding: 10px 13px 10px 30px; + border-bottom: 1px solid #d3d7db; + } + .dropdown-menu { + a { + color: #d9d9d9; } + } + a{ + display: block; + padding: 10px 5px 10px 15px; + color: #333333; + .divider { + background: none; + color: #ccc; + padding: 0 2px; + } + } + .nav-header{ + padding: 0px; + text-shadow: none; + color: #333333; + margin-bottom: -4px; } } } + #sidebar-content { -.box-shadow(-7px 0 15px -6px #000); position: absolute; - bottom: 0px; top: 60px; width: @sidebarWidth; left: 0; - overflow-x: hidden; - overflow-y: auto; background-color: @secondarySidebar; > div.inner { display: block; @@ -780,14 +785,14 @@ table.databases { .custom-inputs{ - input[type=radio], - input[type=checkbox] { - display: none; - } + input[type=radio], + input[type=checkbox] { + display: none; + } - .checkbox label:before { - border-radius: 3px; - } + .checkbox label:before { + border-radius: 3px; + } .controls > .radio:first-child, .controls > .checkbox:first-child { padding-top: 15px; @@ -800,42 +805,42 @@ table.databases { vertical-align: middle; } - input[type=checkbox]:checked + label:before { + input[type=checkbox]:checked + label:before { /*content: "\2713"; */ - content: "\00d7"; - text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); + content: "\00d7"; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 16px; - background-color: @red; - color: white; - text-align: center; - line-height: 15px; - } - - label:before { - content: ""; - display: inline-block; - - width: 16px; - height: 16px; - - margin-right: 10px; - position: absolute; - left: 0; - bottom: 1px; - background-color: #aaa; - box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); - } - - .radio label:before { - border-radius: 8px; - } - - input[type=radio]:checked + label:before { - content: "\2022"; - color: #f3f3f3; - font-size: 30px; - text-align: center; - line-height: 18px; + background-color: @red; + color: white; + text-align: center; + line-height: 15px; + } + + label:before { + content: ""; + display: inline-block; + + width: 16px; + height: 16px; + + margin-right: 10px; + position: absolute; + left: 0; + bottom: 1px; + background-color: #aaa; + box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); + } + + .radio label:before { + border-radius: 8px; + } + + input[type=radio]:checked + label:before { + content: "\2022"; + color: #f3f3f3; + font-size: 30px; + text-align: center; + line-height: 18px; } label.drop-down{ http://git-wip-us.apache.org/repos/asf/couchdb/blob/da25852c/src/fauxton/assets/less/variables.less ---------------------------------------------------------------------- diff --git a/src/fauxton/assets/less/variables.less b/src/fauxton/assets/less/variables.less index 4876013..2377e6b 100644 --- a/src/fauxton/assets/less/variables.less +++ b/src/fauxton/assets/less/variables.less @@ -54,6 +54,7 @@ @sidebarBG: #F2F2F2; @sidebarWidth: 330px; + @NavIconActive: #ffffff; @NavIcon: @brown;
