[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;
nasa · Jul 29, 2016 · af36b99 · af36b99
1 parent 69dc893
commit af36b99
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 62 deletions.
diff --git a/example/forms/res/templates/exampleForm.html b/example/forms/res/templates/exampleForm.html
@@ -20,24 +20,23 @@
  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>
         <li>Valid: {{aForm.$valid}}</li>
     </ul>
 
     <pre>
-
-
-    <textarea>
-    {{state | json}}
-    </textarea>
-
+        <textarea>
+            {{state | json}}
+        </textarea>
     </pre>
 </div>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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%;
-
-        }
-    }
-    &.invalid,
-    &.invalid.req {
+mct-form.validates {
+    .form-row.validates {
         > .label {
-            @extend .icon-x;
+            padding-right: $reqSymbolM; // Keep room for validation element
             &:before {
-                color: $colorFormInvalid;
+                position: absolute;
+                right: $interiorMargin;
+                font-size: $reqSymbolFontSize;
+                height: 100%;
+                line-height: 200%;
+
             }
         }
-    }
-    &.valid,
-    &.valid.req {
-        > .label {
-            @extend .icon-check;
-            &:before {
-                color: $colorFormValid;
+        &.invalid,
+        &.invalid.req {
+            > .label {
+                @extend .icon-x;
+                &:before {
+                    color: $colorFormInvalid;
+                }
             }
         }
-    }
-    &.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;
 }
diff --git 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
@@ -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>