diff --git a/guacamole/src/main/webapp/app/navigation/directives/guacMenu.js b/guacamole/src/main/webapp/app/navigation/directives/guacMenu.js new file mode 100644 index 000000000..e00cc1c4f --- /dev/null +++ b/guacamole/src/main/webapp/app/navigation/directives/guacMenu.js @@ -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 + + }; +}]); diff --git a/guacamole/src/main/webapp/app/navigation/directives/guacUserMenu.js b/guacamole/src/main/webapp/app/navigation/directives/guacUserMenu.js index aed7b7ce2..249f21701 100644 --- a/guacamole/src/main/webapp/app/navigation/directives/guacUserMenu.js +++ b/guacamole/src/main/webapp/app/navigation/directives/guacUserMenu.js @@ -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 }; diff --git a/guacamole/src/main/webapp/app/navigation/styles/menu.css b/guacamole/src/main/webapp/app/navigation/styles/menu.css new file mode 100644 index 000000000..c40215871 --- /dev/null +++ b/guacamole/src/main/webapp/app/navigation/styles/menu.css @@ -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; +} diff --git a/guacamole/src/main/webapp/app/navigation/styles/user-menu.css b/guacamole/src/main/webapp/app/navigation/styles/user-menu.css index 2d8ae5189..7d679edc3 100644 --- a/guacamole/src/main/webapp/app/navigation/styles/user-menu.css +++ b/guacamole/src/main/webapp/app/navigation/styles/user-menu.css @@ -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; -} diff --git a/guacamole/src/main/webapp/app/navigation/templates/guacMenu.html b/guacamole/src/main/webapp/app/navigation/templates/guacMenu.html new file mode 100644 index 000000000..f1785cd9f --- /dev/null +++ b/guacamole/src/main/webapp/app/navigation/templates/guacMenu.html @@ -0,0 +1,7 @@ +
+
{{menuTitle}}
+
+ + +
+
diff --git a/guacamole/src/main/webapp/app/navigation/templates/guacUserMenu.html b/guacamole/src/main/webapp/app/navigation/templates/guacUserMenu.html index 4acd47442..351da0f2c 100644 --- a/guacamole/src/main/webapp/app/navigation/templates/guacUserMenu.html +++ b/guacamole/src/main/webapp/app/navigation/templates/guacUserMenu.html @@ -1,34 +1,26 @@
+ + + + -
-
{{username}}
-
- - -
- - - + + - - - - - - -
-
+ + +