Add a logout button when only the error page is shown (#1289)

cloudfoundry · Oct 6, 2017 · 7c80240 · 7c80240
1 parent b7e658e
commit 7c80240
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/components/app-core/frontend/src/view/navbar/navbar.html b/components/app-core/frontend/src/view/navbar/navbar.html
@@ -1,4 +1,14 @@
 <!-- Top navigation -->
+<div class="nav-logout-only app-actions-bar" ng-if="applicationCtrl.hideNavigation && !applicationCtrl.hideAccount">
+  <div class="actions-toolbar">
+    <button
+      class="no-focus btn btn-link actions-toolbar-btn"
+      id="navbar-item-logout"
+      ng-click="applicationCtrl.logout()" tabindex="0">
+      <span translate>menu.logout</span>
+    </button>
+  </div>
+</div>
 <nav class="secondary-nav"
   ng-class="{'navbar-icons-only' : applicationCtrl.navbarIconsOnly, 'navbar-hidden': applicationCtrl.hideNavigation}">
     <div ng-if="!applicationCtrl.hideNavigation" type="button"

diff --git a/components/app-core/frontend/src/view/navbar/navbar.scss b/components/app-core/frontend/src/view/navbar/navbar.scss
@@ -411,3 +411,11 @@ nav.secondary-nav {
     }
   }
 }
+
+.nav-logout-only {
+  text-align: right;
+
+  .actions-toolbar {
+    margin-right: $console-unit-space;
+  }
+}
diff --git a/components/app-framework/src/widgets/actions-toolbar/actions-toolbar.scss b/components/app-framework/src/widgets/actions-toolbar/actions-toolbar.scss
@@ -1,4 +1,4 @@
-actions-toolbar {
+actions-toolbar, .app-actions-bar {
   width: 100%;
   display: flex;
   align-items: center;