Repository: ambari Updated Branches: refs/heads/trunk 23faabc4a -> 3e07f0af3
AMBARI-10337. Slider widget should implement 'default' clickable marker (Buzhor Denys via srimanth) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/3e07f0af Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/3e07f0af Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/3e07f0af Branch: refs/heads/trunk Commit: 3e07f0af3f248d90c3e511ff6dff01efd3c96d75 Parents: 23faabc Author: Srimanth Gunturi <sgunt...@hortonworks.com> Authored: Thu Apr 2 15:20:58 2015 -0700 Committer: Srimanth Gunturi <sgunt...@hortonworks.com> Committed: Thu Apr 2 15:21:09 2015 -0700 ---------------------------------------------------------------------- ambari-web/app/styles/widgets.less | 25 +++++++++++ .../widgets/slider_config_widget_view.js | 46 +++++++++++++++++++- 2 files changed, 69 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/3e07f0af/ambari-web/app/styles/widgets.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/widgets.less b/ambari-web/app/styles/widgets.less index ac5b45e..1e22d0c 100644 --- a/ambari-web/app/styles/widgets.less +++ b/ambari-web/app/styles/widgets.less @@ -64,6 +64,24 @@ &:nth-of-type(1):before { content: '$$$' !important; } + &.slider-tick-default { + &:after { + content: "default"; + width: 0; + height: 0; + display: block; + position: absolute; + left: -2px; + top: 14px; + border-style: solid; + border-width: 0 3px 6px 3px; + border-color: transparent transparent #5bb75b transparent; + color: #d1d1d1; + font-size: 10px; + text-indent: -14px; + line-height: 25px; + } + } } .slider-handle { margin-top: -2px !important; @@ -74,9 +92,16 @@ background-image: radial-gradient(#aaa 5px, #eee 5px) !important; border: 1px solid @slider-widget-border-color; } + .slider-tick-label-container { + margin-top: 5px; + } .slider-tick-label { color: #aaa; font-size: 10px; + .slider-tick-reset-label { + color: #d7d7d7; + margin-left: 6px; + } } .slider-selection { background-image: none; http://git-wip-us.apache.org/repos/asf/ambari/blob/3e07f0af/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 472d38c..cbabae8 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 @@ -171,18 +171,42 @@ App.SliderConfigWidgetView = App.ConfigWidgetView.extend({ unit = Em.getWithDefault(valueAttributes, 'unit', ''), parseFunction = this.get('parseFunction'), ticks = [valueAttributes.minimum], - ticksLabels = []; + ticksLabels = [], + defaultValue = this.valueForTick(+config.get('defaultValue')), + defaultValueMirroredId, + defaultValueId; // ticks and labels for (var i = 1; i <= 3; i++) { var val = (valueAttributes.minimum + valueAttributes.maximum) / 4 * i; // if value's type is float, ticks may be float too - ticks.push(valueAttributes.type === 'int' ? Math.round(val) : parseFloat(val.toFixed(1))); + ticks.push(this.valueForTick(val)); } ticks.push(valueAttributes.maximum); ticks.forEach(function (tick, index) { ticksLabels.push(index % 2 === 0 ? tick + ' ' + unit : ''); }); + // process additional tick for default value if it not defined in previous computation + if (!ticks.contains(defaultValue)) { + // push default value + ticks.push(defaultValue); + // and resort array + ticks = ticks.sort(function(a,b) { return a-b; }); + defaultValueId = ticks.indexOf(defaultValue); + // to save nice tick labels layout we should add new tick value which is mirrored by index to default value + defaultValueMirroredId = ticks.length - defaultValueId; + // push empty label for default value tick + ticksLabels.insertAt(defaultValueId, ''); + // push empty to mirrored position + ticksLabels.insertAt(defaultValueMirroredId, ''); + // for saving correct sliding need to add value to mirrored position which is average between previous + // and next value + ticks.insertAt(defaultValueMirroredId, (ticks[defaultValueMirroredId] + ticks[defaultValueMirroredId - 1])/2); + // get new index for default value + defaultValueId = ticks.indexOf(defaultValue); + } else { + defaultValueId = ticks.indexOf(defaultValue); + } var slider = new Slider(this.$('input.slider-input')[0], { value: parseFunction(this.get('config.value')), @@ -206,12 +230,30 @@ App.SliderConfigWidgetView = App.ConfigWidgetView.extend({ self.sendRequestRorDependentConfigs(self.get('config')); }); + this.$('.slider-track .slider-tick.round:eq({0})'.format(defaultValueId)).addClass('slider-tick-default').on('click', function() { + self.restoreValue(); + }); + // if mirrored value was added need to hide the tick for it + if (defaultValueMirroredId) { + this.$('.slider-tick:eq({0})'.format(defaultValueMirroredId)).hide(); + } this.set('slider', slider); // hide some ticks. can't do this via css this.$('.slider-tick:first, .slider-tick:last').hide(); }, /** + * Convert value according to property attribute unit. + * + * @method valueForTick + * @param {Number} + * @returns {Number} + */ + valueForTick: function(val) { + return this.get('config.stackConfigProperty.valueAttributes').type === 'int' ? Math.round(val) : parseFloat(val.toFixed(1)); + }, + + /** * Restore <code>defaultValue</code> for config * Restore <code>mirrorValue</code> too * @method restoreValue