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

[Frontend] Significant re-factoring of CSS and markup

Browse Source 
open #95
IN-PROGRESS!;
Mostly buttons and menus classes (s-btn and s-menu);
Removed unused templates and .css files;
Normalized some button containers;
This commit is contained in:
Charles Hacskaylo
2015-09-02 18:02:58 -07:00
parent 2cbe686732
commit bb1a02c8bd
34 changed files with 3022 additions and 3466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,7 +29,7 @@
font-size: 0.75rem;
&:hover {
.l-autoflow-header .l-btn.change-column-width {
.l-autoflow-header .s-btn.change-column-width {
@include trans-prop-nice-fade(50ms);
opacity: 1;
}
@@ -45,7 +45,7 @@
span {
vertical-align: middle;
}
.l-btn.change-column-width {
.s-btn.change-column-width {
@include trans-prop-nice-fade(500ms);
opacity: 0;
}

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

@@ -49,6 +49,7 @@ $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%);
@@ -105,7 +106,7 @@ $ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px;
// Overlay
$ovrTopBarH: 60px;
$ovrFooterH: 40px;
$ovrFooterH: 30px;
$overlayMargin: 25px;
// Items
$ueBrowseGridItemLg: 200px;
@@ -125,7 +126,7 @@ $tabularHeaderH: 22px; //18px
$tabularTdPadLR: $itemPadLR;
$tabularTdPadTB: 3px;
// Imagery
$imageMainControlBarH: 22px;
$imageMainControlBarH: 25px;
$imageThumbsD: 120px;
$imageThumbsWrapperH: $imageThumbsD * 1.4;
$imageThumbPad: 1px;

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

@@ -54,7 +54,7 @@
display: inline-block;
}
.btn-menu .invoke-menu,
.s-menu .invoke-menu,
.icon.major .invoke-menu {
margin-left: $interiorMarginSm;
}

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

@@ -19,27 +19,19 @@
* 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 "mixins";
@import "forms/mixins";
@import "mobile/mixins";
@import "effects";
@import "global";
@import "fonts";
@import "user-environ/layout";
@import "mobile/layout";
@import "fixed-position";
@import "about";
@import "text";
@import "icons";
@import "limits";
@import "data-status";
@import "lists/tabular";
@import "helpers/bubbles";
@import "helpers/splitter";
@import "helpers/wait-spinner";
@import "messages";
@import "properties";
/********************************* CONTROLS */
@import "controls/breadcrumb";
@@ -50,7 +42,6 @@
@import "controls/menus";
@import "controls/time-controller";
@import "mobile/controls/menus";
@import "edit/editor";
/********************************* FORMS */
@import "forms/elems";
@@ -62,13 +53,14 @@
@import "forms/validation";
@import "forms/filter";
@import "plots/plots-main";
/********************************* USER ENVIRON */
@import "user-environ/layout";
@import "mobile/layout";
@import "edit/editor";
@import "search/search";
@import "mobile/search/search";
@import "overlay/overlay";
@import "mobile/overlay/overlay";
/********************************* USER ENVIRON */
@import "tree/tree";
@import "mobile/tree";
@import "user-environ/frame";
@@ -76,14 +68,10 @@
@import "user-environ/bottom-bar";
@import "user-environ/tool-bar";
/********************************* HELPERS */
@import "helpers/bubbles";
@import "helpers/splitter";
@import "helpers/wait-spinner";
@import "messages";
@import "properties";
/********************************* VIEWS */
@import "fixed-position";
@import "lists/tabular";
@import "plots/plots-main";
@import "iframe";
@import "hide-non-functional";
@import "views";

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

@@ -153,28 +153,22 @@
$fgBase: lighten($fg, $ltnRatio);
$gradC1: lighten($bgBase, $gradRatio);
$gradC2: $bgBase;
$cInvokeBase: lighten($gradC1, $ltnRatio*2);
$cInvokeBase: #fff;
@include background-image(linear-gradient($gradC1, $gradC2));
@include border-radius($controlCr);
@include box-sizing(border-box);
@include boxShdwSubtle();
border: none;
border-top: 1px solid lighten($gradC1, 2%);
//border-top: 1px solid lighten($gradC1, 2%);
color: $fg;
display: inline-block;
@if $hover == true {
&:not(.disabled):hover {
@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
color: lighten($fgBase, $hovRatio);
&.btn-menu .invoke-menu {
color: lighten($cInvokeBase, $hovRatio);
}
}
}
&.btn-menu .invoke-menu {
color: $cInvokeBase;
}
}
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
@@ -216,17 +210,21 @@
}
}
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorKey) {
// $ic: Icon color
@include containerSubtle($bg, $fg, true);
}
@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
// No longer should be used; use btnSubtle instead
//@include containerSubtle($bg, $fg, true);
//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
/* &:not(.disabled):hover {
@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
}*/
.icon {
color: $ic;
}
&:not(.disabled) {
&:not(.paused) {
&:hover {
.icon {
color: lighten($ic, $ltGamma);
}
}
}
}
}
@mixin boxIncised($sVal: 0.6) {

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

@@ -23,8 +23,7 @@ $baseRatio: 1.5;
$pad: $interiorMargin * $baseRatio;
/******* LAYOUT AND SIZING */
.btn,
.l-btn {
/*.l-btn {
@include user-select(none);
//line-height: 1.5em; // Was 1.25em
line-height: 150%;
@@ -35,14 +34,13 @@ $pad: $interiorMargin * $baseRatio;
$h: $ueTopBarH; // - $interiorMargin;
height: $h;
line-height: $h - 2;
//padding: 0 $pad * 6 0 $pad;
padding: 0 $pad * 3;
}
&.create-btn {
font-size: 1em;
&:before {
content:"+";
font-family: symbolsfont;
font-size: 0.8em;
}
.menu {
margin-left: $pad * -1;
@@ -57,105 +55,109 @@ $pad: $interiorMargin * $baseRatio;
&.vsm {
padding: 0 ($pad / $baseRatio) / 2;
}
}
}*/
/*********************************** STYLE STYLES */
.btn,
.s-btn {
$base: lighten($colorBodyBg, 20%); // Moved to 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;
//line-height: 1.2em;
text-decoration: none;
&.major {
$bg: $colorKey;
@include btnSubtle($bg);
$fg: lighten($bg, 50%);
color: $fg;
&:hover {
@include btnSubtle(lighten($bg, 5%), $fg);
//color: $fg;
}
.invoke-menu {
color: $fg;
}
}
&.subtle {
@include btnSubtle($base, lighten($base, 40%));
}
&.very-subtle,
&.s-very-subtle {
@include containerSubtle($colorBodyBg, $colorBodyFg, true);
&.paused {
@include containerSubtle($colorPausedBg, $colorPausedFg, true);
.icon:before {
content:"\0000EF";
}
}
}
}
height: $btnStdH;
line-height: $btnStdH;
padding: 0 $pad;
.icon-btn,
.s-icon-btn {
@extend .s-btn;
font-size: 1em;
font-size: 0.7rem;
.icon {
font-size: 0.8rem;
color: $colorKey;
}
.title-label {
vertical-align: top;
}
&.sm {
padding: 0 $pad / $baseRatio;
}
&.vsm {
padding: 0 ($pad / $baseRatio) / 2;
}
&:not(.major) {
@include btnSubtle($colorBodyBg, $colorBodyFg, $colorKey);
}
&.major {
$bg: $colorKey;
$fg: lighten($bg, 70%);
@include btnSubtle($bg, $fg, $fg);
}
&.paused {
.icon {
color: $colorPausedFg;
}
}
&:not(.disabled) {
&:not(.paused) {
&:hover {
.icon {
color: lighten($colorKey, $ltGamma);
}
}
}
}
&.labeled {
padding: 0 $pad/2;
.icon {
//font-size: 1.5em;
}
.title-label {
margin-left: $interiorMargin;
@include btnSubtle($colorPausedBg, $colorPausedFg, $colorPausedFg);
.icon:before {
content: "\0000EF";
}
}
&.pause-play {
/* &.paused {
.icon {
@include pulse(500ms);
/*
&.paused {
.icon {
@include pulse(500ms);
}
}
}*/
*/
.icon:before {
content:"\0000F1";
content: "\0000F1";
}
}
&.show-thumbs {
.icon:before {
content:"\000039";
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
.s-btn {
@include border-radius(0);
margin-left: 1px;
}
.first {
.s-btn {
@include border-left-radius($controlCr);
margin-left: 0;
}
}
.last {
.s-btn {
@include border-right-radius($controlCr);
}
}
}
/*********************************** LAYOUT STYLES */
span.btn,
span.btn span,
span.l-btn,
span.l-btn span,
a.btn,
a.btn span,
a.l-btn,
a.l-btn span {
/*
span.s-btn,
span.s-btn span,
a.s-btn,
a.s-btn span,
a.s-btn,
a.s-btn span {
display: inline-block;
}
}
*/

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

@@ -100,22 +100,6 @@
}
}
.btn-bar {
// position: relative;
/* .btn,
.btn-set,
.t-btn {
display: inline-block;
// margin-left: $interiorMargin;
}
.btn,
.t-btn {
&:first-child {
// margin-left: 0;
}
}*/
}
.l-composite-control {
vertical-align: middle;
&.l-checkbox {
@@ -153,42 +137,6 @@
font-size: 0.7rem;
}
/*
.btn-set {
// Buttons that have a very tight conceptual grouping - no internal space between them.
display: inline-block;
position: relative;
.btn,
.t-btn {
@include border-radius(0);
border-left: 1px solid lighten($colorBodyBg, 20%);
margin-left: 0;
&:first-child {
border-left: none;
@include border-left-radius($controlCr);
}
&:last-child {
@include border-right-radius($controlCr);
}
}
}
*/
.object-browse-bar .btn,
.object-browse-bar .t-btn,
.object-browse-bar .view-switcher,
.top-bar .buttons-main .btn,
.top-bar .buttons-main .t-btn,
.top-bar .view-switcher,
.tool-bar .btn,
.tool-bar .t-btn {
$h: $btnToolbarH;
display: inline-block;
font-size: $h * $btnFontSizeToH;
line-height: 200%;
vertical-align: top;
}
label.checkbox.custom {
$bg: lighten($colorBodyBg, $ltGamma);
$d: $formRowCtrlsH;
@@ -256,7 +204,7 @@ label.checkbox.custom {
}
}
.btn-menu label.checkbox.custom {
.s-menu label.checkbox.custom {
margin-left: 5px;
}
@@ -267,84 +215,6 @@ label.checkbox.custom {
}
}
.btn-menu {
$h: 20px;
$p: $interiorMarginSm * 2;
$c: $colorBodyFg;
@include btnSubtle($colorBodyBg);
/* height: $h;
line-height: $h;
&.dropdown {
padding-left: $p;
padding-right: $p;
}*/
&:not(.disabled):hover {
color: lighten($c, 20%);
}
/* &.context-available {
// An element like the invoke-menu triangle;
// Indicates that this element has a dropdown menu available;
// Currently unused
$c: $colorKey;
color: $c;
padding: 0 5px;
&:hover {
color: lighten($c, 10%);
}
}*/
span.l-click-area {
// In markup, this element should not enclose anything.
@extend .abs;
}
.type-icon {
//margin-right: $interiorMargin;
}
.name {
margin-left: $interiorMargin;
}
.menu {
// margin-left: (-1 * $p);
position: absolute;
left: 0;
text-align: left;
.ui-symbol.icon {
width: 12px;
}
}
}
.top-bar .btn-menu {
$h: $btnStdH; //$ueTopBarBtnH; // 35px
$p: 10px;
$badgeM: $interiorMargin;
$badgeD: $h - ($badgeM * 2);
//height: $h;
//line-height: $h;
//padding-right: 10px;
&.browse-btn {
margin-right: $interiorMargin;
padding-left: $badgeD + $badgeM * 2;
.badge {
@include border-radius($controlCr * 1.5);
display: block;
font-size: 1em;
line-height: $badgeD;
position: absolute;
top: $badgeM;
left: $badgeM;
bottom: $badgeM;
right: auto;
width: $badgeD;
height: auto;
}
}
}
.context-available {
$c: $colorKey;
color: $c;
@@ -355,9 +225,6 @@ label.checkbox.custom {
.view-switcher {
@include trans-prop-nice-fade($controlFadeMs);
.type-icon {
//vertical-align: top;
}
}
/******************************************************** OBJECT-HEADER */

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

@@ -19,7 +19,52 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/******************************************************** MENUS */
/******************************************************** MENU BUTTONS */
.s-menu {
// Formerly .btn-menu
@extend .s-btn;
span.l-click-area {
// In markup, this element should not enclose anything.
@extend .abs;
}
.icon {
font-size: 120%;
}
.title-label {
margin-left: $interiorMarginSm;
}
&:after {
// Adds the downward facing arrow element
color: rgba($colorInvokeMenu, 0.2);
content: '\76';
display: inline-block;
font-family: 'symbolsfont';
margin-left: $interiorMarginSm;
@include text-shadow(none);
vertical-align: top;
}
&.create-btn {
.title-label {
font-size: 1rem;
}
&:after {
color: rgba($colorInvokeMenu, 0.5);
}
}
.menu {
left: 0;
text-align: left;
.ui-symbol.icon {
width: 12px;
}
}
}
/******************************************************** MENUS THEMSELVES */
.menu-element {
$bg: lighten($colorBodyBg, 5%);
$bgHover: lighten($bg, 20%);

40
platform/commonUI/general/res/sass/forms.scss
View File

@@ -1,40 +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/css3";
@import "compass/css3/border-radius";
@import "compass/css3/opacity";
@import "compass/utilities";
@import "constants";
@import "mobile/constants";
@import "mixins";
@import "forms/mixins";
@import "mobile/mixins";
@import "forms/elems";
@import "forms/textarea";
@import "forms/text-input";
@import "forms/selects";
@import "forms/channel-selector";
@import "forms/datetime";
@import "forms/validation";
@import "forms/filter";

33
platform/commonUI/general/res/sass/items.scss
View File

@@ -1,33 +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/css3";
@import "compass/css3/border-radius";
@import "compass/css3/opacity";
@import "compass/utilities";
@import "constants";
@import "mobile/constants";
@import "mixins";
@import "mobile/mixins";
@import "items/item";
@import "mobile/item";

2
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@@ -119,7 +119,7 @@
}
.view-switcher {
margin-right: 0 !important;
.name {
.title-label {
// Hide the name in mobile
display: none;
}

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

@@ -63,8 +63,20 @@
//font-size: 1em;
height: $ovrFooterH;
text-align: right;
.btn {
margin-left: 10px;
.s-btn {
$l: 15%;
@include containerSubtle(lighten($colorBodyBg, $l), lighten($colorBodyFg, $l), true);
font-size: 95%;
height: $ovrFooterH;
line-height: $ovrFooterH;
margin-left: $interiorMargin;
padding: 0 $interiorMargin * 3;
&.major {
@extend .s-btn.major;
&:hover {
@extend .s-btn.major:hover;
}
}
}
}
.contents.l-dialog {

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

@@ -19,7 +19,18 @@
* 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";

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

@@ -21,4 +21,10 @@
*****************************************************************************/
/* CONSTANTS */
//$colorBodyBg: #fff;
//$colorBodyFg: #666;
//$colorBodyFg: #666;
/*
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
background: red;
display: inline-block;
}*/

4
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@@ -47,6 +47,8 @@
}
&.frame-template {
.view-switcher {
font-size: 80%;
height: $ohH;
line-height: $ohH;
z-index: 10;
}
@@ -64,7 +66,7 @@
}
.view-switcher {
// Hide the name when the view switcher is in a frame context
.name {
.title-label {
display: none;
}
}

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

@@ -299,19 +299,15 @@
}
}
.object-browse-bar .btn,
.object-browse-bar .t-btn,
.object-browse-bar .view-switcher,
.top-bar .buttons-main .btn,
.top-bar .buttons-main .t-btn,
.top-bar .view-switcher,
.tool-bar .btn,
.tool-bar .t-btn {
$h: $btnToolbarH;
display: inline-block;
font-size: $h * $btnFontSizeToH;
line-height: 200%;
vertical-align: top;
.object-browse-bar .s-btn,
.top-bar .buttons-main .s-btn,
.top-bar .s-menu,
.tool-bar .s-btn,
.tool-bar .s-menu {
$h: $btnToolbarH;
height: $h;
line-height: $h;
vertical-align: top;
}
.object-browse-bar,