ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-21 22:17:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Forms] Add composite control type

Browse Source 
Add a type for composite controls, to allow populating
arrays (e.g. preferred size). WTD-593.
This commit is contained in:
Victor Woeltjen 2014-12-03 15:08:41 -08:00
parent 3d95c8b744
commit 363a6f6b47
4 changed files with 58 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
platform/features/layout/bundle.json
View File

@ -13,43 +13,47 @@
"model": { "composition": [] }, "model": { "composition": [] },
"properties": [ "properties": [
{ {
"label": "Preferred Size", "name": "Preferred Size",
"control": "_textfields", "control": "composite",
"values": [ "items": [
{ {
"label": "Width (px)", "name": "Width (px)",
"control": "textfield",
"pattern": "^(\\d*[1-9]\\d*)?$" "pattern": "^(\\d*[1-9]\\d*)?$"
}, },
{ {
"label": "Height (px)", "name": "Height (px)",
"control": "textfield",
"pattern": "^(\\d*[1-9]\\d*)?$" "pattern": "^(\\d*[1-9]\\d*)?$"
} }
], ],
"key": "preferredSize", "property": "preferredSize",
"conversion": "number[]" "conversion": "number[]"
}, },
{ {
"label": "Layout Grid", "name": "Layout Grid",
"control": "_textfields", "control": "composite",
"values": [ "items": [
{ {
"label": "Horizontal grid (px)", "name": "Horizontal grid (px)",
"control": "textfield",
"pattern": "^(\\d*[1-9]\\d*)?$" "pattern": "^(\\d*[1-9]\\d*)?$"
}, },
{ {
"label": "Vertical grid (px)", "name": "Vertical grid (px)",
"control": "textfield",
"pattern": "^(\\d*[1-9]\\d*)?$" "pattern": "^(\\d*[1-9]\\d*)?$"
} }
], ],
"key": "layoutGrid", "property": "layoutGrid",
"conversion": "number[]" "conversion": "number[]"
}, },
{ {
"label": "Default View", "name": "Default View",
"control": "_select", "control": "select",
"values": [ "options": [
"Plot", { "name": "Plot", "value": "plot" },
"Scrolling" { "name": "Scrolling", "value": "scrolling" }
], ],
"comment": "TODO: Infer values from type", "comment": "TODO: Infer values from type",
"key": "defaultView" "key": "defaultView"

4
platform/forms/bundle.json
View File

@ -29,6 +29,10 @@
{ {
"key": "textfield", "key": "textfield",
"templateUrl": "templates/controls/textfield.html" "templateUrl": "templates/controls/textfield.html"
},
{
"key": "composite",
"templateUrl": "templates/controls/composite.html"
} }
], ],
"controllers": [ "controllers": [

13
platform/forms/res/templates/controls/composite.html Normal file
View File

@ -0,0 +1,13 @@
<ng-form name="mctFormItem" ng-repeat="item in structure.items">
<mct-control key="item.control"
ng-model="ngModel[field]"
ng-required="item.required"
ng-pattern="ngPattern"
options="item.options"
structure="row"
field="$index">
</mct-control>
<span class="composite-control-label">
{{item.name}}
</span>
</ng-form>

53
platform/forms/res/templates/form.html
View File

@ -7,46 +7,33 @@
</div> </div>
<div class="form-section"> <div class="form-section">
<ng-form name="mctFormInner" ng-repeat="row in section.rows"> <ng-form name="mctFormInner" ng-repeat="row in section.rows">
<div class="form-row validates" <div class="form-row validates"
ng-class="{ ng-class="{
req: row.required, req: row.required,
valid: mctFormInner.$dirty && mctFormInner.$valid, valid: mctFormInner.$dirty && mctFormInner.$valid,
invalid: mctFormInner.$dirty && !mctFormInner.$valid invalid: mctFormInner.$dirty && !mctFormInner.$valid
}"> }">
<div class='label' title="{{row.description}}"> <div class='label' title="{{row.description}}">
{{row.name}} {{row.name}}
<span ng-if="row.description" <span ng-if="row.description"
class="ui-symbol"> class="ui-symbol">
i i
</span> </span>
</div>
<div class='controls'>
<div class="wrapper" ng-if="row.control">
<mct-control key="row.control"
ng-model="ngModel"
ng-required="row.required"
ng-pattern="getRegExp(row.pattern)"
options="row.options"
structure="row"
field="row.key">
</mct-control>
</div> </div>
<div ng-repeat="item in row.items" class="validates"> <div class='controls'>
<ng-form name="mctFormItem"> <div class="wrapper" ng-if="row.control">
<mct-control key="item.control" <mct-control key="row.control"
ng-model="ngModel" ng-model="ngModel"
ng-required="item.required" ng-required="row.required"
ng-pattern="getRegExp(item.pattern)" ng-pattern="getRegExp(row.pattern)"
options="item.options" options="row.options"
structure="row" structure="row"
field="item.key"> field="row.key">
</mct-control> </mct-control>
{{item.name}} </div>
</ng-form>
</div> </div>
</div> </div>
</div>
</ng-form> </ng-form>
</div> </div>
</span> </span>