ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From xiw...@apache.org
Subject ambari git commit: AMBARI-20073. Side Nav: multiple changes based on feedback from UX.(xiwang)
Date Sat, 18 Feb 2017 01:20:27 GMT
Repository: ambari
Updated Branches:
  refs/heads/side-navigation-feature-branch a12c3efa9 -> ab7a67199


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/side-navigation-feature-branch
Commit: ab7a6719979fe87695537a498f19619219f81e38
Parents: a12c3ef
Author: Xi Wang <xiwang@apache.org>
Authored: Fri Feb 17 17:18:36 2017 -0800
Committer: Xi Wang <xiwang@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"}}&nbsp;
-  {{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);
         }


Mime
View raw message