GUAC-1120: Add rudimentary menu styling.

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;

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">
@@ -48,8 +58,4 @@
         </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>