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'" key="'view-object'"
class="abs holder holder-object"> class="abs holder holder-object">
</mct-representation> </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> </div>
<mct-splitter class="splitter-inspect mobile-hide flush-right edge-shdw"></mct-splitter> <mct-splitter class="splitter-inspect mobile-hide flush-right edge-shdw"></mct-splitter>
@ -75,10 +79,6 @@
mct-object="navigatedObject" mct-object="navigatedObject"
ng-model="treeModel"> ng-model="treeModel">
</mct-representation> </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> </div>
</mct-split-pane> </mct-split-pane>
</div> </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 { &:hover {
background-color: $colorMiniTabBgHov; 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 // 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 // :after will be a positioned and colored element that is the handle
//@include test(red);
display: block; display: block;
position: absolute; position: absolute;
z-index: 3; z-index: 3;
@ -37,6 +36,7 @@
@include absPosDefault(0); @include absPosDefault(0);
background: $colorSplitterBg; background: $colorSplitterBg;
display: block; display: block;
z-index: 4;
@if $splitterEndCr != 'none' { @if $splitterEndCr != 'none' {
border-radius: $splitterEndCr; border-radius: $splitterEndCr;
@ -61,7 +61,7 @@
} }
.split-layout { .split-layout {
$inset: splitterHandleInset($splitterD,$splitterHandleD); $inset: splitterHandleInset($splitterD, $splitterHandleD);
&.horizontal { &.horizontal {
// Slides vertically up and down, splitting the element horizontally // Slides vertically up and down, splitting the element horizontally
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
@ -102,16 +102,16 @@
cursor: col-resize; cursor: col-resize;
top: 0; top: 0;
bottom: 0; bottom: 0;
&:not(.flush-right) { width: $splitterD;
width: $splitterD; &:after {
&:after { left: $inset; right: $inset;
left: $inset; right: $inset; //width: $splitterHandleD;
}
} }
&.flush-right { &.flush-right {
width: ceil($splitterD / 2); width: ceil($splitterD / 2);
&:after { &:after {
left: auto; right: 0; width: $splitterHandleD; width: $splitterHandleD;
left: auto; right: 0;
} }
&.edge-shdw { &.edge-shdw {
@include background-image(linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 70%, rgba(black, 0.2) 100%)); @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 { 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; top: $bodyMargin + ($ueTopBarH - $uePaneMiniTabH)/2;
&:after { /*
// Always the icon that shows when the pane is collapsed * The left anchor is able to move with its parent,
opacity: 0; * 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 { &.toggle-tree.anchor-left:not(.collapsed),
opacity: 0; &.toggle-inspect.anchor-right.collapsed {
} @extend .icon-arrow-left;
&:after { border-bottom-left-radius: $controlCr;
opacity: 1; border-top-left-radius: $controlCr;
}
} }
&.toggle-tree.anchor-left { &.toggle-tree.anchor-left {
left: 0; left: 0;
@include transform(translateX(-1 * ($uePaneMiniTabW + $paneExpandedOffset))); @include transform(translateX(-1 * $paneExpandedOffset));
&:before {
content: $glyph-icon-arrow-left;
}
&:after {
content: $glyph-icon-arrow-right;
}
&.collapsed { &.collapsed {
border-bottom-right-radius: $controlCr;
border-top-right-radius: $controlCr;
left: 0;
@include transform(translateX(-1 * $ueCollapsedPaneEdgeM)); @include transform(translateX(-1 * $ueCollapsedPaneEdgeM));
} }
&:not(.collapsed) {
border-bottom-left-radius: $controlCr;
border-top-left-radius: $controlCr;
}
} }
&.toggle-inspect.anchor-right { &.toggle-inspect.anchor-right {
left: 0; right: 0;
&:before { @include transform(translateX($paneExpandedOffset));
content: $glyph-icon-arrow-right; &.flush-right {
} @include transform(translateX(($uePaneMiniTabW + ceil($splitterD / 2))));
&:after {
content: $glyph-icon-arrow-left;
} }
&.collapsed { &.collapsed {
border-bottom-left-radius: $controlCr; @include transform(translateX($ueCollapsedPaneEdgeM));
border-top-left-radius: $controlCr;
left: auto;
right: 0;
}
&:not(.collapsed) {
border-bottom-right-radius: $controlCr;
border-top-right-radius: $controlCr;
} }
} }
} }

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

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

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

@ -241,8 +241,8 @@
@include trans-prop-nice-fade(500ms); @include trans-prop-nice-fade(500ms);
opacity: 0; opacity: 0;
height: $timelineTopPaneHeaderH; height: $timelineTopPaneHeaderH;
width: 100px; left: auto; left: auto;
padding: $interiorMargin; padding: $interiorMargin $interiorMargin $interiorMargin $interiorMargin * 10;
text-align: right; text-align: right;
z-index: 10; 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 this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. 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"> ng-controller="TimelineController as timelineController">
<mct-split-pane anchor="left" class="abs" position="pane.x"> <mct-split-pane anchor="left" class="abs" position="pane.x">
@ -27,7 +27,7 @@
<mct-split-pane anchor="bottom" <mct-split-pane anchor="bottom"
position="pane.y" position="pane.y"
class="abs horizontal split-pane-component l-timeline-pane l-pane-l t-pane-v"> 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"> <div class="split-pane-component s-timeline-tabular l-timeline-pane t-pane-h l-pane-top">
<!-- TABULAR LEFT FIXED AREA --> <!-- TABULAR LEFT FIXED AREA -->
<div class="t-pane-v l-pane-l l-tabular-l" <div class="t-pane-v l-pane-l l-tabular-l"