ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-15 13:48:12 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Markup / scss refactor WIP

Browse Source 
- Scroll on tree;
- Class renaming pane > l-pane;
- Refinements to collapsed state, WIP
This commit is contained in:
charlesh88
2018-08-15 18:05:44 -07:00
parent 1eaa568e04
commit 233c17e75b
3 changed files with 64 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,41 +1,46 @@
<template> <template>
<div class="pane" <div class="l-pane"
:class="{ :class="{
'pane--horizontal': type === 'horizontal', 'l-pane--horizontal': type === 'horizontal',
'pane--vertical': type === 'vertical', 'l-pane--vertical': type === 'vertical',
'pane--collapsed': collapsed 'l-pane--collapsed': collapsed
}"> }">
<div v-if="handle" <div v-if="handle"
class="pane__resize-handle" class="l-pane__resize-handle"
:class="{ :class="{
'pane__resize-handle--before': handle === 'before', 'l-pane__resize-handle--before': handle === 'before',
'pane__resize-handle--after': handle === 'after' 'l-pane__resize-handle--after': handle === 'after'
}" }"
@mousedown="start" @mousedown="start"
> >
<a class="pane__collapse-button" <a class="l-pane__collapse-button"
:class="{ :class="{
'pane__collapse-button--before': handle === 'before', 'l-pane__collapse-button--before': handle === 'before',
'pane__collapse-button--after': handle === 'after' 'l-pane__collapse-button--after': handle === 'after'
}" }"
@click="toggleCollapse" @click="toggleCollapse"
v-if="collapsable"></a> v-if="collapsable"></a>
</div> </div>
<slot></slot> <div class="l-pane__contents">
<slot></slot>
</div>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
@import "~styles/constants"; @import "~styles/sass-base";
@import "~styles/constants-snow";
@import "~styles/mixins";
@import "~styles/glyphs";
$hitMargin: 4px; $hitMargin: 4px;
.pane { // TODO: get handles visible when pane is collapsed
& > .pane__resize-handle {
.l-pane {
&__contents {
display: contents;
}
& > .l-pane__resize-handle {
z-index: 1; z-index: 1;
display: block; display: block;
background: $colorSplitterBg; background: $colorSplitterBg;
@ -44,7 +49,11 @@
transition: $transOut; transition: $transOut;
&:before { &:before {
// Extended hit area
content: ''; content: '';
display: block;
position: absolute;
z-index: -1;
} }
&:active, &:hover { &:active, &:hover {
@ -61,17 +70,20 @@
} }
&--horizontal { &--horizontal {
& > .pane__resize-handle { & > .l-pane__resize-handle {
cursor: col-resize; cursor: col-resize;
width: $splitterHandleD; width: $splitterHandleD;
top: 0; top: 0;
bottom: 0; bottom: 0;
&--before { &--before {
left: 0; left: 0;
} }
&--after { &--after {
right: 0; right: 0;
} }
&:before { &:before {
top: 0; top: 0;
right: $hitMargin * -1; right: $hitMargin * -1;
@ -82,17 +94,20 @@
} }
&--vertical { &--vertical {
> .pane__resize-handle { > .l-pane__resize-handle {
cursor: row-resize; cursor: row-resize;
height: $splitterHandleD; height: $splitterHandleD;
left: 0; left: 0;
right: 0; right: 0;
&--before { &--before {
top: 0 top: 0
} }
&--after { &--after {
bottom: 0; bottom: 0;
} }
&:before { &:before {
top: $hitMargin * -1; top: $hitMargin * -1;
right: 0; right: 0;
@ -103,13 +118,12 @@
} }
& > .pane__resize-handle > .pane__collapse-button { & > .l-pane__resize-handle > .l-pane__collapse-button {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
z-index: 3; z-index: 3;
background: $colorSplitterBg; background: $colorSplitterBg;
transition: $transOut; transition: $transOut;
@ -133,7 +147,7 @@
} }
} }
&--horizontal > .pane__resize-handle > .pane__collapse-button { &--horizontal > .l-pane__resize-handle > .l-pane__collapse-button {
width: $splitterD; width: $splitterD;
height: 40px; height: 40px;
@ -153,16 +167,23 @@
} }
} }
&--vertical > .pane__resize-handle > .pane__collapse-button { &--vertical > .l-pane__resize-handle > .l-pane__collapse-button {
/* TODO: style buttons for vertical collapse. */ /* TODO: style buttons for vertical collapse. */
} }
&--collapsed {
padding: 0 !important;
.l-pane__contents {
display: none;
}
}
} }
.pane--horizontal.pane--collapsed { .l-pane--horizontal.l-pane--collapsed {
width: 0px; width: 0px;
min-width: 0px; min-width: 0px;
} }
.pane--vertical.pane--collapsed { .l-pane--vertical.l-pane--collapsed {
height: 0px; height: 0px;
min-height: 0px; min-height: 0px;
} }

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

@ -8,7 +8,7 @@
<div class="l-shell__search"> <div class="l-shell__search">
<search class="c-search--major" ref="shell-search"></search> <search class="c-search--major" ref="shell-search"></search>
</div> </div>
<div class="l-shell__tree u-last"> <div class="l-shell__tree">
<MctTree ref="shell-tree"></MctTree> <MctTree ref="shell-tree"></MctTree>
</div> </div>
</pane> </pane>
@ -57,6 +57,10 @@
order: 2; order: 2;
} }
&__tree {
flex: 1 1 100%;
}
&__object-view { &__object-view {
flex: 1 1 auto; flex: 1 1 auto;
padding: $interiorMarginLg; padding: $interiorMarginLg;

6
src/ui/components/layout/MctTree.vue
View File

@ -22,8 +22,12 @@
@import "~styles/sass-base"; @import "~styles/sass-base";
.c-tree { .c-tree {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
.c-tree { .c-tree {
display: none; display: none; // Will be overridden when in an expanded tree node.
margin-left: 20px; margin-left: 20px;
} }