ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-18 20:57:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Pane transitions

Browse Source 
- Fixed pane transitions;
This commit is contained in:
charlesh88 2018-08-28 10:01:02 -07:00
parent cf160c27e9
commit 7d7eeff462
4 changed files with 21 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/ui/components/controls/pane.vue
View File

@ -29,6 +29,7 @@
.l-pane {
opacity: 1;
pointer-events: inherit;
transition: transOut;
&__handle {
// __handle doesn't appear in mobile
@ -60,7 +61,6 @@
/************************ CONTENTS */
&__contents {
//display: none;
opacity: 1;
pointer-events: inherit;
transition: opacity 250ms ease 250ms;
@ -69,7 +69,7 @@
/************************ COLLAPSED STATE */
&--collapsed {
flex-basis: 0px;
flex-basis: 0px !important;
min-width: 0px !important;
min-height: 0px !important;
transition: all 350ms ease;
@ -135,11 +135,9 @@
&[class*="--horizontal"] {
$splitterHorzPad: nth($splitterCollapseBtnD, 1) + $interiorMargin;
&[class*="--collapsed"] {
> .l-pane__handle {
//background: $colorSplitterButtonBg;
//width: nth($splitterCollapseBtnD, 1) + 1;
}
> .l-pane__collapse-button {

13
src/ui/components/layout/Layout.vue
View File

@ -72,7 +72,7 @@
background: $colorTreeBg;
padding: $m;
backface-visibility: hidden;
width: 40%;
flex-basis: 40%;
.l-pane__contents {
display: flex;
@ -84,10 +84,8 @@
}
}
[class*="collapse-button"] {
// For mobile, collapse button becomes menu icon
body.mobile & {
height: $mobileMenuIconD;
width: $mobileMenuIconD;
@ -118,15 +116,16 @@
@include phonePortrait() {
&__pane-tree {
width: calc(100% - #{$mobileMenuIconD});
flex-basis: calc(100% - #{$mobileMenuIconD});
+ .l-pane {
// Hide pane-main over when this pane is expanded
// Hide pane-main when this pane is expanded
opacity: 0;
pointer-events: none;
}
&[class*="--collapsed"] + .l-pane {
// Show pane-main when tree is collapsed
opacity: 1;
pointer-events: inherit;
transition: opacity 250ms ease 250ms;
@ -187,11 +186,11 @@
}
&__pane-tree {
width: 300px;
flex-basis: 300px;
}
&__pane-inspector {
width: 200px;
flex-basis: 200px;
}
}
}

14
src/ui/components/layout/mct-tree.vue
View File

@ -23,7 +23,6 @@
&__item {
border-radius: $controlCr;
color: $colorItemTreeFg;
display: flex;
align-items: stretch;
cursor: pointer;
@ -38,17 +37,28 @@
}
}
.c-tree__item__view-control {
&__view-control {
color: $colorItemTreeVC;
margin-right: $interiorMarginSm;
}
&__name {
color: $colorItemTreeFg;
width: 100%;
&:before {
color: $colorItemTreeIcon;
width: $treeTypeIconW;
}
}
body.mobile & {
@include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
height: $mobileTreeItemH;
margin-bottom: $interiorMarginSm;
[class*="view-control"] {
width: ceil($mobileTreeItemH * 0.5);
}
}
}
}

22
src/ui/components/layout/tree-item.vue
View File

@ -22,28 +22,6 @@
</li>
</template>
<style lang="scss">
@import "~styles/sass-base";
.c-tree__item,
.c-search-result__item {
&__name {
width: 100%; // Make hit area as large as possible
}
body.mobile & {
@include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
height: $mobileTreeItemH;
margin-bottom: $interiorMarginSm;
.c-view-control {
font-size: 1em;
width: ceil($mobileTreeItemH * 0.75);
}
}
}
</style>
<script>
import viewControl from '../controls/viewControl.vue'
export default {