Repository: couchdb-fauxton Updated Branches: refs/heads/master 38ad69079 -> 20d635676
Moved Add Section button on Config page to header. Closes COUCHDB-2421 Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/20d63567 Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/20d63567 Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/20d63567 Branch: refs/heads/master Commit: 20d6356768ae5a7eaf04b7b260379dd688f5f075 Parents: 38ad690 Author: Benjamin Keen <[email protected]> Authored: Thu Oct 30 21:43:49 2014 -0700 Committer: Robert Kowalski <[email protected]> Committed: Wed Nov 5 11:28:34 2014 +0100 ---------------------------------------------------------------------- app/addons/config/assets/less/config.less | 23 +++++++-- app/addons/config/routes.js | 26 +++++----- app/addons/config/templates/addsection.html | 18 +++++++ app/addons/config/templates/dashboard.html | 18 ++----- app/addons/config/templates/header.html | 19 ++++++++ app/addons/config/templates/item.html | 4 +- app/addons/config/templates/modal.html | 4 +- app/addons/config/views.js | 62 +++++++++++++----------- 8 files changed, 111 insertions(+), 63 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20d63567/app/addons/config/assets/less/config.less ---------------------------------------------------------------------- diff --git a/app/addons/config/assets/less/config.less b/app/addons/config/assets/less/config.less index 48708ee..163dd05 100644 --- a/app/addons/config/assets/less/config.less +++ b/app/addons/config/assets/less/config.less @@ -10,9 +10,9 @@ * License for the specific language governing permissions and limitations under * the License. */ -button.addSection { - margin-bottom: 12px; -} +@import "../../../../../assets/less/variables.less"; + + .config-item { height: 65px; @@ -31,7 +31,7 @@ button.addSection { button { width: 7%;} } -#add-section-modal .modal { +.modal.add-section-modal { width: 400px; margin-left: -200px; left: 50%; @@ -64,3 +64,18 @@ table.config { } } +#add-new-section { + line-height: 40px; + cursor: pointer; + + &:hover { + transition: none; + text-decoration: none; + color: @red; + } +} + +#add-section-button { + border-left: 1px solid #ccc; + padding: 10px 14px; +} http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20d63567/app/addons/config/routes.js ---------------------------------------------------------------------- diff --git a/app/addons/config/routes.js b/app/addons/config/routes.js index affb453..2585cad 100644 --- a/app/addons/config/routes.js +++ b/app/addons/config/routes.js @@ -11,29 +11,26 @@ // the License. define([ - "app", - "api", - - // Modules - "addons/config/resources", - "addons/config/views" + 'app', + 'api', + 'addons/config/resources', + 'addons/config/views' ], function(app, FauxtonAPI, Config, Views) { var ConfigRouteObject = FauxtonAPI.RouteObject.extend({ - layout: "one_pane", + layout: 'one_pane_db', initialize: function () { this.configs = new Config.Collection(); }, - roles: ["_admin"], - - selectedHeader: "Config", + roles: ['_admin'], + selectedHeader: 'Config', crumbs: [ - {"name": "Config","link": "_config"} + { name: 'Config', link: '_config' } ], apiUrl: function () { @@ -41,11 +38,12 @@ function(app, FauxtonAPI, Config, Views) { }, routes: { - "_config": "config" + '_config': 'config' }, config: function () { - this.setView("#dashboard-content", new Views.Table({collection: this.configs})); + this.newSection = this.setView('#right-header', new Views.AddSectionButton({ collection: this.configs })); + this.setView('#dashboard-content', new Views.Table({ collection: this.configs })); }, establish: function () { @@ -53,7 +51,7 @@ function(app, FauxtonAPI, Config, Views) { } }); - Config.RouteObjects = [ConfigRouteObject]; + return Config; }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20d63567/app/addons/config/templates/addsection.html ---------------------------------------------------------------------- diff --git a/app/addons/config/templates/addsection.html b/app/addons/config/templates/addsection.html new file mode 100644 index 0000000..1249d93 --- /dev/null +++ b/app/addons/config/templates/addsection.html @@ -0,0 +1,18 @@ +<%/* +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 id="header-api-bar" class="button"></div> +<div id="add-section-button" class="button"> + <a id="add-new-section" class="add-new-section-btn"><i class="icon icon-plus header-icon"></i> Add Section</a> +</div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20d63567/app/addons/config/templates/dashboard.html ---------------------------------------------------------------------- diff --git a/app/addons/config/templates/dashboard.html b/app/addons/config/templates/dashboard.html index 20aecac..f7fae00 100644 --- a/app/addons/config/templates/dashboard.html +++ b/app/addons/config/templates/dashboard.html @@ -1,4 +1,4 @@ -<!-- +<%/* 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 @@ -10,23 +10,15 @@ 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="row"> - <button id="js-add-section" href="#" class="btn btn-primary pull-right addSection"> - <i class="icon icon-plus icon-white"> </i> - Add Section - </button> -</div> +*/%> <table class="config table table-striped table-bordered"> <thead> - <th id="config-section" width="20%"> Section </th> - <th id="config-option" width="20%"> Option </th> - <th id="config-value"> Value </th> + <th id="config-section" width="20%">Section</th> + <th id="config-option" width="20%">Option</th> + <th id="config-value">Value</th> <th id="config-trash"></th> </thead> <tbody> </tbody> </table> -<div id="add-section-modal"></div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20d63567/app/addons/config/templates/header.html ---------------------------------------------------------------------- diff --git a/app/addons/config/templates/header.html b/app/addons/config/templates/header.html new file mode 100644 index 0000000..2e19b75 --- /dev/null +++ b/app/addons/config/templates/header.html @@ -0,0 +1,19 @@ +<%/* +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. +*/%> + +<!-- floats right --> +<div id="header-api-bar" class="button"></div> + +<!-- add database--> +<div id="add-db-button" class="button"></div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20d63567/app/addons/config/templates/item.html ---------------------------------------------------------------------- diff --git a/app/addons/config/templates/item.html b/app/addons/config/templates/item.html index 04b943a..d07cd66 100644 --- a/app/addons/config/templates/item.html +++ b/app/addons/config/templates/item.html @@ -1,4 +1,4 @@ -<!-- +<%/* 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 @@ -10,7 +10,7 @@ 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. ---> +*/%> <% if (option.index === 0) {%> <th> <%- option.section %> </th> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20d63567/app/addons/config/templates/modal.html ---------------------------------------------------------------------- diff --git a/app/addons/config/templates/modal.html b/app/addons/config/templates/modal.html index 4aa7b8a..97e071a 100644 --- a/app/addons/config/templates/modal.html +++ b/app/addons/config/templates/modal.html @@ -1,4 +1,4 @@ - <!-- +<%/* 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 @@ -10,7 +10,7 @@ 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="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20d63567/app/addons/config/views.js ---------------------------------------------------------------------- diff --git a/app/addons/config/views.js b/app/addons/config/views.js index 3a43225..39a2920 100644 --- a/app/addons/config/views.js +++ b/app/addons/config/views.js @@ -23,7 +23,6 @@ function(app, FauxtonAPI, Config, Components) { tagName: "tr", className: "config-item", template: "addons/config/templates/item", - events: { "dblclick .js-edit-value": "editValue", "click .js-delete-value": "deleteValue", @@ -112,26 +111,12 @@ function(app, FauxtonAPI, Config, Components) { Views.Table = FauxtonAPI.View.extend({ template: "addons/config/templates/dashboard", - events: { - "click #js-add-section": "addSection" - }, - initialize: function(){ this.listenTo(FauxtonAPI.Events, "config:newSection", this.render); this.listenTo(FauxtonAPI.Events, "config:rerender", this.render); }, - addSection: function (event) { - event.preventDefault(); - this.modal.show(); - }, - beforeRender: function() { - this.modal = this.insertView("#add-section-modal", new Views.Modal({ - collection: this.collection - })); - - this.modal.render(); var collection = this.collection; this.collection.each(function(config) { @@ -155,11 +140,11 @@ function(app, FauxtonAPI, Config, Components) { }); Views.Modal = FauxtonAPI.View.extend({ - className: "modal hide fade", - template: "addons/config/templates/modal", + className: 'add-section-modal modal hide fade', + template: 'addons/config/templates/modal', events: { - "submit #js-add-section-form": "submitClick" + 'submit #js-add-section-form': 'submitClick' }, initialize: function () { @@ -186,20 +171,20 @@ function(app, FauxtonAPI, Config, Components) { option.save(); var section = this.collection.find(function (section) { - return section.get("section") === option.get("section"); + return section.get('section') === option.get('section'); }); if (section) { - section.get("options").push(option.attributes); + section.get('options').push(option.attributes); } else { this.collection.add({ - section: option.get("section"), + section: option.get('section'), options: [option.attributes] }); } this.hide(); - FauxtonAPI.Events.trigger("config:newSection"); + FauxtonAPI.Events.trigger('config:newSection'); }, isUniqueEntryInSection: function (collection) { @@ -226,11 +211,11 @@ function(app, FauxtonAPI, Config, Components) { collection = this.collection; if (!name) { - this.errorMessage("Add a name"); + this.errorMessage('Add a name'); } else if (!value) { - this.errorMessage("Add a value"); + this.errorMessage('Add a value'); } else if (this.isUniqueEntryInSection(collection)) { - this.errorMessage("Must have a unique name"); + this.errorMessage('Must have a unique name'); } else { this.submitForm(); } @@ -239,9 +224,9 @@ function(app, FauxtonAPI, Config, Components) { errorMessage: function (msg) { FauxtonAPI.addNotification({ msg: msg, - type: "error", + type: 'error', clear: true, - selector: ".js-form-error-config" + selector: '.js-form-error-config' }); }, @@ -254,6 +239,27 @@ function(app, FauxtonAPI, Config, Components) { } }); - return Views; + Views.AddSectionButton = FauxtonAPI.View.extend({ + template: 'addons/config/templates/addsection', + className: 'header-right', + events: { + 'click #add-new-section': 'addSection' + }, + + addSection: function (e) { + e.preventDefault(); + this.modal.show(); + }, + + beforeRender: function () { + this.modal = this.insertView('body', new Views.Modal({ + collection: this.collection + })); + + this.modal.render(); + } + }); + + return Views; });
