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

[Frontend] Multiple UI fixes and tweaks

Browse Source 
Fixes #1047
mini-tabs, splitters and bg-splash updated;
moved position of Inspector collapse mini-tab
to allow position transition;
splitter-sm class added for Timelines;
This commit is contained in:
Charles Hacskaylo 2016-07-27 09:24:53 -07:00
parent 2aee8bc0d8
commit 44fda8d68f
9 changed files with 76 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
platform/commonUI/browse/res/templates/browse.html
View File

@ -66,6 +66,10 @@
key="'view-object'"
class="abs holder holder-object">
</mct-representation>
<a class="mini-tab-icon anchor-right mobile-hide toggle-pane toggle-inspect flush-right"
title="{{ modelPaneInspect.visible()? 'Hide' : 'Show' }} the Inspection pane"
ng-click="modelPaneInspect.toggle()"
ng-class="{ collapsed : !modelPaneInspect.visible() }"></a>
</div>
<mct-splitter class="splitter-inspect mobile-hide flush-right edge-shdw"></mct-splitter>
@ -75,10 +79,6 @@
mct-object="navigatedObject"
ng-model="treeModel">
</mct-representation>
<a class="mini-tab-icon anchor-right mobile-hide toggle-pane toggle-inspect"
title="{{ modelPaneInspect.visible()? 'Hide' : 'Show' }} the Inspection pane"
ng-click="modelPaneInspect.toggle()"
ng-class="{ collapsed : !modelPaneInspect.visible() }"></a>
</div>
</mct-split-pane>
</div>

BIN
platform/commonUI/general/res/images/bg-splash.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 307 KiB

After

Width:  |  Height:  |  Size: 119 KiB

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

@ -103,7 +103,7 @@ body.desktop .mini-tab-icon {
&:hover {
background-color: $colorMiniTabBgHov;
color: $colorKey;
color: $colorMiniTabFgHov;
}
}

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

@ -26,7 +26,6 @@
// Main width is used to provide a good click area, and is always transparent
// :after will be a positioned and colored element that is the handle
//@include test(red);
display: block;
position: absolute;
z-index: 3;
@ -37,6 +36,7 @@
@include absPosDefault(0);
background: $colorSplitterBg;
display: block;
z-index: 4;
@if $splitterEndCr != 'none' {
border-radius: $splitterEndCr;
@ -61,7 +61,7 @@
}
.split-layout {
$inset: splitterHandleInset($splitterD,$splitterHandleD);
$inset: splitterHandleInset($splitterD, $splitterHandleD);
&.horizontal {
// Slides vertically up and down, splitting the element horizontally
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
@ -102,16 +102,16 @@
cursor: col-resize;
top: 0;
bottom: 0;
&:not(.flush-right) {
width: $splitterD;
&:after {
left: $inset; right: $inset;
}
width: $splitterD;
&:after {
left: $inset; right: $inset;
//width: $splitterHandleD;
}
&.flush-right {
width: ceil($splitterD / 2);
&:after {
left: auto; right: 0; width: $splitterHandleD;
width: $splitterHandleD;
left: auto; right: 0;
}
&.edge-shdw {
@include background-image(linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 70%, rgba(black, 0.2) 100%));
@ -119,4 +119,15 @@
}
}
}
&.splitter-sm {
$inset: splitterHandleInset($splitterDSm, $splitterHandleD);
.horizontal >.splitter {
height: $splitterDSm;
&:after { top: $inset; bottom: $inset; }
}
.vertical >.splitter {
width: $splitterDSm;
&:after { left: $inset; right: $inset; }
}
}
}

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

