[Frontend] Apply flex layout to object header elements
open #250 open #260 vista#132 Major refactoring to markup and CSS to apply flex layout strategy to object headers; Flex necessary to fix 'overflow: hidden' setting applied in open90 to object-browse-bar that was preventing the view switcher menu from appearing; Browse, edit, mobile, frames in layouts, etc. all visually checked in a first go round; Mobile classes tweaked to fix left and right margin problems resulting from open90 changes; z-indexing of Inspector pane and splitters changed to allow primary pane elements to overflow beneath when primary pane width is severely constrained;
This commit is contained in:
Charles Hacskaylo
@@ -46,36 +46,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bar {
|
||||
.icon.major {
|
||||
// .bar and following commented out as part of refactor to use flex layout for this stuff
|
||||
//.bar {
|
||||
/* .icon.major {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
&.abs {
|
||||
text-wrap: none;
|
||||
white-space: nowrap;
|
||||
&.left,
|
||||
.left {
|
||||
width: 45%;
|
||||
right: auto;
|
||||
}
|
||||
&.right,
|
||||
.right {
|
||||
width: 45%;
|
||||
left: auto;
|
||||
text-align: right;
|
||||
.icon.major {
|
||||
margin-left: $interiorMargin * 3;
|
||||
}
|
||||
}
|
||||
.l-flex,
|
||||
&.l-flex {
|
||||
.left,
|
||||
.right {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
//&.abs {
|
||||
//text-wrap: none;
|
||||
//white-space: nowrap;
|
||||
//&.left,
|
||||
//.left {
|
||||
// width: 45%;
|
||||
// right: auto;
|
||||
//}
|
||||
//&.right,
|
||||
//.right {
|
||||
// width: 45%;
|
||||
// left: auto;
|
||||
// text-align: right;
|
||||
// .icon.major {
|
||||
// margin-left: $interiorMargin * 3;
|
||||
// }
|
||||
//}
|
||||
//}
|
||||
//}
|
||||
|
||||
.user-environ {
|
||||
.browse-area,
|
||||
@@ -141,21 +135,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
.browse-mode {
|
||||
.split-layout {
|
||||
.split-pane-component.pane {
|
||||
//@include test(green);
|
||||
&.treeview.left {
|
||||
min-width: 150px;
|
||||
max-width: 800px;
|
||||
width: $ueBrowseLeftPaneTreeW;
|
||||
}
|
||||
&.t-inspect.right {
|
||||
min-width: 200px;
|
||||
max-width: 600px;
|
||||
//padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element
|
||||
width: $ueBrowseRightPaneInspectW;
|
||||
}
|
||||
.split-layout {
|
||||
.split-pane-component.pane {
|
||||
//@include test(green);
|
||||
&.treeview.left {
|
||||
min-width: 150px;
|
||||
max-width: 800px;
|
||||
width: $ueBrowseLeftPaneTreeW;
|
||||
}
|
||||
&.t-inspect.right {
|
||||
min-width: 200px;
|
||||
max-width: 600px;
|
||||
//padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element
|
||||
width: $ueBrowseRightPaneInspectW;
|
||||
z-index: 3; // Must lift up beyond primary pane to allow overflow to go underneath
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -187,7 +180,7 @@
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.treeview.left {
|
||||
//&.treeview.left {
|
||||
// Converted to flex layout
|
||||
|
||||
//.create-btn-holder {
|
||||
@@ -209,7 +202,7 @@
|
||||
// overflow: auto;
|
||||
// top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
|
||||
//}
|
||||
}
|
||||
//}
|
||||
|
||||
.mini-tab-icon.toggle-pane {
|
||||
//@include test(blue, 0.3);
|
||||
@@ -269,30 +262,6 @@
|
||||
}
|
||||
|
||||
.split-layout {
|
||||
&.horizontal {
|
||||
// Slides up and down
|
||||
> .pane {
|
||||
// @include test();
|
||||
margin-top: $interiorMargin;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* &.vertical {
|
||||
// Slides left and right
|
||||
> .pane.left {
|
||||
> .holder {
|
||||
left: $bodyMargin;
|
||||
}
|
||||
}
|
||||
> .pane.right {
|
||||
> .holder {
|
||||
right: $bodyMargin;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
// Specific elements margins
|
||||
.holder.holder-treeview-elements {
|
||||
top: $bodyMargin;
|
||||
@@ -315,7 +284,6 @@
|
||||
bottom: $bodyMargin;
|
||||
left: $bodyMargin;
|
||||
right: $bodyMargin;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -348,19 +316,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
/***************************************************** OBJECT BROWSE BAR */
|
||||
.object-browse-bar {
|
||||
//@include test(blue);
|
||||
@include absPosDefault(0, hidden);
|
||||
@include absPosDefault(0, visible); // Must use visible to avoid hiding view switcher menu
|
||||
@include box-sizing(border-box);
|
||||
height: $ueTopBarH;
|
||||
line-height: $ueTopBarH;
|
||||
white-space: nowrap;
|
||||
|
||||
.left {
|
||||
padding-right: $interiorMarginLg * 2;
|
||||
padding-right: $interiorMarginLg;
|
||||
.l-back {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
@@ -404,6 +371,9 @@
|
||||
}
|
||||
.pane-inspect-hidden {
|
||||
.l-object-and-inspector {
|
||||
.t-inspect {
|
||||
z-index: 1 !important; // Move down so that primary pane elements are clickable
|
||||
}
|
||||
.l-inspect,
|
||||
.splitter-inspect {
|
||||
opacity: 0;
|
||||
@@ -421,8 +391,10 @@
|
||||
.pane-inspect-hidden .l-object-and-inspector {
|
||||
.pane.left { right: $ueCollapsedPaneEdgeM !important; }
|
||||
}
|
||||
|
||||
.pane:not(.resizing) {
|
||||
@include trans-prop-nice-resize-w(250ms);
|
||||
}
|
||||
.pane.primary-pane .object-browse-bar {
|
||||
min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user