ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 21:27:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Code trimming / cleanup

Browse Source 
- pane, Layout;
This commit is contained in:
charlesh88 2018-08-30 13:38:35 -07:00
parent 6edaea0889
commit e3bb387139
2 changed files with 23 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,17 +31,21 @@
/**************************** BASE - MOBILE AND DESKTOP */
.l-multipane {
display: flex;
flex: 1 1 auto;
&--horizontal {
&--horizontal,
> .l-pane {
flex-flow: row nowrap;
}
&--vertical {
&--vertical,
> .l-pane {
flex-flow: column nowrap;
}
}
.l-pane {
backface-visibility: hidden;
display: flex;
opacity: 1;
pointer-events: inherit;
@ -63,6 +67,12 @@
z-index: 1;
}
&--reacts {
// This is the pane that doesn't hold the handle
// It reacts to other panes that are able to resize
flex: 1 1 0;
}
&[class*="--horizontal"] {
&.l-pane--collapsed {
padding-left: 0 !important;
@ -91,6 +101,12 @@
.l-pane__contents {
padding: 0;
}
// Create margin between elements in a pane
> [class*="__"] + [class*="__"] {
// Doesn't match first elem, but will match all subsequent
margin-top: $interiorMargin;
}
}
/************************ COLLAPSED STATE */
@ -180,12 +196,6 @@
flex: 1 0 90%;
}
&--reacts {
// This is the pane that doesn't hold the handle
// It reacts to other panes that are able to resize
flex: 1 1 0;
}
&--resizing {
// User is dragging the handle and resizing a pane
@include userSelectNone();
@ -207,9 +217,6 @@
&:after {
content: $glyph-icon-plus;
left: 50%;
right: auto;
transform: translateX(-50%);
}
&:hover {
@ -255,6 +262,9 @@
background: none;
padding: 0;
top: $interiorMarginSm;
left: 50%;
right: auto;
transform: translateX(-50%);
width: auto;
}
@ -363,7 +373,6 @@ export default {
this.initial = this.$el.offsetWidth;
}
}
console.log('size', this.initial)
},
getPosition: function (event) {
return this.type === 'horizontal' ?

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

@ -38,17 +38,11 @@
/******************************* SHELL */
.l-shell {
$m: $interiorMargin;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
flex-flow: column nowrap;
/*************************** MOBILE-FIRST */
&__head {
display: none;
}
&__status {
background: $colorBodyFg;
color: $colorBodyBg;
@ -57,35 +51,10 @@
padding: $interiorMarginSm;
}
/********** MAIN AREA PANES */
&__pane-tree,
&__pane-main,
&__pane-inspector {
display: flex;
flex-flow: column nowrap;
// Create margin between shell elements in a pane
> [class*="l-shell__"] + [class*="l-shell__"] {
margin-top: $interiorMargin;
}
}
&__pane-tree {
background: $colorTreeBg;
//padding: $m;
backface-visibility: hidden;
width: 40%;
.l-pane__contents {
display: flex;
flex-flow: column nowrap;
> [class*="__"] {
// Margin between elements
&:not(:last-child) { margin-bottom: $interiorMargin };
}
}
[class*="collapse-button"] {
// For mobile, collapse button becomes menu icon
body.mobile & {
@ -103,14 +72,8 @@
}
}
&__pane-main {
flex: 1 1 auto;
}
&__head,
&__pane-inspector {
display: flex;
//padding: $m;
body.mobile & {
display: none;
}
@ -136,18 +99,12 @@
}
/********** MAIN AREA */
&__main {
flex: 1 1 auto;
display: flex;
}
&__main-container {
// Wrapper for main views
$m: $interiorMargin;
font-size: 16px; // TEMP FOR LEGACY STYLING
overflow: auto;
position: absolute;
top: $m; right: $m; bottom: $m; left: $m;
top: $interiorMargin; right: $interiorMarginLg; bottom: $interiorMargin; left: $interiorMarginLg;
}
&__tree {
@ -156,11 +113,6 @@
overflow-y: auto;
}
&__object-view {
flex: 1 1 auto;
//padding: $interiorMarginLg;
}
&__time-conductor {
border-top: 1px solid $colorInteriorBorder;
min-height: 50px;
@ -184,7 +136,6 @@
&__pane-tree,
&__pane-inspector {
max-width: 30%;
min-width: 0;
}
&__pane-tree {