safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-10 15:11:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-1120: Use flex layout for headers containing the user menu.

Browse Source
This commit is contained in:
Michael Jumper
2015-03-11 22:50:53 -07:00
parent 563a1d1af2
commit 38d3d1930c
8 changed files with 119 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
guacamole/src/main/webapp/app/userMenu/styles/user-menu.css
View File

@@ -20,14 +20,42 @@
* THE SOFTWARE.
*/
.user-menu {
float: right;
.user-menu .user-menu-dropdown {
position: relative;
border-left: 1px solid rgba(0,0,0,0.125);
background: rgba(0,0,0,0.04);
/* IE10 */
display: -ms-flexbox;
-ms-flex-align: center;
-ms-flex-direction: row;
/* Ancient Mozilla */
display: -moz-box;
-moz-box-align: center;
-moz-box-orient: horizontal;
/* Ancient WebKit */
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-orient: horizontal;
/* Old WebKit */
display: -webkit-flex;
-webkit-align-items: center;
-webkit-flex-direction: row;
/* W3C */
display: flex;
align-items: center;
flex-direction: row;
z-index: 5;
}
.user-menu a.username {
display: block;
.user-menu .username {
margin: 0;
min-width: 1.75in;
@@ -35,8 +63,6 @@
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;
@@ -44,21 +70,27 @@
background-position: 0.5em 0.75em;
background-image: url('images/user-icons/guac-user.png');
-ms-flex: 0 0 auto;
-moz-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
.user-menu .options {
position: absolute;
top: 100%;
right: 0;
left: -1px;
margin: 0;
padding: 0;
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;
}
@@ -121,7 +153,7 @@
margin: 1em;
right: 0;
top: 0;
z-index: 1;
z-index: 8;
}
.user-menu .password-dialog.shown {

20
guacamole/src/main/webapp/app/userMenu/templates/guacUserMenu.html
View File

@@ -21,15 +21,17 @@
THE SOFTWARE.
-->
<a class="username">{{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>
<div class="user-menu-dropdown">
<div class="username">{{username}}</div>
<!-- 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>
</div>
<!-- Password dialog -->
<div class="password-dialog" ng-class="{shown: showPasswordDialog}">