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

[Frontend] Form and form control enhancements

Browse Source 
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 2015-03-10 22:36:35 -07:00
parent 68c3ec7194
commit cc181dbdc9
12 changed files with 152 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/generator/bundle.json
View File

@ -29,6 +29,7 @@
{ {
"name": "Period", "name": "Period",
"control": "textfield", "control": "textfield",
"cssclass": "l-small l-numeric",
"key": "period", "key": "period",
"required": true, "required": true,
"property": [ "telemetry", "period" ], "property": [ "telemetry", "period" ],

4
platform/commonUI/browse/res/templates/browse.html
View File

@ -4,7 +4,7 @@
<div class='split-layout vertical contents abs' <div class='split-layout vertical contents abs'
ng-controller="SplitPaneController as splitter"> ng-controller="SplitPaneController as splitter">
<div class='split-pane-component treeview pane' <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 key="'create-button'" mct-object="navigatedObject">
</mct-representation> </mct-representation>
<div class='holder tree-holder abs'> <div class='holder tree-holder abs'>
@ -19,7 +19,7 @@
mct-drag-down="splitter.startMove()" mct-drag-down="splitter.startMove()"
mct-drag="splitter.move(delta[0])"></div> mct-drag="splitter.move(delta[0])"></div>
<div class='split-pane-component items pane' <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'> <div class='holder abs' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'"> <mct-representation mct-object="navigatedObject" key="'browse-object'">
</mct-representation> </mct-representation>

79
platform/commonUI/general/res/css/forms.css
View File

@ -26,9 +26,6 @@
margin-top: 5px; margin-top: 5px;
padding: 5px; padding: 5px;
position: relative; } position: relative; }
/* line 24, ../sass/forms/_elems.scss */
.form .form-row:first-child {
border-top: none; }
/* line 29, ../sass/forms/_elems.scss */ /* line 29, ../sass/forms/_elems.scss */
.form .form-row .label, .form .form-row .label,
.form .form-row .controls { .form .form-row .controls {
@ -41,45 +38,62 @@
font-size: 0.75rem; font-size: 0.75rem;
line-height: 22px; line-height: 22px;
min-height: 22px; } min-height: 22px; }
/* line 38, ../sass/forms/_elems.scss */ /* line 39, ../sass/forms/_elems.scss */
.form .form-row > .label { .form .form-row > .label {
float: left; float: left;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
width: 20%; } width: 20%; }
/* line 46, ../sass/forms/_elems.scss */ /* line 47, ../sass/forms/_elems.scss */
.form .form-row .value { .form .form-row .value {
color: #cccccc; } color: #cccccc; }
/* line 50, ../sass/forms/_elems.scss */ /* line 51, ../sass/forms/_elems.scss */
.form .form-row .controls { .form .form-row .controls {
float: left; float: left;
position: relative; position: relative;
width: 79%; } width: 79.9%; }
/* line 55, ../sass/forms/_elems.scss */ /* line 58, ../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 { .form .form-row .controls .l-composite-control.l-checkbox {
display: inline-block;
line-height: 14px; line-height: 14px;
margin-right: 5px; } margin-right: 5px; }
/* line 65, ../sass/forms/_elems.scss */ /* 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 { .form .form-row .controls .select {
margin-right: 5px; } margin-right: 5px; }
/* line 70, ../sass/forms/_elems.scss */ /* line 91, ../sass/forms/_elems.scss */
.form .form-row .field-hints { .form .form-row .field-hints {
color: #666666; } color: #666666; }
/* line 74, ../sass/forms/_elems.scss */ /* line 95, ../sass/forms/_elems.scss */
.form .form-row .selector-list { .form .form-row .selector-list {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -ms-border-radius: 3px;
-o-border-radius: 3px; -o-border-radius: 3px;
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); background: rgba(0, 0, 0, 0.2);
padding: 5px;
position: relative; position: relative;
height: 150px; height: 150px;
max-width: 50%; } overflow: auto; }
/* line 82, ../sass/forms/_elems.scss */ /* line 106, ../sass/forms/_elems.scss */
.form .form-row .selector-list .wrapper { .form .form-row .selector-list .wrapper {
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
@ -88,24 +102,24 @@
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 96, ../sass/forms/_elems.scss */ /* line 120, ../sass/forms/_elems.scss */
label.form-control.checkbox input { label.form-control.checkbox input {
margin-right: 5px; margin-right: 5px;
vertical-align: top; } vertical-align: top; }
/* line 103, ../sass/forms/_elems.scss */ /* line 127, ../sass/forms/_elems.scss */
.hint, .hint,
.s-hint { .s-hint {
font-size: 0.9em; } font-size: 0.9em; }
/* line 107, ../sass/forms/_elems.scss */ /* line 131, ../sass/forms/_elems.scss */
.l-result { .l-result {
display: inline-block; display: inline-block;
min-width: 32px; min-width: 32px;
min-height: 32px; min-height: 32px;
position: relative; position: relative;
vertical-align: top; } vertical-align: top; }
/* line 114, ../sass/forms/_elems.scss */ /* line 138, ../sass/forms/_elems.scss */
.l-result div.s-hint { .l-result div.s-hint {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-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; -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; -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; box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
background: #666666; background: rgba(255, 255, 255, 0.1);
border: none; border: none;
border-bottom: 1px solid #999999; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #cccccc; color: #cccccc;
outline: none; outline: none;
padding: 5px; padding: 5px;
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; } width: 100%; }
/* line 11, ../sass/forms/_mixins.scss */ /* line 12, ../sass/forms/_mixins.scss */
.edit-main textarea.error { .edit-main textarea.error {
background: rgba(255, 0, 0, 0.5); } 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; -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; -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; box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
background: #666666; background: rgba(255, 255, 255, 0.1);
border: none; border: none;
border-bottom: 1px solid #999999; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #cccccc; color: #cccccc;
outline: none; outline: none;
padding: 0 3px; padding: 0 3px; }
height: 22px; /* line 12, ../sass/forms/_mixins.scss */
line-height: 22px;
vertical-align: middle; }
/* line 11, ../sass/forms/_mixins.scss */
input[type="text"].error { input[type="text"].error {
background: rgba(255, 0, 0, 0.5); } 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 { input[type="text"].numeric {
text-align: right; } text-align: right; }
@ -260,9 +271,9 @@ input[type="text"] {
-webkit-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px; -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; -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; box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
background: #666666; background: rgba(255, 255, 255, 0.1);
border: none; border: none;
border-bottom: 1px solid #999999; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #cccccc; color: #cccccc;
outline: none; outline: none;
padding: 0 3px; padding: 0 3px;
@ -272,7 +283,7 @@ input[type="text"] {
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
padding: 5px; } padding: 5px; }
/* line 11, ../sass/forms/_mixins.scss */ /* line 12, ../sass/forms/_mixins.scss */
.channel-selector .treeview.error { .channel-selector .treeview.error {
background: rgba(255, 0, 0, 0.5); } background: rgba(255, 0, 0, 0.5); }
/* line 15, ../sass/forms/_channel-selector.scss */ /* line 15, ../sass/forms/_channel-selector.scss */

92
platform/commonUI/general/res/css/theme-espresso.css
View File

@ -1798,9 +1798,6 @@ label.checkbox.custom {
margin-top: 5px; margin-top: 5px;
padding: 5px; padding: 5px;
position: relative; } position: relative; }
/* line 24, ../sass/forms/_elems.scss */
.form .form-row:first-child {
border-top: none; }
/* line 29, ../sass/forms/_elems.scss */ /* line 29, ../sass/forms/_elems.scss */
.form .form-row .label, .form .form-row .label,
.form .form-row .controls { .form .form-row .controls {
@ -1813,45 +1810,62 @@ label.checkbox.custom {
font-size: 0.75rem; font-size: 0.75rem;
line-height: 22px; line-height: 22px;
min-height: 22px; } min-height: 22px; }
/* line 38, ../sass/forms/_elems.scss */ /* line 39, ../sass/forms/_elems.scss */
.form .form-row > .label { .form .form-row > .label {
float: left; float: left;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
width: 20%; } width: 20%; }
/* line 46, ../sass/forms/_elems.scss */ /* line 47, ../sass/forms/_elems.scss */
.form .form-row .value { .form .form-row .value {
color: #cccccc; } color: #cccccc; }
/* line 50, ../sass/forms/_elems.scss */ /* line 51, ../sass/forms/_elems.scss */
.form .form-row .controls { .form .form-row .controls {
float: left; float: left;
position: relative; position: relative;
width: 79%; } width: 79.9%; }
/* line 55, ../sass/forms/_elems.scss */ /* line 58, ../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 { .form .form-row .controls .l-composite-control.l-checkbox {
display: inline-block;
line-height: 14px; line-height: 14px;
margin-right: 5px; } margin-right: 5px; }
/* line 65, ../sass/forms/_elems.scss */ /* 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 { .form .form-row .controls .select {
margin-right: 5px; } margin-right: 5px; }
/* line 70, ../sass/forms/_elems.scss */ /* line 91, ../sass/forms/_elems.scss */
.form .form-row .field-hints { .form .form-row .field-hints {
color: #666666; } color: #666666; }
/* line 74, ../sass/forms/_elems.scss */ /* line 95, ../sass/forms/_elems.scss */
.form .form-row .selector-list { .form .form-row .selector-list {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -ms-border-radius: 3px;
-o-border-radius: 3px; -o-border-radius: 3px;
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); background: rgba(0, 0, 0, 0.2);
padding: 5px;
position: relative; position: relative;
height: 150px; height: 150px;
max-width: 50%; } overflow: auto; }
/* line 82, ../sass/forms/_elems.scss */ /* line 106, ../sass/forms/_elems.scss */
.form .form-row .selector-list .wrapper { .form .form-row .selector-list .wrapper {
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
@ -1860,24 +1874,24 @@ label.checkbox.custom {
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 96, ../sass/forms/_elems.scss */ /* line 120, ../sass/forms/_elems.scss */
label.form-control.checkbox input { label.form-control.checkbox input {
margin-right: 5px; margin-right: 5px;
vertical-align: top; } vertical-align: top; }
/* line 103, ../sass/forms/_elems.scss */ /* line 127, ../sass/forms/_elems.scss */
.hint, .hint,
.s-hint { .s-hint {
font-size: 0.9em; } font-size: 0.9em; }
/* line 107, ../sass/forms/_elems.scss */ /* line 131, ../sass/forms/_elems.scss */
.l-result { .l-result {
display: inline-block; display: inline-block;
min-width: 32px; min-width: 32px;
min-height: 32px; min-height: 32px;
position: relative; position: relative;
vertical-align: top; } vertical-align: top; }
/* line 114, ../sass/forms/_elems.scss */ /* line 138, ../sass/forms/_elems.scss */
.l-result div.s-hint { .l-result div.s-hint {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-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; -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; -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; box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
background: #666666; background: rgba(255, 255, 255, 0.1);
border: none; border: none;
border-bottom: 1px solid #999999; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #cccccc; color: #cccccc;
outline: none; outline: none;
padding: 0 3px; padding: 0 3px; }
height: 22px; /* line 12, ../sass/forms/_mixins.scss */
line-height: 22px;
vertical-align: middle; }
/* line 11, ../sass/forms/_mixins.scss */
input[type="text"].error { input[type="text"].error {
background: rgba(255, 0, 0, 0.5); } 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 { input[type="text"].numeric {
text-align: right; } text-align: right; }
@ -2037,9 +2048,9 @@ input[type="text"] {
-webkit-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px; -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; -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; box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
background: #666666; background: rgba(255, 255, 255, 0.1);
border: none; border: none;
border-bottom: 1px solid #999999; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #cccccc; color: #cccccc;
outline: none; outline: none;
padding: 0 3px; padding: 0 3px;
@ -2049,7 +2060,7 @@ input[type="text"] {
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
padding: 5px; } padding: 5px; }
/* line 11, ../sass/forms/_mixins.scss */ /* line 12, ../sass/forms/_mixins.scss */
.channel-selector .treeview.error { .channel-selector .treeview.error {
background: rgba(255, 0, 0, 0.5); } background: rgba(255, 0, 0, 0.5); }
/* line 15, ../sass/forms/_channel-selector.scss */ /* 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; -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; -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; box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
background: #666666; background: rgba(255, 255, 255, 0.1);
border: none; border: none;
border-bottom: 1px solid #999999; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #cccccc; color: #cccccc;
outline: none; outline: none;
padding: 0 3px; padding: 0 3px;
background: #3b3b3b; background: #3b3b3b;
border-bottom: 1px solid #4d4d4d; } border-bottom: 1px solid #4d4d4d; }
/* line 11, ../sass/forms/_mixins.scss */ /* line 12, ../sass/forms/_mixins.scss */
.filter input.filter.error, .filter input.filter.error,
.filter input.t-filter-input.error, .filter input.t-filter-input.error,
.t-filter input.filter.error, .t-filter input.filter.error,
@ -2467,17 +2478,20 @@ input[type="text"] {
left: 25px; } left: 25px; }
/* line 29, ../sass/overlay/_overlay.scss */ /* line 29, ../sass/overlay/_overlay.scss */
.overlay .title { .overlay .title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1.3em; } font-size: 1.3em; }
/* line 33, ../sass/overlay/_overlay.scss */ /* line 34, ../sass/overlay/_overlay.scss */
.overlay .top-bar { .overlay .top-bar {
height: 60px; } height: 60px; }
/* line 37, ../sass/overlay/_overlay.scss */ /* line 38, ../sass/overlay/_overlay.scss */
.overlay .editor { .overlay .editor {
top: 70px; top: 70px;
bottom: 50px; bottom: 50px;
left: 0; left: 0;
right: 0; } right: 0; }
/* line 43, ../sass/overlay/_overlay.scss */ /* line 44, ../sass/overlay/_overlay.scss */
.overlay .bottom-bar { .overlay .bottom-bar {
top: auto; top: auto;
right: 0; right: 0;
@ -2486,10 +2500,10 @@ input[type="text"] {
font-size: 1em; font-size: 1em;
height: 40px; height: 40px;
text-align: right; } text-align: right; }
/* line 48, ../sass/overlay/_overlay.scss */ /* line 49, ../sass/overlay/_overlay.scss */
.overlay .bottom-bar .btn { .overlay .bottom-bar .btn {
margin-left: 10px; } margin-left: 10px; }
/* line 52, ../sass/overlay/_overlay.scss */ /* line 53, ../sass/overlay/_overlay.scss */
.overlay .contents.l-dialog { .overlay .contents.l-dialog {
overflow: auto; } overflow: auto; }

32
platform/commonUI/general/res/sass/forms/_elems.scss
View File

@ -22,11 +22,12 @@
padding: $interiorMargin; padding: $interiorMargin;
position: relative; position: relative;
&:first-child { &:first-child {
border-top: none; // border-top: none;
} }
.label, .label,
.controls { .controls {
// @include test(orange);
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
box-sizing: border-box; box-sizing: border-box;
@ -50,18 +51,38 @@
.controls { .controls {
float: left; float: left;
position: relative; 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 { .l-composite-control {
display: inline-block; // display: inline-block;
&.l-checkbox { &.l-checkbox {
// @include test(); // @include test();
// height: $formRowCtrlsH; // height: $formRowCtrlsH;
display: inline-block;
line-height: $formRowCtrlsH; line-height: $formRowCtrlsH;
margin-right: 5px; 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 { .select {
margin-right: $interiorMargin; margin-right: $interiorMargin;
} }
@ -75,10 +96,13 @@
// Used in create overlay to display tree view // Used in create overlay to display tree view
$h: 150px; $h: 150px;
@include border-radius($basicCr); @include border-radius($basicCr);
@include box-sizing(border-box);
background: rgba(black, 0.2); background: rgba(black, 0.2);
padding: $interiorMargin;
position: relative; position: relative;
height: $h; height: $h;
max-width: 50%; overflow: auto;
// max-width: 50%;
.wrapper { .wrapper {
$p: $interiorMargin; $p: $interiorMargin;
overflow-y: auto; overflow-y: auto;

5
platform/commonUI/general/res/sass/forms/_mixins.scss
View File

@ -3,9 +3,10 @@
@include border-radius($controlCr); @include border-radius($controlCr);
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(inset rgba(black, 0.5) 0 1px 5px); @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: none;
border-bottom: 1px solid lighten($bg, 40%); border-bottom: 1px solid rgba(#fff, 0.1);
color: lighten($fg, 20%); color: lighten($fg, 20%);
outline: none; outline: none;
&.error { &.error {

3
platform/commonUI/general/res/sass/forms/_text-input.scss
View File

@ -1,8 +1,5 @@
input[type="text"] { input[type="text"] {
@include nice-input(); @include nice-input();
height: $formInputH;
line-height: $formInputH;
vertical-align: middle;
&.filter { &.filter {
&.ng-dirty { &.ng-dirty {
// background: red; // background: red;

1
platform/commonUI/general/res/sass/overlay/_overlay.scss
View File

@ -27,6 +27,7 @@
} }
} }
.title { .title {
@include ellipsize();
font-size: 1.3em; font-size: 1.3em;
} }

3
platform/core/bundle.json
View File

@ -104,7 +104,8 @@
"key": "name", "key": "name",
"property": "name", "property": "name",
"pattern": "\\S+", "pattern": "\\S+",
"required": true "required": true,
"cssclass": "l-med"
}, },
{ {
"control": "checkbox", "control": "checkbox",

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

@ -204,17 +204,19 @@
"model": { "composition": [] }, "model": { "composition": [] },
"properties": [ "properties": [
{ {
"label": "Layout Grid", "name": "Layout Grid",
"control": "composite", "control": "composite",
"pattern": "^(\\d*[1-9]\\d*)?$", "pattern": "^(\\d*[1-9]\\d*)?$",
"items": [ "items": [
{ {
"name": "Horizontal grid (px)", "name": "Horizontal grid (px)",
"control": "textfield" "control": "textfield",
"cssclass": "l-small l-numeric"
}, },
{ {
"name": "Vertical grid (px)", "name": "Vertical grid (px)",
"control": "textfield" "control": "textfield",
"cssclass": "l-small l-numeric"
} }
], ],
"key": "layoutGrid", "key": "layoutGrid",
@ -237,11 +239,13 @@
"items": [ "items": [
{ {
"name": "Horizontal grid (px)", "name": "Horizontal grid (px)",
"control": "textfield" "control": "textfield",
"cssclass": "l-small l-numeric"
}, },
{ {
"name": "Vertical grid (px)", "name": "Vertical grid (px)",
"control": "textfield" "control": "textfield",
"cssclass": "l-small l-numeric"
} }
], ],
"pattern": "^(\\d*[1-9]\\d*)?$", "pattern": "^(\\d*[1-9]\\d*)?$",

2
platform/forms/res/templates/controls/composite.html
View File

@ -1,6 +1,6 @@
<span ng-controller="CompositeController as compositeCtrl"> <span ng-controller="CompositeController as compositeCtrl">
<ng-form name="mctFormItem" ng-repeat="item in structure.items"> <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" <mct-control key="item.control"
ng-model="ngModel[field]" ng-model="ngModel[field]"
ng-required="ngRequired || compositeCtrl.isNonEmpty(ngModel[field])" ng-required="ngRequired || compositeCtrl.isNonEmpty(ngModel[field])"

2
platform/forms/res/templates/controls/textfield.html
View File

@ -1,5 +1,5 @@
<span class='form-control shell'> <span class='form-control shell'>
<span class='field control'> <span class='field control {{structure.cssclass}}'>
<input type="text" <input type="text"
ng-required="ngRequired" ng-required="ngRequired"
ng-model="ngModel[field]" ng-model="ngModel[field]"