Merge latest master, resolve conflicts

- Conflicts in layout.scss;
Main layout refinements WIP
2020-04-17 12:38:07 -07:00 · 2020-04-03 19:13:05 -07:00 · 2020-04-03 16:34:16 -07:00 · 2020-04-03 15:44:12 -07:00
12 changed files with 160 additions and 130 deletions
--- a/src/plugins/timeConductor/Conductor.vue
+++ b/src/plugins/timeConductor/Conductor.vue
@@ -37,6 +37,12 @@
            ></button>
            <ConductorModeIcon class="c-conductor__mode-icon" />

+            <div class="c-conductor__controls">
+                <!-- Mode, time system menu buttons and duration slider -->
+                <ConductorMode class="c-conductor__mode-select" />
+                <ConductorTimeSystem class="c-conductor__time-system-select" />
+            </div>
+
            <div
                v-if="isFixed"
                class="c-ctrl-wrapper c-conductor-input c-conductor__start-fixed"
@@ -126,11 +132,6 @@
                @panAxis="setViewFromBounds"
            />
        </div>
-        <div class="c-conductor__controls">
-            <!-- Mode, time system menu buttons and duration slider -->
-            <ConductorMode class="c-conductor__mode-select" />
-            <ConductorTimeSystem class="c-conductor__time-system-select" />
-        </div>
        <input
            type="submit"
            class="invisible"
--- a/src/plugins/timeConductor/conductor.scss
+++ b/src/plugins/timeConductor/conductor.scss
@@ -16,8 +16,8 @@

        // Default: fixed mode, desktop
        grid-template-rows: 1fr;
-        grid-template-columns: 20px auto 1fr auto;
-        grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-end";
+        grid-template-columns: 20px auto auto 1fr auto;
+        grid-template-areas: "tc-mode-icon tc-controls tc-start tc-ticks tc-end";
    }

    &__mode-icon {
@@ -59,8 +59,8 @@

    &.is-realtime-mode {
        .c-conductor__time-bounds {
-            grid-template-columns: 20px auto 1fr auto auto;
-            grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-updated tc-end";
+            grid-template-columns: 20px auto auto 1fr auto auto;
+            grid-template-areas: "tc-mode-icon tc-controls tc-start tc-ticks tc-updated tc-end";
        }

        .c-conductor__end-fixed {
@@ -75,10 +75,6 @@
            grid-template-columns: 20px auto auto;
        }

-        .c-conductor__controls {
-            padding-left: 25px; // Line up visually with other controls
-        }
-
        &__mode-icon {
            grid-row: 1;
        }
@@ -105,6 +101,7 @@
                grid-template-areas:
                    "tc-mode-icon tc-start tc-start"
                    "tc-mode-icon tc-end tc-end"
+                    "tc-mode-icon tc-controls tc-controls";
                }
            }

@@ -112,7 +109,8 @@
            .c-conductor__time-bounds {
                grid-template-areas:
                    "tc-mode-icon tc-start tc-updated"
-                    "tc-mode-icon tc-end tc-end";
+                    "tc-mode-icon tc-end tc-end"
+                    "tc-mode-icon tc-controls tc-controls";
            }

            .c-conductor__end-fixed {
--- a/src/styles/_constants-espresso.scss
+++ b/src/styles/_constants-espresso.scss
@@ -77,7 +77,8 @@ $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brigh
 $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
 $colorKeySelectedBg: $colorKey;
 $uiColor: #0093ff; // Resize bars, splitter bars, etc.
-$colorInteriorBorder: rgba($colorBodyFg, 0.2);
+$colorInteriorBorder: rgba($colorBodyFg, 0.3);
+$colorInteriorEdge: rgba(black, 0.2);
 $colorA: #ccc;
 $colorAHov: #fff;
 $filterHov: brightness(1.3); // Tree, location items
@@ -86,7 +87,7 @@ $colorSelectedFg: pullForward($colorBodyFg, 20%);

 // Layout
 $shellMainPad: 4px 0;
-$shellPanePad: $interiorMargin, 7px;
+$shellPanePad: $interiorMargin, 10px;
 $drawerBg: lighten($colorBodyBg, 5%);
 $drawerFg: lighten($colorBodyFg, 5%);
 $sideBarBg: $drawerBg;
@@ -269,7 +270,7 @@ $formInputH: 22px;
 $formRowCtrlsH: 14px;

 // Inspector
-$colorInspectorBg: pullForward($colorBodyBg, 5%);
+$colorInspectorBg: pushBack($colorBodyBg, 3%);
 $colorInspectorFg: $colorBodyFg;
 $colorInspectorPropName: pushBack($colorBodyFg, 20%);
 $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
@@ -382,7 +383,7 @@ $splitterHandleD: 2px;
 $splitterD: $splitterHandleD;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: pullForward($colorBodyBg, 10%);
+$colorSplitterBg: rgba($colorBodyFg, 0.2);
 $colorSplitterFg: $colorBodyBg;
 $colorSplitterHover: $uiColor;
 $colorSplitterActive: $colorKey;
--- a/src/styles/_constants-maelstrom.scss
+++ b/src/styles/_constants-maelstrom.scss
@@ -82,6 +82,7 @@ $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) br
 $colorKeySelectedBg: $colorKey;
 $uiColor: #00b2ff; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
