Skip to content

Commit 44fda8d

Browse files
charlesh88charlesh88
committed
[Frontend] Multiple UI fixes and tweaks
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;
1 parent 2aee8bc commit 44fda8d

File tree

9 files changed

+76
-73
lines changed

9 files changed

+76
-73
lines changed

‎platform/commonUI/browse/res/templates/browse.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@
6666
key="'view-object'"
6767
class="abs holder holder-object">
6868
</mct-representation>
69+
<a class="mini-tab-icon anchor-right mobile-hide toggle-pane toggle-inspect flush-right"
70+
title="{{ modelPaneInspect.visible()? 'Hide' : 'Show' }} the Inspection pane"
71+
ng-click="modelPaneInspect.toggle()"
72+
ng-class="{ collapsed : !modelPaneInspect.visible() }"></a>
6973
</div>
7074

7175
<mct-splitter class="splitter-inspect mobile-hide flush-right edge-shdw"></mct-splitter>
@@ -75,10 +79,6 @@
7579
mct-object="navigatedObject"
7680
ng-model="treeModel">
7781
</mct-representation>
78-
<a class="mini-tab-icon anchor-right mobile-hide toggle-pane toggle-inspect"
79-
title="{{ modelPaneInspect.visible()? 'Hide' : 'Show' }} the Inspection pane"
80-
ng-click="modelPaneInspect.toggle()"
81-
ng-class="{ collapsed : !modelPaneInspect.visible() }"></a>
8282
</div>
8383
</mct-split-pane>
8484
</div>

‎platform/commonUI/general/res/images/bg-splash.jpg

-189 KB
Loading

‎platform/commonUI/general/res/sass/controls/_buttons.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ body.desktop .mini-tab-icon {
103103

104104
&:hover {
105105
background-color: $colorMiniTabBgHov;
106-
color: $colorKey;
106+
color: $colorMiniTabFgHov;
107107
}
108108
}
109109

‎platform/commonUI/general/res/sass/helpers/_splitter.scss

+19-8
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
// Main width is used to provide a good click area, and is always transparent
2727
// :after will be a positioned and colored element that is the handle
2828

29-
//@include test(red);
3029
display: block;
3130
position: absolute;
3231
z-index: 3;
@@ -37,6 +36,7 @@
3736
@include absPosDefault(0);
3837
background: $colorSplitterBg;
3938
display: block;
39+
z-index: 4;
4040

4141
@if $splitterEndCr != 'none' {
4242
border-radius: $splitterEndCr;
@@ -61,7 +61,7 @@
6161
}
6262

6363
.split-layout {
64-
$inset: splitterHandleInset($splitterD,$splitterHandleD);
64+
$inset: splitterHandleInset($splitterD, $splitterHandleD);
6565
&.horizontal {
6666
// Slides vertically up and down, splitting the element horizontally
6767
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
@@ -102,21 +102,32 @@
102102
cursor: col-resize;
103103
top: 0;
104104
bottom: 0;
105-
&:not(.flush-right) {
106-
width: $splitterD;
107-
&:after {
108-
left: $inset; right: $inset;
109-
}
105+
width: $splitterD;
106+
&:after {
107+
left: $inset; right: $inset;
108+
//width: $splitterHandleD;
110109
}
111110
&.flush-right {
112111
width: ceil($splitterD / 2);
113112
&:after {
114-
left: auto; right: 0; width: $splitterHandleD;
113+
width: $splitterHandleD;
114+
left: auto; right: 0;
115115
}
116116
&.edge-shdw {
117117
@include background-image(linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 70%, rgba(black, 0.2) 100%));
118118
}
119119
}
120120
}
121121
}
122+
&.splitter-sm {
123+
$inset: splitterHandleInset($splitterDSm, $splitterHandleD);
124+
.horizontal >.splitter {
125+
height: $splitterDSm;
126+
&:after { top: $inset; bottom: $inset; }
127+
}
128+
.vertical >.splitter {
129+
width: $splitterDSm;
130+
&:after { left: $inset; right: $inset; }
131+
}
132+
}
122133
}

‎platform/commonUI/general/res/sass/user-environ/_layout.scss

+27-39
Original file line numberDiff line numberDiff line change
@@ -147,57 +147,45 @@
147147
}
148148

