Merge remote-tracking branch 'origin' into recent-objects-style

# Conflicts:
#	src/ui/layout/pane.scss

src/styles/_constants-mobile.scss

@@ -33,7 +33,7 @@ $tabletItemH: floor(math.div($gridItemMobile, 3));
 $shellTimeConductorMobileH: 90px;
 
 /************************** MOBILE TREE MENU DIMENSIONS */
-$mobileTreeItemH: 35px;
+$mobileTreeItemH: 30px;
 $mobileTreeItemIndent: 15px;
 $mobileTreeRightArrowW: 30px;
 

src/ui/layout/AppLayout.vue

@@ -97,7 +97,7 @@
           ></button>
         </template>
         <multipane type="vertical">
-          <pane>
+          <pane class="l-pane__browse-tree">
             <mct-tree
               ref="mctTree"
               :sync-tree-navigation="triggerSync"
@@ -107,6 +107,7 @@
           </pane>
           <pane
             handle="before"
+            class="l-pane__recently-viewed"
             label="Recently Viewed"
             :persist-position="true"
             collapse-type="horizontal"

src/ui/layout/RecentObjectsListItem.vue

@@ -26,30 +26,33 @@
     :class="isAlias"
     :aria-label="`${domainObject.name}`"
   >
-    <div
-      class="c-recentobjects-listitem__type-icon recent-object-icon"
-      :class="resultTypeIcon"
-    ></div>
-    <div class="c-recentobjects-listitem__body">
-      <span
-        ref="recentObjectName"
-        class="c-recentobjects-listitem__title"
-        :name="domainObject.name"
-        draggable="true"
-        @dragstart="dragStart"
-        @click.prevent="clickedRecent"
-        @mouseover.ctrl="showToolTip"
-        @mouseleave="hideToolTip"
-      >
-        {{ domainObject.name }}
-      </span>
-
-      <ObjectPath
-        class="c-recentobjects-listitem__object-path"
-        :read-only="false"
-        :domain-object="domainObject"
-        :object-path="objectPath"
-      />
+    <div class="c-recentobjects-listitem__outerwrapper">
+      <div class="c-recentobjects-listitem__wrapper">
+        <div
+          class="c-recentobjects-listitem__type-icon recent-object-icon"
+          :class="resultTypeIcon"
+        ></div>
+        <span
+          ref="recentObjectName"
+          class="c-recentobjects-listitem__title"
+          :name="domainObject.name"
+          draggable="true"
+          @dragstart="dragStart"
+          @click.prevent="clickedRecent"
+          @mouseover.ctrl="showToolTip"
+          @mouseleave="hideToolTip"
+        >
+          {{ domainObject.name }}
+        </span>
+      </div>
+      <div class="c-recentobjects-listitem__object-path">
+        <ObjectPath
+          class="c-recentobjects-listitem__object-path"
+          :read-only="false"
+          :domain-object="domainObject"
+          :object-path="objectPath"
+        />
+      </div>
     </div>
     <div class="c-recentobjects-listitem__target-button">
       <button

src/ui/layout/layout.scss

@@ -133,10 +133,9 @@
     &__pane-tree {
       background: linear-gradient(90deg, transparent 70%, rgba(black, 0.2) 99%, rgba(black, 0.3));
 
-      .l-pane__header {
-        // Hide all buttons except the collapse button
-        > :not(.l-pane__collapse-button) {
-          display: none;
+      .l-pane__header { 
+        > :not(.l-pane__collapse-button) { // On default, show all the header icons. 
+          display: block;
         }
       }
 
@@ -148,6 +147,11 @@
         [class*='collapse-button'] {
           right: -8px;
         }
+        .l-pane__header{ // If pane is collapsed, hide all the icons except the collapse button, which gets replaced into the hamburger menu.
+          > :not(.l-pane__collapse-button) { 
+            display: none;
+          }
+        }
       }
     }
   }

src/ui/layout/pane.scss

