GUACAMOLE-883: Allow guacTextInput directive to lose focus.

guacamole/src/main/webapp/app/client/styles/keyboard.css

@@ -19,7 +19,6 @@
 
 .keyboard-container {
 
-    display: none;
     text-align: center;
 
     width: 100%;
@@ -33,7 +32,3 @@
     z-index: 1;
 
 }
-
-.keyboard-container.open {
-    display: block;
-}

guacamole/src/main/webapp/app/client/styles/text-input.css

@@ -1,26 +0,0 @@
-/*
- * 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.
- */
-
-.text-input-container {
-    display: none;
-}
-
-.text-input-container.open {
-    display: block;
-}

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

@@ -22,12 +22,12 @@
             <div class="client-bottom">
 
                 <!-- Text input -->
-                <div class="text-input-container" ng-class="{ open : showTextInput }">
+                <div class="text-input-container" ng-if="showTextInput">
-                    <guac-text-input needs-focus="showTextInput"></guac-text-input>
+                    <guac-text-input></guac-text-input>
                 </div>
 
                 <!-- On-screen keyboard -->
-                <div class="keyboard-container" ng-class="{ open : showOSK }">
+                <div class="keyboard-container" ng-if="showOSK">
                     <guac-osk layout="'CLIENT.URL_OSK_LAYOUT' | translate"></guac-osk>
                 </div>
 

guacamole/src/main/webapp/app/textInput/directives/guacKey.js

@@ -78,8 +78,12 @@ angular.module('textInput').directive('guacKey', [function guacKey() {
              * and keyup events. In the case of sticky keys, the pressed state
              * is toggled, and only a single keydown/keyup event will be sent,
              * depending on the current state.
+             *
+             * @param {MouseEvent} event
+             *     The mouse event which resulted in this function being
+             *     invoked.
              */
-            $scope.updateKey = function updateKey() {
+            $scope.updateKey = function updateKey(event) {
 
                 // If sticky, toggle pressed state
                 if ($scope.sticky)
@@ -91,6 +95,9 @@ angular.module('textInput').directive('guacKey', [function guacKey() {
                     $rootScope.$broadcast('guacSyntheticKeyup', $scope.keysym);
                 }
 
+                // Prevent loss of focus due to interaction with buttons
+                event.preventDefault();
+
             };
 
             // Send keyup/keydown when pressed state is altered

guacamole/src/main/webapp/app/textInput/directives/guacTextInput.js

@@ -25,17 +25,7 @@ angular.module('textInput').directive('guacTextInput', [function guacTextInput()
     return {
         restrict: 'E',
         replace: true,
-        scope: {
+        scope: {},
-
-            /**
-             * Whether the text input UI should have focus. Setting this value
-             * is not guaranteed to work, due to browser limitations.
-             * 
-             * @type Boolean
-             */
-            needsFocus : '=?'
-
-        },
 
         templateUrl: 'app/textInput/templates/guacTextInput.html',
         controller: ['$scope', '$rootScope', '$element', '$timeout',
@@ -144,7 +134,6 @@ angular.module('textInput').directive('guacTextInput', [function guacTextInput()
 
             target.onblur = function targetFocusLost() {
                 hasFocus = false;
-                target.focus();
             };
 
             /**
@@ -331,16 +320,6 @@ angular.module('textInput').directive('guacTextInput', [function guacTextInput()
                 e.preventDefault();
             }, false);
 
-            // Attempt to change focus depending on need
-            $scope.$watch('needsFocus', function focusDesireChanged(focusNeeded) {
-
-                if (focusNeeded)
-                    target.focus();
-                else
-                    target.blur();
-
-            });
-
             // If the text input UI has focus, prevent keydown events
             $scope.$on('guacBeforeKeydown', function filterKeydown(event, keysym) {
                 if (hasFocus && !ALLOWED_KEYS[keysym])
@@ -353,6 +332,9 @@ angular.module('textInput').directive('guacTextInput', [function guacTextInput()
                     event.preventDefault();
             });
 
+            // Attempt to focus initially
+            target.focus();
+
         }]
 
     };

guacamole/src/main/webapp/app/textInput/styles/textInput.css

@@ -18,26 +18,36 @@
  */
 
 .text-input {
+
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -moz-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+
     width: 100%;
     background: #222;
     color: white;
-}
 
-.text-input .text-input-field,
-.text-input .text-input-buttons {
-    display: inline-block;
-    vertical-align: middle;
 }
 
 .text-input .text-input-field {
-    width: 30%;
+    -webkit-box-flex: 1;
-    overflow: hidden;
+    -webkit-flex: 1;
-    white-space: nowrap;
+    -moz-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
 }
 
-.text-input .text-input-buttons {
+.text-input .text-input-field {
-    width: 70%;
+    overflow: hidden;
-    text-align: right;
+    white-space: nowrap;
 }
 
 .text-input .target {
@@ -62,10 +72,6 @@
 
 }
 
-.text-input.open {
-    display: block;
-}
-
 .text-input .sent-history {
     display: inline-block;
     vertical-align: middle;

guacamole/src/main/webapp/app/textInput/templates/guacKey.html

@@ -1,4 +1,3 @@
-<button class="key" ng-click="updateKey()" ng-class="{pressed: pressed, sticky: sticky}">
+<button class="key" ng-mousedown="updateKey($event)" ng-class="{pressed: pressed, sticky: sticky}">
-
     {{text | translate}}
 </button>

guacamole/src/main/webapp/app/textInput/templates/guacTextInput.html

@@ -1,6 +1,6 @@
 <div class="text-input">
 
     <!-- Text input target -->
-    <div class="text-input-field"><div class="sent-history"><div class="sent-text" ng-repeat="text in sentText track by $index">{{text}}</div></div><textarea rows="1" class="target" autocorrect="off" autocapitalize="off"></textarea></div><div class="text-input-buttons"><guac-key keysym="65507" sticky="true" text="'CLIENT.NAME_KEY_CTRL'" pressed="ctrlPressed"></guac-key><guac-key keysym="65513" sticky="true" text="'CLIENT.NAME_KEY_ALT'" pressed="altPressed"></guac-key><guac-key keysym="65307" text="'CLIENT.NAME_KEY_ESC'"></guac-key><guac-key keysym="65289" text="'CLIENT.NAME_KEY_TAB'"></guac-key></div>
+    <div class="text-input-field"><div class="sent-history"><div class="sent-text" ng-repeat="text in sentText track by $index">{{text}}</div></div><textarea rows="1" class="target" autocorrect="off" autocapitalize="off" autofocus></textarea></div><div class="text-input-buttons"><guac-key keysym="65507" sticky="true" text="'CLIENT.NAME_KEY_CTRL'" pressed="ctrlPressed"></guac-key><guac-key keysym="65513" sticky="true" text="'CLIENT.NAME_KEY_ALT'" pressed="altPressed"></guac-key><guac-key keysym="65307" text="'CLIENT.NAME_KEY_ESC'"></guac-key><guac-key keysym="65289" text="'CLIENT.NAME_KEY_TAB'"></guac-key></div>
 
 </div>