ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-02 08:43:17 +00:00
Code Issues Actions 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(); @include test();
} }
@mixin customKeyframes($animName: pulse, $op0: 0.5) { @mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
@include keyframes($animName) { @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) {
0% { opacity: $opacity0; } 0% { opacity: $opacity0; }
100% { opacity: $opacity100; } 100% { opacity: $opacity100; }
} }
@include animation-name(pulse); @include animation-name($animName);
@include animation-duration($dur); @include animation-duration($dur);
@include animation-direction(alternate); @include animation-direction(alternate);
@include animation-iteration-count($iteration); @include animation-iteration-count($iteration);
@include animation-timing-function(ease-in-out); @include animation-timing-function(ease-in-out);
} }
@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) { .pulse {
@include keyframes(pulseBorder) { @include pulse($animName: pulse, $dur: 750ms);
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 { .pulse-subtle {
@include pulse(750ms); @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; 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 user-select(none);
@include transition(background, .25s);
.icon { .icon {
color: $ic; color: $ic;
} }
@include desktop { @include desktop {
@if $bgHov != none { @if $bgHovColor != none {
&:not(.disabled):hover { &:not(.disabled):hover {
@include background-image($bgHov); background: $bgHovColor; // was just background, and background-image before that
>.icon { >.icon {
color: lighten($ic, $ltGamma); color: lighten($ic, $ltGamma);
} }
} }
} }
} }
} }

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

@ -66,7 +66,7 @@ $pad: $interiorMargin * $baseRatio;
&:not(.major) { &:not(.major) {
// bg, bgHov, fg, ic // bg, bgHov, fg, ic
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon); @include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon);
} }
&.pause-play { &.pause-play {
@ -91,7 +91,7 @@ $pad: $interiorMargin * $baseRatio;
&.paused { &.paused {
@include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg); @include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
.icon { .icon {
@include pulse(1000ms); @include pulse($dur: 1000ms);
:before { :before {
content: "\0000EF"; content: "\0000EF";
} }
@ -269,14 +269,16 @@ $pad: $interiorMargin * $baseRatio;
} }
.first { .first {
.s-btn { .s-btn,
&.s-btn {
@include border-left-radius($controlCr); @include border-left-radius($controlCr);
margin-left: 0; margin-left: 0;
} }
} }
.last { .last {
.s-btn { .s-btn,
&.s-btn {
@include border-right-radius($controlCr); @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 { .status.block {
$transDelay: 1.5s; $transDelay: 1.5s;
$transSpeed: .25s; $transSpeed: .25s;
color: $colorStatusDefault; color: $colorStatusDefault;
cursor: default;
display: inline-block; display: inline-block;
margin-right: $interiorMargin; margin-right: $interiorMargin;
.status-indicator, .status-indicator,
@ -50,6 +55,9 @@
vertical-align: top; vertical-align: top;
} }
&.clickable { cursor: pointer; }
&:not(.clickable) { cursor: default; }
&.no-icon { &.no-icon {
.status-indicator { .status-indicator {
display: none; display: none;
@ -60,9 +68,6 @@
float: right; float: right;
} }
&.subtle {
opacity: 0.5;
}
.status-indicator { .status-indicator {
margin-right: $interiorMarginSm; margin-right: $interiorMarginSm;
} }
@ -77,7 +82,7 @@
&:hover { &:hover {
.label { .label {
@include trans-prop-nice(max-width, $transSpeed, 0s); @include trans-prop-nice(max-width, $transSpeed, 0s);
max-width: 450px; max-width: 600px;
width: auto; width: auto;
} }
.count { .count {
@ -99,11 +104,20 @@
&.error .status-indicator { &.error .status-indicator {
color: $colorStatusError; color: $colorStatusError;
} }
&.available .status-indicator {
color: $colorStatusAvailable;
}
.count { .count {
@include trans-prop-nice(opacity, $transSpeed, $transDelay); @include trans-prop-nice(opacity, $transSpeed, $transDelay);
font-weight: bold; font-weight: bold;
opacity: 1; opacity: 1;
} }
.s-btn {
background: $colorStatusBtnBg;
padding: 0 $interiorMargin;
height: auto;
line-height: inherit;
}
} }
/* Styles for messages and message banners */ /* Styles for messages and message banners */
@ -146,7 +160,7 @@
left: 50%; left: 50%;
opacity: 1; opacity: 1;
&:not(.info) { &:not(.info) {
@include pulse(100ms, 10); @include pulse($dur: 100ms, $iteration: 10);
} }
} }
@ -295,7 +309,6 @@
.message-contents { .message-contents {
.l-message { .l-message {
//border-bottom: 1px solid pullForward($colorOvrBg, 20%);
@include border-radius($controlCr); @include border-radius($controlCr);
background: rgba($colorOvrFg, 0.1); background: rgba($colorOvrFg, 0.1);
margin-bottom: $interiorMargin; margin-bottom: $interiorMargin;

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

@ -23,7 +23,8 @@
<div id='status' class='status-holder'> <div id='status' class='status-holder'>
<mct-include ng-repeat="indicator in bar.getIndicators()" <mct-include ng-repeat="indicator in bar.getIndicators()"
ng-model="indicator.ngModel" ng-model="indicator.ngModel"
key="indicator.template"> key="indicator.template"
class="status-block-holder">
</mct-include> </mct-include>
</div> </div>
<mct-include key="'message-banner'"></mct-include> <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" </span><span class="label"
ng-class='ngModel.getTextClass()'> ng-class='ngModel.getTextClass()'>
{{ngModel.getText()}} {{ngModel.getText()}}
<a class="s-btn ui-symbol" ng-if="ngModel.configure">G</a>
</span><span class="count"> </span><span class="count">
<!-- Add int count value here if this type of indicator has one or more messages associated with it --> <!-- Add int count value here if this type of indicator has one or more messages associated with it -->
</span><a href='' </span>
class="ui-symbol"
ng-if="ngModel.configure">
G
</a>
</div> </div>

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

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

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

@ -3,9 +3,9 @@
@include boxShdw($shdwBtns); @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 containerSubtle($bg, $fg);
@include btnBase($bg, $bgHov, $fg, $ic); @include btnBase($bg, $bgHovColor, $fg, $ic);
@include text-shadow($shdwItemText); @include text-shadow($shdwItemText);
} }