@@ -2,89 +2,101 @@
 
 /**************************** BASE - MOBILE AND DESKTOP */
 .l-multipane {
-  display: flex;
-  flex: 1 1 auto;
-  overflow: hidden;
+    display: flex;
+    flex: 1 1 auto;
+    overflow: hidden;
 
-  &--horizontal,
-  > .l-pane {
-    flex-flow: row nowrap;
-  }
+    &--horizontal,
+    > .l-pane {
+        flex-flow: row nowrap;
+    }
 
-  &--vertical,
-  > .l-pane {
-    flex-flow: column nowrap;
-  }
+    &--vertical,
+    > .l-pane {
+        flex-flow: column nowrap;
+    }
 
-  &--vertical {
-    height: 100%;
-  }
+    &--vertical {
+        height: 100%;
+
+        body.mobile & {
+            gap: $interiorMargin;
+        }
+
+        > .l-pane .l-pane__contents {
+            padding-right: $interiorMarginSm; // Fend off scrollbar
+        }
+    }
 }
 
 .l-pane {
-  backface-visibility: hidden;
-  display: flex;
-  min-width: 0px;
-  min-height: 0px;
-  opacity: 1;
-  pointer-events: inherit;
-
-  &__handle,
-  &__label {
-    // __handle and __label don't appear in mobile
-    display: none;
-  }
-
-  &__header {
+    backface-visibility: hidden;
     display: flex;
-    align-items: center;
-    @include desktop() {
-      margin-bottom: $interiorMargin;
+    min-width: 0px;
+    min-height: 0px;
+    opacity: 1;
+    pointer-events: inherit;
+
+    &__handle,
+    &__label {
+        // __handle and __label don't appear in mobile
+        display: none;
     }
-  }
 
-  &--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;
-  }
-
-  &--collapsed {
-    flex-basis: 0px !important;
-    transition: all 350ms ease;
-
-    .l-pane__contents {
-      transition: opacity 150ms ease;
-      opacity: 0;
-      pointer-events: none;
-      overflow: hidden; // Prevents toolbar from extending into Inspector
-
-      > * {
-        min-width: 0 !important;
-        min-height: 0 !important;
-      }
+    &__header {
+        display: flex;
+        align-items: center;
+        @include desktop() {
+            margin-bottom: $interiorMargin;
+        }
     }
-  }
 
-  &[class*='--horizontal'] {
-    padding-left: $interiorMargin;
-    padding-right: $interiorMargin;
-    &.l-pane--collapsed {
-      padding-left: 0 !important;
-      padding-right: 0 !important;
+    &--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*='--vertical'] {
-    padding-top: $interiorMargin;
-    padding-bottom: $interiorMargin;
-    min-height: 30px; // For Recents holder
+    &--collapsed {
+        flex-basis: 0px !important;
+        transition: all 350ms ease;
 
-    &.l-pane--collapsed {
-      padding-top: 0 !important;
-      padding-bottom: 0 !important;
+        .l-pane__contents {
+            transition: opacity 150ms ease;
+            opacity: 0;
+            pointer-events: none;
+            overflow: hidden; // Prevents toolbar from extending into Inspector
+
+            > * {
+                min-width: 0 !important;
+                min-height: 0 !important;
+            }
+        }
+    }
+
+    &[class*='--horizontal'] {
+        padding-left: $interiorMargin;
+        padding-right: $interiorMargin;
+
+        &.l-pane--collapsed {
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+        }
+    }
+
+    &[class*='--vertical'] {
+        padding-top: $interiorMargin;
+        padding-bottom: $interiorMargin;
+        min-height: 30px; // For Recents holder
+        body.mobile & {
+            border-top: 2px solid $colorInteriorBorder; // Adds non-resizable splitter
+        }
+
+        &.l-pane--collapsed {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+        }
     }
-  }
 
   /************************ CONTENTS */
   &__contents {
@@ -95,269 +107,303 @@
     pointer-events: inherit;
     transition: opacity 250ms ease 250ms;
 
-    .l-pane__contents {
-      // Don't pad all nested __contents
-      padding: 0;
-    }
-  }
-
-  /************************************************ DESKTOP STYLES */
-  body.desktop & {
-    &__handle {
-      background-color: $colorSplitterBg;
-      display: block;
-      position: absolute;
-      @include transition(background-color, $transOutTime);
-
-      &:before {
-        // Extended hit area
-        content: '';
-        display: block;
-        position: absolute;
-        z-index: -1;
-      }
-
-      &:hover {
-        background-color: $colorSplitterHover;
-        @include transition(background-color);
-      }
+        .l-pane__contents {
+            // Don't pad all nested __contents
+            padding: 0;
+        }
     }
 
-    &__header {
-      font-size: 11px;
-    }
-
-    &__label {
-      // Name of the pane
-      @include ellipsize();
-      @include userSelectNone();
-      color: $splitterBtnLabelColorFg;
-      display: block;
-      text-transform: uppercase;
-      flex: 1 1 auto;
-    }
-
-    [class*='expand-button'] {
-      display: none; // Hidden by default
-      background-color: $splitterCollapsedBtnColorBg;
-      color: $splitterCollapsedBtnColorFg;
-
-      &:before {
-        // '+' icon
-        font-size: 0.8em;
-        margin-bottom: $interiorMarginSm; // margin-bottom is needed for Tree and Inspector
-        margin-right: $interiorMarginSm; // margin-right and margin-left are needed for Recent Objects
-        margin-left: $interiorMarginSm;
-      }
-
-      &:hover {
-        background-color: $splitterCollapsedBtnColorBgHov;
-        color: $splitterCollapsedBtnColorFgHov;
-        @include transition(background-color);
-      }
-    }
-
-    &--resizing {
-      // User is dragging the handle and resizing a pane
-      @include userSelectNone();
-
-      + .l-pane {
-        @include userSelectNone();
-      }
-
-      .l-pane {
+    /************************************************ DESKTOP STYLES */
+    body.desktop & {
         &__handle {
-          background-color: $colorSplitterHover;
-        }
-      }
-    }
+            background-color: $colorSplitterBg;
+            display: block;
+            position: absolute;
+            @include transition(background-color, $transOutTime);
 
-    &[class*='--collapsed'] {
-      /********************************* STYLES FOR DESKTOP COLLAPSED PANES, ALL ORIENTATIONS */
-      $d: nth($splitterBtnD, 1);
-      flex-basis: $d;
-      min-width: $d;
-      min-height: $d;
+            &:before {
+                // Extended hit area
+                content: '';
+                display: block;
+                position: absolute;
+                z-index: -1;
+            }
 
-      > .l-pane__handle {
-        display: none;
-      }
-
-      [class*='collapse-button'] {
-        display: none;
-      }
-
-      [class*='expand-button'] {
-        display: block;
-      }
-    }
-
-    &[class*='--collapsed'] { // For Recent Objects Button
-      &.collapse-horizontal {
-        [class*='expand-button'] {
-          display: block;
-          position: absolute;
-          top: 0;
-          width: 100%;
-          border-top-right-radius: $controlCr;
-          border-top-left-radius: $controlCr;
-        }
-      }
-      [class*='expand-button'] {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        height: auto;
-        width: 100%;
-        padding: $interiorMarginSm 1px;
-        font-size: 11px;
-
-        [class*='label'] {
-          text-orientation: mixed;
-          text-transform: uppercase;
-          writing-mode: horizontal-tb;
-        }
-      }
-    }
-
-    &[class*='--horizontal'] {
-      > .l-pane__handle {
-        cursor: col-resize;
-        top: 0;
-        bottom: 0;
-        width: $splitterHandleD;
-
-        &:before {
-          // Extended hit area
-          top: 0;
-          right: $splitterHandleHitMargin * -1;
-          bottom: 0;
-          left: $splitterHandleHitMargin * -1;
-        }
-      }
-
-      .l-pane__collapse-button {
-        &:before {
-          content: $glyph-icon-line-horz;
-        }
-      }
-
-      &[class*='--collapsed'] {
-        /************************ COLLAPSED HORIZONTAL SPLITTER, EITHER DIRECTION */
-        [class*='__header'] {
-          display: none;
+            &:hover {
+                background-color: $colorSplitterHover;
+                @include transition(background-color);
+            }
         }
 
-        [class*='expand-button'] {
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          height: auto;
-          width: 100%;
-          padding: $interiorMargin 1px;
-          font-size: 11px;
+        &__header {
+            font-size: 11px;
+        }
 
-          [class*='label'] {
-            text-orientation: mixed;
+        &__label {
+            // Name of the pane
+            @include ellipsize();
+            @include userSelectNone();
+            color: $splitterBtnLabelColorFg;
+            display: block;
             text-transform: uppercase;
-            writing-mode: vertical-lr;
-          }
-        }
-      }
-
-      /************************** Horizontal Splitter Before */
-      // Example: Inspector pane
-      &[class*='-before'] {
-        margin-left: nth($shellPanePad, 2);
-        padding-left: nth($shellPanePad, 2);
-
-        > .l-pane__handle {
-          left: 0;
-          transform: translateX(floor(math.div($splitterHandleD, -2))); // Center over the pane edge
+            flex: 1 1 auto;
         }
 
         [class*='expand-button'] {
-          border-top-left-radius: $controlCr;
-          border-bottom-left-radius: $controlCr;
-        }
-      }
+            display: none; // Hidden by default
+            background-color: $splitterCollapsedBtnColorBg;
+            color: $splitterCollapsedBtnColorFg;
 
-      /************************** Horizontal Splitter After */
-      // Example: Tree pane and Recent Objects
-      &[class*='-after'] {
-        margin-right: nth($shellPanePad, 2);
-        padding-right: nth($shellPanePad, 2);
+            &:before {
+                // '+' icon
+                font-size: 0.8em;
+                margin-bottom: $interiorMarginSm; // margin-bottom is needed for Tree and Inspector
+                margin-right: $interiorMarginSm; // margin-right and margin-left are needed for Recent Objects
+            }
 
-        > .l-pane__handle {
-          right: 0;
-          transform: translateX(floor(math.div($splitterHandleD, 2)));
+            &:hover {
+                background-color: $splitterCollapsedBtnColorBgHov;
+                color: $splitterCollapsedBtnColorFgHov;
+                @include transition(background-color);
+            }
         }
 
-        [class*='expand-button'] {
-          border-top-right-radius: $controlCr;
-          border-bottom-right-radius: $controlCr;
+        &--resizing {
+            // User is dragging the handle and resizing a pane
+            @include userSelectNone();
+
+            + .l-pane {
+                @include userSelectNone();
+            }
+
+            .l-pane {
+                &__handle {
+                    background-color: $colorSplitterHover;
+                }
+            }
+        }
+
+        &[class*='--collapsed'] {
+            /********************************* STYLES FOR DESKTOP COLLAPSED PANES, ALL ORIENTATIONS */
+            $d: nth($splitterBtnD, 1);
+            flex-basis: $d;
+            min-width: $d;
+            min-height: $d;
+
+            > .l-pane__handle {
+                display: none;
+            }
+
+            [class*='collapse-button'] {
+                display: none;
+            }
+
+            [class*='expand-button'] {
+                display: block;
+            }
+        }
+
+        &[class*='--collapsed'] { // For Recent Objects Button
+            &.collapse-horizontal {
+                [class*='expand-button'] {
+                    display: flex;
+                    align-items: center;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                    border-top-right-radius: $controlCr;
+                    border-top-left-radius: $controlCr;
+                    border-bottom-right-radius: $controlCr;
+                    border-bottom-left-radius: $controlCr;
+                    padding: $interiorMarginSm $interiorMargin;
+
+                    &:before {
+                        font-size: 0.7em;
+                        margin-bottom: 0px;
+                    }
+                }
+            }
+
+            [class*='expand-button'] {
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                height: auto;
+                width: 100%;
+                padding: $interiorMarginSm 1px;
+                font-size: 11px;
+
+                [class*='label'] {
+                    text-orientation: mixed;
+                    text-transform: uppercase;
+                    writing-mode: horizontal-tb;
+                }
+            }
+        }
+
+        &[class*='--horizontal'] {
+            > .l-pane__handle {
+                cursor: col-resize;
+                top: 0;
+                bottom: 0;
+                width: $splitterHandleD;
+
+                &:before {
+                    // Extended hit area
+                    top: 0;
+                    right: $splitterHandleHitMargin * -1;
+                    bottom: 0;
+                    left: $splitterHandleHitMargin * -1;
+                }
+            }
+
+            .l-pane__collapse-button {
+                &:before {
+                    content: $glyph-icon-line-horz;
+                }
+            }
+
+            &[class*='--collapsed'] {
+                /************************ COLLAPSED HORIZONTAL SPLITTER, EITHER DIRECTION */
+                [class*='__header'] {
+                    display: none;
+                }
+
+                [class*='expand-button'] {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    left: 0;
+                    height: auto;
+                    width: 100%;
+                    padding: $interiorMargin 1px;
+                    font-size: 11px;
+
+                    [class*='label'] {
+                        text-orientation: mixed;
+                        text-transform: uppercase;
+                        writing-mode: vertical-lr;
+                    }
+                }
+            }
+
+            /************************** Horizontal Splitter Before */
+            // Example: Inspector pane
+            &[class*='-before'] {
+                margin-left: nth($shellPanePad, 2);
+                padding-left: nth($shellPanePad, 2);
+
+                > .l-pane__handle {
+                    left: 0;
+                    transform: translateX(floor(math.div($splitterHandleD, -2))); // Center over the pane edge
+                }
+
+                [class*='expand-button'] {
+                    border-top-left-radius: $controlCr;
+                    border-bottom-left-radius: $controlCr;
+                }
+            }
+
+            /************************** Horizontal Splitter After */
+            // Example: Tree pane and Recent Objects
+            &[class*='-after'] {
+                margin-right: nth($shellPanePad, 2);
+                padding-right: nth($shellPanePad, 2);
+
+                > .l-pane__handle {
+                    right: 0;
+                    transform: translateX(floor(math.div($splitterHandleD, 2)));
+                }
+
+                [class*='expand-button'] {
+                    border-top-right-radius: $controlCr;
+                    border-bottom-right-radius: $controlCr;
+                }
+            }
+        }
+
+        &[class*='--vertical'] {
+            // l-pane--vertical
+
+            > .l-pane__handle {
+                cursor: row-resize;
+                left: 0;
+                right: 0;
+                height: $splitterHandleD;
+
+                &:before {
+                    // Extended hit area
+                    left: 0;
+                    top: $splitterHandleHitMargin * -1;
+                    right: 0;
+                    bottom: $splitterHandleHitMargin * -1;
+                }
+            }
+
+            /************************** Vertical Splitter Before */
+            // Pane collapses downward. Used by Recent Objects in Tree
+            &[class*='-before'] {
+                $m: $interiorMarginLg;
+                margin-top: $m;
+                padding-top: $m;
+                padding-bottom: 0;
+
+                > .l-pane__handle {
+                    top: 0;
+                    transform: translateY(floor(math.div($splitterHandleD, -1)));
+                }
+
+                .l-pane__collapse-button:before {
+                    content: $glyph-icon-line-horz;
+                }
+
+                &.l-pane--collapsed {
+                    > .l-pane__collapse-button {
+                        transform: scaleY(-1);
+                    }
+                }
+            }
+
+            /************************** Vertical Splitter After */
+            // Pane collapses upward. Not sure we'll ever use this...
+            &[class*='-after'] {
+                > .l-pane__handle {
+                    bottom: 0;
+                    transform: translateY(floor(math.div($splitterHandleD, 1)));
+                }
+
+                &:not(.l-pane--collapsed) > .l-pane__collapse-button {
+                    &:after {
+                        transform: scaleY(-1);
+                    }
+                }
+            }
         }
-      }
     }
 
-    &[class*='--vertical'] {
-      // l-pane--vertical
+    // Ends .body.desktop
+}
 
-      > .l-pane__handle {
-        cursor: row-resize;
-        left: 0;
-        right: 0;
-        height: $splitterHandleD;
+// Ends .l-pane
 
-        &:before {
-          // Extended hit area
-          left: 0;
-          top: $splitterHandleHitMargin * -1;
-          right: 0;
-          bottom: $splitterHandleHitMargin * -1;
-        }
-      }
-
-      /************************** Vertical Splitter Before */
-      // Pane collapses downward. Used by Recent Objects in Tree
-      &[class*='-before'] {
-        $m: $interiorMarginLg;
-        margin-top: $m;
-        padding-top: $m;
-        > .l-pane__handle {
-          top: 0;
-          transform: translateY(floor(math.div($splitterHandleD, -1)));
+body.mobile {
+    .l-pane__header {
+        > * {
+            @include ellipsize();
+            @include userSelectNone();
+            text-transform: uppercase;
         }
 
-        .l-pane__collapse-button:before {
-          content: $glyph-icon-line-horz;
+        .l-pane__label {
+            margin-right: auto;
         }
-
-        &.l-pane--collapsed {
-          > .l-pane__collapse-button {
-            transform: scaleY(-1);
-          }
-        }
-      }
-
-      /************************** Vertical Splitter After */
-      // Pane collapses upward. Not sure we'll ever use this...
-      &[class*='-after'] {
-        > .l-pane__handle {
-          bottom: 0;
-          transform: translateY(floor(math.div($splitterHandleD, 1)));
-        }
-
-        &:not(.l-pane--collapsed) > .l-pane__collapse-button {
-          &:after {
-            transform: scaleY(-1);
-          }
-        }
-      }
     }
-  } // Ends .body.desktop
-} // Ends .l-pane
+
+    .l-pane__recently-viewed {
+        height: 50% !important;
+        max-height: 200px;
+    }
+}

src/ui/layout/recent-objects.scss

@@ -24,7 +24,7 @@
   display: flex;
   padding: $interiorMargin $interiorMarginSm;
   align-items: flex-start;
-
+  
   > * + * {
     margin-left: $interiorMarginSm;
   }
@@ -43,12 +43,23 @@
     }
   }
 
+  &__outerwrapper{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  &__wrapper{
+    display: flex;
+  }
+
   &__object-path {
-    padding: 0 $interiorMarginSm;
+    padding: 0 $interiorMarginLg;
   }
 
   &__target-button {
     opacity: 0;
+    margin-left: auto;
   }
 
   &__type-icon,
@@ -59,6 +70,11 @@
   &__type-icon {
     color: $colorItemTreeIcon;
     font-size: 1.25em;
+    height: 100%; // When pane is small, this avoids the alias icons from wrapping down
+    min-width: $treeTypeIconW;
+    body.mobile &{
+      height: auto;
+    }
 
     // TEMP: uses object-label component, hide label part
     .c-object-label__name {
@@ -102,7 +118,8 @@
     border-radius: $basicCr;
     color: $colorItemTreeFg;
     cursor: pointer;
-    padding: $interiorMarginSm;
+    padding: 2px $interiorMarginSm;
+    margin-left: $interiorMarginSm;
 
     &:hover {
       background-color: $colorItemTreeHoverBg;
@@ -117,3 +134,22 @@
 .c-recentobjects-listitem:hover .c-recentobjects-listitem__target-button {
   opacity: 100;
 }
+
+body.mobile {
+  .c-recentobjects-listitem__target-button{
+    display: none;
+  }
+  .c-recentobjects-listitem__wrapper{
+    height: $mobileTreeItemH;
+    align-items: center;
+    margin-bottom: $interiorMarginSm;
+    background: rgba(172, 172, 172, 0.1);
+    border-radius: $interiorMarginSm;
+  }
+  .c-recentobjects-listitem{
+    border-top: none;
+  }
+  .c-recentobjects-listitem__type-icon{
+    margin-left: $interiorMargin;
+  }
+}