Significant changes to splitter handle and button approach

- WIP!;
- WIP on drag to collapse;

src/styles-new/_constants-snow.scss

@@ -240,9 +240,10 @@ $splitterCollapseBtnD: (10px, 35px);
 $splitterHandleD: 2px;
 $splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
 $colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: pullForward($colorSplitterBaseBg, 10%);
+$colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
 $colorSplitterFg: $colorBodyBg;
-$colorSplitterButtonBg: pullForward($colorSplitterBaseBg, 20%);
+$colorSplitterButtonBg: rgba($colorBodyFg, 0.1); //pullForward($colorSplitterBaseBg, 20%);
+$colorSplitterButtonFg: $colorBodyFg;
 $colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
 $splitterShdw: none;
 $splitterEndCr: none;

src/ui/components/controls/pane.vue

@@ -26,7 +26,7 @@
 
     // TODO: integrate approach at https://codepen.io/charlesh88/pen/KxpvOP
 
-    $hitMargin: 4px;
+    $hitMargin: 2px;
     /**************************** BASE - MOBILE AND DESKTOP */
     .l-pane {
         opacity: 1;
@@ -43,15 +43,13 @@
             align-items: center;
             justify-content: center;
             top: 0; right: 0; // Default
-            z-index: 3;
+            z-index: 1;
         }
 
         &[class*="--horizontal"] {
             &.l-pane--collapsed {
                 padding-left: 0 !important;
                 padding-right: 0 !important;
-                width: 0px;
-                min-width: 0px;
             }
         }
 
@@ -59,8 +57,6 @@
             &.l-pane--collapsed {
                 padding-top: 0 !important;
                 padding-top: 0 !important;
-                height: 0px;
-                min-height: 0px;
             }
         }
 
