Repository: ambari Updated Branches: refs/heads/trunk 449818c67 -> af0debf52
AMBARI-11005-PART2. Widgets: UI changes v4.(xiwang) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/af0debf5 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/af0debf5 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/af0debf5 Branch: refs/heads/trunk Commit: af0debf52f576bb9736c0f73f5dae5ee36ca07a4 Parents: 449818c Author: Xi Wang <xiw...@apache.org> Authored: Tue May 12 14:42:07 2015 -0700 Committer: Xi Wang <xiw...@apache.org> Committed: Tue May 12 17:40:18 2015 -0700 ---------------------------------------------------------------------- .../app/styles/enhanced_service_dashboard.less | 26 +++++++++++ .../main/service/widgets/create/expression.hbs | 7 +++ .../service/widgets/create/expression_view.js | 47 ++++++++++++++++++++ 3 files changed, 80 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/af0debf5/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 f95bdec..5ea0c08 100644 --- a/ambari-web/app/styles/enhanced_service_dashboard.less +++ b/ambari-web/app/styles/enhanced_service_dashboard.less @@ -377,6 +377,32 @@ .controls.is-invalid { border-color: red; } + .add-item-input { + display: inline-block!important; + .ember-text-field{ + text-overflow: ellipsis; + white-space: nowrap; + position: relative; + font-weight: bold; + margin: 8px 0 10px 10px; + padding: 5px; + border: 1px solid #dddddd; + width: 50px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + border-radius: 0px; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; + } + .ember-text-field.is-invalid { + border: 1px solid red; + } + } } .template { margin-bottom: 10px; http://git-wip-us.apache.org/repos/asf/ambari/blob/af0debf5/ambari-web/app/templates/main/service/widgets/create/expression.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/widgets/create/expression.hbs b/ambari-web/app/templates/main/service/widgets/create/expression.hbs index 353ddff..3398725 100644 --- a/ambari-web/app/templates/main/service/widgets/create/expression.hbs +++ b/ambari-web/app/templates/main/service/widgets/create/expression.hbs @@ -40,8 +40,15 @@ <a href="#" {{action removeElement element target="view"}}><i class="icon-remove"></i></a> </div> {{/each}} + <div class="add-item-input"> + {{view App.InputCursorTextfieldView parentViewBinding="view"}} + </div> {{else}} + <div class="add-item-input"> + {{view App.InputCursorTextfieldView parentViewBinding="view"}} + </div> <div class="placeholder">{{t dashboard.widgets.wizard.step2.addMetrics}}</div> {{/if}} + </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/af0debf5/ambari-web/app/views/main/service/widgets/create/expression_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/service/widgets/create/expression_view.js b/ambari-web/app/views/main/service/widgets/create/expression_view.js index 1a11577..079d420 100644 --- a/ambari-web/app/views/main/service/widgets/create/expression_view.js +++ b/ambari-web/app/views/main/service/widgets/create/expression_view.js @@ -334,3 +334,50 @@ App.AddMetricExpressionView = Em.View.extend({ return result; }.property('controller.filteredMetrics') }); + +App.InputCursorTextfieldView = Ember.TextField.extend({ + placeholder: "", + classNameBindings: ['isInvalid'], + isInvalid: false, + + didInsertElement: function () { + this.focusCursor(); + }, + + focusCursor: function () { + Em.run.next( function() { $('.add-item-input .ember-text-field').focus(); }); + }.observes('parentView.expression.data.length'), + + validateInput: function () { + var value = this.get('value'); + var parentView = this.get('parentView'); + this.set('isInvalid', false); + if (value && parentView.get('OPERATORS').contains(value)) { + // add operator + var data = parentView.get('expression.data'); + var lastId = (data.length > 0) ? Math.max.apply(parentView, data.mapProperty('id')) : 0; + data.pushObject(Em.Object.create({ + id: ++lastId, + name: value, + isOperator: true + })); + this.set('value', ''); + } else if (value && value == 'm') { + // open add metric menu + $('#add-metric-menu > div > a').click(); + this.set('value', ''); + } else if (value) { + // invalid operator + this.set('isInvalid', true); + } + }.observes('value'), + + keyDown: function (event) { + if ((event.keyCode == 8 || event.which == 8) && !this.get('value')) { // backspace + var data = this.get('parentView.expression.data'); + if (data.length >= 1) { + data.removeObject(data[data.length - 1]); + } + } + } +});