ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-20 13:43:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Added CSS and markup for stale; cleanup

Browse Source 
WTD-1172
Added stale CSS in _data-status.scss;
Added pulse animation in _effects.scss, not used;
Removed temp-limits directory and files;
Sanding and refining of limits styles and in .tabular;
This commit is contained in:
Charles Hacskaylo 2015-05-06 19:30:36 -07:00
parent db74e2f84a
commit 2d13745823
10 changed files with 143 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -144,9 +144,6 @@
background: rgba(170, 0, 0, 0.2); }
/* line 176, ../sass/plots/_plots-main.scss */
.gl-plot .l-oob-data {
-moz-animation: pulse 2s infinite;
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
overflow: hidden;
position: absolute;
top: 0px;
@ -158,7 +155,7 @@
pointer-events: none;
height: 10px;
z-index: 1; }
/* line 185, ../sass/plots/_plots-main.scss */
/* line 184, ../sass/plots/_plots-main.scss */
.gl-plot .l-oob-data.l-oob-data-up {
top: 0;
bottom: auto;
@ -167,7 +164,7 @@
background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 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 190, ../sass/plots/_plots-main.scss */
/* line 189, ../sass/plots/_plots-main.scss */
.gl-plot .l-oob-data.l-oob-data-dwn {
bottom: 0;
top: auto;
@ -177,20 +174,20 @@
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 200, ../sass/plots/_plots-main.scss */
/* line 199, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item,
.gl-plot-legend .legend-item,
.legend .plot-legend-item,
.legend .legend-item {
display: inline-block;
margin-right: 10px; }
/* line 204, ../sass/plots/_plots-main.scss */
/* line 203, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item span,
.gl-plot-legend .legend-item span,
.legend .plot-legend-item span,
.legend .legend-item span {
vertical-align: middle; }
/* line 207, ../sass/plots/_plots-main.scss */
/* line 206, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item .plot-color-swatch,
.gl-plot-legend .plot-legend-item .color-swatch,
.gl-plot-legend .legend-item .plot-color-swatch,
@ -206,7 +203,7 @@
height: 8px;
width: 8px; }
/* line 222, ../sass/plots/_plots-main.scss */
/* line 219, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
@ -214,22 +211,22 @@
color: #fff;
line-height: 1.5em;
padding: 0px 5px; }
/* line 228, ../sass/plots/_plots-main.scss */
/* 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 236, ../sass/plots/_plots-main.scss */
/* line 233, ../sass/plots/_plots-main.scss */
.tick {
position: absolute;
border: 0 rgba(255, 255, 255, 0.3) solid; }
/* line 239, ../sass/plots/_plots-main.scss */
/* line 236, ../sass/plots/_plots-main.scss */
.tick.tick-x {
border-right-width: 1px;
height: 100%; }
/* line 245, ../sass/plots/_plots-main.scss */
/* line 242, ../sass/plots/_plots-main.scss */
.gl-plot-tick,
.tick-label {
font-size: 0.7rem;
@ -237,7 +234,7 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
/* line 253, ../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,
.tick-label.gl-plot-x-tick-label,
.tick-label.tick-label-x {
@ -248,7 +245,7 @@
width: 20%;
margin-left: -10%;
text-align: center; }
/* line 263, ../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,
.tick-label.gl-plot-y-tick-label,
.tick-label.tick-label-y {
@ -258,18 +255,18 @@
margin-bottom: -0.5em;
text-align: right; }
/* line 275, ../sass/plots/_plots-main.scss */
/* line 272, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-x-tick-label {
top: 5px; }
/* line 278, ../sass/plots/_plots-main.scss */
/* line 275, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-y-tick-label {
right: 5px;
left: 5px; }
/* line 285, ../sass/plots/_plots-main.scss */
/* line 282, ../sass/plots/_plots-main.scss */
.tick-label.tick-label-x {
top: 0; }
/* line 288, ../sass/plots/_plots-main.scss */
/* line 285, ../sass/plots/_plots-main.scss */
.tick-label.tick-label-y {
right: 0;
left: 0; }

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

@ -89,6 +89,39 @@ a.disabled {
.test {
background-color: rgba(255, 204, 0, 0.2); }
@-moz-keyframes pulse {
0% {
opacity: 0.2; }
100% {
opacity: 1; } }
@-webkit-keyframes pulse {
0% {
opacity: 0.2; }
100% {
opacity: 1; } }
@keyframes pulse {
0% {
opacity: 0.2; }
100% {
opacity: 1; } }
/* line 38, ../sass/_effects.scss */
.pulse {
-moz-animation-name: pulse;
-webkit-animation-name: pulse;
animation-name: pulse;
-moz-animation-duration: 1000ms;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out; }
/* line 1, ../sass/_global.scss */
a {
color: #ccc;
@ -709,27 +742,28 @@ span {
line-height: 1.695rem;
position: absolute; }
/* line 9, ../sass/_limits.scss */
/* line 10, ../sass/_limits.scss */
.s-limit-upr,
.s-limit-lwr {
white-space: nowrap; }
/* line 14, ../sass/_limits.scss */
/* line 15, ../sass/_limits.scss */
.s-limit-upr:before,
.s-limit-lwr:before {
display: inline-block;
font-family: symbolsfont;
font-size: 0.8em;
font-size: 0.85em;
font-style: normal !important;
margin-right: 3px;
vertical-align: middle; }
/* line 24, ../sass/_limits.scss */
/* line 26, ../sass/_limits.scss */
.s-limit-upr.s-limit-yellow {
background: #9d7500; }
/* line 3, ../sass/_limits.scss */
.s-limit-upr.s-limit-yellow:before {
color: #ffcc37;
content: "í"; }
/* line 25, ../sass/_limits.scss */
/* line 27, ../sass/_limits.scss */
.s-limit-upr.s-limit-red {
background: #aa0000; }
/* line 3, ../sass/_limits.scss */
@ -737,14 +771,14 @@ span {
color: #ff4444;
content: "ë"; }
/* line 29, ../sass/_limits.scss */
/* line 31, ../sass/_limits.scss */
.s-limit-lwr.s-limit-yellow {
background: #9d7500; }
/* line 3, ../sass/_limits.scss */
.s-limit-lwr.s-limit-yellow:before {
color: #ffcc37;
content: "ì"; }
/* line 30, ../sass/_limits.scss */
/* line 32, ../sass/_limits.scss */
.s-limit-lwr.s-limit-red {
background: #aa0000; }
/* line 3, ../sass/_limits.scss */
@ -752,15 +786,19 @@ span {
color: #ff4444;
content: "î"; }
/* line 1, ../sass/_data-status.scss */
/* line 6, ../sass/_data-status.scss */
.s-stale {
opacity: 0.5 !important;
font-style: italic !important; }
color: rgba(255, 255, 255, 0.5) !important;
font-style: italic; }
/* line 8, ../sass/_data-status.scss */
.s-stale .td {
color: rgba(255, 255, 255, 0.5) !important;
font-style: italic; }
/* line 1, ../sass/lists/_tabular.scss */
.w1 {
background: #4d4d4d;
padding-top: 20px;
padding-top: 18px;
position: relative; }
/* line 6, ../sass/lists/_tabular.scss */
@ -821,8 +859,8 @@ span {
display: block;
font-style: normal;
font-weight: bold;
height: 20px;
line-height: 20px;
height: 18px;
line-height: 18px;
margin-left: -5px;
padding: 0 5px;
position: absolute;
@ -2440,9 +2478,6 @@ input[type="text"] {
background: rgba(170, 0, 0, 0.2); }
/* line 176, ../sass/plots/_plots-main.scss */
.gl-plot .l-oob-data {
-moz-animation: pulse 2s infinite;
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
overflow: hidden;
position: absolute;
top: 0px;
@ -2454,7 +2489,7 @@ input[type="text"] {
pointer-events: none;
height: 10px;
z-index: 1; }
/* line 185, ../sass/plots/_plots-main.scss */
/* line 184, ../sass/plots/_plots-main.scss */
.gl-plot .l-oob-data.l-oob-data-up {
top: 0;
bottom: auto;
@ -2463,7 +2498,7 @@ input[type="text"] {
background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 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 190, ../sass/plots/_plots-main.scss */
/* line 189, ../sass/plots/_plots-main.scss */
.gl-plot .l-oob-data.l-oob-data-dwn {
bottom: 0;
top: auto;
@ -2473,20 +2508,20 @@ input[type="text"] {
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 200, ../sass/plots/_plots-main.scss */
/* line 199, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item,
.gl-plot-legend .legend-item,
.legend .plot-legend-item,
.legend .legend-item {
display: inline-block;
margin-right: 10px; }
/* line 204, ../sass/plots/_plots-main.scss */
/* line 203, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item span,
.gl-plot-legend .legend-item span,
.legend .plot-legend-item span,
.legend .legend-item span {
vertical-align: middle; }
/* line 207, ../sass/plots/_plots-main.scss */
/* line 206, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item .plot-color-swatch,
.gl-plot-legend .plot-legend-item .color-swatch,
.gl-plot-legend .legend-item .plot-color-swatch,
@ -2502,7 +2537,7 @@ input[type="text"] {
height: 8px;
width: 8px; }
/* line 222, ../sass/plots/_plots-main.scss */
/* line 219, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
@ -2510,22 +2545,22 @@ input[type="text"] {
color: #fff;
line-height: 1.5em;
padding: 0px 5px; }
/* line 228, ../sass/plots/_plots-main.scss */
/* 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 236, ../sass/plots/_plots-main.scss */
/* line 233, ../sass/plots/_plots-main.scss */
.tick {
position: absolute;
border: 0 rgba(255, 255, 255, 0.3) solid; }
/* line 239, ../sass/plots/_plots-main.scss */
/* line 236, ../sass/plots/_plots-main.scss */
.tick.tick-x {
border-right-width: 1px;
height: 100%; }
/* line 245, ../sass/plots/_plots-main.scss */
/* line 242, ../sass/plots/_plots-main.scss */
.gl-plot-tick,
.tick-label {
font-size: 0.7rem;
@ -2533,7 +2568,7 @@ input[type="text"] {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
/* line 253, ../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,
.tick-label.gl-plot-x-tick-label,
.tick-label.tick-label-x {
@ -2544,7 +2579,7 @@ input[type="text"] {
width: 20%;
margin-left: -10%;
text-align: center; }
/* line 263, ../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,
.tick-label.gl-plot-y-tick-label,
.tick-label.tick-label-y {
@ -2554,18 +2589,18 @@ input[type="text"] {
margin-bottom: -0.5em;
text-align: right; }
/* line 275, ../sass/plots/_plots-main.scss */
/* line 272, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-x-tick-label {
top: 5px; }
/* line 278, ../sass/plots/_plots-main.scss */
/* line 275, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-y-tick-label {
right: 5px;
left: 5px; }
/* line 285, ../sass/plots/_plots-main.scss */
/* line 282, ../sass/plots/_plots-main.scss */
.tick-label.tick-label-x {
top: 0; }
/* line 288, ../sass/plots/_plots-main.scss */
/* line 285, ../sass/plots/_plots-main.scss */
.tick-label.tick-label-y {
right: 0;
left: 0; }

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

@ -28,7 +28,7 @@ $colorGridLines: rgba(#fff, 0.05);
$colorLimitYellow: #9d7500;
$colorLimitRed: #aa0000;
$colorTelemFresh: #fff;
$colorTelemStale: #aaa;
$colorTelemStale: #888;
$styleTelemState: italic;
// Ratios
@ -71,7 +71,7 @@ $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeVCHover: $colorAlt1;
//Tabular
$tabularHeaderH: 20px;
$tabularHeaderH: 18px;
$tabularTdPadLR: $itemPadLR;
$tabularTdPadTB: 2px;
$tabularColorBorder: rgba(white, 0.1);

15
platform/commonUI/general/res/sass/_data-status.scss
View File

@ -1,5 +1,12 @@
@mixin s-stale($a: 0.5) {
color: rgba($colorTelemFresh, $a) !important;
font-style: italic;
}
.s-stale {
//color: $colorTelemStale !important;
opacity: 0.5 !important;
font-style: italic !important;
}
@include s-stale();
.td {
@include s-stale();
}
}

17
platform/commonUI/general/res/sass/_effects.scss
View File

@ -20,4 +20,21 @@ a.disabled {
.test {
@include test();
}
@include keyframes(pulse) {
0% { opacity: 0.2; }
100% { opacity: 1; }
}
@mixin pulse($dur: 500ms) {
@include animation-name(pulse);
@include animation-duration($dur);
@include animation-direction(alternate);
@include animation-iteration-count(infinite);
@include animation-timing-function(ease-in-out);
}
.pulse {
@include pulse(1000ms);
}

4
platform/commonUI/general/res/sass/_limits.scss
View File

@ -1,6 +1,7 @@
@mixin limit($c, $glyph) {
background: $c;
&:before {
//@include pulse(500ms);
color: lighten($c, 30%);
content: $glyph;
}
@ -14,7 +15,8 @@
&:before {
display: inline-block;
font-family: symbolsfont;
font-size: 0.8em;
font-size: 0.85em;
font-style: normal !important;
margin-right: $interiorMarginSm;
vertical-align: middle;
}

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

@ -177,7 +177,6 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
$c: #7748d6;
$a: 0.5;
$h: 10px;
@include animation(pulse 2s infinite);
@include absPosDefault();
pointer-events: none;
height: $h;
@ -212,9 +211,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
width: $swatchD;
//margin-right: $interiorMarginSm;
}
.title-label {
}
.title-label {}
}
}

21
platform/features/static-markup/bundle.json Normal file
View File

@ -0,0 +1,21 @@
{
"extensions": {
"types": [
{
"key": "static.markup",
"name": "Static Markup",
"glyph": "\u0070",
"description": "Static markup sandbox",
"features": [ "creation" ]
}
],
"views": [
{
"templateUrl": "markup.html",
"name": "Static Markup",
"type": "static.markup",
"key": "static.markup"
}
]
}
}

7
platform/features/temp-limits/res/examples.html → platform/features/static-markup/res/markup.html
View File

@ -1,4 +1,4 @@
<h1>Limits Examples</h1>
<h1>Static Markup Sandbox</h1>
<h2>Plot limits</h2>
<div ng-init="limits=[
@ -18,4 +18,7 @@
></div>
</div>
</div>
</div>
</div>
<h2>Animation</h2>
<div class="pulse" style="background: #cc0000; color: #fff; padding: 10px;">This should pulse</div>

30
platform/features/temp-limits/bundle.json
View File

@ -1,30 +0,0 @@
{
"extensions": {
"types": [
{
"key": "example.limits",
"name": "Limits Examples",
"glyph": "\u00EB",
"description": "Markup and styles exercised for limits displays",
"features": [ "creation" ],
"properties": [
{
"key": "url",
"name": "URL",
"control": "textfield",
"pattern": "^(ftp|https?)\\:\\/\\/\\w+(\\.\\w+)*(\\:\\d+)?(\\/\\S*)*$",
"required": false
}
]
}
],
"views": [
{
"templateUrl": "examples.html",
"name": "Limits Examples",
"type": "example.limits",
"key": "example.limits"
}
]
}
}