From a89101acaf7adb4ed2947e9aff00b474ef342825 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Sat, 20 Dec 2014 16:07:57 -0800
Subject: [PATCH] GUAC-810: Reorganize client view to support text input.
 Handle text input choice in menu.

---
 .../main/webapp/app/client/clientModule.js    |   2 +-
 .../client/controllers/clientController.js    |   5 +-
 .../main/webapp/app/client/styles/client.css  |  30 +--
 .../webapp/app/client/templates/client.html   | 182 +++++++++---------
 .../app/client/templates/clientError.html     |  35 ----
 5 files changed, 117 insertions(+), 137 deletions(-)
 delete mode 100644 guacamole/src/main/webapp/app/client/templates/clientError.html

diff --git a/guacamole/src/main/webapp/app/client/clientModule.js b/guacamole/src/main/webapp/app/client/clientModule.js
index 944189dd4..38eee4bbb 100644
--- a/guacamole/src/main/webapp/app/client/clientModule.js
+++ b/guacamole/src/main/webapp/app/client/clientModule.js
@@ -23,4 +23,4 @@
 /**
  * The module for code used to connect to a connection or balancing group.
  */
-angular.module('client', ['auth', 'history', 'osk', 'rest']);
+angular.module('client', ['auth', 'history', 'osk', 'rest', 'textInput']);
diff --git a/guacamole/src/main/webapp/app/client/controllers/clientController.js b/guacamole/src/main/webapp/app/client/controllers/clientController.js
index ec2690ee6..e0efc341c 100644
--- a/guacamole/src/main/webapp/app/client/controllers/clientController.js
+++ b/guacamole/src/main/webapp/app/client/controllers/clientController.js
@@ -204,8 +204,9 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
     // Show/hide UI elements depending on input method
     $scope.$watch('inputMethod', function setInputMethod(inputMethod) {
 
-        // Show on-screen keyboard only if selected
-        $scope.showOSK = (inputMethod === 'osk');
+        // Show input methods only if selected
+        $scope.showOSK       = (inputMethod === 'osk');
+        $scope.showTextInput = (inputMethod === 'text');
 
     });
 
diff --git a/guacamole/src/main/webapp/app/client/styles/client.css b/guacamole/src/main/webapp/app/client/styles/client.css
index 615849ca3..6f20b41b4 100644
--- a/guacamole/src/main/webapp/app/client/styles/client.css
+++ b/guacamole/src/main/webapp/app/client/styles/client.css
@@ -27,18 +27,6 @@ body.client {
     overflow: hidden;
 }
 
-/* Viewport Clone */
-
-#viewportClone {
-    display: table;
-    height: 100%;
-    width: 100%;
-    position: fixed;
-    left: 0;
-    top: 0;
-    visibility: hidden;
-}
-
 #preload {
     visibility: hidden;
     position: absolute;
@@ -48,3 +36,21 @@ body.client {
     height: 0;
     overflow: hidden;
 }
