From af36b9996dcd769d2a0a7d7f1f8a0f9838fd1464 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Thu, 28 Jul 2016 18:32:34 -0700
Subject: [PATCH] [Frontend] Form validation styling

Fixes #1047
<mct-form> must now include class
'validates'  to display validation glyph icons;
removed 'no-validate' from markup; cleaned
up validation scss;
---
 example/forms/res/templates/exampleForm.html  | 21 +++---
 .../commonUI/dialog/res/templates/dialog.html |  3 +-
 .../commonUI/general/res/sass/_constants.scss |  2 +-
 .../commonUI/general/res/sass/_inspector.scss |  2 +-
 .../general/res/sass/forms/_elems.scss        | 13 +---
 .../general/res/sass/forms/_validation.scss   | 74 +++++++++----------
 .../res/templates/plot-options-browse.html    |  6 +-
 .../res/templates/table-options-edit.html     |  2 +-
 8 files changed, 57 insertions(+), 66 deletions(-)

diff --git a/example/forms/res/templates/exampleForm.html b/example/forms/res/templates/exampleForm.html
index 7d6e34b7dc..a315d7c9c9 100644
--- a/example/forms/res/templates/exampleForm.html
+++ b/example/forms/res/templates/exampleForm.html
@@ -20,12 +20,14 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="ExampleFormController">
-    <mct-toolbar structure="toolbar" ng-model="state" name="aToolbar">
-    </mct-toolbar>
-
-    <mct-form structure="form" ng-model="state" name="aForm">
-    </mct-form>
+    <mct-toolbar structure="toolbar"
+                 ng-model="state"
+                 name="aToolbar"></mct-toolbar>
 
+    <mct-form structure="form"
+              ng-model="state"
+              class="validates"
+              name="aForm"></mct-form>
 
     <ul>
         <li>Dirty: {{aForm.$dirty}}</li>
@@ -33,11 +35,8 @@
     </ul>
 
     <pre>
-
-
-    <textarea>
-    {{state | json}}
-    </textarea>
-
+        <textarea>
+            {{state | json}}
+        </textarea>
     </pre>
 </div>
\ No newline at end of file
diff --git a/platform/commonUI/dialog/res/templates/dialog.html b/platform/commonUI/dialog/res/templates/dialog.html
index 48036832c8..85a496ce57 100644
--- a/platform/commonUI/dialog/res/templates/dialog.html
+++ b/platform/commonUI/dialog/res/templates/dialog.html
@@ -21,11 +21,12 @@
 -->
 <div class="abs top-bar">
     <div class="title">{{ngModel.title}}</div>
-    <div class="hint">All fields marked <span class="ui-symbol req">*</span> are required.</div>
+    <div class="hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
 </div>
 <div class='abs editor'>
     <mct-form ng-model="ngModel.value"
               structure="ngModel.structure"
+              class="validates"
               name="createForm">
     </mct-form>
 </div>
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 767917de06..5550a9019e 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -108,7 +108,7 @@ $bubbleMaxW: 300px;
 /*************** Forms */
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
-$reqSymbolFontSize: 0.7em;
+$reqSymbolFontSize: 0.75em;
 /*************** Wait Spinner Defaults */
 $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;
diff --git a/platform/commonUI/general/res/sass/_inspector.scss b/platform/commonUI/general/res/sass/_inspector.scss
index d3a06f2799..bb325dbe17 100644
--- a/platform/commonUI/general/res/sass/_inspector.scss
+++ b/platform/commonUI/general/res/sass/_inspector.scss
@@ -107,7 +107,7 @@
         background-color: $colorInspectorSectionHeaderBg;
         color: $colorInspectorSectionHeaderFg;
         margin-bottom: $interiorMargin;
-        padding: $formTBPad $formLRPad;
+        padding: floor($formTBPad * .75) $formLRPad;
         text-transform: uppercase;
     }
 
diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss
index fcd04a7a53..d8de2fc435 100644
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -136,18 +136,13 @@
     }
 }
 
