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 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 flex-can-shrink'>{{model.name}}</span>
<span class="icon-alert t-icon-alert flex-elem">Icon here</span>
<mct-representation <mct-representation
key="'menu-arrow'" key="'menu-arrow'"
mct-object='domainObject' 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); @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) { @include keyframes($animName) {
from { #{propName}: $propValStart; } from { #{propName}: $propValStart; }
to { #{$propName}: $propValEnd; } 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-name($animName);
@include animation-duration($dur); @include animation-duration($dur);
@include animation-delay($delay); @include animation-delay($delay);
@include animation-fill-mode(both); @include animation-fill-mode(both);
@include animation-direction(normal); @include animation-direction($dir);
@include animation-iteration-count(1); @include animation-iteration-count($count);
@include animation-timing-function(ease-in-out); @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 { .s-image-main {
border: 1px solid transparent; border: 1px solid transparent;
&.paused { &.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; $progressBarHOverlay: 15px;
$progressBarStripeW: 20px; $progressBarStripeW: 20px;
$shdwStatusIc: rgba(black, 0.4) 0 1px 2px; $shdwStatusIc: rgba(black, 0.4) 0 1px 2px;
$animPausedPulseDur: 500ms;
// Selects // Selects
$colorSelectBg: $colorBtnBg; $colorSelectBg: $colorBtnBg;

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

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

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

@ -26,11 +26,10 @@
ng-repeat="childObject in composition" ng-repeat="childObject in composition"
ng-style="controller.getFrameStyle(childObject.getId())"> ng-style="controller.getFrameStyle(childObject.getId())">
<div class="frame child-frame holder contents abs"> <mct-representation key="'frame'"
<mct-representation key="'frame'" class="frame child-frame holder contents abs"
mct-object="childObject"> mct-object="childObject">
</mct-representation> </mct-representation>
</div>
<!-- Drag handles --> <!-- Drag handles -->
<span ng-show="domainObject.hasCapability('editor')"> <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)" ng-mousemove="subplot.hover($event)"
mct-drag="subplot.continueDrag($event)" mct-drag="subplot.continueDrag($event)"
mct-drag-down="subplot.startDrag($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> </mct-chart>
<!-- TODO: Move into correct position; make part of group; infer from set of actions --> <!-- 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" <div class="l-local-controls gl-plot-local-controls t-plot-display-controls"