From 191046712c36bb10488ade6125d1a48ec24d5903 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Wed, 11 Mar 2015 18:30:46 -0700
Subject: [PATCH] GUAC-1120: Add rudimentary menu styling.

---
 .../webapp/app/userMenu/styles/user-menu.css  | 19 ++++++++++++++++++-
 .../app/userMenu/templates/guacUserMenu.html  | 16 +++++++++++-----
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/guacamole/src/main/webapp/app/userMenu/styles/user-menu.css b/guacamole/src/main/webapp/app/userMenu/styles/user-menu.css
index 75e79b45a..0e6430121 100644
--- a/guacamole/src/main/webapp/app/userMenu/styles/user-menu.css
+++ b/guacamole/src/main/webapp/app/userMenu/styles/user-menu.css
@@ -22,10 +22,27 @@
 
 .user-menu {
     padding: 0.45em;
-    text-align: right;
     float: right;
 }
 
+.user-menu a.username {
+    display: block;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: 0;
+}
+
+.user-menu .options {
+    margin: 0;
+    padding: 0;
+    background: gray;
+}
+
+.user-menu .options li {
+    padding: 0.25em 0.5em;
+    list-style-type: none;
+}
+
 .user-menu .password-dialog {
     visibility: hidden;
     opacity: 0;
diff --git a/guacamole/src/main/webapp/app/userMenu/templates/guacUserMenu.html b/guacamole/src/main/webapp/app/userMenu/templates/guacUserMenu.html
index 0f9cdbad9..08069f539 100644
--- a/guacamole/src/main/webapp/app/userMenu/templates/guacUserMenu.html
+++ b/guacamole/src/main/webapp/app/userMenu/templates/guacUserMenu.html
@@ -21,7 +21,17 @@
        THE SOFTWARE.
     -->
 
-    <a class="change-password button" ng-click="showPasswordUpdate()" ng-show="canChangePassword">{{'USER_MENU.ACTION_CHANGE_PASSWORD' | translate}}</a>
+    <a class="username button">{{username}}</a>
+    
+    <!-- Menu options -->
+    <ul class="options">
+        <li><a class="home" href="#/">{{'USER_MENU.ACTION_NAVIGATE_HOME' | translate}}</a></li>
+        <li><a class="manage" ng-show="canManageGuacamole" href="#/manage/">{{'USER_MENU.ACTION_MANAGE' | translate}}</a></li>
+        <li><a class="change-password" ng-click="showPasswordUpdate()" ng-show="canChangePassword">{{'USER_MENU.ACTION_CHANGE_PASSWORD' | translate}}</a></li>
+        <li><a class="logout" ng-click="logout()">{{'USER_MENU.ACTION_LOGOUT' | translate}}</a></li>
+    </ul>
+
+    <!-- Password dialog -->
     <div class="password-dialog" ng-class="{shown: showPasswordDialog}">
         <!-- Password editor -->
         <div class="section">
@@ -47,9 +57,5 @@
             <button ng-click="closePasswordUpdate()">{{'USER_MENU.ACTION_CANCEL' | translate}}</button>
         </div>
     </div>
-    
-    <a class="home button" href="#/">{{'USER_MENU.ACTION_NAVIGATE_HOME' | translate}}</a>
-    <a class="manage button" ng-show="canManageGuacamole" href="#/manage">{{'USER_MENU.ACTION_MANAGE' | translate}}</a>
-    <a class="logout button" ng-click="logout()">{{'USER_MENU.ACTION_LOGOUT' | translate}}</a>
 
 </div>