@@ -76,6 +72,9 @@
 
         /************************ COLLAPSED STATE */
         &--collapsed {
+            flex-basis: 0px;
+            min-width: 0px !important;
+            min-height: 0px !important;
             transition: all 350ms ease;
 
             .l-pane__contents {
@@ -93,9 +92,10 @@
             //@include test(blue, 0.1);
 
             &__handle {
-                z-index: 1;
+                background: $colorSplitterBg;
                 display: block;
                 position: absolute;
+                z-index: 20;
 
                 &:before {
                     content: '';
@@ -107,20 +107,46 @@
 
             &__collapse-button {
                 background: $colorSplitterButtonBg;
-                color: $colorSplitterFg;
+                color: $colorSplitterButtonFg;
 
                 &:before {
+                    content: $glyph-icon-arrow-right;
+                    font-family: symbolsfont;
                     font-size: .5rem;
                 }
             }
 
             &[class*="--collapsed"] {
+                $d: nth($splitterCollapseBtnD, 1);
+                flex-basis: $d;
+                min-width: $d !important;
+                min-height: $d !important;
+
                 > .l-pane__handle {
                     display: none;
                 }
             }
 
             &[class*="--horizontal"] {
+                $splitterHorzPad: nth($splitterCollapseBtnD, 1) + $interiorMargin;
+
+
+                &[class*="--collapsed"] {
+                    > .l-pane__handle {
+                        //background: $colorSplitterButtonBg;
+                        //width: nth($splitterCollapseBtnD, 1) + 1;
+                    }
+
+                    > .l-pane__collapse-button {
+                        bottom: 0; height: auto;
+                        border-radius: unset;
+
+                        &:before {
+                            transform: scaleX(-1);
+                        }
+                    }
+                }
+
                 > .l-pane__handle {
                     cursor: col-resize;
                     top: 0;
@@ -137,18 +163,15 @@
                 }
 
                 > .l-pane__collapse-button {
-                    border-bottom-right-radius: $controlCr;
+                    //border-bottom-right-radius: $controlCr;
-                    height: nth($splitterCollapseBtnD, 2);
+                    bottom: 0;
+                    height: auto; //nth($splitterCollapseBtnD, 2);
                     width: nth($splitterCollapseBtnD, 1);
-
-                    &:before {
-                        content: $glyph-icon-arrow-right;
-                    }
                 }
 
                 /************************** Splitter Before */
                 &[class*="-before"] {
-                    padding-left: nth($splitterCollapseBtnD, 1) + $interiorMargin;
+                    padding-left: $splitterHorzPad;
 
                     > .l-pane__handle,
                     > .l-pane__collapse-button {
@@ -156,19 +179,16 @@
                         transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
                     }
 
-                    > .l-pane__collapse-button {
-                    }
-
                     &[class*="--collapsed"] {
                         > .l-pane__collapse-button {
-                            transform: translateX(-100%) scaleX(-1);
+                           // transform: scaleX(-1);
                         }
                     }
                 }
 
                 /************************** Splitter After */
                 &[class*="-after"] {
-                    padding-right: nth($splitterCollapseBtnD, 1) + $interiorMargin;
+                    padding-right: $splitterHorzPad;
 
                     > .l-pane__handle,
                     > .l-pane__collapse-button {
@@ -182,7 +202,7 @@
 
                     &[class*="--collapsed"] {
                         > .l-pane__collapse-button {
-                            transform: translateX(100%) scaleX(1);
+                           // transform: scaleX(1);
                         }
                     }
                 }
@@ -210,254 +230,10 @@
                 }
 
             }
-
-
-
-
         } // Ends .body.desktop
     } // Ends .l-pane
-
-
-
-
-
-
-
-
-
-
-
-
-
-    .l-pane {
-        /************************ PANES */
-        &--horizontal {
-            // Pane adjusts size horizontally, handles run vertically
-            // Selectors here
-
-            > .l-pane__handle {
-               /* top: 0;
-                bottom: 0;
-
-                &--before {
-                    left: 0;
-                    [class*="collapse-button"] {
-                        left: 0;
-                    }
-                }
-
-                &--after {
-                    right: 0;
-                    [class*="collapse-button"] {
-                        right: 0;
-                    }
-                }
-*/
-
-                body.desktop & {
-                    cursor: col-resize;
-                    width: $splitterHandleD;
-
-                    &:before {
-                        // Extended hit area
-                        top: 0;
-                        right: $hitMargin * -1;
-                        bottom: 0;
-                        left: $hitMargin * -1;
-                    }
-
-                    &:after {
-                        // Grippy
-                        min-height: nth($splitterGrippyD, 3);
-                        height: nth($splitterGrippyD, 2);
-                        width: nth($splitterGrippyD, 1);
-                        top: 50%; left: ($splitterHandleD - nth($splitterGrippyD, 1)) / 2;
-                        transform: translateY(-50%);
-                    }
-
-                    &--before {
-                        // Handle at left edge of containing pane
-                        // left: 0;
-
-                        [class*="collapse-button"] {
-                            // left: 0;
-                            transform: scaleX(-1);
-                        }
-                    }
-
-                    &--after {
-                        // Handle at right edge of containing pane
-                        // right: 0;
-
-                        /*[class*="collapse-button"] {
-                            right: 0;
-                        }*/
-                    }
-
-                    [class*="collapse-button"] {
-                        background: $colorSplitterGrippy;
-                        color: $colorSplitterFg;
-                        font-size: 0.6em;
-                        height: nth($splitterCollapseBtnD, 2);
-                        width: nth($splitterCollapseBtnD, 1);
-
-                        &:before {
-                            content: $glyph-icon-arrow-left;
-                        }
-                    }
-
-                    &.l-pane--collapsed {
-                        > .l-pane__handle {
-                            &--before {
-                                transform: translateX($splitterHandleD * -1) scaleX(-1);
-                            }
-
-                            &--after {
-                                transform: translateX($splitterHandleD) scaleX(-1);
-                            }
-                        }
-                    }
-                }
-            }
-
-
-
-/*            &.l-pane--collapsed {
-                padding-left: 0 !important;
-                padding-right: 0 !important;
-                width: 0px;
-                min-width: 0px;
-            }*/
-        }
-
-        &--vertical {
-            // Pane adjusts size vertically, handles run horizontally
-            // Selectors here
-
-            > .l-pane__handle {
-                //background: green;
-                cursor: row-resize;
-                height: $splitterHandleD;
-                left: 0;
-                right: 0;
-
-                &:before {
-                    top: $hitMargin * -1;
-                    right: 0;
-                    bottom: $hitMargin * -1;
-                    left: 0;
-                }
-
-                &:after {
-                    // Grippy
-                    min-width: nth($splitterGrippyD, 3);
-                    width: nth($splitterGrippyD, 2);
-                    height: nth($splitterGrippyD, 1);
-                    left: 50%; top: ($splitterHandleD - nth($splitterGrippyD, 1)) / 2;
-                    transform: translateX(-50%);
-                }
-
-                &--before {
-                    // Handle at top edge of containing pane
-                    top: 0;
-                }
-
-                &--after {
-                    // Handle at bottom edge of containing pane
-                    bottom: 0;
-                }
-            }
-
-            [class*="collapse-button"] {
-                height: nth($splitterCollapseBtnD, 1);
-                width: nth($splitterCollapseBtnD, 2);
-            }
-
-            &.l-pane--collapsed {
-                padding-top: 0 !important;
-                padding-bottom: 0 !important;
-                height: 0px;
-                min-height: 0px;
-            }
-        }
-
-        /************************ HANDLES */
-        &__handle {
-            // Selectors for handle in any context
-/*            z-index: 1;
-            display: block;
-            position: absolute;*/
-
-
-            body.desktop & {
-                background: $colorSplitterBg;
-                transition: $transOut;
-                &:before {
-                    // Extended hit area
-                    content: '';
-                    display: block;
-                    position: absolute;
-                    z-index: -1;
-                }
-
-                &:after {
-                    // Grippy affordance
-                    content: '';
-                    background: $colorSplitterGrippy;
-                    border-radius: 5px;
-                    display: block;
-                    position: absolute;
-                    z-index: 1;
-                }
-
-                &:active, &:hover {
-                    transition: $transIn;
-                }
-
-                &:active {
-                    background: $colorSplitterActive; // Not really working with drag
-                }
-
-                &:hover {
-                    background: $colorSplitterHover;
-                }
-            }
-        }
-
-        /************************ COLLAPSE BUTTONS */
-        &__collapse-button {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            z-index: 3;
-
-            body.desktop & {
-                transition: $transOut;
-
-                &:active, &:hover {
-                    transition: $transIn;
-                }
-
-                &:hover {
-                    background: $colorSplitterHover;
-                }
-
-                &:active {
-                    background: $colorSplitterActive;
-                }
-            }
-
-            &:before {
-                // Glyph holder
-                display: block;
-                font-family: symbolsfont;
-            }
-        }
-    }
 </style>
 
-
 <script>
 export default {
     props: {
@@ -484,12 +260,16 @@ export default {
         }*/
     },
     methods: {
-        toggleCollapse: function () {
+        toggleCollapse: function (restoreSize) {
             this.collapsed = !this.collapsed;
+            // console.log("rs " + restoreSize);
+            if (!restoreSize) { restoreSize = this.$el.style[this.styleProp]; }
             if (this.collapsed) {
+                // Pane is expanded and is being collapsed
                 this.currentSize = this.$el.style[this.styleProp];
                 this.$el.style[this.styleProp] = '';
             } else {
+                // Pane is collapsed and is being expanded
                 this.$el.style[this.styleProp] = this.currentSize;
                 delete this.currentSize;
             }
@@ -518,6 +298,18 @@ export default {
         updatePosition: function (event) {
             let size = this.getNewSize(event);
             this.$el.style[this.styleProp] = size;
+            /*
+            let intSize = parseInt(size.substr(0, size.length - 2));
+            // console.log(this.initial);
+            if (intSize < 50) {
+                // this.currentSize = this.initial;
+                console.log("initial: " + this.initial);
+                // this.toggleCollapse("initial: " + this.initial);
+                document.body.removeEventListener('mousemove', this.updatePosition);
+                document.body.removeEventListener('mouseup', this.end);
+            } else {
+                this.$el.style[this.styleProp] = size;
+            }*/
         },
         start: function (event) {
             this.startPosition = this.getPosition(event);

src/ui/components/layout/Layout.vue

@@ -19,7 +19,7 @@
             <pane class="l-shell__pane-main">
                 <div class="l-shell__main-container" ref="mainContainer"></div>
             </pane>
-            <pane class="l-shell__pane-inspector"
+            <pane class="l-shell__pane-inspector l-pane--holds-multipane"
                   handle="before"
                   collapsable>
                 <MctInspector ref="inspector"></MctInspector>
@@ -97,6 +97,7 @@
 
         &__pane-inspector {
             display: flex;
+            padding: $m;
 
             body.mobile & {
                 display: none;
@@ -169,12 +170,16 @@
             &__pane-tree,
             &__pane-inspector {
                 max-width: 30%;
-                min-width: 5%;
+                min-width: 0;
             }
 
             &__pane-tree {
                 width: 300px;
             }
+
+            &__pane-inspector {
+                width: 200px;
+            }
         }
     }
 </style>