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

[Frontend] IN-PROGRESS Theming continues

Browse Source 
open #95
Shadow and color normalization: fixed-position, tabular;
Updated paint bucket and icon-box in symbols font;
Custom checkboxes now use inset shdw;
This commit is contained in:
Charles Hacskaylo
2015-09-10 15:01:51 -07:00
parent 3b2454c6a9
commit d14c4e08b8
20 changed files with 547 additions and 524 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
View File

@@ -1,8 +1,8 @@
{
"metadata": {
"name": "WTD Symbols v2.2",
"lastOpened": 1439948744240,
"created": 1439948734037
"name": "WTD Symbols v2.",
"lastOpened": 1441911912596,
"created": 1441911876817
},
"iconSets": [
{
@@ -48,7 +48,7 @@
"tempChar": ""
},
{
"order": 81,
"order": 83,
"id": 78,
"prevSize": 32,
"code": 58886,
@@ -268,7 +268,7 @@
"id": 49,
"prevSize": 32,
"code": 224,
"name": "icon-box-round-corners",
"name": "icon-box",
"tempChar": ""
},
{
@@ -840,17 +840,19 @@
{
"id": 78,
"paths": [
"M896 640c0 0-130 188-128 256 2 70.6 57.4 128 128 128s126-57.4 128-128c2-68-128-256-128-256z",
"M449 129l0.2-64.8c0-35.4-28.4-64-63.8-64.2 0 0-0.2 0-0.2 0-35.2 0-63.8 28.6-64 63.8l-0.6 190.8-294 292.6c-50 50-12.4 215.2 112.4 340s290 162.4 340 112.4l417-423.6-447-447zM384 640c-70.6 0-128-57.4-128-128 0-47.4 25.8-89 64.4-111l-0.4 110.8c0 35.4 28.4 64 63.8 64.2 0 0 0.2 0 0.2 0 35.2 0 63.8-28.6 64-63.8l0.4-110.8c38 22.2 63.6 63.4 63.6 110.6 0 70.6-57.4 128-128 128z"
"M544 224v224c0 88.4-71.6 160-160 160s-160-71.6-160-160v-97.2l-197.4 196.4c-50 50-12.4 215.2 112.4 340s290 162.4 340 112.4l417-423.6-352-352z",
"M896 1024c70.6 0 128-57.4 128-128 0-108.6-128-192-128-192s-128 83.4-128 192c0 70.6 57.4 128 128 128z",
"M384 512c-35.4 0-64-28.6-64-64v-384c0-35.4 28.6-64 64-64s64 28.6 64 64v384c0 35.4-28.6 64-64 64z"
],
"attrs": [
{
"fill": "rgb(6,161,75)",
"opacity": 1
"fill": "rgb(6, 161, 75)"
},
{
"fill": "rgb(6,161,75)",
"opacity": 1
"fill": "rgb(6, 161, 75)"
},
{
"fill": "rgb(6, 161, 75)"
}
],
"isMulticolor": false,
@@ -861,9 +863,6 @@
"colorPermutations": {
"16161751": [
1,
1
],
"125525525516161751": [
1,
1
]
@@ -1290,16 +1289,23 @@
{
"id": 49,
"paths": [
"M1024 832c0 105.6-86.4 192-192 192h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640z"
"M0 0h1024v1024h-1024v-1024z"
],
"attrs": [
{}
{
"fill": "rgb(0, 0, 0)"
}
],
"isMulticolor": false,
"grid": 0,
"tags": [
"icon-box-round-corners"
]
],
"colorPermutations": {
"16161751": [
0
]
}
},
{
"id": 48,

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
View File

Binary file not shown.

7
platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
View File

@@ -55,7 +55,7 @@
<glyph unicode="&#x7a;" glyph-name="icon-fullscreen-expand" d="M192.344 128c-0.118 0.1-0.244 0.224-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192h192v192h-191.656zM192 767.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656zM832 960h-192v-192h191.656c0.118-0.1 0.244-0.226 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192zM832 128.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656z" />
<glyph unicode="&#x7b;" glyph-name="icon-pointer-left" horiz-adv-x="512" d="M510-64l-256 512 256 512h-256l-256-512 256-512z" />
<glyph unicode="&#x7d;" glyph-name="icon-pointer-right" horiz-adv-x="512" d="M-2 960l256-512-256-512h256l256 512-256 512z" />
<glyph unicode="&#xe0;" glyph-name="icon-box-round-corners" d="M1024 128c0-105.6-86.4-192-192-192h-640c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640z" />
<glyph unicode="&#xe0;" glyph-name="icon-box" d="M0 960h1024v-1024h-1024v1024z" />
<glyph unicode="&#xe1;" glyph-name="icon-layers" d="M1024 576l-512 384-512-384 512-384zM512 64l-426.666 320-85.334-64 512-384 512 384-85.334 64z" />
<glyph unicode="&#xe2;" glyph-name="icon-line-horz" d="M64 384c-35.346 0-64 28.654-64 64s28.654 64 64 64h896c35.346 0 64-28.654 64-64s-28.654-64-64-64h-896z" />
<glyph unicode="&#xe3;" glyph-name="icon-image" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896 64h-768v768h768v-768zM320 704l-128-128v-448h640v320l-128 128-128-128z" />
@@ -82,9 +82,8 @@
<glyph unicode="&#xe603;" glyph-name="icon-alert-triangle" d="M998.208 111.136l-422.702 739.728c-34.928 61.124-92.084 61.124-127.012 0l-422.702-739.728c-34.928-61.126-5.906-111.136 64.494-111.136h843.428c70.4 0 99.422 50.010 64.494 111.136zM512 128c-35.2 0-64 28.8-64 64s28.8 64 64 64 64-28.8 64-64c0-35.2-28.8-64-64-64zM627.448 577.242l-38.898-194.486c-6.902-34.516-41.35-62.756-76.55-62.756s-69.648 28.24-76.552 62.758l-38.898 194.486c-6.902 34.516 16.25 62.756 51.45 62.756h128c35.2 0 58.352-28.24 51.448-62.758z" />
<glyph unicode="&#xe604;" glyph-name="icon-tabular" d="M0 896v-192h448v256h-384c-35.2 0-64-28.8-64-64zM960 960h-384v-256h448v192c0 35.2-28.8 64-64 64zM576 576h448v-256h-448v256zM0 576h448v-256h-448v256zM0 0c0-35.2 28.8-64 64-64h384v256h-448v-192zM576-64h384c35.2 0 64 28.8 64 64v192h-448v-256z" />
<glyph unicode="&#xe605;" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
<glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M896 320c0 0-130-188-128-256 2-70.6 57.4-128 128-128s126 57.4 128 128c2 68-128 256-128 256zM449 831l0.2 64.8c0 35.4-28.4 64-63.8 64.2 0 0-0.2 0-0.2 0-35.2 0-63.8-28.6-64-63.8l-0.6-190.8-294-292.6c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-447 447zM384 320c-70.6 0-128 57.4-128 128 0 47.4 25.8 89 64.4 111l-0.4-110.8c0-35.4 28.4-64 63.8-64.2 0 0 0.2 0 0.2 0 35.2 0 63.8 28.6 64 63.8l0.4 110.8c38-22.2 63.6-63.4 63.6-110.6 0-70.6-57.4-128-128-128z" />
<glyph unicode="&#xe607;" glyph-name="icon-x-in-circle-heavy" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
<glyph unicode="&#xe608;" glyph-name="icon-info" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 832c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 128h-384v128h128v128h-128v128h320v-256h64v-128z" />
<glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M544 736v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-64c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 448c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
<glyph unicode="&#xe607;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
<glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
<glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
</font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
View File

Binary file not shown.

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
View File

Binary file not shown.

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

@@ -28,9 +28,6 @@ $bodyMargin: 10px;
$interiorMargin: 5px;
$interiorMarginLg: $interiorMargin * 2;
$interiorMarginSm: 3px;
$basicCr: 2px;
$controlCr: 3px;
$smallCr: 2px;
$badgeW: 35px;
/************************** RATIOS */

2
platform/commonUI/general/res/sass/_fixed-position.scss
View File

@@ -76,7 +76,7 @@
}
.l-fixed-position-text {
@include txtShdwSubtle();
//@include txtShdwSubtle();
border: 1px solid transparent;
font-size: 0.8rem;
$p: 1px; //$interiorMarginSm;

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

@@ -223,9 +223,9 @@
}
@mixin txtShdw($sVal) {
@if $sVal != 'none' {
//@if $sVal != 'none' {
@include text-shadow($sVal);
}
//}
}
@mixin txtShdwSubtle($sVal: 0.1) {

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

@@ -59,94 +59,103 @@ $pad: $interiorMargin * $baseRatio;
/*********************************** STYLE STYLES */
.s-btn {
@include box-sizing(border-box);
@include user-select(none);
cursor: pointer;
text-decoration: none;
height: $btnStdH;
line-height: $btnStdH;
padding: 0 $pad;
font-size: 0.7rem;
@include box-sizing(border-box);
@include user-select(none);
cursor: pointer;
text-decoration: none;
height: $btnStdH;
line-height: $btnStdH;
padding: 0 $pad;
font-size: 0.7rem;
.icon {
font-size: 0.8rem;
color: $colorKey;
}
.icon {
font-size: 0.8rem;
color: $colorKey;
}
.title-label {
vertical-align: top;
}
.title-label {
vertical-align: top;
}
&.sm {
padding: 0 $pad / $baseRatio;
}
&.sm {
padding: 0 $pad / $baseRatio;
}
&.vsm {
padding: 0 ($pad / $baseRatio) / 2;
}
&.vsm {
padding: 0 ($pad / $baseRatio) / 2;
}
&.major {
$bg: $colorBtnMajorBg;
$hc: lighten($bg, 10%);
@include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
}
&.major {
$bg: $colorBtnMajorBg;
$hc: lighten($bg, 10%);
@include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
}
&:not(.major) {
// bg, bgHov, fg, ic
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
}
&:not(.major) {
// bg, bgHov, fg, ic
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
}
&.pause-play {
&.paused {
@include btnSubtle($colorPausedBg, lighten($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
.icon:before {
content: "\0000EF";
}
}
}
&.pause-play {
/*
&.paused {
.icon {
@include pulse(500ms);
}
}
*/
.icon:before {
content: "\0000F1";
}
}
//&.paused {
// @include btnSubtle($colorPausedBg, lighten($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
// .icon {
// @include pulse(500ms);
// &:before {
// content: "\0000EF";
// }
// }
//}
&.show-thumbs {
.icon:before {
content: "\000039";
}
}
&.pause-play {
.icon:before {
content: "\0000F1";
}
&.paused {
@include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
.icon {
@include pulse(1000ms);
:before {
content: "\0000EF";
}
}
}
}
&.show-thumbs {
.icon:before {
content: "\000039";
}
}
}
.l-btn-set {
// Buttons that have a very tight conceptual grouping - no internal space between them.
// Structure: .btn-set > mct-representation class=first|last > .s-btn
//@include test(red);
font-size: 0; // Remove space between s-btn elements due to white space in markup
// Buttons that have a very tight conceptual grouping - no internal space between them.
// Structure: .btn-set > mct-representation class=first|last > .s-btn
//@include test(red);
font-size: 0; // Remove space between s-btn elements due to white space in markup
.s-btn {
@include border-radius(0);
margin-left: 1px;
}
.s-btn {
@include border-radius(0);
margin-left: 1px;
}
.first {
.s-btn {
@include border-left-radius($controlCr);
margin-left: 0;
}
}
.first {
.s-btn {
@include border-left-radius($controlCr);
margin-left: 0;
}
}
.last {
.s-btn {
@include border-right-radius($controlCr);
}
}
.last {
.s-btn {
@include border-right-radius($controlCr);
}
}
}
/*********************************** LAYOUT STYLES */
/*

12
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@@ -138,7 +138,7 @@
}
label.checkbox.custom {
$bg: lighten($colorBodyBg, $ltGamma);
$bg: pullForward($colorBodyBg, 10%);
$d: $formRowCtrlsH;
cursor: pointer;
display: inline-block;
@@ -154,8 +154,9 @@ label.checkbox.custom {
min-width: $d;
&:before {
@include border-radius($basicCr * .75);
background: $bg;
border-bottom: 1px solid lighten($bg, 10%);
//background: $bg;
//border-bottom: 1px solid lighten($bg, 10%);
@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
box-sizing: border-box;
content: " ";
font-family: 'symbolsfont';
@@ -344,7 +345,10 @@ label.checkbox.custom {
@include desktop {
::-webkit-scrollbar {
@include sliderTrack();
@include border-radius(2px);
@include box-sizing(border-box);
@include box-shadow(inset $scrollbarTrackShdw);
background-color: $scrollbarTrackColorBg;
height: $scrollbarTrackSize;
width: $scrollbarTrackSize;
}

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

@@ -158,9 +158,8 @@
.super-menu {
$w: 500px;
$h: $w - 20;
$plw: 50%; //$w * 0.5;
$prw: 50%; //$w - $plw;
//$fg: #fff; //lighten($colorBodyFg, 40%);
$plw: 50%;
$prw: 50%;
display: block;
width: $w;
height: $h;
@@ -171,7 +170,7 @@
@include box-sizing(border-box);
&.left {
//@include test();
border-right: 1px solid rgba(white, 0.2);
border-right: 1px solid pullForward($colorMenuBg, 10%);
left: 0;
padding-right: $interiorMargin;
right: auto;

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

@@ -14,7 +14,7 @@
min-height: 100px;
min-width: 150px;
.l-image-main {
background-color: rgba(#fff, 0.1);
background-color: $colorPlotBg;
bottom: $imageMainControlBarH + $interiorMargin;
}
.l-image-main-controlbar {
@@ -66,7 +66,7 @@
}
.l-date,
.l-time {
color: #fff;
color: pullForward($colorBodyFg, 20%);
}
.l-mag {
direction: ltr;
@@ -77,7 +77,7 @@
}
}
.s-mag {
color: darken($colorBodyFg, 20%);
color: pushBack($colorBodyFg, 20%);
}
.l-btn.show-thumbs {
display: none;

9
platform/commonUI/general/res/sass/items/_item.scss
View File

@@ -29,12 +29,10 @@
&.grid-item {
//div { @include test() }
$d: $ueBrowseGridItemLg;
//$iconD: 100px;
$iconMargin: 40px;
$iconD: ($d - ($iconMargin * 2)) * 0.85;
$transTime: 200ms;
//@include btnSubtle($colorItemBg);
@include btnSubtle($colorItemBg, $colorItemFg, $colorItemIcon);
@include btnSubtle($colorItemBg, pullForward($colorItemBg, 20%), $colorItemFg, $colorItemIcon);
box-sizing: border-box;
cursor: pointer;
float: left;
@@ -51,7 +49,6 @@
}
}
.item-open {
//display: block;
opacity: 1;
}
}
@@ -80,7 +77,6 @@
}
&.bottom-bar {
top: auto;
//height: $ueBrowseGridItemBottomBarH;
line-height: 110%;
}
}
@@ -101,9 +97,7 @@
bottom: auto;
height: $iconD;
top: $iconMargin - 10;
//line-height: $lh;
.l-icon-link {
// When the link icon is in the item-type icon holder
color: $colorIconLink;
height: auto;
line-height: 100%;
@@ -115,7 +109,6 @@
}
}
.item-open {
//@include test();
@include trans-prop-nice("opacity", $transTime);
opacity: 0;
color: $colorItemOpenIcon;

24
platform/commonUI/general/res/sass/lists/_tabular.scss
View File

@@ -29,30 +29,22 @@ table {
@include box-sizing(border-box);
border-spacing: 0;
border-collapse: collapse;
color: #fff;
display: table;
font-size: 0.75rem;
position: relative;
//height: 100%; MOVED
width: 100%;
thead, .thead,
tbody tr, .tbody .tr {
//display: table; MOVED
width: 100%;
//table-layout: fixed; MOVED
}
thead, .thead {
border-bottom: 1px solid $tabularColorHeaderBorder;
border-bottom: 1px solid $colorTabHeaderBorder;
}
tbody, .tbody {
//@include absPosDefault(0); MOVED
//top: $tabularHeaderH; MOVED
//display: block; MOVED
//overflow-y: scroll; MOVED
display: table-row-group;
tr, .tr {
&:hover {
background: rgba(white, 0.1);
background: rgba($colorTabBodyFg, 0.1);
}
}
}
@@ -64,17 +56,17 @@ table {
&.group-header {
td, .td {
$d: 5%;
background-color: darken($tabularColorHeaderBg, $d);
color: darken($tabularColorHeaderFg, $d);
background-color: pushBack($colorTabHeaderBg, $d);
color: pushBack($colorTabHeaderFg, $d);
}
}
th, .th, td, .td {
display: table-cell;
}
th, .th {
background-color: $tabularColorHeaderBg;
border-left: 1px solid $tabularColorHeaderBorder;
color: $tabularColorHeaderFg;
background-color: $colorTabHeaderBg;
border-left: 1px solid $colorTabHeaderBorder;
color: $colorTabHeaderFg;
padding: $tabularTdPadLR $tabularTdPadLR;
white-space: nowrap;
vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
@@ -99,7 +91,7 @@ table {
}
}
td, .td {
border-bottom: 1px solid $tabularColorBorder;
border-bottom: 1px solid $colorTabBorder;
min-width: 20px;
color: $colorTelemFresh;
padding: $tabularTdPadTB $tabularTdPadLR;

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

@@ -25,6 +25,7 @@
z-index: 100;
}
.clk-icon.close {
font-size: 0.8rem;
position: absolute;
top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
z-index: 100;