From e7ba13f844f7ada3f7f24c9b15981e1093187d09 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 23 Jun 2017 11:07:24 -0700
Subject: [PATCH] [Frontend] Add number input

Fixes #1628
Add template and bundle info for numberfield;
Styling in general and toolbar contexts;
---
 .../commonUI/general/res/sass/_global.scss    |  6 ----
 .../general/res/sass/controls/_controls.scss  | 14 ++++++--
 .../res/sass/user-environ/_tool-bar.scss      |  6 ++--
 platform/forms/bundle.js                      |  6 ++++
 .../res/templates/controls/numberfield.html   | 34 +++++++++++++++++++
 5 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 platform/forms/res/templates/controls/numberfield.html

diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss
index 3c7ec68890..4f7c1ed618 100644
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/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;
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index f286f362e9..4c2c1866c9 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/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; }
diff --git a/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss b/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss
index 4ce5a106c5..e8788b195d 100644
--- a/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss
+++ b/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;
diff --git a/platform/forms/bundle.js b/platform/forms/bundle.js
index 8bcc1ea7a1..0f93e0f6bf 100644
--- a/platform/forms/bundle.js
+++ b/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
diff --git a/platform/forms/res/templates/controls/numberfield.html b/platform/forms/res/templates/controls/numberfield.html
new file mode 100644
index 0000000000..7b3ba4fd43
--- /dev/null
+++ b/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>