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

open 
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

View File

@ -8,6 +8,7 @@
"platform/commonUI/dialog",
"platform/commonUI/general",
"platform/commonUI/inspect",
"platform/commonUI/themes/espresso",
"platform/containment",
"platform/execution",
"platform/telemetry",

View File

@ -24,10 +24,6 @@
{
"stylesheetUrl": "css/normalize.min.css",
"priority": "mandatory"
},
{
"stylesheetUrl": "css/theme-espresso.css",
"priority": 1000
}
],
"templates": [

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

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;

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';
}

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;

View File

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

View File

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

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);

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 {

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%);
}

View File

@ -0,0 +1,12 @@
{
"name": "Espresso",
"description": "Espresso theme: dark and rich",
"extensions": {
"stylesheets": [
{
"stylesheetUrl": "css/theme-espresso.css",
"priority": 1000
}
]
}
}

View File

@ -0,0 +1,26 @@
# Require any additional compass plugins here.
# require "compass-growl"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
# You can select your preferred output style here (can be overridden via the command line):
# :expanded, :compressed, :nested
output_style = :nested
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass

View File

@ -0,0 +1,68 @@
/************************** COLORS AND SHADING */
$colorBodyBg: #333;
$colorBodyFg: #999;
$colorFooterBg: #000;
$colorKey: #0099cc;
$colorKeySelectedBg: #005177;
$colorKeyFg: #fff;
$contrastRatio: 7%;
$colorBtnBg: pullForward($colorBodyBg, $contrastRatio);
$colorBtnFg: $colorBodyFg;
$colorBtnIcon: $colorKey;
$colorInvokeMenu: #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;
// Tree
$colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeVCHover: $colorAlt1;
// Scrollbar
$scrollbarTrackColorBg: rgba(#000, 0.4);

View File

@ -0,0 +1,9 @@
@function pullForward($c: $colorBodyBg, $p: 20%) {
// For dark interfaces, lighter things come forward - opposite for light interfaces
@return lighten($c, $p);
}
@function pushBack($c: $colorBodyBg, $p: 20%) {
// For dark interfaces, darker things move back - opposite for light interfaces
@return darken($c, $p);
}

View File

@ -25,12 +25,12 @@
@import "compass/css3";
@import "compass/utilities";
@import "constants";
@import "mobile/constants";
@import "../../../../general/res/sass/_mixins";
@import "../../../../general/res/sass/mobile/mixins";
@import "mixins";
@import "forms/mixins";
@import "mobile/mixins";
@import "themes/theme-espresso";
@import "main";
@import "../../../../general/res/sass/constants";
@import "../../../../general/res/sass/mobile/constants";
@import "constants";
@import "../../../../general/res/sass/main";

View File

@ -0,0 +1,12 @@
{
"name": "Sonw",
"description": "Snow theme: light and cool",
"extensions": {
"stylesheets": [
{
"stylesheetUrl": "css/theme-snow.css",
"priority": 1000
}
]
}
}

View File

@ -0,0 +1,26 @@
# Require any additional compass plugins here.
# require "compass-growl"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
# You can select your preferred output style here (can be overridden via the command line):
# :expanded, :compressed, :nested
output_style = :nested
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,68 @@
/************************** COLORS AND SHADING */
$colorBodyBg: #fff;
$colorBodyFg: #666;
$colorFooterBg: #000;
$colorKey: #0099cc;
$colorKeySelectedBg: #005177;
$colorKeyFg: #fff;
$contrastRatio: 25%;
$colorBtnBg: pullForward($colorBodyBg, $contrastRatio);
$colorBtnFg: $colorBodyBg;
$colorBtnIcon: $colorBtnFg;
$colorInvokeMenu: #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;
// Tree
$colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeVCHover: $colorAlt1;
// Scrollbar
$scrollbarTrackColorBg: rgba(#000, 0.4);

View File

@ -0,0 +1,7 @@
.s-btn {
&.major {
$bg: $colorKey;
$fg: lighten($bg, 70%);
@include btnSubtle($bg, $fg, $fg, 0);
}
}

View File

@ -0,0 +1,48 @@
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false, $contrastRatio: 20%) {
$hovRatio: 5%;
$bgBase: $bg; //pullForward($bg, $contrastRatio);
$fgBase: $fg; //pushBack($bg, $contrastRatio);
background-color: $bgBase;
@include border-radius($controlCr);
@include box-sizing(border-box);
//@include boxShdwSubtle();
//border: none;
//border-top: 1px solid lighten($gradC1, 2%);
display: inline-block;
@if $hover == true {
&:not(.disabled):hover {
background-color: $colorKey; //pullForward($bgBase, $hovRatio);
//color: pushBack($fgBase, $hovRatio);
}
}
}
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorBtnIcon, $contrastRatio: 20%) {
// $ic: Icon color
@include border-radius($controlCr);
@include containerSubtle($bg, $fg, true, 30%);
color: $ic;
.icon {
color: $ic;
}
/* &:not(.disabled) {
&:not(.paused) {
&:hover {
.icon {
color: pullForward($ic, $ltGamma);
}
}
}
}*/
}
@function pullForward($c: $colorBodyBg, $p: 20%) {
// For dark interfaces, lighter things come forward - opposite for light interfaces
@return darken($c, $p);
}
@function pushBack($c: $colorBodyBg, $p: 20%) {
// For dark interfaces, darker things move back - opposite for light interfaces
@return lighten($c, $p);
}

View File

@ -19,12 +19,28 @@
* 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;
}*/
@import "compass";
@import "compass/reset";
@import "compass/css3";
@import "compass/utilities";
@import "../../../../general/res/sass/_mixins";
@import "../../../../general/res/sass/mobile/mixins";
@import "mixins";
@import "../../../../general/res/sass/constants";
@import "../../../../general/res/sass/mobile/constants";
@import "constants";
@import "../../../../general/res/sass/main";
@import "controls";