You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by xi...@apache.org on 2017/02/18 01:20:27 UTC
ambari git commit: AMBARI-20073. Side Nav: multiple changes based on
feedback from UX.(xiwang)
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 <xi...@apache.org>
Authored: Fri Feb 17 17:18:36 2017 -0800
Committer: Xi Wang <xi...@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);
}