AMBARI-20073. Side Nav: multiple changes based on feedback from UX.(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/ab7a6719 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/ab7a6719 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/ab7a6719 Branch: refs/heads/trunk Commit: ab7a6719979fe87695537a498f19619219f81e38 Parents: a12c3ef Author: Xi Wang <xiw...@apache.org> Authored: Fri Feb 17 17:18:36 2017 -0800 Committer: Xi Wang <xiw...@apache.org> Committed: Fri Feb 17 17:18:36 2017 -0800 ---------------------------------------------------------------------- ambari-web/app/styles/application.less | 13 ++++-- .../app/styles/theme/bootstrap-ambari.css | 49 ++++++++++++++++---- ambari-web/app/styles/top-nav.less | 2 +- .../app/templates/main/service/menu_item.hbs | 2 +- .../app/templates/main/side-menu-item.hbs | 4 +- .../vendor/scripts/theme/bootstrap-ambari.js | 2 +- 6 files changed, 55 insertions(+), 17 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/ab7a6719/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 7a5b18e..befbf5a 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -333,17 +333,22 @@ footer { } ::-webkit-scrollbar:vertical { - width: 11px; + width: 10px; } ::-webkit-scrollbar:horizontal { - height: 11px; + height: 10px; } ::-webkit-scrollbar-thumb { border-radius: 8px; - border: 2px solid white; - background-color: rgba(0, 0, 0, .5); + -webkit-border-radius: 8px; + background: rgba(233,233,233,0.5); + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); +} + +::-webkit-scrollbar-thumb:window-inactive { + background: rgba(233,233,233,0.3); } #content { http://git-wip-us.apache.org/repos/asf/ambari/blob/ab7a6719/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 8fd301d..2459808 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -847,6 +847,7 @@ input.radio:checked + label:after { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; + white-space: nowrap; } .navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a .navigation-menu-item, .navigation-bar-container ul.nav.side-nav-footer li.navigation-footer > a .navigation-menu-item, @@ -912,7 +913,7 @@ input.radio:checked + label:after { font-style: normal; line-height: 1; color: #333; - font-size: 13px; + font-size: 14px; color: #999; } .navigation-bar-container ul.nav.side-nav-menu li > ul > li a .submenu-icon, @@ -953,8 +954,6 @@ input.radio:checked + label:after { } .navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a, .navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a { - border-left: 6px solid #3fae2a; - padding-left: 19px; color: #fff; } .navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a .navigation-menu-item, @@ -967,6 +966,21 @@ input.radio:checked + label:after { .navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a .toggle-icon { color: #fff; } +.navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a:after, +.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a:after { + left: 0; + top: 50%; + border: solid transparent; + border-width: 12px 6px; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: transparent; + border-left-color: #3fae2a; + margin-top: -12px; +} .navigation-bar-container ul.nav.side-nav-menu .more-actions, .navigation-bar-container ul.nav.side-nav-footer .more-actions { display: none; @@ -991,6 +1005,16 @@ input.radio:checked + label:after { .navigation-bar-container ul.nav.side-nav-footer .more-actions .dropdown-menu > li > a:hover { background: #f5f5f5; } +.navigation-bar-container ul.nav.side-nav-menu .menu-item-name, +.navigation-bar-container ul.nav.side-nav-footer .menu-item-name { + display: inline-block; + max-width: 94px; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + -ms-text-overflow: ellipsis; + white-space: nowrap; +} .navigation-bar-container .nav-pills > li.active > a, .navigation-bar-container .nav-pills > li.active > a:focus, .navigation-bar-container .nav-pills > li.active > a:hover, @@ -1057,8 +1081,6 @@ input.radio:checked + label:after { } .navigation-bar-container.collapsed ul.nav.side-nav-menu li.active > a, .navigation-bar-container.collapsed ul.nav.side-nav-footer li.active > a { - border-left: 6px solid #3fae2a; - padding-left: 12px; color: #fff; } .navigation-bar-container.collapsed ul.nav.side-nav-menu li.active > a .navigation-menu-item, @@ -1071,9 +1093,20 @@ input.radio:checked + label:after { .navigation-bar-container.collapsed ul.nav.side-nav-footer li.active > a .toggle-icon { color: #fff; } -.navigation-bar-container.collapsed ul.nav.side-nav-menu li.submenu-li.active > a, -.navigation-bar-container.collapsed ul.nav.side-nav-footer li.submenu-li.active > a { - padding-left: 19px; +.navigation-bar-container.collapsed ul.nav.side-nav-menu li.active > a:after, +.navigation-bar-container.collapsed ul.nav.side-nav-footer li.active > a:after { + left: 0; + top: 50%; + border: solid transparent; + border-width: 12px 6px; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: transparent; + border-left-color: #3fae2a; + margin-top: -12px; } .navigation-bar-container.collapsed ul.nav.side-nav-menu .more-actions, .navigation-bar-container.collapsed ul.nav.side-nav-footer .more-actions { http://git-wip-us.apache.org/repos/asf/ambari/blob/ab7a6719/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 78c804f..8c373ce 100644 --- a/ambari-web/app/styles/top-nav.less +++ b/ambari-web/app/styles/top-nav.less @@ -34,7 +34,7 @@ } a.disabled { cursor: default; - color: #ccc; + color: #999; } } http://git-wip-us.apache.org/repos/asf/ambari/blob/ab7a6719/ambari-web/app/templates/main/service/menu_item.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/menu_item.hbs b/ambari-web/app/templates/main/service/menu_item.hbs index ebd898d..239bf8a 100644 --- a/ambari-web/app/templates/main/service/menu_item.hbs +++ b/ambari-web/app/templates/main/service/menu_item.hbs @@ -26,5 +26,5 @@ <i rel="tooltip" {{action goToConfigs target="view"}} {{bindAttr class=":glyphicon :glyphicon-refresh :restart-required-service view.content.isRestartRequired::hidden" data-original-title="view.restartRequiredMessage"}}></i> </span> {{view App.MainDashboardServiceHealthView class="service-health" serviceBinding="view.content"}} - {{unbound view.content.displayName}} + <span class="menu-item-name">{{unbound view.content.displayName}}</span> </a> http://git-wip-us.apache.org/repos/asf/ambari/blob/ab7a6719/ambari-web/app/templates/main/side-menu-item.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/side-menu-item.hbs b/ambari-web/app/templates/main/side-menu-item.hbs index ebe4689..44de409 100644 --- a/ambari-web/app/templates/main/side-menu-item.hbs +++ b/ambari-web/app/templates/main/side-menu-item.hbs @@ -19,18 +19,18 @@ <!--dropdown menu for the items had dropdowns--> {{#if view.isServicesItem}} <a {{bindAttr href="view.content.href" class="view.content.isView:views-button-container"}} data-toggle="collapse-sub-menu"> + <span class="toggle-icon glyphicon glyphicon-menu-down pull-right"></span> <span {{bindAttr class=":navigation-icon view.content.iconClass"}}></span> <span class="navigation-menu-item">{{{unbound view.content.label}}}</span> - <span class="toggle-icon glyphicon glyphicon-menu-down pull-right"></span> </a> {{view App.AllServicesActionView}} {{view App.SideNavServiceMenuView}} {{else}} {{#if view.isAdminItem}} <a {{bindAttr href="view.content.href" class="view.content.isView:views-button-container"}} data-toggle="collapse-sub-menu"> + <span class="toggle-icon glyphicon glyphicon-menu-down pull-right"></span> <span {{bindAttr class=":navigation-icon view.content.iconClass"}}></span> <span class="navigation-menu-item">{{{unbound view.content.label}}}</span> - <span class="toggle-icon glyphicon glyphicon-menu-down pull-right"></span> </a> <ul class="admin-submenu sub-menu nav nav-pills nav-stacked"> {{#each category in view.dropdownCategories}} http://git-wip-us.apache.org/repos/asf/ambari/blob/ab7a6719/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 b8111b9..20e2097 100644 --- a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js +++ b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js @@ -115,7 +115,7 @@ if (settings.fitHeight) { var $moreIcon = $(this); $moreIcon.children('.dropdown-menu').css('position', 'fixed'); - var offset = $(this).offset(); + var offset = $moreIcon.offset(); $moreIcon.children('.dropdown-menu').css('top', offset.top + 20 + 'px'); $moreIcon.children('.dropdown-menu').css('left', offset.left); }