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/22 00:35:09 UTC
[1/2] ambari git commit: AMBARI-20073. Side Nav: multiple changes
based on feedback from UX - 2.(xiwang)
Repository: ambari
Updated Branches:
refs/heads/side-navigation-feature-branch 36a01d4b9 -> 65d901756
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/side-navigation-feature-branch
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) {
[2/2] ambari git commit: AMBARI-20036. Side Nav: implement the
Services Actions - 2.(xiwang)
Posted by xi...@apache.org.
AMBARI-20036. Side Nav: implement the Services Actions - 2.(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/65d90175
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/65d90175
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/65d90175
Branch: refs/heads/side-navigation-feature-branch
Commit: 65d901756c2b3bfb621bfd028094ffdbdcfca2fa
Parents: d7e9ef2
Author: Xi Wang <xi...@apache.org>
Authored: Tue Feb 21 16:34:21 2017 -0800
Committer: Xi Wang <xi...@apache.org>
Committed: Tue Feb 21 16:34:21 2017 -0800
----------------------------------------------------------------------
ambari-web/vendor/scripts/theme/bootstrap-ambari.js | 7 +++++--
1 file changed, 5 insertions(+), 2 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/65d90175/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 77973a9..1c81aeb 100644
--- a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js
+++ b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js
@@ -126,6 +126,7 @@
});
$moreActions.on('click', function () {
if (settings.fitHeight) {
+ // set actions submenu position
var $moreIcon = $(this);
$moreIcon.children('.dropdown-menu').css('position', 'fixed');
var offset = $moreIcon.offset();
@@ -133,8 +134,10 @@
$moreIcon.children('.dropdown-menu').css('left', offset.left);
}
});
- $moreActions.children('.dropdown-menu').mouseleave(function () {
- $(this).parent().removeClass('open');
+ $moreActions.children('.dropdown-menu').on('click', function () {
+ // some action was triggered, should hide this icon
+ var moreIcon = $(this).parent();
+ setTimeout(function(){ moreIcon.hide(); }, 1000);
});
$navigationContainer.children('.side-nav-menu').scroll(function () {
$moreActions.removeClass('open');