ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-16 07:26:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'open940b' into open929

Browse Source 
Merge in Fixed Position updates to reconcile conflicts
related to generalization of selection mechanism, WTD-929.

Conflicts:
	platform/features/layout/src/FixedController.js
	platform/features/layout/test/FixedControllerSpec.js
This commit is contained in:
Victor Woeltjen 2015-03-04 15:08:11 -08:00
commit 5ab2ceb333
49 changed files with 1415 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/browse/res/templates/browse/object-header.html
View File

@ -1,6 +1,6 @@
<div class='object-header'>
<span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
<span class='action'>{{parameters.mode}}</span>
<span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
<span class='type'>{{type.getName()}}</span>
<span class='title'>{{model.name}}</span>
<a id='actions-menu' class='ui-symbol invoke-menu' onclick="alert('Not yet functional. This will display a dropdown menu of options for this object.');">v</a>

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

@ -1,4 +1,4 @@
/* line 2, ../sass/forms/_elems.scss */
/* line 3, ../sass/forms/_elems.scss */
.form .section-header {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@ -9,13 +9,13 @@
font-size: 0.8em;
margin-top: 5px;
padding: 5px; }
/* line 8, ../sass/forms/_elems.scss */
/* line 9, ../sass/forms/_elems.scss */
.form .section-header:first-child {
margin-top: 0; }
/* line 12, ../sass/forms/_elems.scss */
/* line 13, ../sass/forms/_elems.scss */
.form .form-section {
position: relative; }
/* line 16, ../sass/forms/_elems.scss */
/* line 17, ../sass/forms/_elems.scss */
.form .form-row {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -26,7 +26,7 @@
margin-top: 5px;
padding: 5px;
position: relative; }
/* line 25, ../sass/forms/_elems.scss */
/* line 24, ../sass/forms/_elems.scss */
.form .form-row:first-child {
border-top: none; }
/* line 29, ../sass/forms/_elems.scss */
@ -41,24 +41,34 @@
font-size: 0.75rem;
line-height: 22px;
min-height: 22px; }
/* line 39, ../sass/forms/_elems.scss */
/* line 38, ../sass/forms/_elems.scss */
.form .form-row > .label {
float: left;
position: relative;
white-space: nowrap;
width: 20%; }
/* line 47, ../sass/forms/_elems.scss */
/* line 46, ../sass/forms/_elems.scss */
.form .form-row .value {
color: #cccccc; }
/* line 51, ../sass/forms/_elems.scss */
/* line 50, ../sass/forms/_elems.scss */
.form .form-row .controls {
float: left;
position: relative;
width: 79%; }
/* line 58, ../sass/forms/_elems.scss */
/* 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 */
.form .form-row .controls .select {
margin-right: 5px; }
/* line 70, ../sass/forms/_elems.scss */
.form .form-row .field-hints {
color: #666666; }
/* line 62, ../sass/forms/_elems.scss */
/* line 74, ../sass/forms/_elems.scss */
.form .form-row .selector-list {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@ -69,7 +79,7 @@
position: relative;
height: 150px;
max-width: 50%; }
/* line 70, ../sass/forms/_elems.scss */
/* line 82, ../sass/forms/_elems.scss */
.form .form-row .selector-list .wrapper {
overflow-y: auto;
position: absolute;
@ -78,15 +88,35 @@
bottom: 5px;
left: 5px; }
/* line 84, ../sass/forms/_elems.scss */
/* line 96, ../sass/forms/_elems.scss */
label.form-control.checkbox input {
margin-right: 5px;
vertical-align: top; }
/* line 90, ../sass/forms/_elems.scss */
.hint {
/* line 103, ../sass/forms/_elems.scss */
.hint,
.s-hint {
font-size: 0.9em; }
/* line 107, ../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 */
.l-result div.s-hint {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background: rgba(255, 153, 0, 0.8);
display: block;
color: #ffd699;
padding: 5px; }
/* line 1, ../sass/forms/_textarea.scss */
.edit-main textarea {
-webkit-appearance: none;
@ -166,30 +196,22 @@ input[type="text"] {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666;
color: #999999;
display: inline-block;
margin-right: 5px;
margin-top: 1px;
padding: 0 25px 0 0;
position: relative;
overflow: hidden;
vertical-align: middle; }
/* line 115, ../sass/_mixins.scss */
cursor: pointer;
display: inline-block;
margin: 0 0 2px 2px;
position: relative; }
/* line 127, ../sass/_mixins.scss */
.form-control.select:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d);
background-image: -moz-linear-gradient(#666666, #4d4d4d);
background-image: -o-linear-gradient(#666666, #4d4d4d);
background-image: linear-gradient(#666666, #4d4d4d); }
/* line 11, ../sass/forms/_selects.scss */
.form-control.select span.arw {
display: block;
pointer-events: none;
position: absolute;
right: 8%;
top: 10%; }
/* line 18, ../sass/forms/_selects.scss */
/* line 7, ../sass/forms/_selects.scss */
.form-control.select select {
-webkit-appearance: none;
-moz-appearance: none;
@ -197,16 +219,21 @@ input[type="text"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
background: none;
color: #999999;
border: none !important;
cursor: pointer;
padding: 3px 5px 4px 5px;
width: 150%; }
/* line 32, ../sass/forms/_selects.scss */
.form-control.select select:focus {
outline: none; }
padding: 4px 25px 2px 5px; }
/* line 16, ../sass/forms/_selects.scss */
.form-control.select:after {
color: #0099cc;
content: "v";
display: block;
font-family: 'symbolsfont';
pointer-events: none;
position: absolute;
right: 5px;
top: 0; }
/* line 2, ../sass/forms/_channel-selector.scss */
.channel-selector .line {

6
platform/commonUI/general/res/css/items.css
View File

@ -24,6 +24,7 @@
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #737373;
color: #999999;
display: inline-block;
@ -35,7 +36,7 @@
margin-bottom: 3px;
margin-right: 3px;
position: relative; }
/* line 115, ../sass/_mixins.scss */
/* line 127, ../sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #737373), color-stop(100%, #595959));
background-image: -webkit-linear-gradient(#737373, #595959);
@ -109,6 +110,7 @@
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #33ccff;
color: #999999;
display: inline-block;
@ -118,7 +120,7 @@
background-image: -o-linear-gradient(#33ccff, #0099cc);
background-image: linear-gradient(#33ccff, #0099cc);
color: #80dfff; }
/* line 123, ../sass/_mixins.scss */
/* line 135, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66d9ff), color-stop(100%, #00bfff));
background-image: -webkit-linear-gradient(#66d9ff, #00bfff);

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

@ -364,6 +364,115 @@ span {
.vscroll {
overflow-y: auto; }
/* line 2, ../sass/_fixed-position.scss */
.t-fixed-position.l-fixed-position {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto; }
/* line 8, ../sass/_fixed-position.scss */
.t-fixed-position.l-fixed-position .l-grid-holder {
position: relative;
height: 100%;
width: 100%; }
/* line 11, ../sass/_fixed-position.scss */
.t-fixed-position.l-fixed-position .l-grid-holder .l-grid {
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
z-index: 0; }
/* line 17, ../sass/_fixed-position.scss */
.t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-x {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-repeat: repeat-x; }
/* line 21, ../sass/_fixed-position.scss */
.t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-y {
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-repeat: repeat-y; }
/* line 28, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item {
position: absolute;
border: 1px solid transparent; }
/* line 32, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item.s-selected {
-webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
border-color: #0099cc;
cursor: move; }
/* line 37, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item.s-not-selected {
opacity: 0.8; }
/* line 43, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-box,
.t-fixed-position .l-fixed-position-item .l-fixed-position-image,
.t-fixed-position .l-fixed-position-item .l-fixed-position-text {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 100%; }
/* line 51, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-image {
background-size: cover;
background-repeat: no-repeat;
background-position: left top; }
/* line 57, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text {
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
border: 1px solid transparent;
font-size: 0.8rem; }
/* line 62, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text {
padding: 3px; }
/* line 67, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem {
overflow: hidden;
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
width: auto;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 50%; }
/* line 71, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-title {
right: auto;
left: 3px; }
/* line 75, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value {
right: 3px;
left: auto;
text-align: right; }
/* line 80, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value.telem-only {
left: 3px;
width: auto; }
/* line 91, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item-handle {
background: rgba(0, 153, 204, 0.5);
cursor: crosshair;
border: 1px solid #0099cc;
position: absolute; }
/* line 103, ../sass/_fixed-position.scss */
.edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover {
border: 1px dotted rgba(0, 153, 204, 0.5); }
/* line 3, ../sass/_about.scss */
.t-about {
line-height: 120%; }
@ -500,7 +609,7 @@ span {
display: inline-block;
font-size: 1rem;
vertical-align: middle; }
/* line 159, ../sass/_mixins.scss */
/* line 171, ../sass/_mixins.scss */
.invoke-menu:hover {
color: #33ccff; }
@ -512,15 +621,16 @@ span {
/* line 49, ../sass/_icons.scss */
.icon-buttons-main .invoke-menu {
color: #666666; }
/* line 159, ../sass/_mixins.scss */
/* line 171, ../sass/_mixins.scss */
.icon-buttons-main .invoke-menu:hover {
color: #999999; }
/* line 57, ../sass/_icons.scss */
.object-header .type-icon {
color: #ffc700; }
color: #ffc700;
margin-right: 5px; }
/* line 64, ../sass/_icons.scss */
/* line 65, ../sass/_icons.scss */
.menu .type-icon,
.tree-item .type-icon,
.icon-btn .menu.dropdown .icon,
@ -652,10 +762,11 @@ span {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666;
color: #999999;
display: inline-block; }
/* line 70, ../sass/_mixins.scss */
/* line 82, ../sass/_mixins.scss */
.s-btn.s-very-subtle:hover, .s-very-subtle.s-icon-btn:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #595959));
background-image: -webkit-linear-gradient(#666666, #595959);
@ -690,6 +801,64 @@ a.l-btn,
a.l-btn span {
display: inline-block; }
/* line 1, ../sass/controls/_color-palette.scss */
.l-color-palette {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 5px !important; }
/* line 10, ../sass/controls/_color-palette.scss */
.l-color-palette .l-palette-row {
overflow: hidden;
*zoom: 1;
line-height: 16px;
width: 170px; }
/* line 15, ../sass/controls/_color-palette.scss */
.l-color-palette .l-palette-row .l-palette-item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-shadow: rgba(0, 0, 0, 0.8) 0 1px 2px;
-webkit-transition-property: visibility, opacity, background-color, border-color;
-moz-transition-property: visibility, opacity, background-color, border-color;
-o-transition-property: visibility, opacity, background-color, border-color;
transition-property: visibility, opacity, background-color, border-color;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
border: 1px solid transparent;
color: white;
display: block;
font-family: 'symbolsfont';
float: left;
height: 16px;
width: 16px;
line-height: 16px;
margin: 0 1px 1px 0;
text-align: center;
vertical-align: middle; }
/* line 32, ../sass/controls/_color-palette.scss */
.l-color-palette .l-palette-row .s-palette-item:hover {
-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;
border-color: white !important; }
/* line 38, ../sass/controls/_color-palette.scss */
.l-color-palette .l-palette-row .l-palette-item-label {
margin-left: 5px; }
/* line 42, ../sass/controls/_color-palette.scss */
.l-color-palette .l-palette-row.l-option-row {
margin-bottom: 5px; }
/* line 44, ../sass/controls/_color-palette.scss */
.l-color-palette .l-palette-row.l-option-row .s-palette-item {
border-color: #999999; }
/* line 3, ../sass/controls/_controls.scss */
.control.view-control .icon {
display: inline-block;
@ -815,6 +984,7 @@ a.l-btn span {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #33ccff;
color: #999999;
display: inline-block;
@ -824,7 +994,7 @@ a.l-btn span {
background-image: -o-linear-gradient(#33ccff, #0099cc);
background-image: linear-gradient(#33ccff, #0099cc);
color: #ccf2ff; }
/* line 123, ../sass/_mixins.scss */
/* line 135, ../sass/_mixins.scss */
.btn.major:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66d9ff), color-stop(100%, #00bfff));
background-image: -webkit-linear-gradient(#66d9ff, #00bfff);
@ -849,6 +1019,7 @@ a.l-btn span {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #4dd2ff;
color: #999999;
display: inline-block;
@ -858,7 +1029,7 @@ a.l-btn span {
background-image: -o-linear-gradient(#4dd2ff, #00ace6);
background-image: linear-gradient(#4dd2ff, #00ace6);
color: #ccf2ff; }
/* line 123, ../sass/_mixins.scss */
/* line 135, ../sass/_mixins.scss */
.btn.major:hover:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80dfff), color-stop(100%, #1ac6ff));
background-image: -webkit-linear-gradient(#80dfff, #1ac6ff);
@ -892,10 +1063,11 @@ a.l-btn span {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #999999;
color: #cccccc;
display: inline-block; }
/* line 115, ../sass/_mixins.scss */
/* line 127, ../sass/_mixins.scss */
.btn.subtle:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #999999), color-stop(100%, #808080));
background-image: -webkit-linear-gradient(#999999, #808080);
@ -920,10 +1092,11 @@ a.l-btn span {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666;
color: #b3b3b3;
display: inline-block; }
/* line 115, ../sass/_mixins.scss */
/* line 127, ../sass/_mixins.scss */
.btn.very-subtle:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d);
@ -954,6 +1127,13 @@ a.l-btn span {
margin-left: 5px; }
/* line 157, ../sass/controls/_controls.scss */
.l-composite-control {
vertical-align: middle; }
/* line 160, ../sass/controls/_controls.scss */
.l-composite-control.l-checkbox .composite-control-label {
line-height: 18px; }
/* line 166, ../sass/controls/_controls.scss */
.control-group {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -961,16 +1141,16 @@ a.l-btn span {
border-left: 1px solid #4d4d4d;
padding: 0 5px;
position: relative; }
/* line 164, ../sass/controls/_controls.scss */
/* line 173, ../sass/controls/_controls.scss */
.control-group:first-child {
border-left: none;
padding-left: 0; }
/* line 170, ../sass/controls/_controls.scss */
/* line 179, ../sass/controls/_controls.scss */
.btn-set {
display: inline-block;
position: relative; }
/* line 175, ../sass/controls/_controls.scss */
/* line 184, ../sass/controls/_controls.scss */
.btn-set .btn,
.btn-set .t-btn {
-webkit-border-radius: 0;
@ -980,7 +1160,7 @@ a.l-btn span {
border-radius: 0;
border-left: 1px solid #666666;
margin-left: 0; }
/* line 179, ../sass/controls/_controls.scss */
/* line 188, ../sass/controls/_controls.scss */
.btn-set .btn:first-child,
.btn-set .t-btn:first-child {
border-left: none;
@ -990,7 +1170,7 @@ a.l-btn span {
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px; }
/* line 183, ../sass/controls/_controls.scss */
/* line 192, ../sass/controls/_controls.scss */
.btn-set .btn:last-child,
.btn-set .t-btn:last-child {
-moz-border-radius-topright: 3px;
@ -1000,7 +1180,7 @@ a.l-btn span {
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px; }
/* line 194, ../sass/controls/_controls.scss */
/* line 203, ../sass/controls/_controls.scss */
.object-browse-bar .btn,
.object-browse-bar .t-btn,
.top-bar .buttons-main .btn,
@ -1011,7 +1191,7 @@ a.l-btn span {
font-size: 12.6px;
height: 28px;
line-height: 28px; }
/* line 200, ../sass/controls/_controls.scss */
/* line 209, ../sass/controls/_controls.scss */
.object-browse-bar .btn .icon:not(.invoke-menu),
.object-browse-bar .t-btn .icon:not(.invoke-menu),
.top-bar .buttons-main .btn .icon:not(.invoke-menu),
@ -1021,21 +1201,22 @@ a.l-btn span {
font-size: 150%;
vertical-align: middle; }
/* line 208, ../sass/controls/_controls.scss */
/* line 217, ../sass/controls/_controls.scss */
label.checkbox.custom {
cursor: pointer;
display: inline-block;
line-height: 14px;
margin-right: 20px;
padding-left: 19px;
position: relative; }
/* line 218, ../sass/controls/_controls.scss */
position: relative;
vertical-align: top; }
/* line 228, ../sass/controls/_controls.scss */
label.checkbox.custom em {
color: #999999;
display: inline-block;
height: 14px;
min-width: 14px; }
/* line 223, ../sass/controls/_controls.scss */
/* line 233, ../sass/controls/_controls.scss */
label.checkbox.custom em:before {
-webkit-border-radius: 2.25px;
-moz-border-radius: 2.25px;
@ -1056,51 +1237,51 @@ label.checkbox.custom {
top: 0;
position: absolute;
text-align: center; }
/* line 241, ../sass/controls/_controls.scss */
/* line 251, ../sass/controls/_controls.scss */
label.checkbox.custom.no-text {
overflow: hidden;
margin-right: 0;
padding-left: 0;
height: 14px;
width: 14px; }
/* line 247, ../sass/controls/_controls.scss */
/* line 257, ../sass/controls/_controls.scss */
label.checkbox.custom.no-text em {
overflow: hidden; }
/* line 251, ../sass/controls/_controls.scss */
/* line 261, ../sass/controls/_controls.scss */
label.checkbox.custom input {
display: none; }
/* line 253, ../sass/controls/_controls.scss */
/* line 263, ../sass/controls/_controls.scss */
label.checkbox.custom input:checked ~ em:before {
background: #0099cc;
color: #ccf2ff;
content: "2"; }
/* line 261, ../sass/controls/_controls.scss */
/* line 271, ../sass/controls/_controls.scss */
.input-labeled {
margin-left: 5px; }
/* line 263, ../sass/controls/_controls.scss */
/* line 273, ../sass/controls/_controls.scss */
.input-labeled label {
display: inline-block;
margin-right: 3px; }
/* line 267, ../sass/controls/_controls.scss */
/* line 277, ../sass/controls/_controls.scss */
.input-labeled.inline {
display: inline-block; }
/* line 270, ../sass/controls/_controls.scss */
/* line 280, ../sass/controls/_controls.scss */
.input-labeled:first-child {
margin-left: 0; }
/* line 275, ../sass/controls/_controls.scss */
/* line 285, ../sass/controls/_controls.scss */
.btn-menu label.checkbox.custom {
margin-left: 5px; }
/* line 280, ../sass/controls/_controls.scss */
/* line 290, ../sass/controls/_controls.scss */
.item .checkbox.checked label {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-bottom: none; }
/* line 286, ../sass/controls/_controls.scss */
/* line 296, ../sass/controls/_controls.scss */
.btn-menu {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
background-image: -webkit-linear-gradient(#4d4d4d, #404040);
@ -1118,51 +1299,52 @@ label.checkbox.custom {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666;
color: #999999;
display: inline-block;
height: 20px;
line-height: 20px; }
/* line 115, ../sass/_mixins.scss */
/* line 127, ../sass/_mixins.scss */
.btn-menu:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d);
background-image: -moz-linear-gradient(#666666, #4d4d4d);
background-image: -o-linear-gradient(#666666, #4d4d4d);
background-image: linear-gradient(#666666, #4d4d4d); }
/* line 293, ../sass/controls/_controls.scss */
/* line 303, ../sass/controls/_controls.scss */
.btn-menu.dropdown {
padding-right: 7px; }
/* line 298, ../sass/controls/_controls.scss */
/* line 308, ../sass/controls/_controls.scss */
.btn-menu:not(.disabled):hover {
color: #cccccc; }
/* line 302, ../sass/controls/_controls.scss */
/* line 312, ../sass/controls/_controls.scss */
.btn-menu.btn-invoke-menu {
color: #0099cc;
padding: 0 5px; }
/* line 306, ../sass/controls/_controls.scss */
/* line 316, ../sass/controls/_controls.scss */
.btn-menu.btn-invoke-menu:hover {
color: deepskyblue; }
/* line 311, ../sass/controls/_controls.scss */
/* line 325, ../sass/controls/_controls.scss */
.btn-menu .type-icon {
margin-right: 5px; }
/* line 314, ../sass/controls/_controls.scss */
/* line 328, ../sass/controls/_controls.scss */
.btn-menu .menu {
text-align: left; }
/* line 317, ../sass/controls/_controls.scss */
/* line 331, ../sass/controls/_controls.scss */
.btn-menu .menu .ui-symbol.icon {
width: 12px; }
/* line 323, ../sass/controls/_controls.scss */
/* line 337, ../sass/controls/_controls.scss */
.top-bar .btn-menu {
height: 35px;
line-height: 35px;
padding-right: 10px; }
/* line 331, ../sass/controls/_controls.scss */
/* line 345, ../sass/controls/_controls.scss */
.top-bar .btn-menu.browse-btn {
margin-right: 5px;
padding-left: 35px; }
/* line 334, ../sass/controls/_controls.scss */
/* line 348, ../sass/controls/_controls.scss */
.top-bar .btn-menu.browse-btn .badge {
-webkit-border-radius: 4.5px;
-moz-border-radius: 4.5px;
@ -1181,31 +1363,30 @@ label.checkbox.custom {
height: auto; }
/******************************************************** OBJECT-HEADER */
/* line 351, ../sass/controls/_controls.scss */
/* line 365, ../sass/controls/_controls.scss */
.object-header {
display: inline-block;
font-size: 1em; }
/* line 354, ../sass/controls/_controls.scss */
/* line 368, ../sass/controls/_controls.scss */
.object-header .title {
color: white; }
/* line 357, ../sass/controls/_controls.scss */
/* line 371, ../sass/controls/_controls.scss */
.object-header .type-icon {
font-size: 1.5em;
margin-right: 5px;
vertical-align: middle; }
/* line 366, ../sass/controls/_controls.scss */
/* line 380, ../sass/controls/_controls.scss */
.top-bar .object-header,
.object-browse-bar .object-header {
font-size: 1.2em; }
/* line 368, ../sass/controls/_controls.scss */
font-size: 1.1em; }
/* line 382, ../sass/controls/_controls.scss */
.top-bar .object-header span,
.object-browse-bar .object-header span {
display: inline-block;
margin-right: 5px; }
display: inline-block; }
/******************************************************** VIEW-CONTROLS */
/* line 377, ../sass/controls/_controls.scss */
/* line 391, ../sass/controls/_controls.scss */
.view-controls .view-type {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@ -1219,16 +1400,16 @@ label.checkbox.custom {
line-height: 20px;
padding-left: 5px;
padding-right: 5px; }
/* line 388, ../sass/controls/_controls.scss */
/* line 402, ../sass/controls/_controls.scss */
.view-controls .view-type.cur {
background: #666666; }
/* line 393, ../sass/controls/_controls.scss */
/* line 407, ../sass/controls/_controls.scss */
.edit-mode .top-bar .control-set.edit-view-controls {
margin-right: 50px; }
/******************************************************** SLIDERS */
/* line 404, ../sass/controls/_controls.scss */
/* line 418, ../sass/controls/_controls.scss */
.slider .slot {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
@ -1251,7 +1432,7 @@ label.checkbox.custom {
right: 0;
bottom: auto;
left: 0; }
/* line 415, ../sass/controls/_controls.scss */
/* line 429, ../sass/controls/_controls.scss */
.slider .knob {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
background-image: -webkit-linear-gradient(#4d4d4d, #404040);
@ -1269,6 +1450,7 @@ label.checkbox.custom {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666;
color: #999999;
display: inline-block;
@ -1280,14 +1462,14 @@ label.checkbox.custom {
auto: 0;
bottom: auto;
left: auto; }
/* line 115, ../sass/_mixins.scss */
/* line 127, ../sass/_mixins.scss */
.slider .knob:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d);
background-image: -moz-linear-gradient(#666666, #4d4d4d);
background-image: -o-linear-gradient(#666666, #4d4d4d);
background-image: linear-gradient(#666666, #4d4d4d); }
/* line 87, ../sass/_mixins.scss */
/* line 99, ../sass/_mixins.scss */
.slider .knob:before {
content: '';
display: block;
@ -1298,15 +1480,15 @@ label.checkbox.custom {
left: 2px;
bottom: 5px;
top: 5px; }
/* line 108, ../sass/_mixins.scss */
/* line 120, ../sass/_mixins.scss */
.slider .knob:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); }
/* line 426, ../sass/controls/_controls.scss */
/* line 440, ../sass/controls/_controls.scss */
.slider .knob:before {
top: 1px;
bottom: 3px;
left: 5px; }
/* line 433, ../sass/controls/_controls.scss */
/* line 447, ../sass/controls/_controls.scss */
.slider .range {
background: rgba(0, 153, 204, 0.6);
cursor: ew-resize;
@ -1317,12 +1499,12 @@ label.checkbox.custom {
left: auto;
height: auto;
width: auto; }
/* line 443, ../sass/controls/_controls.scss */
/* line 457, ../sass/controls/_controls.scss */
.slider .range:hover {
background: rgba(0, 153, 204, 0.7); }
/******************************************************** BROWSER ELEMENTS */
/* line 451, ../sass/controls/_controls.scss */
/* line 465, ../sass/controls/_controls.scss */
::-webkit-scrollbar {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
@ -1341,7 +1523,7 @@ label.checkbox.custom {
height: 10px;
width: 10px; }
/* line 457, ../sass/controls/_controls.scss */
/* line 471, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb {
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #666666), color-stop(100%, #595959));
background-image: -webkit-linear-gradient(#666666, #595959 20px);
@ -1360,7 +1542,7 @@ label.checkbox.custom {
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border-top: 1px solid gray; }
/* line 464, ../sass/controls/_controls.scss */
/* line 478, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #808080), color-stop(100%, #737373));
background-image: -webkit-linear-gradient(#808080, #737373 20px);
@ -1368,7 +1550,7 @@ label.checkbox.custom {
background-image: -o-linear-gradient(#808080, #737373 20px);
background-image: linear-gradient(#808080, #737373 20px); }
/* line 469, ../sass/controls/_controls.scss */
/* line 483, ../sass/controls/_controls.scss */
::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0.4); }
@ -1408,6 +1590,7 @@ label.checkbox.custom {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #737373;
color: #999999;
display: inline-block;
@ -1420,7 +1603,7 @@ label.checkbox.custom {
.menu-element .menu ul {
margin: 0;
padding: 0; }
/* line 167, ../sass/_mixins.scss */
/* line 179, ../sass/_mixins.scss */
.menu-element .menu ul li {
list-style-type: none;
margin: 0;
@ -1535,6 +1718,7 @@ label.checkbox.custom {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #a6a6a6;
color: #999999;
display: inline-block; }
@ -1580,7 +1764,7 @@ label.checkbox.custom {
right: 0;
width: auto; }
/* line 2, ../sass/forms/_elems.scss */
/* line 3, ../sass/forms/_elems.scss */
.form .section-header {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@ -1591,13 +1775,13 @@ label.checkbox.custom {
font-size: 0.8em;
margin-top: 5px;
padding: 5px; }
/* line 8, ../sass/forms/_elems.scss */
/* line 9, ../sass/forms/_elems.scss */
.form .section-header:first-child {
margin-top: 0; }
/* line 12, ../sass/forms/_elems.scss */
/* line 13, ../sass/forms/_elems.scss */
.form .form-section {
position: relative; }
/* line 16, ../sass/forms/_elems.scss */
/* line 17, ../sass/forms/_elems.scss */
.form .form-row {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -1608,7 +1792,7 @@ label.checkbox.custom {
margin-top: 5px;
padding: 5px;
position: relative; }
/* line 25, ../sass/forms/_elems.scss */
/* line 24, ../sass/forms/_elems.scss */
.form .form-row:first-child {
border-top: none; }
/* line 29, ../sass/forms/_elems.scss */
@ -1623,24 +1807,34 @@ label.checkbox.custom {
font-size: 0.75rem;
line-height: 22px;
min-height: 22px; }
/* line 39, ../sass/forms/_elems.scss */
/* line 38, ../sass/forms/_elems.scss */
.form .form-row > .label {
float: left;
position: relative;
white-space: nowrap;
width: 20%; }
/* line 47, ../sass/forms/_elems.scss */
/* line 46, ../sass/forms/_elems.scss */
.form .form-row .value {
color: #cccccc; }
/* line 51, ../sass/forms/_elems.scss */
/* line 50, ../sass/forms/_elems.scss */
.form .form-row .controls {
float: left;
position: relative;
width: 79%; }
/* line 58, ../sass/forms/_elems.scss */
/* 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 */
.form .form-row .controls .select {
margin-right: 5px; }
/* line 70, ../sass/forms/_elems.scss */
.form .form-row .field-hints {
color: #666666; }
/* line 62, ../sass/forms/_elems.scss */
/* line 74, ../sass/forms/_elems.scss */
.form .form-row .selector-list {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@ -1651,7 +1845,7 @@ label.checkbox.custom {
position: relative;
height: 150px;
max-width: 50%; }
/* line 70, ../sass/forms/_elems.scss */
/* line 82, ../sass/forms/_elems.scss */
.form .form-row .selector-list .wrapper {
overflow-y: auto;
position: absolute;
@ -1660,15 +1854,35 @@ label.checkbox.custom {
bottom: 5px;
left: 5px; }
/* line 84, ../sass/forms/_elems.scss */
/* line 96, ../sass/forms/_elems.scss */
label.form-control.checkbox input {
margin-right: 5px;
vertical-align: top; }
/* line 90, ../sass/forms/_elems.scss */
.hint {
/* line 103, ../sass/forms/_elems.scss */
.hint,
.s-hint {
font-size: 0.9em; }
/* line 107, ../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 */
.l-result div.s-hint {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background: rgba(255, 153, 0, 0.8);
display: block;
color: #ffd699;
padding: 5px; }
/* line 4, ../sass/forms/_validation.scss */
.validates > .label {
padding-right: 25px; }
@ -1753,30 +1967,22 @@ input[type="text"] {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666;
color: #999999;
display: inline-block;
margin-right: 5px;
margin-top: 1px;
padding: 0 25px 0 0;
position: relative;
overflow: hidden;
vertical-align: middle; }
/* line 115, ../sass/_mixins.scss */
cursor: pointer;
display: inline-block;
margin: 0 0 2px 2px;
position: relative; }
/* line 127, ../sass/_mixins.scss */
.form-control.select:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d);
background-image: -moz-linear-gradient(#666666, #4d4d4d);
background-image: -o-linear-gradient(#666666, #4d4d4d);
background-image: linear-gradient(#666666, #4d4d4d); }
/* line 11, ../sass/forms/_selects.scss */
.form-control.select span.arw {
display: block;
pointer-events: none;
position: absolute;
right: 8%;
top: 10%; }
/* line 18, ../sass/forms/_selects.scss */
/* line 7, ../sass/forms/_selects.scss */
.form-control.select select {
-webkit-appearance: none;
-moz-appearance: none;
@ -1784,16 +1990,21 @@ input[type="text"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
background: none;
color: #999999;
border: none !important;
cursor: pointer;
padding: 3px 5px 4px 5px;
width: 150%; }
/* line 32, ../sass/forms/_selects.scss */
.form-control.select select:focus {
outline: none; }
padding: 4px 25px 2px 5px; }
/* line 16, ../sass/forms/_selects.scss */
.form-control.select:after {
color: #0099cc;
content: "v";
display: block;
font-family: 'symbolsfont';
pointer-events: none;
position: absolute;
right: 5px;
top: 0; }
/* line 2, ../sass/forms/_channel-selector.scss */
.channel-selector .line {
@ -1912,7 +2123,7 @@ input[type="text"] {
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
display: block;
display: inline-block;
font-size: 1.3em;
height: 22px;
line-height: 22px;
@ -2222,6 +2433,7 @@ input[type="text"] {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666;
color: #999999;
display: inline-block;
@ -2488,7 +2700,7 @@ input[type="text"] {
height: 5px;
margin-top: -7px;
top: 70%; }
/* line 87, ../sass/_mixins.scss */
/* line 99, ../sass/_mixins.scss */
.split-layout.horizontal > .splitter:before {
content: '';
display: block;
@ -2499,7 +2711,7 @@ input[type="text"] {
top: 2px;
left: 5px;
right: 5px; }
/* line 108, ../sass/_mixins.scss */
/* line 120, ../sass/_mixins.scss */
.split-layout.horizontal > .splitter:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); }
/* line 42, ../sass/helpers/_splitter.scss */
@ -2521,7 +2733,7 @@ input[type="text"] {
width: 5px;
margin-left: -7px;
left: 85%; }
/* line 87, ../sass/_mixins.scss */
/* line 99, ../sass/_mixins.scss */
.split-layout.vertical > .splitter:before {
content: '';
display: block;
@ -2532,7 +2744,7 @@ input[type="text"] {
left: 2px;
bottom: 5px;
top: 5px; }
/* line 108, ../sass/_mixins.scss */
/* line 120, ../sass/_mixins.scss */
.split-layout.vertical > .splitter:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); }

2
platform/commonUI/general/res/css/tree.css
View File

@ -2,7 +2,7 @@
ul.tree {
margin: 0;
padding: 0; }
/* line 167, ../sass/_mixins.scss */
/* line 179, ../sass/_mixins.scss */
ul.tree li {
list-style-type: none;
margin: 0;

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
View File

Binary file not shown.

32
platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
View File

@ -2,12 +2,12 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg>
<metadata>
Created by FontForge 20110222 at Mon Feb 23 21:13:56 2015
Created by FontForge 20110222 at Thu Feb 26 00:33:43 2015
By deploy user
Copyright 2015 Adobe Systems Incorporated. All rights reserved.
</metadata>
<defs>
<font id="WTDSymbols" horiz-adv-x="500" >
<font id="WTDSymbols" horiz-adv-x="750" >
<font-face
font-family="WTDSymbols"
font-weight="400"
@ -23,15 +23,15 @@ Copyright 2015 Adobe Systems Incorporated. All rights reserved.
underline-position="-50"
unicode-range="U+0020-2044"
/>
<missing-glyph
<missing-glyph horiz-adv-x="500"
/>
<glyph glyph-name=".notdef"
<glyph glyph-name=".notdef" horiz-adv-x="500"
/>
<glyph glyph-name=".null" horiz-adv-x="0"
/>
<glyph glyph-name="nonmarkingreturn" horiz-adv-x="333"
/>
<glyph glyph-name="space" unicode=" "
<glyph glyph-name="space" unicode=" " horiz-adv-x="500"
/>
<glyph glyph-name="exclam" unicode="!" horiz-adv-x="636"
d="M476 730q65 0 112.5 -46.5t47.5 -111.5v-413q0 -66 -47 -112.5t-113 -46.5h-317q-66 0 -112.5 46.5t-46.5 112.5v413q0 65 46.5 111.5t112.5 46.5h317zM405 108v63q0 8 -6.5 13.5t-13.5 5.5h-135q-21 0 -21 -19v-63q0 -10 6.5 -16t14.5 -6h135q7 0 13.5 6.5t6.5 15.5z
@ -74,7 +74,7 @@ d="M352 0l-352 367l352 368v-735z" />
d="M352 366l-352 -366v735z" />
<glyph glyph-name="A" unicode="A" horiz-adv-x="812"
d="M446 735l366 -368l-366 -367l-130 130l147 147h-156q-51 -76 -140 -76q-69 0 -118 48.5t-49 117.5t49 117.5t118 48.5q90 0 140 -75h156l-147 146zM167 295q30 0 51 21.5t21 50.5q0 30 -21 51.5t-51 21.5t-52 -21.5t-22 -51.5q0 -29 22.5 -50.5t51.5 -21.5z" />
<glyph glyph-name="C" unicode="C" horiz-adv-x="750"
<glyph glyph-name="C" unicode="C"
d="M374 750q157 0 266.5 -109t109.5 -267q0 -155 -110 -264.5t-266 -109.5q-154 0 -264 110t-110 264q0 158 109.5 267t264.5 109zM558 281q7 14 3 29.5t-18 22.5l-131 68v260q0 36 -38 36q-16 0 -26 -9.5t-10 -26.5v-309l167 -85q9 -4 20 -4q22 0 33 18z" />
<glyph glyph-name="D" unicode="D" horiz-adv-x="811"
d="M719 418q76 26 92 40v-313q0 -56 -116 -93.5t-287 -37.5t-289.5 37.5t-118.5 93.5v313q57 -30 97 -40q131 -43 311 -43q182 0 311 43zM811 615q0 -55 -117 -95t-286 -40t-288.5 40t-119.5 95q0 52 119.5 89.5t288.5 37.5t286 -37.5t117 -89.5z" />
@ -90,7 +90,7 @@ q3 -16 3 -50zM361 224q66 0 113 45.5t47 111.5q0 65 -47 112.5t-113 47.5q-65 0 -112
d="M0 0v700h180v-700h-180zM297 0v700h180v-700h-180zM594 192v508h180v-508h-180z" />
<glyph glyph-name="I" unicode="I" horiz-adv-x="853"
d="M635 582h-439l220 200zM663 209v349l190 -174zM169 558v-349l-191 175zM196 185h439l-219 -199z" />
<glyph glyph-name="J" unicode="J"
<glyph glyph-name="J" unicode="J" horiz-adv-x="500"
/>
<glyph glyph-name="L" unicode="L" horiz-adv-x="817"
d="M0 575q0 67 47 113.5t114 46.5h303v-735h-303q-67 0 -114 47t-47 113v415zM652 735q66 0 113.5 -46.5t47.5 -113.5v-172h-271v332h110zM542 0v324h271v-164q0 -66 -47.5 -113t-113.5 -47h-110z" />
@ -120,7 +120,7 @@ d="M339 727l340 -236v-491h-340h-339v491zM339 255l252 176l-252 174l-252 -174z" />
<glyph glyph-name="X" unicode="X" horiz-adv-x="753"
d="M471 471v-95h-95v-94h-94v94h-94v95h94v94h94v-94h95zM753 94l-94 -94l-149 149q-81 -55 -181 -55q-137 0 -232 97q-97 95 -97 233q0 137 97 232q95 97 232 97q138 0 233 -97q97 -95 97 -232q0 -100 -55 -181zM329 235q79 0 134 55t55 134q0 78 -55 133t-134 55
q-78 0 -133 -55t-55 -133q0 -79 55 -134t133 -55z" />
<glyph glyph-name="Y" unicode="Y"
<glyph glyph-name="Y" unicode="Y" horiz-adv-x="500"
d="M471 471v-95h-283v95h283zM753 94l-94 -94l-149 149q-81 -55 -181 -55q-137 0 -232 97q-97 95 -97 233q0 137 97 232q95 97 232 97q138 0 233 -97q97 -95 97 -232q0 -100 -55 -181zM329 235q79 0 134 55t55 134q0 78 -55 133t-134 55q-78 0 -133 -55t-55 -133
q0 -79 55 -134t133 -55z" />
<glyph glyph-name="Z" unicode="Z" horiz-adv-x="808"
@ -199,11 +199,25 @@ d="M0 0l131 262l-131 262h91l132 -262l-132 -262h-91z" />
<glyph glyph-name="asciitilde" unicode="~" horiz-adv-x="799"
d="M658 363h141q-36 -150 -70 -227q-28 -58 -58 -88q-45 -46 -102 -48h-7q-55 0 -98 40q-34 31 -60 86q-35 72 -71 222q-35 137 -61 194q-9 18 -17.5 30t-12.5 15t-6 3q-3 0 -8 -4t-14.5 -18t-19.5 -35q-28 -62 -53 -170h-141q36 152 70 227q25 57 58 88q41 42 102 49
q57 2 105 -40q33 -31 60 -86q34 -73 70 -222q36 -140 62 -194q9 -18 17.5 -30t12.5 -15.5t5 -3.5q15 0 42 57q30 66 54 170z" />
<glyph glyph-name="agrave" unicode="&#xe0;" horiz-adv-x="753"
d="M752 141q0 -59 -41 -100t-100 -41h-470q-59 0 -100 41t-41 100v470q0 59 41 100t100 41h470q59 0 100 -41t41 -100v-470z" />
<glyph glyph-name="aacute" unicode="&#xe1;"
d="M750 469l-375 -282l-375 282l375 281zM375 94l312 234l63 -47l-375 -281l-375 281l63 47z" />
<glyph glyph-name="acircumflex" unicode="&#xe2;"
d="M47 328q-19 0 -33 14t-14 33t14 33t33 14h656q19 0 33 -14t14 -33t-14 -33t-33 -14h-656z" />
<glyph glyph-name="atilde" unicode="&#xe3;" horiz-adv-x="749"
d="M655 749q39 0 66.5 -27.5t27.5 -66.5v-561q0 -39 -27.5 -66.5t-66.5 -27.5h-561q-39 0 -66.5 27.5t-27.5 66.5v561q0 39 27.5 66.5t66.5 27.5h561zM655 94v561h-561v-561h561zM234 562l187 -188l94 94l94 -94v-234h-469v328z" />
<glyph glyph-name="adieresis" unicode="&#xe4;"
d="M0 750h750v-94v-47v-47h-94v47h-187v-515h140v-94h-468v94h140v515h-187v-47h-94v47v47v94z" />
<glyph glyph-name="aring" unicode="&#xe5;"
d="M656 750q39 0 66.5 -27.5t27.5 -66.5v-562q0 -39 -27.5 -66.5t-66.5 -27.5h-562q-39 0 -66.5 27.5t-27.5 66.5v562q0 39 27.5 66.5t66.5 27.5h562zM94 656v-562h234v562h-234zM656 94v562h-234v-562h234z" />
<glyph glyph-name="ccedilla" unicode="&#xe7;"
d="M656 750q39 0 66.5 -27.5t27.5 -66.5v-562q0 -39 -27.5 -66.5t-66.5 -27.5h-562q-39 0 -66.5 27.5t-27.5 66.5v562q0 39 27.5 66.5t66.5 27.5h562zM656 94v562h-234v-562h234z" />
<glyph glyph-name="fraction" unicode="&#x2044;" horiz-adv-x="761"
d="M380 751q158 0 269.5 -111.5t111.5 -268.5q0 -133 -82.5 -236.5t-209.5 -134.5l-4 491l-176 -490q-126 31 -207.5 134.5t-81.5 235.5q0 157 111.5 268.5t268.5 111.5zM168 488l55 20l-34 94l-56 -20zM410 530v100h-59v-100h59zM593 488l34 94l-55 20l-34 -94z" />
<glyph glyph-name="H.002" horiz-adv-x="803"
d="M0 0v726h187v-726h-187zM308 0v726h187v-726h-187zM616 199v527h187v-527h-187z" />
<glyph glyph-name="H.001"
<glyph glyph-name="H.001" horiz-adv-x="500"
/>
</font>
</defs></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
View File

Binary file not shown.

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
View File

Binary file not shown.

1
platform/commonUI/general/res/sass/_constants.scss
View File

@ -23,6 +23,7 @@ $colorFormRequired: #ffc700;
$colorFormValid: #33cc33;
$colorFormError: #cc0000;
$colorFormInvalid: #ff9900;
$colorGridLines: rgba(#fff, 0.05);
// Ratios

107
platform/commonUI/general/res/sass/_fixed-position.scss Normal file
View File

@ -0,0 +1,107 @@
.t-fixed-position {
&.l-fixed-position {
// @include test(red);
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: auto; height: auto;
.l-grid-holder {
position: relative;
height: 100%; width: 100%;
.l-grid {
// @include test(orange);
position: absolute;
height: 100%; width: 100%;
pointer-events: none;
z-index: 0;
&.l-grid-x {
@include bgTicks($colorGridLines, 'x');
}
&.l-grid-y {
@include bgTicks($colorGridLines, 'y');
}
}
}
}
.l-fixed-position-item {
position: absolute;
border: 1px solid transparent;
&.s-selected {
@include boxShdwLarge();
border-color: $colorKey;
cursor: move;
}
&.s-not-selected {
opacity: 0.8;
}
.l-fixed-position-box,
.l-fixed-position-image,
.l-fixed-position-text {
@include box-sizing(border-box);
height: 100%; width: 100%;
}
.l-fixed-position-box {
}
.l-fixed-position-image {
background-size: cover;
background-repeat: no-repeat;
background-position: left top;
}
.l-fixed-position-text {
@include txtShdwSubtle();
border:1px solid transparent;
font-size: 0.8rem;
$p: $interiorMarginSm;
&.l-static-text {
// overflow: auto;
padding: $p;
}
&.l-telemetry {
.l-elem {
@include absPosDefault($p);
@include box-sizing(border-box);
width: 50%;
&.l-title {
right: auto;
left: $p;
}
&.l-value {
// @include test(blue);
right: $p;
left: auto;
text-align: right;
&.telem-only {
// @include test(red);
left: $p;
width: auto;
}
}
}
}
}
}
.l-fixed-position-item-handle {
$brd: 1px solid $colorKey;
// @include border-radius($controlCr);
background: rgba($colorKey, 0.5);
cursor: crosshair;
border: $brd;
position: absolute;
}
}
.edit-mode .t-fixed-position {
.l-fixed-position-item {
&:not(.s-selected):hover {
border: 1px dotted rgba($colorKey, 0.5);
}
}
}

1
platform/commonUI/general/res/sass/_icons.scss
View File

@ -56,6 +56,7 @@
.object-header .type-icon {
color: $colorAlt1;
margin-right: $interiorMargin;
}
.menu .type-icon,

2
platform/commonUI/general/res/sass/_main.scss
View File

@ -9,11 +9,13 @@
@import "global";
@import "fonts";
@import "user-environ/layout";
@import "fixed-position";
@import "about";
@import "badges";
@import "icons";
@import "lists/tabular";
@import "controls/buttons";
@import "controls/color-palette";
@import "controls/controls";
@import "controls/lists";
@import "controls/menus";

26
platform/commonUI/general/res/sass/_mixins.scss
View File

@ -6,9 +6,13 @@
}
@mixin trans-prop-nice-fade($t: 0.5s) {
@include transition-property(visibility, opacity, background-color);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
@if $t == 0 {
@include transition-property(none);
} @else {
@include transition-property(visibility, opacity, background-color, border-color);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
}
}
@mixin trans-prop-nice-resize-h($t: 0.5s) {
@ -48,13 +52,20 @@
background-size: $d $d;
}
@mixin bgTicks($c: $colorBodyFg) {
$c: $c;
@include background-image(linear-gradient(90deg,
@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
$deg: 90deg;
@if ($repeatDir != 'x') {
$deg: 0deg;
$repeatDir: repeat-y;
} @else {
$repeatDir: repeat-x;
}
@include background-image(linear-gradient($deg,
$c 1px, transparent 1px,
transparent 100%
));
background-repeat: repeat-x;
background-repeat: $repeatDir;
}
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
@ -63,6 +74,7 @@
@include box-sizing(border-box);
// @include box-shadow(rgba(black, 0.3) 0 1px 2px);
@include boxShdwSubtle();
border: none;
border-top: 1px solid lighten($bg, 20%);
color: $fg;
display: inline-block;

55
platform/commonUI/general/res/sass/controls/_color-palette.scss Normal file
View File

@ -0,0 +1,55 @@
.l-color-palette {
$d: 16px;
$colorsPerRow: 10;
$m: 1;
$colorSelectedColor: #fff;
@include box-sizing(border-box);
padding: $interiorMargin !important;
.l-palette-row {
@include clearfix;
line-height: $d;
width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
.l-palette-item {
@include box-sizing(border-box);
@include txtShdwSubtle(0.8);
@include trans-prop-nice-fade(0.25s);
border: 1px solid transparent;
color: $colorSelectedColor;
display: block;
font-family: 'symbolsfont';
float: left;
height: $d; width: $d;
line-height: $d;
margin: 0 ($m * 1px) ($m * 1px) 0;
text-align: center;
vertical-align: middle;
}
.s-palette-item {
&:hover {
@include trans-prop-nice-fade(0);
border-color: $colorSelectedColor !important;
}
}
.l-palette-item-label {
margin-left: $interiorMargin;
}
&.l-option-row {
margin-bottom: $interiorMargin;
.s-palette-item {
border-color: $colorBodyFg;
}
}
}
}

18
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -154,6 +154,15 @@
}
}
.l-composite-control {
vertical-align: middle;
&.l-checkbox {
.composite-control-label {
line-height: 18px;
}
}
}
.control-group {
// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
// @include test();
@ -215,6 +224,7 @@ label.checkbox.custom {
margin-right: $interiorMargin * 4;
padding-left: $d + $interiorMargin;
position: relative;
vertical-align: top;
em {
color: $colorBodyFg;
display: inline-block;
@ -308,6 +318,10 @@ label.checkbox.custom {
}
}
.l-click-area {
// @include test();
}
.type-icon {
margin-right: $interiorMargin;
}
@ -364,10 +378,10 @@ label.checkbox.custom {
.top-bar,
.object-browse-bar {
.object-header {
font-size: 1.2em;
font-size: 1.1em;
span {
display: inline-block;
margin-right: $interiorMargin;
// margin-right: $interiorMargin;
}
}
}

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

@ -1,4 +1,5 @@
.form {
// @include test(orange);
.section-header {
@include border-radius(3px);
background: rgba(white, 0.1);
@ -16,18 +17,16 @@
.form-row {
@include box-sizing(border-box);
@include clearfix;
// background: rgba(#00ff00, 0.1);
border-top: 1px solid $colorInteriorBorder;
// box-sizing: border-box;
margin-top: $interiorMargin;
padding: $interiorMargin;
position: relative;
&:first-child {
border-top: none;
}
.label,
.controls {
// background: rgba(#ffcc00, 0.1);
@include box-sizing(border-box);
@include clearfix;
box-sizing: border-box;
@ -50,9 +49,22 @@
.controls {
float: left;
// padding-left: $interiorMargin;
position: relative;
width: 99% - $formLabelW; // Start with less than 100% for Firefox
.l-composite-control {
display: inline-block;
&.l-checkbox {
// @include test();
// height: $formRowCtrlsH;
line-height: $formRowCtrlsH;
margin-right: 5px;
}
}
.select {
margin-right: $interiorMargin;
}
}
.field-hints {
@ -87,6 +99,23 @@ label.form-control.checkbox {
}
}
.hint {
.hint,
.s-hint {
font-size: 0.9em;
}
.l-result {
// Used in /vista/channel-query.html and evr-query.html as of 2/24/15
display: inline-block;
min-width: 32px; min-height: 32px;
position: relative;
vertical-align: top;
div.s-hint {
@include border-radius($basicCr);
background: rgba($colorFormInvalid, 0.8);
display: block;
color: lighten($colorFormInvalid, 30%);
padding: $interiorMargin;
}
}

2
platform/commonUI/general/res/sass/forms/_filter.scss
View File

@ -20,7 +20,7 @@
}
.icon.ui-symbol {
@include border-radius($controlCr);
display: block;
display: inline-block;
font-size: 1.3em;
height: $formInputH;
line-height: $formInputH;

41
platform/commonUI/general/res/sass/forms/_selects.scss
View File

@ -1,35 +1,26 @@
.form-control.select {
$myH: $formInputH + 1;
@include btnSubtle($colorBodyBg);
margin-right: $interiorMargin;
margin-top: 1px;
padding: 0 25px 0 0;
cursor: pointer;
display: inline-block;
margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
position: relative;
overflow: hidden;
vertical-align: middle;
span.arw {
display: block;
pointer-events: none;
position: absolute;
right: 8%; top: 10%;
}
select {
@include appearance(none);
@include box-sizing(border-box);
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
background: none;
color: $colorBodyFg;
border: none !important;
cursor: pointer;
// height: $myH;
// line-height: $myH;
padding: 3px 5px 4px 5px;
width: 150%;
padding: 4px 25px 2px 5px;
}
select:focus {
outline: none;
&:after {
color: $colorKey;
content:"v";
display: block;
font-family: 'symbolsfont';
pointer-events: none;
position: absolute;
right: $interiorMargin; top: 0;
// z-index: 2;
}
}

3
platform/commonUI/general/res/templates/controls/action-button.html
View File

@ -1,5 +1,4 @@
<a href=""
class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
<a class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
ng-class="{ labeled: parameters.labeled }"
title="{{parameters.action.getMetadata().description}}"
ng-click="parameters.action.perform()">

5
platform/commonUI/general/res/templates/controls/switcher.html
View File

@ -24,10 +24,11 @@
</div>
</div>
<span class="btn"
<!-- CH commented out 2/24/15 - really don't think we need this. Single view is what it is. -->
<!--span class="btn"
ng-if="view.length === 1">
<span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
<span>{{ngModel.selected.name}}</span>
</span>
</span-->
</span>

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

@ -32,22 +32,22 @@
"options": [
{
"name": "Box",
"glyph": "\u2610",
"glyph": "\u00E0",
"key": "fixed.box"
},
{
"name": "Line",
"glyph": "-",
"glyph": "\u00E2",
"key": "fixed.line"
},
{
"name": "Text",
"glyph": "\u1D1B",
"glyph": "\u00E4",
"key": "fixed.text"
},
{
"name": "Image",
"glyph": "\u2353",
"glyph": "\u00E3",
"key": "fixed.image"
}
]
@ -58,7 +58,7 @@
"items": [
{
"method": "order",
"glyph": "o",
"glyph": "\u00E1",
"control": "menu-button",
"options": [
{
@ -85,23 +85,23 @@
},
{
"property": "fill",
"glyph": "X",
"glyph": "\u00E0",
"control": "color"
},
{
"property": "stroke",
"glyph": "-",
"glyph": "\u00E2",
"control": "color"
},
{
"property": "color",
"glyph": "\u1D1B",
"glyph": "\u00E4",
"mandatory": true,
"control": "color"
},
{
"property": "url",
"glyph": "\u2353",
"glyph": "\u00E3",
"control": "dialog-button",
"title": "Image Properties",
"dialog": {
@ -123,13 +123,13 @@
},
{
"method": "showTitle",
"glyph": "+",
"glyph": "\u00E7",
"control": "button",
"description": "Show telemetry element title."
},
{
"method": "hideTitle",
"glyph": "X",
"glyph": "\u00E5",
"control": "button",
"description": "Hide telemetry element title."
}

6
platform/features/layout/res/templates/elements/box.html
View File

@ -1,3 +1,5 @@
<div ng-style="{ background: ngModel.fill(), border: '1px ' + ngModel.stroke() + ' solid' }"
style="width: 100%; height: 100%;">
<div
class="l-fixed-position-box"
ng-style="{ background: ngModel.fill(), border: '1px ' + ngModel.stroke() + ' solid' }"
>
</div>

6
platform/features/layout/res/templates/elements/image.html
View File

@ -1,3 +1,5 @@
<div ng-style="{ 'background-image': 'url(' + ngModel.element.url + ')', border: '1px solid ' + ngModel.stroke() }"
style="width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center;">
<div
ng-style="{ 'background-image': 'url(' + ngModel.element.url + ')', border: '1px solid ' + ngModel.stroke() }"
class="l-fixed-position-image"
>
</div>

17
platform/features/layout/res/templates/elements/telemetry.html
View File

@ -1,10 +1,17 @@
<div ng-style="{ background: ngModel.fill(), border: '1px solid ' + ngModel.stroke(), color: ngModel.color() }"
style="width: 100%; height: 100%;">
<div style="position: absolute; left: 0px; top: 0px; bottom: 0px; width: 50%; overflow: hidden;"
ng-show="ngModel.element.titled">
<div
class="l-fixed-position-text l-telemetry"
ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }"
>
<div
class="l-elem l-title"
ng-show="ngModel.element.titled"
>
{{ngModel.name}}
</div>
<div style="position: absolute; right: 0px; top: 0px; bottom: 0px; width: 50%; overflow: hidden;">
<div
class="l-elem l-value"
ng-class="{ 'telem-only': !ngModel.element.titled }"
>
{{ngModel.value}}
</div>
</div>

6
platform/features/layout/res/templates/elements/text.html
View File

@ -1,4 +1,6 @@
<div ng-style="{ background: ngModel.fill(), border: '1px solid ' + ngModel.stroke(), color: ngModel.color() }"
style="width: 100%; height: 100%; overflow: hidden;">
<div
class="l-fixed-position-text l-static-text"
ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }"
>
{{ngModel.element.text}}
</div>

52
platform/features/layout/res/templates/fixed.html
View File

@ -1,26 +1,42 @@
<div style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;"
<div class="t-fixed-position l-fixed-position"
ng-controller="FixedController as controller"
mct-resize="controller.setBounds(bounds)">
<!-- Background grid -->
<span ng-click="controller.clearSelection()">
<div ng-repeat="cell in controller.getCellStyles()"
style="position: absolute; border: 1px gray solid; background: black;"
ng-style="cell">
<div class="l-grid-holder" ng-click="controller.clearSelection()">
<div class="l-grid l-grid-x"
ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></div>
<div class="l-grid l-grid-y"
ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></div>
</div>
<!-- Fixed position elements -->
<div ng-repeat="element in controller.getElements()"
class="l-fixed-position-item"
ng-class="{ 's-not-selected': controller.selected() && !controller.selected(element) }"
ng-style="element.style"
ng-click="controller.select(element)">
<mct-include key="element.template"
parameters="{ gridSize: controller.getGridSize() }"
ng-model="element">
</mct-include>
</div>
<!-- Selection highlight, handles -->
<span ng-if="controller.selected()">
<div class="l-fixed-position-item s-selected"
mct-drag-down="controller.moveHandle().startDrag(controller.selected())"
mct-drag="controller.moveHandle().continueDrag(delta)"
mct-drag-up="controller.moveHandle().endDrag()"
ng-style="controller.selected().style">
</div>
<div ng-repeat="handle in controller.handles()"
class="l-fixed-position-item-handle"
ng-style="handle.style()"
mct-drag-down="handle.startDrag()"
mct-drag="handle.continueDrag(delta)"
mct-drag-up="handle.endDrag()">
</div>
</span>
<!-- Fixed position elements -->
<mct-include ng-repeat="element in controller.getElements()"
style="position: absolute;"
key="element.template"
parameters="{ gridSize: controller.getGridSize() }"
ng-class="{ test: controller.selected(element) }"
ng-style="element.style"
ng-click="controller.select(element)"
ng-model="element"
mct-drag-down="controller.startDrag(element); controller.select(element)"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</mct-include>
</div>

118
platform/features/layout/src/FixedController.js
View File

@ -1,8 +1,8 @@
/*global define*/
define(
['./LayoutDrag', './FixedProxy', './elements/ElementProxies'],
function (LayoutDrag, FixedProxy, ElementProxies) {
['./FixedProxy', './elements/ElementProxies', './FixedDragHandle'],
function (FixedProxy, ElementProxies, FixedDragHandle) {
"use strict";
var DEFAULT_DIMENSIONS = [ 2, 1 ],
@ -27,6 +27,8 @@ define(
names = {}, // Cache names by ID
values = {}, // Cache values by ID
elementProxiesById = {},
handles = [],
moveHandle,
selection;
// Refresh cell styles (e.g. because grid extent changed)
@ -64,6 +66,40 @@ define(
};
}
// Update the style for a selected element
function updateSelectionStyle() {
var element = selection && selection.get();
if (element) {
element.style = convertPosition(element);
}
}
// Generate a specific drag handle
function generateDragHandle(elementHandle) {
return new FixedDragHandle(
elementHandle,
gridSize,
updateSelectionStyle,
$scope.commit
);
}
// Generate drag handles for an element
function generateDragHandles(element) {
return element.handles().map(generateDragHandle);
}
// Select an element
function select(element) {
if (selection) {
// Update selection...
selection.select(element);
// ...as well as move, resize handles
moveHandle = generateDragHandle(element);
handles = generateDragHandles(element);
}
}
// Update the displayed value for this object
function updateValue(telemetryObject) {
var id = telemetryObject && telemetryObject.getId();
@ -121,7 +157,7 @@ define(
if (selection) {
selection.deselect();
if (index > -1) {
selection.select(elementProxies[index]);
select(elementProxies[index]);
}
}
@ -183,9 +219,7 @@ define(
// Refresh displayed elements
refreshElements();
// Select the newly-added element
if (selection) {
selection.select(elementProxies[elementProxies.length - 1]);
}
select(elementProxies[elementProxies.length - 1]);
// Mark change as persistable
if ($scope.commit) {
$scope.commit("Dropped an element.");
@ -201,7 +235,7 @@ define(
y: Math.floor(position.y / gridSize[1]),
id: id,
stroke: "transparent",
color: "#717171",
color: "#cccccc",
titled: true,
width: DEFAULT_DIMENSIONS[0],
height: DEFAULT_DIMENSIONS[1]
@ -274,82 +308,42 @@ define(
return elementProxies;
},
/**
* Check if the element is currently selected.
* Check if the element is currently selected, or (if no
* argument is supplied) get the currently selected element.
* @returns {boolean} true if selected
*/
selected: function (element) {
return selection && selection.selected(element);
return selection && ((arguments.length > 0) ?
selection.selected(element) : selection.get());
},
/**
* Set the active user selection in this view.
* @param element the element to select
*/
select: function (element) {
if (selection) {
selection.select(element);
}
},
select: select,
/**
* Clear the current user selection.
*/
clearSelection: function () {
if (selection) {
selection.deselect();
handles = [];
moveHandle = undefined;
}
},
/**
* Start a drag gesture to move/resize a frame.
*
* The provided position and dimensions factors will determine
* whether this is a move or a resize, and what type it
* will be. For instance, a position factor of [1, 1]
* will move a frame along with the mouse as the drag
* proceeds, while a dimension factor of [0, 0] will leave
* dimensions unchanged. Combining these in different
* ways results in different handles; a position factor of
* [1, 0] and a dimensions factor of [-1, 0] will implement
* a left-edge resize, as the horizontal position will move
* with the mouse while the horizontal dimensions shrink in
* kind (and vertical properties remain unmodified.)
*
* @param element the raw (undecorated) element to drag
* Get drag handles.
* @returns {Array} drag handles for the current selection
*/
startDrag: function (element) {
// Only allow dragging in edit mode
if ($scope.domainObject &&
$scope.domainObject.hasCapability('editor')) {
dragging = {
element: element,
x: element.x(),
y: element.y()
};
}
handles: function () {
return handles;
},
/**
* Continue an active drag gesture.
* @param {number[]} delta the offset, in pixels,
* of the current pointer position, relative
* to its position when the drag started
* Get the handle to handle dragging to reposition an element.
* @returns {FixedDragHandle} the drag handle
*/
continueDrag: function (delta) {
if (dragging) {
// Update x/y values
dragging.element.x(dragging.x + Math.round(delta[0] / gridSize[0]));
dragging.element.y(dragging.y + Math.round(delta[1] / gridSize[1]));
// Update display position
dragging.element.style = convertPosition(dragging.element);
}
},
/**
* End the active drag gesture. This will update the
* view configuration.
*/
endDrag: function () {
// Mark this object as dirty to encourage persistence
if (dragging && $scope.commit) {
dragging = undefined;
$scope.commit("Moved element.");
}
moveHandle: function () {
return moveHandle;
}
};

96
platform/features/layout/src/FixedDragHandle.js Normal file
View File

@ -0,0 +1,96 @@
/*global define*/
define(
[],
function () {
'use strict';
// Drag handle dimensions
var DRAG_HANDLE_SIZE = [ 6, 6 ];
/**
* Template-displayable drag handle for an element in fixed
* position mode.
* @constructor
*/
function FixedDragHandle(elementHandle, gridSize, update, commit) {
var self = {},
dragging;
// Generate ng-style-appropriate style for positioning
function getStyle() {
// Adjust from grid to pixel coordinates
var x = elementHandle.x() * gridSize[0],
y = elementHandle.y() * gridSize[1];
// Convert to a CSS style centered on that point
return {
left: (x - DRAG_HANDLE_SIZE[0] / 2) + 'px',
top: (y - DRAG_HANDLE_SIZE[1] / 2) + 'px',
width: DRAG_HANDLE_SIZE[0] + 'px',
height: DRAG_HANDLE_SIZE[1] + 'px'
};
}
// Begin a drag gesture
function startDrag() {
// Cache initial x/y positions
dragging = { x: elementHandle.x(), y: elementHandle.y() };
}
// Reposition during drag
function continueDrag(delta) {
if (dragging) {
// Update x/y positions (snapping to grid)
elementHandle.x(
dragging.x + Math.round(delta[0] / gridSize[0])
);
elementHandle.y(
dragging.y + Math.round(delta[1] / gridSize[1])
);
// Invoke update callback
if (update) {
update();
}
}
}
// Conclude a drag gesture
function endDrag() {
// Clear cached state
dragging = undefined;
// Mark change as complete
if (commit) {
commit("Dragged handle.");
}
}
return {
/**
* Get a CSS style to position this drag handle.
* @returns CSS style object (for `ng-style`)
*/
style: getStyle,
/**
* Start a drag gesture. This should be called when a drag
* begins to track initial state.
*/
startDrag: startDrag,
/**
* Continue a drag gesture; update x/y positions.
* @param {number[]} delta x/y pixel difference since drag
* started
*/
continueDrag: continueDrag,
/**
* End a drag gesture. This should be callled when a drag
* concludes to trigger commit of changes.
*/
endDrag: endDrag
};
}
return FixedDragHandle;
}
);

16
platform/features/layout/src/elements/AccessorMutator.js
View File

@ -8,14 +8,26 @@ define(
/**
* Utility function for creating getter-setter functions,
* since these are frequently useful for element proxies.
*
* An optional third argument may be supplied in order to
* constrain or modify arguments when using as a setter;
* this argument is a function which takes two arguments
* (the current value for the property, and the requested
* new value.) This is useful when values need to be kept
* in certain ranges; specifically, to keep x/y positions
* non-negative in a fixed position view.
*
* @constructor
* @param {Object} object the object to get/set values upon
* @param {string} key the property to get/set
* @param {function} [updater] function used to process updates
*/
function AccessorMutator(object, key) {
function AccessorMutator(object, key, updater) {
return function (value) {
if (arguments.length > 0) {
object[key] = value;
object[key] = updater ?
updater(value, object[key]) :
value;
}
return object[key];
};

2
platform/features/layout/src/elements/ElementFactory.js
View File

@ -24,7 +24,7 @@ define(
"fixed.text": {
fill: "transparent",
stroke: "transparent",
color: "#717171"
color: "#cccccc"
}
},
DIALOGS = {

22
platform/features/layout/src/elements/ElementProxy.js
View File

@ -1,8 +1,8 @@
/*global define*/
define(
['./AccessorMutator'],
function (AccessorMutator) {
['./AccessorMutator', './ResizeHandle'],
function (AccessorMutator, ResizeHandle) {
"use strict";
// Index deltas for changes in order
@ -13,6 +13,11 @@ define(
bottom: Number.NEGATIVE_INFINITY
};
// Ensure a value is non-negative (for x/y setters)
function clamp(value) {
return Math.max(value, 0);
}
/**
* Abstract superclass for other classes which provide useful
* interfaces upon an elements in a fixed position view.
@ -29,6 +34,8 @@ define(
* @param {Array} elements the full array of elements
*/
function ElementProxy(element, index, elements) {
var handles = [ new ResizeHandle(element, 1, 1) ];
return {
/**
* The element as stored in the view configuration.
@ -40,14 +47,14 @@ define(
* @param {number} [x] the new x position (if setting)
* @returns {number} the x position
*/
x: new AccessorMutator(element, 'x'),
x: new AccessorMutator(element, 'x', clamp),
/**
* Get and/or set the y position of this element.
* Units are in fixed position grid space.
* @param {number} [y] the new y position (if setting)
* @returns {number} the y position
*/
y: new AccessorMutator(element, 'y'),
y: new AccessorMutator(element, 'y', clamp),
/**
* Get and/or set the stroke color of this element.
* @param {string} [stroke] the new stroke color (if setting)
@ -97,6 +104,13 @@ define(
if (elements[index] === element) {
elements.splice(index, 1);
}
},
/**
* Get handles to control specific features of this element,
* e.g. corner size.
*/
handles: function () {
return handles;
}
};
}

61
platform/features/layout/src/elements/LineHandle.js Normal file
View File

@ -0,0 +1,61 @@
/*global define*/
define(
[],
function () {
'use strict';
/**
* Handle for changing x/y position of a line's end point.
* This is used to support drag handles for line elements
* in a fixed position view. Field names for opposite ends
* are provided to avoid zero-length lines.
* @constructor
* @param element the line element
* @param {string} xProperty field which stores x position
* @param {string} yProperty field which stores x position
* @param {string} xOther field which stores x of other end
* @param {string} yOther field which stores y of other end
*/
function LineHandle(element, xProperty, yProperty, xOther, yOther) {
return {
/**
* Get/set the x position of the lower-right corner
* of the handle-controlled element, changing size
* as necessary.
*/
x: function (value) {
if (arguments.length > 0) {
// Ensure we stay in view
value = Math.max(value, 0);
// Make sure end points will still be different
if (element[yOther] !== element[yProperty] ||
element[xOther] !== value) {
element[xProperty] = value;
}
}
return element[xProperty];
},
/**
* Get/set the y position of the lower-right corner
* of the handle-controlled element, changing size
* as necessary.
*/
y: function (value) {
if (arguments.length > 0) {
// Ensure we stay in view
value = Math.max(value, 0);
// Make sure end points will still be different
if (element[xOther] !== element[xProperty] ||
element[yOther] !== value) {
element[yProperty] = value;
}
}
return element[yProperty];
}
};
}
return LineHandle;
}
);

23
platform/features/layout/src/elements/LineProxy.js
View File

@ -1,8 +1,8 @@
/*global define*/
define(
['./ElementProxy'],
function (ElementProxy) {
['./ElementProxy', './LineHandle'],
function (ElementProxy, LineHandle) {
'use strict';
/**
@ -15,7 +15,11 @@ define(
* @param {Array} elements the full array of elements
*/
function LineProxy(element, index, elements) {
var proxy = new ElementProxy(element, index, elements);
var proxy = new ElementProxy(element, index, elements),
handles = [
new LineHandle(element, 'x', 'y', 'x2', 'y2'),
new LineHandle(element, 'x2', 'y2', 'x', 'y')
];
/**
* Get the top-left x coordinate, in grid space, of
@ -24,7 +28,7 @@ define(
*/
proxy.x = function (v) {
var x = Math.min(element.x, element.x2),
delta = v - x;
delta = Math.max(v, 0) - x;
if (arguments.length > 0 && delta) {
element.x += delta;
element.x2 += delta;
@ -39,7 +43,7 @@ define(
*/
proxy.y = function (v) {
var y = Math.min(element.y, element.y2),
delta = v - y;
delta = Math.max(v, 0) - y;
if (arguments.length > 0 && delta) {
element.y += delta;
element.y2 += delta;
@ -105,6 +109,15 @@ define(
return element.y2 - proxy.y();
};
/**
* Get element handles for changing the position of end
* points of this line.
* @returns {LineHandle[]} line handles for both end points
*/
proxy.handles = function () {
return handles;
};
return proxy;
}

53
platform/features/layout/src/elements/ResizeHandle.js Normal file
View File

@ -0,0 +1,53 @@
/*global define*/
define(
[],
function () {
'use strict';
/**
* Handle for changing width/height properties of an element.
* This is used to support drag handles for different
* element types in a fixed position view.
* @constructor
*/
function ResizeHandle(element, minWidth, minHeight) {
// Ensure reasonable defaults
minWidth = minWidth || 0;
minHeight = minHeight || 0;
return {
/**
* Get/set the x position of the lower-right corner
* of the handle-controlled element, changing size
* as necessary.
*/
x: function (value) {
if (arguments.length > 0) {
element.width = Math.max(
minWidth,
value - element.x
);
}
return element.x + element.width;
},
/**
* Get/set the y position of the lower-right corner
* of the handle-controlled element, changing size
* as necessary.
*/
y: function (value) {
if (arguments.length > 0) {
element.height = Math.max(
minHeight,
value - element.y
);
}
return element.y + element.height;
}
};
}
return ResizeHandle;
}
);

77
platform/features/layout/test/FixedControllerSpec.js
View File

@ -170,6 +170,20 @@ define(
.toHaveBeenCalledWith(elements[1]);
});
it("allows selection retrieval", function () {
// selected with no arguments should give the current
// selection
var elements;
testModel.modified = 1;
findWatch("model.modified")(testModel.modified);
elements = controller.getElements();
controller.select(elements[1]);
mockScope.selection.get.andReturn(elements[1]);
expect(controller.selected()).toEqual(elements[1]);
});
it("allows selections to be cleared", function () {
var elements;
@ -303,6 +317,69 @@ define(
jasmine.any(Object)
);
});
it("exposes drag handles", function () {
var handles;
// Select something so that drag handles are expected
testModel.modified = 1;
findWatch("model.modified")(testModel.modified);
controller.select(controller.getElements()[1]);
// Should have a non-empty array of handles
handles = controller.handles();
expect(handles).toEqual(jasmine.any(Array));
expect(handles.length).not.toEqual(0);
// And they should have start/continue/end drag methods
handles.forEach(function (handle) {
expect(handle.startDrag).toEqual(jasmine.any(Function));
expect(handle.continueDrag).toEqual(jasmine.any(Function));
expect(handle.endDrag).toEqual(jasmine.any(Function));
});
});
it("exposes a move handle", function () {
var handle;
// Select something so that drag handles are expected
testModel.modified = 1;
findWatch("model.modified")(testModel.modified);
controller.select(controller.getElements()[1]);
// Should have a move handle
handle = controller.moveHandle();
// And it should have start/continue/end drag methods
expect(handle.startDrag).toEqual(jasmine.any(Function));
expect(handle.continueDrag).toEqual(jasmine.any(Function));
expect(handle.endDrag).toEqual(jasmine.any(Function));
});
it("updates selection style during drag", function () {
var oldStyle;
// Select something so that drag handles are expected
testModel.modified = 1;
findWatch("model.modified")(testModel.modified);
controller.select(controller.getElements()[1]);
mockScope.selection.get.andReturn(controller.getElements()[1]);
// Get style
oldStyle = controller.selected().style;
// Start a drag gesture
controller.moveHandle().startDrag();
// Haven't moved yet; style shouldn't have updated yet
expect(controller.selected().style).toEqual(oldStyle);
// Drag a little
controller.moveHandle().continueDrag([ 1000, 100 ]);
// Style should have been updated
expect(controller.selected().style).not.toEqual(oldStyle);
});
});
}
);

68
platform/features/layout/test/FixedDragHandleSpec.js Normal file
View File

@ -0,0 +1,68 @@
/*global define,describe,it,expect,beforeEach,jasmine,xit*/
define(
['../src/FixedDragHandle'],
function (FixedDragHandle) {
"use strict";
var TEST_GRID_SIZE = [ 13, 33 ];
describe("A fixed position drag handle", function () {
var mockElementHandle,
mockUpdate,
mockCommit,
handle;
beforeEach(function () {
mockElementHandle = jasmine.createSpyObj(
'elementHandle',
[ 'x', 'y' ]
);
mockUpdate = jasmine.createSpy('update');
mockCommit = jasmine.createSpy('commit');
mockElementHandle.x.andReturn(6);
mockElementHandle.y.andReturn(8);
handle = new FixedDragHandle(
mockElementHandle,
TEST_GRID_SIZE,
mockUpdate,
mockCommit
);
});
it("provides a style for positioning", function () {
var style = handle.style();
// 6 grid coords * 13 pixels - 3 pixels for centering
expect(style.left).toEqual('75px');
// 8 grid coords * 33 pixels - 3 pixels for centering
expect(style.top).toEqual('261px');
});
it("allows handles to be dragged", function () {
handle.startDrag();
handle.continueDrag([ 16, 8 ]);
// Should update x/y, snapped to grid
expect(mockElementHandle.x).toHaveBeenCalledWith(7);
expect(mockElementHandle.y).toHaveBeenCalledWith(8);
handle.continueDrag([ -16, -35 ]);
// Should have interpreted relative to initial state
expect(mockElementHandle.x).toHaveBeenCalledWith(5);
expect(mockElementHandle.y).toHaveBeenCalledWith(7);
// Should have called update once per continueDrag
expect(mockUpdate.calls.length).toEqual(2);
// Finally, ending drag should commit
expect(mockCommit).not.toHaveBeenCalled();
handle.endDrag();
expect(mockCommit).toHaveBeenCalled();
});
});
}
);

7
platform/features/layout/test/elements/ElementProxySpec.js
View File

@ -47,6 +47,13 @@ define(
proxy.order("top");
expect(testElements).toEqual([{}, {}, {}, testElement]);
});
it("ensures x/y values are non-negative", function () {
proxy.x(-1);
proxy.y(-400);
expect(proxy.x()).toEqual(0);
expect(proxy.y()).toEqual(0);
});
});
}
);

54
platform/features/layout/test/elements/LineHandleSpec.js Normal file
View File

@ -0,0 +1,54 @@
/*global define,describe,it,expect,beforeEach,jasmine,xit*/
define(
['../../src/elements/LineHandle'],
function (LineHandle) {
"use strict";
describe("A fixed position drag handle", function () {
var testElement,
handle;
beforeEach(function () {
testElement = {
x: 3,
y: 42,
x2: 8,
y2: 11
};
handle = new LineHandle(testElement, 'x', 'y', 'x2', 'y2');
});
it("provides x/y grid coordinates for its corner", function () {
expect(handle.x()).toEqual(3);
expect(handle.y()).toEqual(42);
});
it("changes x and y positions", function () {
handle.x(30);
expect(testElement.x).toEqual(30);
handle.y(40);
expect(testElement.y).toEqual(40);
});
it("disallows values less than zero", function () {
handle.x(-1);
handle.y(-400);
expect(testElement.x).toEqual(0);
expect(testElement.y).toEqual(0);
});
it("ensures that end points remain different", function () {
handle.x(testElement.x2);
handle.y(testElement.y2);
// First change should have been fine, because y was different
expect(testElement.x).toEqual(testElement.x2);
// Second change should have been rejected
expect(testElement.y).not.toEqual(testElement.y2);
});
});
}
);

4
platform/features/layout/test/elements/LineProxySpec.js
View File

@ -67,6 +67,10 @@ define(
expect(proxy.y2()).toEqual(0);
});
it("provides handles for both ends", function () {
expect(new LineProxy(diagonal).handles().length).toEqual(2);
});
});
}
);

59
platform/features/layout/test/elements/ResizeHandleSpec.js Normal file
View File

@ -0,0 +1,59 @@
/*global define,describe,it,expect,beforeEach,jasmine,xit*/
define(
['../../src/elements/ResizeHandle'],
function (ResizeHandle) {
"use strict";
var TEST_MIN_WIDTH = 4, TEST_MIN_HEIGHT = 2;
describe("A fixed position drag handle", function () {
var testElement,
handle;
beforeEach(function () {
testElement = {
x: 3,
y: 42,
width: 30,
height: 36
};
handle = new ResizeHandle(
testElement,
TEST_MIN_WIDTH,
TEST_MIN_HEIGHT
);
});
it("provides x/y grid coordinates for lower-right corner", function () {
expect(handle.x()).toEqual(33);
expect(handle.y()).toEqual(78);
});
it("changes width of an element", function () {
handle.x(30);
// Should change width, not x
expect(testElement.x).toEqual(3);
expect(testElement.width).toEqual(27);
});
it("changes height of an element", function () {
handle.y(60);
// Should change height, not y
expect(testElement.y).toEqual(42);
expect(testElement.height).toEqual(18);
});
it("enforces minimum width/height", function () {
handle.x(testElement.x);
handle.y(testElement.y);
expect(testElement.x).toEqual(3);
expect(testElement.y).toEqual(42);
expect(testElement.width).toEqual(TEST_MIN_WIDTH);
expect(testElement.height).toEqual(TEST_MIN_HEIGHT);
});
});
}
);

2
platform/features/layout/test/suite.json
View File

@ -1,5 +1,6 @@
[
"FixedController",
"FixedDragHandle",
"FixedProxy",
"LayoutController",
"LayoutDrag",
@ -9,6 +10,7 @@
"elements/ElementProxies",
"elements/ElementProxy",
"elements/LineProxy",
"elements/ResizeHandle",
"elements/TelemetryProxy",
"elements/TextProxy"
]

3
platform/forms/res/templates/controls/button.html
View File

@ -1,5 +1,4 @@
<a href=""
class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
<a class="t-btn l-btn s-btn s-icon-btn s-very-subtle xxx"
ng-class="{ labeled: structure.text }"
ng-click="structure.click()">
<span class="ui-symbol icon">

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

@ -3,5 +3,5 @@
name="mctControl"
ng-model="ngModel[field]"
ng-disabled="ngDisabled">
<em>&nbsp;</em>
<em></em>
</label>

53
platform/forms/res/templates/controls/color.html
View File

@ -1,36 +1,45 @@
<div class="s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke"
ng-controller="ClickAwayController as toggle">
<div
class="t-btn l-btn s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke t-color-palette"
ng-controller="ClickAwayController as toggle"
>
<span ng-click="toggle.toggle()">
<span class="ui-symbol icon">{{structure.glyph}}</span>
<span class="title-label" ng-if="structure.text">
{{structure.text}}
</span>
<span class='ui-symbol icon invoke-menu'
ng-if="!structure.text">
v
</span>
<span class='ui-symbol icon invoke-menu' ng-if="!structure.text">v</span>
</span>
<div class="menu dropdown"
ng-controller="ColorController as colors"
ng-show="toggle.isActive()">
<div style="width: 12em; display: block;" ng-if="!structure.mandatory">
<div style="width: 1em; height: 1em; border: 1px gray solid; display: inline-block;"
ng-click="ngModel[field] = 'transparent'">
{{ngModel[field] === 'transparent' ? 'x' : '' }}
<div
class="menu dropdown l-color-palette"
ng-controller="ColorController as colors"
ng-show="toggle.isActive()"
>
<div
class="l-palette-row l-option-row"
ng-if="!structure.mandatory"
>
<div
class="l-palette-item s-palette-item"
ng-click="ngModel[field] = 'transparent'"
>
{{ngModel[field] === 'transparent' ? '2' : '' }}
</div>
None
<span class="l-palette-item-label">None</span>
</div>
<div style="width: 12em; display: block;"
ng-repeat="group in colors.groups()">
<div ng-repeat="color in group"
style="width: 1em; height: 1em; border: 1px gray solid; display: inline-block;"
ng-style="{ background: color }"
ng-click="ngModel[field] = color">
{{ngModel[field] === color ? 'x' : '' }}
<div
class="l-palette-row"
ng-repeat="group in colors.groups()"
>
<div
class="l-palette-item s-palette-item"
ng-repeat="color in group"
ng-style="{ background: color }"
ng-click="ngModel[field] = color"
>
{{ngModel[field] === color ? '2' : '' }}
</div>
</div>
</div>
</div>

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

@ -1,15 +1,17 @@
<span ng-controller="CompositeController as compositeCtrl">
<ng-form name="mctFormItem" ng-repeat="item in structure.items">
<mct-control key="item.control"
ng-model="ngModel[field]"
ng-required="ngRequired || compositeCtrl.isNonEmpty(ngModel[field])"
ng-pattern="ngPattern"
options="item.options"
structure="row"
field="$index">
</mct-control>
<span class="composite-control-label">
{{item.name}}
</span>
<div class="l-composite-control l-{{item.control}}">
<mct-control key="item.control"
ng-model="ngModel[field]"
ng-required="ngRequired || compositeCtrl.isNonEmpty(ngModel[field])"
ng-pattern="ngPattern"
options="item.options"
structure="row"
field="$index">
</mct-control>
<span class="composite-control-label">
{{item.name}}
</span>
</div>
</ng-form>
</span>
</span>

8
platform/forms/res/templates/controls/menu-button.html
View File

@ -1,7 +1,7 @@
<div class="s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke"
<div class="t-btn l-btn s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke"
ng-controller="ClickAwayController as toggle">
<span ng-click="toggle.toggle()">
<span class="l-click-area" ng-click="toggle.toggle()">
<span class="ui-symbol icon">{{structure.glyph}}</span>
<span class="title-label" ng-if="structure.text">
{{structure.text}}
@ -14,8 +14,8 @@
<div class="menu dropdown" ng-show="toggle.isActive()">
<ul>
<li ng-repeat="option in structure.options">
<a href="" ng-click="structure.click(option.key); toggle.setState(false)">
<li ng-click="structure.click(option.key); toggle.setState(false)" ng-repeat="option in structure.options">
<a href="">
<span class="ui-symbol type-icon icon">
{{option.glyph}}
</span>

17
platform/forms/res/templates/controls/select.html
View File

@ -1,8 +1,9 @@
<select class='form-control input select'
ng-model="ngModel[field]"
ng-options="opt.value as opt.name for opt in options"
ng-required="ngRequired"
name="mctControl">
<option value="" ng-if="!ngModel[field]">- Select One -</option>
<span class='ui-symbol arw colorKey'>v</span>
</select>
<div class='form-control select'>
<select
ng-model="ngModel[field]"
ng-options="opt.value as opt.name for opt in options"
ng-required="ngRequired"
name="mctControl">
<option value="" ng-if="!ngModel[field]">- Select One -</option>
</select>
</div>

59
platform/forms/res/templates/toolbar.html
View File

@ -1,34 +1,29 @@
<form name="tool-bar btn-bar contents" novalidate>
<div class="form">
<span ng-repeat="section in structure.sections"
class="control-group coordinates"
ng-if="!section.hidden"
title="{{section.description}}">
<ng-form ng-repeat="item in section.items"
ng-class="{ 'input-labeled': item.name }"
ng-hide="item.hidden"
class="inline"
title="{{item.description}}"
name="mctFormInner">
<label ng-if="item.name">
{{item.name}}:
</label>
<mct-control key="item.control"
ng-class="{ disabled: item.disabled }"
ng-model="ngModel"
ng-required="item.required"
ng-pattern="getRegExp(item.pattern)"
options="item.options"
structure="item"
field="item.key">
</mct-control>
</ng-form>
</span>
</div>
<form novalidate>
<div class="tool-bar btn-bar contents abs">
<span ng-repeat="section in structure.sections"
class="control-group"
ng-if="!section.hidden"
title="{{section.description}}">
<ng-form ng-repeat="item in section.items"
ng-class="{ 'input-labeled': item.name }"
ng-hide="item.hidden"
class="inline"
title="{{item.description}}"
name="mctFormInner">
<label ng-if="item.name">
{{item.name}}:
</label>
<mct-control key="item.control"
ng-class="{ disabled: item.disabled }"
ng-model="ngModel"
ng-required="item.required"
ng-pattern="getRegExp(item.pattern)"
options="item.options"
structure="item"
field="item.key">
</mct-control>
</ng-form>
</span>
</div>
</form>