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

Merge pull request #695 from nasa/open442

Browse Source 
Review and integrate open442
This commit is contained in:
Pete Richards 2016-02-22 13:43:59 -08:00
commit b5c88e5c5c
10 changed files with 84 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,39 +39,35 @@ a.disabled {
@include test();
}
@mixin customKeyframes($animName: pulse, $op0: 0.5) {
@include keyframes($animName) {
0% { opacity: $op0; }
100% { opacity: 1; }
}
@include animation-name(pulse, 0.2);
}
@mixin pulse($dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
@include keyframes(pulse) {
@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
@include keyframes($animName) {
0% { opacity: $opacity0; }
100% { opacity: $opacity100; }
}
@include animation-name(pulse);
@include animation-name($animName);
@include animation-duration($dur);
@include animation-direction(alternate);
@include animation-iteration-count($iteration);
@include animation-timing-function(ease-in-out);
}
@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) {
@include keyframes(pulseBorder) {
0% { border-color: rgba($c, $opacity0); }
100% { border-color: rgba($c, $opacity100); }
}
@include animation-name(pulseBorder);
@include animation-duration($dur);
@include animation-direction(alternate);
@include animation-iteration-count($iteration);
@include animation-timing-function(ease);
@include animation-delay($delay);
.pulse {
@include pulse($animName: pulse, $dur: 750ms);
}
.pulse {
@include pulse(750ms);
}
.pulse-subtle {
@include pulse($animName: pulse-subtle, $dur: 500ms, $opacity0: 0.7);
}
@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) {
@include keyframes(pulseBorder) {
0% { border-color: rgba($c, $opacity0); }
100% { border-color: rgba($c, $opacity100); }
}
@include animation-name(pulseBorder);
@include animation-duration($dur);
@include animation-direction(alternate);
@include animation-iteration-count($iteration);
@include animation-timing-function(ease);
@include animation-delay($delay);
}

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

