AMBARI-20550. Test and fix new Accordions styles on Ambari.(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/1e9cebbe Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/1e9cebbe Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/1e9cebbe Branch: refs/heads/branch-dev-logsearch Commit: 1e9cebbed3d3e766ecb5624c7f68763169130640 Parents: fe4b87c Author: Xi Wang <xiw...@apache.org> Authored: Thu Mar 23 15:13:45 2017 -0700 Committer: Xi Wang <xiw...@apache.org> Committed: Mon Mar 27 13:34:47 2017 -0700 ---------------------------------------------------------------------- ambari-web/app/styles/application.less | 5 -- .../app/styles/theme/bootstrap-ambari.css | 54 +++++++++++++++++++- .../common/configs/service_config_category.hbs | 2 +- .../app/views/common/configs/services_config.js | 2 + .../vendor/scripts/theme/bootstrap-ambari.js | 12 +++++ 5 files changed, 67 insertions(+), 8 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/1e9cebbe/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 0df1644..23c534b 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -744,11 +744,6 @@ h1 { text-decoration: underline; } } - .category-name { - font-size: 14px; - margin-left: 10px; - color: #23527c; - } } .enhanced-config-tab-content http://git-wip-us.apache.org/repos/asf/ambari/blob/1e9cebbe/ambari-web/app/styles/theme/bootstrap-ambari.css ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/theme/bootstrap-ambari.css b/ambari-web/app/styles/theme/bootstrap-ambari.css index 6a353a2..b289517 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -1014,7 +1014,6 @@ input.radio:checked + label:after { line-height: 25px; width: 20px; text-align: center; - line-height: 14px; font-size: 14px; cursor: pointer; vertical-align: middle; @@ -1296,7 +1295,8 @@ input.radio:checked + label:after { display: block; display: -webkit-box; -webkit-line-clamp: 3; - max-height: 47px; /* For firefox */ + max-height: 47px; + /* For firefox */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; @@ -1355,6 +1355,56 @@ input.radio:checked + label:after { .modal .modal-content .modal-footer .btn ~ .btn { margin-left: 10px; } +.accordion .panel-group, +.wizard .wizard-body .wizard-content .accordion .panel-group { + margin-bottom: 0px; +} +.accordion .panel-group .panel, +.wizard .wizard-body .wizard-content .accordion .panel-group .panel { + border-radius: 0px; + border: 1px solid; + border-color: #ccc transparent; + border-bottom: none; + margin-top: 0px; +} +.accordion .panel-group .panel .panel-heading, +.wizard .wizard-body .wizard-content .accordion .panel-group .panel .panel-heading { + height: 50px; + padding: 15px 10px; + border: 1px solid transparent; + background: #fff; +} +.accordion .panel-group .panel .panel-heading .panel-title, +.wizard .wizard-body .wizard-content .accordion .panel-group .panel .panel-heading .panel-title { + font-family: 'Roboto', sans-serif; + font-weight: normal; + font-style: normal; + line-height: 1; + color: #333; + color: #1491c1; +} +.accordion .panel-group .panel .panel-heading .panel-title > a, +.wizard .wizard-body .wizard-content .accordion .panel-group .panel .panel-heading .panel-title > a { + font-size: 18px; +} +.accordion .panel-group .panel .panel-heading .panel-title > i, +.wizard .wizard-body .wizard-content .accordion .panel-group .panel .panel-heading .panel-title > i { + font-size: 20px; +} +.accordion .panel-group .panel .panel-heading:hover, +.wizard .wizard-body .wizard-content .accordion .panel-group .panel .panel-heading:hover { + background: #f3faff; + border: 1px solid #a7dff2; + cursor: pointer; +} +.accordion .panel-group .panel .panel-body, +.wizard .wizard-body .wizard-content .accordion .panel-group .panel .panel-body { + padding: 30px 20px; +} +.accordion .panel-group:last-child .panel, +.wizard .wizard-body .wizard-content .accordion .panel-group:last-child .panel { + border-bottom: 1px solid #ccc; +} h1, h2, h3, http://git-wip-us.apache.org/repos/asf/ambari/blob/1e9cebbe/ambari-web/app/templates/common/configs/service_config_category.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/service_config_category.hbs b/ambari-web/app/templates/common/configs/service_config_category.hbs index 5b577b7..0a4bf7f 100644 --- a/ambari-web/app/templates/common/configs/service_config_category.hbs +++ b/ambari-web/app/templates/common/configs/service_config_category.hbs @@ -18,7 +18,7 @@ <div class="panel panel-default"> <div class="panel-heading" {{action "onToggleBlock" category target="view"}}> <h3 class="panel-title"> - <i {{bindAttr class=":pull-left :panel-toggle view.category.isCollapsed:icon-caret-right:icon-caret-down"}}></i> + <i {{bindAttr class=":pull-right :panel-toggle view.category.isCollapsed:icon-angle-down:icon-angle-up"}}></i> <a class="panel-toggle category-header"> <span class="category-name">{{view.category.displayName}}</span> {{#if view.category.errorCount}} http://git-wip-us.apache.org/repos/asf/ambari/blob/1e9cebbe/ambari-web/app/views/common/configs/services_config.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/configs/services_config.js b/ambari-web/app/views/common/configs/services_config.js index 77ccff8..a8853cd 100644 --- a/ambari-web/app/views/common/configs/services_config.js +++ b/ambari-web/app/views/common/configs/services_config.js @@ -22,6 +22,8 @@ App.ServicesConfigView = Em.View.extend({ templateName: require('templates/common/configs/services_config'), + classNames: ['accordion'], + didInsertElement: function () { this.get('controller').loadStep(); } http://git-wip-us.apache.org/repos/asf/ambari/blob/1e9cebbe/ambari-web/vendor/scripts/theme/bootstrap-ambari.js ---------------------------------------------------------------------- diff --git a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js index f837ef5..5cdbb55 100644 --- a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js +++ b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js @@ -1,5 +1,17 @@ 'use strict'; +$(document).ready(function () { + var $accordionToggler = $(this).find('[data-toggle="collapseAccordion"]'); + $accordionToggler.off('click').on('click', function (event) { + var $this = $(this); + $this.siblings('.panel-body').slideToggle(500); + $this.children().children('.panel-toggle').toggleClass('fa-angle-down fa-angle-up'); + event.stopPropagation(); + return false; + }); +}); +'use strict'; + (function ($) { /**
