Repository: ambari Updated Branches: refs/heads/trunk fb3bad867 -> 175e78472
AMBARI-10935. Version bar moves too fast to top when scrolling down (onechiporenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/175e7847 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/175e7847 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/175e7847 Branch: refs/heads/trunk Commit: 175e78472452746141bf2caaa4f03374344b5a59 Parents: fb3bad8 Author: Oleg Nechiporenko <onechipore...@apache.org> Authored: Tue May 5 19:09:39 2015 +0300 Committer: Oleg Nechiporenko <onechipore...@apache.org> Committed: Tue May 5 19:09:39 2015 +0300 ---------------------------------------------------------------------- ambari-web/app/assets/licenses/NOTICE.txt | 5 +- .../mixins/common/configs/enhanced_configs.js | 30 ++++--- ambari-web/app/styles/application.less | 7 +- ambari-web/app/styles/config_history_flow.less | 13 +-- ambari-web/app/utils/pages/scroll_manager.js | 91 -------------------- .../views/common/configs/config_history_flow.js | 13 +-- .../app/views/main/service/info/configs.js | 21 ++--- ambari-web/config.coffee | 1 + ambari-web/vendor/scripts/jquery.sticky-kit.js | 10 +++ 9 files changed, 55 insertions(+), 136 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/175e7847/ambari-web/app/assets/licenses/NOTICE.txt ---------------------------------------------------------------------- diff --git a/ambari-web/app/assets/licenses/NOTICE.txt b/ambari-web/app/assets/licenses/NOTICE.txt index 9d6c66b..bc29209 100644 --- a/ambari-web/app/assets/licenses/NOTICE.txt +++ b/ambari-web/app/assets/licenses/NOTICE.txt @@ -53,4 +53,7 @@ This product includes bootstrap-slider 3.3.2 (https://github.com/nostalgiaz/boot Copyright (C) 2015 by Mattia Larentis (mattia [at] larentis [*dot*] eu) This product includes bootstrap-checkbox v.1.0.1 (https://github.com/montrezorro/bootstrap-checkbox - Apache License, Version 2.0) -Copyright (C) 2014 Roberto Montresor (info [at] robertomontresor [*dot*] it) \ No newline at end of file +Copyright (C) 2014 Roberto Montresor (info [at] robertomontresor [*dot*] it) + +This product includes sticky-kit v.1.1.2 (https://github.com/leafo/sticky-kit - MIT License) +Copyright (C) 2015 Leaf Corcoran (leafot [at] gmail [*dot*] com) \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/175e7847/ambari-web/app/mixins/common/configs/enhanced_configs.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/mixins/common/configs/enhanced_configs.js b/ambari-web/app/mixins/common/configs/enhanced_configs.js index d159cf5..c638439 100644 --- a/ambari-web/app/mixins/common/configs/enhanced_configs.js +++ b/ambari-web/app/mixins/common/configs/enhanced_configs.js @@ -577,9 +577,11 @@ App.EnhancedConfigsMixin = Em.Mixin.create({ } this.addOverrideProperty(cp, selectedGroup, Em.get(propertyToAdd, 'recommendedValue'), !Em.get(propertyToAdd, 'isDeleted')); } - Em.set(propertyToAdd, 'isDeleted', false); - Em.set(propertyToAdd, 'toAdd', false); - Em.set(propertyToAdd, 'toDelete', false); + Em.setProperties(propertyToAdd, { + isDeleted: false, + toAdd: false, + toDelete: false + }); }, this); } }, @@ -606,19 +608,21 @@ App.EnhancedConfigsMixin = Em.Mixin.create({ Em.set(propertyToDelete, 'isDeleted', true); } } else { - var overridenConfig = cp.get('overrides') && cp.get('overrides').findProperty('group.name', selectedGroup.get('name')); - if (overridenConfig) { - if (overridenConfig.get('isNotSaved')) { + var overriddenConfig = cp.get('overrides') && cp.get('overrides').findProperty('group.name', selectedGroup.get('name')); + if (overriddenConfig) { + if (overriddenConfig.get('isNotSaved')) { this.get('_dependentConfigValues').removeObject(propertyToDelete); } - cp.removeObject(overridenConfig); - if (!overridenConfig.get('isNotSaved')) { + cp.removeObject(overriddenConfig); + if (!overriddenConfig.get('isNotSaved')) { Em.set(propertyToDelete, 'isDeleted', true); } } } - Em.set(propertyToDelete, 'toAdd', false); - Em.set(propertyToDelete, 'toDelete', false); + Em.setProperties(propertyToDelete, { + toAdd: false, + toDelete: false + }); } }, this); } @@ -645,9 +649,9 @@ App.EnhancedConfigsMixin = Em.Mixin.create({ if (stepConfigs.get('serviceName') !== this.get('content.serviceName')) { cp.set('value', cp.get('defaultValue')); } - var overridenConfig = cp.get('overrides') && cp.get('overrides').findProperty('group.name', selectedGroup.get('name')); - if (overridenConfig) { - overridenConfig.set('value', valueToSave); + var overriddenConfig = cp.get('overrides') && cp.get('overrides').findProperty('group.name', selectedGroup.get('name')); + if (overriddenConfig) { + overriddenConfig.set('value', valueToSave); } } } http://git-wip-us.apache.org/repos/asf/ambari/blob/175e7847/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index a4df22a..9d23047 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -626,6 +626,11 @@ h1 { background-color: #fff; } + + .mbm { + margin-top: 0; + } + .nav-header { font-size: 13px; padding-left: 0; @@ -5351,7 +5356,7 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox { margin-top: @space-m; } -.mbm { margin-bottom: @space-m; } +.mbm { margin-bottom: @space-m; margin-top: -55px; } .mll { margin-left: @space-l; http://git-wip-us.apache.org/repos/asf/ambari/blob/175e7847/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 5ed6e67..28f79c6 100644 --- a/ambari-web/app/styles/config_history_flow.less +++ b/ambari-web/app/styles/config_history_flow.less @@ -34,12 +34,13 @@ } .dependencies-info { - margin-bottom: 110px; + margin-top: -55px; + margin-bottom: 65px; } .dependencies-info-bar-wrapper { - position: fixed; z-index: 2; + margin: 0; width: 757px; } @media (min-width: 1200px) { @@ -74,11 +75,11 @@ font-size: 11px; .top-label { min-width: 20px; - padding: 0px 2px; + padding: 0 2px; } .author, .content { - padding: 0px 2px; + padding: 0 2px; text-align: center; color: #555555; display: block; @@ -168,7 +169,7 @@ } .first { width: 14%; - margin-left: 0px; + margin-left: 0; .arrow-box { display: none; } @@ -195,7 +196,7 @@ } } .version-info-bar-wrapper { - position: fixed; + margin: 0; z-index: 3; width: 747px; } http://git-wip-us.apache.org/repos/asf/ambari/blob/175e7847/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 deleted file mode 100644 index 9f9f48b8..0000000 --- a/ambari-web/app/utils/pages/scroll_manager.js +++ /dev/null @@ -1,91 +0,0 @@ -/** - * 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 elementForLeftOffset = $(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 = elementForLeftOffset.get(0) && elementForLeftOffset.get(0).getBoundingClientRect() && elementForLeftOffset.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/175e7847/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 7e407e5..0e4c07b 100644 --- a/ambari-web/app/views/common/configs/config_history_flow.js +++ b/ambari-web/app/views/common/configs/config_history_flow.js @@ -17,7 +17,6 @@ */ var App = require('app'); -require('utils/pages/scroll_manager'); App.ConfigHistoryFlowView = Em.View.extend({ templateName: require('templates/common/configs/config_history_flow'), @@ -164,6 +163,7 @@ App.ConfigHistoryFlowView = Em.View.extend({ App.tooltip(this.$('[data-toggle=arrow-tooltip]'),{ placement: 'top' }); + $(".version-info-bar-wrapper").stick_in_parent({parent: '#serviceConfig', offset_top: 10}); }, serviceVersionBox: Em.View.extend({ @@ -212,16 +212,6 @@ App.ConfigHistoryFlowView = Em.View.extend({ } this.set('startIndex', startIndex); this.adjustFlowView(); - 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 () { @@ -267,7 +257,6 @@ App.ConfigHistoryFlowView = Em.View.extend({ } this.set('startIndex', startIndex); this.adjustFlowView(); - App.ScrollManager.updatePositionForElements(); }.observes('controller.selectedConfigGroup.name'), /** http://git-wip-us.apache.org/repos/asf/ambari/blob/175e7847/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 998f3fe..c623c4e 100644 --- a/ambari-web/app/views/main/service/info/configs.js +++ b/ambari-web/app/views/main/service/info/configs.js @@ -18,23 +18,12 @@ 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, @@ -70,7 +59,15 @@ App.MainServiceInfoConfigsView = Em.View.extend({ * @method onHasChangedDependenciesUpdated */ onHasChangedDependenciesUpdated: function () { - App.ScrollManager.updatePositionForElements(); + if (this.get('controller.hasChangedDependencies')) { + $(".dependencies-info-bar-wrapper").stick_in_parent({parent: '#serviceConfig', offset_top: 60}); + Em.run.next(function () { + $(window).scrollTop(window.scrollY + 1); // '.dependencies-info-bar-wrapper' position should be recalculated + }); + } + else { + $(".dependencies-info-bar-wrapper").trigger("sticky_kit:detach"); + } }.observes('controller.hasChangedDependencies') }); http://git-wip-us.apache.org/repos/asf/ambari/blob/175e7847/ambari-web/config.coffee ---------------------------------------------------------------------- diff --git a/ambari-web/config.coffee b/ambari-web/config.coffee index ec10ade..580f05a 100644 --- a/ambari-web/config.coffee +++ b/ambari-web/config.coffee @@ -54,6 +54,7 @@ exports.config = 'vendor/scripts/jquery.ui.custom-effects.js', 'vendor/scripts/jquery.timeago.js', 'vendor/scripts/jquery.ajax-retry.js', + 'vendor/scripts/jquery.sticky-kit.js', 'vendor/scripts/moment.js', 'vendor/scripts/workflow_visualization.js', 'vendor/scripts/rickshaw.js', http://git-wip-us.apache.org/repos/asf/ambari/blob/175e7847/ambari-web/vendor/scripts/jquery.sticky-kit.js ---------------------------------------------------------------------- diff --git a/ambari-web/vendor/scripts/jquery.sticky-kit.js b/ambari-web/vendor/scripts/jquery.sticky-kit.js new file mode 100644 index 0000000..5f9f803 --- /dev/null +++ b/ambari-web/vendor/scripts/jquery.sticky-kit.js @@ -0,0 +1,10 @@ +/* + Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net + */ +(function(){var c,f;c=this.jQuery||window.jQuery;f=c(window);c.fn.stick_in_parent=function(b){var A,w,J,n,B,K,p,q,L,k,E,t;null==b&&(b={});t=b.sticky_class;B=b.inner_scrolling;E=b.recalc_every;k=b.parent;q=b.offset_top;p=b.spacer;w=b.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=c(document);null==w&&(w=!0);L=function(a){var b;return window.getComputedStyle?(a=window.getComputedStyle(a[0]),b=parseFloat(a.getPropertyValue("width"))+parseFloat(a.getPropertyValue("margin-left"))+ +parseFloat(a.getPropertyValue("margin-right")),"border-box"!==a.getPropertyValue("box-sizing")&&(b+=parseFloat(a.getPropertyValue("border-left-width"))+parseFloat(a.getPropertyValue("border-right-width"))+parseFloat(a.getPropertyValue("padding-left"))+parseFloat(a.getPropertyValue("padding-right"))),b):a.outerWidth(!0)};J=function(a,b,n,C,F,u,r,G){var v,H,m,D,I,d,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k));if(!g.length)throw"failed to find stick parent"; + v=m=!1;(h=null!=p?p&&a.closest(p):c("<div />"))&&h.css("position",a.css("position"));x=function(){var d,f,e;if(!G&&(I=A.height(),d=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),b=parseInt(g.css("padding-bottom"),10),n=g.offset().top+d+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q,u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:L(a), + height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,d=q,z=E,l=function(){var c,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+d>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:d}).trigger("sticky_kit:unbottom"))),e<F&&(m=!1,d=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.detach()),c={position:"",width:"",top:""},a.css(c).removeClass(t).trigger("sticky_kit:unstick")), + B&&(c=f.height(),u+q>c&&!v&&(d-=l,d=Math.max(c-u,d),d=Math.min(q,d),m&&a.css({top:d+"px"})))):e>F&&(m=!0,c={position:"fixed",top:d},c.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(c).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+d>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),a.css({position:"absolute",bottom:b,top:"auto"}).trigger("sticky_kit:bottom")}, + y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);c(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize",y),c(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l, + 0)}};n=0;for(K=this.length;n<K;n++)b=this[n],J(c(b));return this}}).call(this); \ No newline at end of file
