add-app wizard preview is now optional (buttons changes) and minor gui tidies
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/70da4fb1 Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/70da4fb1 Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/70da4fb1 Branch: refs/heads/0.5.0 Commit: 70da4fb1edd645282228c413be8d211e48fa7b60 Parents: 8d99a20 Author: Alex Heneveld <[email protected]> Authored: Sat Dec 1 19:18:24 2012 -0800 Committer: Alex Heneveld <[email protected]> Committed: Sat Dec 1 19:23:56 2012 -0800 ---------------------------------------------------------------------- .../src/main/webapp/assets/css/prettybrook.css | 21 ++++++--- .../webapp/assets/js/libs/brooklyn-utils.js | 5 +++ .../assets/js/view/application-add-wizard.js | 47 ++++++++++---------- .../assets/js/view/application-explorer.js | 4 +- .../src/main/webapp/assets/js/view/home.js | 4 +- .../src/main/webapp/assets/js/view/viewutils.js | 3 +- .../assets/tpl/app-add-wizard/modal-wizard.html | 8 ++-- .../src/main/webapp/assets/tpl/apps/page.html | 2 +- .../webapp/assets/tpl/home/applications.html | 2 +- 9 files changed, 58 insertions(+), 38 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/70da4fb1/usage/jsgui/src/main/webapp/assets/css/prettybrook.css ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/css/prettybrook.css b/usage/jsgui/src/main/webapp/assets/css/prettybrook.css index 11c2d0a..7de2c22 100644 --- a/usage/jsgui/src/main/webapp/assets/css/prettybrook.css +++ b/usage/jsgui/src/main/webapp/assets/css/prettybrook.css @@ -18,8 +18,14 @@ margin-top: 40px; margin-bottom: 40px; } -.no-padding { - padding: 0 !important; +.add-app .modal-body { + padding: 0; +} +#application-content div#application-explorer { + padding-left: 52px; +} +#application-content div#details { + margin-left: 8px !important; } #application-content ul.nav-tabs { margin: 15px 15px 0px 15px; @@ -72,7 +78,11 @@ #application-content .template-lozenge .description { font-size: 85%; } -#application-content .sensor-value { +#preview_step { + margin-left: 18px; +} +#application-content .sensor-value, +#application-content .config-value { font-weight: 700; max-width: 500px; max-height: 40px; @@ -416,7 +426,7 @@ input[type="color"]:focus,.uneditable-input:focus { height: auto; } .tab-content { - padding: 18px 24px 18px 24px; + padding: 18px; border-right: 1px solid #DDD; border-left: 1px solid #DDD; min-height: 300px; @@ -439,7 +449,7 @@ ol.tree { /* margin: 0; */ } #tree-list span.leaf { - margin-left: 16px !important; + margin-left: 17px !important; } #tree-list li.application { margin-top: 6px !important; @@ -725,6 +735,7 @@ div.for-empty-table { #application-explorer div#summary textarea { width: 100%; cursor: auto; + margin-bottom: 2px; } /* catalog */ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/70da4fb1/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-utils.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-utils.js b/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-utils.js index 4cc917c..e86f75f 100644 --- a/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-utils.js +++ b/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-utils.js @@ -17,3 +17,8 @@ function log(obj) { console.log(obj); } } + +function setVisibility(obj, visible) { + if (visible) obj.show() + else obj.hide() +} http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/70da4fb1/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js b/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js index c4e53b8..a68ec73 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js @@ -30,8 +30,10 @@ define([ tagName:'div', className:'modal hide fade', events:{ + 'click #prev_step':'prevStep', 'click #next_step':'nextStep', - 'click #prev_step':'prevStep' + 'click #preview_step':'previewStep', + 'click #finish_step':'finishStep' }, template:_.template(ModalHtml), initialize:function () { @@ -73,8 +75,6 @@ define([ renderCurrentStep:function () { this.title = this.$("h3#step_title") this.instructions = this.$("p#step_instructions") - this.nextStepButton = this.$("#next_step") - this.prevStepButton = this.$("#prev_step") var currentStep = this.steps[this.currentStep] this.title.html(currentStep.title) @@ -84,21 +84,14 @@ define([ // delegate to sub-views !! this.$(".modal-body").replaceWith(this.currentView.render().el) - if (this.currentStep > 0) { - this.prevStepButton.html("Previous").show() - } else { - this.prevStepButton.hide() - } - - if (this.currentStep < 2) { - this.nextStepButton.html("Next") - } else { - this.nextStepButton.html("Finish") - } + setVisibility(this.$("#prev_step"), (this.currentStep > 0)) + setVisibility(this.$("#next_step"), (this.currentStep < 1)) + setVisibility(this.$("#preview_step"), (this.currentStep == 1)) + setVisibility(this.$("#finish_step"), (this.currentStep >= 1)) }, submitApplication:function (event) { var that = this - var $modal = $('#modal-container .modal') + var $modal = $('#modal-container.add-app .modal') $modal.fadeTo(500,0.5); $.ajax({ url:'/v1/applications', @@ -118,20 +111,28 @@ define([ }) return false }, - // TODO prev and next not so simple anymore, are they? + prevStep:function () { + this.currentStep -= 1 + this.renderCurrentStep() + }, nextStep:function () { - if (this.currentView.validate()) { - if (this.currentStep < 2) { + if (this.currentStep < 2) { + if (this.currentView.validate()) { this.currentStep += 1 this.renderCurrentStep() - } else { - this.submitApplication() } + } else { + this.finishStep() } }, - prevStep:function () { - this.currentStep -= 1 - this.renderCurrentStep() + previewStep:function () { + // slight cheat, but good enough for now + this.nextStep() + }, + finishStep:function () { + if (this.currentView.validate()) { + this.submitApplication() + } } }) http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/70da4fb1/usage/jsgui/src/main/webapp/assets/js/view/application-explorer.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/application-explorer.js b/usage/jsgui/src/main/webapp/assets/js/view/application-explorer.js index 3ebf74f..3cf2009 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/application-explorer.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/application-explorer.js @@ -57,8 +57,8 @@ define([ callback:function() { that.refreshApplications() } }) this._modal = wizard - this.$("#modal-container").html(wizard.render().el) - this.$("#modal-container .modal") + this.$("#modal-container.add-app").html(wizard.render().el) + this.$("#modal-container.add-app .modal") .on("hidden",function () { wizard.close() }).modal('show') http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/70da4fb1/usage/jsgui/src/main/webapp/assets/js/view/home.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/home.js b/usage/jsgui/src/main/webapp/assets/js/view/home.js index 88a748a..758d146 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/home.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/home.js @@ -118,8 +118,8 @@ define([ if (!this.options.offline) { var wizard = new AppAddWizard({appRouter:this.options.appRouter}) this._modal = wizard - this.$("#modal-container").html(wizard.render().el) - this.$("#modal-container .modal") + this.$("#modal-container.add-app").html(wizard.render().el) + this.$("#modal-container.add-app .modal") .on("hidden",function () { wizard.close() that.refresh(that) http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/70da4fb1/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js b/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js index 07fb6f5..b802119 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js @@ -13,7 +13,8 @@ define([ "sSearch": "", "sInfo": "_START_ - _END_ of _TOTAL_ ", "sInfoEmpty": "<i>No data</i> ", - "sEmptyTable": "<i>No matching records currently available</i>", + "sEmptyTable": "<i>No matching records available</i>", + "sZeroRecords": "<i>No matching records found</i>", "oPaginate": { "sFirst": "<<", "sPrevious": "<", http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/70da4fb1/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/modal-wizard.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/modal-wizard.html b/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/modal-wizard.html index 19f1874..7aa59bb 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/modal-wizard.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/modal-wizard.html @@ -5,9 +5,11 @@ <p id="step_instructions">Instructions placeholder</p> </div> -<div class="modal-body no-padding"></div> +<div class="modal-body"></div> <div class="modal-footer"> - <button id="prev_step" type="button" class="btn btn-mini btn-info">Previous</button> - <button id="next_step" type="button" class="btn btn-mini btn-info">Next</button> + <button id="prev_step" type="button button-previous" class="btn btn-mini btn-info">Back</button> + <button id="next_step" type="button button-next" class="btn btn-mini btn-info">Next</button> + <button id="preview_step" type="button button-preview" class="btn btn-mini btn-info">Preview</button> + <button id="finish_step" type="button button-finish" class="btn btn-mini btn-info">Finish</button> </div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/70da4fb1/usage/jsgui/src/main/webapp/assets/tpl/apps/page.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/page.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/page.html index 62f9ebb..83d69b1 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/page.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/page.html @@ -15,4 +15,4 @@ <div class="span8" id="details"></div> </div> -<div id="modal-container"></div> \ No newline at end of file +<div id="modal-container" class="add-app"></div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/70da4fb1/usage/jsgui/src/main/webapp/assets/tpl/home/applications.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/home/applications.html b/usage/jsgui/src/main/webapp/assets/tpl/home/applications.html index cad411c..e95221d 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/home/applications.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/home/applications.html @@ -36,4 +36,4 @@ </div> </div></div> -<div id="modal-container"></div> +<div id="modal-container" class="add-app"></div>
