ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-03-19 18:45:31 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Frontend] Refactoring glyphs to classes

Browse Source 
fixes #1047
In progress: significant mods to pane collapse/expand
buttons and symbols, minor tweaks to splitter look,
limits glyph definitions
This commit is contained in:
Charles Hacskaylo 2016-06-30 16:55:40 -07:00
parent 7c47343f5c
commit 88054e5e8e
9 changed files with 71 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,8 +44,10 @@ $ueAppLogoW: 80px;
$ueEditToolBarH: 25px; $ueEditToolBarH: 25px;
$ueCollapsedPaneEdgeM: 22px; $ueCollapsedPaneEdgeM: 22px;
$uePaneMiniTabH: $ueTopBarH; $uePaneMiniTabH: $ueTopBarH;
$uePaneMiniTabH: 22px;
$uePaneMiniTabW: 10px; $uePaneMiniTabW: 10px;
$uePaneMiniTabCollapsedW: 11px; $uePaneMiniTabFontSize: 8px;
$uePaneMiniTabCollapsedW: 18px;
$ueEditLeftPaneW: 75%; $ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px; $treeSearchInputBarH: 25px;
$ueTimeControlH: (33px, 18px, 20px); $ueTimeControlH: (33px, 18px, 20px);

15
platform/commonUI/general/res/sass/_glyphs.scss
View File

