From 1000bcb8669fbfcb11c3f31fd8059e2d547e3985 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Tue, 21 Apr 2015 12:25:32 -0700
Subject: [PATCH] GUAC-1161: Move field header within guacFormField directive.

---
 .../main/webapp/app/form/directives/form.js   | 28 -------------
 .../webapp/app/form/directives/formField.js   | 25 ++++++++++++
 .../main/webapp/app/form/templates/form.html  |  6 +--
 .../webapp/app/form/templates/formField.html  | 39 +++++++++++--------
 .../main/webapp/app/login/styles/login.css    |  6 +--
 .../manage/styles/connection-parameter.css    |  1 +
 6 files changed, 53 insertions(+), 52 deletions(-)

diff --git a/guacamole/src/main/webapp/app/form/directives/form.js b/guacamole/src/main/webapp/app/form/directives/form.js
index f22b9952b..269b32eb9 100644
--- a/guacamole/src/main/webapp/app/form/directives/form.js
+++ b/guacamole/src/main/webapp/app/form/directives/form.js
@@ -113,34 +113,6 @@ angular.module('form').directive('guacForm', [function form() {
 
             };
 
-            /**
-             * Produces the translation string for the header of the given
-             * field. The translation string will be of the form:
-             *
-             * <code>NAMESPACE.FIELD_HEADER_NAME<code>
-             *
-             * where <code>NAMESPACE</code> is the namespace provided to the
-             * directive and <code>NAME</code> is the field name transformed
-             * via translationStringService.canonicalize().
-             *
-             * @param {Field} field
-             *     The field for which to produce the translation string.
-             *
-             * @returns {String}
-             *     The translation string which produces the translated header
-             *     of the field.
-             */
-            $scope.getFieldHeader = function getFieldHeader(field) {
-
-                // If no field, or no name, then no header
-                if (!field || !field.name)
-                    return '';
-
-                return translationStringService.canonicalize($scope.namespace || 'MISSING_NAMESPACE')
-                        + '.FIELD_HEADER_' + translationStringService.canonicalize(field.name);
-
-            };
-
             /**
              * Determines whether the given object is a form, under the
              * assumption that the object is either a form or a field.
diff --git a/guacamole/src/main/webapp/app/form/directives/formField.js b/guacamole/src/main/webapp/app/form/directives/formField.js
index 60b440267..c928af112 100644
--- a/guacamole/src/main/webapp/app/form/directives/formField.js
+++ b/guacamole/src/main/webapp/app/form/directives/formField.js
@@ -110,6 +110,31 @@ angular.module('form').directive('guacFormField', [function formField() {
 
             };
 
+            /**
+             * Produces the translation string for the header of the current
+             * field. The translation string will be of the form:
+             *
+             * <code>NAMESPACE.FIELD_HEADER_NAME<code>
+             *
+             * where <code>NAMESPACE</code> is the namespace provided to the
+             * directive and <code>NAME</code> is the field name transformed
+             * via translationStringService.canonicalize().
+             *
+             * @returns {String}
+             *     The translation string which produces the translated header
+             *     of the field.
+             */
+            $scope.getFieldHeader = function getFieldHeader() {
+
+                // If no field, or no name, then no header
+                if (!$scope.field || !$scope.field.name)
+                    return '';
+
+                return translationStringService.canonicalize($scope.namespace || 'MISSING_NAMESPACE')
+                        + '.FIELD_HEADER_' + translationStringService.canonicalize($scope.field.name);
+
+            };
+
             /**
              * Produces the translation string for the given field option
              * value. The translation string will be of the form:
diff --git a/guacamole/src/main/webapp/app/form/templates/form.html b/guacamole/src/main/webapp/app/form/templates/form.html
index bf8c7ad97..0cc2b8d86 100644
--- a/guacamole/src/main/webapp/app/form/templates/form.html
+++ b/guacamole/src/main/webapp/app/form/templates/form.html
@@ -26,10 +26,8 @@
 
     <!-- All fields in form -->
     <div class="fields">
-        <label ng-repeat="field in form.fields" class="labeled-field">
-            <span class="field-header">{{getFieldHeader(field) | translate}}</span>
-            <guac-form-field namespace="namespace" field="field" model="values[field.name]"></guac-form-field>
-        </label>
+        <guac-form-field ng-repeat="field in form.fields" namespace="namespace"
+                         field="field" model="values[field.name]"></guac-form-field>
     </div>
 
 </div>
diff --git a/guacamole/src/main/webapp/app/form/templates/formField.html b/guacamole/src/main/webapp/app/form/templates/formField.html
index 5c78db80a..e9ecced7b 100644
--- a/guacamole/src/main/webapp/app/form/templates/formField.html
+++ b/guacamole/src/main/webapp/app/form/templates/formField.html
@@ -1,4 +1,4 @@
-<div class="form-field" ng-class="{empty: !model}">
+<label class="labeled-field" ng-class="{empty: !model}">
     <!--
         Copyright 2014 Glyptodon LLC.
 
@@ -21,22 +21,27 @@
         THE SOFTWARE.
     -->
 
-    <!-- Generic input types -->
-    <input ng-show="field.type === 'TEXT'"     type="text"     ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
-    <input ng-show="field.type === 'NUMERIC'"  type="number"   ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
-    <input ng-show="field.type === 'USERNAME'" type="text"     ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
-    <input ng-show="field.type === 'BOOLEAN'"  type="checkbox" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
+    <!-- Field header -->
+    <span class="field-header">{{getFieldHeader() | translate}}</span>
 
-    <!-- Password field -->
-    <div ng-show="field.type === 'PASSWORD'" class="password-field">
-        <input type="{{passwordInputType}}" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
-        <div class="icon toggle-password" ng-click="togglePassword()" title="{{getTogglePasswordHelpText() | translate}}"></div>
+    <!-- Generic input types -->
+    <div class="form-field">
+        <input ng-show="field.type === 'TEXT'"     type="text"     ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
+        <input ng-show="field.type === 'NUMERIC'"  type="number"   ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
+        <input ng-show="field.type === 'USERNAME'" type="text"     ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
+        <input ng-show="field.type === 'BOOLEAN'"  type="checkbox" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
+
+        <!-- Password field -->
+        <div ng-show="field.type === 'PASSWORD'" class="password-field">
+            <input type="{{passwordInputType}}" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
+            <div class="icon toggle-password" ng-click="togglePassword()" title="{{getTogglePasswordHelpText() | translate}}"></div>
+        </div>
+
+        <!-- Multiline field -->
+        <textarea ng-show="field.type === 'MULTILINE'" ng-model="typedValue" autocorrect="off" autocapitalize="off"></textarea>
+
+        <!-- Enumerated field -->
+        <select ng-show="field.type === 'ENUM'" ng-model="typedValue" ng-options="option.value as getFieldOption(option.value) | translate for option in field.options | orderBy: value"></select>
     </div>
 
-    <!-- Multiline field -->
-    <textarea ng-show="field.type === 'MULTILINE'" ng-model="typedValue" autocorrect="off" autocapitalize="off"></textarea>
-
-    <!-- Enumerated field -->
-    <select ng-show="field.type === 'ENUM'" ng-model="typedValue" ng-options="option.value as getFieldOption(option.value) | translate for option in field.options | orderBy: value"></select>
-
-</div>
\ No newline at end of file
+</label>
diff --git a/guacamole/src/main/webapp/app/login/styles/login.css b/guacamole/src/main/webapp/app/login/styles/login.css
index 7bea2dfc8..8f5a6d895 100644
--- a/guacamole/src/main/webapp/app/login/styles/login.css
+++ b/guacamole/src/main/webapp/app/login/styles/login.css
@@ -64,7 +64,7 @@ p.login-error {
     position: relative;
 }
 
-.login-fields .field-header {
+.login-fields .labeled-field .field-header {
 
   display: block;
   position: absolute;
@@ -79,10 +79,10 @@ p.login-error {
 
 }
 
-.login-fields .form-field.empty input {
+.login-fields .labeled-field.empty input {
     background: transparent;
 }
 
-.login-fields .form-field input:focus {
+.login-fields .labeled-field input:focus {
     background: white;
 }
diff --git a/guacamole/src/main/webapp/app/manage/styles/connection-parameter.css b/guacamole/src/main/webapp/app/manage/styles/connection-parameter.css
index 7b226c92b..5038c80f3 100644
--- a/guacamole/src/main/webapp/app/manage/styles/connection-parameter.css
+++ b/guacamole/src/main/webapp/app/manage/styles/connection-parameter.css
@@ -39,4 +39,5 @@
 .connection-parameters .form .fields .form-field {
     display: table-cell;
     padding: 0.125em;
+    vertical-align: top;
 }