Mercurial > hg > thermostat-ng > web-client
changeset 218:de738e948f0a
Add vertical navigation drawer
Reviewed-by: jkang
Review-thread: http://icedtea.classpath.org/pipermail/thermostat/2017-September/025113.html
| author | Andrew Azores <aazores@redhat.com> |
|---|---|
| date | Tue, 19 Sep 2017 17:56:55 -0400 |
| parents | d37a36efafa3 |
| children | baa2100c95bb |
| files | src/app/app.controller.js src/app/app.controller.spec.js src/app/app.module.js src/app/components/landing/landing.html src/app/en.locale.yaml src/app/index.html |
| diffstat | 6 files changed, 155 insertions(+), 74 deletions(-) [+] |
line wrap: on
line diff
--- a/src/app/app.controller.js Mon Sep 18 16:54:31 2017 -0400 +++ b/src/app/app.controller.js Tue Sep 19 17:56:55 2017 -0400 @@ -28,10 +28,11 @@ import authModule from 'components/auth/auth.module.js'; class AppController { - constructor ($scope, environment, authService) { + constructor ($scope, environment, authService, $translate) { 'ngInject'; this.env = environment; this._authService = authService; + this._translate = $translate; $scope.$on('userLoginChanged', () => this._updateUsernameLabel()); } @@ -43,6 +44,24 @@ } this._updateUsernameLabel(); + + this._translate([ + 'navbar.states.JVM_LISTING', + 'navbar.states.MULTICHARTS' + ]).then(translations => { + this.navigationItems = [ + { + title: translations['navbar.states.JVM_LISTING'], + iconClass: 'fa pficon-domain', + uiSref: 'jvmList' + }, + { + title: translations['navbar.states.MULTICHARTS'], + iconClass: 'fa pficon-trend-up', + uiSref: 'multichart' + } + ]; + }); } get loginStatus () {
--- a/src/app/app.controller.spec.js Mon Sep 18 16:54:31 2017 -0400 +++ b/src/app/app.controller.spec.js Tue Sep 19 17:56:55 2017 -0400 @@ -45,7 +45,7 @@ ['testing', 'development', 'production'].forEach(env => { describe(env, () => { - let ctrl, scope, authService; + let ctrl, scope, authService, translate; beforeEach(inject($controller => { 'ngInject'; @@ -55,11 +55,20 @@ login: sinon.spy(), logout: sinon.spy() }; + translate = sinon.stub().returns({ + then: sinon.stub().yields( + { + 'navbar.states.JVM_LISTING': 'JVM Listing', + 'navbar.states.MULTICHARTS': 'Multicharts' + } + ) + }); ctrl = $controller('AppController', { environment: env, $scope: scope, - authService: authService + authService: authService, + $translate: translate }); ctrl.$onInit(); })); @@ -72,7 +81,7 @@ }); describe('logout()', () => { - let ctrl, scope, authService; + let ctrl, scope, authService, translate; beforeEach(inject($controller => { 'ngInject'; @@ -82,11 +91,20 @@ login: sinon.spy(), logout: sinon.spy() }; + translate = sinon.stub().returns({ + then: sinon.stub().yields( + { + 'navbar.states.JVM_LISTING': 'JVM Listing', + 'navbar.states.MULTICHARTS': 'Multicharts' + } + ) + }); ctrl = $controller('AppController', { environment: 'testing', $scope: scope, - authService: authService + authService: authService, + $translate: translate }); ctrl.$onInit(); })); @@ -99,7 +117,7 @@ }); describe('username', () => { - let rootScope, scope, ctrl, authService; + let rootScope, scope, ctrl, authService, translate; beforeEach(inject(($controller, $rootScope) => { 'ngInject'; @@ -111,11 +129,20 @@ logout: sinon.spy(), username: 'fake-username' }; + translate = sinon.stub().returns({ + then: sinon.stub().yields( + { + 'navbar.states.JVM_LISTING': 'JVM Listing', + 'navbar.states.MULTICHARTS': 'Multicharts' + } + ) + }); ctrl = $controller('AppController', { $scope: scope, environment: 'testing', - authService: authService + authService: authService, + $translate: translate }); ctrl.$onInit(); }));
--- a/src/app/app.module.js Mon Sep 18 16:54:31 2017 -0400 +++ b/src/app/app.module.js Tue Sep 19 17:56:55 2017 -0400 @@ -48,6 +48,8 @@ .module('appModule', [ 'ui.router', 'ui.bootstrap', + 'patternfly', + 'patternfly.navigation', angularTranslate, authModule, // non-core modules
--- a/src/app/components/landing/landing.html Mon Sep 18 16:54:31 2017 -0400 +++ b/src/app/components/landing/landing.html Tue Sep 19 17:56:55 2017 -0400 @@ -10,30 +10,3 @@ <h3 translate>landing.APP_TITLE</h3> </div> </div> - -<div class="container-fluid container-cards-pf"> - <div class="row row-cards-pf"> - <div class="col-xs-12 col-md-4"> - <div class="card-pf"> - - <div class="card-pf-heading"> - <div class="card-pf-title" translate>landing.NAVIGATION</div> - </div> - - <div class="card-pf-body"> - <div class="card-pf-subtitle"> - <ul> - <li> - <a ui-sref="jvmList" translate>landing.nav.JVM_LISTING</a> - </li> - <li> - <a ui-sref="multichart" translate>landing.nav.MULTICHARTS</a> - </li> - </ul> - </div> - </div> - - </div> - </div> - </div><!-- /row --> -</div><!-- /container -->
--- a/src/app/en.locale.yaml Mon Sep 18 16:54:31 2017 -0400 +++ b/src/app/en.locale.yaml Tue Sep 19 17:56:55 2017 -0400 @@ -12,3 +12,7 @@ LOGOUT: Log Out USER_PREFS: Preferences + + states: + JVM_LISTING: JVM Listing + MULTICHARTS: Multicharts
--- a/src/app/index.html Mon Sep 18 16:54:31 2017 -0400 +++ b/src/app/index.html Tue Sep 19 17:56:55 2017 -0400 @@ -1,6 +1,6 @@ <!doctype html> <html ng-strict-di class="layout-pf layout-pf-fixed transitions"> -<head> + <head> <meta charset="utf-8"/> <title>Thermostat</title> @@ -8,49 +8,105 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="description" content=""/> <meta name="viewport" content="width=device-width"/> -</head> -<body id="pf-app" class="pf-body apf-body ng-cloak"> - <div ng-controller="AppController as $ctrl"> - <nav class="navbar navbar-pf-vertical"> - <div class="navbar-header"> - <a ui-sref="landing" class="navbar-brand"> - <img id="brandLogoImg" class="navbar-brand-icon" src="~images/thermostat_logo_white_600px.png" height="57" alt="Thermostat"/> - </a> - <p hidden id="envHeader" class="navbar-text label label-info infotip">{{$ctrl.env}}</p> - </div> - <nav class="collapse navbar-collapse"> - <ul class="nav navbar-nav navbar-right navbar-iconic navbar-utility"> - <li class="dropdown"> - <a class="dropdown-toggle nav-item-iconic" id="infoDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> - <span translate-attr="{title: 'navbar.HELP'}" class="fa pficon-help"></span> - <span class="caret"></span> + </head> + <body id="pf-app" class="pf-body apf-body ng-cloak"> + + <div class="" ng-controller="AppController as $ctrl"> + + <div ng-if="!$ctrl.loginStatus"> + + <nav class="navbar navbar-pf-vertical"> + + <div class="navbar-header"> + <a ui-sref="landing" class="navbar-brand"> + <img class="navbar-brand-icon" src="~images/thermostat_logo_white_600px.png" height="57" alt="Thermostat"/> </a> - <ul class="dropdown-menu" aria-labelledby="infoDropdown"> - <li><a translate-attr="{href: 'navbar.HELP_URL'}" translate>navbar.HELP</a></li> - <li><a ui-sref="about" translate>navbar.ABOUT</a></li> + <p hidden class="navbar-text label label-info infotip">{{$ctrl.env}}</p> + </div> + + <nav class="collapse navbar-collapse"> + <ul class="nav navbar-nav navbar-right navbar-iconic navbar-utility"> + <li class="dropdown"> + <a class="dropdown-toggle nav-item-iconic" id="infoDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> + <span translate-attr="{title: 'navbar.HELP'}" class="fa pficon-help"></span> + <span class="caret"></span> + </a> + <ul class="dropdown-menu" aria-labelledby="infoDropdown"> + <li><a translate-attr="{href: 'navbar.HELP_URL'}" translate>navbar.HELP</a></li> + <li><a ui-sref="about" translate>navbar.ABOUT</a></li> + </ul> + </li> </ul> - </li> + </nav> + + </nav> + + <div class="container-pf-nav-pf-vertical-with-tertiary"> + <div class="pf-framework-content"> + <main ui-view class="main pf-framework-view"> + </main> + </div> + </div> + + </div><!--!$ctrl.loginStatus--> - <li id="userMenu" hidden ng-show="$ctrl.loginStatus" class="dropdown"> - <a class="dropdown-toggle nav-item-iconic" id="userDropwdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> - <span translate-attr="{title: 'navbar.USERNAME'}" class="fa pficon-user"></span> {{$ctrl.username}} <span class="caret"></span> - </a> - <ul class="dropdown-menu" aria-labelledby="userDropwdown"> - <li><a ui-sref="user-prefs" translate>navbar.USER_PREFS</a></li> - <li><a id="logoutButton" ng-click="$ctrl.logout()" style="cursor: pointer; cursor: hand" translate>navbar.LOGOUT</a></li> - </ul> - </li> - </ul> - </nav> - </nav> - </div> + <div ng-if="$ctrl.loginStatus"> + <div class="layout-pf layout-pf-fixed faux-layout"> + <pf-vertical-navigation + items="$ctrl.navigationItems" + show-badges="true" + pinnable-menus="true" + update-active-items-on-click="true" + > + <div class="navbar-header"> + <a ui-sref="landing" class="navbar-brand"> + <img id="brandLogoImg" class="navbar-brand-icon" src="~images/thermostat_logo_white_600px.png" height="57" alt="Thermostat"/> + </a> + <p hidden id="envHeader" class="navbar-text label label-info infotip">{{$ctrl.env}}</p> + </div> + + <div> + <ul class="nav navbar-nav navbar-right navbar-iconic"> - <div id="centralPanel" class="container-pf-nav-pf-vertical-with-tertiary"> - <div class="pf-framework-content"> - <main ui-view class="main pf-framework-view"> - </main> + <li class="dropdown"> + </li> + <li class="dropdown"> + <a class="dropdown-toggle nav-item-iconic" id="helpMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> + <span title="Help" class="fa pficon-help"></span> + <span class="caret"></span> + </a> + <ul class="dropdown-menu" aria-labelledby="helpMenu"> + <li><a translate-attr="{href: 'navbar.HELP_URL'}" translate>navbar.HELP</a></li> + <li><a ui-sref="about" translate>navbar.ABOUT</a></li> + </ul> + </li> + + <li ng-if="$ctrl.loginStatus" class="dropdown"> + <a class="dropdown-toggle nav-item-iconic" id="userMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> + <span translate-attr="{title: 'navbar.USERNAME'}" class="fa pficon-user"></span> + {{$ctrl.username}} + <span class="caret"></span> + </a> + <ul class="dropdown-menu" aria-labelledby="userMenu"> + <li><a ui-sref="user-prefs" translate>navbar.USER_PREFS</a></li> + <li><a id="logoutButton" ng-click="$ctrl.logout()" style="cursor: pointer; cursor: hand" translate>navbar.LOGOUT</a></li> + </ul> + </li> + + </ul> + </div> + + </pf-vertical-navigation> + <div class="container-fluid container-cards-pf container-pf-nav-pf-vertical"> + <div class="pf-framework-content"> + <main ui-view class="main pf-framework-view"> + </main> + </div> + </div> + </div> + </div><!--$ctrl.loginStatus--> + </div> - </div> -</body> + </body> </html>