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,11 +26,12 @@
     :class="isAlias"
     :aria-label="`${domainObject.name}`"
   >
+    <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>
-    <div class="c-recentobjects-listitem__body">
         <span
           ref="recentObjectName"
           class="c-recentobjects-listitem__title"
@@ -43,7 +44,8 @@
         >
           {{ domainObject.name }}
         </span>
-
+      </div>
+      <div class="c-recentobjects-listitem__object-path">
         <ObjectPath
           class="c-recentobjects-listitem__object-path"
           :read-only="false"
@@ -51,6 +53,7 @@
           :object-path="objectPath"
         />
       </div>
+    </div>
     <div class="c-recentobjects-listitem__target-button">
       <button
         class="c-icon-button icon-target"

src/ui/layout/layout.scss

@@ -134,9 +134,8 @@
       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) { // On default, show all the header icons. 
-        > :not(.l-pane__collapse-button) {
+          display: block;
-          display: none;
         }
       }
 
@@ -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

@@ -18,6 +18,14 @@
 
     &--vertical {
         height: 100%;
+
+        body.mobile & {
+            gap: $interiorMargin;
+        }
+
+        > .l-pane .l-pane__contents {
+            padding-right: $interiorMarginSm; // Fend off scrollbar
+        }
     }
 }
 
@@ -69,6 +77,7 @@
     &[class*='--horizontal'] {
         padding-left: $interiorMargin;
         padding-right: $interiorMargin;
+
         &.l-pane--collapsed {
             padding-left: 0 !important;
             padding-right: 0 !important;
@@ -79,6 +88,9 @@
         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;
@@ -147,7 +159,6 @@
                 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 {
@@ -195,14 +206,24 @@
         &[class*='--collapsed'] { // For Recent Objects Button
             &.collapse-horizontal {
                 [class*='expand-button'] {
-          display: block;
+                    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;
@@ -328,6 +349,8 @@
                 $m: $interiorMarginLg;
                 margin-top: $m;
                 padding-top: $m;
+                padding-bottom: 0;
+
                 > .l-pane__handle {
                     top: 0;
                     transform: translateY(floor(math.div($splitterHandleD, -1)));
@@ -359,5 +382,28 @@
                 }
             }
         }
-  } // Ends .body.desktop
+    }
-} // Ends .l-pane
+
+    // Ends .body.desktop
+}
+
+// Ends .l-pane
+
+body.mobile {
+    .l-pane__header {
+        > * {
+            @include ellipsize();
+            @include userSelectNone();
+            text-transform: uppercase;
+        }
+
+        .l-pane__label {
+            margin-right: auto;
+        }
+    }
+
+    .l-pane__recently-viewed {
+        height: 50% !important;
+        max-height: 200px;
+    }
+}

src/ui/layout/recent-objects.scss

@@ -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;
+  }
+}