ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 05:07:52 +00:00
Code Issues Actions 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;
$ueCollapsedPaneEdgeM: 22px;
$uePaneMiniTabH: $ueTopBarH;
$uePaneMiniTabH: 22px;
$uePaneMiniTabW: 10px;
$uePaneMiniTabCollapsedW: 11px;
$uePaneMiniTabFontSize: 8px;
$uePaneMiniTabCollapsedW: 18px;
$ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px;
$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 {
content: $unicode;
font-family: 'symbolsfont';
font-family: $family;
}
}
@ -101,7 +101,7 @@ $glyph-icon-timeline: '\e1124';
$glyph-icon-timer: '\e1125';
$glyph-icon-topic: '\e1126';
/************************** CLASSES */
/************************** 16 PX CLASSES */
.icon-alert-rect { @include glyph($glyph-icon-alert-rect); }
.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-topic { @include glyph($glyph-icon-topic); }
/************************** LIMITS */
/************************** 12 PX CLASSES */
$glyphLimit: $glyph-icon-alert-triangle;
$glyphLimitUpr: $glyph-icon-arrow-double-up;
$glyphLimitLwr: $glyph-icon-arrow-double-down;
.icon-eye-open-12px { @include glyph($glyph-icon-eye-open,'symbolsfont-12px'); }
.icon-collapse-pane-left-12px { @include glyph($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
.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 {
color: pushBack($colorInspectorFg, 20%);
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 {

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 {
color: $iconColor;
content: $glyph;
@ -21,8 +21,8 @@ tr[class*="s-limit"] {
&.s-limit-yellow td:first-child {
@include limitGlyph($colorLimitYellowIc);
}
&.s-limit-upr td:first-child:before { content:$glyphLimitUpr; }
&.s-limit-lwr td:first-child:before { content:$glyphLimitLwr; }
&.s-limit-upr td:first-child:before { content: $glyph-icon-arrow-double-up; }
&.s-limit-lwr td:first-child:before { content: $glyph-icon-arrow-double-down; }
}
// Handle limit when applied directly to a non-tr element
@ -34,6 +34,6 @@ tr[class*="s-limit"] {
&.s-limit-yellow {
@include limitGlyph($colorLimitYellowIc);
}
&.s-limit-upr:before { content:$glyphLimitUpr; }
&.s-limit-lwr:before { content:$glyphLimitLwr; }
&.s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
&.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 {
// Meant to be used as pane hide/show control elements in concert with mct-splitter
$d: $uePaneMiniTabW;
color: pullForward($colorBodyBg, 15%);
// Font glyphs set in _layout.scss
background-color: $colorMiniTabBg;
color: $colorMiniTabFg;
cursor: pointer;
display: block;
font-family: symbolsfont;
font-size: $d;
font-family: 'symbolsfont';
font-size: $uePaneMiniTabFontSize;
position: absolute;
height: $d; width: $d;
line-height: $d;
height: $uePaneMiniTabH; width: $uePaneMiniTabW;
line-height: $uePaneMiniTabH;
overflow: hidden;
word-break: break-all;
&.collapsed {
$d: $uePaneMiniTabCollapsedW;
width: $d; font-size: $d;
}
text-align: center;
&:before,
&:after {
display: block;
position: absolute;
display: inherit;
}
//&:before {
// content: '\78'; // X icon
//}
&:hover {
background-color: $colorMiniTabBgHov;
color: $colorKey;
}
}

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

@ -111,7 +111,6 @@
&.flush-right {
width: ceil($splitterD / 2);
&:after {
background-color: transparent;
left: auto; right: 0; width: $splitterHandleD;
}
&.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 {
$d: $uePaneMiniTabH;
$paneExpandedOffset: $splitterD + $uePaneMiniTabW;
top: $bodyMargin;
height: $d;
line-height: $d;
$paneExpandedOffset: ceil($splitterD / 2);
top: $bodyMargin + ($ueTopBarH - $uePaneMiniTabH)/2;
&:after {
// Always the icon that shows when the pane is collapsed
opacity: 0;
@ -166,25 +163,41 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
}
&.toggle-tree.anchor-left {
left: 0;
@include transform(translateX(-1 * $paneExpandedOffset));
@include transform(translateX(-1 * ($uePaneMiniTabW + $paneExpandedOffset)));
&:before {
content: $glyph-icon-arrow-left;
}
&:after {
content: '\6d'; // Menu 'hamburger' icon
content: $glyph-icon-arrow-right;
}
&.collapsed {
border-bottom-right-radius: $controlCr;
border-top-right-radius: $controlCr;
left: 0;
@include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
@include transform(translateX(-1 * $ueCollapsedPaneEdgeM));
}
&:not(.collapsed):before {
@include trans-prop-nice(opacity, 200ms, 200ms);
&:not(.collapsed) {
border-bottom-left-radius: $controlCr;
border-top-left-radius: $controlCr;
}
}
&.toggle-inspect.anchor-right {
right: $bodyMargin;
left: 0;
&:before {
content: $glyph-icon-arrow-right;
}
&:after {
content: '\e615'; // Eye icon
content: $glyph-icon-arrow-left;
}
&.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 {
top: $bodyMargin;
bottom: $interiorMargin;
left: $bodyMargin;
left: $bodyMargin + $interiorMargin;
right: $bodyMargin;
}
.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%);
$colorItemTreeEditingBg: #344154;
$colorItemTreeEditingFg: $colorEditAreaFg;
$colorItemTreeVC: $colorBodyFg; //rgba(#fff, 0.3);
$colorItemTreeVC: $colorBodyFg;
$colorItemTreeVCHover: pullForward($colorItemTreeVC, 20%);
$colorItemTreeSelectedVC: $colorItemTreeVC;
$shdwItemTreeIcon: 0.6;
@ -186,12 +186,18 @@ $scrollbarThumbColorOverlayHov: lighten($scrollbarThumbColorOverlay, 2%);
$splitterD: 17px; // splitterD and $splitterHandleD should both be odd, or even
$splitterHandleD: 1px;
$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;
$splitterEndCr: none;
$colorSplitterHover: pullForward($colorBodyBg, 40%);
$colorSplitterHover: rgba($colorSplitterBaseBg, 0.5);
$colorSplitterActive: $colorKey;
// Minitabs
$colorMiniTabBg: rgba($colorSplitterBaseBg, 0.2);
$colorMiniTabFg: rgba($colorSplitterBaseBg, 0.5);
$colorMiniTabBgHov: rgba($colorSplitterBaseBg, 0.5);
// Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 5%);

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

@ -185,12 +185,19 @@ $scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
// Splitter
$splitterD: 16px; // splitterD and $splitterHandleD should both be odd, or even
$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;
$splitterEndCr: none;
$colorSplitterHover: pullForward($colorBodyBg, 30%);
$colorSplitterActive: $colorKey;
// Minitabs
$colorMiniTabBg: $colorSplitterBg;
$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
$colorMiniTabBgHov: pullForward($colorMiniTabBg, 20%);
// Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 2%);
@ -206,4 +213,4 @@ $colorAboutLink: #84b3ff;
// Loading
$colorLoadingFg: $colorAlt1;
$colorLoadingBg: rgba($colorLoadingFg, 0.1);
$colorLoadingBg: rgba($colorLoadingFg, 0.1);