mirror of
https://github.com/nasa/openmct.git
synced 2025-02-21 01:42:31 +00:00
Merge pull request #1155 from nasa/forms1118
Review and integrate improved dialog layout
This commit is contained in:
Victor Woeltjen
GitHub
commit
3a7e98ab84
@ -129,7 +129,7 @@ define([
|
||||
{
|
||||
"name": "Period",
|
||||
"control": "textfield",
|
||||
"cssclass": "l-small l-numeric",
|
||||
"cssclass": "l-input-sm l-numeric",
|
||||
"key": "period",
|
||||
"required": true,
|
||||
"property": [
|
||||
|
||||
@ -90,7 +90,9 @@ define(
|
||||
// Ensure there is always a "save in" section
|
||||
if (includeLocation) {
|
||||
sections.push({
|
||||
name: 'Location', rows: [{
|
||||
name: 'Location',
|
||||
cssclass: "grows",
|
||||
rows: [{
|
||||
name: "Save In",
|
||||
control: "locator",
|
||||
validate: validateLocation,
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
.form {
|
||||
margin-bottom: $interiorMarginSm;
|
||||
padding-bottom: $interiorMarginLg;
|
||||
.form-section {
|
||||
.l-section-body {
|
||||
margin-bottom: 0;
|
||||
&:not(.first) {
|
||||
border-top: 1px solid $colorFormLines;
|
||||
|
||||
@ -25,11 +25,21 @@
|
||||
|
||||
.form {
|
||||
color: $colorFormText;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.form-section {
|
||||
position: relative;
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
}
|
||||
|
||||
.l-form-section {
|
||||
position: relative;
|
||||
&.grows {
|
||||
.l-section-body,
|
||||
.form-row {
|
||||
@include flex(1 1 auto);
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
border-radius: $basicCr;
|
||||
@ -43,10 +53,14 @@
|
||||
.form-row {
|
||||
$m: $interiorMargin;
|
||||
box-sizing: border-box;
|
||||
@include clearfix;
|
||||
border-top: 1px solid $colorFormLines;
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
padding: $formTBPad 0;
|
||||
position: relative;
|
||||
//&ng-form {
|
||||
// display: block;
|
||||
//}
|
||||
|
||||
&.first {
|
||||
border-top: none;
|
||||
}
|
||||
@ -92,17 +106,14 @@
|
||||
.selector-list {
|
||||
// Used in create overlay to display tree view
|
||||
@include nice-input();
|
||||
$h: 150px;
|
||||
padding: $interiorMargin;
|
||||
position: relative;
|
||||
height: $h;
|
||||
min-height: 150px;
|
||||
height: 100%;
|
||||
>.wrapper {
|
||||
$p: $interiorMargin;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: $p;
|
||||
right: $p;
|
||||
bottom: $p;
|
||||
left: $p;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,7 +25,6 @@
|
||||
|
||||
@include phone {
|
||||
.overlay > .holder {
|
||||
//@include test(orange); // This works!
|
||||
$m: 0;
|
||||
border-radius: $m;
|
||||
top: $m;
|
||||
@ -38,36 +37,30 @@
|
||||
overflow: auto;
|
||||
@include transform(none);
|
||||
|
||||
.editor .form .form-row {
|
||||
> .label,
|
||||
> .controls {
|
||||
//@include test(blue);
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
> .label {
|
||||
&:after {
|
||||
float: none;
|
||||
.editor .form .form-row.l-flex-row {
|
||||
// Display elements in a columnar view
|
||||
@include flex-direction(column);
|
||||
> .flex-elem {
|
||||
&:not(:first-child) {
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
&.label {
|
||||
width: 100%;
|
||||
}
|
||||
&.controls {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
.abs.top-bar,
|
||||
.abs.editor,
|
||||
.abs.message-body,
|
||||
.abs.bottom-bar {
|
||||
//@include test(orange);
|
||||
top: auto; right: auto; bottom: auto; left: auto;
|
||||
height: auto; width: auto;
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
|
||||
&.validates > .label:before {
|
||||
position: relative;
|
||||
right: auto;
|
||||
line-height: inherit;
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
.t-dialog-sm .overlay > .holder {
|
||||
//@include test(blue);
|
||||
height: auto; max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -95,7 +95,7 @@ define(
|
||||
this.locationService = locationService;
|
||||
this.composeService = composeService;
|
||||
this.verb = verb || "Compose";
|
||||
this.suffix = suffix || "to a new location";
|
||||
this.suffix = suffix || "To a New Location";
|
||||
}
|
||||
|
||||
AbstractComposeAction.prototype.cloneContext = function () {
|
||||
|
||||
@ -54,7 +54,7 @@ define(
|
||||
copyService,
|
||||
context,
|
||||
"Duplicate",
|
||||
"to a location"
|
||||
"To a Location"
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -58,6 +58,7 @@ define(
|
||||
sections: [
|
||||
{
|
||||
name: 'Location',
|
||||
cssclass: "grows",
|
||||
rows: [
|
||||
{
|
||||
name: label,
|
||||
|
||||
@ -150,7 +150,7 @@ define(
|
||||
it("prompts for location", function () {
|
||||
expect(locationService.getLocationFromUser)
|
||||
.toHaveBeenCalledWith(
|
||||
"Compose selectedObject to a new location",
|
||||
"Compose selectedObject To a New Location",
|
||||
"Compose To",
|
||||
jasmine.any(Function),
|
||||
currentParent
|
||||
|
||||
@ -173,7 +173,7 @@ define(
|
||||
it("prompts for location", function () {
|
||||
expect(locationService.getLocationFromUser)
|
||||
.toHaveBeenCalledWith(
|
||||
"Duplicate selectedObject to a location",
|
||||
"Duplicate selectedObject To a Location",
|
||||
"Duplicate To",
|
||||
jasmine.any(Function),
|
||||
currentParent
|
||||
|
||||
@ -126,7 +126,7 @@ define(
|
||||
it("prompts for location", function () {
|
||||
expect(locationService.getLocationFromUser)
|
||||
.toHaveBeenCalledWith(
|
||||
"Link selectedObject to a new location",
|
||||
"Link selectedObject To a New Location",
|
||||
"Link To",
|
||||
jasmine.any(Function),
|
||||
currentParent
|
||||
|
||||
@ -126,7 +126,7 @@ define(
|
||||
it("prompts for location", function () {
|
||||
expect(locationService.getLocationFromUser)
|
||||
.toHaveBeenCalledWith(
|
||||
"Move selectedObject to a new location",
|
||||
"Move selectedObject To a New Location",
|
||||
"Move To",
|
||||
jasmine.any(Function),
|
||||
currentParent
|
||||
|
||||
@ -139,6 +139,7 @@ define([
|
||||
"dialog": {
|
||||
"control": "textfield",
|
||||
"name": "Image URL",
|
||||
"cssclass": "l-input-lg",
|
||||
"required": true
|
||||
}
|
||||
},
|
||||
@ -213,12 +214,12 @@ define([
|
||||
{
|
||||
"name": "Horizontal grid (px)",
|
||||
"control": "textfield",
|
||||
"cssclass": "l-small l-numeric"
|
||||
"cssclass": "l-input-sm l-numeric"
|
||||
},
|
||||
{
|
||||
"name": "Vertical grid (px)",
|
||||
"control": "textfield",
|
||||
"cssclass": "l-small l-numeric"
|
||||
"cssclass": "l-input-sm l-numeric"
|
||||
}
|
||||
],
|
||||
"pattern": "^(\\d*[1-9]\\d*)?$",
|
||||
|
||||
@ -169,6 +169,7 @@ define([
|
||||
"dialog": {
|
||||
"control": "textfield",
|
||||
"name": "Image URL",
|
||||
"cssclass": "l-input-lg",
|
||||
"required": true
|
||||
}
|
||||
},
|
||||
@ -329,12 +330,12 @@ define([
|
||||
{
|
||||
"name": "Horizontal grid (px)",
|
||||
"control": "textfield",
|
||||
"cssclass": "l-small l-numeric"
|
||||
"cssclass": "l-input-sm l-numeric"
|
||||
},
|
||||
{
|
||||
"name": "Vertical grid (px)",
|
||||
"control": "textfield",
|
||||
"cssclass": "l-small l-numeric"
|
||||
"cssclass": "l-input-sm l-numeric"
|
||||
}
|
||||
],
|
||||
"pattern": "^(\\d*[1-9]\\d*)?$",
|
||||
|
||||
@ -55,6 +55,7 @@ define(
|
||||
key: "url",
|
||||
control: "textfield",
|
||||
name: "Image URL",
|
||||
"cssclass": "l-input-lg",
|
||||
required: true
|
||||
}
|
||||
]
|
||||
|
||||
@ -19,39 +19,39 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<form name="mctForm" novalidate class="form">
|
||||
<span ng-repeat="section in structure.sections">
|
||||
<div class="section-header" ng-if="section.name">
|
||||
<form name="mctForm" novalidate class="form l-flex-col">
|
||||
<span ng-repeat="section in structure.sections"
|
||||
class="l-form-section l-flex-col flex-elem {{ section.cssclass }}">
|
||||
<div class="section-header flex-elem" ng-if="section.name">
|
||||
{{section.name}}
|
||||
</div>
|
||||
<div class="form-section" ng-class="{ first:$index < 1 }">
|
||||
<ng-form name="mctFormInner" ng-repeat="row in section.rows">
|
||||
<div class="form-row validates l-flex-row"
|
||||
ng-class="{
|
||||
req: row.required,
|
||||
valid: mctFormInner.$dirty && mctFormInner.$valid,
|
||||
invalid: mctFormInner.$dirty && !mctFormInner.$valid,
|
||||
first: $index < 1,
|
||||
'l-controls-first': row.layout === 'control-first',
|
||||
'l-controls-under': row.layout === 'controls-under'
|
||||
}">
|
||||
<div class='label flex-elem' title="{{row.description}}">
|
||||
{{row.name}}
|
||||
</div>
|
||||
<div class='controls flex-elem'>
|
||||
<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>
|
||||
<ng-form class="form-row validates l-flex-row flex-elem {{ section.cssclass }}"
|
||||
ng-class="{
|
||||
first:$index < 1,
|
||||
req: row.required,
|
||||
valid: mctFormInner.$dirty && mctFormInner.$valid,
|
||||
invalid: mctFormInner.$dirty && !mctFormInner.$valid,
|
||||
first: $index < 1,
|
||||
'l-controls-first': row.layout === 'control-first',
|
||||
'l-controls-under': row.layout === 'controls-under'
|
||||
}"
|
||||
name="mctFormInner"
|
||||
ng-repeat="row in section.rows">
|
||||
<div class='label flex-elem' title="{{row.description}}">
|
||||
{{row.name}}
|
||||
</div>
|
||||
<div class='controls flex-elem'>
|
||||
<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>
|
||||
</ng-form>
|
||||
</div>
|
||||
</div>
|
||||
</ng-form>
|
||||
</span>
|
||||
</form>
|
||||
Loading…
x
Reference in New Issue
Block a user