ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-26 22:29:34 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Standardizing styles

Browse Source 
Fixes #1047
- Finessing mini-tab and making able to
control per theme; s-clickable and s-toggle-icon
classes cleaned up
This commit is contained in:
Charles Hacskaylo 2016-07-27 18:05:06 -07:00
parent 18e08074a8
commit 3e7eb98ac2
7 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,9 +43,8 @@ $ueColMargin: 1.5%;
$ueAppLogoW: 80px;
$ueEditToolBarH: 25px;
$ueCollapsedPaneEdgeM: 22px;
$uePaneMiniTabH: $ueTopBarH;
$uePaneMiniTabH: 22px;
$uePaneMiniTabW: 10px;
$uePaneMiniTabW: 8px;
$uePaneMiniTabFontSize: 8px;
$uePaneMiniTabCollapsedW: 18px;
$ueEditLeftPaneW: 75%;
@ -75,7 +74,7 @@ $treeTypeIconHPx: 16px;
$treeTypeIconW: 18px;
$treeContextTriggerW: 20px;
/*************** Tabular */
$tabularHeaderH: 22px; //18px
$tabularHeaderH: 22px;
$tabularTdPadLR: $itemPadLR;
$tabularTdPadTB: 3px;
/*************** Imagery */

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

@ -95,10 +95,8 @@ body.desktop .mini-tab-icon {
overflow: hidden;
text-align: center;
&:before,
&:after {
display: block;
position: absolute;
&:before {
display: inline-block;
}
&:hover {

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

@ -74,17 +74,21 @@
.s-clickable-icon {
// Clickable icon elements that have hover
// .s-toggles means the element is capable of having .active applied to it
@extend .ui-symbol;
color: $colorClickIcon;
&:hover { color: $colorClickIconHov; }
&.s-toggles {
color: rgba($colorClickIcon, 0.5) !important;
&.active { color: $colorClickIconActive !important; }
&:hover { color: rgba($colorClickIconHov, 0.5) !important; }
&:hover {
color: $colorClickIconHov;
}
}
.s-toggle-icon {
// Has default (in-active) and .active states
@extend .s-clickable-icon;
color: $colorToggleIcon;
&:hover { color: rgba($colorToggleIconHov, 0.5); }
&.active { color: $colorToggleIconActive; }
}
.l-composite-control {
vertical-align: middle;
&:not(.l-inline) {
@ -555,10 +559,9 @@ textarea {
/******************************************************** MISC */
.context-available {
@extend .icon-arrow-down;
$c: $colorKey;
color: $c;
color: $colorKey;
&:hover {
color: lighten($c, 10%);
color: $colorKeyHov;
}
}

13
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -6,7 +6,7 @@ $colorStatusBarBg: #000;
$colorKey: #0099cc;
$colorKeySelectedBg: #005177;
$colorKeyFg: #fff;
$colorKeyHov: pullForward($colorKey, 20%);
$colorKeyHov: #00c0f6;
$colorEditAreaBg: #31363e;
$colorEditAreaFg: #587ab5;
$colorInteriorBorder: rgba($colorBodyFg, 0.1);
@ -29,10 +29,11 @@ $colorBtnMajorBg: $colorKey;
$colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent);
$colorBtnMajorFg: $colorKeyFg;
$colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent);
// TODO: make clickable icon initially use the key color; also, introduce a toggle-able icon with different color approach
$colorClickIcon: $colorBodyFg;
$colorClickIconActive: $colorKey;
$colorClickIconHov: $colorClickIconActive;
$colorClickIcon: $colorKey;
$colorClickIconHov: $colorKeyHov;
$colorToggleIcon: rgba($colorBodyFg, 0.5);
$colorToggleIconActive: $colorKey;
$colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
$colorInvokeMenu: #fff;
$contrastInvokeMenuPercent: 20%;
$shdwBtns: rgba(black, 0.2) 0 1px 2px;
@ -204,6 +205,8 @@ $colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent);
$colorSplitterActive: $colorKey;
// Minitabs
$uePaneMiniTabH: 24px;
$uePaneMiniTabW: 8px;
$colorMiniTabBg: $colorSplitterBg;
$colorMiniTabFg: pushBack($colorMiniTabBg, 10%);
$colorMiniTabBgHov: $colorSplitterHover;

14
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -6,7 +6,7 @@ $colorStatusBarBg: #000;
$colorKey: #0099cc;
$colorKeySelectedBg: $colorKey;
$colorKeyFg: #fff;
$colorKeyHov: pullForward($colorKey, 20%);
$colorKeyHov: #00c0f6;
$colorEditAreaBg: #eafaff;
$colorEditAreaFg: #4bb1c7;
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
@ -26,12 +26,14 @@ $colorBtnFgHov: $colorBtnFg;
$colorBtnIcon: #eee;
$colorBtnIconHov: $colorBtnFgHov;
$colorBtnMajorBg: $colorKey;
$colorBtnMajorBgHov: #007fbc;
$colorBtnMajorBgHov: $colorKeyHov;
$colorBtnMajorFg: $colorKeyFg;
$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
$colorClickIcon: $colorBodyFg;
$colorClickIconActive: $colorKey;
$colorClickIconHov: $colorClickIconActive;
$colorClickIcon: $colorKey;
$colorClickIconHov: $colorKeyHov;
$colorToggleIcon: rgba($colorClickIcon, 0.5);
$colorToggleIconActive: $colorKey;
$colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
$colorInvokeMenu: #000;
$contrastInvokeMenuPercent: 40%;
$shdwBtns: none;
@ -203,6 +205,8 @@ $colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
$colorSplitterActive: $colorKey;
// Minitabs
$uePaneMiniTabH: 24px;
$uePaneMiniTabW: 8px;
$colorMiniTabBg: $colorSplitterBg;
$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
$colorMiniTabBgHov: $colorSplitterHover;

7
platform/features/timeline/res/sass/_timelines.scss
View File

@ -300,13 +300,6 @@
top: $timelineTopPaneHeaderElemMargin; bottom: $timelineTopPaneHeaderElemMargin;
}
.l-swimlanes-holder .l-cols {
.l-col-icon,
.l-col-icon a:not(.s-toggles) {
color: $colorKey;
}
}
.l-pane-l {
// Left pane of the tabular area
.l-cols {

2
platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html
View File

@ -31,7 +31,7 @@
<span class="l-col l-col-icon l-plot-resource"
ng-click="ngModel.toggleGraph(); parameters.commit()"
title="Click to enable or disable inclusion in Resource Graphing">
<span class="icon-plot-resource s-clickable-icon s-toggles"
<span class="icon-plot-resource s-toggle-icon"
ng-class="{ active: ngModel.graph() }">
</span>
</span>