mirror of
https://github.com/nasa/openmct.git
synced 2025-03-10 22:43:55 +00:00
[Frontend] Improve layout of "locator"
Fixes #1118 Locator in Save In, Move, etc. dialog now expands vertically to use as much vertical as possible;
This commit is contained in:
Charles Hacskaylo
parent
5409e3d203
commit
2e8d021a6a
@ -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,9 +106,9 @@
|
||||
.selector-list {
|
||||
// Used in create overlay to display tree view
|
||||
@include nice-input();
|
||||
$h: 150px;
|
||||
position: relative;
|
||||
height: $h;
|
||||
min-height: 150px;
|
||||
height: 100%;
|
||||
>.wrapper {
|
||||
$p: $interiorMargin;
|
||||
overflow: auto;
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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