GUACAMOLE-5: Separate menu semantics from guacUserMenu into own guacMenu directive.

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
+
+    };
+}]);

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
 
     };

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;
+}

guacamole/src/main/webapp/app/navigation/styles/user-menu.css

@@ -46,55 +46,7 @@
 
 }
 
-.user-menu .user-menu-dropdown {
+.user-menu .menu-dropdown .menu-title {
-
-    /* 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;
 
     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 {
+.user-menu .menu-dropdown .options li a {
-
-    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;
 
     background-repeat: no-repeat;
     background-size: 1em;
@@ -175,39 +68,17 @@
     background-image: url('images/protocol-icons/guac-monitor.png');
 
 }
-
+.user-menu .menu-dropdown .options li a[href="#/"] {
-.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="#/"] {
     background-image: url('images/action-icons/guac-home-dark.png');
 }
 
-.user-menu .options li a[href="#/settings/users"],
+.user-menu .menu-dropdown .options li a[href="#/settings/users"],
-.user-menu .options li a[href="#/settings/connections"],
+.user-menu .menu-dropdown .options li a[href="#/settings/connections"],
-.user-menu .options li a[href="#/settings/sessions"],
+.user-menu .menu-dropdown .options li a[href="#/settings/sessions"],
-.user-menu .options li a[href="#/settings/preferences"] {
+.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;
-}

guacamole/src/main/webapp/app/navigation/templates/guacMenu.html

@@ -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>

guacamole/src/main/webapp/app/navigation/templates/guacUserMenu.html

@@ -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()">
+        <!-- Navigation links -->
-        <div class="username">{{username}}</div>
+        <guac-page-list pages="pages"></guac-page-list>
-        <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 -->
+        <!-- Actions -->
-            <guac-page-list pages="pages"></guac-page-list>
+        <ul class="action-list">
-
+            <li ng-repeat="action in actions">
-            <!-- Actions -->
+                <a ng-class="action.className" ng-click="action.callback()">
-            <ul class="action-list">
+                    {{action.name | translate}}
-                <li ng-repeat="action in actions">
+                </a>
-                    <a ng-class="action.className" ng-click="action.callback()">
+            </li>
-                        {{action.name | translate}}
+        </ul>
-                    </a>
-                </li>
-            </ul>
-
-        </div>
-    </div>
 
+    </guac-menu>
 </div>