AMBARI-7255 Slider View: Create slider app should have add/remove/cancel buttons consistent with Ambari. (ababiichuk)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/71c98457 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/71c98457 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/71c98457 Branch: refs/heads/branch-alerts-dev Commit: 71c984577ff80b1ea0adecd50badf4f632114423 Parents: 11c057d Author: aBabiichuk <ababiic...@cybervisiontech.com> Authored: Thu Sep 11 12:55:33 2014 +0300 Committer: aBabiichuk <ababiic...@cybervisiontech.com> Committed: Thu Sep 11 12:55:33 2014 +0300 ---------------------------------------------------------------------- .../ui/app/components/configSection.js | 12 ++- .../resources/ui/app/styles/application.less | 7 +- .../app/templates/components/configSection.hbs | 90 ++++++++++---------- .../src/main/resources/ui/app/translations.js | 4 +- 4 files changed, 63 insertions(+), 50 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/71c98457/contrib/views/slider/src/main/resources/ui/app/components/configSection.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/components/configSection.js b/contrib/views/slider/src/main/resources/ui/app/components/configSection.js index c5858bc..43a2427 100644 --- a/contrib/views/slider/src/main/resources/ui/app/components/configSection.js +++ b/contrib/views/slider/src/main/resources/ui/app/components/configSection.js @@ -92,6 +92,15 @@ App.ConfigSectionComponent = Em.Component.extend({ }); }, + addPropertyModalButtons: [ + Ember.Object.create({title: Em.I18n.t('common.cancel'), clicked:"discard", dismiss: 'modal'}), + Ember.Object.create({title: Em.I18n.t('common.add'), clicked:"submit", type:'success'}) + ], + + addPropertyModalTitle: Em.I18n.t('configs.add_property'), + + tooltipRemove: Em.I18n.t('common.remove'), + actions: { /** @@ -99,7 +108,7 @@ App.ConfigSectionComponent = Em.Component.extend({ * @method addProperty */ addProperty: function() { - this.toggleProperty('buttonVisible'); + return Bootstrap.ModalManager.show('addPropertyModal'); }, /** @@ -116,6 +125,7 @@ App.ConfigSectionComponent = Em.Component.extend({ * @method submit */ submit: function() { + Bootstrap.ModalManager.hide('addPropertyModal'); var name = this.get('newConfig.name'), value = this.get('newConfig.value'); if (this.get('config').mapBy('name').contains(name)) { http://git-wip-us.apache.org/repos/asf/ambari/blob/71c98457/contrib/views/slider/src/main/resources/ui/app/styles/application.less ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/styles/application.less b/contrib/views/slider/src/main/resources/ui/app/styles/application.less index f5024a1..eb71c9a 100644 --- a/contrib/views/slider/src/main/resources/ui/app/styles/application.less +++ b/contrib/views/slider/src/main/resources/ui/app/styles/application.less @@ -19,7 +19,12 @@ html { overflow-y: scroll; } - +.icon-minus-sign { + color: #FF4B4B; +} +.tooltip { + z-index: 1500; +} .popover { max-width: 800px; } http://git-wip-us.apache.org/repos/asf/ambari/blob/71c98457/contrib/views/slider/src/main/resources/ui/app/templates/components/configSection.hbs ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/templates/components/configSection.hbs b/contrib/views/slider/src/main/resources/ui/app/templates/components/configSection.hbs index c6c77ec..b0d1db7 100644 --- a/contrib/views/slider/src/main/resources/ui/app/templates/components/configSection.hbs +++ b/contrib/views/slider/src/main/resources/ui/app/templates/components/configSection.hbs @@ -17,60 +17,56 @@ }} {{#bs-panel heading=sectionLabel collapsible=true dismiss=false open=isGeneral }} - <form class="form-horizontal" role="form"> - {{#each config in sectionConfigs}} - <div class="form-group"> - - <label class="col-sm-4 control-label">{{formatWordBreak config.label devider='.'}}</label> - - <div class="col-sm-6"> - {{input value=config.value class="form-control"}} - </div> + <form class="form-horizontal" role="form"> + {{#each config in sectionConfigs}} + <div class="form-group"> + <label class="col-sm-4 control-label">{{formatWordBreak config.label devider='.'}}</label> + <div class="col-sm-6"> + {{input value=config.value class="form-control"}} + </div> + {{#if isCustom}} + <div class="col-sm-2"> + {{#bs-button clicked="deleteConfig" clickedParamBinding="config"}} + <i {{bs-bind-tooltip content=tooltipRemove}} class="icon-minus-sign"></i>{{/bs-button}} + </div> + {{/if}} - {{#if isCustom}} - <div class="col-sm-2"> - {{#bs-button clicked="deleteConfig" clickedParamBinding="config" type="danger"}}{{t common.delete}}{{/bs-button}} </div> - {{/if}} - - </div> - {{/each}} - </form> - {{#if isCustom}} - {{#if buttonVisible}} - {{#bs-button clicked="addProperty" type="primary"}}{{t configs.add_property}}{{/bs-button}} - {{else}} - {{! "Add Property"-form}} - <form class="form-horizontal" role="form"> + {{/each}} + </form> + {{#if isCustom}} + {{#bs-button clicked="addProperty" type="link"}}{{t configs.add_property}}...{{/bs-button}} + {{/if}} +{{/bs-panel}} +{{#bs-modal name="addPropertyModal" footerButtonsBinding="addPropertyModalButtons" titleBinding="addPropertyModalTitle"}} +{{! "Add Property"-form}} + <form class="form-horizontal" role="form"> <div class="form-group"> - <div class="col-sm-4"> - <label class="control-label">{{t common.name}}</label> - </div> - <div class="col-sm-6"> - <label class="control-label">{{t common.value}}</label> - </div> + <div class="col-sm-4"> + <label class="control-label">{{t common.key}}</label> + </div> + <div class="col-sm-6"> + {{input value=newConfig.name class="form-control"}} + </div> </div> <div {{bind-attr class=":form-group newConfig.hasError:has-error"}}> - <div class="col-sm-4"> - {{input value=newConfig.name class="form-control"}} - </div> - <div class="col-sm-6"> - {{input value=newConfig.value class="form-control"}} - </div> + <div class="col-sm-4"> + <label class="control-label">{{t common.value}}</label> + </div> + <div class="col-sm-6"> + {{input value=newConfig.value class="form-control"}} + </div> </div> <div class="form-group"> {{#if newConfig.hasError}} - <div class="col-sm-10"> - <div class="alert alert-danger"> - {{newConfig.messsage}} - </div> - </div> + <div class="col-sm-10"> + <div class="alert alert-danger"> + {{newConfig.messsage}} + </div> + </div> {{/if}} </div> - {{#bs-button clicked="submit" type="primary"}}{{t common.add}}{{/bs-button}} - {{#bs-button clicked="discard"}}{{t common.cancel}}{{/bs-button}} - </form> - {{! "Add Property"-form end}} - {{/if}} - {{/if}} -{{/bs-panel}} + </form> +{{! "Add Property"-form end}} +{{/bs-modal}} +{{outlet bs-tooltip-box}} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/71c98457/contrib/views/slider/src/main/resources/ui/app/translations.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/translations.js b/contrib/views/slider/src/main/resources/ui/app/translations.js index efa3979..8957c29 100644 --- a/contrib/views/slider/src/main/resources/ui/app/translations.js +++ b/contrib/views/slider/src/main/resources/ui/app/translations.js @@ -47,7 +47,9 @@ Em.I18n.translations = { 'finished': 'Finished', 'diagnostics': 'Diagnostics', 'description': 'Description', - 'alerts': 'Alerts' + 'alerts': 'Alerts', + 'key': 'Key', + 'remove': 'Remove' }, 'error.noHDFS': 'Slider applications view requires HDFS service.',