-.no-validate {
-    .form .form-row >.label {
-        padding-right: 0;
-        &:after {
-            display: none;
-        }
-    }
-}
-
 .hint,
 .s-hint {
 	font-size: 0.9em;
+    .req {
+        color: $colorFormRequired;
+        font-size: 0.7rem;
+    }
 }
 
 .l-result {
diff --git a/platform/commonUI/general/res/sass/forms/_validation.scss b/platform/commonUI/general/res/sass/forms/_validation.scss
index 339593b5fe..b13e11cef9 100644
--- a/platform/commonUI/general/res/sass/forms/_validation.scss
+++ b/platform/commonUI/general/res/sass/forms/_validation.scss
@@ -19,48 +19,44 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-.validates {
-    > .label {
-        padding-right: $reqSymbolM; // Keep room for validation element
-        &:before {
-            position: absolute;
-            right: $interiorMargin;
-            font-size: $reqSymbolFontSize;
-            height: 100%;
-            line-height: 200%;
+mct-form.validates {
+    .form-row.validates {
+        > .label {
+            padding-right: $reqSymbolM; // Keep room for validation element
+            &:before {
+                position: absolute;
+                right: $interiorMargin;
+                font-size: $reqSymbolFontSize;
+                height: 100%;
+                line-height: 200%;
 
+            }
         }
-    }
-    &.invalid,
-    &.invalid.req {
-        > .label {
-            @extend .icon-x;
-            &:before {
-                color: $colorFormInvalid;
+        &.invalid,
+        &.invalid.req {
+            > .label {
+                @extend .icon-x;
+                &:before {
+                    color: $colorFormInvalid;
+                }
+            }
+        }
+        &.valid,
+        &.valid.req {
+            > .label {
+                @extend .icon-check;
+                &:before {
+                    color: $colorFormValid;
+                }
+            }
+        }
+        &.req {
+            > .label {
+                @extend .icon-asterisk;
+                &:before {
+                    color: $colorFormRequired;
+                }
             }
         }
     }
-    &.valid,
-    &.valid.req {
-        > .label {
-            @extend .icon-check;
-            &:before {
-                color: $colorFormValid;
-            }
-        }
-    }
-    &.req {
-        > .label {
-            @extend .icon-asterisk;
-            &:before {
-                color: $colorFormRequired;
-            }
-        }
-    }
-}
-.req {
-	font-size: $reqSymbolFontSize;
-}
-span.req {
-    color: $colorFormRequired;
 }
\ No newline at end of file
diff --git a/platform/features/plot/res/templates/plot-options-browse.html b/platform/features/plot/res/templates/plot-options-browse.html
index b5a02887db..6e790ba95b 100644
--- a/platform/features/plot/res/templates/plot-options-browse.html
+++ b/platform/features/plot/res/templates/plot-options-browse.html
@@ -25,13 +25,13 @@
             ng-model="configuration.plot.xAxis"
             structure="xAxisForm"
             name="xAxisFormState"
-            class="flex-elem l-flex-row no-validate no-margin">
+            class="flex-elem l-flex-row no-margin">
     </mct-form>
     <mct-form
             ng-model="configuration.plot.yAxis"
             structure="yAxisForm"
             name="yAxisFormState"
-            class="flex-elem l-flex-row no-validate no-margin">
+            class="flex-elem l-flex-row no-margin">
     </mct-form>
     <div class="form">
         <div class="section-header ng-binding ng-scope">
@@ -60,7 +60,7 @@
                             ng-model="configuration.plot.series[$index]"
                             structure="plotSeriesForm"
                             name="plotOptionsState"
-                            class="flex-elem l-flex-row no-validate">
+                            class="flex-elem l-flex-row">
                         </mct-form>
                     </span>
                 </li>
diff --git a/platform/features/table/res/templates/table-options-edit.html b/platform/features/table/res/templates/table-options-edit.html
index 01dc4904cd..db6c190acf 100644
--- a/platform/features/table/res/templates/table-options-edit.html
+++ b/platform/features/table/res/templates/table-options-edit.html
@@ -25,6 +25,6 @@
             ng-model="configuration.table.columns"
             structure="columnsForm"
             name="columnsFormState"
-            class="flex-elem l-flex-row no-validate no-margin">
+            class="flex-elem l-flex-row no-margin">
     </mct-form>
 </div>
\ No newline at end of file