ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-23 01:18:57 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Plot limits and out-of-bounds indicators

Browse Source 
WTD-1172
Markup and CSS for plots;
Example ng-class added to plot.html for legend items;
Markup added to plot.html for OOB indicators;
This commit is contained in:
Charles Hacskaylo
2015-05-06 10:21:29 -07:00
parent d75c873831
commit 39c8f0ab00
12 changed files with 869 additions and 738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,7 @@
/* line 3, ../sass/forms/_elems.scss */ /* line 3, ../sass/forms/_elems.scss */
.form .section-header { .form .section-header {
-webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
font-size: 0.8em; font-size: 0.8em;
@ -17,8 +15,8 @@
position: relative; } position: relative; }
/* line 17, ../sass/forms/_elems.scss */ /* line 17, ../sass/forms/_elems.scss */
.form .form-row { .form .form-row {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
*zoom: 1; *zoom: 1;
@ -29,11 +27,11 @@
/* line 24, ../sass/forms/_elems.scss */ /* line 24, ../sass/forms/_elems.scss */
.form .form-row.first { .form .form-row.first {
border-top: none; } border-top: none; }
/* line 29, ../sass/forms/_elems.scss */ /* line 28, ../sass/forms/_elems.scss */
.form .form-row .label, .form .form-row .label,
.form .form-row .controls { .form .form-row .controls {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
*zoom: 1; *zoom: 1;
@ -83,13 +81,11 @@
color: #666666; } color: #666666; }
/* line 95, ../sass/forms/_elems.scss */ /* line 95, ../sass/forms/_elems.scss */
.form .form-row .selector-list { .form .form-row .selector-list {
-webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
padding: 5px; padding: 5px;
@ -110,7 +106,7 @@ label.form-control.checkbox input {
margin-right: 5px; margin-right: 5px;
vertical-align: top; } vertical-align: top; }
/* line 127, ../sass/forms/_elems.scss */ /* line 126, ../sass/forms/_elems.scss */
.hint, .hint,
.s-hint { .s-hint {
font-size: 0.9em; } font-size: 0.9em; }
@ -124,10 +120,8 @@ label.form-control.checkbox input {
vertical-align: top; } vertical-align: top; }
/* line 138, ../sass/forms/_elems.scss */ /* line 138, ../sass/forms/_elems.scss */
.l-result div.s-hint { .l-result div.s-hint {
-webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
background: rgba(255, 153, 0, 0.8); background: rgba(255, 153, 0, 0.8);
display: block; display: block;
@ -136,19 +130,16 @@ label.form-control.checkbox input {
/* line 1, ../sass/forms/_textarea.scss */ /* line 1, ../sass/forms/_textarea.scss */
.edit-main textarea { .edit-main textarea {
-webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; -webkit-appearance: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-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;
-webkit-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: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border: none; border: none;
@ -165,19 +156,16 @@ label.form-control.checkbox input {
/* line 1, ../sass/forms/_text-input.scss */ /* line 1, ../sass/forms/_text-input.scss */
input[type="text"] { input[type="text"] {
-webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; -webkit-appearance: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-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;
-webkit-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: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border: none; border: none;
@ -194,25 +182,24 @@ input[type="text"] {
/* line 1, ../sass/forms/_selects.scss */ /* line 1, ../sass/forms/_selects.scss */
.form-control.select { .form-control.select {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
background-image: -webkit-linear-gradient(#4d4d4d, #404040);
background-image: -moz-linear-gradient(#4d4d4d, #404040); background-image: -moz-linear-gradient(#4d4d4d, #404040);
background-image: -o-linear-gradient(#4d4d4d, #404040); background-image: -webkit-linear-gradient(#4d4d4d, #404040);
background-image: linear-gradient(#4d4d4d, #404040); background-image: linear-gradient(#4d4d4d, #404040);
-webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
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: none;
border-top: 1px solid #666666; border-top: 1px solid #666666;
color: #999999; color: #999;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@ -221,21 +208,21 @@ input[type="text"] {
position: relative; } position: relative; }
/* line 127, ../sass/_mixins.scss */ /* line 127, ../sass/_mixins.scss */
.form-control.select:not(.disabled):hover { .form-control.select:not(.disabled):hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d)); 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: -moz-linear-gradient(#666666, #4d4d4d);
background-image: -o-linear-gradient(#666666, #4d4d4d); background-image: -webkit-linear-gradient(#666666, #4d4d4d);
background-image: linear-gradient(#666666, #4d4d4d); } background-image: linear-gradient(#666666, #4d4d4d); }
/* line 8, ../sass/forms/_selects.scss */ /* line 8, ../sass/forms/_selects.scss */
.form-control.select select { .form-control.select select {
-webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; -webkit-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
background: none; background: none;
color: #999999; color: #999;
border: none !important; border: none !important;
cursor: pointer; cursor: pointer;
padding: 4px 25px 2px 5px; padding: 4px 25px 2px 5px;
@ -260,19 +247,16 @@ input[type="text"] {
min-height: 22px; } min-height: 22px; }
/* line 6, ../sass/forms/_channel-selector.scss */ /* line 6, ../sass/forms/_channel-selector.scss */
.channel-selector .treeview { .channel-selector .treeview {
-webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; -webkit-appearance: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-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;
-webkit-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: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border: none; border: none;

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

@ -8,25 +8,24 @@
top: 0; } top: 0; }
/* line 6, ../sass/items/_item.scss */ /* line 6, ../sass/items/_item.scss */
.items-holder .item.grid-item { .items-holder .item.grid-item {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #595959), color-stop(100%, #4d4d4d)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #595959), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#595959, #4d4d4d);
background-image: -moz-linear-gradient(#595959, #4d4d4d); background-image: -moz-linear-gradient(#595959, #4d4d4d);
background-image: -o-linear-gradient(#595959, #4d4d4d); background-image: -webkit-linear-gradient(#595959, #4d4d4d);
background-image: linear-gradient(#595959, #4d4d4d); background-image: linear-gradient(#595959, #4d4d4d);
-webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
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: none;
border-top: 1px solid #737373; border-top: 1px solid #737373;
color: #999999; color: #999;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
@ -38,10 +37,11 @@
position: relative; } position: relative; }
/* line 127, ../sass/_mixins.scss */ /* line 127, ../sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover { .items-holder .item.grid-item:not(.disabled):hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #737373), color-stop(100%, #595959)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #737373), color-stop(100%, #595959));
background-image: -webkit-linear-gradient(#737373, #595959);
background-image: -moz-linear-gradient(#737373, #595959); background-image: -moz-linear-gradient(#737373, #595959);
background-image: -o-linear-gradient(#737373, #595959); background-image: -webkit-linear-gradient(#737373, #595959);
background-image: linear-gradient(#737373, #595959); } background-image: linear-gradient(#737373, #595959); }
/* line 19, ../sass/items/_item.scss */ /* line 19, ../sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type { .items-holder .item.grid-item:hover .item-main .item-type {
@ -94,38 +94,39 @@
font-size: 0.8em; } font-size: 0.8em; }
/* line 78, ../sass/items/_item.scss */ /* line 78, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected { .items-holder .item.grid-item.selected {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00bfff), color-stop(100%, #00ace6)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00bfff), color-stop(100%, #00ace6));
background-image: -webkit-linear-gradient(#00bfff, #00ace6);
background-image: -moz-linear-gradient(#00bfff, #00ace6); background-image: -moz-linear-gradient(#00bfff, #00ace6);
background-image: -o-linear-gradient(#00bfff, #00ace6); background-image: -webkit-linear-gradient(#00bfff, #00ace6);
background-image: linear-gradient(#00bfff, #00ace6); background-image: linear-gradient(#00bfff, #00ace6);
-webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
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: none;
border-top: 1px solid #33ccff; border-top: 1px solid #33ccff;
color: #999999; color: #999;
display: inline-block; display: inline-block;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzY2NmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #33ccff), color-stop(100%, #0099cc)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #33ccff), color-stop(100%, #0099cc));
background-image: -webkit-linear-gradient(#33ccff, #0099cc);
background-image: -moz-linear-gradient(#33ccff, #0099cc); background-image: -moz-linear-gradient(#33ccff, #0099cc);
background-image: -o-linear-gradient(#33ccff, #0099cc); background-image: -webkit-linear-gradient(#33ccff, #0099cc);
background-image: linear-gradient(#33ccff, #0099cc); background-image: linear-gradient(#33ccff, #0099cc);
color: #80dfff; } color: #80dfff; }
/* line 135, ../sass/_mixins.scss */ /* line 135, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected:not(.disabled):hover { .items-holder .item.grid-item.selected:not(.disabled):hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2ZDlmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66d9ff), color-stop(100%, #00bfff)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66d9ff), color-stop(100%, #00bfff));
background-image: -webkit-linear-gradient(#66d9ff, #00bfff);
background-image: -moz-linear-gradient(#66d9ff, #00bfff); background-image: -moz-linear-gradient(#66d9ff, #00bfff);
background-image: -o-linear-gradient(#66d9ff, #00bfff); background-image: -webkit-linear-gradient(#66d9ff, #00bfff);
background-image: linear-gradient(#66d9ff, #00bfff); } background-image: linear-gradient(#66d9ff, #00bfff); }
/* line 83, ../sass/items/_item.scss */ /* line 83, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) { .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {

162
platform/commonUI/general/res/css/plots.css
View File

@ -1,10 +1,39 @@
/* line 10, ../sass/plots/_plots-main.scss */ /* line 10, ../sass/plots/_plots-main.scss */
.gl-plot { .gl-plot {
color: #999999; color: #999;
font-size: 0.7rem; font-size: 0.7rem;
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; } height: 100%;
/****************************** Limits */
/*.l-limit {
// Limits in plot display area
$h: 10px;
$a0: 0.1;
$a1: 0.2;
//top: auto;
height: auto;
z-index: 0;
&.s-limit-upr {
//$dir: 0deg;
&.s-limit-yellow {
@include limitBg($colorLimitYellow);
}
&.s-limit-red {
@include limitBg($colorLimitRed);
}
}
&.s-limit-lwr {
//$dir: 180deg;
&.s-limit-yellow {
@include limitBg($colorLimitYellow);
}
&.s-limit-red {
@include limitBg($colorLimitRed);
}
}
}*/ }
/* line 17, ../sass/plots/_plots-main.scss */ /* line 17, ../sass/plots/_plots-main.scss */
.gl-plot .gl-plot-axis-area { .gl-plot .gl-plot-axis-area {
position: absolute; } position: absolute; }
@ -26,15 +55,13 @@
width: 60px; } width: 60px; }
/* line 38, ../sass/plots/_plots-main.scss */ /* line 38, ../sass/plots/_plots-main.scss */
.gl-plot .gl-plot-coords { .gl-plot .gl-plot-coords {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
background: rgba(255, 199, 0, 0.5); background: black;
color: #e6e6e6; color: #e6e6e6;
padding: 2px 5px; padding: 2px 5px;
position: absolute; position: absolute;
@ -55,13 +82,13 @@
left: 60px; left: 60px;
cursor: crosshair; cursor: crosshair;
border: 1px solid #4d4d4d; } border: 1px solid #4d4d4d; }
/* line 66, ../sass/plots/_plots-main.scss */ /* line 65, ../sass/plots/_plots-main.scss */
.gl-plot .gl-plot-label, .gl-plot .gl-plot-label,
.gl-plot .l-plot-label { .gl-plot .l-plot-label {
color: #cccccc; color: #cccccc;
position: absolute; position: absolute;
text-align: center; } text-align: center; }
/* line 74, ../sass/plots/_plots-main.scss */ /* line 73, ../sass/plots/_plots-main.scss */
.gl-plot .gl-plot-label.gl-plot-x-label, .gl-plot .gl-plot-label.l-plot-x-label, .gl-plot .gl-plot-label.gl-plot-x-label, .gl-plot .gl-plot-label.l-plot-x-label,
.gl-plot .l-plot-label.gl-plot-x-label, .gl-plot .l-plot-label.gl-plot-x-label,
.gl-plot .l-plot-label.l-plot-x-label { .gl-plot .l-plot-label.l-plot-x-label {
@ -70,19 +97,17 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
height: auto; } height: auto; }
/* line 83, ../sass/plots/_plots-main.scss */ /* line 82, ../sass/plots/_plots-main.scss */
.gl-plot .gl-plot-label.gl-plot-y-label, .gl-plot .gl-plot-label.l-plot-y-label, .gl-plot .gl-plot-label.gl-plot-y-label, .gl-plot .gl-plot-label.l-plot-y-label,
.gl-plot .l-plot-label.gl-plot-y-label, .gl-plot .l-plot-label.gl-plot-y-label,
.gl-plot .l-plot-label.l-plot-y-label { .gl-plot .l-plot-label.l-plot-y-label {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0; -moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0; -ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0; -webkit-transform-origin: 50% 0;
transform-origin: 50% 0; transform-origin: 50% 0;
-webkit-transform: translateX(-50%) rotate(-90deg);
-moz-transform: translateX(-50%) rotate(-90deg); -moz-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg); -ms-transform: translateX(-50%) rotate(-90deg);
-o-transform: translateX(-50%) rotate(-90deg); -webkit-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg); transform: translateX(-50%) rotate(-90deg);
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
@ -122,53 +147,61 @@
height: 24px; height: 24px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; } overflow-y: auto; }
/* line 148, ../sass/plots/_plots-main.scss */ /* line 137, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit { .gl-plot .l-oob-data {
position: absolute; position: absolute;
top: auto;
left: 0; left: 0;
right: 0; right: 0;
height: 30px;
width: auto; } width: auto; }
/* line 159, ../sass/plots/_plots-main.scss */ /* line 173, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit.s-limit-upr.s-limit-0 { .gl-plot .l-oob-data {
background-image: -webkit-linear-gradient(0deg, rgba(204, 153, 0, 0), rgba(204, 153, 0, 0.4) 100%); -moz-animation: pulse 2s infinite;
background-image: -moz-linear-gradient(0deg, rgba(204, 153, 0, 0), rgba(204, 153, 0, 0.4) 100%); -webkit-animation: pulse 2s infinite;
background-image: -o-linear-gradient(0deg, rgba(204, 153, 0, 0), rgba(204, 153, 0, 0.4) 100%); animation: pulse 2s infinite;
background-image: linear-gradient(0deg, rgba(204, 153, 0, 0), rgba(204, 153, 0, 0.4) 100%); } overflow: hidden;
/* line 163, ../sass/plots/_plots-main.scss */ position: absolute;
.gl-plot .l-limit.s-limit-upr.s-limit-1 { top: 0px;
background-image: -webkit-linear-gradient(0deg, rgba(204, 0, 0, 0), rgba(204, 0, 0, 0.4) 100%); right: 0px;
background-image: -moz-linear-gradient(0deg, rgba(204, 0, 0, 0), rgba(204, 0, 0, 0.4) 100%); bottom: 0px;
background-image: -o-linear-gradient(0deg, rgba(204, 0, 0, 0), rgba(204, 0, 0, 0.4) 100%); left: 0px;
background-image: linear-gradient(0deg, rgba(204, 0, 0, 0), rgba(204, 0, 0, 0.4) 100%); } width: auto;
/* line 170, ../sass/plots/_plots-main.scss */ height: auto;
.gl-plot .l-limit.s-limit-lwr.s-limit-0 { pointer-events: none;
background-image: -webkit-linear-gradient(180deg, rgba(204, 153, 0, 0), rgba(204, 153, 0, 0.4) 100%); height: 10px;
background-image: -moz-linear-gradient(180deg, rgba(204, 153, 0, 0), rgba(204, 153, 0, 0.4) 100%); z-index: 1; }
background-image: -o-linear-gradient(180deg, rgba(204, 153, 0, 0), rgba(204, 153, 0, 0.4) 100%); /* line 182, ../sass/plots/_plots-main.scss */
background-image: linear-gradient(180deg, rgba(204, 153, 0, 0), rgba(204, 153, 0, 0.4) 100%); } .gl-plot .l-oob-data.l-oob-data-up {
/* line 174, ../sass/plots/_plots-main.scss */ top: 0;
.gl-plot .l-limit.s-limit-lwr.s-limit-1 { bottom: auto;
background-image: -webkit-linear-gradient(180deg, rgba(204, 0, 0, 0), rgba(204, 0, 0, 0.4) 100%); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3NDhkNiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NzQ4ZDYiIHN0b3Atb3BhY2l0eT0iMC41Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-image: -moz-linear-gradient(180deg, rgba(204, 0, 0, 0), rgba(204, 0, 0, 0.4) 100%); background-size: 100%;
background-image: -o-linear-gradient(180deg, rgba(204, 0, 0, 0), rgba(204, 0, 0, 0.4) 100%); background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
background-image: linear-gradient(180deg, rgba(204, 0, 0, 0), rgba(204, 0, 0, 0.4) 100%); } background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
/* line 187, ../sass/plots/_plots-main.scss */
.gl-plot .l-oob-data.l-oob-data-dwn {
bottom: 0;
top: auto;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3NDhkNiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NzQ4ZDYiIHN0b3Atb3BhY2l0eT0iMC41Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -moz-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
/* line 184, ../sass/plots/_plots-main.scss */ /* line 197, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item, .gl-plot-legend .plot-legend-item,
.gl-plot-legend .legend-item, .gl-plot-legend .legend-item,
.legend .plot-legend-item, .legend .plot-legend-item,
.legend .legend-item { .legend .legend-item {
display: inline-block; display: inline-block;
margin-right: 10px; } margin-right: 10px; }
/* line 187, ../sass/plots/_plots-main.scss */ /* line 201, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item span, .gl-plot-legend .plot-legend-item span,
.gl-plot-legend .legend-item span, .gl-plot-legend .legend-item span,
.legend .plot-legend-item span, .legend .plot-legend-item span,
.legend .legend-item span { .legend .legend-item span {
vertical-align: middle; } vertical-align: middle; }
/* line 191, ../sass/plots/_plots-main.scss */ /* line 204, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item .plot-color-swatch, .gl-plot-legend .plot-legend-item .plot-color-swatch,
.gl-plot-legend .plot-legend-item .color-swatch, .gl-plot-legend .plot-legend-item .color-swatch,
.gl-plot-legend .legend-item .plot-color-swatch, .gl-plot-legend .legend-item .plot-color-swatch,
@ -177,26 +210,37 @@
.legend .plot-legend-item .color-swatch, .legend .plot-legend-item .color-swatch,
.legend .legend-item .plot-color-swatch, .legend .legend-item .plot-color-swatch,
.legend .legend-item .color-swatch { .legend .legend-item .color-swatch {
-webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
-ms-border-radius: 2px; -webkit-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
display: inline-block; display: inline-block;
height: 8px; height: 8px;
width: 8px; width: 8px; }
margin-right: 3px; }
/* line 205, ../sass/plots/_plots-main.scss */ /* line 219, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #fff;
line-height: 1.5em;
padding: 0px 5px; }
/* line 225, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item .plot-color-swatch {
border: 1px solid #333;
height: 9px;
width: 9px; }
/* line 233, ../sass/plots/_plots-main.scss */
.tick { .tick {
position: absolute; position: absolute;
border: 0 rgba(255, 255, 255, 0.3) solid; } border: 0 rgba(255, 255, 255, 0.3) solid; }
/* line 208, ../sass/plots/_plots-main.scss */ /* line 236, ../sass/plots/_plots-main.scss */
.tick.tick-x { .tick.tick-x {
border-right-width: 1px; border-right-width: 1px;
height: 100%; } height: 100%; }
/* line 216, ../sass/plots/_plots-main.scss */ /* line 242, ../sass/plots/_plots-main.scss */
.gl-plot-tick, .gl-plot-tick,
.tick-label { .tick-label {
font-size: 0.7rem; font-size: 0.7rem;
@ -204,7 +248,7 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; } text-overflow: ellipsis; }
/* line 224, ../sass/plots/_plots-main.scss */ /* line 250, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x, .gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x,
.tick-label.gl-plot-x-tick-label, .tick-label.gl-plot-x-tick-label,
.tick-label.tick-label-x { .tick-label.tick-label-x {
@ -215,7 +259,7 @@
width: 20%; width: 20%;
margin-left: -10%; margin-left: -10%;
text-align: center; } text-align: center; }
/* line 234, ../sass/plots/_plots-main.scss */ /* line 260, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y, .gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y,
.tick-label.gl-plot-y-tick-label, .tick-label.gl-plot-y-tick-label,
.tick-label.tick-label-y { .tick-label.tick-label-y {
@ -225,18 +269,18 @@
margin-bottom: -0.5em; margin-bottom: -0.5em;
text-align: right; } text-align: right; }
/* line 245, ../sass/plots/_plots-main.scss */ /* line 272, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-x-tick-label { .gl-plot-tick.gl-plot-x-tick-label {
top: 5px; } top: 5px; }
/* line 248, ../sass/plots/_plots-main.scss */ /* line 275, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-y-tick-label { .gl-plot-tick.gl-plot-y-tick-label {
right: 5px; right: 5px;
left: 5px; } left: 5px; }
/* line 255, ../sass/plots/_plots-main.scss */ /* line 282, ../sass/plots/_plots-main.scss */
.tick-label.tick-label-x { .tick-label.tick-label-x {
top: 0; } top: 0; }
/* line 258, ../sass/plots/_plots-main.scss */ /* line 285, ../sass/plots/_plots-main.scss */
.tick-label.tick-label-y { .tick-label.tick-label-y {
right: 0; right: 0;
left: 0; } left: 0; }

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

File diff suppressed because it is too large Load Diff

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

@ -2,7 +2,7 @@
ul.tree { ul.tree {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
/* line 183, ../sass/_mixins.scss */ /* line 187, ../sass/_mixins.scss */
ul.tree li { ul.tree li {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@ -13,14 +13,12 @@ ul.tree {
position: relative; } position: relative; }
/* line 6, ../sass/tree/_tree.scss */ /* line 6, ../sass/tree/_tree.scss */
ul.tree li span.tree-item { ul.tree li span.tree-item {
-webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-transition: background-color 0.25s;
-moz-transition: background-color 0.25s; -moz-transition: background-color 0.25s;
-o-transition: background-color 0.25s; -o-transition: background-color 0.25s;
-webkit-transition: background-color 0.25s;
transition: background-color 0.25s; transition: background-color 0.25s;
display: block; display: block;
font-size: 0.80rem; font-size: 0.80rem;
@ -63,7 +61,7 @@ ul.tree {
/* line 38, ../sass/tree/_tree.scss */ /* line 38, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon .alert { ul.tree li span.tree-item .label .type-icon .alert {
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px; text-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
background: #333333; background: #333;
color: #ff3c00; color: #ff3c00;
font-size: 0.7em; font-size: 0.7em;
margin-top: -3px; margin-top: -3px;
@ -105,7 +103,7 @@ ul.tree {
/* line 79, ../sass/tree/_tree.scss */ /* line 79, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected { ul.tree li span.tree-item.selected {
background: #005177; background: #005177;
color: white; } color: #fff; }
/* line 83, ../sass/tree/_tree.scss */ /* line 83, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected .view-control { ul.tree li span.tree-item.selected .view-control {
color: #0099cc; } color: #0099cc; }

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

@ -24,7 +24,8 @@ $colorFormValid: #33cc33;
$colorFormError: #cc0000; $colorFormError: #cc0000;
$colorFormInvalid: #ff9900; $colorFormInvalid: #ff9900;
$colorGridLines: rgba(#fff, 0.05); $colorGridLines: rgba(#fff, 0.05);
$colorLimitYellow: #cc9900;
$colorLimitRed: #cc0000;
// Ratios // Ratios
$ltGamma: 20%; $ltGamma: 20%;

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

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

43
platform/commonUI/general/res/sass/_limits.scss Normal file
View File

@ -0,0 +1,43 @@
.s-limit {
$a: 0.7;
$l: 30%;
&:before {
display: inline-block;
font-family: symbolsfont;
line-height: 1.1em;
margin-right: $interiorMarginSm;
vertical-align: bottom;
}
&.s-limit-upr {
&.s-limit-yellow {
background: rgba($colorLimitYellow, $a);
&:before {
color: lighten($colorLimitYellow, $l);
content: "\0000ed";
}
}
&.s-limit-red {
background: rgba($colorLimitRed, $a);
&:before {
color: lighten($colorLimitRed, $l);
content: "\0000eb";
}
}
}
&.s-limit-lwr {
&.s-limit-yellow {
background: rgba($colorLimitYellow, $a);
&:before {
color: lighten($colorLimitYellow, $l);
content: "\0000ec";
}
}
&.s-limit-red {
background: rgba($colorLimitRed, $a);
&:before {
color: lighten($colorLimitRed, $l);
content: "\0000ee";
}
}
}
}

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

@ -1,6 +1,7 @@
@import "compass"; @import "compass";
@import "compass/reset"; @import "compass/reset";
@import "compass/css3"; @import "compass/css3";
@import "compass/css3/animation";
@import "compass/css3/user-interface"; @import "compass/css3/user-interface";
@import "compass/utilities"; @import "compass/utilities";
@ -14,6 +15,7 @@
@import "text"; @import "text";
@import "badges"; @import "badges";
@import "icons"; @import "icons";
@import "limits";
@import "lists/tabular"; @import "lists/tabular";
@import "controls/buttons"; @import "controls/buttons";
@import "controls/color-palette"; @import "controls/color-palette";

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

@ -46,7 +46,7 @@
rgba($c, $a) 25%, transparent 25%, rgba($c, $a) 25%, transparent 25%,
transparent 50%, rgba($c, $a) 50%, transparent 50%, rgba($c, $a) 50%,
rgba($c, $a) 75%, transparent 75%, rgba($c, $a) 75%, transparent 75%,
transparent 0 transparent 100%
)); ));
background-repeat: repeat; background-repeat: repeat;
background-size: $d $d; background-size: $d $d;
@ -161,6 +161,10 @@
@include background-image(linear-gradient($deg, rgba($c,0), rgba($c, $a) 100%)); @include background-image(linear-gradient($deg, rgba($c,0), rgba($c, $a) 100%));
} }
@mixin subtleGrad($deg: 0, $c: red, $a0: 0.2, $a1: 0.3) {
@include background-image(linear-gradient($deg, rgba($c,$a0), rgba($c, $a1) 100%));
}
@mixin txtShdwSubtle($sVal: 0.1) { @mixin txtShdwSubtle($sVal: 0.1) {
@include text-shadow(rgba(black, $sVal) 0 1px 2px); @include text-shadow(rgba(black, $sVal) 0 1px 2px);
} }

111
platform/commonUI/general/res/sass/plots/_plots-main.scss
View File

@ -1,5 +1,5 @@
$yBarW: 60px; $yBarW: 60px;
$yLabelW: auto; //10px; $yLabelW: auto;
$xBarH: 32px; $xBarH: 32px;
$legendH: 24px; $legendH: 24px;
$colorHash: rgba(white, 0.3); $colorHash: rgba(white, 0.3);
@ -38,7 +38,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
.gl-plot-coords { .gl-plot-coords {
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius($controlCr); @include border-radius($controlCr);
background: rgba($colorAlt1, 0.5); background: black; //rgba($colorKey, 0.5);
color: lighten($colorBodyFg, 30%); color: lighten($colorBodyFg, 30%);
padding: 2px 5px; padding: 2px 5px;
position: absolute; position: absolute;
@ -129,55 +129,69 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
height: $legendH; height: $legendH;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
// .plot-legend-item {
// display: inline-block;
// margin-right: $interiorMarginLg;
// span {
// vertical-align: middle;
// }
// .plot-color-swatch {
// @include border-radius(2px);
// display: inline-block;
// height: $swatchD;
// width: $swatchD;
// margin-right: $interiorMarginSm;
// }
// }
} }
.l-limit { /****************************** Limits */
// @include linearGlow(0,#66cc66);
// @include test(); //.l-limit,
$cLimit0: #cc9900; .l-oob-data {
$cLimit1: #cc0000;
$h: 30px;
position: absolute; position: absolute;
top: auto; left: 0; right: 0; left: 0;
height: $h; width: auto; right: 0;
&.s-limit-upr { width: auto;
// border-top: 1px solid;
&.s-limit-0 {
// border-color: $cLimit0;
@include linearGlow(0deg,$cLimit0);
} }
&.s-limit-1 {
// border-color: $cLimit1; /*.l-limit {
@include linearGlow(0deg,$cLimit1); // Limits in plot display area
$h: 10px;
$a0: 0.1;
$a1: 0.2;
//top: auto;
height: auto;
z-index: 0;
&.s-limit-upr {
//$dir: 0deg;
&.s-limit-yellow {
@include limitBg($colorLimitYellow);
}
&.s-limit-red {
@include limitBg($colorLimitRed);
} }
} }
&.s-limit-lwr { &.s-limit-lwr {
// border-bottom: 1px solid; //$dir: 180deg;
&.s-limit-0 { &.s-limit-yellow {
// border-color: $cLimit0; @include limitBg($colorLimitYellow);
@include linearGlow(180deg,$cLimit0);
} }
&.s-limit-1 { &.s-limit-red {
// border-color: $cLimit1; @include limitBg($colorLimitRed);
@include linearGlow(180deg,$cLimit1);
} }
} }
}*/
.l-oob-data {
$c: #7748d6;
$a: 0.5;
$h: 10px;
@include animation(pulse 2s infinite);
@include absPosDefault();
pointer-events: none;
height: $h;
z-index: 1;
&.l-oob-data-up {
top: 0;
bottom: auto;
@include linearGlow(0deg, $c, $a);
}
&.l-oob-data-dwn {
bottom: 0;
top: auto;
@include linearGlow(180deg, $c, $a);
}
} }
} }
.gl-plot-legend, .gl-plot-legend,
.legend { .legend {
.plot-legend-item, .plot-legend-item,
@ -193,8 +207,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
display: inline-block; display: inline-block;
height: $swatchD; height: $swatchD;
width: $swatchD; width: $swatchD;
margin-right: $interiorMarginSm; //margin-right: $interiorMarginSm;
} }
.title-label { .title-label {
@ -202,6 +215,21 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
} }
} }
.gl-plot-legend {
.plot-legend-item {
//@include test();
@include border-radius($controlCr);
color: #fff;
line-height: 1.5em;
padding: 0px 5px;
.plot-color-swatch {
border: 1px solid $colorBodyBg;
height: $swatchD + 1;
width: $swatchD + 1;
}
}
}
.tick { .tick {
position: absolute; position: absolute;
border: 0 $colorHash solid; border: 0 $colorHash solid;
@ -211,7 +239,6 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
} }
} }
.gl-plot-tick, .gl-plot-tick,
.tick-label { .tick-label {
// @include test(red); // @include test(red);

36
platform/features/plot/res/templates/plot.html
View File

@ -1,12 +1,15 @@
<span ng-controller="PlotController as plot" <span ng-controller="PlotController as plot"
ng-mouseleave="representation.showControls = false"> ng-mouseleave="representation.showControls = false">
<div class="gl-plot" <div class="gl-plot"
ng-style="{ height: 100 / plot.getSubPlots().length + '%'}" ng-style="{ height: 100 / plot.getSubPlots().length + '%'}"
ng-repeat="subplot in plot.getSubPlots()"> ng-repeat="subplot in plot.getSubPlots()">
<div class="gl-plot-legend"> <div class="gl-plot-legend">
<span class='plot-legend-item' <span
ng-repeat="telemetryObject in subplot.getTelemetryObjects()"> class='plot-legend-item'
ng-repeat="telemetryObject in subplot.getTelemetryObjects()"
ng-class="{ 's-limit': $index < 1, 's-limit-lwr': 1, 's-limit-yellow' : 1 }"
>
<span class='plot-color-swatch' <span class='plot-color-swatch'
ng-style="{ 'background-color': plot.getColor($index) }"> ng-style="{ 'background-color': plot.getColor($index) }">
</span> </span>
@ -14,8 +17,10 @@
</span> </span>
</div> </div>
<div class="gl-plot-coords" <div
ng-if="subplot.isHovering() && subplot.getHoverCoordinates()"> class="gl-plot-coords"
ng-if="subplot.isHovering() && subplot.getHoverCoordinates()"
>
{{subplot.getHoverCoordinates()}} {{subplot.getHoverCoordinates()}}
</div> </div>
@ -48,6 +53,25 @@
ng-mouseenter="subplot.isHovering(true); representation.showControls = true;" ng-mouseenter="subplot.isHovering(true); representation.showControls = true;"
ng-mouseleave="subplot.isHovering(false)"> ng-mouseleave="subplot.isHovering(false)">
<div ng-init="limits=[
{type: 'upr', severity: 'severe', top: 0, bottom: 90},
{type: 'upr', severity: 'med', top: 10, bottom: 80},
{type: 'lwr', severity: 'med', top: 70, bottom: 20},
{type: 'lwr', severity: 'severe', top: 80, bottom: 0}
]"></div>
<!-- Limits display -->
<div
ng-repeat="limit in limits"
ng-show="1"
class="t-limit l-limit s-limit-{{limit.type}} s-limit-{{limit.severity}}"
style="top: {{limit.top}}%; bottom: {{limit.bottom}}%"
></div>
<!-- Out-of-bounds data indicators -->
<div ng-show="1" class="l-oob-data l-oob-data-up"></div>
<div ng-show="1" class="l-oob-data l-oob-data-dwn"></div>
<div class="gl-plot-hash hash-v" <div class="gl-plot-hash hash-v"
ng-repeat="tick in subplot.getDomainTicks()" ng-repeat="tick in subplot.getDomainTicks()"
ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%', height: '100%' }" ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%', height: '100%' }"
@ -143,5 +167,5 @@
</div> </div>
</div> </div>
</span> </span>