Repository: ambari Updated Branches: refs/heads/trunk abb2fa1d5 -> cb9fd8e3c
AMBARI-10541. Toggle config entries chopped off and need color changes (onechiporenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/cb9fd8e3 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/cb9fd8e3 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/cb9fd8e3 Branch: refs/heads/trunk Commit: cb9fd8e3c44b05d808b15c9cf206a6e2ccc06f60 Parents: abb2fa1 Author: Oleg Nechiporenko <onechipore...@apache.org> Authored: Thu Apr 16 20:15:09 2015 +0300 Committer: Oleg Nechiporenko <onechipore...@apache.org> Committed: Thu Apr 16 20:15:09 2015 +0300 ---------------------------------------------------------------------- ambari-web/app/mappers/configs/themes_mapper.js | 1 + ambari-web/app/styles/widgets.less | 47 ++++++++++++++++++++ .../common/configs/widgets/controls.hbs | 2 +- .../widgets/toggle_config_widget_view.js | 25 ++++++++++- 4 files changed, 72 insertions(+), 3 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/cb9fd8e3/ambari-web/app/mappers/configs/themes_mapper.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/mappers/configs/themes_mapper.js b/ambari-web/app/mappers/configs/themes_mapper.js index 7fde958..978d7e3 100644 --- a/ambari-web/app/mappers/configs/themes_mapper.js +++ b/ambari-web/app/mappers/configs/themes_mapper.js @@ -67,6 +67,7 @@ App.themesMapper = App.QuickDataMapper.create({ }, this); App.store.loadMany(this.get("tabModel"), tabs); + App.store.commit(); }, /** http://git-wip-us.apache.org/repos/asf/ambari/blob/cb9fd8e3/ambari-web/app/styles/widgets.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/widgets.less b/ambari-web/app/styles/widgets.less index 4af4e31..c052bd2 100644 --- a/ambari-web/app/styles/widgets.less +++ b/ambari-web/app/styles/widgets.less @@ -35,6 +35,11 @@ @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; +@toggle-widget-on-background-color: #aaa; +@toggle-widget-off-background-color: @green; .widget-config { .widget-config { @@ -250,6 +255,48 @@ .undo-button { margin-left: @undo-btn-margin; } + + .bootstrap-switch { + &, + &.bootstrap-switch-focused { + border-color: transparent; + box-shadow: none; + } + + .bootstrap-switch-label { + background-color: @toggle-widget-handle-background-color; + background-image: none; + text-shadow: none; + border-width: 0; + padding: 2px 8px; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-bottom: 1px solid @toggle-widget-handle-background-color; + } + + .bootstrap-switch-handle-on, + .bootstrap-switch-handle-off { + color: @toggle-widget-text-color; + font-size: @toggle-widget-text-size; + background-image: none; + text-shadow: none; + border: none; + padding: 2px 0; + + &:hover { + text-shadow: none; + color: @toggle-widget-text-color; + } + + &.bootstrap-switch-default { + background-color: @toggle-widget-on-background-color; + } + + &.bootstrap-switch-success { + background-color: @toggle-widget-off-background-color; + } + } + } } .combo-widget { http://git-wip-us.apache.org/repos/asf/ambari/blob/cb9fd8e3/ambari-web/app/templates/common/configs/widgets/controls.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/widgets/controls.hbs b/ambari-web/app/templates/common/configs/widgets/controls.hbs index 955d414..3889ecc 100644 --- a/ambari-web/app/templates/common/configs/widgets/controls.hbs +++ b/ambari-web/app/templates/common/configs/widgets/controls.hbs @@ -48,7 +48,7 @@ {{/unless}} {{#if view.config.isNotDefaultValue}} {{#if view.undoAllowed}} - <a class="btn btn-small" href="#" {{action "restoreValue" target="view"}}> + <a class="widget-action widget-action-undo" href="#" {{action "restoreValue" target="view"}}> <i class="icon-undo"></i> </a> {{/if}} http://git-wip-us.apache.org/repos/asf/ambari/blob/cb9fd8e3/ambari-web/app/views/common/configs/widgets/toggle_config_widget_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/configs/widgets/toggle_config_widget_view.js b/ambari-web/app/views/common/configs/widgets/toggle_config_widget_view.js index 059257b..8c52c00 100644 --- a/ambari-web/app/views/common/configs/widgets/toggle_config_widget_view.js +++ b/ambari-web/app/views/common/configs/widgets/toggle_config_widget_view.js @@ -34,6 +34,14 @@ App.ToggleConfigWidgetView = App.ConfigWidgetView.extend({ switcher: null, /** + * Minimum required handle width for toggle widget in pixels. + * @type {Number} + */ + minHandleWidth: 30, + + /** + + /** * Value used in the checkbox. * <code>config.value</code> can't be used because it's string. * @@ -102,8 +110,9 @@ App.ToggleConfigWidgetView = App.ConfigWidgetView.extend({ var switcher = this.$("input").bootstrapSwitch({ onText: labels[0].label, offText: labels[1].label, - offColor: 'danger', - handleWidth: 85, + offColor: 'default', + onColor: 'success', + handleWidth: self.getHandleWidth(labels.mapProperty('label.length')), onSwitchChange: function (event, state) { self.set('switcherValue', state); self.get('controller').removeCurrentFromDependentList(self.get('config')); @@ -115,6 +124,18 @@ App.ToggleConfigWidgetView = App.ConfigWidgetView.extend({ }, /** + * Calculate handle width by longest label. + * + * @param {String[]} labels + * @returns {Number} + */ + getHandleWidth: function(labels) { + var labelWidth = Math.max.apply(null, labels) * 8; + return labelWidth < this.get('minHandleWidth') ? this.get('minHandleWidth') : labelWidth; + }, + + + /** * Restore default config value and toggle switcher. * * @override App.ConfigWidgetView.restoreValue