You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by nc...@apache.org on 2017/02/24 14:19:09 UTC
[02/50] ambari git commit: AMBARI-20073. Side Nav: multiple changes
based on feedback from UX - 2.(xiwang)
AMBARI-20073. Side Nav: multiple changes based on feedback from UX - 2.(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/d7e9ef21
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/d7e9ef21
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/d7e9ef21
Branch: refs/heads/branch-feature-AMBARI-12556
Commit: d7e9ef21dfa7bca1b91d94398b615f41908983c7
Parents: 36a01d4
Author: Xi Wang <xi...@apache.org>
Authored: Tue Feb 21 14:53:45 2017 -0800
Committer: Xi Wang <xi...@apache.org>
Committed: Tue Feb 21 14:53:52 2017 -0800
----------------------------------------------------------------------
ambari-web/app/styles/application.less | 1 -
.../app/styles/theme/bootstrap-ambari.css | 14 +++-
ambari-web/app/templates/application.hbs | 76 ++++++++++----------
.../vendor/scripts/theme/bootstrap-ambari.js | 9 +++
4 files changed, 59 insertions(+), 41 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/d7e9ef21/ambari-web/app/styles/application.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index befbf5a..b2a7706 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -69,7 +69,6 @@ ul.typeahead.dropdown-menu {
overflow: visible;
padding-bottom: @footer-height;
min-width: 980px;
- margin-left: @side-navigation-width;
.clock-view {
top: 10px;
http://git-wip-us.apache.org/repos/asf/ambari/blob/d7e9ef21/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 5297c77..af78310 100644
--- a/ambari-web/app/styles/theme/bootstrap-ambari.css
+++ b/ambari-web/app/styles/theme/bootstrap-ambari.css
@@ -823,7 +823,6 @@ input.radio:checked + label:after {
.navigation-bar-container ul.nav.side-nav-footer li.submenu-li > 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: 15px 5px 15px 25px;
display: table-cell;
vertical-align: middle;
width: 190px;
@@ -868,6 +867,16 @@ 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: 15px 5px 15px 25px;
+}
+.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;
+}
.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer,
.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer {
background: #313d54;
@@ -1005,6 +1014,7 @@ input.radio:checked + label:after {
.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;
+ vertical-align: bottom;
max-width: 94px;
overflow: hidden;
text-overflow: ellipsis;
@@ -1068,7 +1078,7 @@ input.radio:checked + label:after {
}
.navigation-bar-container.collapsed ul.nav.side-nav-menu li.submenu-li > a,
.navigation-bar-container.collapsed ul.nav.side-nav-footer li.submenu-li > a {
- padding: 15px 5px 15px 25px;
+ padding: 10px 5px 10px 25px;
width: 190px;
}
.navigation-bar-container.collapsed ul.nav.side-nav-menu li.active,
http://git-wip-us.apache.org/repos/asf/ambari/blob/d7e9ef21/ambari-web/app/templates/application.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/application.hbs b/ambari-web/app/templates/application.hbs
index 573d92b..9d6db78 100644
--- a/ambari-web/app/templates/application.hbs
+++ b/ambari-web/app/templates/application.hbs
@@ -21,46 +21,46 @@
{{/if}}
{{#if App.router.mainController.isClusterDataLoaded}}
-<div id="side-nav" class="navigation-bar">
- <div class="navigation-bar-container">
- <ul class="side-nav-header nav nav-pills nav-stacked">
- <li class="navigation-header">
- {{#if enableLinks}}
- <a {{translateAttr href="topnav.logo.href"}} class="ambari-logo">
- <img src="/img/ambari-logo.png" alt="Apache Ambari" title="Apache Ambari">
- </a>
- {{else}}
- <a class="ambari-logo">
- <img src="/img/ambari-logo.png" alt="Apache Ambari" title="Apache Ambari">
- </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">{{t app.name}}</span>
- <span class="toggle-icon glyphicon glyphicon-triangle-bottom"></span>
+ <div id="side-nav" class="navigation-bar">
+ <div class="navigation-bar-container">
+ <ul class="side-nav-header nav nav-pills nav-stacked">
+ <li class="navigation-header">
+ {{#if enableLinks}}
+ <a {{translateAttr href="topnav.logo.href"}} class="ambari-logo">
+ <img src="/img/ambari-logo.png" alt="Apache Ambari" title="Apache Ambari">
+ </a>
+ {{else}}
+ <a class="ambari-logo">
+ <img src="/img/ambari-logo.png" alt="Apache Ambari" title="Apache Ambari">
+ </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">{{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>
</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>
- </div>
- </li>
- </ul>
- {{view App.MainSideMenuView}}
- <ul class="side-nav-footer nav nav-pills nav-stacked">
- <li class="navigation-footer">
- <a href="#" data-toggle="collapse-side-nav">
- <span class="navigation-icon icon-double-angle-left"></span>
- </a>
- </li>
- </ul>
+ </li>
+ </ul>
+ {{view App.MainSideMenuView}}
+ <ul class="side-nav-footer nav nav-pills nav-stacked">
+ <li class="navigation-footer">
+ <a href="#" data-toggle="collapse-side-nav">
+ <span class="navigation-icon icon-double-angle-left"></span>
+ </a>
+ </li>
+ </ul>
+ </div>
</div>
-</div>
{{/if}}
<div id="main">
http://git-wip-us.apache.org/repos/asf/ambari/blob/d7e9ef21/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 eea87c4..77973a9 100644
--- a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js
+++ b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js
@@ -35,6 +35,15 @@
$(this).addClass('navigation-bar-fit-height');
}
+ //set main content left margin based on the width of side-nav
+ var containerWidth = $navigationContainer.width();
+ if (settings.moveLeftContent) {
+ $(settings.content).css('margin-left', containerWidth);
+ }
+ if (settings.moveLeftFooter) {
+ $(settings.footer).css('margin-left', containerWidth);
+ }
+
function popStateHandler() {
var path = window.location.pathname + window.location.hash;
$navigationContainer.find('li a').each(function (index, link) {