AMBARI-10820 Slider widget needs slight refactoring along with padding fixes. (ababiichuk)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/a39eb7d3 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/a39eb7d3 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/a39eb7d3 Branch: refs/heads/trunk Commit: a39eb7d3bc158844e62d59af620d98740518e12b Parents: 7be88f6 Author: aBabiichuk <ababiic...@cybervisiontech.com> Authored: Wed Apr 29 11:43:06 2015 +0300 Committer: aBabiichuk <ababiic...@cybervisiontech.com> Committed: Wed Apr 29 11:43:06 2015 +0300 ---------------------------------------------------------------------- ambari-web/app/styles/application.less | 3 +- ambari-web/app/styles/widgets.less | 42 ++++++++++++++------ .../widgets/slider_config_widget_view.js | 6 +-- 3 files changed, 33 insertions(+), 18 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/a39eb7d3/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index fdea9e5..271771d 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -5631,10 +5631,11 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox { margin: 0 -20px; .config-section { height: 100%; - padding: 0 30px 20px 30px; + padding: 18px; border: 1px solid #aaa; vertical-align: top; h4 { + margin: 0px; font-size: 22px; font-weight: 400; } http://git-wip-us.apache.org/repos/asf/ambari/blob/a39eb7d3/ambari-web/app/styles/widgets.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/widgets.less b/ambari-web/app/styles/widgets.less index dd75d66..b4dc883 100644 --- a/ambari-web/app/styles/widgets.less +++ b/ambari-web/app/styles/widgets.less @@ -20,21 +20,25 @@ @undo-btn-margin: 10px; @combo-widget-width: 100px; @green: #6ebd45; +@slider-light-grey: #e6e6e6; +@slider-dark-grey: #aaaaaa; @slider-widget-border-color: #999; @slider-widget-width: 220px; @slider-widget-tooltip-background-color: @green; -@slider-widget-selection-background-color: @green; +@slider-widget-selection-background-color: @slider-dark-grey; @slider-widget-body-height: 10px; -@slider-widget-body-background-color: #ccc; -@slider-widget-tick-height: 8px; +@slider-widget-body-background-color: @slider-light-grey; +@slider-widget-tick-height: 6px; @slider-widget-tick-width: 1px; -@slider-widget-tick-background-color: #808080; -@slider-widget-tick-label-color: #aaa; +@slider-widget-tick-background-color: @slider-dark-grey; +@slider-widget-tick-label-color: @slider-dark-grey; @slider-widget-tooltip-background: @slider-widget-tooltip-background-color; @slider-widget-disabled-selection-background-color: lighten(@slider-widget-selection-background-color, 20%); + @widget-config-override-action-color: #cbcbcb; @widget-config-override-action-active-color: #acacac; + @toggle-widget-handle-background-color: #f3f3f3; @toggle-widget-text-color: #fff; @toggle-widget-text-size: 12px; @@ -105,6 +109,7 @@ .widget-config-label { display: inline-block; + padding-bottom: 13px; margin-bottom: 15px; } .slider-track { @@ -119,7 +124,7 @@ .slider.slider-horizontal { width: @slider-widget-width; .tooltip { - margin-top: -23px; + margin-top: -24px; opacity: 1; font-size: 10px; line-height: 14px; @@ -158,29 +163,34 @@ margin-left: -1px; } &.slider-tick-default { - margin-top: -22px; - &:before { - height: 53px; - } + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid @slider-dark-grey; + margin-left: -5px; > span { color: @slider-widget-tick-label-color; font-size: 10px; } + &::before { + display: none; + } } } &.slider-disabled { .tooltip-arrow { - border-top-color: @slider-widget-body-background-color; + border-top-color: lighten(@green, 20%);; } .tooltip-inner { - background-color: @slider-widget-body-background-color; + background-color: lighten(@green, 20%);; } } } .slider-handle { margin-top: -4px !important; height: 14px; - width: 2px; + width: 3px; margin-left: -1px !important; background-color: @slider-widget-selection-background-color; background-image: none; @@ -229,6 +239,12 @@ .slider-selection { background-color: @slider-widget-disabled-selection-background-color; } + .slider-track { + div.slider-handle { + background-image: none; + background-color: @slider-widget-disabled-selection-background-color; + } + } } .spinner-input-widget { http://git-wip-us.apache.org/repos/asf/ambari/blob/a39eb7d3/ambari-web/app/views/common/configs/widgets/slider_config_widget_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/configs/widgets/slider_config_widget_view.js b/ambari-web/app/views/common/configs/widgets/slider_config_widget_view.js index a27ce61..394ad6a 100644 --- a/ambari-web/app/views/common/configs/widgets/slider_config_widget_view.js +++ b/ambari-web/app/views/common/configs/widgets/slider_config_widget_view.js @@ -367,10 +367,8 @@ App.SliderConfigWidgetView = App.ConfigWidgetView.extend({ return false; }); // create label for default value and align it - - defaultSliderTick.append('<span>{0}</span>'.format(recommendedValue + this.get('unitLabel'))); - defaultSliderTick.find('span').css('marginLeft', -defaultSliderTick.find('span').width()/2 + 'px'); - + // defaultSliderTick.append('<span>{0}</span>'.format(recommendedValue + this.get('unitLabel'))); + // defaultSliderTick.find('span').css('marginLeft', -defaultSliderTick.find('span').width()/2 + 'px'); // if mirrored value was added need to hide the tick for it if (recommendedValueMirroredId) { sliderTicks.eq(recommendedValueMirroredId).hide();