149149
body.desktop .pane .mini-tab-icon.toggle-pane {
150-
$paneExpandedOffset: ceil($splitterD / 2);
150+
$paneExpandedOffset: splitterHandleInset($splitterD, $splitterHandleD) + $splitterHandleD + $uePaneMiniTabW;
151+
//$paneExpandedOffset: ceil($splitterD / 2) + $splitterHandleDHalf + if($splitterHandleDHalf % 2 != 0, 0px, 0px); //$splitterHandleD; //ceil($splitterD / 2) + ceil($splitterHandleD / 2);
151152
top: $bodyMargin + ($ueTopBarH - $uePaneMiniTabH)/2;
152-
&:after {
153-
// Always the icon that shows when the pane is collapsed
154-
opacity: 0;
153+
/*
154+
* The left anchor is able to move with its parent,
155+
* but the right one can't and must have a anim
156+
* or transition
157+
*/
158+
159+
&.toggle-tree.anchor-left.collapsed,
160+
&.toggle-inspect.anchor-right:not(.collapsed) {
161+
@extend .icon-arrow-right;
162+
border-bottom-right-radius: $controlCr;
163+
border-top-right-radius: $controlCr;
155164
}
156-
&.collapsed {
157-
&:before {
158-
opacity: 0;
159-
}
160-
&:after {
161-
opacity: 1;
162-
}
165+
166+
&.toggle-tree.anchor-left:not(.collapsed),
167+
&.toggle-inspect.anchor-right.collapsed {
168+
@extend .icon-arrow-left;
169+
border-bottom-left-radius: $controlCr;
170+
border-top-left-radius: $controlCr;
163171
}
172+
164173
&.toggle-tree.anchor-left {
165174
left: 0;
166-
@include transform(translateX(-1 * ($uePaneMiniTabW + $paneExpandedOffset)));
167-
&:before {
168-
content: $glyph-icon-arrow-left;
169-
}
170-
&:after {
171-
content: $glyph-icon-arrow-right;
172-
}
175+
@include transform(translateX(-1 * $paneExpandedOffset));
173176
&.collapsed {
174-
border-bottom-right-radius: $controlCr;
175-
border-top-right-radius: $controlCr;
176-
left: 0;
177177
@include transform(translateX(-1 * $ueCollapsedPaneEdgeM));
178178
}
179-
&:not(.collapsed) {
180-
border-bottom-left-radius: $controlCr;
181-
border-top-left-radius: $controlCr;
182-
}
183179
}
180+
184181
&.toggle-inspect.anchor-right {
185-
left: 0;
186-
&:before {
187-
content: $glyph-icon-arrow-right;
188-
}
189-
&:after {
190-
content: $glyph-icon-arrow-left;
182+
right: 0;
183+
@include transform(translateX($paneExpandedOffset));
184+
&.flush-right {
185+
@include transform(translateX(($uePaneMiniTabW + ceil($splitterD / 2))));
191186
}
192187
&.collapsed {
193-
border-bottom-left-radius: $controlCr;
194-
border-top-left-radius: $controlCr;
195-
left: auto;
196-
right: 0;
197-
}
198-
&:not(.collapsed) {
199-
border-bottom-right-radius: $controlCr;
200-
border-top-right-radius: $controlCr;
188+
@include transform(translateX($ueCollapsedPaneEdgeM));
201189
}
202190
}
203191
}

‎platform/commonUI/themes/espresso/res/sass/_constants.scss

+15-13
Original file line numberDiff line numberDiff line change
@@ -186,26 +186,28 @@ $shdwItemTreeIcon: 0.6;
186186
$scrollbarTrackSize: 10px;
187187
$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
188188
$scrollbarTrackColorBg: rgba(#000, 0.4);
189-
$scrollbarThumbColor: lighten($colorBodyBg, 10%);
190-
$scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
191-
$scrollbarThumbColorOverlay: lighten($colorOvrBg, 10%);
192-
$scrollbarThumbColorOverlayHov: lighten($scrollbarThumbColorOverlay, 2%);
189+
$scrollbarThumbColor: pullForward($colorBodyBg, 10%);
190+
$scrollbarThumbColorHov: pullForward($scrollbarThumbColor, 2%);
191+
$scrollbarThumbColorOverlay: pullForward($colorOvrBg, 10%);
192+
$scrollbarThumbColorOverlayHov: pullForward($scrollbarThumbColorOverlay, 2%);
193193

194194
// Splitter
195-
$splitterD: 17px; // splitterD and $splitterHandleD should both be odd, or even
196-
$splitterHandleD: 1px;
197-
$splitterDSm: 17px; // Smaller splitter, used inside elements like a Timeline view
198-
$colorSplitterBaseBg: #fff;
199-
$colorSplitterBg: rgba($colorSplitterBaseBg, 0.2);
195+
// All splitterD* values MUST both be either odd or even numbers
196+
$splitterD: 20px;
197+
$splitterDSm: 10px; // Smaller splitter, used inside elements like a Timeline view
198+
$splitterHandleD: 2px;
199+
$colorSplitterBaseBg: pullForward($colorBodyBg, 10%);
200+
$colorSplitterBg: $colorSplitterBaseBg;
200201
$splitterShdw: rgba(black, 0.4) 0 0 3px;
201202
$splitterEndCr: none;
202-
$colorSplitterHover: rgba($colorSplitterBaseBg, 0.5);
203+
$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent);
203204
$colorSplitterActive: $colorKey;
204205

205206
// Minitabs
206-
$colorMiniTabBg: rgba($colorSplitterBaseBg, 0.2);
207-
$colorMiniTabFg: rgba($colorSplitterBaseBg, 0.5);
208-
$colorMiniTabBgHov: rgba($colorSplitterBaseBg, 0.5);
207+
$colorMiniTabBg: $colorSplitterBg;
208+
$colorMiniTabFg: pushBack($colorMiniTabBg, 10%);
209+
$colorMiniTabBgHov: $colorSplitterHover;
210+
$colorMiniTabFgHov: #fff;
209211

210212
// Mobile
211213
$colorMobilePaneLeft: darken($colorBodyBg, 5%);

‎platform/commonUI/themes/snow/res/sass/_constants.scss

+6-4
Original file line numberDiff line numberDiff line change
@@ -191,20 +191,22 @@ $scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
191191
$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
192192

193193
// Splitter
194-
$splitterD: 16px; // splitterD and $splitterHandleD should both be odd, or even
195-
$splitterHandleD: 2px;
194+
// All splitterD* values MUST both be either odd or even numbers
195+
$splitterD: 16px;
196196
$splitterDSm: 14px; // Smaller splitter, used inside elements like a Timeline view
197+
$splitterHandleD: 2px;
197198
$colorSplitterBaseBg: $colorBodyBg;
198199
$colorSplitterBg: pullForward($colorSplitterBaseBg, 15%);
199200
$splitterShdw: none;
200201
$splitterEndCr: none;
201-
$colorSplitterHover: pullForward($colorBodyBg, 30%);
202+
$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
202203
$colorSplitterActive: $colorKey;
203204

204205
// Minitabs
205206
$colorMiniTabBg: $colorSplitterBg;
206207
$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
207-
$colorMiniTabBgHov: pullForward($colorMiniTabBg, 20%);
208+
$colorMiniTabBgHov: $colorSplitterHover;
209+
$colorMiniTabFgHov: #fff;
208210

209211
// Mobile
210212
$colorMobilePaneLeft: darken($colorBodyBg, 2%);

‎platform/features/timeline/res/sass/_timelines.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -241,8 +241,8 @@
241241
@include trans-prop-nice-fade(500ms);
242242
opacity: 0;
243243
height: $timelineTopPaneHeaderH;
244-
width: 100px; left: auto;
245-
padding: $interiorMargin;
244+
left: auto;
245+
padding: $interiorMargin $interiorMargin $interiorMargin $interiorMargin * 10;
246246
text-align: right;
247247
z-index: 10;
248248
}

‎platform/features/timeline/res/templates/timeline.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,15 @@
1919
this source code distribution or the Licensing information page available
2020
at runtime from the About dialog for additional information.
2121
-->
22-
<div class="s-timeline l-timeline-holder split-layout vertical"
22+
<div class="s-timeline l-timeline-holder split-layout vertical splitter-sm"
2323
ng-controller="TimelineController as timelineController">
2424

2525
<mct-split-pane anchor="left" class="abs" position="pane.x">
2626
<!-- LEFT PANE: TABULAR AND RESOURCE LEGEND AREAS -->
2727
<mct-split-pane anchor="bottom"
2828
position="pane.y"
2929
class="abs horizontal split-pane-component l-timeline-pane l-pane-l t-pane-v">
30-
<!-- TOP PANE TABULAR AREA. ADD CLASS "hidden" FOR INTERIM NO-TABULAR DELIVERY -->
30+
<!-- TOP PANE TABULAR AREA -->
3131
<div class="split-pane-component s-timeline-tabular l-timeline-pane t-pane-h l-pane-top">
3232
<!-- TABULAR LEFT FIXED AREA -->
3333
<div class="t-pane-v l-pane-l l-tabular-l"

0 commit comments

Comments
 (0)