AMBARI-22710 Post-install: Create Widget wizard style fixes. (atkach)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/6db30d89 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/6db30d89 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/6db30d89 Branch: refs/heads/branch-feature-AMBARI-21674 Commit: 6db30d89fd0098bec0dacf74b085ccc4ace56947 Parents: c1b8cda Author: Andrii Tkach <[email protected]> Authored: Fri Dec 29 15:56:19 2017 +0200 Committer: Andrii Tkach <[email protected]> Committed: Fri Dec 29 15:56:19 2017 +0200 ---------------------------------------------------------------------- .../app/controllers/main/service/info/metric.js | 13 ++++++++++++ .../app/mixins/common/widgets/widget_mixin.js | 1 + ambari-web/app/routes/create_widget.js | 3 +++ ambari-web/app/styles/common.less | 1 + .../app/styles/config_versions_control.less | 4 +++- .../app/styles/enhanced_service_dashboard.less | 22 ++++++++++++++++---- .../modal_popups/widget_browser_footer.hbs | 1 - .../templates/common/widget/gauge_widget.hbs | 2 +- .../templates/common/widget/graph_widget.hbs | 2 +- .../templates/common/widget/number_widget.hbs | 2 +- .../templates/common/widget/template_widget.hbs | 2 +- .../configs/config_versions_dropdown_view.js | 11 ++++++++++ .../main/service/widgets/create/wizard_view.js | 2 +- 13 files changed, 55 insertions(+), 11 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/6db30d89/ambari-web/app/controllers/main/service/info/metric.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/main/service/info/metric.js b/ambari-web/app/controllers/main/service/info/metric.js index 9dfc32c..b9e0fb1 100644 --- a/ambari-web/app/controllers/main/service/info/metric.js +++ b/ambari-web/app/controllers/main/service/info/metric.js @@ -374,6 +374,19 @@ App.MainServiceInfoMetricsController = Em.Controller.extend(App.WidgetSectionMix } }), isShowMineOnly: false, + showTopShadow: false, + + didInsertElement: function() { + this._super(); + this.$().find('.modal-body').on('scroll', (event) => { + const modalBody = $(event.currentTarget); + if (modalBody.scrollTop() > 0) { + modalBody.addClass('top-shadow'); + } else { + modalBody.removeClass('top-shadow'); + } + }); + }, bodyClass: Ember.View.extend({ templateName: require('templates/common/modal_popups/widget_browser_popup'), controller: self, http://git-wip-us.apache.org/repos/asf/ambari/blob/6db30d89/ambari-web/app/mixins/common/widgets/widget_mixin.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/mixins/common/widgets/widget_mixin.js b/ambari-web/app/mixins/common/widgets/widget_mixin.js index 0c40fd7..cb10d8c 100644 --- a/ambari-web/app/mixins/common/widgets/widget_mixin.js +++ b/ambari-web/app/mixins/common/widgets/widget_mixin.js @@ -695,6 +695,7 @@ App.WidgetMixin = Ember.Mixin.create({ App.WidgetPreviewMixin = Ember.Mixin.create({ beforeRender: Em.K, isLoaded: true, + isPreview: true, metrics: [], content: Em.Object.create({ id: 1, http://git-wip-us.apache.org/repos/asf/ambari/blob/6db30d89/ambari-web/app/routes/create_widget.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/routes/create_widget.js b/ambari-web/app/routes/create_widget.js index f014a7f..1e4a30e 100644 --- a/ambari-web/app/routes/create_widget.js +++ b/ambari-web/app/routes/create_widget.js @@ -62,6 +62,7 @@ module.exports = App.WizardRoute.extend({ step1: Em.Route.extend({ route: '/step1', + breadcrumbs: null, connectOutlets: function (router) { var controller = router.get('widgetWizardController'); @@ -95,6 +96,7 @@ module.exports = App.WizardRoute.extend({ step2: Em.Route.extend({ route: '/step2', + breadcrumbs: null, connectOutlets: function (router) { var controller = router.get('widgetWizardController'); @@ -125,6 +127,7 @@ module.exports = App.WizardRoute.extend({ step3: Em.Route.extend({ route: '/step3', + breadcrumbs: null, connectOutlets: function (router) { var controller = router.get('widgetWizardController'); http://git-wip-us.apache.org/repos/asf/ambari/blob/6db30d89/ambari-web/app/styles/common.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/common.less b/ambari-web/app/styles/common.less index 4a4f9ec..b666ab3 100644 --- a/ambari-web/app/styles/common.less +++ b/ambari-web/app/styles/common.less @@ -60,6 +60,7 @@ @restart-indicator-color: #FDB82F; +@border-color: #EBECF1; @top-nav-bg-color-from: #555; @top-nav-bg-color-to: #333; @top-nav-brand-color: #999; http://git-wip-us.apache.org/repos/asf/ambari/blob/6db30d89/ambari-web/app/styles/config_versions_control.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/config_versions_control.less b/ambari-web/app/styles/config_versions_control.less index 5b947a4..0b7f131 100644 --- a/ambari-web/app/styles/config_versions_control.less +++ b/ambari-web/app/styles/config_versions_control.less @@ -18,7 +18,6 @@ @import 'common.less'; @button-width: 150px; -@border-color: #EBECF1; #config-versions-control { .dropdown-menu { @@ -37,6 +36,9 @@ list-style-type: none; } } + .bottom-shadow { + box-shadow: inset 0 0 0 @border-color, inset 0px -10px 8px -8px @border-color; + } .grey-text { color: @top-nav-brand-color; } http://git-wip-us.apache.org/repos/asf/ambari/blob/6db30d89/ambari-web/app/styles/enhanced_service_dashboard.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/enhanced_service_dashboard.less b/ambari-web/app/styles/enhanced_service_dashboard.less index 4c97539..d12f5a8 100644 --- a/ambari-web/app/styles/enhanced_service_dashboard.less +++ b/ambari-web/app/styles/enhanced_service_dashboard.less @@ -18,7 +18,6 @@ @import 'common.less'; -@border-color: #ddd; @invalid-color: red; @add-widget-btn-color: #f5f5f5; @@ -66,6 +65,15 @@ } } +.widgets-browser-popup { + .modal-body { + box-shadow: inset 0 0 0 @border-color, inset 0px -10px 8px -8px @border-color; + } + .top-shadow { + box-shadow: inset 0 10px 8px -8px @border-color, inset 0px -10px 8px -8px @border-color; + } +} + #widget_layout, #widget-preview { .frame { @@ -83,6 +91,11 @@ .img-thumbnail { position: relative; box-sizing: content-box; + .widget-icons { + position: absolute; + right: 5px; + top: 6px; + } } .spinner { margin: 55px auto; @@ -243,9 +256,6 @@ } } .widget-icons { - position: absolute; - right: 5px; - top: 6px; ul { display: none; border-radius: 2px; @@ -481,6 +491,9 @@ border: 1px solid @invalid-color; } } + .add-number { + width: 30%; + } } .template { margin-bottom: 10px; @@ -735,6 +748,7 @@ select.form-control + .chosen-container { text-decoration: none; background-color: #428BCA; background-image:none; + white-space: normal; } li.disabled-result{ background-color: #fff !important; http://git-wip-us.apache.org/repos/asf/ambari/blob/6db30d89/ambari-web/app/templates/common/modal_popups/widget_browser_footer.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/modal_popups/widget_browser_footer.hbs b/ambari-web/app/templates/common/modal_popups/widget_browser_footer.hbs index 6c781e5..e65611b 100644 --- a/ambari-web/app/templates/common/modal_popups/widget_browser_footer.hbs +++ b/ambari-web/app/templates/common/modal_popups/widget_browser_footer.hbs @@ -21,7 +21,6 @@ <div class="checkbox pull-left"> {{view App.CheckboxView classNames="footer-checkbox" checkedBinding="view.parentView.isShowMineOnly" labelTranslate="dashboard.widgets.browser.footer.checkbox"}} </div> - <div class="clearfix"></div> {{/isAuthorized}} <button class="btn btn-success" {{action onPrimary target="view"}}>{{t common.close}}</button> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/6db30d89/ambari-web/app/templates/common/widget/gauge_widget.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/widget/gauge_widget.hbs b/ambari-web/app/templates/common/widget/gauge_widget.hbs index 9c776b3..fee24ca 100644 --- a/ambari-web/app/templates/common/widget/gauge_widget.hbs +++ b/ambari-web/app/templates/common/widget/gauge_widget.hbs @@ -19,7 +19,7 @@ <div class="gauge-widget img-thumbnail"> {{#if view.isLoaded}} <div class="caption title col-md-11">{{view.content.widgetName}}</div> - <div {{bindAttr class="view.parentView.isMoving:hidden :corner-icon :widget-icons"}}> + <div {{bindAttr class="view.parentView.isMoving:hidden :corner-icon :widget-icons view.isPreview:hidden"}}> <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button> <ul class="dropdown-menu"> {{#if controller.isAmbariMetricsInstalled}} http://git-wip-us.apache.org/repos/asf/ambari/blob/6db30d89/ambari-web/app/templates/common/widget/graph_widget.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/widget/graph_widget.hbs b/ambari-web/app/templates/common/widget/graph_widget.hbs index 010b77f..4978d9d 100644 --- a/ambari-web/app/templates/common/widget/graph_widget.hbs +++ b/ambari-web/app/templates/common/widget/graph_widget.hbs @@ -19,7 +19,7 @@ <div class="graph-widget img-thumbnail"> {{#if view.isLoaded}} <div class="caption title col-md-11">{{view.content.widgetName}}</div> - <div {{bindAttr class="view.parentView.isMoving:hidden :corner-icon :widget-icons"}}> + <div {{bindAttr class="view.parentView.isMoving:hidden :corner-icon :widget-icons view.isPreview:hidden"}}> <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button> <ul class="dropdown-menu"> <li> http://git-wip-us.apache.org/repos/asf/ambari/blob/6db30d89/ambari-web/app/templates/common/widget/number_widget.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/widget/number_widget.hbs b/ambari-web/app/templates/common/widget/number_widget.hbs index c145912..6197ea6 100644 --- a/ambari-web/app/templates/common/widget/number_widget.hbs +++ b/ambari-web/app/templates/common/widget/number_widget.hbs @@ -19,7 +19,7 @@ <div class="number-widget img-thumbnail"> {{#if view.isLoaded}} <div class="caption title col-md-11">{{view.content.widgetName}}</div> - <div {{bindAttr class="view.parentView.isMoving:hidden :corner-icon :widget-icons"}}> + <div {{bindAttr class="view.parentView.isMoving:hidden :corner-icon :widget-icons view.isPreview:hidden"}}> <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button> <ul class="dropdown-menu"> {{#if controller.isAmbariMetricsInstalled}} http://git-wip-us.apache.org/repos/asf/ambari/blob/6db30d89/ambari-web/app/templates/common/widget/template_widget.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/widget/template_widget.hbs b/ambari-web/app/templates/common/widget/template_widget.hbs index 20438f9..98b6f0d 100644 --- a/ambari-web/app/templates/common/widget/template_widget.hbs +++ b/ambari-web/app/templates/common/widget/template_widget.hbs @@ -19,7 +19,7 @@ <div class="template-widget img-thumbnail"> {{#if view.isLoaded}} <div class="caption title col-md-11">{{view.content.widgetName}}</div> - <div {{bindAttr class="view.parentView.isMoving:hidden :corner-icon :widget-icons"}}> + <div {{bindAttr class="view.parentView.isMoving:hidden :corner-icon :widget-icons view.isPreview:hidden"}}> <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button> <ul class="dropdown-menu"> {{#if controller.isAmbariMetricsInstalled}} http://git-wip-us.apache.org/repos/asf/ambari/blob/6db30d89/ambari-web/app/views/common/configs/config_versions_dropdown_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/configs/config_versions_dropdown_view.js b/ambari-web/app/views/common/configs/config_versions_dropdown_view.js index 8e5cb76..fc9cb02 100644 --- a/ambari-web/app/views/common/configs/config_versions_dropdown_view.js +++ b/ambari-web/app/views/common/configs/config_versions_dropdown_view.js @@ -34,6 +34,17 @@ App.ConfigVersionsDropdownView = Em.View.extend({ isCompareMode: false, displayedServiceVersion: Em.computed.findBy('serviceVersions', 'isDisplayed', true), + didInsertElement: function() { + this.$().on("shown.bs.dropdown", function() { + const versionsBlock = $(this).find('.versions-list'); + if (versionsBlock.height() < versionsBlock.prop('scrollHeight')) { + versionsBlock.addClass('bottom-shadow'); + } else { + versionsBlock.removeClass('bottom-shadow'); + } + }); + }, + mainClickAction: function (event) { if (this.get('isSecondary')) { this.get('parentView').compare(event); http://git-wip-us.apache.org/repos/asf/ambari/blob/6db30d89/ambari-web/app/views/main/service/widgets/create/wizard_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/service/widgets/create/wizard_view.js b/ambari-web/app/views/main/service/widgets/create/wizard_view.js index 70d43be..e39d494 100644 --- a/ambari-web/app/views/main/service/widgets/create/wizard_view.js +++ b/ambari-web/app/views/main/service/widgets/create/wizard_view.js @@ -28,7 +28,7 @@ App.WidgetWizardView = Em.View.extend(App.WizardMenuMixin, { previewWidgetClass: function () { switch (this.get('controller.content.widgetType')) { case 'GRAPH': - return App.GraphWidgetView.extend(App.WidgetPreviewMixin, {isPreview: true}); + return App.GraphWidgetView.extend(App.WidgetPreviewMixin); case 'TEMPLATE': return App.TemplateWidgetView.extend(App.WidgetPreviewMixin); case 'NUMBER':
