mirror of
https://github.com/nasa/openmct.git
synced 2024-12-24 07:16:39 +00:00
[Frontend] Mods in progress to form layout
open #638 Major progress on form-row markup and CSS when in Inspector 'part' context; General fixes cleanups to custom checkbox/radio CSS;
This commit is contained in:
Charles Hacskaylo
Henry
parent
68f3cd087d
commit
371669fbce
@ -22,7 +22,7 @@
|
||||
<div ng-controller="ObjectInspectorController as controller">
|
||||
<ul class="flex-elem grows l-inspector-part">
|
||||
<li>
|
||||
<em>Properties</em>
|
||||
<em class="t-inspector-part-header">Properties</em>
|
||||
<div class="inspector-properties"
|
||||
ng-repeat="data in metadata"
|
||||
ng-class="{ first:$index === 0 }">
|
||||
@ -31,7 +31,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li ng-if="contextutalParents.length > 0">
|
||||
<em title="The location of this linked object.">Location</em>
|
||||
<em class="t-inspector-part-header" title="The location of this linked object.">Location</em>
|
||||
<span class="inspector-location"
|
||||
ng-repeat="parent in contextutalParents"
|
||||
ng-class="{ last:($index + 1) === contextualParents.length }">
|
||||
@ -44,7 +44,7 @@
|
||||
</span>
|
||||
</li>
|
||||
<li ng-if="primaryParents.length > 0">
|
||||
<em title="The location of the original object that this was linked from.">Original Location</em>
|
||||
<em class="t-inspector-part-header" title="The location of the original object that this was linked from.">Original Location</em>
|
||||
<span class="inspector-location"
|
||||
ng-repeat="parent in primaryParents"
|
||||
ng-class="{ last:($index + 1) === primaryParents.length }">
|
||||
|
||||
@ -60,10 +60,18 @@
|
||||
.l-inspector-part {
|
||||
@include box-sizing(border-box);
|
||||
padding-right: $interiorMargin;
|
||||
.form {
|
||||
margin-left: $treeVCW + $interiorMarginLg;
|
||||
.form-row {
|
||||
@include align-items(center);
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li,
|
||||
em {
|
||||
em.t-inspector-part-header {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
@ -72,7 +80,7 @@
|
||||
margin-bottom: $interiorMarginLg;
|
||||
}
|
||||
|
||||
em {
|
||||
em.t-inspector-part-header {
|
||||
@include border-radius($basicCr);
|
||||
background-color: $colorInspectorSectionHeaderBg;
|
||||
color: $colorInspectorSectionHeaderFg;
|
||||
|
||||
@ -115,16 +115,16 @@ label.radio.custom {
|
||||
$d: $formRowCtrlsH;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: $d;
|
||||
//line-height: $d;
|
||||
margin-right: $interiorMargin * 4;
|
||||
padding-left: $d + $interiorMargin;
|
||||
position: relative;
|
||||
vertical-align: middle; // was top
|
||||
//vertical-align: middle; // was top
|
||||
em {
|
||||
color: $colorBodyFg;
|
||||
display: inline-block;
|
||||
height: $d;
|
||||
min-width: $d;
|
||||
width: $d;
|
||||
&:before {
|
||||
@include border-radius($basicCr * .75);
|
||||
background: $bg;
|
||||
@ -134,7 +134,6 @@ label.radio.custom {
|
||||
font-family: 'symbolsfont';
|
||||
font-size: 0.8em;
|
||||
display: inline-block;
|
||||
margin-right: $interiorMargin;
|
||||
height: $d;
|
||||
width: $d;
|
||||
left: 0;
|
||||
@ -336,7 +335,7 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
|
||||
/******************************************************** SLIDERS */
|
||||
|
||||
.slider {
|
||||
$knobH: 100%; //14px;
|
||||
$knobH: 100%;
|
||||
.slot {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
@ -372,7 +371,7 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
|
||||
background-color: $sliderColorRange;
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0; //$tbOffset;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
|
||||
@ -23,7 +23,6 @@
|
||||
@include border-radius($basicCr);
|
||||
background: $colorFormSectionHeader;
|
||||
$c: lighten($colorBodyFg, 20%);
|
||||
//border-bottom: 1px solid rgba(#fff, 0.3);
|
||||
color: $c;
|
||||
font-size: 0.8em;
|
||||
padding: $formTBPad $formLRPad;
|
||||
@ -32,6 +31,7 @@
|
||||
|
||||
.form {
|
||||
color: $colorFormText;
|
||||
width: 100%;
|
||||
.form-section {
|
||||
position: relative;
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
@ -60,28 +60,24 @@
|
||||
|
||||
>.label {
|
||||
// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
|
||||
//@include test(orange, 0.05);
|
||||
float: left;
|
||||
min-width: 120px;
|
||||
order: 1;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: $formLabelW;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: $colorInputFg; //lighten($colorBodyFg, 20%);
|
||||
color: $colorInputFg;
|
||||
}
|
||||
|
||||
.controls {
|
||||
float: left;
|
||||
order: 2;
|
||||
position: relative;
|
||||
width: 99.9% - $formLabelW; // Start with less than 100% for Firefox
|
||||
@include flex(1 1 auto);
|
||||
|
||||
.l-composite-control {
|
||||
// display: inline-block;
|
||||
&.l-checkbox {
|
||||
// @include test();
|
||||
// height: $formRowCtrlsH;
|
||||
display: inline-block;
|
||||
line-height: $formRowCtrlsH;
|
||||
margin-right: 5px;
|
||||
@ -115,7 +111,6 @@
|
||||
$h: 150px;
|
||||
position: relative;
|
||||
height: $h;
|
||||
// max-width: 50%;
|
||||
>.wrapper {
|
||||
$p: $interiorMargin;
|
||||
overflow: auto;
|
||||
@ -129,6 +124,37 @@
|
||||
}
|
||||
}
|
||||
|
||||
.l-controls-first {
|
||||
.form .form-row {
|
||||
margin-top: $interiorMarginSm;
|
||||
>.label,
|
||||
>.controls {
|
||||
line-height: inherit;
|
||||
min-height: inherit;;
|
||||
}
|
||||
>.label {
|
||||
@include flex(1 1 auto);
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
order: 2;
|
||||
}
|
||||
>.controls {
|
||||
@include flex(0 0 auto);
|
||||
margin-right: $interiorMargin;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-validate {
|
||||
.form .form-row >.label {
|
||||
padding-right: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label.form-control.checkbox {
|
||||
input {
|
||||
margin-right: $interiorMargin;
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<mct-splitter class="splitter-inspect-panel mobile-hide"></mct-splitter>
|
||||
<div class="split-pane-component pane bottom">
|
||||
<div class="abs holder holder-elements l-flex-col">
|
||||
<em class="flex-elem">Elements</em>
|
||||
<em class="flex-elem t-inspector-part-header">Elements</em>
|
||||
<mct-representation
|
||||
key="'edit-elements'"
|
||||
mct-object="domainObject"
|
||||
|
||||
@ -1491,16 +1491,25 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding-right: 5px; }
|
||||
/* line 63, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .l-inspector-part .form {
|
||||
margin-left: 20px; }
|
||||
/* line 65, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .l-inspector-part .form .form-row {
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
padding: 0; }
|
||||
/* line 73, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect ul li,
|
||||
.l-inspect em {
|
||||
.l-inspect em.t-inspector-part-header {
|
||||
display: block;
|
||||
position: relative; }
|
||||
/* line 71, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 79, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect ul li {
|
||||
margin-bottom: 10px; }
|
||||
/* line 75, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect em {
|
||||
/* line 83, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect em.t-inspector-part-header {
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
@ -1509,21 +1518,21 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
|
||||
margin-bottom: 5px;
|
||||
padding: 5px 5px;
|
||||
text-transform: uppercase; }
|
||||
/* line 84, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 92, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-properties {
|
||||
padding: 3px 0; }
|
||||
/* line 85, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 93, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-properties:not(.first) {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1); }
|
||||
/* line 89, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 97, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-properties .label {
|
||||
color: #737373;
|
||||
text-transform: uppercase; }
|
||||
/* line 93, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 101, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-properties .value {
|
||||
color: #bfbfbf;
|
||||
word-break: break-all; }
|
||||
/* line 100, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 108, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-location .location-item {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@ -1533,18 +1542,18 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
|
||||
line-height: 1.2em;
|
||||
position: relative;
|
||||
padding: 2px 4px; }
|
||||
/* line 109, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 117, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-location .location-item .t-object-label .t-item-icon {
|
||||
height: 1.2em;
|
||||
width: 0.7rem; }
|
||||
/* line 114, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 122, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-location .location-item:hover {
|
||||
background: rgba(153, 153, 153, 0.1);
|
||||
color: #cccccc; }
|
||||
/* line 117, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 125, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
|
||||
color: #33ccff; }
|
||||
/* line 122, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 130, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after {
|
||||
color: #737373;
|
||||
content: '\3e';
|
||||
@ -1555,15 +1564,15 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
|
||||
line-height: inherit;
|
||||
margin-left: 3px;
|
||||
width: 4px; }
|
||||
/* line 135, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 143, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .holder-elements .current-elements {
|
||||
position: relative; }
|
||||
/* line 138, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 146, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .holder-elements .current-elements .tree-item .t-object-label {
|
||||
font-size: 0.75rem;
|
||||
left: 0; }
|
||||
|
||||
/* line 149, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 157, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .splitter-inspect-panel,
|
||||
.l-inspect .split-pane-component.pane.bottom {
|
||||
-moz-transition-property: opacity;
|
||||
@ -1585,10 +1594,10 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
|
||||
opacity: 0;
|
||||
pointer-events: none; }
|
||||
|
||||
/* line 158, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 166, ../../../../general/res/sass/_inspector.scss */
|
||||
.s-status-editing .l-inspect .location-item {
|
||||
pointer-events: none; }
|
||||
/* line 159, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 167, ../../../../general/res/sass/_inspector.scss */
|
||||
.s-status-editing .l-inspect .splitter-inspect-panel,
|
||||
.s-status-editing .l-inspect .split-pane-component.pane.bottom {
|
||||
opacity: 1;
|
||||
@ -2298,18 +2307,16 @@ label.checkbox.custom,
|
||||
label.radio.custom {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 14px;
|
||||
margin-right: 20px;
|
||||
padding-left: 19px;
|
||||
position: relative;
|
||||
vertical-align: middle; }
|
||||
position: relative; }
|
||||
/* line 123, ../../../../general/res/sass/controls/_controls.scss */
|
||||
label.checkbox.custom em,
|
||||
label.radio.custom em {
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
height: 14px;
|
||||
min-width: 14px; }
|
||||
width: 14px; }
|
||||
/* line 128, ../../../../general/res/sass/controls/_controls.scss */
|
||||
label.checkbox.custom em:before,
|
||||
label.radio.custom em:before {
|
||||
@ -2325,7 +2332,6 @@ label.radio.custom {
|
||||
font-family: 'symbolsfont';
|
||||
font-size: 0.8em;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
left: 0;
|
||||
@ -3948,12 +3954,13 @@ mct-include.l-time-controller {
|
||||
|
||||
/* line 33, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form {
|
||||
color: rgba(255, 255, 255, 0.5); }
|
||||
/* line 35, ../../../../general/res/sass/forms/_elems.scss */
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
width: 100%; }
|
||||
/* line 36, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-section {
|
||||
position: relative;
|
||||
margin-bottom: 20px; }
|
||||
/* line 40, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 41, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@ -3964,10 +3971,10 @@ mct-include.l-time-controller {
|
||||
margin-top: 5px;
|
||||
padding: 5px 0;
|
||||
position: relative; }
|
||||
/* line 48, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 49, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row.first {
|
||||
border-top: none; }
|
||||
/* line 52, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 53, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row > .label,
|
||||
.form .form-row > .controls {
|
||||
-moz-box-sizing: border-box;
|
||||
@ -3978,42 +3985,43 @@ mct-include.l-time-controller {
|
||||
font-size: 0.8rem;
|
||||
line-height: 22px;
|
||||
min-height: 22px; }
|
||||
/* line 61, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 62, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row > .label {
|
||||
float: left;
|
||||
min-width: 120px;
|
||||
order: 1;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 30%; }
|
||||
/* line 71, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 73, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .value {
|
||||
color: #cccccc; }
|
||||
/* line 75, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 77, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .controls {
|
||||
float: left;
|
||||
order: 2;
|
||||
position: relative;
|
||||
width: 69.9%; }
|
||||
/* line 82, ../../../../general/res/sass/forms/_elems.scss */
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto; }
|
||||
/* line 85, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-composite-control.l-checkbox {
|
||||
display: inline-block;
|
||||
line-height: 14px;
|
||||
margin-right: 5px; }
|
||||
/* line 91, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 93, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-med input[type="text"] {
|
||||
width: 200px; }
|
||||
/* line 95, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 97, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-small input[type="text"] {
|
||||
width: 50px; }
|
||||
/* line 99, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 101, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-numeric input[type="text"] {
|
||||
text-align: right; }
|
||||
/* line 103, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 105, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .controls .select {
|
||||
margin-right: 5px; }
|
||||
/* line 108, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 110, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .field-hints {
|
||||
color: #666666; }
|
||||
/* line 112, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 114, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .selector-list {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
@ -4036,7 +4044,7 @@ mct-include.l-time-controller {
|
||||
/* line 327, ../../../../general/res/sass/_mixins.scss */
|
||||
.form .form-row .selector-list.error {
|
||||
background: rgba(255, 0, 0, 0.5); }
|
||||
/* line 119, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 121, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .selector-list > .wrapper {
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
@ -4045,24 +4053,53 @@ mct-include.l-time-controller {
|
||||
bottom: 5px;
|
||||
left: 5px; }
|
||||
|
||||
/* line 133, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 135, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.l-controls-first .form .form-row {
|
||||
margin-top: 3px; }
|
||||
/* line 138, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.l-controls-first .form .form-row > .label,
|
||||
.l-controls-first .form .form-row > .controls {
|
||||
line-height: inherit;
|
||||
min-height: inherit; }
|
||||
/* line 143, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.l-controls-first .form .form-row > .label {
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
order: 2; }
|
||||
/* line 149, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.l-controls-first .form .form-row > .controls {
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 5px;
|
||||
order: 1; }
|
||||
|
||||
/* line 158, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.no-validate .form .form-row > .label {
|
||||
padding-right: 0; }
|
||||
/* line 160, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.no-validate .form .form-row > .label:after {
|
||||
display: none; }
|
||||
|
||||
/* line 167, ../../../../general/res/sass/forms/_elems.scss */
|
||||
label.form-control.checkbox input {
|
||||
margin-right: 5px;
|
||||
vertical-align: top; }
|
||||
|
||||
/* line 139, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 173, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.hint,
|
||||
.s-hint {
|
||||
font-size: 0.9em; }
|
||||
|
||||
/* line 144, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 178, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.l-result {
|
||||
display: inline-block;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
position: relative;
|
||||
vertical-align: top; }
|
||||
/* line 151, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 185, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.l-result div.s-hint {
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
@ -4072,7 +4109,7 @@ label.form-control.checkbox input {
|
||||
color: #ffad99;
|
||||
padding: 5px; }
|
||||
|
||||
/* line 160, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 194, ../../../../general/res/sass/forms/_elems.scss */
|
||||
input[type="text"],
|
||||
input[type="search"] {
|
||||
-moz-appearance: none;
|
||||
@ -4095,12 +4132,12 @@ input[type="search"] {
|
||||
input[type="text"].error,
|
||||
input[type="search"].error {
|
||||
background: rgba(255, 0, 0, 0.5); }
|
||||
/* line 163, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 197, ../../../../general/res/sass/forms/_elems.scss */
|
||||
input[type="text"].numeric,
|
||||
input[type="search"].numeric {
|
||||
text-align: right; }
|
||||
|
||||
/* line 168, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 202, ../../../../general/res/sass/forms/_elems.scss */
|
||||
textarea {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
||||
@ -1472,16 +1472,25 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding-right: 5px; }
|
||||
/* line 63, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .l-inspector-part .form {
|
||||
margin-left: 20px; }
|
||||
/* line 65, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .l-inspector-part .form .form-row {
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
padding: 0; }
|
||||
/* line 73, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect ul li,
|
||||
.l-inspect em {
|
||||
.l-inspect em.t-inspector-part-header {
|
||||
display: block;
|
||||
position: relative; }
|
||||
/* line 71, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 79, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect ul li {
|
||||
margin-bottom: 10px; }
|
||||
/* line 75, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect em {
|
||||
/* line 83, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect em.t-inspector-part-header {
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
@ -1490,21 +1499,21 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
|
||||
margin-bottom: 5px;
|
||||
padding: 5px 5px;
|
||||
text-transform: uppercase; }
|
||||
/* line 84, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 92, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-properties {
|
||||
padding: 3px 0; }
|
||||
/* line 85, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 93, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-properties:not(.first) {
|
||||
border-top: 1px solid #e3e3e3; }
|
||||
/* line 89, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 97, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-properties .label {
|
||||
color: #999999;
|
||||
text-transform: uppercase; }
|
||||
/* line 93, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 101, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-properties .value {
|
||||
color: #404040;
|
||||
word-break: break-all; }
|
||||
/* line 100, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 108, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-location .location-item {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@ -1514,18 +1523,18 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
|
||||
line-height: 1.2em;
|
||||
position: relative;
|
||||
padding: 2px 4px; }
|
||||
/* line 109, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 117, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-location .location-item .t-object-label .t-item-icon {
|
||||
height: 1.2em;
|
||||
width: 0.7rem; }
|
||||
/* line 114, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 122, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-location .location-item:hover {
|
||||
background: rgba(102, 102, 102, 0.1);
|
||||
color: #333333; }
|
||||
/* line 117, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 125, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
|
||||
color: #0099cc; }
|
||||
/* line 122, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 130, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after {
|
||||
color: #8c8c8c;
|
||||
content: '\3e';
|
||||
@ -1536,15 +1545,15 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
|
||||
line-height: inherit;
|
||||
margin-left: 3px;
|
||||
width: 4px; }
|
||||
/* line 135, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 143, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .holder-elements .current-elements {
|
||||
position: relative; }
|
||||
/* line 138, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 146, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .holder-elements .current-elements .tree-item .t-object-label {
|
||||
font-size: 0.75rem;
|
||||
left: 0; }
|
||||
|
||||
/* line 149, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 157, ../../../../general/res/sass/_inspector.scss */
|
||||
.l-inspect .splitter-inspect-panel,
|
||||
.l-inspect .split-pane-component.pane.bottom {
|
||||
-moz-transition-property: opacity;
|
||||
@ -1566,10 +1575,10 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
|
||||
opacity: 0;
|
||||
pointer-events: none; }
|
||||
|
||||
/* line 158, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 166, ../../../../general/res/sass/_inspector.scss */
|
||||
.s-status-editing .l-inspect .location-item {
|
||||
pointer-events: none; }
|
||||
/* line 159, ../../../../general/res/sass/_inspector.scss */
|
||||
/* line 167, ../../../../general/res/sass/_inspector.scss */
|
||||
.s-status-editing .l-inspect .splitter-inspect-panel,
|
||||
.s-status-editing .l-inspect .split-pane-component.pane.bottom {
|
||||
opacity: 1;
|
||||
@ -2223,18 +2232,16 @@ label.checkbox.custom,
|
||||
label.radio.custom {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 14px;
|
||||
margin-right: 20px;
|
||||
padding-left: 19px;
|
||||
position: relative;
|
||||
vertical-align: middle; }
|
||||
position: relative; }
|
||||
/* line 123, ../../../../general/res/sass/controls/_controls.scss */
|
||||
label.checkbox.custom em,
|
||||
label.radio.custom em {
|
||||
color: #666;
|
||||
display: inline-block;
|
||||
height: 14px;
|
||||
min-width: 14px; }
|
||||
width: 14px; }
|
||||
/* line 128, ../../../../general/res/sass/controls/_controls.scss */
|
||||
label.checkbox.custom em:before,
|
||||
label.radio.custom em:before {
|
||||
@ -2250,7 +2257,6 @@ label.radio.custom {
|
||||
font-family: 'symbolsfont';
|
||||
font-size: 0.8em;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
left: 0;
|
||||
@ -3867,12 +3873,13 @@ mct-include.l-time-controller {
|
||||
|
||||
/* line 33, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form {
|
||||
color: gray; }
|
||||
/* line 35, ../../../../general/res/sass/forms/_elems.scss */
|
||||
color: gray;
|
||||
width: 100%; }
|
||||
/* line 36, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-section {
|
||||
position: relative;
|
||||
margin-bottom: 20px; }
|
||||
/* line 40, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 41, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@ -3883,10 +3890,10 @@ mct-include.l-time-controller {
|
||||
margin-top: 5px;
|
||||
padding: 5px 0;
|
||||
position: relative; }
|
||||
/* line 48, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 49, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row.first {
|
||||
border-top: none; }
|
||||
/* line 52, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 53, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row > .label,
|
||||
.form .form-row > .controls {
|
||||
-moz-box-sizing: border-box;
|
||||
@ -3897,42 +3904,43 @@ mct-include.l-time-controller {
|
||||
font-size: 0.8rem;
|
||||
line-height: 22px;
|
||||
min-height: 22px; }
|
||||
/* line 61, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 62, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row > .label {
|
||||
float: left;
|
||||
min-width: 120px;
|
||||
order: 1;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 30%; }
|
||||
/* line 71, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 73, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .value {
|
||||
color: #666; }
|
||||
/* line 75, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 77, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .controls {
|
||||
float: left;
|
||||
order: 2;
|
||||
position: relative;
|
||||
width: 69.9%; }
|
||||
/* line 82, ../../../../general/res/sass/forms/_elems.scss */
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto; }
|
||||
/* line 85, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-composite-control.l-checkbox {
|
||||
display: inline-block;
|
||||
line-height: 14px;
|
||||
margin-right: 5px; }
|
||||
/* line 91, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 93, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-med input[type="text"] {
|
||||
width: 200px; }
|
||||
/* line 95, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 97, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-small input[type="text"] {
|
||||
width: 50px; }
|
||||
/* line 99, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 101, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-numeric input[type="text"] {
|
||||
text-align: right; }
|
||||
/* line 103, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 105, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .controls .select {
|
||||
margin-right: 5px; }
|
||||
/* line 108, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 110, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .field-hints {
|
||||
color: #333333; }
|
||||
/* line 112, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 114, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .selector-list {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
@ -3955,7 +3963,7 @@ mct-include.l-time-controller {
|
||||
/* line 327, ../../../../general/res/sass/_mixins.scss */
|
||||
.form .form-row .selector-list.error {
|
||||
background: rgba(255, 0, 0, 0.5); }
|
||||
/* line 119, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 121, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.form .form-row .selector-list > .wrapper {
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
@ -3964,24 +3972,53 @@ mct-include.l-time-controller {
|
||||
bottom: 5px;
|
||||
left: 5px; }
|
||||
|
||||
/* line 133, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 135, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.l-controls-first .form .form-row {
|
||||
margin-top: 3px; }
|
||||
/* line 138, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.l-controls-first .form .form-row > .label,
|
||||
.l-controls-first .form .form-row > .controls {
|
||||
line-height: inherit;
|
||||
min-height: inherit; }
|
||||
/* line 143, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.l-controls-first .form .form-row > .label {
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
order: 2; }
|
||||
/* line 149, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.l-controls-first .form .form-row > .controls {
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 5px;
|
||||
order: 1; }
|
||||
|
||||
/* line 158, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.no-validate .form .form-row > .label {
|
||||
padding-right: 0; }
|
||||
/* line 160, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.no-validate .form .form-row > .label:after {
|
||||
display: none; }
|
||||
|
||||
/* line 167, ../../../../general/res/sass/forms/_elems.scss */
|
||||
label.form-control.checkbox input {
|
||||
margin-right: 5px;
|
||||
vertical-align: top; }
|
||||
|
||||
/* line 139, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 173, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.hint,
|
||||
.s-hint {
|
||||
font-size: 0.9em; }
|
||||
|
||||
/* line 144, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 178, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.l-result {
|
||||
display: inline-block;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
position: relative;
|
||||
vertical-align: top; }
|
||||
/* line 151, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 185, ../../../../general/res/sass/forms/_elems.scss */
|
||||
.l-result div.s-hint {
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
@ -3991,7 +4028,7 @@ label.form-control.checkbox input {
|
||||
color: #ffa799;
|
||||
padding: 5px; }
|
||||
|
||||
/* line 160, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 194, ../../../../general/res/sass/forms/_elems.scss */
|
||||
input[type="text"],
|
||||
input[type="search"] {
|
||||
-moz-appearance: none;
|
||||
@ -4014,12 +4051,12 @@ input[type="search"] {
|
||||
input[type="text"].error,
|
||||
input[type="search"].error {
|
||||
background: rgba(255, 0, 0, 0.5); }
|
||||
/* line 163, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 197, ../../../../general/res/sass/forms/_elems.scss */
|
||||
input[type="text"].numeric,
|
||||
input[type="search"].numeric {
|
||||
text-align: right; }
|
||||
|
||||
/* line 168, ../../../../general/res/sass/forms/_elems.scss */
|
||||
/* line 202, ../../../../general/res/sass/forms/_elems.scss */
|
||||
textarea {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
||||
@ -1,28 +1,26 @@
|
||||
<!--<style>
|
||||
.l-inspect .inspector-plot-options .plot-options-form .label {
|
||||
text-transform: none;
|
||||
}
|
||||
.l-inspect .inspector-plot-options .plot-options-form .form .controls {
|
||||
width: 50%;
|
||||
}
|
||||
.l-inspect .inspector-plot-options .plot-options-form .form .label {
|
||||
width: 50%;
|
||||
min-width: 50px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.l-inspect .inspector-plot-options .plot-options-form {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.l-inspect .inspector-plot-options .plot-options-form .form-row {
|
||||
border-top: none;
|
||||
}
|
||||
.l-inspect .inspector-plot-options .plot-options-form .form .form-row.first {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
</style>-->
|
||||
<!--
|
||||
Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
as represented by the Administrator of the National Aeronautics and Space
|
||||
Administration. All rights reserved.
|
||||
|
||||
Open MCT Web 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 Web 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.
|
||||
-->
|
||||
<div ng-controller="PlotOptionsController" class="flex-elem grows l-inspector-part">
|
||||
<em title="Display properties for this object">Display</em>
|
||||
<em class="t-inspector-part-header" title="Display properties for this object">Display</em>
|
||||
<ul class="first flex-elem grows vscroll">
|
||||
<ul class="tree">
|
||||
<li ng-repeat="child in children">
|
||||
@ -41,15 +39,13 @@
|
||||
</mct-representation>
|
||||
</span>
|
||||
</span>
|
||||
<div class="plot-options-form no-validate l-controls-first">
|
||||
<mct-form
|
||||
ng-class="{hidden: !toggle.isActive()}"
|
||||
ng-model="plotOptionsModel"
|
||||
structure="plotOptionsStructure"
|
||||
name="plotOptionsState"
|
||||
class="flex-elem l-flex-row">
|
||||
class="flex-elem l-flex-row l-controls-first no-validate">
|
||||
</mct-form>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -19,16 +19,14 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<form name="mctForm" novalidate>
|
||||
|
||||
<div class="form">
|
||||
<form name="mctForm" novalidate class="form">
|
||||
<span ng-repeat="section in structure.sections">
|
||||
<div class="section-header" ng-if="section.name">
|
||||
{{section.name}}
|
||||
</div>
|
||||
<div class="form-section">
|
||||
<ng-form name="mctFormInner" ng-repeat="row in section.rows">
|
||||
<div class="form-row validates"
|
||||
<div class="form-row validates l-flex-row"
|
||||
ng-class="{
|
||||
req: row.required,
|
||||
valid: mctFormInner.$dirty && mctFormInner.$valid,
|
||||
@ -36,14 +34,14 @@
|
||||
first: $index < 1
|
||||
}">
|
||||
|
||||
<div class='label' title="{{row.description}}">
|
||||
<div class='label flex-elem' title="{{row.description}}">
|
||||
{{row.name}}
|
||||
<span ng-if="row.description"
|
||||
class="ui-symbol">
|
||||
i
|
||||
</span>
|
||||
</div>
|
||||
<div class='controls'>
|
||||
<div class='controls flex-elem'>
|
||||
<div class="wrapper" ng-if="row.control">
|
||||
<mct-control key="row.control"
|
||||
ng-model="ngModel"
|
||||
@ -59,6 +57,4 @@
|
||||
</ng-form>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
Loading…
Reference in New Issue
Block a user