Repository: ambari Updated Branches: refs/heads/trunk ee3bfa112 -> 5a71e013d
AMBARI-10703. Dependent configs information bar should float at the top of the page (onechiporenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/5a71e013 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/5a71e013 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/5a71e013 Branch: refs/heads/trunk Commit: 5a71e013db7ae396d347bfab7cd2d846dd54a004 Parents: ee3bfa1 Author: Oleg Nechiporenko <[email protected]> Authored: Thu Apr 23 18:21:23 2015 +0300 Committer: Oleg Nechiporenko <[email protected]> Committed: Thu Apr 23 18:21:23 2015 +0300 ---------------------------------------------------------------------- ambari-web/app/styles/config_history_flow.less | 17 +++- .../templates/common/configs/service_config.hbs | 11 ++- ambari-web/app/utils/pages/scroll_manager.js | 91 ++++++++++++++++++++ .../views/common/configs/config_history_flow.js | 62 +++---------- .../app/views/main/service/info/configs.js | 21 ++++- 5 files changed, 146 insertions(+), 56 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/5a71e013/ambari-web/app/styles/config_history_flow.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/config_history_flow.less b/ambari-web/app/styles/config_history_flow.less index f62e995..5ed6e67 100644 --- a/ambari-web/app/styles/config_history_flow.less +++ b/ambari-web/app/styles/config_history_flow.less @@ -33,6 +33,21 @@ } } +.dependencies-info { + margin-bottom: 110px; +} + +.dependencies-info-bar-wrapper { + position: fixed; + z-index: 2; + width: 757px; +} +@media (min-width: 1200px) { + .dependencies-info-bar-wrapper { + width: 970px; + } +} + #config_history_flow { margin-top: -5px; .version-slider { @@ -181,7 +196,7 @@ } .version-info-bar-wrapper { position: fixed; - z-index: 2; + z-index: 3; width: 747px; } @media (min-width: 1200px) { http://git-wip-us.apache.org/repos/asf/ambari/blob/5a71e013/ambari-web/app/templates/common/configs/service_config.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/service_config.hbs b/ambari-web/app/templates/common/configs/service_config.hbs index 4c7a1f0..e516dc4 100644 --- a/ambari-web/app/templates/common/configs/service_config.hbs +++ b/ambari-web/app/templates/common/configs/service_config.hbs @@ -83,11 +83,14 @@ {{/if}} {{#if versionLoaded}} - {{#if hasChangedDependencies}} - <div class="alert alert-warning"> - <span>{{dependenciesMessage}}</span> <a href="#" {{action "showChangedDependentConfigs" target="controller"}}>{{t common.showDetails}}</a> + <div {{bindAttr class="hasChangedDependencies:show:hide :dependencies-info"}}> + <div class="dependencies-info-bar-wrapper"> + <div class="alert alert-warning"> + <span>{{dependenciesMessage}}</span> <a + href="#" {{action "showChangedDependentConfigs" target="controller"}}>{{t common.showDetails}}</a> + </div> </div> - {{/if}} + </div> {{#if view.supportsConfigLayout}} <ul class="nav nav-tabs"> {{#each tab in view.tabs}} http://git-wip-us.apache.org/repos/asf/ambari/blob/5a71e013/ambari-web/app/utils/pages/scroll_manager.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/utils/pages/scroll_manager.js b/ambari-web/app/utils/pages/scroll_manager.js new file mode 100644 index 0000000..16b08f6 --- /dev/null +++ b/ambari-web/app/utils/pages/scroll_manager.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'); + +function calculatePosition(movedTop, defaultTop, scrollTop, defaultLeft, scrollLeft) { + var css = { + top: 'auto', + left: 'auto' + }; + if (scrollTop >= defaultTop) { + css.top = movedTop; + } else if (scrollTop > 0) { + css.top = (defaultTop - scrollTop) + 'px'; + } + //if (css.top == '0px') debugger; + if (scrollLeft > 0) { + css.left = defaultLeft; + } + return css; +} + +/** + * + * @type {Em.Object} + */ +App.ScrollManager = Em.Object.create({ + + /** + @typedef FixedElement + @type {object} + @property {string} id - identifier for element (not css-id). used to determine if element already exists in the list !IMPORTANT - don't push same element two times! + @property {string} updatedElementSelector - css-selector for element that should be replaced + @property {string} elementForLeftOffsetSelector - css-selector for element which is used to determine left-offset for <code>updatedElementSelector</code>-element + @property {number} defaultTop - value for top-offset when user scrolls not under the <code>updatedElementSelector</code>-element + @property {number} movedTop - value for top-offset when user scrolls under the <code>updatedElementSelector</code>-element + */ + + + /** + * List of elements that should be placed on the top of the page + * @type {FixedElement[]} + */ + elements: [], + + /** + * Recalculate position for each elements of the <code>elements</code> + * Should be called from some view + * + * @method updatePositionForElements + */ + updatePositionForElements: function () { + var self = this; + //reset defaultTop value in closure + $(window).unbind('scroll'); + + $(window).on('scroll', function () { + self.get('elements').forEach(function (element) { + var defaultTop, defaultLeft; + var infoBar = $(Em.get(element, 'updatedElementSelector')); + var versionSlider = $(Em.get(element, 'elementForLeftOffsetSelector')); + var scrollTop = $(window).scrollTop(); + var scrollLeft = $(window).scrollLeft(); + if (!infoBar.length) { + return; + } + defaultTop = (infoBar.get(0).getBoundingClientRect() && infoBar.get(0).getBoundingClientRect().top) || Em.get(element, 'defaultTop'); + // keep the version info bar always aligned to version slider + defaultLeft = (versionSlider.get(0).getBoundingClientRect() && versionSlider.get(0).getBoundingClientRect().left); + infoBar.css(calculatePosition(Em.get(element, 'movedTop'), defaultTop, scrollTop, defaultLeft, scrollLeft)); + }); + }); + + } + +}); http://git-wip-us.apache.org/repos/asf/ambari/blob/5a71e013/ambari-web/app/views/common/configs/config_history_flow.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/configs/config_history_flow.js b/ambari-web/app/views/common/configs/config_history_flow.js index f6f1e24..3554f00 100644 --- a/ambari-web/app/views/common/configs/config_history_flow.js +++ b/ambari-web/app/views/common/configs/config_history_flow.js @@ -17,6 +17,7 @@ */ var App = require('app'); +require('utils/pages/scroll_manager'); App.ConfigHistoryFlowView = Em.View.extend({ templateName: require('templates/common/configs/config_history_flow'), @@ -211,7 +212,16 @@ App.ConfigHistoryFlowView = Em.View.extend({ } this.set('startIndex', startIndex); this.adjustFlowView(); - this.keepInfoBarAtTop(); + if (!App.ScrollManager.get('elements').someProperty('id', 'configsManagePanel')) { + App.ScrollManager.get('elements').pushObject({ + id: 'configsManagePanel', + updatedElementSelector: '#config_history_flow>.version-info-bar-wrapper', + elementForLeftOffsetSelector: '#config_history_flow>.version-slider', + defaultTop: 290, + movedTop: 10 + }); + } + App.ScrollManager.updatePositionForElements(); }, onChangeConfigGroup: function () { @@ -257,58 +267,10 @@ App.ConfigHistoryFlowView = Em.View.extend({ } this.set('startIndex', startIndex); this.adjustFlowView(); - this.keepInfoBarAtTop(); + App.ScrollManager.updatePositionForElements(); }.observes('controller.selectedConfigGroup.name'), /** - * initialize event to keep info bar position at the top of the page - */ - keepInfoBarAtTop: function () { - var defaultTop, defaultLeft; - var self = this; - //reset defaultTop value in closure - $(window).unbind('scroll'); - - $(window).on('scroll', function (event) { - var infoBar = $('#config_history_flow>.version-info-bar-wrapper'); - var versionSlider = $('#config_history_flow>.version-slider'); - var scrollTop = $(window).scrollTop(); - var scrollLeft = $(window).scrollLeft(); - if (infoBar.length === 0) { - $(window).unbind('scroll'); - return; - } - //290 - default "top" property in px - defaultTop = defaultTop || (infoBar.get(0).getBoundingClientRect() && infoBar.get(0).getBoundingClientRect().top) || 290; - // keep the version info bar always aligned to version slider - defaultLeft = (versionSlider.get(0).getBoundingClientRect() && versionSlider.get(0).getBoundingClientRect().left); - self.setInfoBarPosition(infoBar, defaultTop, scrollTop, defaultLeft, scrollLeft); - }) - }, - /** - * calculate and reset top position of info bar - * @param infoBar - * @param defaultTop - * @param scrollTop - * @param defaultLeft - * @param scrollLeft - */ - setInfoBarPosition: function (infoBar, defaultTop, scrollTop, defaultLeft, scrollLeft) { - if (scrollTop > defaultTop) { - infoBar.css('top', '10px'); - } else if (scrollTop > 0) { - infoBar.css('top', (defaultTop - scrollTop) + 'px'); - } else { - infoBar.css('top', 'auto'); - } - if (scrollLeft > 0) { - infoBar.css('left', defaultLeft); - } else { - infoBar.css('left', 'auto'); - } - }, - - /** * define the first element in viewport * change visibility of arrows */ http://git-wip-us.apache.org/repos/asf/ambari/blob/5a71e013/ambari-web/app/views/main/service/info/configs.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/service/info/configs.js b/ambari-web/app/views/main/service/info/configs.js index 4af04c3..998f3fe 100644 --- a/ambari-web/app/views/main/service/info/configs.js +++ b/ambari-web/app/views/main/service/info/configs.js @@ -18,12 +18,23 @@ var App = require('app'); var batchUtils = require('utils/batch_scheduled_requests'); +require('utils/pages/scroll_manager'); App.MainServiceInfoConfigsView = Em.View.extend({ templateName: require('templates/main/service/info/configs'), didInsertElement: function () { var controller = this.get('controller'); controller.loadStep(); + if (!App.ScrollManager.get('elements').someProperty('id', 'dependedConfigs')) { + App.ScrollManager.get('elements').pushObject({ + id: 'dependedConfigs', + updatedElementSelector: '.dependencies-info-bar-wrapper', + elementForLeftOffsetSelector: '#config_history_flow>.version-slider', + defaultTop: 370, + movedTop: 70 + }); + } + App.ScrollManager.updatePositionForElements(); }, componentsCount: null, @@ -53,5 +64,13 @@ App.MainServiceInfoConfigsView = Em.View.extend({ label = Em.I18n.t('rollingrestart.dialog.title').format(App.format.role(componentName)); } return label; - }.property('rollingRestartSlaveComponentName') + }.property('rollingRestartSlaveComponentName'), + + /** + * @method onHasChangedDependenciesUpdated + */ + onHasChangedDependenciesUpdated: function () { + App.ScrollManager.updatePositionForElements(); + }.observes('controller.hasChangedDependencies') + });
