From e3bb3871395ef7906e1141b76c609472598e2a5d Mon Sep 17 00:00:00 2001
From: charlesh88 <charlesh88@gmail.com>
Date: Thu, 30 Aug 2018 13:38:35 -0700
Subject: [PATCH] Code trimming / cleanup

- pane, Layout;
---
 src/ui/components/controls/pane.vue | 33 +++++++++++-------
 src/ui/components/layout/Layout.vue | 53 ++---------------------------
 2 files changed, 23 insertions(+), 63 deletions(-)

diff --git a/src/ui/components/controls/pane.vue b/src/ui/components/controls/pane.vue
index b43752cd7e..c6ea8da03d 100644
--- a/src/ui/components/controls/pane.vue
+++ b/src/ui/components/controls/pane.vue
@@ -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' ?
diff --git a/src/ui/components/layout/Layout.vue b/src/ui/components/layout/Layout.vue
index 2a98efa41d..dbec15225b 100644
--- a/src/ui/components/layout/Layout.vue
+++ b/src/ui/components/layout/Layout.vue
@@ -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 {