Fix: Extending horizontal scroll on tree view (#109)

* Extending horizontal scroll to apply to entire tree view rather than only sub-tree structures. * Added bottom margin to account for overlapping footer in Console. Co-authored-by: Emily Dodds <dodemily@amazon.com>
awslabs · Sep 14, 2022 · 0762758 · 0762758
1 parent 420391c
commit 0762758
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 67 deletions.
diff --git a/packages/scene-composer/src/components/Tree/TreeItem.spec.tsx b/packages/scene-composer/src/components/Tree/TreeItem.spec.tsx
@@ -67,6 +67,7 @@ describe('<TreeItem />', () => {
               data-mocked="Checkbox"
             >
               <div
+                class="tm-tree-item-expand-btn"
                 data-mocked="Button"
                 iconname="treeview-collapse"
                 variant="inline-icon"
@@ -119,6 +120,7 @@ describe('<TreeItem />', () => {
               data-mocked="Checkbox"
             >
               <div
+                class="tm-tree-item-expand-btn"
                 data-mocked="Button"
                 iconname="treeview-expand"
                 variant="inline-icon"

diff --git a/packages/scene-composer/src/components/Tree/TreeItem.tsx b/packages/scene-composer/src/components/Tree/TreeItem.tsx
@@ -82,6 +82,7 @@ const TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(
         <TreeItemInner selected={selected} selectable={selectable} onActivated={onActivated} onSelected={onSelected}>
           {expandable && (
             <Button
+              className='tm-tree-item-expand-btn'
               variant='inline-icon'
               onClick={expandHandler}
               iconName={`treeview-${expanded ? 'collapse' : 'expand'}`}

diff --git a/packages/scene-composer/src/components/Tree/__snapshots__/TreeItem.spec.tsx.snap b/packages/scene-composer/src/components/Tree/__snapshots__/TreeItem.spec.tsx.snap
@@ -56,6 +56,7 @@ exports[`<TreeItem /> should render appropriate configuration "{"labelText":"Lab
         data-mocked="Checkbox"
       >
         <div
+          class="tm-tree-item-expand-btn"
           data-mocked="Button"
           iconname="treeview-expand"
           variant="inline-icon"
@@ -102,6 +103,7 @@ exports[`<TreeItem /> should render appropriate configuration "{"labelText":"Lab
         data-mocked="Checkbox"
       >
         <div
+          class="tm-tree-item-expand-btn"
           data-mocked="Button"
           iconname="treeview-expand"
           variant="inline-icon"

diff --git a/packages/scene-composer/src/components/Tree/tree.scss b/packages/scene-composer/src/components/Tree/tree.scss
@@ -1,74 +1,131 @@
 $border: 1px solid #414750;
 $text-color: #d5dbdb;
-$active-highlight: #00A1C9;
-$active-bg: #12293B;
+$active-highlight: #00a1c9;
+$active-bg: #12293b;
 $indent: 1rem;
 
-.tm-tree {
-  list-style-type: none;
-  list-style-position: outside;
-  padding: 0;
-  padding-left: 1rem;
-  padding-bottom: 2rem;
-  margin: 0;
-  border-top: $border;
-  position: relative;
-  user-select: none;
-
-  &.drop, .drop {
-    border-bottom: 3px solid #FFF;
-  }
+.tm-main {
+  overflow: auto;
+  margin-bottom: 55px;
 
   .tm-tree {
-    border-top: none;
-    position: initial;
-    padding-left: 0;
-    padding-bottom: 0;
-  }
+    list-style-type: none;
+    list-style-position: outside;
+    padding: 0;
+    padding-left: 1rem;
+    padding-bottom: 2rem;
+    margin: 0;
+    border-top: $border;
+    position: relative;
+    user-select: none;
 
-  .tm-tree-item {
-    padding-left: $indent;
-
-    &.expandable {
-      .tm-tree {
-        margin-left: $indent * 3;
-        border-left: $border;
-      }
+    &.drop,
+    .drop {
+      border-bottom: 3px solid #fff;
     }
 
-    &::marker {
-      padding: 0;
-      margin: $indent * -1;
-      display: inline-block;
+    .tm-tree {
+      border-top: none;
+      position: initial;
+      padding-left: 0;
+      padding-bottom: 0;
     }
 
-    .tm-tree-item-inner {
-      padding: 8px;
-      border-top: 1px solid transparent; // Invisible space to avoid jiggling
-      border-bottom: $border;
-      cursor: pointer;
+    .tm-tree-item {
+      padding-left: $indent;
 
-      label {
-        display: block;
-        width: 100%;
+      &.expandable {
+        .tm-tree {
+          margin-left: $indent * 3;
+          border-left: $border;
+        }
+      }
 
-        div {
+      &::marker {
+        padding: 0;
+        margin: $indent * -1;
+        display: inline-block;
+      }
+
+      .tm-tree-item-inner {
+        border-top: 1px solid transparent; // Invisible space to avoid jiggling
+        border-bottom: $border;
+        cursor: pointer;
+
+        span {
+          grid-column: 2/-1;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+
+          p {
+            margin: 0;
+            padding: 8px 8px 8px 0;
+          }
+        }
+
+        label {
+          align-items: center;
+        }
+        .tm-tree-item-expand-btn {
+          align-items: center;
+          span {
+            align-items: center;
+          }
+        }
+        .tm-scene-node-label {
+          align-items: center;
+
+          .tm-scene-node-label-inner {
+            grid-column: 2/-2;
+            margin: 0;
+            padding-left: 8px;
+            white-space: nowrap;
+
+            label {
+              align-items: center;
+            }
+          }
+
+          span {
+            grid-column: 1/2;
+
+            &.actions {
+              button.tm-visibility-toggle.tm-icon-button {
+                position: absolute;
+                right: 0;
+              }
+            }
+          }
+        }
+
+        .tm-tree-item-expand-btn {
+          float: left;
+        }
+
+        label {
+          display: block;
           width: 100%;
+
+          div {
+            width: 100%;
+          }
         }
-      }
 
-      /*
+        /*
       There really shouldn't be this much nesting or the UI will be pretty broken. But in the event where I'm wrong,
       and a customer complains that the borders and hover state are a tad off in rediculously nested trees, you can add a 0 to the next 2
       values, and you should be good to go for a good long while.
        */
-      margin-left: -1000px; // Negative margin makes the border apply regardless of indent.
-      padding-left: 1000px; // Cancels out the negative margin for content placement
+        margin-left: -1000px; // Negative margin makes the border apply regardless of indent.
+        padding-left: 1000px; // Cancels out the negative margin for content placement
 
-      &:hover, &.selected {
-        border-top: 1px solid $active-highlight;
-        border-bottom: 1px solid $active-highlight;
-        background: $active-bg;
+        &:hover,
+        &.selected {
+          border-top: 1px solid $active-highlight;
+          border-bottom: 1px solid $active-highlight;
+          background: $active-bg;
+        }
       }
     }
   }

diff --git a/...rc/components/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneNodeLabel.tsx b/...rc/components/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneNodeLabel.tsx
@@ -58,7 +58,8 @@ const SceneNodeLabel: FC<SceneNodeLabelProps> = ({
 
   return (
     <span className={`tm-scene-node-label ${error ? 'error' : ''}`.trim()} title={error}>
-      {componentTypeIcons} {labelText}
+      {componentTypeIcons}
+      <p className='tm-scene-node-label-inner'>{labelText}</p>
       <span className='actions'>
         {!!error && <Button onClick={onDelete} variant={'inline-icon'} iconSvg={DeleteSvg} />}
         <VisbilityToggle visible={visible} onToggle={toggleVisibility} />

diff --git a/...omponents/SceneHierarchyTree/__tests__/__snapshots__/SceneHierarchyTreeItem.spec.tsx.snap b/...omponents/SceneHierarchyTree/__tests__/__snapshots__/SceneHierarchyTreeItem.spec.tsx.snap
@@ -19,8 +19,11 @@ exports[`SceneHierarchyTreeItem should bubble up when expanded 1`] = `
         <span
           class="tm-scene-node-label"
         >
-           
-          Label 1
+          <p
+            class="tm-scene-node-label-inner"
+          >
+            Label 1
+          </p>
           <span
             class="actions"
           >
@@ -72,8 +75,11 @@ exports[`SceneHierarchyTreeItem should render SubModelTree when item has a model
               <svg />
             </div>
           </div>
-           
-          Label 1
+          <p
+            class="tm-scene-node-label-inner"
+          >
+            Label 1
+          </p>
           <span
             class="actions"
           >

diff --git a/...poser/src/components/panels/SceneHierarchyPanel/components/SubModelTree/SubModelTree.scss b/...poser/src/components/panels/SceneHierarchyPanel/components/SubModelTree/SubModelTree.scss
@@ -2,24 +2,20 @@
   .tm-sub-model {
     .tm-tree-item-inner {
       background-color: #414750;
-      border-bottom: 1px solid #2a2e33;
       display: grid;
       grid-template-columns: repeat(10, 1fr);
-      padding-top: 0;
-      padding-bottom: 0;
-      padding-right: 0px;
-
+      padding: 0 8px;
+
       .tm-icon-button {
         grid-column: 1/2;
-        position: relative;
       }
 
       span {
+        background-color: #414750;
         grid-column: 2/-1;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        background-color: #414750;
 
         p {
           background-color: #414750;
@@ -41,13 +37,8 @@
         }
       }
     }
-
     .actions {
       float: right;
     }
-
-    .tm-tree.tm-submodel-tree {
-      border-left: 1px solid green;
-    }
   }
 }
diff --git a/...HierarchyPanel/components/SubModelTree/__tests__/__snapshots__/SubModelTree.spec.tsx.snap b/...HierarchyPanel/components/SubModelTree/__tests__/__snapshots__/SubModelTree.spec.tsx.snap
@@ -51,6 +51,7 @@ exports[`SubModelTree should render appropriately based on the object 1`] = `
       class="tm-tree-item-inner"
     >
       <div
+        class="tm-tree-item-expand-btn"
         data-mocked="Button"
         iconname="treeview-collapse"
         variant="inline-icon"
@@ -104,6 +105,7 @@ exports[`SubModelTree should render appropriately based on the object 1`] = `
           class="tm-tree-item-inner"
         >
           <div
+            class="tm-tree-item-expand-btn"
             data-mocked="Button"
             iconname="treeview-collapse"
             variant="inline-icon"