AMBARI-22186 Navigation style changes. (atkach)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/2d23e123 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/2d23e123 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/2d23e123 Branch: refs/heads/branch-feature-AMBARI-20859 Commit: 2d23e123fd9b514b8c21d973cb0237e8c3dd6b42 Parents: 5768294 Author: Andrii Tkach <atk...@apache.org> Authored: Tue Oct 10 16:44:35 2017 +0300 Committer: Andrii Tkach <atk...@apache.org> Committed: Tue Oct 10 18:00:24 2017 +0300 ---------------------------------------------------------------------- ambari-web/app/styles/common.less | 1 + .../app/styles/theme/bootstrap-ambari.css | 64 ++++++++++++++------ ambari-web/app/styles/top-nav.less | 22 +++++++ ambari-web/app/templates/application.hbs | 39 ++++++++---- ambari-web/app/templates/main/service/item.hbs | 2 +- 5 files changed, 96 insertions(+), 32 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/ambari-web/app/styles/common.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/common.less b/ambari-web/app/styles/common.less index ddd4f3a..7753a59 100644 --- a/ambari-web/app/styles/common.less +++ b/ambari-web/app/styles/common.less @@ -71,6 +71,7 @@ @top-nav-menu-dropdown-border-color: #c3c3c3; @top-nav-menu-dropdown-bg-color: #fff; @top-nav-menu-dropdown-text-color: #333; +@top-nav-menu-views-menu-color: #1491c1; @-webkit-keyframes orangePulse { from { background-color: @restart-indicator-color; } http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/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 a223949..70579e7 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -464,7 +464,7 @@ h2.table-title { .nav.nav-tabs li a { border-width: 0; border-radius: 0; - border-bottom: 2px solid transparent; + border-bottom: 3px solid transparent; color: #6B6C6C; text-transform: uppercase; } @@ -488,7 +488,7 @@ h2.table-title { .nav-tabs-left li, .nav-tabs-right li { float: none; - margin-bottom: 2px; + margin-bottom: 3px; } .nav-tabs-left li a, .nav-tabs-right li a { @@ -498,25 +498,25 @@ h2.table-title { margin-right: -1px; } .nav-tabs-left li a { - border: 2px solid transparent !important; + border: 3px solid transparent !important; } .nav-tabs-left li.active a, .nav-tabs-left li.active a:hover, .nav-tabs-left li.active a:active, .nav-tabs-left li.active a:focus { - border-right: 2px solid #3FAE2A !important; + border-right: 3px solid #3FAE2A !important; } .nav-tabs-right li { margin-left: -1px; } .nav-tabs-right li a { - border: 2px solid transparent !important; + border: 3px solid transparent !important; } .nav-tabs-right li.active a, .nav-tabs-right li.active a:hover, .nav-tabs-right li.active a:active, .nav-tabs-right li.active a:focus { - border-left: 2px solid #3FAE2A !important; + border-left: 3px solid #3FAE2A !important; } .wizard { border: 2px solid #ebecf1; @@ -797,8 +797,7 @@ input.radio:checked + label:after { cursor: pointer; margin-top: 3px; } -.navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group:hover span.ambari-header, -.navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group:hover span.toggle-icon { +.navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group:hover span.ambari-header { color: #fff; } .navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group span.ambari-header { @@ -890,7 +889,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: 14px; + font-size: 16px; color: #b8bec4; } .navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a .toggle-icon, @@ -904,12 +903,14 @@ input.radio:checked + label:after { color: #b8bec4; padding: 3px 5px 3px 10px; } -.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a, -.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer > a, .navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a, .navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a { padding: 10px 5px 10px 20px; } +.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a, +.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer > a { + padding: 14px 5px 14px 20px; +} .navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a, .navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a { padding: 10px 5px 10px 25px; @@ -922,7 +923,7 @@ input.radio:checked + label:after { .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: #3fae2a; - font-size: 20px; + font-size: 19px; position: relative; padding: 0 15px; left: calc(30%); @@ -1021,7 +1022,7 @@ input.radio:checked + label:after { position: absolute; pointer-events: none; border-color: transparent; - border-left-color: #31823a; + border-left-color: #3fae2a; margin-top: -12px; } .navigation-bar-container ul.nav.side-nav-menu .more-actions, @@ -1097,6 +1098,10 @@ input.radio:checked + label:after { .navigation-bar-container.collapsed ul.nav.side-nav-footer li a .toggle-icon { display: none; } +.navigation-bar-container.collapsed ul.nav.side-nav-menu li a .navigation-icon, +.navigation-bar-container.collapsed ul.nav.side-nav-footer li a .navigation-icon { + font-size: 19px; +} .navigation-bar-container.collapsed ul.nav.side-nav-menu li.navigation-footer a .navigation-icon, .navigation-bar-container.collapsed ul.nav.side-nav-footer li.navigation-footer a .navigation-icon { padding: 0 5px; @@ -1147,7 +1152,7 @@ input.radio:checked + label:after { position: absolute; pointer-events: none; border-color: transparent; - border-left-color: #31823a; + border-left-color: #3fae2a; margin-top: -12px; } .navigation-bar-container.collapsed ul.nav.side-nav-menu .more-actions, @@ -1189,8 +1194,10 @@ input.radio:checked + label:after { position: relative; top: 1px; } +.notifications-dropdown, #notifications-dropdown.dropdown-menu { - width: 400px; + min-width: 400px; + max-width: 400px; min-height: 150px; padding: 0px; z-index: 1000; @@ -1202,6 +1209,7 @@ input.radio:checked + label:after { -moz-box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.29); box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.29); } +.notifications-dropdown .popup-arrow-up, #notifications-dropdown.dropdown-menu .popup-arrow-up { position: absolute; right: 37px; @@ -1210,6 +1218,7 @@ input.radio:checked + label:after { height: 40px; overflow: hidden; } +.notifications-dropdown .popup-arrow-up:after, #notifications-dropdown.dropdown-menu .popup-arrow-up:after { content: ""; position: absolute; @@ -1221,10 +1230,12 @@ input.radio:checked + label:after { left: 10px; box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5); } +.notifications-dropdown .notifications-header, #notifications-dropdown.dropdown-menu .notifications-header { border-bottom: 1px solid #eee; padding: 15px 20px; } +.notifications-dropdown .notifications-header .notifications-title, #notifications-dropdown.dropdown-menu .notifications-header .notifications-title { font-family: 'Roboto', sans-serif; font-weight: normal; @@ -1233,19 +1244,23 @@ input.radio:checked + label:after { color: #333; font-size: 16px; } +.notifications-dropdown .notifications-body, #notifications-dropdown.dropdown-menu .notifications-body { padding: 0px 15px; overflow: auto; max-height: 500px; } +.notifications-dropdown .notifications-body .no-alert-text, #notifications-dropdown.dropdown-menu .notifications-body .no-alert-text { padding: 15px 5px; } +.notifications-dropdown .notifications-body .table-controls, #notifications-dropdown.dropdown-menu .notifications-body .table-controls { padding: 10px 0px; margin: 0px; border-bottom: 1px solid #eee; } +.notifications-dropdown .notifications-body .table-controls .state-filter, #notifications-dropdown.dropdown-menu .notifications-body .table-controls .state-filter { padding: 0px; font-family: 'Roboto', sans-serif; @@ -1257,36 +1272,45 @@ input.radio:checked + label:after { color: #666; position: relative; } +.notifications-dropdown .notifications-body .table-controls .state-filter .form-control.filter-select, #notifications-dropdown.dropdown-menu .notifications-body .table-controls .state-filter .form-control.filter-select { font-size: 12px; color: #666; height: 25px; } +.notifications-dropdown .notifications-body .table.alerts-table, #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table { margin-top: 0px; } +.notifications-dropdown .notifications-body .table.alerts-table tbody tr, #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody tr { cursor: pointer; } +.notifications-dropdown .notifications-body .table.alerts-table tbody tr.no-alert-tr:hover, #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody tr.no-alert-tr:hover { cursor: default; border-color: transparent; border-bottom-color: #eee; } +.notifications-dropdown .notifications-body .table.alerts-table tbody tr.no-alert-tr:hover > td, #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody tr.no-alert-tr:hover > td { border-color: transparent; background-color: white; } +.notifications-dropdown .notifications-body .table.alerts-table tbody td.status, #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.status { width: 9%; padding: 15px 3px; } +.notifications-dropdown .notifications-body .table.alerts-table tbody td.status .alert-state-CRITICAL, #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.status .alert-state-CRITICAL { color: #EF6162; } +.notifications-dropdown .notifications-body .table.alerts-table tbody td.status .alert-state-WARNING, #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.status .alert-state-WARNING { color: #E98A40; } +.notifications-dropdown .notifications-body .table.alerts-table tbody td.content, #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.content { width: 90%; padding: 15px 3px 10px 3px; @@ -1297,12 +1321,14 @@ input.radio:checked + label:after { color: #333; line-height: 1.3; } +.notifications-dropdown .notifications-body .table.alerts-table tbody td.content .name, #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.content .name { font-weight: bold; font-size: 14px; color: #333; margin-bottom: 5px; } +.notifications-dropdown .notifications-body .table.alerts-table tbody td.content .description, #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.content .description { font-size: 12px; color: #666; @@ -1327,11 +1353,13 @@ input.radio:checked + label:after { -webkit-hyphens: auto; hyphens: auto; } +.notifications-dropdown .notifications-body .table.alerts-table tbody td.content .timestamp, #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.content .timestamp { text-align: right; font-size: 11px; color: #999; } +.notifications-dropdown .notifications-footer, #notifications-dropdown.dropdown-menu .notifications-footer { border-top: 1px solid #eee; padding: 15px; @@ -1372,13 +1400,13 @@ input.radio:checked + label:after { } .accordion .panel-group, .wizard .wizard-body .wizard-content .accordion .panel-group { - margin-bottom: 0px; + margin-bottom: 0; } .accordion .panel-group .panel, .wizard .wizard-body .wizard-content .accordion .panel-group .panel { - border-radius: 0px; + border-radius: 0; border: none; - margin-top: 0px; + margin-top: 0; padding: 0 10px; } .accordion .panel-group .panel .panel-heading, http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/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 0644e52..a75d08a 100644 --- a/ambari-web/app/styles/top-nav.less +++ b/ambari-web/app/styles/top-nav.less @@ -109,6 +109,28 @@ .top-nav-user { margin-top: 2px; } + .ambari-views { + margin-top: 17px; + padding: 0 20px 0 10px; + .notifications-dropdown.dropdown-menu { + right: -28px; + min-width: 200px; + max-width: 300px; + min-height: 100px; + li { + padding: 2px 5px; + a { + font-size: 12px; + color: @top-nav-menu-views-menu-color; + } + } + } + i { + font-size: 20px; + color: @top-nav-menu-views-menu-color; + cursor: pointer; + } + } } #notifications-dropdown.dropdown-menu { http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/ambari-web/app/templates/application.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/application.hbs b/ambari-web/app/templates/application.hbs index 03c47db..5c47406 100644 --- a/ambari-web/app/templates/application.hbs +++ b/ambari-web/app/templates/application.hbs @@ -35,19 +35,7 @@ </a> {{/if}} <div class="btn-group"> - <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - <span class="ambari-header" title="Apache Ambari" {{QAAttr "ambari-title"}}>{{t app.name}}</span> - <span class="toggle-icon glyphicon glyphicon-triangle-bottom"></span> - </div> - <ul class="dropdown-menu"> - {{#if view.views.length}} - {{#each item in view.views}} - <li><a class="" href="#" {{action "setView" item target="App.router.mainViewsController"}}>{{item.label}}</a></li> - {{/each}} - {{else}} - <li class="disabled"><a href="javascript:void(null);">{{t menu.item.views.noViews}}</a></li> - {{/if}} - </ul> + <span class="ambari-header" title="Apache Ambari" {{QAAttr "ambari-title"}}>{{t app.name}}</span> </div> </li> </ul> @@ -121,6 +109,31 @@ {{/if}} {{! user dropdown end }} + {{! views menu}} + <div class="navbar-nav navbar-right ambari-views notifications-group"> + {{#if enableLinks}} + <i class="icon-th dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i> + <ul class="notifications-dropdown row dropdown-menu"> + <div class="popup-arrow-up"></div> + <div class="notifications-header col-sm-12"> + <div class="notifications-title">{{t common.views}}</div> + </div> + <div class="notifications-body col-sm-12"> + {{#if view.views.length}} + {{#each item in view.views}} + <li> + <a href="#" {{action "setView" item target="App.router.mainViewsController"}}>{{item.label}}</a> + </li> + {{/each}} + {{else}} + <li class="disabled"><a href="javascript:void(null);">{{t menu.item.views.noViews}}</a></li> + {{/if}} + </div> + </ul> + {{/if}} + </div> + {{!views menu end}} + <div class="navbar-nav navbar-right cluster-notifications"> {{#if enableLinks}} {{! bg label }} http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/ambari-web/app/templates/main/service/item.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/item.hbs b/ambari-web/app/templates/main/service/item.hbs index df26a9d..9abcaf3 100644 --- a/ambari-web/app/templates/main/service/item.hbs +++ b/ambari-web/app/templates/main/service/item.hbs @@ -25,7 +25,7 @@ <div class="service-button"> {{#if view.isMaintenanceActive}} <div class="btn-group display-inline-block"> - <button class="btn btn-default dropdown-toggle" id="service-actions-dropdown-btn" data-toggle="dropdown" href="#"> + <button class="btn btn-success dropdown-toggle" id="service-actions-dropdown-btn" data-toggle="dropdown" href="#"> {{t common.actions}} <span class="caret"></span> </button>