@ -1,7 +1,7 @@
@mixin glyph($unicode) { @mixin glyph($unicode, $family: 'symbolsfont') {
&:before { &:before {
content: $unicode; content: $unicode;
font-family: 'symbolsfont'; font-family: $family;
} }
} }
@ -101,7 +101,7 @@ $glyph-icon-timeline: '\e1124';
$glyph-icon-timer: '\e1125'; $glyph-icon-timer: '\e1125';
$glyph-icon-topic: '\e1126'; $glyph-icon-topic: '\e1126';
/************************** CLASSES */ /************************** 16 PX CLASSES */
.icon-alert-rect { @include glyph($glyph-icon-alert-rect); } .icon-alert-rect { @include glyph($glyph-icon-alert-rect); }
.icon-alert-triangle { @include glyph($glyph-icon-alert-triangle); } .icon-alert-triangle { @include glyph($glyph-icon-alert-triangle); }
@ -197,8 +197,9 @@ $glyph-icon-topic: '\e1126';
.icon-timer { @include glyph($glyph-icon-timer); } .icon-timer { @include glyph($glyph-icon-timer); }
.icon-topic { @include glyph($glyph-icon-topic); } .icon-topic { @include glyph($glyph-icon-topic); }
/************************** LIMITS */ /************************** 12 PX CLASSES */
$glyphLimit: $glyph-icon-alert-triangle; .icon-eye-open-12px { @include glyph($glyph-icon-eye-open,'symbolsfont-12px'); }
$glyphLimitUpr: $glyph-icon-arrow-double-up; .icon-collapse-pane-left-12px { @include glyph($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
$glyphLimitLwr: $glyph-icon-arrow-double-down; .icon-collapse-pane-right-12px { @include glyph($glyph-icon-collapse-pane-right,'symbolsfont-12px'); }
.icon-folder-12px { @include glyph($glyph-icon-folder,'symbolsfont-12px'); }

8
platform/commonUI/general/res/sass/_inspector.scss
View File

@ -39,14 +39,6 @@
.pane-header { .pane-header {
color: pushBack($colorInspectorFg, 20%); color: pushBack($colorInspectorFg, 20%);
font-size: 0.8rem; font-size: 0.8rem;
&:before {
color: pushBack($colorInspectorFg, 10%);
content: '\e615'; // e615 Crosshair symbol
display: inline;
font-family: symbolsfont;
margin-right: $interiorMargin;
vertical-align: bottom;
}
} }
.split-layout { .split-layout {

10
platform/commonUI/general/res/sass/_limits.scss
View File

@ -1,4 +1,4 @@
@mixin limitGlyph($iconColor, $glyph: $glyphLimit) { @mixin limitGlyph($iconColor, $glyph: $glyph-icon-alert-triangle) {
&:before { &:before {
color: $iconColor; color: $iconColor;
content: $glyph; content: $glyph;
@ -21,8 +21,8 @@ tr[class*="s-limit"] {
&.s-limit-yellow td:first-child { &.s-limit-yellow td:first-child {
@include limitGlyph($colorLimitYellowIc); @include limitGlyph($colorLimitYellowIc);
} }
&.s-limit-upr td:first-child:before { content:$glyphLimitUpr; } &.s-limit-upr td:first-child:before { content: $glyph-icon-arrow-double-up; }
&.s-limit-lwr td:first-child:before { content:$glyphLimitLwr; } &.s-limit-lwr td:first-child:before { content: $glyph-icon-arrow-double-down; }
} }
// Handle limit when applied directly to a non-tr element // Handle limit when applied directly to a non-tr element
@ -34,6 +34,6 @@ tr[class*="s-limit"] {
&.s-limit-yellow { &.s-limit-yellow {
@include limitGlyph($colorLimitYellowIc); @include limitGlyph($colorLimitYellowIc);
} }
&.s-limit-upr:before { content:$glyphLimitUpr; } &.s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
&.s-limit-lwr:before { content:$glyphLimitLwr; } &.s-limit-lwr:before { content: $glyph-icon-arrow-double-down; }
} }

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

@ -82,130 +82,29 @@ $pad: $interiorMargin * $baseRatio;
} }
} }
body.desktop .mini-tab {
// Meant to be used as pane hide/show control elements in concert with mct-splitter
$iconH: $uePaneMiniTabH;
$iconW: $uePaneMiniTabW;
$iconInnerLR: 0;
$arwD: 9px;
$arwOffsetX: 0px;
$arwAnimOffsetX: 2px + $iconInnerLR;
$cBg: pullForward($colorBodyBg, 15%);
$cFg: $cBg;
border-radius: $basicCr;
//@include boxShdw($shdwBtns);
box-sizing: border-box;
@include trans-prop-nice((color, background-color), 100ms);
color: $cFg;
cursor: pointer;
font-family: symbolsfont;
font-size: $arwD;
display: block;
position: absolute;
line-height: $iconH;
height: $iconH; width: $iconW;
text-align: center;
&.collapsed {
// State when the pane this element controls has been collapsed
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
&:before { opacity: 0; }
&:after { opacity: 1; }
&:hover {
&:before { opacity: 1; }
&:after { opacity: 0; }
}
}
&:before,
&:after {
@include trans-prop-nice((left, right, opacity), 250ms);
display: block;
height: 100%;
position: absolute;
}
&:before {
// Always the arrow icon
width: $arwD;
}
&:after {
// Always icon; content is set in _layout.scss
width: 100%;
text-align: center;
opacity: 0;
}
&.anchor-left {
// |<
text-align: right;
&:before {
//content:'\e903'; // Collapse left icon e613
content: '\e903';
right: $iconInnerLR;
}
&.collapsed {
@include border-left-radius(0);
text-align: left;
&:before {
content:'\e904';
left: $iconInnerLR;
}
&:hover:before { left: $arwAnimOffsetX; }
}
}
&.anchor-right {
// >|
text-align: left;
&:before {
content:'\e904'; // Collapse right icon e614
left: $iconInnerLR;
}
&.collapsed {
@include border-right-radius(0);
&:before {
text-align: right;
content:'\e903';
right: $iconInnerLR;
}
&:hover:before { right: $arwAnimOffsetX; }
}
}
}
body.desktop .mini-tab-icon { body.desktop .mini-tab-icon {
// Meant to be used as pane hide/show control elements in concert with mct-splitter // Meant to be used as pane hide/show control elements in concert with mct-splitter
$d: $uePaneMiniTabW; // Font glyphs set in _layout.scss
color: pullForward($colorBodyBg, 15%); background-color: $colorMiniTabBg;
color: $colorMiniTabFg;
cursor: pointer; cursor: pointer;
display: block; display: block;
font-family: symbolsfont; font-family: 'symbolsfont';
font-size: $d; font-size: $uePaneMiniTabFontSize;
position: absolute; position: absolute;
height: $d; width: $d; height: $uePaneMiniTabH; width: $uePaneMiniTabW;
line-height: $d; line-height: $uePaneMiniTabH;
overflow: hidden; overflow: hidden;
word-break: break-all; text-align: center;
&.collapsed {
$d: $uePaneMiniTabCollapsedW;
width: $d; font-size: $d;
}
&:before, &:before,
&:after { &:after {
display: block;
position: absolute; position: absolute;
display: inherit;
} }
//&:before {
// content: '\78'; // X icon
//}
&:hover { &:hover {
background-color: $colorMiniTabBgHov;
color: $colorKey; color: $colorKey;
} }
} }

1
platform/commonUI/general/res/sass/helpers/_splitter.scss
View File

@ -111,7 +111,6 @@
&.flush-right { &.flush-right {
width: ceil($splitterD / 2); width: ceil($splitterD / 2);
&:after { &:after {
background-color: transparent;
left: auto; right: 0; width: $splitterHandleD; left: auto; right: 0; width: $splitterHandleD;
} }
&.edge-shdw { &.edge-shdw {

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

@ -147,11 +147,8 @@
} }
body.desktop .pane .mini-tab-icon.toggle-pane { body.desktop .pane .mini-tab-icon.toggle-pane {
$d: $uePaneMiniTabH; $paneExpandedOffset: ceil($splitterD / 2);
$paneExpandedOffset: $splitterD + $uePaneMiniTabW; top: $bodyMargin + ($ueTopBarH - $uePaneMiniTabH)/2;
top: $bodyMargin;
height: $d;
line-height: $d;
&:after { &:after {
// Always the icon that shows when the pane is collapsed // Always the icon that shows when the pane is collapsed
opacity: 0; opacity: 0;
@ -166,25 +163,41 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
} }
&.toggle-tree.anchor-left { &.toggle-tree.anchor-left {
left: 0; left: 0;
@include transform(translateX(-1 * $paneExpandedOffset)); @include transform(translateX(-1 * ($uePaneMiniTabW + $paneExpandedOffset)));
&:before {
content: $glyph-icon-arrow-left;
}
&:after { &:after {
content: '\6d'; // Menu 'hamburger' icon content: $glyph-icon-arrow-right;
} }
&.collapsed { &.collapsed {
border-bottom-right-radius: $controlCr;
border-top-right-radius: $controlCr;
left: 0; left: 0;
@include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin)); @include transform(translateX(-1 * $ueCollapsedPaneEdgeM));
} }
&:not(.collapsed):before { &:not(.collapsed) {
@include trans-prop-nice(opacity, 200ms, 200ms); border-bottom-left-radius: $controlCr;
border-top-left-radius: $controlCr;
} }
} }
&.toggle-inspect.anchor-right { &.toggle-inspect.anchor-right {
right: $bodyMargin; left: 0;
&:before {
content: $glyph-icon-arrow-right;
}
&:after { &:after {
content: '\e615'; // Eye icon content: $glyph-icon-arrow-left;
} }
&.collapsed { &.collapsed {
right: $interiorMargin; border-bottom-left-radius: $controlCr;
border-top-left-radius: $controlCr;
left: auto;
right: 0;
}
&:not(.collapsed) {
border-bottom-right-radius: $controlCr;
border-top-right-radius: $controlCr;
} }
} }
} }
@ -220,7 +233,7 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
.holder-inspector { .holder-inspector {
top: $bodyMargin; top: $bodyMargin;
bottom: $interiorMargin; bottom: $interiorMargin;
left: $bodyMargin; left: $bodyMargin + $interiorMargin;
right: $bodyMargin; right: $bodyMargin;
} }
.holder-elements { .holder-elements {

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

@ -168,7 +168,7 @@ $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
$colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%); $colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
$colorItemTreeEditingBg: #344154; $colorItemTreeEditingBg: #344154;
$colorItemTreeEditingFg: $colorEditAreaFg; $colorItemTreeEditingFg: $colorEditAreaFg;
$colorItemTreeVC: $colorBodyFg; //rgba(#fff, 0.3); $colorItemTreeVC: $colorBodyFg;
$colorItemTreeVCHover: pullForward($colorItemTreeVC, 20%); $colorItemTreeVCHover: pullForward($colorItemTreeVC, 20%);
$colorItemTreeSelectedVC: $colorItemTreeVC; $colorItemTreeSelectedVC: $colorItemTreeVC;
$shdwItemTreeIcon: 0.6; $shdwItemTreeIcon: 0.6;
@ -186,12 +186,18 @@ $scrollbarThumbColorOverlayHov: lighten($scrollbarThumbColorOverlay, 2%);
$splitterD: 17px; // splitterD and $splitterHandleD should both be odd, or even $splitterD: 17px; // splitterD and $splitterHandleD should both be odd, or even
$splitterHandleD: 1px; $splitterHandleD: 1px;
$splitterDSm: 17px; // Smaller splitter, used inside elements like a Timeline view $splitterDSm: 17px; // Smaller splitter, used inside elements like a Timeline view
$colorSplitterBg: rgba(#fff, 0.1); //pullForward($colorBodyBg, 5%); $colorSplitterBaseBg: #fff;
$colorSplitterBg: rgba($colorSplitterBaseBg, 0.2);
$splitterShdw: rgba(black, 0.4) 0 0 3px; $splitterShdw: rgba(black, 0.4) 0 0 3px;
$splitterEndCr: none; $splitterEndCr: none;
$colorSplitterHover: pullForward($colorBodyBg, 40%); $colorSplitterHover: rgba($colorSplitterBaseBg, 0.5);
$colorSplitterActive: $colorKey; $colorSplitterActive: $colorKey;
// Minitabs
$colorMiniTabBg: rgba($colorSplitterBaseBg, 0.2);
$colorMiniTabFg: rgba($colorSplitterBaseBg, 0.5);
$colorMiniTabBgHov: rgba($colorSplitterBaseBg, 0.5);
// Mobile // Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 5%); $colorMobilePaneLeft: darken($colorBodyBg, 5%);

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

@ -185,12 +185,19 @@ $scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
// Splitter // Splitter
$splitterD: 16px; // splitterD and $splitterHandleD should both be odd, or even $splitterD: 16px; // splitterD and $splitterHandleD should both be odd, or even
$splitterHandleD: 2px; $splitterHandleD: 2px;
$colorSplitterBg: pullForward($colorBodyBg, 10%); $splitterDSm: 14px; // Smaller splitter, used inside elements like a Timeline view
$colorSplitterBaseBg: $colorBodyBg;
$colorSplitterBg: pullForward($colorSplitterBaseBg, 15%);
$splitterShdw: none; $splitterShdw: none;
$splitterEndCr: none; $splitterEndCr: none;
$colorSplitterHover: pullForward($colorBodyBg, 30%); $colorSplitterHover: pullForward($colorBodyBg, 30%);
$colorSplitterActive: $colorKey; $colorSplitterActive: $colorKey;
// Minitabs
$colorMiniTabBg: $colorSplitterBg;
$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
$colorMiniTabBgHov: pullForward($colorMiniTabBg, 20%);
// Mobile // Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 2%); $colorMobilePaneLeft: darken($colorBodyBg, 2%);