[Frontend] Significant mods to main layout strategy
open #90 IN-PROGRESS To support desired edge-to-edge styling of Inspector pane; Removed superflous .scss file; Enhancements to splitter .scss to allow flush edging and edge shadows;
This commit is contained in:
Charles Hacskaylo
@@ -1,36 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT Web includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
// Styles to temporarily hide non-functional elements
|
||||
|
||||
/******************************** BROWSE */
|
||||
.browse-mode {
|
||||
.browse {
|
||||
&.top-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.browse-area.holder {
|
||||
// When .browse.top-bar is hidden, set the top of the browse-area holder
|
||||
top: $bodyMargin;
|
||||
}
|
||||
}
|
||||
@@ -27,6 +27,8 @@
|
||||
}
|
||||
|
||||
.l-inspect {
|
||||
background: pullForward($colorBodyBg, 3%);
|
||||
@extend .abs;
|
||||
color: $colorInspectorFg;
|
||||
.pane-header {
|
||||
color: pushBack($colorInspectorFg, 20%);
|
||||
|
||||
@@ -70,7 +70,6 @@
|
||||
@import "lists/tabular";
|
||||
@import "plots/plots-main";
|
||||
@import "iframe";
|
||||
@import "hide-non-functional";
|
||||
@import "views";
|
||||
@import "items/item";
|
||||
@import "mobile/item";
|
||||
|
||||
@@ -173,7 +173,7 @@ $pad: $interiorMargin * $baseRatio;
|
||||
// |<
|
||||
text-align: right;
|
||||
&:before {
|
||||
content:'\e613'; // Collapse left icon
|
||||
content:'\3c'; // Collapse left icon e613
|
||||
right: $iconInnerLR;
|
||||
}
|
||||
//&:hover:before { right: $arwAnimOffsetX; }
|
||||
@@ -191,7 +191,7 @@ $pad: $interiorMargin * $baseRatio;
|
||||
// >|
|
||||
text-align: left;
|
||||
&:before {
|
||||
content:'\e614'; // Collapse right icon
|
||||
content:'\3e'; // Collapse right icon e614
|
||||
left: $iconInnerLR;
|
||||
}
|
||||
//&:hover:before { left: $arwAnimOffsetX; }
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
}
|
||||
&:active {
|
||||
&:after {
|
||||
background-color: $colorSplitterActive;
|
||||
background-color: $colorSplitterActive !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,18 +102,30 @@
|
||||
cursor: col-resize;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: $splitterD;
|
||||
&:after {
|
||||
left: $inset; right: $inset;
|
||||
&:not(.flush-right) {
|
||||
width: $splitterD;
|
||||
&:after {
|
||||
left: $inset; right: $inset;
|
||||
}
|
||||
}
|
||||
&.flush-right {
|
||||
width: ceil($splitterD / 2);
|
||||
&:after {
|
||||
background-color: transparent;
|
||||
left: auto; right: 0; width: $splitterHandleD;
|
||||
}
|
||||
&.edge-shdw {
|
||||
@include background-image(linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 100%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browse-area .splitter {
|
||||
/*.browse-area .splitter {
|
||||
top: 0; //$ueTopBarH + $interiorMarginLg;
|
||||
}
|
||||
|
||||
.edit-area .splitter {
|
||||
top: 0;
|
||||
}
|
||||
}*/
|
||||
|
||||
@@ -42,18 +42,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.user-environ .browse-area,
|
||||
/* .user-environ .browse-area,
|
||||
.user-environ .edit-area,
|
||||
.user-environ .editor {
|
||||
top: 0; left: 0; right: 0; bottom: $ueFooterH;
|
||||
}
|
||||
|
||||
.holder.l-mobile {
|
||||
.holder.holder-object-and-inspector,
|
||||
.holder.holder-create-and-search {
|
||||
top: $bodyMargin !important;
|
||||
right: $bodyMargin !important;
|
||||
bottom: $bodyMargin !important;
|
||||
left: $bodyMargin !important;
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
// When the tree is hidden, these are the
|
||||
|
||||
@@ -29,13 +29,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.holder-all {
|
||||
/*.holder-all {
|
||||
$myM: 0; // $interiorMarginSm;
|
||||
top: $myM;
|
||||
right: $myM;
|
||||
bottom: $myM;
|
||||
left: $myM;
|
||||
}
|
||||
}*/
|
||||
|
||||
.browse-area,
|
||||
.edit-area,
|
||||
@@ -95,13 +95,11 @@
|
||||
}
|
||||
|
||||
.user-environ {
|
||||
|
||||
.browse-area,
|
||||
.edit-area,
|
||||
.editor {
|
||||
top: $bodyMargin + $ueTopBarH + ($interiorMargin);
|
||||
right: $bodyMargin;
|
||||
bottom: $ueFooterH + $bodyMargin;
|
||||
left: $bodyMargin;
|
||||
top: 0; left: 0; right: 0; bottom: $ueFooterH;
|
||||
}
|
||||
|
||||
.browse-area,
|
||||
@@ -260,7 +258,7 @@
|
||||
// bottom: $interiorMargin;
|
||||
// }
|
||||
//}
|
||||
.create-and-search-holder {
|
||||
.holder-create-and-search{
|
||||
|
||||
}
|
||||
.search-holder {
|
||||
@@ -275,25 +273,25 @@
|
||||
.mini-tab.toggle-pane {
|
||||
//@include test(blue, 0.3);
|
||||
$paneExpandedOffset: $splitterD + $uePaneMiniTabW - splitterHandleInset($splitterD, $splitterHandleD);
|
||||
$paneCollapsedOffset: $bodyMargin + $ueCollapsedPaneEdgeM;
|
||||
z-index: 5;
|
||||
@include desktop {
|
||||
top: $interiorMarginLg;
|
||||
&.toggle-tree.anchor-left {
|
||||
//@include test(green);
|
||||
left: 0; //$ox;
|
||||
@include transform(translateX(-1 * $paneExpandedOffset));
|
||||
&:after { content: 'F'; } // Folder icon
|
||||
&.collapsed {
|
||||
@include transform(translateX(-1 * $paneCollapsedOffset));
|
||||
@include transform(translateX(-1 * $ueCollapsedPaneEdgeM));
|
||||
}
|
||||
}
|
||||
&.toggle-inspect.anchor-right {
|
||||
$oCx: -1 * $paneCollapsedOffset;
|
||||
$oCx: -1 * $ueCollapsedPaneEdgeM;
|
||||
right: 0; //$ox;
|
||||
@include transform(translateX($paneExpandedOffset));
|
||||
&:after { content: '\e608'; } // Info "i" icon
|
||||
&.collapsed {
|
||||
@include transform(translateX($paneCollapsedOffset));
|
||||
@include transform(translateX($ueCollapsedPaneEdgeM));
|
||||
}
|
||||
}
|
||||
&.toggle-search.anchor-left {
|
||||
@@ -325,18 +323,44 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
/* &.vertical {
|
||||
// Slides left and right
|
||||
> .pane {
|
||||
//margin-left: $interiorMargin; // This spacing is now handled by MCTSplitPane.js
|
||||
> .pane.left {
|
||||
> .holder {
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: $bodyMargin;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
> .pane.right {
|
||||
> .holder {
|
||||
right: $bodyMargin;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
// Specific elements margins
|
||||
.holder.holder-create-and-search {
|
||||
top: $bodyMargin;
|
||||
right: 0;
|
||||
bottom: $bodyMargin;
|
||||
left: $bodyMargin;
|
||||
}
|
||||
|
||||
.holder.holder-object-and-inspector {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
.holder-object {
|
||||
top: $bodyMargin;
|
||||
bottom: $bodyMargin;
|
||||
}
|
||||
.holder-inspector-elements {
|
||||
top: $bodyMargin;
|
||||
bottom: $bodyMargin;
|
||||
left: $bodyMargin + $interiorMarginLg;
|
||||
right: $bodyMargin;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -410,9 +434,9 @@
|
||||
.search-holder .search {
|
||||
opacity: 0;
|
||||
}
|
||||
.create-and-search-holder {
|
||||
.holder-create-and-search{
|
||||
@include trans-prop-nice((top, left), 250ms);
|
||||
top: $ueTopBarH + $interiorMargin !important;
|
||||
top: $ueTopBarH + $interiorMargin;
|
||||
left: -1 * $bodyMargin !important;
|
||||
.create-btn {
|
||||
@include border-left-radius(0);
|
||||
@@ -443,7 +467,7 @@
|
||||
.splitter-treeview {
|
||||
top: $interiorMarginLg + $ueTopBarH !important;
|
||||
}
|
||||
.create-and-search-holder {
|
||||
.holder-create-and-search{
|
||||
@include trans-prop-nice(top, $dur: 250ms, $delay: 200ms);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user