From aa633c2a638b17051e7a987547045e5cbc36dbe8 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Fri, 22 Mar 2019 16:15:41 -0700 Subject: [PATCH] GUACAMOLE-723: Organize other active connections within collapsible panel. --- .../app/client/directives/guacClientPanel.js | 87 ++++++++++++++++++ .../app/client/styles/other-connections.css | 70 ++++++++++++-- .../webapp/app/client/templates/client.html | 9 +- .../app/client/templates/guacClientPanel.html | 13 +++ .../src/main/webapp/images/arrows/left.png | Bin 0 -> 246 bytes 5 files changed, 162 insertions(+), 17 deletions(-) create mode 100644 guacamole/src/main/webapp/app/client/directives/guacClientPanel.js create mode 100644 guacamole/src/main/webapp/app/client/templates/guacClientPanel.html create mode 100644 guacamole/src/main/webapp/images/arrows/left.png diff --git a/guacamole/src/main/webapp/app/client/directives/guacClientPanel.js b/guacamole/src/main/webapp/app/client/directives/guacClientPanel.js new file mode 100644 index 000000000..bca1498cc --- /dev/null +++ b/guacamole/src/main/webapp/app/client/directives/guacClientPanel.js @@ -0,0 +1,87 @@ +/* + * 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 toolbar/panel which displays a list of active Guacamole connections. The + * panel is fixed to the bottom-right corner of its container and can be + * manually hidden/exposed by the user. + */ +angular.module('client').directive('guacClientPanel', [function guacClientPanel() { + + return { + // Element only + restrict: 'E', + replace: true, + scope: { + + /** + * The ManagedClient instances associated with the active + * connections to be displayed within this panel. + * + * @type ManagedClient[] + */ + clients : '=' + + }, + templateUrl: 'app/client/templates/guacClientPanel.html', + controller: ['$scope', '$element', function guacClientPanelController($scope, $element) { + + /** + * The DOM element containing the scrollable portion of the client + * panel. + * + * @type Element + */ + var scrollableArea = $element.find('.client-panel-connection-list')[0]; + + /** + * Whether the client panel is currently hidden. When hidden, the + * panel will be collapsed against the right side of the + * containiner. + * + * @type Boolean + */ + $scope.panelHidden = false; + + /** + * Toggles whether the client panel is currently hidden. + */ + $scope.togglePanel = function togglePanel() { + $scope.panelHidden = !$scope.panelHidden; + }; + + // Override vertical scrolling, scrolling horizontally instead + scrollableArea.addEventListener('wheel', function reorientVerticalScroll(e) { + + var deltaMultiplier = { + /* DOM_DELTA_PIXEL */ 0x00: 1, + /* DOM_DELTA_LINE */ 0x01: 15, + /* DOM_DELTA_PAGE */ 0x02: scrollableArea.offsetWidth + }; + + if (e.deltaY) { + this.scrollLeft += e.deltaY * (deltaMultiplier[e.deltaMode] || deltaMultiplier(0x01)); + e.preventDefault(); + } + + }); + + }] + }; +}]); \ No newline at end of file diff --git a/guacamole/src/main/webapp/app/client/styles/other-connections.css b/guacamole/src/main/webapp/app/client/styles/other-connections.css index 4fb6e0596..26da0a783 100644 --- a/guacamole/src/main/webapp/app/client/styles/other-connections.css +++ b/guacamole/src/main/webapp/app/client/styles/other-connections.css @@ -19,22 +19,74 @@ #other-connections { - text-align: right; - position: absolute; - right: 0; - bottom: 0; - /* Render above modal status */ z-index: 20; } -#other-connections .connection { +#other-connections .client-panel { + + position: absolute; + right: 0; + bottom: 0; + + border: 1px solid rgba(255, 255, 255, 0.25); + background: rgba(0, 0, 0, 0.25); + max-width: 100%; + white-space: nowrap; + transition: max-width 0.125s, width 0.125s; + +} + +#other-connections .client-panel.hidden { + max-width: 16px; +} + +#other-connections .client-panel-handle { + + position: absolute; + left: 0; + bottom: 0; + height: 100%; + width: 16px; + z-index: 1; + + background-color: white; + background-repeat: no-repeat; + background-size: contain; + background-position: center center; + background-image: url(images/arrows/right.png); + opacity: 0.5; + +} + +#other-connections .client-panel-handle:hover { + opacity: 0.75; +} + +#other-connections .client-panel.hidden .client-panel-handle { + background-image: url(images/arrows/left.png); +} + +#other-connections .client-panel-connection-list { + + text-align: right; + + margin: 0; + padding: 0; + padding-left: 16px; + + overflow-x: auto; + overflow-y: hidden; + +} + +#other-connections .client-panel-connection { display: inline-block; position: relative; - margin: 1em; + margin: 0.5em; border: 1px solid white; background: black; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); @@ -47,7 +99,7 @@ } -#other-connections .connection .name { +#other-connections .client-panel-connection .name { position: absolute; padding: 0.25em 0.5em; @@ -67,6 +119,6 @@ } -#other-connections .connection:hover { +#other-connections .client-panel-connection:hover { opacity: 1; } diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index 32a64a12a..01159b7ea 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -13,14 +13,7 @@
-
- -
- -
-
{{ otherClient.title }}
- -
+
diff --git a/guacamole/src/main/webapp/app/client/templates/guacClientPanel.html b/guacamole/src/main/webapp/app/client/templates/guacClientPanel.html new file mode 100644 index 000000000..67fcfcf01 --- /dev/null +++ b/guacamole/src/main/webapp/app/client/templates/guacClientPanel.html @@ -0,0 +1,13 @@ +
+
+ +
\ No newline at end of file diff --git a/guacamole/src/main/webapp/images/arrows/left.png b/guacamole/src/main/webapp/images/arrows/left.png new file mode 100644 index 0000000000000000000000000000000000000000..920a4fd76a224447bb5197bb46a426599b532695 GIT binary patch literal 246 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=Y)RhkE)4%caKYZ?lYt_f1s;*b zKpodXn9)gNb_Gz7y~NYkmHjcZxR`;3Wo!FYpir}?i(^Q|t+zK0@*Xk}VLjNf%+l$3 zzmk*Ek#i**!gA`LTL2X?)SX@}x4-JotB@4}1VVj%zk literal 0 HcmV?d00001