mirror of
https://github.com/gyurix1968/guacamole-client.git
synced 2025-10-31 17:13:21 +00:00
GUACAMOLE-5: Separate menu semantics from guacUserMenu into own guacMenu directive.
This commit is contained in:
Michael Jumper
@@ -0,0 +1,91 @@
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A directive which provides an arbitrary menu-style container. The contents
|
||||
* of the directive are displayed only when the menu is open.
|
||||
*/
|
||||
angular.module('navigation').directive('guacMenu', [function guacMenu() {
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
transclude: true,
|
||||
replace: true,
|
||||
scope: {
|
||||
|
||||
/**
|
||||
* The string which should be rendered as the menu title.
|
||||
*
|
||||
* @type String
|
||||
*/
|
||||
menuTitle : '='
|
||||
|
||||
},
|
||||
|
||||
templateUrl: 'app/navigation/templates/guacMenu.html',
|
||||
controller: ['$scope', '$injector', '$element',
|
||||
function guacMenuController($scope, $injector, $element) {
|
||||
|
||||
// Get required services
|
||||
var $document = $injector.get('$document');
|
||||
|
||||
/**
|
||||
* The outermost element of the guacMenu directive.
|
||||
*
|
||||
* @type Element
|
||||
*/
|
||||
var element = $element[0];
|
||||
|
||||
/**
|
||||
* The main document object.
|
||||
*
|
||||
* @type Document
|
||||
*/
|
||||
var document = $document[0];
|
||||
|
||||
/**
|
||||
* Whether the contents of the menu are currently shown.
|
||||
*
|
||||
* @type Boolean
|
||||
*/
|
||||
$scope.menuShown = false;
|
||||
|
||||
/**
|
||||
* Toggles visibility of the menu contents.
|
||||
*/
|
||||
$scope.toggleMenu = function toggleMenu() {
|
||||
$scope.menuShown = !$scope.menuShown;
|
||||
};
|
||||
|
||||
// Close menu when use clicks anywhere else
|
||||
document.body.addEventListener('click', function clickOutsideMenu() {
|
||||
$scope.$apply(function closeMenu() {
|
||||
$scope.menuShown = false;
|
||||
});
|
||||
}, false);
|
||||
|
||||
// Prevent click within menu from triggering the outside-menu handler
|
||||
element.addEventListener('click', function clickInsideMenu(e) {
|
||||
e.stopPropagation();
|
||||
}, false);
|
||||
|
||||
}] // end controller
|
||||
|
||||
};
|
||||
}]);
|
||||
@@ -40,36 +40,15 @@ angular.module('navigation').directive('guacUserMenu', [function guacUserMenu()
|
||||
},
|
||||
|
||||
templateUrl: 'app/navigation/templates/guacUserMenu.html',
|
||||
controller: ['$scope', '$injector', '$element', function guacUserMenuController($scope, $injector, $element) {
|
||||
controller: ['$scope', '$injector',
|
||||
function guacUserMenuController($scope, $injector) {
|
||||
|
||||
// Get required services
|
||||
var $document = $injector.get('$document');
|
||||
var $location = $injector.get('$location');
|
||||
var $route = $injector.get('$route');
|
||||
var authenticationService = $injector.get('authenticationService');
|
||||
var userPageService = $injector.get('userPageService');
|
||||
|
||||
/**
|
||||
* The outermost element of the user menu directive.
|
||||
*
|
||||
* @type Element
|
||||
*/
|
||||
var element = $element[0];
|
||||
|
||||
/**
|
||||
* The main document object.
|
||||
*
|
||||
* @type Document
|
||||
*/
|
||||
var document = $document[0];
|
||||
|
||||
/**
|
||||
* Whether the contents of the user menu are currently shown.
|
||||
*
|
||||
* @type Boolean
|
||||
*/
|
||||
$scope.menuShown = false;
|
||||
|
||||
/**
|
||||
* The username of the current user.
|
||||
*
|
||||
@@ -90,13 +69,6 @@ angular.module('navigation').directive('guacUserMenu', [function guacUserMenu()
|
||||
$scope.pages = pages;
|
||||
});
|
||||
|
||||
/**
|
||||
* Toggles visibility of the user menu.
|
||||
*/
|
||||
$scope.toggleMenu = function toggleMenu() {
|
||||
$scope.menuShown = !$scope.menuShown;
|
||||
};
|
||||
|
||||
/**
|
||||
* Logs out the current user, redirecting them to back to the root
|
||||
* after logout completes.
|
||||
@@ -125,18 +97,6 @@ angular.module('navigation').directive('guacUserMenu', [function guacUserMenu()
|
||||
*/
|
||||
$scope.actions = [ LOGOUT_ACTION ];
|
||||
|
||||
// Close menu when use clicks anywhere else
|
||||
document.body.addEventListener('click', function clickOutsideMenu() {
|
||||
$scope.$apply(function closeMenu() {
|
||||
$scope.menuShown = false;
|
||||
});
|
||||
}, false);
|
||||
|
||||
// Prevent click within menu from triggering the outside-menu handler
|
||||
element.addEventListener('click', function clickInsideMenu(e) {
|
||||
e.stopPropagation();
|
||||
}, false);
|
||||
|
||||
}] // end controller
|
||||
|
||||
};
|
||||
|
||||
155
guacamole/src/main/webapp/app/navigation/styles/menu.css
Normal file
155
guacamole/src/main/webapp/app/navigation/styles/menu.css
Normal file
@@ -0,0 +1,155 @@
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
.menu-dropdown {
|
||||
|
||||
/* 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;
|
||||
|
||||
}
|
||||
|
||||
.menu-dropdown {
|
||||
position: relative;
|
||||
border-left: 1px solid rgba(0,0,0,0.125);
|
||||
background: rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.menu-dropdown:hover {
|
||||
background: rgba(0,0,0,0.01);
|
||||
}
|
||||
|
||||
.menu-dropdown.open,
|
||||
.menu-dropdown.open:hover {
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.menu-dropdown .menu-title {
|
||||
|
||||
cursor: default;
|
||||
margin: 0;
|
||||
min-width: 2in;
|
||||
padding: 0.5em;
|
||||
|
||||
-ms-flex: 0 0 auto;
|
||||
-moz-box-flex: 0;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
|
||||
}
|
||||
|
||||
.menu-dropdown .menu-indicator {
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 2em;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1em;
|
||||
background-position: center center;
|
||||
background-image: url('images/arrows/down.png');
|
||||
|
||||
}
|
||||
|
||||
.menu-dropdown .options {
|
||||
|
||||
visibility: hidden;
|
||||
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
left: -1px;
|
||||
|
||||
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: 5;
|
||||
|
||||
}
|
||||
|
||||
.menu-dropdown .options ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu-dropdown.open .options {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.menu-dropdown .options li {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.menu-dropdown .options li a {
|
||||
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
padding: 0.75em;
|
||||
|
||||
}
|
||||
|
||||
.menu-dropdown .options li a:hover {
|
||||
background-color: #CDA;
|
||||
}
|
||||
|
||||
.menu-dropdown .options li a.current,
|
||||
.menu-dropdown .options li a.current:hover {
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.menu-dropdown .options li a.danger {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: #A43;
|
||||
}
|
||||
|
||||
.menu-dropdown .options li a.danger:hover {
|
||||
background-color: #C54;
|
||||
}
|
||||
@@ -46,55 +46,7 @@
|
||||
|
||||
}
|
||||
|
||||
.user-menu .user-menu-dropdown {
|
||||
|
||||
/* 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;
|
||||
|
||||
}
|
||||
|
||||
.user-menu .user-menu-dropdown {
|
||||
position: relative;
|
||||
border-left: 1px solid rgba(0,0,0,0.125);
|
||||
background: rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.user-menu .user-menu-dropdown:hover {
|
||||
background: rgba(0,0,0,0.01);
|
||||
}
|
||||
|
||||
.user-menu .user-menu-dropdown.open,
|
||||
.user-menu .user-menu-dropdown.open:hover {
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.user-menu .username {
|
||||
|
||||
cursor: default;
|
||||
margin: 0;
|
||||
min-width: 2in;
|
||||
.user-menu .menu-dropdown .menu-title {
|
||||
|
||||
font-size: 1.25em;
|
||||
font-weight: bold;
|
||||
@@ -105,68 +57,9 @@
|
||||
background-position: 0.5em center;
|
||||
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 .menu-indicator {
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 2em;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1em;
|
||||
background-position: center center;
|
||||
background-image: url('images/arrows/down.png');
|
||||
|
||||
}
|
||||
|
||||
.user-menu .options {
|
||||
|
||||
visibility: hidden;
|
||||
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
left: -1px;
|
||||
|
||||
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: 5;
|
||||
|
||||
}
|
||||
|
||||
.user-menu .options ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.user-menu .user-menu-dropdown.open .options {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.user-menu .options li {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.user-menu .options li a {
|
||||
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
padding: 0.75em;
|
||||
.user-menu .menu-dropdown .options li a {
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1em;
|
||||
@@ -175,39 +68,17 @@
|
||||
background-image: url('images/protocol-icons/guac-monitor.png');
|
||||
|
||||
}
|
||||
|
||||
.user-menu .options li a:hover {
|
||||
background-color: #CDA;
|
||||
}
|
||||
|
||||
.user-menu .options li a.current,
|
||||
.user-menu .options li a.current:hover {
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.user-menu .options li a[href="#/"] {
|
||||
.user-menu .menu-dropdown .options li a[href="#/"] {
|
||||
background-image: url('images/action-icons/guac-home-dark.png');
|
||||
}
|
||||
|
||||
.user-menu .options li a[href="#/settings/users"],
|
||||
.user-menu .options li a[href="#/settings/connections"],
|
||||
.user-menu .options li a[href="#/settings/sessions"],
|
||||
.user-menu .options li a[href="#/settings/preferences"] {
|
||||
.user-menu .menu-dropdown .options li a[href="#/settings/users"],
|
||||
.user-menu .menu-dropdown .options li a[href="#/settings/connections"],
|
||||
.user-menu .menu-dropdown .options li a[href="#/settings/sessions"],
|
||||
.user-menu .menu-dropdown .options li a[href="#/settings/preferences"] {
|
||||
background-image: url('images/action-icons/guac-config-dark.png');
|
||||
}
|
||||
|
||||
.user-menu .options li a.logout {
|
||||
.user-menu .menu-dropdown .options li a.logout {
|
||||
background-image: url('images/action-icons/guac-logout-dark.png');
|
||||
}
|
||||
|
||||
.user-menu .options li a.danger {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: #A43;
|
||||
}
|
||||
|
||||
.user-menu .options li a.danger:hover {
|
||||
background-color: #C54;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
<div class="menu-dropdown" ng-class="{open: menuShown}" ng-click="toggleMenu()">
|
||||
<div class="menu-title">{{menuTitle}}</div>
|
||||
<div class="menu-indicator"></div>
|
||||
|
||||
<!-- Menu options -->
|
||||
<div class="options" ng-transclude></div>
|
||||
</div>
|
||||
@@ -1,34 +1,26 @@
|
||||
<div class="user-menu">
|
||||
<guac-menu menu-title="username">
|
||||
|
||||
<!-- Local actions -->
|
||||
<ul class="action-list">
|
||||
<li ng-repeat="action in localActions">
|
||||
<a ng-class="action.className" ng-click="action.callback()">
|
||||
{{action.name | translate}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="user-menu-dropdown" ng-class="{open: menuShown}" ng-click="toggleMenu()">
|
||||
<div class="username">{{username}}</div>
|
||||
<div class="menu-indicator"></div>
|
||||
|
||||
<!-- Menu options -->
|
||||
<div class="options">
|
||||
|
||||
<!-- Local actions -->
|
||||
<ul class="action-list">
|
||||
<li ng-repeat="action in localActions">
|
||||
<a ng-class="action.className" ng-click="action.callback()">
|
||||
{{action.name | translate}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Navigation links -->
|
||||
<guac-page-list pages="pages"></guac-page-list>
|
||||
|
||||
<!-- Navigation links -->
|
||||
<guac-page-list pages="pages"></guac-page-list>
|
||||
|
||||
<!-- Actions -->
|
||||
<ul class="action-list">
|
||||
<li ng-repeat="action in actions">
|
||||
<a ng-class="action.className" ng-click="action.callback()">
|
||||
{{action.name | translate}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<ul class="action-list">
|
||||
<li ng-repeat="action in actions">
|
||||
<a ng-class="action.className" ng-click="action.callback()">
|
||||
{{action.name | translate}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</guac-menu>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user