+
+.client-view {
+    display: table;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.client-view .client-body {
+    display: table-row;
+}
+
+.client-view .client-bottom {
+    display: table-row;
+    height: 0;
+}
diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html
index 460e71641..fd6fbc406 100644
--- a/guacamole/src/main/webapp/app/client/templates/client.html
+++ b/guacamole/src/main/webapp/app/client/templates/client.html
@@ -20,99 +20,107 @@
    THE SOFTWARE.
 -->
 
-<div id="clientContainer">
-    
-    <!-- Client -->
-    <guac-client 
-        client-properties="clientProperties"
-        id="id"
-        connection-parameters="connectionParameters"
-    ></guac-client>
+<!-- Client view -->
+<div class="client-view">
 
-    <!-- Text input target -->
-    <div id="text-input"><div id="text-input-field"><div id="sent-history"></div><textarea rows="1" id="target"></textarea></div><div id="text-input-buttons"><button class="key" data-keysym="0xFFE3" data-sticky="true">{{'client.ctrl' | translate}}</button><button class="key" data-keysym="0xFFE9" data-sticky="true">{{'client.alt' | translate}}</button><button class="key" data-keysym="0xFF1B">{{'client.esc' | translate}}</button><button class="key" data-keysym="0xFF09">{{'client.tab' | translate}}</button></div></div>
+    <!-- Central portion of view -->
+    <div class="client-body">
 
-    <!-- Dimensional clone of viewport -->
-    <div id="viewportClone"></div>
+        <!-- Client -->
+        <guac-client 
+            client-properties="clientProperties"
+            id="id"
+            connection-parameters="connectionParameters"/></guac-client>
 
-    <!-- Menu -->
-    <div ng-class="{open: menuShown}" id="menu">
-        <h2>{{'client.clipboard' | translate}}</h2>
-        <div class="content" id="clipboard-settings">
-            <p class="description">{{'client.copiedText' | translate}}</p>
-            <textarea ng-model="clipboardData" rows="10" cols="40" id="clipboard"></textarea>
-        </div>
-
-        <h2>{{'client.inputMethod' | translate}}</h2>
-        <div class="content" id="keyboard-settings">
-
-            <!-- No IME -->
-            <div class="choice">
-                <label><input name="input-method" ng-change="closeMenu()" ng-model="inputMethod" type="radio" value="none"/> {{'client.none' | translate}}</label>
-                <p class="caption"><label for="ime-none">{{'client.noneDesc' | translate}}</label></p>
-            </div>
-
-            <!-- Text input -->
-            <div class="choice">
-                <div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div>
-                <label><input name="input-method" ng-change="closeMenu()" ng-model="inputMethod" type="radio" value="text"/> {{'client.textInput' | translate}}</label>
-                <p class="caption"><label for="ime-text">{{'client.textInputDesc' | translate}} </label></p>
-            </div>
-
-            <!-- Guac OSK -->
-            <div class="choice">
-                <label><input name="input-method" ng-change="closeMenu()" ng-model="inputMethod" type="radio" value="osk"/> {{'client.osk' | translate}}</label>
-                <p class="caption"><label for="ime-osk">{{'client.oskDesc' | translate}}</label></p>
-            </div>
-
-        </div>
-
-        <h2>{{'client.mouseMode' | translate}}</h2>
-        <div class="content" id="mouse-settings">
-            <p class="description">{{'client.mouseModeDesc' | translate}}</p>
-
-            <!-- Touchscreen -->
-            <div class="choice">
-                <input name="mouse-mode" ng-change="closeMenu()" ng-model="clientProperties.emulateAbsoluteMouse" type="radio" ng-value="true" checked="checked" id="absolute"/>
-                <div class="figure">
-                    <label for="absolute"><img src="images/settings/touchscreen.png" alt="{{'client.touchscreen' | translate}}"/></label>
-                    <p class="caption"><label for="absolute">{{'client.touchscreenDesc' | translate}}</label></p>
-                </div>
-            </div>
-
-            <!-- Touchpad -->
-            <div class="choice">
-                <input name="mouse-mode" ng-change="closeMenu()" ng-model="clientProperties.emulateAbsoluteMouse" type="radio" ng-value="false" id="relative"/>
-                <div class="figure">
-                    <label for="relative"><img src="images/settings/touchpad.png" alt="{{'client.touchpad' | translate}}"/></label>
-                    <p class="caption"><label for="relative">{{'client.touchpadDesc' | translate}}</label></p>
-                </div>
-            </div>
-
-        </div>
-
-        <h2>{{'client.display' | translate}}</h2>
-        <div class="content">
-            <div id="zoom-settings">
-                <div ng-click="zoomOut()" id="zoom-out"><img src="images/settings/zoom-out.png" alt="-"/></div>
-                <div id="zoom-state">{{formattedScale()}}%</div>
-                <div ng-click="zoomIn()" id="zoom-in"><img src="images/settings/zoom-in.png" alt="+"/></div>
-            </div>
-            <div><label><input ng-model="autoFit" ng-change="changeAutoFit()" ng-disabled="autoFitDisabled()" type="checkbox" id="auto-fit"/> {{'client.autoFit' | translate}}</label></div>
-        </div>
-        
     </div>
 
-    <!-- On-screen keyboard -->
-    <div class="keyboard-container" ng-class="{shown: showOSK}">
-        <guac-osk layout="'client.oskLayout' | translate"/>
+    <!-- Bottom portion of view -->
+    <div class="client-bottom">
+
+        <!-- Text input -->
+        <div class="text-input-container" ng-show="showTextInput">
+            <guac-text-input></guac-text-input>
+        </div>
+
     </div>
 
-    <!-- Images which should be preloaded -->
-    <div id="preload">
-        <img src="images/action-icons/guac-close.png" alt=""/>
-        <img src="images/progress.png" alt=""/>
+</div>
+
+<!-- On-screen keyboard -->
+<div class="keyboard-container" ng-class="{shown: showOSK}">
+    <guac-osk layout="'client.oskLayout' | translate"/>
+</div>
+
+<!-- Menu -->
+<div ng-class="{open: menuShown}" id="menu">
+    <h2>{{'client.clipboard' | translate}}</h2>
+    <div class="content" id="clipboard-settings">
+        <p class="description">{{'client.copiedText' | translate}}</p>
+        <textarea ng-model="clipboardData" rows="10" cols="40" id="clipboard"></textarea>
+    </div>
+
+    <h2>{{'client.inputMethod' | translate}}</h2>
+    <div class="content" id="keyboard-settings">
+
+        <!-- No IME -->
+        <div class="choice">
+            <label><input name="input-method" ng-change="closeMenu()" ng-model="inputMethod" type="radio" value="none"/> {{'client.none' | translate}}</label>
+            <p class="caption"><label for="ime-none">{{'client.noneDesc' | translate}}</label></p>
+        </div>
+
+        <!-- Text input -->
+        <div class="choice">
+            <div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div>
+            <label><input name="input-method" ng-change="closeMenu()" ng-model="inputMethod" type="radio" value="text"/> {{'client.textInput' | translate}}</label>
+            <p class="caption"><label for="ime-text">{{'client.textInputDesc' | translate}} </label></p>
+        </div>
+
+        <!-- Guac OSK -->
+        <div class="choice">
+            <label><input name="input-method" ng-change="closeMenu()" ng-model="inputMethod" type="radio" value="osk"/> {{'client.osk' | translate}}</label>
+            <p class="caption"><label for="ime-osk">{{'client.oskDesc' | translate}}</label></p>
+        </div>
+
+    </div>
+
+    <h2>{{'client.mouseMode' | translate}}</h2>
+    <div class="content" id="mouse-settings">
+        <p class="description">{{'client.mouseModeDesc' | translate}}</p>
+
+        <!-- Touchscreen -->
+        <div class="choice">
+            <input name="mouse-mode" ng-change="closeMenu()" ng-model="clientProperties.emulateAbsoluteMouse" type="radio" ng-value="true" checked="checked" id="absolute"/>
+            <div class="figure">
+                <label for="absolute"><img src="images/settings/touchscreen.png" alt="{{'client.touchscreen' | translate}}"/></label>
+                <p class="caption"><label for="absolute">{{'client.touchscreenDesc' | translate}}</label></p>
+            </div>
+        </div>
+
+        <!-- Touchpad -->
+        <div class="choice">
+            <input name="mouse-mode" ng-change="closeMenu()" ng-model="clientProperties.emulateAbsoluteMouse" type="radio" ng-value="false" id="relative"/>
+            <div class="figure">
+                <label for="relative"><img src="images/settings/touchpad.png" alt="{{'client.touchpad' | translate}}"/></label>
+                <p class="caption"><label for="relative">{{'client.touchpadDesc' | translate}}</label></p>
+            </div>
+        </div>
+
+    </div>
+
+    <h2>{{'client.display' | translate}}</h2>
+    <div class="content">
+        <div id="zoom-settings">
+            <div ng-click="zoomOut()" id="zoom-out"><img src="images/settings/zoom-out.png" alt="-"/></div>
+            <div id="zoom-state">{{formattedScale()}}%</div>
+            <div ng-click="zoomIn()" id="zoom-in"><img src="images/settings/zoom-in.png" alt="+"/></div>
+        </div>
+        <div><label><input ng-model="autoFit" ng-change="changeAutoFit()" ng-disabled="autoFitDisabled()" type="checkbox" id="auto-fit"/> {{'client.autoFit' | translate}}</label></div>
     </div>
     
-    <ng-include src="app/client/template/clientError.html"/>
-</div>
\ No newline at end of file
+</div>
+
+<!-- Images which should be preloaded -->
+<div id="preload">
+    <img src="images/action-icons/guac-close.png" alt=""/>
+    <img src="images/progress.png" alt=""/>
+</div>
diff --git a/guacamole/src/main/webapp/app/client/templates/clientError.html b/guacamole/src/main/webapp/app/client/templates/clientError.html
deleted file mode 100644
index 735d7ca0a..000000000
--- a/guacamole/src/main/webapp/app/client/templates/clientError.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!--
-   Copyright (C) 2014 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.
--->
-
-<div ng-show="errorPresent" class="dialogOuter guac-error">
-    <div class="dialogMiddle">
-        <div class="dialog">
-            <p class="title">{{'client.error.connectionErrorTitle' | translate}}</p>
-
-            <p class="status">{{errorStatus}}</p>
-
-            <div class="reconnect">
-                <button ng-click="reconnect()">{{'client.error.reconnect' | translate}}</button>
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file