From a97145edf65e1b3527cb7817546cb5b313199dcb Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Mon, 20 Apr 2015 23:33:19 -0700
Subject: [PATCH] GUAC-1161: Use labels and CSS for form layout.

---
 .../src/main/webapp/app/form/templates/form.html   | 14 ++++++--------
 .../main/webapp/app/form/templates/formField.html  |  2 +-
 .../app/manage/styles/connection-parameter.css     | 14 ++++++++++++++
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/guacamole/src/main/webapp/app/form/templates/form.html b/guacamole/src/main/webapp/app/form/templates/form.html
index 962ce4931..bf8c7ad97 100644
--- a/guacamole/src/main/webapp/app/form/templates/form.html
+++ b/guacamole/src/main/webapp/app/form/templates/form.html
@@ -25,13 +25,11 @@
     <h3 ng-show="form.name">{{getSectionHeader(form) | translate}}</h3>
 
     <!-- All fields in form -->
-    <table class="fields">
-        <tr ng-repeat="field in form.fields">
-            <th>{{getFieldHeader(field) | translate}}</th>
-            <td>
-                <guac-form-field namespace="namespace" field="field" model="values[field.name]"></guac-form-field>
-            </td>
-        </tr>
-    </table>
+    <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>
+    </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 ebcf3573f..5c78db80a 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">
+<div class="form-field" ng-class="{empty: !model}">
     <!--
         Copyright 2014 Glyptodon LLC.
 
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 e198c03de..7b226c92b 100644
--- a/guacamole/src/main/webapp/app/manage/styles/connection-parameter.css
+++ b/guacamole/src/main/webapp/app/manage/styles/connection-parameter.css
@@ -26,3 +26,17 @@
 .connection-parameters input[type=number] {
     width: auto;
 }
+
+.connection-parameters .form .fields {
+    display: table;
+}
+
+.connection-parameters .form .fields .labeled-field {
+    display: table-row;
+}
+
+.connection-parameters .form .fields .field-header,
+.connection-parameters .form .fields .form-field {
+    display: table-cell;
+    padding: 0.125em;
+}