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

[Frontend] Styling for unsynced elements

Browse Source 
Fixes #933
This commit is contained in:
Charles Hacskaylo 2016-08-01 18:56:33 -07:00
parent ca5206d4a0
commit 11738286df
4 changed files with 32 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,8 @@
<span class='type-icon flex-elem {{type.getCssClass()}}'></span> <span class='type-icon flex-elem {{type.getCssClass()}}'></span>
<span class="l-elem-wrapper l-flex-row flex-elem grows"> <span class="l-elem-wrapper l-flex-row flex-elem grows">
<span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span> <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
<span class='title-label flex-elem flex-can-shrink'>{{model.name}}</span> <span class='title-label flex-elem holder flex-can-shrink'>{{model.name}}</span>
<span class='t-object-alert t-alert-unsynced flex-elem holder' title='This object is not currently displaying real-time data'></span>
<mct-representation <mct-representation
key="'menu-arrow'" key="'menu-arrow'"
mct-object='domainObject' mct-object='domainObject'

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

@ -1,23 +1,6 @@
.s-unsynced {
$c: $colorPausedBg;
border: 1px solid $c;
@include animTo($animName: pulsePaused, $propName: border-color, $propValStart: rgba($c, 0.8), $propValEnd: rgba($c, 0.5), $dur: $animPausedPulseDur, $dir: alternate, $count: infinite);
}
.s-stale { .s-stale {
@include s-stale(); @include s-stale();
.td { .td {
@include s-stale(); @include s-stale();
} }
} }
.s-status-timeconductor-unsynced {
// Layout frames
// Plot areas
.gl-plot .gl-plot-display-area {
@extend .s-unsynced;
}
}

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

@ -295,8 +295,6 @@ input[type="search"] {
.title-label { .title-label {
color: $colorObjHdrTxt; color: $colorObjHdrTxt;
@include ellipsize(); @include ellipsize();
@include webkitProp(flex, '0 1 auto');
padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
} }
.context-available-w { .context-available-w {
@ -307,6 +305,10 @@ input[type="search"] {
font-size: 0.7em; font-size: 0.7em;
@include flex(0 0 1); @include flex(0 0 1);
} }
.t-object-alert {
display: none;
}
} }
/******************************************************** PROGRESS BAR */ /******************************************************** PROGRESS BAR */

26
platform/commonUI/general/res/sass/controls/_messages.scss
View File

@ -345,3 +345,29 @@ body.desktop .t-message-single {
body.desktop .t-message-list { body.desktop .t-message-list {
.message-contents .l-message { margin-right: $interiorMarginLg; } .message-contents .l-message { margin-right: $interiorMarginLg; }
} }
// Alert elements in views
.s-unsynced {
$c: $colorPausedBg;
border: 1px solid $c;
@include animTo($animName: pulsePaused, $propName: border-color, $propValStart: rgba($c, 0.8), $propValEnd: rgba($c, 0.5), $dur: $animPausedPulseDur, $dir: alternate, $count: infinite);
}
.s-status-timeconductor-unsynced {
// Plot areas
.gl-plot .gl-plot-display-area {
@extend .s-unsynced;
}
// Object headers
.object-header {
.t-object-alert {
display: inline;
&.t-alert-unsynced {
@extend .icon-alert-triangle;
color: $colorPausedBg;
}
}
}
}