alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'nasa/open1392' into open1392b

Browse Source 
Conflicts:
	platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
	platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
	platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
	platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
This commit is contained in:
Victor Woeltjen
2015-06-29 16:09:01 -07:00
parent 0b4aa730f4 a7c90f2476
commit 970698c77b
23 changed files with 573 additions and 531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
platform/commonUI/general/res/sass/_constants.scss
View File

@@ -20,10 +20,10 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
// Features
/************************** FEATURES */
$enableImageryThumbs: false; // Set to true if historical imagery thumbnails are supported
// Margins, spacing, radii
/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
$bodyMargin: 10px;
$interiorMargin: 5px;
$interiorMarginLg: $interiorMargin * 2;
@@ -33,7 +33,7 @@ $controlCr: 2px;
$smallCr: 2px;
$badgeW: 35px;
// Colors and shading
/************************** COLORS AND SHADING */
$colorBodyBg: #333;
$colorBodyFg: #999;
$colorFooterBg: #000;
@@ -44,64 +44,68 @@ $colorAlt1: #ffc700;
$colorAlert: #ff3c00;
$colorPausedBg: #c56f01;
$colorPausedFg: #fff;
$colorCheck: $colorKey;
$colorCreateBtn: $colorKey;
$colorGridLines: rgba(#fff, 0.05);
// Menu colors
$colorMenuBg: lighten($colorBodyBg, 23%);
$colorMenuFg: lighten($colorMenuBg, 70%);
$colorMenuIc: lighten($colorKey, 17%);
$colorInteriorBorder: lighten($colorBodyBg, 10%);
$colorObjFrameBg: darken($colorBodyBg, 5%);
// Form colors
$colorCheck: $colorKey;
$colorFormRequired: #ffc700;
$colorFormValid: #33cc33;
$colorFormError: #cc0000;
$colorFormInvalid: #ff9900;
$colorGridLines: rgba(#fff, 0.05);
// Limits and staleness colors
$colorLimitYellow: #9d7500;
$colorLimitRed: #aa0000;
$colorTelemFresh: #fff;
$colorTelemStale: #888;
$styleTelemStale: italic;
// Bubble colors
$colorInfoBubbleFg: #666;
$colorInfoBubbleBg: #ddd;
$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
$colorLimitYellow: #9d7500;
$colorLimitRed: #aa0000;
$colorTelemFresh: #fff;
$colorTelemStale: #888;
$styleTelemState: italic;
$colorInfoBubbleFg: #666;
$colorInfoBubbleBg: #ddd;
// Ratios
$ltGamma: 20%;
$btnFontSizeToH: 0.45;
// User Environment
$ueTopBarH: 24px; // Change to when breadcrumb is enabled
$ueTopBarEditH: 30px;
$ueTopBarBtnH: 35px;
$ueFooterH: 20px;
$ueColMargin: 1.5%;
$ueAppLogoW: 105px;
//$ueBrowseViewBarH: $ueTopBarH; // was 30px
$ueEditToolBarH: 25px;
$ueBrowseLeftPaneW: 25%;
$ueEditLeftPaneW: 75%;
// Overlay
$colorOvrBlocker: rgba(black, 0.7);
$colorOvrBg: $colorBodyBg;
$colorOvrFg: $colorBodyFg;
$ovrTopBarH: 60px;
$ovrFooterH: 40px;
//Items
$ueBrowseGridItemLg: 200px;
$ueBrowseGridItemTopBarH: 20px;
$ueBrowseGridItemBottomBarH: 30px;
// Items
$colorItemBase: lighten($colorBodyBg, 5%);
$colorItemFg: lighten($colorItemBase, 20%);
$colorItemSelected: $colorKey;
$itemPadLR: 5px;
// Tabular
$tabularColorBorder: rgba(white, 0.1);
$tabularColorBodyBg: darken($colorBodyBg, 10%);
$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
/************************** RATIOS */
$ltGamma: 20%;
$btnFontSizeToH: 0.45;
/************************** LAYOUT */
$ueTopBarH: 24px; // Change when breadcrumb is enabled
$ueTopBarEditH: 30px;
$ueTopBarBtnH: 35px;
$ueFooterH: 25px;
$ueColMargin: 1.5%;
$ueAppLogoW: 105px;
$ueEditToolBarH: 25px;
$ueBrowseLeftPaneW: 25%;
$ueEditLeftPaneW: 75%;
// Overlay
$ovrTopBarH: 60px;
$ovrFooterH: 40px;
// Items
$ueBrowseGridItemLg: 200px;
$ueBrowseGridItemTopBarH: 20px;
$ueBrowseGridItemBottomBarH: 30px;
$itemPadLR: 5px;
// Tree
$treeVCW: 10px;
$treeTypeIconW: 20px;
@@ -109,18 +113,33 @@ $treeContextTriggerW: 20px;
$colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeVCHover: $colorAlt1;
//Tabular
// Tabular
$tabularHeaderH: 18px;
$tabularTdPadLR: $itemPadLR;
$tabularTdPadTB: 2px;
$tabularColorBorder: rgba(white, 0.1);
$tabularColorBodyBg: darken($colorBodyBg, 10%);
$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
// Imagery
$imageMainControlBarH: 20px;
$imageThumbsD: 120px;
$imageThumbsWrapperH: $imageThumbsD * 1.4;
$imageThumbPad: 1px;
// Ticks
$ticksH: 25px;
$tickLblVMargin: 3px;
$tickLblH: 15px;
$tickLblW: 50px;
$tickH: $ticksH - $tickLblVMargin - $tickLblH;
$tickW: 1px;
// Bubbles
$bubbleArwSize: 10px;
$bubblePad: $interiorMargin;
$bubbleMinW: 100px;
$bubbleMaxW: 300px;
// Forms
$reqSymbolW: 15px;
$reqSymbolM: $interiorMargin * 2;
$reqSymbolFontSize: 0.7em;
// Controls
/************************** CONTROLS */
$controlCr: $basicCr;
$controlDisabledOpacity: 0.3;
$formLabelW: 20%;
@@ -132,34 +151,9 @@ $scrollbarTrackColorBg: rgba(#000, 0.4);
$btnStdH: 25px;
$btnToolbarH: $btnStdH;
// Paths
/************************** PATHS */
$dirImgs: '../images/'; // Relative to platform/css/ directory
// Ticks
$ticksH: 25px;
$tickLblVMargin: 3px;
$tickLblH: 15px;
$tickLblW: 50px;
$tickH: $ticksH - $tickLblVMargin - $tickLblH;
$tickW: 1px;
// Imagery
$imageMainControlBarH: 20px;
$imageThumbsD: 120px;
$imageThumbsWrapperH: $imageThumbsD * 1.4;
$imageThumbPad: 1px;
// Bubbles
$bubbleArwSize: 10px;
$bubblePad: $interiorMargin;
$bubbleMinW: 100px;
$bubbleMaxW: 300px;
// Timing
/************************** TIMINGS */
$controlFadeMs: 100ms;
// Forms
$reqSymbolW: 15px;
$reqSymbolM: $interiorMargin * 2;
$reqSymbolFontSize: 0.7em;

5
platform/commonUI/general/res/sass/_global.scss
View File

@@ -29,10 +29,13 @@ a {
}
body, html {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: $colorBodyBg;
color: $colorBodyFg;
font-family: Helvetica, Arial, sans-serif;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
//font-weight: 500;
height: 100%;
width: 100%;
overflow: hidden;

2
platform/commonUI/general/res/sass/_hide-non-functional.scss
View File

@@ -31,7 +31,7 @@
.browse-area.holder {
// When .browse.top-bar is hidden, set the top of the browse-area holder
top: $interiorMargin;
top: $bodyMargin;
> .contents.split-layout {
// Don't pad in from top and bottom
//top: 0; bottom: 0;

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

@@ -25,6 +25,7 @@ $pad: $interiorMargin * $baseRatio;
/******* LAYOUT AND SIZING */
.btn,
.l-btn {
@include user-select(none);
line-height: 1.5em; // Was 1.25em
padding: 0 $pad;
text-decoration: none;

78
platform/commonUI/general/res/sass/controls/_menus.scss
View File

@@ -37,7 +37,6 @@
ul {
@include menuUlReset();
li {
// @include border-radius($controlCr);
@include box-sizing(border-box);
border-top: 1px solid lighten($bg, 20%);
line-height: $menuLineH;
@@ -65,20 +64,39 @@
}
}
}
.context-menu,
.super-menu {
$bg: $colorMenuBg;
$fg: $colorMenuFg;
$ic: $colorMenuIc;
//font-size: 0.80rem;
pointer-events: auto;
@include containerSubtle($bg);
ul li {
padding-left: 25px;
a { color: $fg; }
.icon {
color: $ic;
}
.type-icon {
left: $interiorMargin;
}
&:hover .icon {
color: lighten($ic, 5%);
}
}
}
.super-menu {
$w: 450px;
$w: 500px;
$h: $w - 20;
$plw: 50%; //$w * 0.5;
$prw: 50%; //$w - $plw;
$bg: $colorKey;
$fg: $colorKeyFg;
$colorMid: lighten($bg, 25%);
$bgHover: $bg;
@include containerSubtle(darken($bg, 15%), $fg);
$fg: #fff; //lighten($colorBodyFg, 40%);
$bgHover: $colorKey; //$bg;
display: block;
.icon {
color: $colorMid;
}
width: $w;
height: $h;
.contents {
@@ -98,21 +116,8 @@
ul {
li {
@include border-radius($controlCr);
// @include test(red);
padding-left: 30px;
border-top: none;
color: $fg;
// font-size: 0.85em;
// line-height: 20px;
&:hover {
background: $bgHover;
.icon {
color: lighten($bg, 50%);
}
}
.icon {
@include txtShdwSubtle(0.4);
left: $interiorMargin;
}
}
}
}
@@ -122,13 +127,14 @@
right: 0;
padding: $interiorMargin * 5;
width: $prw;
.icon {
color: $fg;
}
}
}
.menu-item-description {
.desc-area {
// @include test(green);
&.icon {
//@include test(red);
$h: 150px;
position: relative;
font-size: 8em;
@@ -153,27 +159,7 @@
}
}
.context-menu {
$bg: lighten($colorBodyBg, 25%);
$fg: lighten($bg, 70%);
$ic: lighten($colorKey, 15%);
font-size: 0.80rem;
pointer-events: auto;
&.menu {
@include containerSubtle($bg);
ul li {
padding-left: 30px;
a { color: $fg; }
.icon {
color: $ic;
}
.type-icon {
left: $interiorMargin;
}
&:hover .icon {
color: lighten($ic, 5%);
}
}
}
}
}

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

@@ -47,7 +47,7 @@
}
.l-image-main {
cursor: crosshair;
//cursor: crosshair;
}
.l-image-main-controlbar {

10
platform/commonUI/general/res/sass/features/_time-display.scss
View File

@@ -3,7 +3,6 @@
// Layout
&:hover {
.l-btn.control {
//display: inline-block;
opacity: 1;
}
}
@@ -20,6 +19,9 @@
position: absolute;
left: 0;
z-index: 1;
.ui-symbol.direction {
font-size: 0.8em;
}
}
&:hover .l-elem.l-value {
left: 20px;
@@ -35,10 +37,10 @@
}
.l-btn.control {
@include trans-prop-nice-fade($transTime);
//display: none;
opacity: 0;
font-size: 0.9em;
line-height: 1em;
font-size: 0.65em;
vertical-align: top;
//line-height: 1em;
}
}

3
platform/commonUI/general/res/sass/overlay/_overlay.scss
View File

@@ -65,7 +65,8 @@
.bottom-bar {
top: auto; right: 0; bottom: 0; left: 0;
font-size: 1em;
overflow: visible;
//font-size: 1em;
height: $ovrFooterH;
text-align: right;
.btn {

3
platform/commonUI/general/res/sass/themes/_theme-espresso.scss
View File

@@ -19,5 +19,4 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* CONSTANTS */
$bodyMargin: 5px;
/* CONSTANTS */

41
platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss
View File

@@ -20,24 +20,31 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
.ue-bottom-bar {
background: $colorFooterBg;
color: lighten($colorBodyBg, 30%);
font-size: 0.65rem;
line-height: $ueFooterH - 4px;
font-size: .7rem;
//line-height: $ueFooterH - 4px;
//line-height: $ueFooterH; // New status bar design
.status-holder {
@include border-radius($basicCr * 1.75);
//@include border-radius($basicCr * 1.75); // New status bar design
@include box-sizing(border-box);
background: $colorFooterBg;
border-bottom: 1px solid lighten($colorBodyBg, 10%);
padding: 2px 5px;
//background: $colorFooterBg;
//border-bottom: 1px solid lighten($colorBodyBg, 10%); // New status bar design
@include absPosDefault($interiorMargin);
@include ellipsize();
line-height: $ueFooterH - ($interiorMargin * 2);
right: 120px;
text-transform: uppercase;
}
.app-logo {
@include box-sizing(border-box);
@include absPosDefault($interiorMargin);
left: auto;
cursor: pointer;
font-size: 0.8em;
line-height: $ueFooterH - 10px;
padding-top: 1px;
text-transform: uppercase;
//font-size: 0.8em;
//line-height: $ueFooterH - 10px;
//padding-top: 1px;
//text-transform: uppercase;
&.logo-openmctweb {
background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
}
@@ -45,16 +52,16 @@
}
.status.block {
display: inline-block;
margin-right: $interiorMargin * 4;
//display: inline-block;
display: inline; // New status bar design. Inline to support ellipsis overflow
margin-right: $interiorMargin * 2;
.status-indicator {
@include border-radius($controlCr * 0.9);
@include box-shadow(inset rgba(black, 0.5) 0 0 3px);
@include text-shadow(rgba(black, 0.3) 0 0 2px);
//@include border-radius($controlCr * 0.9);
//@include box-shadow(inset rgba(black, 0.5) 0 0 3px);
//@include text-shadow(rgba(black, 0.3) 0 0 2px);
display: inline-block;
//font-size: 1.25em; // Normalized for new wtdsymbols font v2
//vertical-align: middle; // Normalized for new wtdsymbols font v2
margin-right: $interiorMarginSm;
color: $colorKey;
&.ok {
color: #009900;
}

11
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@@ -30,7 +30,7 @@
}
.holder-all {
$myM: $interiorMarginSm;
$myM: 0; // $interiorMarginSm;
top: $myM;
right: $myM;
bottom: $myM;
@@ -93,7 +93,7 @@
.editor {
top: $bodyMargin + $ueTopBarH + ($interiorMargin);
right: $bodyMargin;
bottom: $bodyMargin + $ueFooterH + $interiorMargin;
bottom: $ueFooterH + $bodyMargin;
left: $bodyMargin;
}
@@ -119,15 +119,18 @@
}
.bottom-bar {
@include absPosDefault($bodyMargin);
//@include absPosDefault($bodyMargin);
@include absPosDefault(0);// New status bar design
top: auto;
height: $ueFooterH;
.status-holder {
right: $ueAppLogoW + $bodyMargin;
//right: $ueAppLogoW + $bodyMargin; New status bar design
z-index: 1;
}
.app-logo {
left: auto;
width: $ueAppLogoW;
z-index: 2;
}
}
}