AMBARI-10812. Widgets: ui changes v2.(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/73a9275c Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/73a9275c Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/73a9275c Branch: refs/heads/trunk Commit: 73a9275c3e15c75c224ea2e1e4ef63e4e177ee28 Parents: 54be9c4 Author: Xi Wang <xiw...@apache.org> Authored: Tue Apr 28 17:53:27 2015 -0700 Committer: Xi Wang <xiw...@apache.org> Committed: Wed Apr 29 17:00:54 2015 -0700 ---------------------------------------------------------------------- .../service/widgets/create/step3_controller.js | 40 ++++++-------------- ambari-web/app/messages.js | 4 +- .../app/styles/enhanced_service_dashboard.less | 23 ++++++----- .../main/service/widgets/create/step3.hbs | 18 ++++----- .../main/service/widgets/create/step3_view.js | 12 ------ 5 files changed, 37 insertions(+), 60 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/73a9275c/ambari-web/app/controllers/main/service/widgets/create/step3_controller.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/main/service/widgets/create/step3_controller.js b/ambari-web/app/controllers/main/service/widgets/create/step3_controller.js index 02d677e..41897cc 100644 --- a/ambari-web/app/controllers/main/service/widgets/create/step3_controller.js +++ b/ambari-web/app/controllers/main/service/widgets/create/step3_controller.js @@ -22,20 +22,6 @@ App.WidgetWizardStep3Controller = Em.Controller.extend({ name: "widgetWizardStep3Controller", /** - * @type {Array} - */ - scopes: [ - Em.Object.create({ - name: 'User', - checked: false - }), - Em.Object.create({ - name: 'Cluster', - checked: false - }) - ], - - /** * @type {string} */ widgetName: '', @@ -46,11 +32,16 @@ App.WidgetWizardStep3Controller = Em.Controller.extend({ widgetAuthor: '', /** + * @type {boolean} + */ + isSharedChecked: false, + + /** * @type {string} */ widgetScope: function () { - return this.get('scopes').findProperty('checked'); - }.property('scopes.@each.checked'), + return this.get('isSharedChecked')? 'Cluster': 'User'; + }.property('isSharedChecked'), /** * @type {string} @@ -83,19 +74,12 @@ App.WidgetWizardStep3Controller = Em.Controller.extend({ this.set('widgetAuthor', App.router.get('loginName')); this.set('widgetName', this.get('content.widgetName')); this.set('widgetDescription', this.get('content.widgetDescription')); - this.get('scopes').forEach(function (scope) { - scope.set('checked', scope.get('name').toUpperCase() == this.get('content.widgetScope')); - }, this); - //if no scope selected, choose User by default - if (!this.get('scopes').someProperty('checked')) { - this.get('scopes').findProperty('name', 'User').set('checked', true); - } + this.set('isSharedChecked', this.get('content.widgetScope') == 'CLUSTER'); }, - //TODO: Following computed property needs to be implemented. Next button should be enabled when there is no validation error and all required fields are filled isSubmitDisabled: function () { - return !(this.get('widgetName') && this.get('widgetDescription')); - }.property('widgetName', 'widgetDescription'), + return !(this.get('widgetName')); + }.property('widgetName'), /** * collect all needed data to create new widget @@ -106,8 +90,8 @@ App.WidgetWizardStep3Controller = Em.Controller.extend({ WidgetInfo: { widget_name: this.get('widgetName'), widget_type: this.get('content.widgetType'), - description: this.get('widgetDescription'), - scope: this.get('widgetScope.name').toUpperCase(), + description: this.get('widgetDescription') || " ", + scope: this.get('widgetScope').toUpperCase(), "metrics": this.get('widgetMetrics').map(function (metric) { return { "name": metric.name, http://git-wip-us.apache.org/repos/asf/ambari/blob/73a9275c/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index 7b032b3..3b4105b 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -2519,7 +2519,9 @@ Em.I18n.translations = { 'widget.create.wizard.step2.allComponents': 'All {0}', 'widget.create.wizard.step2.activeComponents': 'Active {0}', 'widget.create.wizard.step2.noMetricFound': 'No metric found', - 'widget.create.wizard.step3.widgetName': 'Widget Name', + 'widget.create.wizard.step3.widgetName': 'Name', + 'widget.create.wizard.step3.sharing': 'Sharing', + 'widget.create.wizard.step3.sharing.msg': 'Share this widget in the widget library', 'widget.create.wizard.step3.header': 'Name and Description', 'widget.edit.wizard.header': 'Edit Widget', http://git-wip-us.apache.org/repos/asf/ambari/blob/73a9275c/ambari-web/app/styles/enhanced_service_dashboard.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/enhanced_service_dashboard.less b/ambari-web/app/styles/enhanced_service_dashboard.less index 3f1d497..2b8d3c7 100644 --- a/ambari-web/app/styles/enhanced_service_dashboard.less +++ b/ambari-web/app/styles/enhanced_service_dashboard.less @@ -399,14 +399,19 @@ .title { text-align: right; } - } - .radio-group { - line-height: 20px; - .checkbox { - padding-left: 0; + .icon-asterisk { + color: red; + font-size: 8px; + margin-left: 2px; + } + label.checkbox { + line-height: 20px; + margin-bottom: 0px; + margin-top: 5px; } - label { - margin-bottom: 0; + .description-text-area { + width: 320px; + height: 75px; } } } @@ -538,7 +543,7 @@ .modal { max-height: 703px; .modal-body { - max-height: 543px; + min-height: 541px; } } @@ -630,7 +635,7 @@ } } .no-widgets-text { - padding-left: 20px; + padding: 20px; color: #808080; } } http://git-wip-us.apache.org/repos/asf/ambari/blob/73a9275c/ambari-web/app/templates/main/service/widgets/create/step3.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/widgets/create/step3.hbs b/ambari-web/app/templates/main/service/widgets/create/step3.hbs index 126db15..7234692 100644 --- a/ambari-web/app/templates/main/service/widgets/create/step3.hbs +++ b/ambari-web/app/templates/main/service/widgets/create/step3.hbs @@ -21,7 +21,7 @@ <form> <div class="row-fluid"> - <div class="span2 title">{{t widget.create.wizard.step3.widgetName}}</div> + <div class="span2 title">{{t widget.create.wizard.step3.widgetName}}<i class="icon-asterisk"></i></div> <div class="span10">{{view Ember.TextField valueBinding="widgetName"}}</div> </div> @@ -31,20 +31,18 @@ </div> <div class="row-fluid"> - <div class="span2 title">{{t common.scope}}</div> - <div class="span10 radio-group"> - {{#each scope in scopes}} - <label class="checkbox"> - {{view view.scopeRadioButtonView checkedBinding="scope.checked" class="align-checkbox"}} - {{scope.name}} - </label> - {{/each}} + <div class="span2 title">{{t widget.create.wizard.step3.sharing}}</div> + <div class="span10"> + <label class="checkbox"> + {{view Ember.Checkbox checkedBinding="controller.isSharedChecked"}} + {{t widget.create.wizard.step3.sharing.msg}} + </label> </div> </div> <div class="row-fluid"> <div class="span2 title">{{t common.description}}</div> - <div class="span10">{{view Ember.TextArea valueBinding="widgetDescription"}}</div> + <div class="span10">{{view Ember.TextArea valueBinding="widgetDescription" class="description-text-area"}}</div> </div> </form> http://git-wip-us.apache.org/repos/asf/ambari/blob/73a9275c/ambari-web/app/views/main/service/widgets/create/step3_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/service/widgets/create/step3_view.js b/ambari-web/app/views/main/service/widgets/create/step3_view.js index 5cbf885..cdb975d 100644 --- a/ambari-web/app/views/main/service/widgets/create/step3_view.js +++ b/ambari-web/app/views/main/service/widgets/create/step3_view.js @@ -20,18 +20,6 @@ App.WidgetWizardStep3View = Em.View.extend({ templateName: require('templates/main/service/widgets/create/step3'), - /** - * @type {Ember.Checkbox} - */ - scopeRadioButtonView: Em.Checkbox.extend({ - attributeBindings: ['type', 'value', 'checked'], - type: 'radio', - - change: function () { - this.get('controller.scopes').setEach('checked', false); - } - }), - didInsertElement: function () { var controller = this.get('controller'); controller.initPreviewData();