+$colorInteriorEdge: rgba(black, 0.2);
 $colorA: #ccc;
 $colorAHov: #fff;
 $filterHov: brightness(1.3); // Tree, location items
@@ -386,7 +387,7 @@ $splitterHandleD: 2px;
 $splitterD: $splitterHandleD;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: pullForward($colorBodyBg, 10%);
+$colorSplitterBg: rgba($colorBodyFg, 0.2);
 $colorSplitterFg: $colorBodyBg;
 $colorSplitterHover: $uiColor;
 $colorSplitterActive: $colorKey;
--- a/src/styles/_constants-snow.scss
+++ b/src/styles/_constants-snow.scss
@@ -78,6 +78,7 @@ $colorKeyFilterHov: invert(69%) sepia(87%) saturate(3243%) hue-rotate(151deg) br
 $colorKeySelectedBg: $colorKey;
 $uiColor: #289fec; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
+$colorInteriorEdge: rgba($colorBodyFg, 0.1);
 $colorA: #999;
 $colorAHov: $colorKey;
 $filterHov: brightness(1.3); // Tree, location items
@@ -382,7 +383,7 @@ $splitterHandleD: 2px;
 $splitterD: $splitterHandleD;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
+$colorSplitterBg: rgba($colorBodyFg, 0.2);
 $colorSplitterFg: $colorBodyBg;
 $colorSplitterHover: $colorKey;
 $colorSplitterActive: $colorKey;
--- a/src/styles/notebook.scss
+++ b/src/styles/notebook.scss
@@ -444,7 +444,7 @@
        font-size: 1.25em;
        font-style: italic;
        opacity: 0.7;
-        padding: $interiorMarginLg;
+        padding-bottom: $interiorMarginLg;
        text-align: center;
    }
 }
