Repository: ambari Updated Branches: refs/heads/trunk f5b17aa50 -> 7808566db
AMBARI-10564. Combobox widget layout issues (onechiporenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/7808566d Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/7808566d Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/7808566d Branch: refs/heads/trunk Commit: 7808566db8440aa32330da5a48785169c79a4e96 Parents: f5b17aa Author: Oleg Nechiporenko <[email protected]> Authored: Fri Apr 17 15:25:00 2015 +0300 Committer: Oleg Nechiporenko <[email protected]> Committed: Fri Apr 17 15:25:00 2015 +0300 ---------------------------------------------------------------------- ambari-web/app/assets/test/tests.js | 1 + .../service/configs/widget_popover_support.js | 11 ++- ambari-web/app/styles/widgets.less | 5 ++ .../configs/widgets/combo_config_widget.hbs | 2 +- .../configs/widgets/config_widget_view.js | 21 +++++ .../configs/widget_popover_support_test.js | 91 ++++++++++++++++++++ 6 files changed, 128 insertions(+), 3 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/7808566d/ambari-web/app/assets/test/tests.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/assets/test/tests.js b/ambari-web/app/assets/test/tests.js index c5316ce..0e576bc 100644 --- a/ambari-web/app/assets/test/tests.js +++ b/ambari-web/app/assets/test/tests.js @@ -144,6 +144,7 @@ var files = ['test/init_model_test', 'test/mixins/common/table_server_view_mixin_test', 'test/mixins/common/widget_mixin_test', 'test/mixins/main/host/details/host_components/decommissionable_test', + 'test/mixins/main/service/configs/widget_popover_support_test', 'test/mixins/routers/redirections_test', 'test/mixins/wizard/addSeccurityConfigs_test', 'test/mixins/wizard/wizard_menu_view_test', http://git-wip-us.apache.org/repos/asf/ambari/blob/7808566d/ambari-web/app/mixins/main/service/configs/widget_popover_support.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/mixins/main/service/configs/widget_popover_support.js b/ambari-web/app/mixins/main/service/configs/widget_popover_support.js index 3ae1d6c..9855396 100644 --- a/ambari-web/app/mixins/main/service/configs/widget_popover_support.js +++ b/ambari-web/app/mixins/main/service/configs/widget_popover_support.js @@ -43,14 +43,21 @@ App.WidgetPopoverSupport = Em.Mixin.create({ */ popoverPlacement: function () { // popover to left if config is located at the right most sub-section of the right most section. + return this.get('isWidgetInTheRightColumn') ? 'left' : 'right'; + }.property('isWidgetInTheRightColumn'), + + /** + * Determines if widget is in the right column + * @type {boolean} + */ + isWidgetInTheRightColumn: function () { var secCI = this.get('section.columnIndex'); var secCS = this.get('section.columnSpan'); var tabCols = this.get('tab.columns'); var subsecCI = this.get('subSection.columnIndex'); var subsecCS = this.get('subSection.columnSpan'); var secCols = this.get('section.sectionColumns'); - - return ((secCI + secCS == tabCols) && (subsecCI + subsecCS == secCols))? 'left' : 'right'; + return ((secCI + secCS == tabCols) && (subsecCI + subsecCS == secCols)); }.property(), initPopover: function () { http://git-wip-us.apache.org/repos/asf/ambari/blob/7808566d/ambari-web/app/styles/widgets.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/widgets.less b/ambari-web/app/styles/widgets.less index 4c0706e..2df3619 100644 --- a/ambari-web/app/styles/widgets.less +++ b/ambari-web/app/styles/widgets.less @@ -319,6 +319,11 @@ border-radius: 0 3px 3px 0; } } + + ul.dropdown-menu { + z-index: 1100; // menu-items shouldn't be under popover + } + } .action-button { http://git-wip-us.apache.org/repos/asf/ambari/blob/7808566d/ambari-web/app/templates/common/configs/widgets/combo_config_widget.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/widgets/combo_config_widget.hbs b/ambari-web/app/templates/common/configs/widgets/combo_config_widget.hbs index 2e50ade..2e9315d 100644 --- a/ambari-web/app/templates/common/configs/widgets/combo_config_widget.hbs +++ b/ambari-web/app/templates/common/configs/widgets/combo_config_widget.hbs @@ -25,7 +25,7 @@ <button {{bindAttr class="view.disabled:disabled :btn :dropdown-toggle"}} data-toggle="dropdown"> <span class="caret"></span> </button> - <ul class="dropdown-menu"> + <ul {{bindAttr class="view.isWidgetInTheRightColumn:pull-right :dropdown-menu"}}> {{#each item in view.content.valuesList}} <li> <a href="#" {{action setConfigValue item.configValue target="view"}}>{{item.widgetValue}}</a> http://git-wip-us.apache.org/repos/asf/ambari/blob/7808566d/ambari-web/app/views/common/configs/widgets/config_widget_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/configs/widgets/config_widget_view.js b/ambari-web/app/views/common/configs/widgets/config_widget_view.js index 2580905..fbbf0d1 100644 --- a/ambari-web/app/views/common/configs/widgets/config_widget_view.js +++ b/ambari-web/app/views/common/configs/widgets/config_widget_view.js @@ -51,6 +51,27 @@ App.ConfigWidgetView = Em.View.extend(App.SupportsDependentConfigs, App.WidgetPo canEdit: true, /** + * Tab where current widget placed + * Bound in the template + * @type {App.Tab} + */ + tab: null, + + /** + * Section where current widget placed + * Bound in the template + * @type {App.Section} + */ + section: null, + + /** + * Subsection where current widget placed + * Bound in the template + * @type {App.SubSection} + */ + subSection: null, + + /** * Alias to <code>config.isOriginalSCP</code> * Should be used in the templates * Don't use original <code>config.isOriginalSCP</code> in the widget-templates!!! http://git-wip-us.apache.org/repos/asf/ambari/blob/7808566d/ambari-web/test/mixins/main/service/configs/widget_popover_support_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/mixins/main/service/configs/widget_popover_support_test.js b/ambari-web/test/mixins/main/service/configs/widget_popover_support_test.js new file mode 100644 index 0000000..37ae3e4 --- /dev/null +++ b/ambari-web/test/mixins/main/service/configs/widget_popover_support_test.js @@ -0,0 +1,91 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you 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. + */ + +var App = require('app'); +var view; + +describe('App.WidgetPopoverSupport', function () { + + beforeEach(function () { + view = Em.View.create(App.WidgetPopoverSupport, {}); + }); + + describe('#isWidgetInTheRightColumn', function () { + + Em.A([ + { + v: { + section: { + columnIndex: 1, + columnSpan: 2, + sectionColumns: 3 + }, + tab: { + columns: 3 + }, + subSection: { + columnSpan: 1, + columnIndex: 2 + } + }, + e: true + }, + { + v: { + section: { + columnIndex: 1, + columnSpan: 2, + sectionColumns: 4 + }, + tab: { + columns: 4 + }, + subSection: { + columnSpan: 1, + columnIndex: 2 + } + }, + e: false + }, + { + v: { + section: { + columnIndex: 1, + columnSpan: 2, + sectionColumns: 3 + }, + tab: { + columns: 4 + }, + subSection: { + columnSpan: 1, + columnIndex: 3 + } + }, + e: false + } + ]).forEach(function (test, index) { + it('test #' + index, function () { + view.setProperties(test.v); + expect(view.get('isWidgetInTheRightColumn')).to.equal(test.e); + }); + }); + + }); + +}); \ No newline at end of file
