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

[Frontend] IN-PROGRESS Major restructuring of /platform/commonUI/ to add themes structure

Browse Source 
open #95
New themes bundle files, .scss and directories;
Moved constants definitions (mainly colors) from commonUI/.../_constants
to individual themes _constants files;
tweaks to mixins files;
changed pathways to font and images in commonUI/.../_constants;
This commit is contained in:
Charles Hacskaylo
2015-09-03 15:34:39 -07:00
parent 62898c921f
commit 37c34c668c
24 changed files with 7237 additions and 1145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/general/res/config.rb
View File

@@ -13,7 +13,7 @@ javascripts_dir = "js"
output_style = :nested
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

6101
platform/commonUI/general/res/css/theme-espresso.css
View File

File diff suppressed because it is too large Load Diff

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

@@ -33,62 +33,6 @@ $controlCr: 3px;
$smallCr: 2px;
$badgeW: 35px;
/************************** COLORS AND SHADING */
$colorBodyBg: #333;
$colorBodyFg: #999;
$colorFooterBg: #000;
$colorKey: #0099cc;
$colorKeySelectedBg: #005177;
$colorKeyFg: #fff;
$colorAlt1: #ffc700;
$colorAlert: #ff3c00;
$colorIconLink: #49dedb;
$colorPausedBg: #c56f01;
$colorPausedFg: #fff;
$colorCreateBtn: $colorKey;
$colorGridLines: rgba(#fff, 0.05);
$colorFormLines: rgba(#fff, 0.1);
$colorFormSectionHeader: rgba(#000, 0.2);
$colorInvokeMenu: #fff;
// 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;
// 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%);
// Overlay
$colorOvrBlocker: rgba(black, 0.7);
$colorOvrBg: $colorBodyBg;
$colorOvrFg: $colorBodyFg;
// Items
$colorItemBase: lighten($colorBodyBg, 5%);
$colorItemFg: lighten($colorItemBase, 20%);
$colorItemSelected: $colorKey;
// Tabular
$tabularColorBorder: rgba(white, 0.1);
$tabularColorBodyBg: darken($colorBodyBg, 10%);
$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
$tabularColorHeaderBorder: $colorBodyBg;
/************************** RATIOS */
$ltGamma: 20%;
$btnFontSizeToH: 0.45;
@@ -118,9 +62,6 @@ $treeVCW: 10px;
$treeTypeIconH: 16px;
$treeTypeIconW: 20px;
$treeContextTriggerW: 20px;
$colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeVCHover: $colorAlt1;
// Tabular
$tabularHeaderH: 22px; //18px
$tabularTdPadLR: $itemPadLR;
@@ -157,13 +98,13 @@ $formLRPad: $interiorMargin;
$menuLineH: 1.5rem;
$menuLineHPx: 24px;
$scrollbarTrackSize: 10px;
$scrollbarTrackColorBg: rgba(#000, 0.4);
$btnStdH: 25px;
$btnToolbarH: $btnStdH;
/************************** PATHS */
$dirImgs: '../images/'; // Relative to platform/css/ directory
// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
$dirCommonRes: '../../../../general/res/';
$dirImgs: $dirCommonRes + 'images/';
/************************** TIMINGS */
$controlFadeMs: 100ms;

38
platform/commonUI/general/res/sass/_fonts.scss
View File

@@ -1,38 +0,0 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
@font-face {
/*
* Use https://www.web-font-generator.com/ to gen fonts
*/
font-family: 'symbolsfont';
src: url('../fonts/symbols/wtdsymbols.eot');
src: url('../fonts/symbols/wtdsymbols.eot?#iefix') format('embedded-opentype'),
url('../fonts/symbols/wtdsymbols.woff') format('woff'),
url('../fonts/symbols/wtdsymbols.ttf') format('truetype'),
url('../fonts/symbols/wtdsymbols.svg#armataregular') format('svg');
font-weight: normal;
font-style: normal;
}
.ui-symbol {
font-family: 'symbolsfont';
}

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

@@ -19,6 +19,26 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/************************** FONTS */
@font-face {
/*
* Use https://icomoon.io/app with /platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
*/
font-family: 'symbolsfont';
src: url($dirCommonRes + 'fonts/symbols/wtdsymbols.eot');
src: url($dirCommonRes + 'fonts/symbols/wtdsymbols.eot?#iefix') format('embedded-opentype'),
url($dirCommonRes + 'fonts/symbols/wtdsymbols.woff') format('woff'),
url($dirCommonRes + 'fonts/symbols/wtdsymbols.ttf') format('truetype'),
url($dirCommonRes + 'fonts/symbols/wtdsymbols.svg#armataregular') format('svg');
font-weight: normal;
font-style: normal;
}
.ui-symbol {
font-family: 'symbolsfont';
}
/************************** HTML ENTITIES */
a {
color: #ccc;
cursor: pointer;

4
platform/commonUI/general/res/sass/_icons.scss
View File

@@ -29,10 +29,8 @@
}
.ui-symbol {
$c: $colorKey;
&.icon {
color: $c;
@include txtShdwSubtle();
color: $colorKey;
&.alert {
color: $colorAlert;
&:hover {

1
platform/commonUI/general/res/sass/_main.scss
View File

@@ -21,7 +21,6 @@
*****************************************************************************/
@import "effects";
@import "global";
@import "fonts";
@import "about";
@import "text";
@import "icons";

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

@@ -149,9 +149,9 @@
$ltnRatio: 7%;
$gradRatio: 5%;
$hovRatio: 7%;
$bgBase: lighten($bg, $ltnRatio);
$fgBase: lighten($fg, $ltnRatio);
$gradC1: lighten($bgBase, $gradRatio);
$bgBase: $bg; //pullForward($bg, $ltnRatio);
$fgBase: $fg; // pullForward($fg, $ltnRatio);
$gradC1: lighten($bgBase, $gradRatio); // Container should be lighter higher up
$gradC2: $bgBase;
$cInvokeBase: #fff;
@@ -165,8 +165,8 @@
display: inline-block;
@if $hover == true {
&:not(.disabled):hover {
@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
color: lighten($fgBase, $hovRatio);
@include background-image(linear-gradient(pullForward($gradC1, $hovRatio), pullForward($gradC2, $hovRatio)));
color: pullForward($fgBase, $hovRatio);
}
}
}
@@ -212,7 +212,9 @@
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorKey) {
// $ic: Icon color
@include border-radius($controlCr);
@include containerSubtle($bg, $fg, true);
@include text-shadow(rgba(black, 0.3) 0 1px 1px);
.icon {
color: $ic;
}
@@ -263,6 +265,16 @@
@include text-shadow(rgba(black, $sVal) 0 3px 7px);
}
@function pullForward($c: $colorBodyBg, $p: 20%) {
// For dark interfaces, lighter things come forward
@return lighten($c, $p);
}
@function pushBack($c: $colorBodyBg, $p: 20%) {
// For dark interfaces, darker things move back
@return darken($c, $p);
}
/*********************************************** FORM ELEMENTS */
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include appearance(none);

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

@@ -59,19 +59,15 @@ $pad: $interiorMargin * $baseRatio;
/*********************************** STYLE STYLES */
.s-btn {
$base: lighten($colorBodyBg, 20%);
@include border-radius($controlCr);
@include box-sizing(border-box);
@include text-shadow(rgba(black, 0.3) 0 1px 1px);
@include user-select(none);
//@include containerSubtle($colorBodyBg, $colorBodyFg, true);
cursor: pointer;
text-decoration: none;
height: $btnStdH;
line-height: $btnStdH;
padding: 0 $pad;
font-size: 0.7rem;
font-size: 0.7rem;
.icon {
font-size: 0.8rem;
color: $colorKey;
@@ -89,7 +85,7 @@ $pad: $interiorMargin * $baseRatio;
}
&:not(.major) {
@include btnSubtle($colorBodyBg, $colorBodyFg, $colorKey);
@include btnSubtle($colorBtnBg, $colorBtnFg, $colorBtnIcon);
}
&.major {

52
platform/commonUI/general/res/sass/forms/_mixins.scss
View File

@@ -1,52 +0,0 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include appearance(none);
@include border-radius($controlCr);
@include box-sizing(border-box);
@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
// background: lighten($bg, 20%);
background: rgba(#fff, 0.1);
border: none;
//border-bottom: 1px solid rgba(#fff, 0.1);
color: lighten($fg, 20%);
outline: none;
&.error {
background: rgba(red, 0.5);
}
}
@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include input-base($bg, $fg);
padding: 0 $interiorMarginSm;
}
@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include input-base($bg, $fg);
padding: $interiorMargin;
}
@mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include nice-input($bg, $fg);
background: lighten($bg, 3%);
border-bottom: 1px solid lighten($bg, 10%);
}

36
platform/commonUI/general/res/sass/theme-espresso.scss
View File

@@ -1,36 +0,0 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
@import "compass";
@import "compass/reset";
@import "compass/css3";
@import "compass/utilities";
@import "constants";
@import "mobile/constants";
@import "mixins";
@import "forms/mixins";
@import "mobile/mixins";
@import "themes/theme-espresso";
@import "main";

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

@@ -1,30 +0,0 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* CONSTANTS */
//$colorBodyBg: #fff;
//$colorBodyFg: #666;
/*
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
background: red;
display: inline-block;
}*/