GUAC-1172: Display file browser within own menu. Show available devices in guac menu.

guacamole/src/main/webapp/app/client/controllers/clientController.js

@@ -558,6 +558,43 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
     // Set client-specific menu actions
     $scope.clientMenuActions = [ DISCONNECT_MENU_ACTION ];
 
+    /**
+     * The currently-visible filesystem within the filesystem menu, if the
+     * filesystem menu is open. If no filesystem is currently visible, this
+     * will be null.
+     *
+     * @type ManagedFilesystem
+     */
+    $scope.filesystemMenuContents = null;
+
+    /**
+     * Hides the filesystem menu.
+     */
+    $scope.hideFilesystemMenu = function hideFilesystemMenu() {
+        $scope.filesystemMenuContents = null;
+    };
+
+    /**
+     * Shows the filesystem menu, displaying the contents of the given
+     * filesystem within it.
+     *
+     * @param {ManagedFilesystem} filesystem
+     *     The filesystem to show within the filesystem menu.
+     */
+    $scope.showFilesystemMenu = function showFilesystemMenu(filesystem) {
+        $scope.filesystemMenuContents = filesystem;
+    };
+
+    /**
+     * Returns whether the filesystem menu should be visible.
+     *
+     * @returns {Boolean}
+     *     true if the filesystem menu is shown, false otherwise.
+     */
+    $scope.isFilesystemMenuShown = function isFilesystemMenuShown() {
+        return !!$scope.filesystemMenuContents && $scope.menu.shown;
+    };
+
     // Clean up when view destroyed
     $scope.$on('$destroy', function clientViewDestroyed() {
 

guacamole/src/main/webapp/app/client/styles/filesystem-menu.css

@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2015 Glyptodon LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+#filesystem-menu .header h2 {
+
+    font-size: 1em;
+    font-weight: normal;
+
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: 3.5em;
+
+    background-size:         1.5em 1.5em;
+    -moz-background-size:    1.5em 1.5em;
+    -webkit-background-size: 1.5em 1.5em;
+    -khtml-background-size:  1.5em 1.5em;
+    background-repeat: no-repeat;
+    background-position: 1em center;
+    background-image: url('images/drive.png');
+
+}
+
+#filesystem-menu .header {
+    -ms-flex-align:      center;
+    -moz-box-align:      center;
+    -webkit-box-align:   center;
+    -webkit-align-items: center;
+    align-items:         center;
+}

guacamole/src/main/webapp/app/client/styles/guac-menu.css

@@ -160,3 +160,29 @@
 #guac-menu #zoom-state {
     font-size: 2em;
 }
+
+#guac-menu #devices .device {
+
+    padding: 1em;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    background: rgba(0, 0, 0, 0.04);
+
+    padding-left: 3.5em;
+    background-size:         1.5em 1.5em;
+    -moz-background-size:    1.5em 1.5em;
+    -webkit-background-size: 1.5em 1.5em;
+    -khtml-background-size:  1.5em 1.5em;
+
+    background-repeat: no-repeat;
+    background-position: 1em center;
+
+}
+
+#guac-menu #devices .device:hover {
+    cursor: pointer;
+    border-color: black;
+}
+
+#guac-menu #devices .device.filesystem {
+    background-image: url('images/drive.png');
+}

guacamole/src/main/webapp/app/client/templates/client.html

@@ -74,6 +74,16 @@
                     </div>
                 </div>
 
+                <!-- Devices -->
+                <div class="menu-section" id="devices" ng-show="client.filesystems.length">
+                    <h3>{{'CLIENT.SECTION_HEADER_DEVICES' | translate}}</h3>
+                    <div class="content">
+                        <div class="device filesystem" ng-repeat="filesystem in client.filesystems" ng-click="showFilesystemMenu(filesystem)">
+                            {{filesystem.name}}
+                        </div>
+                    </div>
+                </div>
+
                 <!-- File transfers -->
                 <div class="menu-section" id="file-transfers">
                     <h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
@@ -154,4 +164,22 @@
         </div>
     </div>
 
+    <!-- Filesystem menu -->
+    <div id="filesystem-menu" class="menu" ng-class="{open: isFilesystemMenuShown()}">
+        <div class="menu-content">
+
+            <!-- Stationary header -->
+            <div class="header">
+                <h2>{{filesystemMenuContents.name}}</h2>
+                <button class="back" ng-click="hideFilesystemMenu()">Back</button>
+            </div>
+
+            <!-- Scrollable body -->
+            <div class="menu-body">
+                <guac-file-browser client="client" filesystem="filesystemMenuContents"></guac-file-browser>
+            </div>
+
+        </div>
+    </div>
+
 </guac-viewport>

guacamole/src/main/webapp/translations/en.json

@@ -106,6 +106,7 @@
         "NAME_MOUSE_MODE_RELATIVE" : "Touchpad",
 
         "SECTION_HEADER_CLIPBOARD"      : "Clipboard",
+        "SECTION_HEADER_DEVICES"        : "Devices",
         "SECTION_HEADER_DISPLAY"        : "Display",
         "SECTION_HEADER_FILE_TRANSFERS" : "File Transfers",
         "SECTION_HEADER_INPUT_METHOD"   : "Input method",