diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 63197ba84f..b47f23d231 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -66,6 +66,10 @@
key="'view-object'"
class="abs holder holder-object">
+
@@ -75,10 +79,6 @@
mct-object="navigatedObject"
ng-model="treeModel">
-
diff --git a/platform/commonUI/general/res/images/bg-splash.jpg b/platform/commonUI/general/res/images/bg-splash.jpg
index b0deac4103..77a2b0481a 100644
Binary files a/platform/commonUI/general/res/images/bg-splash.jpg and b/platform/commonUI/general/res/images/bg-splash.jpg differ
diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
index bce6946db0..e0d18338be 100644
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -103,7 +103,7 @@ body.desktop .mini-tab-icon {
&:hover {
background-color: $colorMiniTabBgHov;
- color: $colorKey;
+ color: $colorMiniTabFgHov;
}
}
diff --git a/platform/commonUI/general/res/sass/helpers/_splitter.scss b/platform/commonUI/general/res/sass/helpers/_splitter.scss
index e825d74cd7..bdedb9c3ec 100644
--- a/platform/commonUI/general/res/sass/helpers/_splitter.scss
+++ b/platform/commonUI/general/res/sass/helpers/_splitter.scss
@@ -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; }
+ }
+ }
}
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 2dad3d6a5a..6de5dc0f2b 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -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));
}
}
}
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 72be34a97e..a44db14151 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -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%);
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 32fd7e7e89..d99c040e57 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -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%);
diff --git a/platform/features/timeline/res/sass/_timelines.scss b/platform/features/timeline/res/sass/_timelines.scss
index 122a0426b1..d760e810cc 100644
--- a/platform/features/timeline/res/sass/_timelines.scss
+++ b/platform/features/timeline/res/sass/_timelines.scss
@@ -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;
}
diff --git a/platform/features/timeline/res/templates/timeline.html b/platform/features/timeline/res/templates/timeline.html
index ef347a6e62..3ea7b28344 100644
--- a/platform/features/timeline/res/templates/timeline.html
+++ b/platform/features/timeline/res/templates/timeline.html
@@ -19,7 +19,7 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
-