--- a/src/ui/inspector/inspector.scss
+++ b/src/ui/inspector/inspector.scss
@@ -84,7 +84,7 @@
    }

    .l-multipane {
-        .l-pane {
+        .c-pane {
            min-height: 50px;
        }
    }
--- a/src/ui/layout/BrowseBar.vue
+++ b/src/ui/layout/BrowseBar.vue
@@ -41,10 +41,12 @@
        <div class="l-browse-bar__actions">
            <button
                v-if="isViewEditable & !isEditing"
-                class="l-browse-bar__actions__edit c-button c-button--major icon-pencil"
+                class="l-browse-bar__actions__edit c-button c-button--major icon-pencil labeled"
                title="Edit"
                @click="edit()"
-            ></button>
+            >
+                <span class="c-button__label">Edit</span>
+            </button>

            <div
                v-if="isEditing"
--- a/src/ui/layout/Layout.vue
+++ b/src/ui/layout/Layout.vue
@@ -49,38 +49,50 @@
        >
            <mct-tree class="l-shell__tree" />
        </pane>
-        <pane class="l-shell__pane-main">
+        <pane class="l-shell__pane-main c-pane--holds-multipane">
            <browse-bar
                ref="browseBar"
                class="l-shell__main-view-browse-bar"
            />
-            <toolbar
-                v-if="toolbar"
-                class="l-shell__toolbar"
-            />
-            <object-view
-                ref="browseObject"
-                class="l-shell__main-container"
-                :show-edit-view="true"
-                data-selectable
-            />
-            <component
-                :is="conductorComponent"
-                class="l-shell__time-conductor"
-            />
-        </pane>
-        <pane
-            class="l-shell__pane-inspector l-pane--holds-multipane"
-            handle="before"
-            label="Inspect"
-            collapsable
-        >
-            <Inspector
-                ref="inspector"
-                :is-editing="isEditing"
-            />
+
+            <multipane class="l-shell__main-view-and-inspector"
+                       type="horizontal"
+            >
+                <pane class="l-shell__pane-main-view">
+                    <toolbar
+                            v-if="toolbar"
+                            class="l-shell__toolbar"
+                    />
+                    <object-view
+                            ref="browseObject"
+                            class="l-shell__main-container"
+                            :show-edit-view="true"
+                            data-selectable
+                    />
+                </pane>
+                <pane
+                        class="l-shell__pane-inspector c-pane--holds-multipane"
+                        handle="before"
+                        label="Inspect"
+                        collapsable
+                >
+                    <Inspector
+                            ref="inspector"
+                            :is-editing="isEditing"
+                    />
+                </pane>
+            </multipane>
+
+
+
+
        </pane>
    </multipane>
+
+    <component
+            :is="conductorComponent"
+            class="l-shell__time-conductor"
+    />
 </div>
 </template>

--- a/src/ui/layout/layout.scss
+++ b/src/ui/layout/layout.scss
@@ -67,7 +67,7 @@
    &__pane-tree,
    &__pane-inspector,
    &__pane-main {
-        .l-pane__contents {
+        .c-pane__contents {
            display: flex;
            flex-flow: column nowrap;
            overflow-x: hidden;
@@ -76,9 +76,9 @@

    &__pane-tree,
    &__pane-main {
-        .l-pane__contents {
+        .c-pane__contents {
            > * {
-                flex: 0 0 auto;
+                //flex: 0 0 auto;

                + * {
                    margin-top: $interiorMarginLg;
@@ -87,10 +87,6 @@
        }
    }

-    &__pane-main {
-        .l-pane__header { display: none; }
-    }
-
    body.mobile & {
        &__pane-main,
        &__pane-tree {
@@ -112,13 +108,13 @@
        &__pane-tree {
            width: calc(100% - #{$mobileMenuIconD + (2 * nth($shellPanePad, 2))});

-            + .l-pane {
+            + .c-pane {
                // Hide pane-main when this pane is expanded
                opacity: 0;
                pointer-events: none;
            }

-            &[class*="--collapsed"] + .l-pane {
+            &[class*="--collapsed"] + .c-pane {
                // Show pane-main when tree is collapsed
                opacity: 1;
                pointer-events: inherit;
@@ -141,10 +137,6 @@
    }

    /******************************* HEAD */
-    &__main-view-browse-bar {
-        flex: 0 0 auto;
-    }
-
    body.mobile & .l-shell__main-view-browse-bar {
        margin-left: $mobileMenuIconD; // Make room for the hamburger!
        .c-button[class*='__actions__edit'] {
@@ -219,6 +211,10 @@
    }

    /******************************* MAIN AREA */
+    &__main-view-browse-bar {
+        flex: 0 0 auto;
+    }
+
    &__main-container {
        // Wrapper for main views
        flex: 1 1 auto !important;
@@ -232,26 +228,34 @@
    }

    &__time-conductor {
-        border-top: 1px solid $colorInteriorBorder;
-        padding-top: $interiorMargin;
+        border-top: 1px solid $colorInteriorEdge;
+        padding: $interiorMargin;
    }

-    &__main {
-        > .l-pane {
-            padding: nth($shellPanePad, 1) 0;
-        }
-    }
+    //&__main {
+        //> .c-pane {
+        //    padding: nth($shellPanePad, 1) 0;
+        //}
+    //}

    body.desktop & {
        &__main {
            // Top and bottom padding in container that holds tree, __pane-main and Inspector
-            padding: nth($shellPanePad, 1) 0;
+            //padding: $interiorMargin 0;
            min-height: 0;

-            > .l-pane {
-                padding-top: 0;
-                padding-bottom: 0;
-            }
+            //> .c-pane {
+            //    padding-top: 0;
+            //    padding-bottom: 0;
+            //}
+        }
+
+        &__pane-main-view {
+            padding-bottom: $interiorMarginLg;
+        }
+
+        &__main-view-browse-bar {
+            padding: $interiorMarginLg $interiorMarginLg 0 0;
        }

        &__pane-tree,
@@ -261,12 +265,26 @@

        &__pane-tree {
            width: 300px;
-            padding-left: nth($shellPanePad, 2);
+            padding: $interiorMargin $interiorMarginLg;
+
+            > .c-pane__handle {
+                top: $interiorMargin;
+                bottom: $interiorMargin;
+            }
        }

        &__pane-inspector {
+            $br: $basicCr;
+            $m: $interiorMargin;
+            background: $colorInspectorBg;
+            border-top-left-radius: $br;
            width: 200px;
-            padding-right: nth($shellPanePad, 2);
+            padding: $m $m $m $m * 2 !important;
+
+            > .c-pane__handle {
+                background: none;
+                left: 2px;
+            }
        }
    }

@@ -281,10 +299,8 @@

 .is-editing {
    .l-shell__main-container {
-        $m: 3px;
        box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
-        margin-left: $m;
-        margin-right: $m;
+        margin: 3px;

        &[s-selected] {
            // Provide a clearer selection context articulation for the main edit area
--- a/src/ui/layout/pane.scss
+++ b/src/ui/layout/pane.scss
@@ -5,24 +5,24 @@
    overflow: hidden;

    &--horizontal,
-    > .l-pane {
+    > .c-pane {
        flex-flow: row nowrap;
    }

    &--vertical,
-    > .l-pane  {
+    > .c-pane  {
        flex-flow: column nowrap;
    }

    &--vertical {
        height: 100%;
-        > .l-pane .l-pane__contents {
+        > .c-pane .c-pane__contents {
            padding-right: $interiorMarginSm; // Fend off scrollbar
        }
    }
 }

-.l-pane {
+.c-pane {
    backface-visibility: hidden;
    display: flex;
    min-width: 0px;
@@ -52,7 +52,7 @@
        flex-basis: 0px !important;
        transition: all 350ms ease;

-        .l-pane__contents {
+        .c-pane__contents {
            transition: opacity 150ms ease;
            opacity: 0;
            pointer-events: none;
@@ -68,7 +68,7 @@
    &[class*="--horizontal"] {
        padding-left: $interiorMargin;
        padding-right: $interiorMargin;
-        &.l-pane--collapsed {
+        &.c-pane--collapsed {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
@@ -77,7 +77,7 @@
    &[class*="--vertical"] {
        padding-top: $interiorMargin;
        padding-bottom: $interiorMargin;
-        &.l-pane--collapsed {
+        &.c-pane--collapsed {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
@@ -90,7 +90,7 @@
        pointer-events: inherit;
        transition: opacity 250ms ease 250ms;

-        .l-pane__contents {
+        .c-pane__contents {
            // Don't pad all nested __contents
            padding: 0;
        }
@@ -138,11 +138,11 @@
            // User is dragging the handle and resizing a pane
            @include userSelectNone();

-            + .l-pane {
+            + .c-pane {
                @include userSelectNone();
            }

-            .l-pane {
+            .c-pane {
                &__handle {
                    background: $colorSplitterHover;
                }
@@ -156,17 +156,17 @@
            min-width: $d;
            min-height: $d;

-            > .l-pane__handle {
+            > .c-pane__handle {
                display: none;
            }

-            .l-pane__header {
+            .c-pane__header {
                &:hover {
                    color: $splitterCollapsedBtnColorFgHov;
-                    .l-pane__label {
+                    .c-pane__label {
                        color: inherit;
                    }
-                    .l-pane__collapse-button {
+                    .c-pane__collapse-button {
                        background: $splitterCollapsedBtnColorBgHov;
                        color: inherit;
                        transition: $transIn;
@@ -174,17 +174,17 @@
                }
            }

-            .l-pane__collapse-button {
+            .c-pane__collapse-button {
                background: $splitterCollapsedBtnColorBg;
                color: $splitterCollapsedBtnColorFg;
            }
        }

        &[class*="--horizontal"] {
-            > .l-pane__handle {
-                cursor: col-resize;
-                top: 0;
-                bottom: 0;
+            > .c-pane__handle {
+                cursor: ew-resize;
+                top: $interiorMargin;
+                bottom: $interiorMargin;
                width: $splitterHandleD;

                &:before {
@@ -196,7 +196,7 @@
                }
            }

-            .l-pane__collapse-button {
+            .c-pane__collapse-button {
                &:before {
                    content: $glyph-icon-arrow-right-equilateral;
                }
@@ -217,7 +217,7 @@
                    z-index: 1;
                }

-                .l-pane__collapse-button {
+                .c-pane__collapse-button {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0; // Only have to do this once, because of scaleX(-1) below.
                    position: absolute;
@@ -238,13 +238,13 @@
                margin-left: nth($shellPanePad, 2);
                padding-left: nth($shellPanePad, 2);

-                > .l-pane__handle {
-                    left: 0;
+                > .c-pane__handle {
+                    //left: 0;
                    transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
                }

                &[class*="--collapsed"] {
-                    .l-pane__collapse-button {
+                    .c-pane__collapse-button {
                        transform: scaleX(-1);
                    }
                }
@@ -256,13 +256,13 @@
                margin-right: nth($shellPanePad, 2);
                padding-right: nth($shellPanePad, 2);

-                > .l-pane__handle {
+                > .c-pane__handle {
                    right: 0;
                    transform: translateX(floor($splitterHandleD / 2));
                }

                &:not([class*="--collapsed"]) {
-                    .l-pane__collapse-button {
+                    .c-pane__collapse-button {
                        transform: scaleX(-1);
                    }
                }
@@ -270,9 +270,9 @@
        }

        &[class*="--vertical"] {
-            // l-pane--vertical
+            // c-pane--vertical

-            > .l-pane__handle {
+            > .c-pane__handle {
                cursor: row-resize;
                left: 0;
                right: 0;
@@ -293,17 +293,17 @@
                $m: $interiorMarginLg;
                margin-top: $m;
                padding-top: $m;
-                > .l-pane__handle {
+                > .c-pane__handle {
                    top: 0;
                    transform: translateY(floor($splitterHandleD / -1));
                }

-                .l-pane__collapse-button:before {
+                .c-pane__collapse-button:before {
                    content: $glyph-icon-arrow-down;
                }

-                &.l-pane--collapsed {
-                    > .l-pane__collapse-button {
+                &.c-pane--collapsed {
+                    > .c-pane__collapse-button {
                        transform: scaleY(-1);
                    }
                }
@@ -312,12 +312,12 @@
            /************************** Vertical Splitter After */
            // Pane collapses upward. Not sure we'll ever use this...
            &[class*="-after"] {
-                > .l-pane__handle {
+                > .c-pane__handle {
                    bottom: 0;
                    transform: translateY(floor($splitterHandleD / 1));
                }

-                &:not(.l-pane--collapsed) > .l-pane__collapse-button {
+                &:not(.c-pane--collapsed) > .c-pane__collapse-button {
                    &:after {
                        transform: scaleY(-1);
                    }
@@ -325,4 +325,4 @@
            }
        }
    } // Ends .body.desktop
-} // Ends .l-pane
+} // Ends .c-pane
--- a/src/ui/layout/pane.vue
+++ b/src/ui/layout/pane.vue
@@ -1,32 +1,30 @@
 <template>
 <div
-    class="l-pane"
+    class="c-pane"
    :class="{
-        'l-pane--horizontal-handle-before': type === 'horizontal' && handle === 'before',
-        'l-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after',
-        'l-pane--vertical-handle-before': type === 'vertical' && handle === 'before',
-        'l-pane--vertical-handle-after': type === 'vertical' && handle === 'after',
-        'l-pane--collapsed': collapsed,
-        'l-pane--reacts': !handle,
-        'l-pane--resizing': resizing === true
+        'c-pane--horizontal-handle-before': type === 'horizontal' && handle === 'before',
+        'c-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after',
+        'c-pane--vertical-handle-before': type === 'vertical' && handle === 'before',
+        'c-pane--vertical-handle-after': type === 'vertical' && handle === 'after',
+        'c-pane--collapsed': collapsed,
+        'c-pane--reacts': !handle,
+        'c-pane--resizing': resizing === true
    }"
 >
    <div
        v-if="handle"
-        class="l-pane__handle"
+        class="c-pane__handle"
        @mousedown="start"
    ></div>
-    <div class="l-pane__header">
-        <span v-if="label"
-              class="l-pane__label"
-        >{{ label }}</span>
+    <div v-if="label" class="c-pane__header">
+        <span class="c-pane__label">{{ label }}</span>
        <button
            v-if="collapsable"
-            class="l-pane__collapse-button c-button"
+            class="c-pane__collapse-button c-button"
            @click="toggleCollapse"
        ></button>
    </div>
-    <div class="l-pane__contents">
+    <div class="c-pane__contents">
        <slot></slot>
    </div>
 </div>
Author	SHA1	Message	Date
charlesh88	7d9787b462	Merge latest master, resolve conflicts - Conflicts in layout.scss;	2020-04-17 12:38:07 -07:00
charlesh88	d7acefd780	Main layout refinements WIP - Time Conductor reorg for better usage of vertical space; - Multiple fixes for mobile;	2020-04-03 19:13:05 -07:00
charlesh88	e665b6d279	Main layout refinements WIP - Splitter refinements; - Inspector refinements, handle positioning, padding; - Added label to main view Edit button;	2020-04-03 16:34:16 -07:00
charlesh88	71ee4b5543	Main layout refinements WIP - Significant progress envelope shell, spacing, Inspector; - Refactored l-pane to c-pane; - TODO: fix Inspector resize handle, padding in browse-bar, margin in collapsed tree, mobile;	2020-04-03 15:44:12 -07:00