@ -297,21 +297,20 @@
display: inline-block;
}
@mixin btnBase($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
@mixin btnBase($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
@include user-select(none);
@include transition(background, .25s);
.icon {
color: $ic;
}
@include desktop {
@if $bgHov != none {
&:not(.disabled):hover {
@include background-image($bgHov);
>.icon {
color: lighten($ic, $ltGamma);
}
}
}
@if $bgHovColor != none {
&:not(.disabled):hover {
background: $bgHovColor; // was just background, and background-image before that
>.icon {
color: lighten($ic, $ltGamma);
}
}
}
}
}

10
platform/commonUI/general/res/sass/controls/_buttons.scss
View File

@ -66,7 +66,7 @@ $pad: $interiorMargin * $baseRatio;
&:not(.major) {
// bg, bgHov, fg, ic
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
@include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon);
}
&.pause-play {
@ -91,7 +91,7 @@ $pad: $interiorMargin * $baseRatio;
&.paused {
@include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
.icon {
@include pulse(1000ms);
@include pulse($dur: 1000ms);
:before {
content: "\0000EF";
}
@ -269,14 +269,16 @@ $pad: $interiorMargin * $baseRatio;
}
.first {
.s-btn {
.s-btn,
&.s-btn {
@include border-left-radius($controlCr);
margin-left: 0;
}
}
.last {
.s-btn {
.s-btn,
&.s-btn {
@include border-right-radius($controlCr);
}
}

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

@ -36,11 +36,16 @@
}
}
mct-include.status-block-holder {
// mct-include that wraps status.block
// Must use display: inline-block to fix white space problems
display: inline-block;
}
.status.block {
$transDelay: 1.5s;
$transSpeed: .25s;
color: $colorStatusDefault;
cursor: default;
display: inline-block;
margin-right: $interiorMargin;
.status-indicator,
@ -50,6 +55,9 @@
vertical-align: top;
}
&.clickable { cursor: pointer; }
&:not(.clickable) { cursor: default; }
&.no-icon {
.status-indicator {
display: none;
@ -60,9 +68,6 @@
float: right;
}
&.subtle {
opacity: 0.5;
}
.status-indicator {
margin-right: $interiorMarginSm;
}
@ -77,7 +82,7 @@
&:hover {
.label {
@include trans-prop-nice(max-width, $transSpeed, 0s);
max-width: 450px;
max-width: 600px;
width: auto;
}
.count {
@ -99,11 +104,20 @@
&.error .status-indicator {
color: $colorStatusError;
}
&.available .status-indicator {
color: $colorStatusAvailable;
}
.count {
@include trans-prop-nice(opacity, $transSpeed, $transDelay);
font-weight: bold;
opacity: 1;
}
.s-btn {
background: $colorStatusBtnBg;
padding: 0 $interiorMargin;
height: auto;
line-height: inherit;
}
}
/* Styles for messages and message banners */
@ -146,7 +160,7 @@
left: 50%;
opacity: 1;
&:not(.info) {
@include pulse(100ms, 10);
@include pulse($dur: 100ms, $iteration: 10);
}
}
@ -295,7 +309,6 @@
.message-contents {
.l-message {
//border-bottom: 1px solid pullForward($colorOvrBg, 20%);
@include border-radius($controlCr);
background: rgba($colorOvrFg, 0.1);
margin-bottom: $interiorMargin;

3
platform/commonUI/general/res/templates/bottombar.html
View File

@ -23,7 +23,8 @@
<div id='status' class='status-holder'>
<mct-include ng-repeat="indicator in bar.getIndicators()"
ng-model="indicator.ngModel"
key="indicator.template">
key="indicator.template"
class="status-block-holder">
</mct-include>
</div>
<mct-include key="'message-banner'"></mct-include>

7
platform/commonUI/general/res/templates/indicator.html
View File

@ -30,11 +30,8 @@
</span><span class="label"
ng-class='ngModel.getTextClass()'>
{{ngModel.getText()}}
<a class="s-btn ui-symbol" ng-if="ngModel.configure">G</a>
</span><span class="count">
<!-- Add int count value here if this type of indicator has one or more messages associated with it -->
</span><a href=''
class="ui-symbol"
ng-if="ngModel.configure">
G
</a>
</span>
</div>

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

@ -12,12 +12,14 @@ $colorInteriorBorder: rgba($colorBodyFg, 0.1);
$colorA: #ccc;
$colorAHov: #fff;
$contrastRatioPercent: 7%;
$hoverRatioPercent: 10%;
$basicCr: 3px;
$controlCr: 3px;
$smallCr: 2px;
// Buttons and Controls
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); //
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
$colorBtnFg: $colorBodyFg;
$colorBtnMajorBg: $colorKey;
$colorBtnMajorFg: $colorKeyFg;
@ -54,7 +56,7 @@ $colorTick: rgba(white, 0.2);
$colorMenuBg: pullForward($colorBodyBg, 23%);
$colorMenuFg: pullForward($colorMenuBg, 70%);
$colorMenuIc: pullForward($colorKey, 17%);
$colorMenuHovBg: pullForward($colorMenuBg, 10%);
$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
$colorMenuHovFg: #fff;
$colorMenuHovIc: $colorMenuHovFg;
$shdwMenu: none;
@ -89,6 +91,8 @@ $colorStatusDefault: #ccc;
$colorStatusInfo: #62ba72;
$colorStatusAlert: #ffa66d;
$colorStatusError: #d4585c;
$colorStatusAvailable: $colorKey;
$colorStatusBtnBg: $colorBtnBg;
$colorProgressBarOuter: rgba(#000, 0.1);
$colorProgressBarAmt: $colorKey;
$progressBarHOverlay: 15px;
@ -123,7 +127,7 @@ $colorOvrBtnFg: #fff;
// Items
$colorItemBg: lighten($colorBodyBg, 5%);
$colorItemBgHov: pullForward($colorItemBg, 15%);
$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
$colorItemFg: lighten($colorItemBg, 50%);
$colorItemFgDetails: lighten($colorItemBg, 30%);
$colorItemIc: $colorKey;
@ -149,8 +153,8 @@ $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
// Tree
$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
$colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeVCHover: $colorAlt1;
@ -165,10 +169,10 @@ $shdwItemTreeIcon: 0.6;
// Scrollbar
$scrollbarTrackSize: 10px;
$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
$scrollbarTrackColorBg: rgba(#000, 0.4);
$scrollbarThumbColor: lighten($colorBodyBg, 10%);
$scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
// Splitter
$splitterD: 25px; // splitterD and HandleD should both be odd, or even

4
platform/commonUI/themes/espresso/res/sass/_mixins.scss
View File

@ -4,9 +4,9 @@
@include boxShdw($shdwBtns);
}
@mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
@mixin btnSubtle($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
@include containerSubtle($bg, $fg);
@include btnBase($bg, linear-gradient(lighten($bg, 15%), lighten($bg, 10%)), $fg, $ic);
@include btnBase($bg, $bgHovColor, $fg, $ic);
@include text-shadow($shdwItemText);
}

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

@ -12,12 +12,14 @@ $colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #999;
$colorAHov: $colorKey;
$contrastRatioPercent: 40%;
$hoverRatioPercent: 10%;
$basicCr: 4px;
$controlCr: $basicCr;
$smallCr: 3px;
// Buttons and Controls
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
$colorBtnFg: #fff;
$colorBtnMajorBg: $colorKey;
$colorBtnMajorFg: $colorKeyFg;
@ -54,7 +56,7 @@ $colorTick: rgba(black, 0.2);
$colorMenuBg: pushBack($colorBodyBg, 10%);
$colorMenuFg: pullForward($colorMenuBg, 70%);
$colorMenuIc: $colorKey;
$colorMenuHovBg: pullForward($colorMenuBg, 10%);
$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
$colorMenuHovFg: $colorMenuFg;
$colorMenuHovIc: $colorMenuIc;
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
@ -89,6 +91,8 @@ $colorStatusDefault: #ccc;
$colorStatusInfo: #60ba7b;
$colorStatusAlert: #ffb66c;
$colorStatusError: #c96b68;
$colorStatusAvailable: $colorKey;
$colorStatusBtnBg: #666;
$colorProgressBarOuter: rgba(#000, 0.1);
$colorProgressBarAmt: #0a0;
$progressBarHOverlay: 15px;
@ -123,7 +127,7 @@ $colorOvrBtnFg: #fff;
// Items
$colorItemBg: #ddd;
$colorItemBgHov: pullForward($colorItemBg, 5%);
$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
$colorItemFg: $colorBodyFg;
$colorItemFgDetails: pushBack($colorItemFg, 15%);
$colorItemIc: $colorKey;
@ -149,15 +153,15 @@ $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
// Tree
$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
$colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
$colorItemTreeIconHover: $colorItemTreeIcon;
$colorItemTreeVCHover: $colorKey;
$colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
$colorItemTreeSelectedFg: $colorBodyBg;
$colorItemTreeEditingBg: #caf1ff; //#c6e3ff;
$colorItemTreeEditingBg: #caf1ff;
$colorItemTreeEditingFg: $colorEditAreaFg;
$colorItemTreeVC: $colorBodyFg;
$colorItemTreeSelectedVC: $colorBodyBg;

4
platform/commonUI/themes/snow/res/sass/_mixins.scss
View File

@ -3,9 +3,9 @@
@include boxShdw($shdwBtns);
}
@mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
@mixin btnSubtle($bg: $colorBtnBg, $bgHovColor: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
@include containerSubtle($bg, $fg);
@include btnBase($bg, $bgHov, $fg, $ic);
@include btnBase($bg, $bgHovColor, $fg, $ic);
@include text-shadow($shdwItemText);
}