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 0e6430121..895e2a998 100644 --- a/guacamole/src/main/webapp/app/userMenu/styles/user-menu.css +++ b/guacamole/src/main/webapp/app/userMenu/styles/user-menu.css @@ -21,28 +21,90 @@ */ .user-menu { - padding: 0.45em; float: right; + position: relative; } .user-menu a.username { + display: block; - margin-left: 0; - margin-right: 0; - margin-bottom: 0; + + margin: 0; + min-width: 1.75in; + + font-size: 1.25em; + font-weight: bold; + padding: .75em .5em; + border-left: 1px solid rgba(0,0,0,0.125); + background: rgba(0,0,0,0.04); + + padding-left: 2em; + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.5em 0.75em; + background-image: url('images/user-icons/guac-user.png'); + } .user-menu .options { + + position: absolute; + right: 0; margin: 0; padding: 0; - background: gray; + min-width: 100%; + + background: #EEE; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.125); + border-left: 1px solid rgba(0,0,0,0.125); + border-bottom: 1px solid rgba(0,0,0,0.125); + z-index: 0; + } .user-menu .options li { - padding: 0.25em 0.5em; + padding: 0; list-style-type: none; } +.user-menu .options li a { + display: block; + cursor: default; + color: black; + text-decoration: none; + padding: 0.35em 0.5em; +} + +.user-menu .options li a:hover { + background: rgba(0, 0, 0, 0.125); +} + +.user-menu .options li a.home, +.user-menu .options li a.manage, +.user-menu .options li a.change-password, +.user-menu .options li a.logout { + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.5em 0.45em; + padding-left: 2em; +} + +.user-menu .options li a.home { + background-image: url('images/action-icons/guac-home-dark.png'); +} + +.user-menu .options li a.manage { + background-image: url('images/action-icons/guac-config-dark.png'); +} + +.user-menu .options li a.change-password { + background-image: url('images/action-icons/guac-key-dark.png'); +} + +.user-menu .options li a.logout { + background-image: url('images/action-icons/guac-logout-dark.png'); +} + .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 08069f539..0a2cb0850 100644 --- a/guacamole/src/main/webapp/app/userMenu/templates/guacUserMenu.html +++ b/guacamole/src/main/webapp/app/userMenu/templates/guacUserMenu.html @@ -21,7 +21,7 @@ THE SOFTWARE. --> - {{username}} + {{username}}