AMBARI-22114. Ambari 3.0 : Outstanding UI issues - Part 1 (Ishan via Jaimin)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/969ecfc9 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/969ecfc9 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/969ecfc9 Branch: refs/heads/branch-feature-AMBARI-20859 Commit: 969ecfc9200efec6e4e6e45f397e0af0786c3003 Parents: 1116315 Author: Jaimin Jetly <jai...@hortonworks.com> Authored: Mon Oct 2 22:27:02 2017 -0700 Committer: Jaimin Jetly <jai...@hortonworks.com> Committed: Mon Oct 2 22:27:02 2017 -0700 ---------------------------------------------------------------------- .../app/controllers/main/service/info/summary.js | 1 + ambari-web/app/styles/alerts.less | 6 +++--- ambari-web/app/styles/application.less | 5 +++++ ambari-web/app/styles/bootstrap_overrides.less | 4 ++++ ambari-web/app/styles/modal_popups.less | 2 +- ambari-web/app/styles/theme/bootstrap-ambari.css | 17 +++++++++-------- ambari-web/app/styles/top-nav.less | 5 +++-- ambari-web/app/styles/wizard.less | 9 +++++++++ ambari-web/app/templates/common/breadcrumbs.hbs | 4 +++- .../main/service/info/service_alert_popup.hbs | 6 +++--- ambari-web/app/templates/wizard/step6.hbs | 2 +- ambari-web/app/templates/wizard/step9.hbs | 12 ++++++------ 12 files changed, 48 insertions(+), 25 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/969ecfc9/ambari-web/app/controllers/main/service/info/summary.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/main/service/info/summary.js b/ambari-web/app/controllers/main/service/info/summary.js index d7fff18..d696334 100644 --- a/ambari-web/app/controllers/main/service/info/summary.js +++ b/ambari-web/app/controllers/main/service/info/summary.js @@ -420,6 +420,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix }), isHideBodyScroll: false, primary: Em.I18n.t('common.close'), + primaryClass: 'btn-default', secondary: null }); }, http://git-wip-us.apache.org/repos/asf/ambari/blob/969ecfc9/ambari-web/app/styles/alerts.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/alerts.less b/ambari-web/app/styles/alerts.less index 7db45f1..775c0ef 100644 --- a/ambari-web/app/styles/alerts.less +++ b/ambari-web/app/styles/alerts.less @@ -426,7 +426,7 @@ #summary-alerts-popup { .alert-list-wrap { - padding: 10px 5px; + padding: 10px 5px 5px; .status-icon { padding-right: 5px; min-width: 20px; @@ -447,9 +447,9 @@ .modal-body { padding-left: 0; padding-right: 0; - height: 70%; + height: 75%; font-size: 14px; - .definition-latest-text { + .definition-latest-text, .timeago { font-size: 12px; } } http://git-wip-us.apache.org/repos/asf/ambari/blob/969ecfc9/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 746673a..8181996 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -2797,4 +2797,9 @@ a.abort-icon:hover { color: #b94a48; background-color: #f2dede; border: 1px solid #b94a48; +} + +.breadcrumbs-forward-slash { + display: inline; + color: #D2D3D5; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/969ecfc9/ambari-web/app/styles/bootstrap_overrides.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/bootstrap_overrides.less b/ambari-web/app/styles/bootstrap_overrides.less index 8ba49d1..e1a5ab5 100644 --- a/ambari-web/app/styles/bootstrap_overrides.less +++ b/ambari-web/app/styles/bootstrap_overrides.less @@ -437,4 +437,8 @@ select.form-control { .wizard .wizard-body { padding: 0 !important; +} + +.table.table-hover .action { + padding-right: 10px; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/969ecfc9/ambari-web/app/styles/modal_popups.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/modal_popups.less b/ambari-web/app/styles/modal_popups.less index 97083d2..abe1c63 100644 --- a/ambari-web/app/styles/modal_popups.less +++ b/ambari-web/app/styles/modal_popups.less @@ -389,7 +389,7 @@ } .modal-xlg { - width: 1280px; + width: 100%; .wizard { .container { width: 1236px; http://git-wip-us.apache.org/repos/asf/ambari/blob/969ecfc9/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 f868744..a223949 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -465,7 +465,7 @@ h2.table-title { border-width: 0; border-radius: 0; border-bottom: 2px solid transparent; - color: #666; + color: #6B6C6C; text-transform: uppercase; } .nav.nav-tabs li a:hover, @@ -482,7 +482,8 @@ h2.table-title { } .nav.nav-tabs li.active a { color: #333; - border-bottom: 2px solid #3FAE2A; + border-bottom: 3px solid #3FAE2A; + padding-bottom: 1px; } .nav-tabs-left li, .nav-tabs-right li { @@ -817,7 +818,7 @@ input.radio:checked + label:after { font-size: 13px; display: inline-block; vertical-align: middle; - color: #b8bec4; + color: #43AD49; } .navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group.open .dropdown-toggle { -webkit-box-shadow: none; @@ -889,7 +890,7 @@ input.radio:checked + label:after { .navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a .navigation-icon, .navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a .navigation-icon { line-height: 18px; - font-size: 18px; + font-size: 14px; color: #b8bec4; } .navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a .toggle-icon, @@ -916,11 +917,11 @@ input.radio:checked + label:after { .navigation-bar-container ul.nav.side-nav-menu li.navigation-footer, .navigation-bar-container ul.nav.side-nav-footer li.navigation-footer { background: #313d54; - height: 50px; + height: 48px; } .navigation-bar-container ul.nav.side-nav-menu li.navigation-footer a .navigation-icon, .navigation-bar-container ul.nav.side-nav-footer li.navigation-footer a .navigation-icon { - color: #31823a; + color: #3fae2a; font-size: 20px; position: relative; padding: 0 15px; @@ -1189,8 +1190,7 @@ input.radio:checked + label:after { top: 1px; } #notifications-dropdown.dropdown-menu { - min-width: 300px; - max-width: 300px; + width: 400px; min-height: 150px; padding: 0px; z-index: 1000; @@ -1379,6 +1379,7 @@ input.radio:checked + label:after { border-radius: 0px; border: none; margin-top: 0px; + padding: 0 10px; } .accordion .panel-group .panel .panel-heading, .wizard .wizard-body .wizard-content .accordion .panel-group .panel .panel-heading { http://git-wip-us.apache.org/repos/asf/ambari/blob/969ecfc9/ambari-web/app/styles/top-nav.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/top-nav.less b/ambari-web/app/styles/top-nav.less index 2fd7db0..0644e52 100644 --- a/ambari-web/app/styles/top-nav.less +++ b/ambari-web/app/styles/top-nav.less @@ -23,10 +23,11 @@ background: #fff; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; + margin-bottom: 10px; .navbar-header { - padding: 15px 15px 15px 0px; - margin-top: 5px; + padding: 19px 15px 19px 0px; + margin-top: -5px; font-size: 20px; a { color: #313D54; http://git-wip-us.apache.org/repos/asf/ambari/blob/969ecfc9/ambari-web/app/styles/wizard.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/wizard.less b/ambari-web/app/styles/wizard.less index 130896dd..5f60378 100644 --- a/ambari-web/app/styles/wizard.less +++ b/ambari-web/app/styles/wizard.less @@ -44,6 +44,11 @@ .panel.panel-default.panel-internal { border: 1px solid #ddd; } + .panel.panel-default.panel-internal.install-retry-panel { + border-top: none; + border-left: none; + border-right: none; + } padding: 25px; background-color: #fff; } @@ -218,6 +223,10 @@ .checkbox { margin: 0; } + .host-component-checkbox { + font-size: 12px; + top: 0px; + } } } .spinner-overlay { http://git-wip-us.apache.org/repos/asf/ambari/blob/969ecfc9/ambari-web/app/templates/common/breadcrumbs.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/breadcrumbs.hbs b/ambari-web/app/templates/common/breadcrumbs.hbs index 363b306..a467223 100644 --- a/ambari-web/app/templates/common/breadcrumbs.hbs +++ b/ambari-web/app/templates/common/breadcrumbs.hbs @@ -24,5 +24,7 @@ {{{item.formattedLabel}}} </a> {{/if}} - {{#unless item.isLast}} / {{/unless}} + {{#unless item.isLast}} + <p class="breadcrumbs-forward-slash">/</p> + {{/unless}} {{/each}} http://git-wip-us.apache.org/repos/asf/ambari/blob/969ecfc9/ambari-web/app/templates/main/service/info/service_alert_popup.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/info/service_alert_popup.hbs b/ambari-web/app/templates/main/service/info/service_alert_popup.hbs index 9600aba..1022eef 100644 --- a/ambari-web/app/templates/main/service/info/service_alert_popup.hbs +++ b/ambari-web/app/templates/main/service/info/service_alert_popup.hbs @@ -21,7 +21,7 @@ {{#each alert in view.alerts}} <li class="alert-list-wrap"> <div class="row"> - <div class="col-md-9 name-text"> + <div class="col-md-8 name-text"> <div> <a class="accordion-toggle" href="#" {{action "gotoAlertDetails" alert target="view"}}>{{alert.label}}</a> </div> @@ -29,8 +29,8 @@ {{alert.latestTextSummary}} </div> </div> - <div class="col-md-3 status-col" rel="alert-status-tooltip" > - {{view App.AlertDefinitionSummary contentBinding="alert"}} + <div class="col-md-4 status-col" rel="alert-status-tooltip" > + <div class="display-inline-block">{{view App.AlertDefinitionSummary contentBinding="alert"}}</div> <span class="timeago" {{bindAttr data-original-title="alert.lastTriggeredVerboseDisplay"}}> <span class="status-icon">{{{alert.status}}}</span> <time>{{alert.lastTriggeredForFormatted}}</time> http://git-wip-us.apache.org/repos/asf/ambari/blob/969ecfc9/ambari-web/app/templates/wizard/step6.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/wizard/step6.hbs b/ambari-web/app/templates/wizard/step6.hbs index e7759da..6128b88 100644 --- a/ambari-web/app/templates/wizard/step6.hbs +++ b/ambari-web/app/templates/wizard/step6.hbs @@ -61,7 +61,7 @@ <div class="checkbox" {{bindAttr data-qa="checkbox.dataQaAttr"}}> <input {{bindAttr id="checkbox.uId" checked="checkbox.checked" disabled="checkbox.isDisabled"}} {{action "checkboxClick" checkbox target="view" }} type="checkbox"/> - <label {{bindAttr for="checkbox.uId"}}>{{checkbox.title}}</label> + <label class="host-component-checkbox" {{bindAttr for="checkbox.uId"}}>{{checkbox.title}}</label> </div> </td> {{/each}} http://git-wip-us.apache.org/repos/asf/ambari/blob/969ecfc9/ambari-web/app/templates/wizard/step9.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/wizard/step9.hbs b/ambari-web/app/templates/wizard/step9.hbs index 5d63798..ba13c2c 100644 --- a/ambari-web/app/templates/wizard/step9.hbs +++ b/ambari-web/app/templates/wizard/step9.hbs @@ -32,18 +32,18 @@ <div class="col-md-2" {{QAAttr "progress-message"}}>{{view.progressMessage}}</div> </div> - <div class="panel panel-default panel-internal"> + <div class="panel panel-default panel-internal install-retry-panel"> <div class="panel-heading"> - <div class="pull-left"> + <div class="pull-right"> {{#if controller.showRetry}} - <a class="btn btn-primary" href="#" {{action retry}} {{QAAttr "retry-button"}}> - <i class="glyphicon glyphicon-repeat glyphicon-white"></i> + <button class="btn btn-default" href="#" {{action retry}} {{QAAttr "retry-button"}}> + <i class="glyphicon glyphicon-repeat glyphicon-white"></i> {{t common.retry}} - </a> + </button> {{/if}} </div> <!-- filter by host level --> - <div id="host-filter" class="pull-right"> + <div id="host-filter" class="pull-left"> <ul class="clearfix"> <li class="first">{{t common.show}}:</li> {{#each category in view.categories}}
