mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 05:07:52 +00:00
[Frontend] Form and form control enhancements
WTD-1002 Added Angular hooks to allow form elements to have JSON defined CSS classes Form element cleanups
This commit is contained in:
Charles Hacskaylo
parent
68c3ec7194
commit
cc181dbdc9
@ -29,6 +29,7 @@
|
||||
{
|
||||
"name": "Period",
|
||||
"control": "textfield",
|
||||
"cssclass": "l-small l-numeric",
|
||||
"key": "period",
|
||||
"required": true,
|
||||
"property": [ "telemetry", "period" ],
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class='split-layout vertical contents abs'
|
||||
ng-controller="SplitPaneController as splitter">
|
||||
<div class='split-pane-component treeview pane'
|
||||
ng-style="{ width: (splitter.state() - 8) + 'px'}">
|
||||
ng-style="{ width: splitter.state() + 'px'}">
|
||||
<mct-representation key="'create-button'" mct-object="navigatedObject">
|
||||
</mct-representation>
|
||||
<div class='holder tree-holder abs'>
|
||||
@ -19,7 +19,7 @@
|
||||
mct-drag-down="splitter.startMove()"
|
||||
mct-drag="splitter.move(delta[0])"></div>
|
||||
<div class='split-pane-component items pane'
|
||||
ng-style="{ left: splitter.state() + 'px', right: '0px' }">
|
||||
ng-style="{ left: (splitter.state()+4) + 'px', right: '0px' }">
|
||||
<div class='holder abs' id='content-area'>
|
||||
<mct-representation mct-object="navigatedObject" key="'browse-object'">
|
||||
</mct-representation>
|
||||
|
||||
@ -26,9 +26,6 @@
|
||||
margin-top: 5px;
|
||||
padding: 5px;
|
||||
position: relative; }
|
||||
/* line 24, ../sass/forms/_elems.scss */
|
||||
.form .form-row:first-child {
|
||||
border-top: none; }
|
||||
/* line 29, ../sass/forms/_elems.scss */
|
||||
.form .form-row .label,
|
||||
.form .form-row .controls {
|
||||
@ -41,45 +38,62 @@
|
||||
font-size: 0.75rem;
|
||||
line-height: 22px;
|
||||
min-height: 22px; }
|
||||
/* line 38, ../sass/forms/_elems.scss */
|
||||
/* line 39, ../sass/forms/_elems.scss */
|
||||
.form .form-row > .label {
|
||||
float: left;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 20%; }
|
||||
/* line 46, ../sass/forms/_elems.scss */
|
||||
/* line 47, ../sass/forms/_elems.scss */
|
||||
.form .form-row .value {
|
||||
color: #cccccc; }
|
||||
/* line 50, ../sass/forms/_elems.scss */
|
||||
/* line 51, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls {
|
||||
float: left;
|
||||
position: relative;
|
||||
width: 79%; }
|
||||
/* line 55, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-composite-control {
|
||||
display: inline-block; }
|
||||
/* line 57, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-composite-control.l-checkbox {
|
||||
line-height: 14px;
|
||||
margin-right: 5px; }
|
||||
/* line 65, ../sass/forms/_elems.scss */
|
||||
width: 79.9%; }
|
||||
/* line 58, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-composite-control.l-checkbox {
|
||||
display: inline-block;
|
||||
line-height: 14px;
|
||||
margin-right: 5px; }
|
||||
/* line 67, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls input[type="text"] {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
margin-top: -4px;
|
||||
vertical-align: baseline; }
|
||||
/* line 74, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-med input[type="text"] {
|
||||
width: 200px; }
|
||||
/* line 78, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-small input[type="text"] {
|
||||
width: 50px; }
|
||||
/* line 82, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-numeric input[type="text"] {
|
||||
text-align: right; }
|
||||
/* line 86, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .select {
|
||||
margin-right: 5px; }
|
||||
/* line 70, ../sass/forms/_elems.scss */
|
||||
/* line 91, ../sass/forms/_elems.scss */
|
||||
.form .form-row .field-hints {
|
||||
color: #666666; }
|
||||
/* line 74, ../sass/forms/_elems.scss */
|
||||
/* line 95, ../sass/forms/_elems.scss */
|
||||
.form .form-row .selector-list {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
height: 150px;
|
||||
max-width: 50%; }
|
||||
/* line 82, ../sass/forms/_elems.scss */
|
||||
overflow: auto; }
|
||||
/* line 106, ../sass/forms/_elems.scss */
|
||||
.form .form-row .selector-list .wrapper {
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
@ -88,24 +102,24 @@
|
||||
bottom: 5px;
|
||||
left: 5px; }
|
||||
|
||||
/* line 96, ../sass/forms/_elems.scss */
|
||||
/* line 120, ../sass/forms/_elems.scss */
|
||||
label.form-control.checkbox input {
|
||||
margin-right: 5px;
|
||||
vertical-align: top; }
|
||||
|
||||
/* line 103, ../sass/forms/_elems.scss */
|
||||
/* line 127, ../sass/forms/_elems.scss */
|
||||
.hint,
|
||||
.s-hint {
|
||||
font-size: 0.9em; }
|
||||
|
||||
/* line 107, ../sass/forms/_elems.scss */
|
||||
/* line 131, ../sass/forms/_elems.scss */
|
||||
.l-result {
|
||||
display: inline-block;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
position: relative;
|
||||
vertical-align: top; }
|
||||
/* line 114, ../sass/forms/_elems.scss */
|
||||
/* line 138, ../sass/forms/_elems.scss */
|
||||
.l-result div.s-hint {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
@ -133,16 +147,16 @@ label.form-control.checkbox input {
|
||||
-webkit-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
-moz-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
background: #666666;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-bottom: 1px solid #999999;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #cccccc;
|
||||
outline: none;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%; }
|
||||
/* line 11, ../sass/forms/_mixins.scss */
|
||||
/* line 12, ../sass/forms/_mixins.scss */
|
||||
.edit-main textarea.error {
|
||||
background: rgba(255, 0, 0, 0.5); }
|
||||
|
||||
@ -162,19 +176,16 @@ input[type="text"] {
|
||||
-webkit-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
-moz-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
background: #666666;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-bottom: 1px solid #999999;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #cccccc;
|
||||
outline: none;
|
||||
padding: 0 3px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
vertical-align: middle; }
|
||||
/* line 11, ../sass/forms/_mixins.scss */
|
||||
padding: 0 3px; }
|
||||
/* line 12, ../sass/forms/_mixins.scss */
|
||||
input[type="text"].error {
|
||||
background: rgba(255, 0, 0, 0.5); }
|
||||
/* line 11, ../sass/forms/_text-input.scss */
|
||||
/* line 8, ../sass/forms/_text-input.scss */
|
||||
input[type="text"].numeric {
|
||||
text-align: right; }
|
||||
|
||||
@ -260,9 +271,9 @@ input[type="text"] {
|
||||
-webkit-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
-moz-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
background: #666666;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-bottom: 1px solid #999999;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #cccccc;
|
||||
outline: none;
|
||||
padding: 0 3px;
|
||||
@ -272,7 +283,7 @@ input[type="text"] {
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
padding: 5px; }
|
||||
/* line 11, ../sass/forms/_mixins.scss */
|
||||
/* line 12, ../sass/forms/_mixins.scss */
|
||||
.channel-selector .treeview.error {
|
||||
background: rgba(255, 0, 0, 0.5); }
|
||||
/* line 15, ../sass/forms/_channel-selector.scss */
|
||||
|
||||
@ -1798,9 +1798,6 @@ label.checkbox.custom {
|
||||
margin-top: 5px;
|
||||
padding: 5px;
|
||||
position: relative; }
|
||||
/* line 24, ../sass/forms/_elems.scss */
|
||||
.form .form-row:first-child {
|
||||
border-top: none; }
|
||||
/* line 29, ../sass/forms/_elems.scss */
|
||||
.form .form-row .label,
|
||||
.form .form-row .controls {
|
||||
@ -1813,45 +1810,62 @@ label.checkbox.custom {
|
||||
font-size: 0.75rem;
|
||||
line-height: 22px;
|
||||
min-height: 22px; }
|
||||
/* line 38, ../sass/forms/_elems.scss */
|
||||
/* line 39, ../sass/forms/_elems.scss */
|
||||
.form .form-row > .label {
|
||||
float: left;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 20%; }
|
||||
/* line 46, ../sass/forms/_elems.scss */
|
||||
/* line 47, ../sass/forms/_elems.scss */
|
||||
.form .form-row .value {
|
||||
color: #cccccc; }
|
||||
/* line 50, ../sass/forms/_elems.scss */
|
||||
/* line 51, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls {
|
||||
float: left;
|
||||
position: relative;
|
||||
width: 79%; }
|
||||
/* line 55, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-composite-control {
|
||||
display: inline-block; }
|
||||
/* line 57, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-composite-control.l-checkbox {
|
||||
line-height: 14px;
|
||||
margin-right: 5px; }
|
||||
/* line 65, ../sass/forms/_elems.scss */
|
||||
width: 79.9%; }
|
||||
/* line 58, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-composite-control.l-checkbox {
|
||||
display: inline-block;
|
||||
line-height: 14px;
|
||||
margin-right: 5px; }
|
||||
/* line 67, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls input[type="text"] {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
margin-top: -4px;
|
||||
vertical-align: baseline; }
|
||||
/* line 74, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-med input[type="text"] {
|
||||
width: 200px; }
|
||||
/* line 78, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-small input[type="text"] {
|
||||
width: 50px; }
|
||||
/* line 82, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-numeric input[type="text"] {
|
||||
text-align: right; }
|
||||
/* line 86, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .select {
|
||||
margin-right: 5px; }
|
||||
/* line 70, ../sass/forms/_elems.scss */
|
||||
/* line 91, ../sass/forms/_elems.scss */
|
||||
.form .form-row .field-hints {
|
||||
color: #666666; }
|
||||
/* line 74, ../sass/forms/_elems.scss */
|
||||
/* line 95, ../sass/forms/_elems.scss */
|
||||
.form .form-row .selector-list {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
height: 150px;
|
||||
max-width: 50%; }
|
||||
/* line 82, ../sass/forms/_elems.scss */
|
||||
overflow: auto; }
|
||||
/* line 106, ../sass/forms/_elems.scss */
|
||||
.form .form-row .selector-list .wrapper {
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
@ -1860,24 +1874,24 @@ label.checkbox.custom {
|
||||
bottom: 5px;
|
||||
left: 5px; }
|
||||
|
||||
/* line 96, ../sass/forms/_elems.scss */
|
||||
/* line 120, ../sass/forms/_elems.scss */
|
||||
label.form-control.checkbox input {
|
||||
margin-right: 5px;
|
||||
vertical-align: top; }
|
||||
|
||||
/* line 103, ../sass/forms/_elems.scss */
|
||||
/* line 127, ../sass/forms/_elems.scss */
|
||||
.hint,
|
||||
.s-hint {
|
||||
font-size: 0.9em; }
|
||||
|
||||
/* line 107, ../sass/forms/_elems.scss */
|
||||
/* line 131, ../sass/forms/_elems.scss */
|
||||
.l-result {
|
||||
display: inline-block;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
position: relative;
|
||||
vertical-align: top; }
|
||||
/* line 114, ../sass/forms/_elems.scss */
|
||||
/* line 138, ../sass/forms/_elems.scss */
|
||||
.l-result div.s-hint {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
@ -1939,19 +1953,16 @@ input[type="text"] {
|
||||
-webkit-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
-moz-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
background: #666666;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-bottom: 1px solid #999999;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #cccccc;
|
||||
outline: none;
|
||||
padding: 0 3px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
vertical-align: middle; }
|
||||
/* line 11, ../sass/forms/_mixins.scss */
|
||||
padding: 0 3px; }
|
||||
/* line 12, ../sass/forms/_mixins.scss */
|
||||
input[type="text"].error {
|
||||
background: rgba(255, 0, 0, 0.5); }
|
||||
/* line 11, ../sass/forms/_text-input.scss */
|
||||
/* line 8, ../sass/forms/_text-input.scss */
|
||||
input[type="text"].numeric {
|
||||
text-align: right; }
|
||||
|
||||
@ -2037,9 +2048,9 @@ input[type="text"] {
|
||||
-webkit-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
-moz-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
background: #666666;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-bottom: 1px solid #999999;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #cccccc;
|
||||
outline: none;
|
||||
padding: 0 3px;
|
||||
@ -2049,7 +2060,7 @@ input[type="text"] {
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
padding: 5px; }
|
||||
/* line 11, ../sass/forms/_mixins.scss */
|
||||
/* line 12, ../sass/forms/_mixins.scss */
|
||||
.channel-selector .treeview.error {
|
||||
background: rgba(255, 0, 0, 0.5); }
|
||||
/* line 15, ../sass/forms/_channel-selector.scss */
|
||||
@ -2103,15 +2114,15 @@ input[type="text"] {
|
||||
-webkit-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
-moz-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
|
||||
background: #666666;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-bottom: 1px solid #999999;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #cccccc;
|
||||
outline: none;
|
||||
padding: 0 3px;
|
||||
background: #3b3b3b;
|
||||
border-bottom: 1px solid #4d4d4d; }
|
||||
/* line 11, ../sass/forms/_mixins.scss */
|
||||
/* line 12, ../sass/forms/_mixins.scss */
|
||||
.filter input.filter.error,
|
||||
.filter input.t-filter-input.error,
|
||||
.t-filter input.filter.error,
|
||||
@ -2467,17 +2478,20 @@ input[type="text"] {
|
||||
left: 25px; }
|
||||
/* line 29, ../sass/overlay/_overlay.scss */
|
||||
.overlay .title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 1.3em; }
|
||||
/* line 33, ../sass/overlay/_overlay.scss */
|
||||
/* line 34, ../sass/overlay/_overlay.scss */
|
||||
.overlay .top-bar {
|
||||
height: 60px; }
|
||||
/* line 37, ../sass/overlay/_overlay.scss */
|
||||
/* line 38, ../sass/overlay/_overlay.scss */
|
||||
.overlay .editor {
|
||||
top: 70px;
|
||||
bottom: 50px;
|
||||
left: 0;
|
||||
right: 0; }
|
||||
/* line 43, ../sass/overlay/_overlay.scss */
|
||||
/* line 44, ../sass/overlay/_overlay.scss */
|
||||
.overlay .bottom-bar {
|
||||
top: auto;
|
||||
right: 0;
|
||||
@ -2486,10 +2500,10 @@ input[type="text"] {
|
||||
font-size: 1em;
|
||||
height: 40px;
|
||||
text-align: right; }
|
||||
/* line 48, ../sass/overlay/_overlay.scss */
|
||||
/* line 49, ../sass/overlay/_overlay.scss */
|
||||
.overlay .bottom-bar .btn {
|
||||
margin-left: 10px; }
|
||||
/* line 52, ../sass/overlay/_overlay.scss */
|
||||
/* line 53, ../sass/overlay/_overlay.scss */
|
||||
.overlay .contents.l-dialog {
|
||||
overflow: auto; }
|
||||
|
||||
|
||||
@ -22,11 +22,12 @@
|
||||
padding: $interiorMargin;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
// border-top: none;
|
||||
}
|
||||
|
||||
.label,
|
||||
.controls {
|
||||
// @include test(orange);
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
box-sizing: border-box;
|
||||
@ -50,18 +51,38 @@
|
||||
.controls {
|
||||
float: left;
|
||||
position: relative;
|
||||
width: 99% - $formLabelW; // Start with less than 100% for Firefox
|
||||
width: 99.9% - $formLabelW; // Start with less than 100% for Firefox
|
||||
|
||||
.l-composite-control {
|
||||
display: inline-block;
|
||||
// display: inline-block;
|
||||
&.l-checkbox {
|
||||
// @include test();
|
||||
// height: $formRowCtrlsH;
|
||||
display: inline-block;
|
||||
line-height: $formRowCtrlsH;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
height: $formInputH;
|
||||
line-height: $formInputH;
|
||||
margin-top: -4px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.l-med input[type="text"] {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.l-small input[type="text"] {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.l-numeric input[type="text"] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.select {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
@ -75,10 +96,13 @@
|
||||
// Used in create overlay to display tree view
|
||||
$h: 150px;
|
||||
@include border-radius($basicCr);
|
||||
@include box-sizing(border-box);
|
||||
background: rgba(black, 0.2);
|
||||
padding: $interiorMargin;
|
||||
position: relative;
|
||||
height: $h;
|
||||
max-width: 50%;
|
||||
overflow: auto;
|
||||
// max-width: 50%;
|
||||
.wrapper {
|
||||
$p: $interiorMargin;
|
||||
overflow-y: auto;
|
||||
|
||||
@ -3,9 +3,10 @@
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(inset rgba(black, 0.5) 0 1px 5px);
|
||||
background: lighten($bg, 20%);
|
||||
// background: lighten($bg, 20%);
|
||||
background: rgba(#fff, 0.1);
|
||||
border: none;
|
||||
border-bottom: 1px solid lighten($bg, 40%);
|
||||
border-bottom: 1px solid rgba(#fff, 0.1);
|
||||
color: lighten($fg, 20%);
|
||||
outline: none;
|
||||
&.error {
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
input[type="text"] {
|
||||
@include nice-input();
|
||||
height: $formInputH;
|
||||
line-height: $formInputH;
|
||||
vertical-align: middle;
|
||||
&.filter {
|
||||
&.ng-dirty {
|
||||
// background: red;
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@include ellipsize();
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
|
||||
@ -104,7 +104,8 @@
|
||||
"key": "name",
|
||||
"property": "name",
|
||||
"pattern": "\\S+",
|
||||
"required": true
|
||||
"required": true,
|
||||
"cssclass": "l-med"
|
||||
},
|
||||
{
|
||||
"control": "checkbox",
|
||||
|
||||
@ -204,17 +204,19 @@
|
||||
"model": { "composition": [] },
|
||||
"properties": [
|
||||
{
|
||||
"label": "Layout Grid",
|
||||
"name": "Layout Grid",
|
||||
"control": "composite",
|
||||
"pattern": "^(\\d*[1-9]\\d*)?$",
|
||||
"items": [
|
||||
{
|
||||
"name": "Horizontal grid (px)",
|
||||
"control": "textfield"
|
||||
"control": "textfield",
|
||||
"cssclass": "l-small l-numeric"
|
||||
},
|
||||
{
|
||||
"name": "Vertical grid (px)",
|
||||
"control": "textfield"
|
||||
"control": "textfield",
|
||||
"cssclass": "l-small l-numeric"
|
||||
}
|
||||
],
|
||||
"key": "layoutGrid",
|
||||
@ -237,11 +239,13 @@
|
||||
"items": [
|
||||
{
|
||||
"name": "Horizontal grid (px)",
|
||||
"control": "textfield"
|
||||
"control": "textfield",
|
||||
"cssclass": "l-small l-numeric"
|
||||
},
|
||||
{
|
||||
"name": "Vertical grid (px)",
|
||||
"control": "textfield"
|
||||
"control": "textfield",
|
||||
"cssclass": "l-small l-numeric"
|
||||
}
|
||||
],
|
||||
"pattern": "^(\\d*[1-9]\\d*)?$",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<span ng-controller="CompositeController as compositeCtrl">
|
||||
<ng-form name="mctFormItem" ng-repeat="item in structure.items">
|
||||
<div class="l-composite-control l-{{item.control}}">
|
||||
<div class="l-composite-control l-{{item.control}} {{item.cssclass}}">
|
||||
<mct-control key="item.control"
|
||||
ng-model="ngModel[field]"
|
||||
ng-required="ngRequired || compositeCtrl.isNonEmpty(ngModel[field])"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<span class='form-control shell'>
|
||||
<span class='field control'>
|
||||
<span class='field control {{structure.cssclass}}'>
|
||||
<input type="text"
|
||||
ng-required="ngRequired"
|
||||
ng-model="ngModel[field]"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user