Merge pull request #1629 from nasa/number-input

Review and integrate new Number input for mct-control

docs/src/guide/index.md

@@ -933,9 +933,10 @@ Note that `templateUrl` is not supported for `containers`.
 
 Controls provide options for the `mct-control` directive. 
  
-Ten standard control types are included in the forms bundle:
+These standard control types are included in the forms bundle:
 
-* `textfield`: An area to enter plain text.
+* `textfield`: A text input to enter plain text.
+* `numberfield`: A text input to enter numbers.
 * `select`: A drop-down list of options.
 * `checkbox`: A box which may be checked/unchecked.
 * `color`: A color picker.

platform/commonUI/general/res/sass/_global.scss

@@ -81,12 +81,6 @@ input, textarea {
     letter-spacing: inherit;
 }
 
-input[type="text"],
-input[type="search"] {
-    vertical-align: baseline;
-    padding: $inputTextP;
-}
-
 h1, h2, h3 {
     letter-spacing: 0.04em;
     margin: 0;

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -224,18 +224,28 @@ textarea {
 
 /******************************************************** INPUTS */
 input[type="text"],
-input[type="search"] {
+input[type="search"],
+input[type="number"] {
     @include nice-input();
+    vertical-align: baseline;
+    padding: $inputTextP;
     &.numeric {
         text-align: right;
     }
 }
 
+.l-input-sm {
+    input[type="text"],
+    input[type="search"],
+    input[type="number"] {
+        width: 50px !important;
+    }
+}
+
 .l-input-lg input[type="text"],
 input[type="text"].lg {  width: 100% !important; }
 .l-input-med input[type="text"],
 input[type="text"].med { width: 200px !important; }
-.l-input-sm input[type="text"],
 input[type="text"].sm {  width: 50px !important; }
 .l-numeric input[type="text"],
 input[type="text"].numeric { text-align: right; }

platform/commonUI/general/res/sass/user-environ/_tool-bar.scss

@@ -26,9 +26,11 @@
 	.l-control-group {
 		height: $btnToolbarH;
 	}
-	input[type="text"] {
+	input[type="text"],
+    input[type="search"],
+    input[type="number"] {
 		box-sizing: border-box;
-		font-size: .9em;
+		font-size: .8em;
 		height: $btnToolbarH;
 		margin-bottom: 1px;
 		position: relative;

platform/forms/README.md

@@ -100,9 +100,10 @@ a form appropriate to pass to a `RegExp` constructor.
 
 ## Adding controls
 
-Four standard control types are included in the forms bundle:
+These control types are included in the forms bundle:
 
-* `textfield`: An area to enter plain text.
+* `textfield`: A text input to enter plain text.
+* `numberfield`: A text input to enter numbers.
 * `select`: A drop-down list of options.
 * `checkbox`: A box which may be checked/unchecked.
 * `color`: A color picker.

platform/forms/bundle.js

@@ -32,6 +32,7 @@ define([
     "text!./res/templates/controls/datetime.html",
     "text!./res/templates/controls/select.html",
     "text!./res/templates/controls/textfield.html",
+    "text!./res/templates/controls/numberfield.html",
     "text!./res/templates/controls/textarea.html",
     "text!./res/templates/controls/button.html",
     "text!./res/templates/controls/color.html",
@@ -52,6 +53,7 @@ define([
     datetimeTemplate,
     selectTemplate,
     textfieldTemplate,
+    numberfieldTemplate,
     textareaTemplate,
     buttonTemplate,
     colorTemplate,
@@ -105,6 +107,10 @@ define([
                     "key": "textfield",
                     "template": textfieldTemplate
                 },
+                {
+                    "key": "numberfield",
+                    "template": numberfieldTemplate
+                },
                 {
                     "key": "textarea",
                     "template": textareaTemplate

platform/forms/res/templates/controls/numberfield.html

@@ -0,0 +1,34 @@
+<!--
+ Open MCT, Copyright (c) 2014-2017, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed 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.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<span class='form-control shell'>
+    <span class='field control {{structure.cssClass}}'>
+        <input type="number"
+               ng-required="ngRequired"
+               ng-model="ngModel[field]"
+               ng-blur="ngBlur()"
+               ng-pattern="ngPattern"
+               min="{{structure.min}}"
+               max="{{structure.max}}"
+               step="{{structure.step}}"
+               name="mctControl">
+    </span>
+</span>