mirror of
https://github.com/nasa/openmct.git
synced 2025-01-19 03:06:54 +00:00
[Frontend] Add number input
Fixes #1628 Add template and bundle info for numberfield; Styling in general and toolbar contexts;
This commit is contained in:
parent
a3520ba51e
commit
e7ba13f844
@ -81,12 +81,6 @@ input, textarea {
|
|||||||
letter-spacing: inherit;
|
letter-spacing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"],
|
|
||||||
input[type="search"] {
|
|
||||||
vertical-align: baseline;
|
|
||||||
padding: $inputTextP;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3 {
|
h1, h2, h3 {
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -224,18 +224,28 @@ textarea {
|
|||||||
|
|
||||||
/******************************************************** INPUTS */
|
/******************************************************** INPUTS */
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
input[type="search"] {
|
input[type="search"],
|
||||||
|
input[type="number"] {
|
||||||
@include nice-input();
|
@include nice-input();
|
||||||
|
vertical-align: baseline;
|
||||||
|
padding: $inputTextP;
|
||||||
&.numeric {
|
&.numeric {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.l-input-sm {
|
||||||
|
input[type="text"],
|
||||||
|
input[type="search"],
|
||||||
|
input[type="number"] {
|
||||||
|
width: 50px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.l-input-lg input[type="text"],
|
.l-input-lg input[type="text"],
|
||||||
input[type="text"].lg { width: 100% !important; }
|
input[type="text"].lg { width: 100% !important; }
|
||||||
.l-input-med input[type="text"],
|
.l-input-med input[type="text"],
|
||||||
input[type="text"].med { width: 200px !important; }
|
input[type="text"].med { width: 200px !important; }
|
||||||
.l-input-sm input[type="text"],
|
|
||||||
input[type="text"].sm { width: 50px !important; }
|
input[type="text"].sm { width: 50px !important; }
|
||||||
.l-numeric input[type="text"],
|
.l-numeric input[type="text"],
|
||||||
input[type="text"].numeric { text-align: right; }
|
input[type="text"].numeric { text-align: right; }
|
||||||
|
@ -26,9 +26,11 @@
|
|||||||
.l-control-group {
|
.l-control-group {
|
||||||
height: $btnToolbarH;
|
height: $btnToolbarH;
|
||||||
}
|
}
|
||||||
input[type="text"] {
|
input[type="text"],
|
||||||
|
input[type="search"],
|
||||||
|
input[type="number"] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: .9em;
|
font-size: .8em;
|
||||||
height: $btnToolbarH;
|
height: $btnToolbarH;
|
||||||
margin-bottom: 1px;
|
margin-bottom: 1px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -32,6 +32,7 @@ define([
|
|||||||
"text!./res/templates/controls/datetime.html",
|
"text!./res/templates/controls/datetime.html",
|
||||||
"text!./res/templates/controls/select.html",
|
"text!./res/templates/controls/select.html",
|
||||||
"text!./res/templates/controls/textfield.html",
|
"text!./res/templates/controls/textfield.html",
|
||||||
|
"text!./res/templates/controls/numberfield.html",
|
||||||
"text!./res/templates/controls/textarea.html",
|
"text!./res/templates/controls/textarea.html",
|
||||||
"text!./res/templates/controls/button.html",
|
"text!./res/templates/controls/button.html",
|
||||||
"text!./res/templates/controls/color.html",
|
"text!./res/templates/controls/color.html",
|
||||||
@ -52,6 +53,7 @@ define([
|
|||||||
datetimeTemplate,
|
datetimeTemplate,
|
||||||
selectTemplate,
|
selectTemplate,
|
||||||
textfieldTemplate,
|
textfieldTemplate,
|
||||||
|
numberfieldTemplate,
|
||||||
textareaTemplate,
|
textareaTemplate,
|
||||||
buttonTemplate,
|
buttonTemplate,
|
||||||
colorTemplate,
|
colorTemplate,
|
||||||
@ -105,6 +107,10 @@ define([
|
|||||||
"key": "textfield",
|
"key": "textfield",
|
||||||
"template": textfieldTemplate
|
"template": textfieldTemplate
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"key": "numberfield",
|
||||||
|
"template": numberfieldTemplate
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"key": "textarea",
|
"key": "textarea",
|
||||||
"template": textareaTemplate
|
"template": textareaTemplate
|
||||||
|
34
platform/forms/res/templates/controls/numberfield.html
Normal file
34
platform/forms/res/templates/controls/numberfield.html
Normal file
@ -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>
|
Loading…
Reference in New Issue
Block a user