mirror of
https://github.com/nasa/openmct.git
synced 2024-12-20 13:43:09 +00:00
[Frontend] Manual re-do of collapse/expand panes
open #90 Major work on new .mini-tab elements, used as controls to expand/collapse panes; Cleaned up splitter hover behavior; Changed mixin controlGrippy to not be tied to :before;
This commit is contained in:
Charles Hacskaylo
parent
4f27104663
commit
536d5616d4
@ -20,43 +20,42 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<span ng-controller="BrowseObjectController">
|
||||
<div class="object-browse-bar bar l-flex">
|
||||
<div class="items-select left">
|
||||
<mct-representation key="'back-arrow'"
|
||||
mct-object="domainObject"
|
||||
class="l-back"></mct-representation>
|
||||
<mct-representation key="'object-header'" mct-object="domainObject">
|
||||
</mct-representation>
|
||||
</div>
|
||||
<div class="btn-bar right">
|
||||
<mct-representation key="'switcher'"
|
||||
mct-object="domainObject"
|
||||
ng-model="representation">
|
||||
</mct-representation>
|
||||
<!-- Temporarily, on mobile, the action buttons are hidden-->
|
||||
<mct-representation key="'action-group'"
|
||||
mct-object="domainObject"
|
||||
parameters="{ category: 'view-control' }"
|
||||
class="mobile-hide">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
<mct-split-pane class='t-object-and-inspector contents abs' anchor='right'>
|
||||
<mct-split-pane class='l-object-and-inspector contents abs' anchor='right'>
|
||||
<div class='split-pane-component t-object pane left'>
|
||||
<div class="object-browse-bar bar l-flex">
|
||||
<div class="items-select left">
|
||||
<mct-representation key="'back-arrow'"
|
||||
mct-object="domainObject"
|
||||
class="l-back"></mct-representation>
|
||||
<mct-representation key="'object-header'" mct-object="domainObject">
|
||||
</mct-representation>
|
||||
</div>
|
||||
<div class="btn-bar right">
|
||||
<mct-representation key="'switcher'"
|
||||
mct-object="domainObject"
|
||||
ng-model="representation">
|
||||
</mct-representation>
|
||||
<!-- Temporarily, on mobile, the action buttons are hidden-->
|
||||
<mct-representation key="'action-group'"
|
||||
mct-object="domainObject"
|
||||
parameters="{ category: 'view-control' }"
|
||||
class="mobile-hide">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
<mct-representation key="representation.selected.key"
|
||||
mct-object="representation.selected.key && domainObject"
|
||||
class="abs object-holder">
|
||||
</mct-representation>
|
||||
<a class="ui-symbol icon mobile-hide"
|
||||
style="position: absolute; z-index: 1000; right: 0;"
|
||||
ng-click="ngModel.toggle()">F</a>
|
||||
<a class="mini-tab anchor-right mobile-hide toggle-pane toggle-inspect"
|
||||
ng-click="ngModel.toggle()"></a>
|
||||
</div><!--/ t-object -->
|
||||
|
||||
<mct-splitter class="mobile-hide" ng-class="{ hidden: !ngModel.visible()}"></mct-splitter>
|
||||
|
||||
<div class='split-pane-component t-inspector pane right mobile-hide'
|
||||
ng-class="{ hidden:!ngModel.visible() }">
|
||||
Inspector goes here
|
||||
<!--Inspector goes here-->
|
||||
</div>
|
||||
</mct-split-pane><!--/ t-object-and-inspector -->
|
||||
</span>
|
||||
|
||||
@ -54,9 +54,7 @@
|
||||
<mct-splitter class="mobile-hide" ng-class="{ hidden: !modelPaneTree.visible()}"></mct-splitter>
|
||||
|
||||
<div class='split-pane-component items pane right-repr'>
|
||||
<a class="ui-symbol icon mobile-menu-icon"
|
||||
style="position: absolute; z-index: 1000"
|
||||
ng-click="modelPaneTree.toggle()">m</a>
|
||||
<a class="mini-tab anchor-left toggle-pane toggle-tree" ng-click="modelPaneTree.toggle()"></a>
|
||||
<div class='holder abs l-mobile' id='content-area' ng-controller="PaneController as modelPaneInspect">
|
||||
<mct-representation mct-object="navigatedObject"
|
||||
key="'browse-object'"
|
||||
|
||||
@ -34,10 +34,6 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ui-symbol {
|
||||
font-family: 'symbolsfont';
|
||||
}
|
||||
|
||||
/************************** HTML ENTITIES */
|
||||
a {
|
||||
color: $colorA;
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
}
|
||||
|
||||
.ui-symbol {
|
||||
font-family: 'symbolsfont';
|
||||
&.type-icon {
|
||||
color: $colorObjHdrIc;
|
||||
}
|
||||
|
||||
@ -156,32 +156,34 @@
|
||||
}
|
||||
|
||||
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
|
||||
&:before {
|
||||
@include trans-prop-nice("border-color", 0.75s);
|
||||
content: '';
|
||||
display: block;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
//&:before {
|
||||
@include trans-prop-nice("border-color", 25ms);
|
||||
content: '';
|
||||
display: block;
|
||||
//height: auto;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
||||
@if $direction == "horizontal" {
|
||||
border-top: $w $style darken($b, 15%);
|
||||
top: 2px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
@if $direction == "horizontal" {
|
||||
border-top: $w $style darken($b, 15%);
|
||||
top: 2px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
height: 1px;
|
||||
|
||||
} @else if $direction == "vertical" {
|
||||
border-left: $w $style darken($b, 15%);
|
||||
left: 2px;
|
||||
bottom: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
&:not(.disabled):hover:before {
|
||||
@include trans-prop-nice("border-color", 25ms);
|
||||
border-color: $colorGrippyInteriorHover;
|
||||
} @else if $direction == "vertical" {
|
||||
border-left: $w $style darken($b, 15%);
|
||||
left: 2px;
|
||||
bottom: 5px;
|
||||
top: 5px;
|
||||
width: 1px;
|
||||
}
|
||||
//}
|
||||
//&:not(.disabled):hover:before {
|
||||
// @include trans-prop-nice("border-color", 25ms);
|
||||
// border-color: $colorGrippyInteriorHover;
|
||||
//}
|
||||
}
|
||||
|
||||
@mixin boxIncised($sVal: 0.6, $inset: 5px) {
|
||||
|
||||
@ -22,13 +22,17 @@
|
||||
$baseRatio: 1.5;
|
||||
$pad: $interiorMargin * $baseRatio;
|
||||
|
||||
.s-btn {
|
||||
@include box-sizing(border-box);
|
||||
.s-btn,
|
||||
.s-icon-btn {
|
||||
@include user-select(none);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
height: $btnStdH;
|
||||
line-height: $btnStdH;
|
||||
}
|
||||
|
||||
.s-btn {
|
||||
@include box-sizing(border-box);
|
||||
padding: 0 $pad;
|
||||
font-size: 0.7rem;
|
||||
|
||||
@ -89,6 +93,78 @@ $pad: $interiorMargin * $baseRatio;
|
||||
}
|
||||
}
|
||||
|
||||
.s-icon-btn {
|
||||
@extend .ui-symbol;
|
||||
color: $colorBtnIcon;
|
||||
&:hover {
|
||||
color: lighten($colorBtnIcon, $ltGamma);
|
||||
}
|
||||
}
|
||||
|
||||
.mini-tab {
|
||||
// Meant to be used as pane hide/show control elements in concert with mct-splitter
|
||||
@extend .ui-symbol;
|
||||
@include trans-prop-nice(left, 150ms);
|
||||
//@include test(green);
|
||||
$iconD: 12px;
|
||||
$arwD: 7px;
|
||||
$c: pullForward($colorBodyBg, 15%);
|
||||
color: $c;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-size: $iconD;
|
||||
line-height: $iconD;
|
||||
height: $iconD; width: $iconD;
|
||||
|
||||
&:hover {
|
||||
color: pullForward($c, 20%);
|
||||
&:after {
|
||||
color: $colorKey;
|
||||
}
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
@include trans-prop-nice(color, 200ms);
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:before {
|
||||
// Always the arrow icon
|
||||
@include trans-prop-nice(left, 150ms);
|
||||
//@include test(green);
|
||||
font-size: $arwD;
|
||||
height: 100%; width: $arwD;
|
||||
}
|
||||
&:after {
|
||||
// Representative icon
|
||||
//@include test(red);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.anchor-left {
|
||||
// < []
|
||||
$xpos: (1px + $arwD) * -1;
|
||||
&:before {
|
||||
content:'\3c';
|
||||
left: $xpos;
|
||||
}
|
||||
&:hover:before { left: $xpos - 3; }
|
||||
}
|
||||
&.anchor-right {
|
||||
// [] >
|
||||
$xpos: $iconD + 2px;
|
||||
&:before {
|
||||
content:'\3e';
|
||||
left: $xpos;
|
||||
}
|
||||
&:hover:before { left: $xpos + 3; }
|
||||
}
|
||||
}
|
||||
|
||||
.l-btn-set {
|
||||
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
||||
// Structure: .btn-set > mct-representation class=first|last > .s-btn
|
||||
|
||||
@ -306,8 +306,6 @@ label.checkbox.custom {
|
||||
left: 0;
|
||||
}
|
||||
.knob {
|
||||
//@include btnSubtle();
|
||||
//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
background-color: $sliderColorKnob;
|
||||
&:hover {
|
||||
|
||||
@ -26,14 +26,16 @@
|
||||
background-color: $b;
|
||||
@include border-radius($splitterEndCr);
|
||||
@include boxShdw($splitterShdw);
|
||||
overflow: hidden;
|
||||
//overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
//@if $colorSplitterHover != 'none' {
|
||||
&:hover {
|
||||
background-color: $colorSplitterHover;
|
||||
}
|
||||
//}
|
||||
&:hover {
|
||||
background-color: $colorSplitterHover;
|
||||
&:after {
|
||||
//@include trans-prop-nice("border-color", 25ms);
|
||||
border-color: $colorGrippyInteriorHover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.horizontal {
|
||||
// Slides vertically up and down, splitting the element horizontally
|
||||
@ -49,7 +51,9 @@
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
@include controlGrippy($colorSplitterInterior, horizontal);
|
||||
&:after {
|
||||
@include controlGrippy($colorSplitterInterior, horizontal);
|
||||
}
|
||||
cursor: row-resize;
|
||||
left: 0; right: 0;
|
||||
width: auto;
|
||||
@ -69,16 +73,18 @@
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
@include controlGrippy($colorBodyBg, vertical);
|
||||
bottom: 0;
|
||||
cursor: col-resize;
|
||||
width: $splitterW;
|
||||
&:after {
|
||||
@include controlGrippy($colorBodyBg, vertical);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browse-area .splitter {
|
||||
top: $ueTopBarH + $interiorMarginLg;
|
||||
top: 0; //$ueTopBarH + $interiorMarginLg;
|
||||
}
|
||||
|
||||
.edit-area .splitter {
|
||||
|
||||
@ -94,11 +94,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-icon {
|
||||
.toggle-tree {
|
||||
font-size: 110%;
|
||||
position: absolute;
|
||||
top: $bodyMargin + 2;
|
||||
left: $bodyMargin;
|
||||
&:before {
|
||||
content:'m' !important;
|
||||
}
|
||||
}
|
||||
|
||||
.object-browse-bar {
|
||||
|
||||
@ -252,6 +252,36 @@
|
||||
top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
|
||||
}
|
||||
}
|
||||
.mini-tab.toggle-pane {
|
||||
$h: $ueTopBarH;
|
||||
$paneOffset: $interiorMarginLg * -3;
|
||||
//font-size: 0.7rem;
|
||||
//position: absolute;
|
||||
//height: $h;
|
||||
//line-height: $h;
|
||||
top: 5px;
|
||||
z-index: 2;
|
||||
&.toggle-tree.anchor-left {
|
||||
//@include test(green);
|
||||
left: $paneOffset;
|
||||
/* &:hover {
|
||||
left: $paneOffset - 2;
|
||||
}*/
|
||||
&:after {
|
||||
content:'F';
|
||||
}
|
||||
}
|
||||
&.toggle-inspect.anchor-right {
|
||||
$xpos: $paneOffset + $interiorMargin;
|
||||
right: $xpos;
|
||||
/* &:hover {
|
||||
right: $xpos - 2;
|
||||
}*/
|
||||
&:after {
|
||||
content:'F'; //\e612
|
||||
}
|
||||
}
|
||||
}
|
||||
&.items {
|
||||
.object-browse-bar {
|
||||
.left.abs,
|
||||
@ -289,7 +319,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -358,46 +387,20 @@
|
||||
// right representation.
|
||||
.browse-hidetree {
|
||||
@include user-select(none);
|
||||
// Sets the left tree menu when the tree
|
||||
// is hidden.
|
||||
// Sets the left tree menu when the tree is hidden.
|
||||
.pane.left.treeview {
|
||||
opacity: 0;
|
||||
//right: 100% !important;
|
||||
//width: auto !important;
|
||||
//overflow-y: hidden;
|
||||
//overflow-x: hidden;
|
||||
}
|
||||
// Sets the right represenation when
|
||||
// the tree is hidden.
|
||||
// Sets the right represenation when the tree is hidden.
|
||||
.pane.right-repr {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.browse-showtree {
|
||||
// NOTE: DISABLED SELECTION
|
||||
// Selection disabled in both panes
|
||||
// causing cut/copy/paste menu to
|
||||
// not appear. Should me moved in
|
||||
// future to properly work
|
||||
//@include user-select(none);
|
||||
|
||||
// Sets the left tree menu when the tree is shown.
|
||||
.pane.left.treeview {
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
//@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
|
||||
opacity: 1;
|
||||
//display: block !important;
|
||||
//width: auto !important; // CH CO
|
||||
//right: auto;
|
||||
//width: $proporMenuWithView;
|
||||
}
|
||||
// Sets the right representation when the tree is shown.
|
||||
.pane.right-repr {
|
||||
//left: $proporMenuWithView;
|
||||
//width: auto !important;
|
||||
|
||||
//left: 0 !important;
|
||||
//transform: translateX($proporMenuWithView);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user