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

[Frontend] Styling TC unsynced elements

Browse Source 
Fixes #933
WIP: Styling for unsynced elements
This commit is contained in:
Charles Hacskaylo 2016-08-01 16:26:47 -07:00
parent 523d6743fb
commit 762f43fa61
8 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,6 +23,7 @@
<span class="l-elem-wrapper l-flex-row flex-elem grows">
<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="icon-alert t-icon-alert flex-elem">Icon here</span>
<mct-representation
key="'menu-arrow'"
mct-object='domainObject'

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

@ -5,3 +5,13 @@
}
}
.s-status-timeconductor-unsynced {
// Layout frames
// Plot areas
.gl-plot .gl-plot-display-area {
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);
}
}

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

@ -39,20 +39,20 @@
@include pulse($animName: pulse-subtle, $dur: 500ms, $opacity0: 0.7);
}
@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0) {
@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
@include keyframes($animName) {
from { #{propName}: $propValStart; }
to { #{$propName}: $propValEnd; }
}
@include animToParams($animName, $dur: 500ms, $delay: 0)
@include animToParams($animName, $dur: $dur, $delay: $delay, $dir: $dir, $count: $count)
}
@mixin animToParams($animName, $dur: 500ms, $delay: 0) {
@mixin animToParams($animName, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
@include animation-name($animName);
@include animation-duration($dur);
@include animation-delay($delay);
@include animation-fill-mode(both);
@include animation-direction(normal);
@include animation-iteration-count(1);
@include animation-direction($dir);
@include animation-iteration-count($count);
@include animation-timing-function(ease-in-out);
}

3
platform/commonUI/general/res/sass/features/_imagery.scss
View File

@ -74,7 +74,8 @@
.s-image-main {
border: 1px solid transparent;
&.paused {
border-color: $colorPausedBg;
//border-color: $colorPausedBg;
@include s-status-for-block-elem($c: $colorPausedBg);
}
}

1
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -103,6 +103,7 @@ $colorProgressBarAmt: $colorKey;
$progressBarHOverlay: 15px;
$progressBarStripeW: 20px;
$shdwStatusIc: rgba(black, 0.4) 0 1px 2px;
$animPausedPulseDur: 500ms;
// Selects
$colorSelectBg: $colorBtnBg;

1
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -103,6 +103,7 @@ $colorProgressBarAmt: #0a0;
$progressBarHOverlay: 15px;
$progressBarStripeW: 20px;
$shdwStatusIc: rgba(white, 0.8) 0 0px 5px;
$animPausedPulseDur: 1s;
// Selects
$colorSelectBg: #ddd;

9
platform/features/layout/res/templates/layout.html
View File

@ -26,11 +26,10 @@
ng-repeat="childObject in composition"
ng-style="controller.getFrameStyle(childObject.getId())">
<div class="frame child-frame holder contents abs">
<mct-representation key="'frame'"
mct-object="childObject">
</mct-representation>
</div>
<mct-representation key="'frame'"
class="frame child-frame holder contents abs"
mct-object="childObject">
</mct-representation>
<!-- Drag handles -->
<span ng-show="domainObject.hasCapability('editor')">

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

@ -82,7 +82,7 @@
ng-mousemove="subplot.hover($event)"
mct-drag="subplot.continueDrag($event)"
mct-drag-down="subplot.startDrag($event)"
mct-drag-up="subplot.endDrag($event); plot.update();">
mct-drag-up="subplot.endDrag($event); plot.update()">
</mct-chart>
<!-- TODO: Move into correct position; make part of group; infer from set of actions -->
<div class="l-local-controls gl-plot-local-controls t-plot-display-controls"