Switch to a user menu showing the current logged in user

hawtio · Oct 25, 2013 · 6ffd329 · 6ffd329
1 parent 0cb1bab
commit 6ffd329
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 13 deletions.
diff --git a/hawtio-web/src/main/webapp/app/core/js/app.ts b/hawtio-web/src/main/webapp/app/core/js/app.ts
@@ -100,6 +100,14 @@ module Core {
       $scope.confirmLogout = true;
     };
 
+    $scope.getUsername = () => {
+      if (userDetails.username && !userDetails.username.isBlank()) {
+        return userDetails.username;
+      } else {
+        return 'user';
+      }
+    };
+
     $scope.doLogout = () => {
 
       $scope.confirmLogout = false;

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -1840,8 +1840,9 @@ div#main div ul.nav li a.nav-primary .caret {
   margin-left: 20px;
 }
 .main-nav-upper .nav li a {
-  padding-top: 4px;
+  padding-top: 2px;
   padding-bottom: 5px;
+  border-radius: 0;
 }
 #main-nav {
   max-height: 70px;

diff --git a/hawtio-web/src/main/webapp/css/site-branding.css b/hawtio-web/src/main/webapp/css/site-branding.css
@@ -41,6 +41,11 @@ a:hover {
   max-height: 25px !important;
 }
 
+#main-nav .main-nav-upper .nav li a i.fixme:before {
+  top: 0 !important;
+}
+
+
 #main-nav .navbar-inner {
   background-color: inherit;
   background-image: linear-gradient(to bottom, #3f4349 0%, #464c51 100%);

diff --git a/hawtio-web/src/main/webapp/index.html b/hawtio-web/src/main/webapp/index.html
@@ -99,27 +99,41 @@
                     <i class="icon-desktop"></i>
                   </a>
                 </li>
-                <li ng-show="loggedIn()" ng-class="{active : isActive('#/preferences')}">
-                  <a ng-href="{{link('#/preferences')}}" title="Edit your preferences" data-placement="bottom">
-                    <i class="icon-cogs"></i>
+                <li ng-show="loggedIn()" ng-class="{active : isActive('#/help')}">
+                  <a ng-href="{{link('#/help')}}"
+                     title="Read the help about how to use this console"
+                     data-placement="bottom">
+                    <i class="icon-question-sign"></i>
                   </a>
                 </li>
-                <li ng-show="showLogout()">
-                  <a href="" title="Log out" data-placement="bottom" ng-click="logout()">
-                    <i class="icon-signout"></i>
+
+                <li ng-show="loggedIn()" class="dropdown">
+                  <a href="#"
+                     class="dropdown-toggle"
+                     data-toggle="dropdown">
+                    <i class="icon-user fixme"></i>&nbsp;<span>{{getUsername()}}</span>&nbsp;<span class="caret"></span>
                   </a>
+                  <ul class="dropdown-menu right">
+                    <li>
+                      <a ng-href="{{link('#/preferences')}}" title="Edit your preferences" data-placement="bottom">
+                        <i class="icon-cogs fixme"></i> Preferences
+                      </a>
+                    </li>
+
+                    <li ng-show="showLogout()">
+                      <a href="" title="Log out" data-placement="bottom" ng-click="logout()">
+                        <i class="icon-signout fixme"></i> Log Out
+                      </a>
+                    </li>
+
+                  </ul>
                 </li>
+
                 <li ng-hide="loggedIn()" ng-class="{active : isActive('#/login')}">
                   <a ng-href="{{link('#/login')}}" title="Log in" data-placement="bottom">
                     <i class="icon-user"></i>
                   </a>
                 </li>
-                <li ng-show="loggedIn()" ng-class="{active : isActive('#/help')}">
-                  <a ng-href="{{link('#/help')}}" title="Read the help about how to use this console"
-                     data-placement="bottom">
-                    <i class="icon-question-sign"></i>
-                  </a>
-                </li>
               </ul>
             </div>