AMBARI-19826. Side Nav: menu should be collapsed(expanded) on clicking.(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/b50fbdb4 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/b50fbdb4 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/b50fbdb4 Branch: refs/heads/side-navigation-feature-branch Commit: b50fbdb48ba52d2eb83ce6e4b0939d84012239d6 Parents: 7691d94 Author: Xi Wang <[email protected]> Authored: Wed Feb 1 13:47:21 2017 -0800 Committer: Xi Wang <[email protected]> Committed: Fri Feb 3 15:51:20 2017 -0800 ---------------------------------------------------------------------- .../app/styles/theme/bootstrap-ambari.css | 14 +++--- ambari-web/app/templates/application.hbs | 8 ++-- .../app/templates/main/side-menu-item.hbs | 46 ++++++++++++-------- ambari-web/app/views/application.js | 4 +- ambari-web/app/views/main/menu.js | 4 +- 5 files changed, 44 insertions(+), 32 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/b50fbdb4/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 d3e6698..adbddcd 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -15,7 +15,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - @font-face { font-family: 'Roboto'; font-weight: normal; @@ -770,7 +769,7 @@ input.radio:checked + label:after { margin-top: -2px; margin-left: -3px; } -.navigation-bar-container ul.nav.side-nav-header li.navigation-header > a.ambari-header { +.navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group span.ambari-header { font-family: 'Roboto', sans-serif; font-weight: normal; font-style: normal; @@ -778,11 +777,12 @@ input.radio:checked + label:after { color: #333; font-size: 20px; width: 55px; + cursor: pointer; display: inline; color: #fff; - padding: 0px 8px; + padding: 0px 8px 0px 10px; } -.navigation-bar-container ul.nav.side-nav-header li.navigation-header span.toggle-icon { +.navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group span.toggle-icon { margin-bottom: 5px; font-size: 13px; cursor: pointer; @@ -790,6 +790,10 @@ input.radio:checked + label:after { vertical-align: middle; color: #b8bec4; } +.navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group.open .dropdown-toggle { + -webkit-box-shadow: none; + box-shadow: none; +} .navigation-bar-container ul.nav.side-nav-header li.navigation-header ul.dropdown-menu { min-width: 190px; max-width: 190px; @@ -965,7 +969,7 @@ input.radio:checked + label:after { .navigation-bar-container.collapsed ul.nav.side-nav-header li.navigation-header { padding: 15px 0px 15px 17px; } -.navigation-bar-container.collapsed ul.nav.side-nav-header li.navigation-header a.ambari-header, +.navigation-bar-container.collapsed ul.nav.side-nav-header li.navigation-header span.ambari-header, .navigation-bar-container.collapsed ul.nav.side-nav-header li.navigation-header span.toggle-icon, .navigation-bar-container.collapsed ul.nav.side-nav-header li.navigation-header .dropdown-menu { display: none; http://git-wip-us.apache.org/repos/asf/ambari/blob/b50fbdb4/ambari-web/app/templates/application.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/application.hbs b/ambari-web/app/templates/application.hbs index b2210b7..99b65b6 100644 --- a/ambari-web/app/templates/application.hbs +++ b/ambari-web/app/templates/application.hbs @@ -27,16 +27,16 @@ <a {{translateAttr href="topnav.logo.href"}} class="ambari-logo"> <img src="/img/ambari-logo.png" alt="Apache Ambari" title="Apache Ambari"> </a> - <a {{translateAttr href="topnav.logo.href"}} class="ambari-header" title="Apache Ambari">{{t app.name}}</a> {{else}} <a class="ambari-logo"> <img src="/img/ambari-logo.png" alt="Apache Ambari" title="Apache Ambari"> </a> - <a class="ambari-header" title="Apache Ambari">{{t app.name}}</a> {{/if}} - <div class="btn-group"> - <span class="dropdown-toggle toggle-icon glyphicon glyphicon-triangle-bottom" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span> + <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}} http://git-wip-us.apache.org/repos/asf/ambari/blob/b50fbdb4/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 19f0a8d..86aaedd 100644 --- a/ambari-web/app/templates/main/side-menu-item.hbs +++ b/ambari-web/app/templates/main/side-menu-item.hbs @@ -17,30 +17,38 @@ }} -<a {{action goToSection view.content.routing target="view"}} {{bindAttr class="view.content.isView:views-button-container"}}> - <span {{bindAttr class=":navigation-icon view.content.iconClass"}}></span> - <span class="navigation-menu-item">{{{unbound view.content.label}}}</span> - {{#if view.isServicesItem}} - <span class="toggle-icon glyphicon glyphicon-menu-down" data-toggle="collapseSubMenu"></span> - {{/if}} - {{#if view.isAdminItem}} - <span class="toggle-icon glyphicon glyphicon-menu-down" data-toggle="collapseSubMenu"></span> - {{/if}} -</a> + <!--dropdown menu for the items had dropdowns--> {{#if view.isServicesItem}} + <a {{bindAttr class="view.content.isView:views-button-container"}} data-toggle="collapseSubMenu"> + <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"></span> + </a> {{view App.SideNavServiceMenuView}} +{{else}} + {{#if view.isAdminItem}} + <a {{bindAttr class="view.content.isView:views-button-container"}} data-toggle="collapseSubMenu"> + <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"></span> + </a> + <ul class="admin-submenu sub-menu nav nav-pills nav-stacked"> + {{#each category in view.dropdownCategories}} + {{#view view.AdminDropdownItemView itemBinding="category.name"}} + <a href="#" {{action "goToCategory" category.url target="view"}}>{{category.label}}</a> + {{/view}} + {{/each}} + </ul> + {{else}} + <a {{action goToSection view.content.routing target="view"}} {{bindAttr class="view.content.isView:views-button-container"}}> + <span {{bindAttr class=":navigation-icon view.content.iconClass"}}></span> + <span class="navigation-menu-item">{{{unbound view.content.label}}}</span> + </a> + {{/if}} {{/if}} -{{#if view.isAdminItem}} - <ul class="admin-submenu sub-menu nav nav-pills nav-stacked"> - {{#each category in view.dropdownCategories}} - {{#view view.AdminDropdownItemView itemBinding="category.name"}} - <a href="#" {{action "goToCategory" category.url target="view"}}>{{category.label}}</a> - {{/view}} - {{/each}} - </ul> -{{/if}} + http://git-wip-us.apache.org/repos/asf/ambari/blob/b50fbdb4/ambari-web/app/views/application.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/application.js b/ambari-web/app/views/application.js index c9cffb1..7f4c32d 100644 --- a/ambari-web/app/views/application.js +++ b/ambari-web/app/views/application.js @@ -61,8 +61,8 @@ App.ApplicationView = Em.View.extend({ // keep showing all submenu $('.navigation-bar-container ul.sub-menu').show(); $(".navigation-bar-container .side-nav-menu>li").unbind('mouseenter mouseleave'); - $('[data-toggle=collapseSubMenu]').removeClass('glyphicon-menu-right'); - $('[data-toggle=collapseSubMenu]').addClass('glyphicon-menu-down'); + $('[data-toggle=collapseSubMenu]').children('.toggle-icon').removeClass('glyphicon-menu-right'); + $('[data-toggle=collapseSubMenu]').children('.toggle-icon').addClass('glyphicon-menu-down'); } //set main content left margin based on the width of side-nav http://git-wip-us.apache.org/repos/asf/ambari/blob/b50fbdb4/ambari-web/app/views/main/menu.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/menu.js b/ambari-web/app/views/main/menu.js index 5cb03f5..d82d56a 100644 --- a/ambari-web/app/views/main/menu.js +++ b/ambari-web/app/views/main/menu.js @@ -62,8 +62,8 @@ App.MainSideMenuView = Em.CollectionView.extend({ didInsertElement: function () { $('[data-toggle=collapseSubMenu]').off('click').on('click', function(event){ - $(this).parent().siblings('.sub-menu').slideToggle(600); - $(this).toggleClass('glyphicon-menu-right glyphicon-menu-down'); + $(this).siblings('.sub-menu').slideToggle(600); + $(this).children('.toggle-icon').toggleClass('glyphicon-menu-right glyphicon-menu-down'); event.stopPropagation(); }); },