@ -147,57 +147,45 @@
}
body.desktop .pane .mini-tab-icon.toggle-pane {
$paneExpandedOffset: ceil($splitterD / 2);
$paneExpandedOffset: splitterHandleInset($splitterD, $splitterHandleD) + $splitterHandleD + $uePaneMiniTabW;
//$paneExpandedOffset: ceil($splitterD / 2) + $splitterHandleDHalf + if($splitterHandleDHalf % 2 != 0, 0px, 0px); //$splitterHandleD; //ceil($splitterD / 2) + ceil($splitterHandleD / 2);
top: $bodyMargin + ($ueTopBarH - $uePaneMiniTabH)/2;
&:after {
// Always the icon that shows when the pane is collapsed
opacity: 0;
/*
* The left anchor is able to move with its parent,
* but the right one can't and must have a anim
* or transition
*/
&.toggle-tree.anchor-left.collapsed,
&.toggle-inspect.anchor-right:not(.collapsed) {
@extend .icon-arrow-right;
border-bottom-right-radius: $controlCr;
border-top-right-radius: $controlCr;
}
&.collapsed {
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
&.toggle-tree.anchor-left:not(.collapsed),
&.toggle-inspect.anchor-right.collapsed {
@extend .icon-arrow-left;
border-bottom-left-radius: $controlCr;
border-top-left-radius: $controlCr;
}
&.toggle-tree.anchor-left {
left: 0;
@include transform(translateX(-1 * ($uePaneMiniTabW + $paneExpandedOffset)));
&:before {
content: $glyph-icon-arrow-left;
}
&:after {
content: $glyph-icon-arrow-right;
}
@include transform(translateX(-1 * $paneExpandedOffset));
&.collapsed {
border-bottom-right-radius: $controlCr;
border-top-right-radius: $controlCr;
left: 0;
@include transform(translateX(-1 * $ueCollapsedPaneEdgeM));
}
&:not(.collapsed) {
border-bottom-left-radius: $controlCr;
border-top-left-radius: $controlCr;
}
}
&.toggle-inspect.anchor-right {
left: 0;
&:before {
content: $glyph-icon-arrow-right;
}
&:after {
content: $glyph-icon-arrow-left;
right: 0;
@include transform(translateX($paneExpandedOffset));
&.flush-right {
@include transform(translateX(($uePaneMiniTabW + ceil($splitterD / 2))));
}
&.collapsed {
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;
@include transform(translateX($ueCollapsedPaneEdgeM));
}
}
}

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

@ -186,26 +186,28 @@ $shdwItemTreeIcon: 0.6;
$scrollbarTrackSize: 10px;
$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
$scrollbarTrackColorBg: rgba(#000, 0.4);
$scrollbarThumbColor: lighten($colorBodyBg, 10%);
$scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
$scrollbarThumbColorOverlay: lighten($colorOvrBg, 10%);
$scrollbarThumbColorOverlayHov: lighten($scrollbarThumbColorOverlay, 2%);
$scrollbarThumbColor: pullForward($colorBodyBg, 10%);
$scrollbarThumbColorHov: pullForward($scrollbarThumbColor, 2%);
$scrollbarThumbColorOverlay: pullForward($colorOvrBg, 10%);
$scrollbarThumbColorOverlayHov: pullForward($scrollbarThumbColorOverlay, 2%);
// Splitter
$splitterD: 17px; // splitterD and $splitterHandleD should both be odd, or even
$splitterHandleD: 1px;
$splitterDSm: 17px; // Smaller splitter, used inside elements like a Timeline view
$colorSplitterBaseBg: #fff;
$colorSplitterBg: rgba($colorSplitterBaseBg, 0.2);
// All splitterD* values MUST both be either odd or even numbers
$splitterD: 20px;
$splitterDSm: 10px; // Smaller splitter, used inside elements like a Timeline view
$splitterHandleD: 2px;
$colorSplitterBaseBg: pullForward($colorBodyBg, 10%);
$colorSplitterBg: $colorSplitterBaseBg;
$splitterShdw: rgba(black, 0.4) 0 0 3px;
$splitterEndCr: none;
$colorSplitterHover: rgba($colorSplitterBaseBg, 0.5);
$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent);
$colorSplitterActive: $colorKey;
// Minitabs
$colorMiniTabBg: rgba($colorSplitterBaseBg, 0.2);
$colorMiniTabFg: rgba($colorSplitterBaseBg, 0.5);
$colorMiniTabBgHov: rgba($colorSplitterBaseBg, 0.5);
$colorMiniTabBg: $colorSplitterBg;
$colorMiniTabFg: pushBack($colorMiniTabBg, 10%);
$colorMiniTabBgHov: $colorSplitterHover;
$colorMiniTabFgHov: #fff;
// Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 5%);

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

@ -191,20 +191,22 @@ $scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
// Splitter
$splitterD: 16px; // splitterD and $splitterHandleD should both be odd, or even
$splitterHandleD: 2px;
// All splitterD* values MUST both be either odd or even numbers
$splitterD: 16px;
$splitterDSm: 14px; // Smaller splitter, used inside elements like a Timeline view
$splitterHandleD: 2px;
$colorSplitterBaseBg: $colorBodyBg;
$colorSplitterBg: pullForward($colorSplitterBaseBg, 15%);
$splitterShdw: none;
$splitterEndCr: none;
$colorSplitterHover: pullForward($colorBodyBg, 30%);
$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
$colorSplitterActive: $colorKey;
// Minitabs
$colorMiniTabBg: $colorSplitterBg;
$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
$colorMiniTabBgHov: pullForward($colorMiniTabBg, 20%);
$colorMiniTabBgHov: $colorSplitterHover;
$colorMiniTabFgHov: #fff;
// Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 2%);

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

@ -241,8 +241,8 @@
@include trans-prop-nice-fade(500ms);
opacity: 0;
height: $timelineTopPaneHeaderH;
width: 100px; left: auto;
padding: $interiorMargin;
left: auto;
padding: $interiorMargin $interiorMargin $interiorMargin $interiorMargin * 10;
text-align: right;
z-index: 10;
}

4
platform/features/timeline/res/templates/timeline.html
View File

@ -19,7 +19,7 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<div class="s-timeline l-timeline-holder split-layout vertical"
<div class="s-timeline l-timeline-holder split-layout vertical splitter-sm"
ng-controller="TimelineController as timelineController">
<mct-split-pane anchor="left" class="abs" position="pane.x">
@ -27,7 +27,7 @@
<mct-split-pane anchor="bottom"
position="pane.y"
class="abs horizontal split-pane-component l-timeline-pane l-pane-l t-pane-v">
<!-- TOP PANE TABULAR AREA. ADD CLASS "hidden" FOR INTERIM NO-TABULAR DELIVERY -->
<!-- TOP PANE TABULAR AREA -->
<div class="split-pane-component s-timeline-tabular l-timeline-pane t-pane-h l-pane-top">
<!-- TABULAR LEFT FIXED AREA -->
<div class="t-pane-v l-pane-l l-tabular-l"