Fix: Implementing horizontal side-scroll for tree view (#83)

* Fix: Implementing horizontal side-scroll for tree view * Eslint fix Co-authored-by: Emily Dodds <dodemily@amazon.com>
awslabs · Sep 1, 2022 · bb5914c · bb5914c
1 parent b912492
commit bb5914c
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 18 deletions.
diff --git a/packages/scene-composer/package.json b/packages/scene-composer/package.json
@@ -157,7 +157,7 @@
         "lines": 75.55,
         "statements": 74.65,
         "functions": 75.07,
-        "branches": 61.28,
+        "branches": 61.32,
         "branchesTrue": 100
       }
     }

diff --git a/packages/scene-composer/src/GlobalStyles.ts b/packages/scene-composer/src/GlobalStyles.ts
@@ -2,7 +2,8 @@ import { createGlobalStyle } from 'styled-components';
 
 export const GlobalStyles = createGlobalStyle`
   .sidePanelTabs {
-    overflow-y: auto;
+    overflow: auto;
+    height: 100vh;
   }
   .sidePanelTabs > div:first-of-type {
     padding: 0 !important; // This removes the padding of the Polaris Tabs Component

diff --git a/packages/scene-composer/src/components/VisibilityToggle/index.tsx b/packages/scene-composer/src/components/VisibilityToggle/index.tsx
@@ -20,7 +20,7 @@ const VisibilityToggle: FC<VisibilityToggleProps> = ({ visible = true, onToggle
       {...props}
       onClick={onToggleHandler}
       variant={'inline-icon'}
-      className={`tm-visibility-toggle ${visible ? 'visible' : ''}`.trim()}
+      className={`tm-visibility-toggle ${visible ? 'visible' : ''} tm-icon-button`.trim()}
       iconSvg={<ShowIcon />}
     />
   );

diff --git a/...omponents/SceneHierarchyTree/__tests__/__snapshots__/SceneHierarchyTreeItem.spec.tsx.snap b/...omponents/SceneHierarchyTree/__tests__/__snapshots__/SceneHierarchyTreeItem.spec.tsx.snap
@@ -25,7 +25,7 @@ exports[`SceneHierarchyTreeItem should bubble up when expanded 1`] = `
             class="actions"
           >
             <div
-              class="tm-visibility-toggle visible"
+              class="tm-visibility-toggle visible tm-icon-button"
               data-mocked="Button"
               variant="inline-icon"
             >
@@ -78,7 +78,7 @@ exports[`SceneHierarchyTreeItem should render SubModelTree when item has a model
             class="actions"
           >
             <div
-              class="tm-visibility-toggle visible"
+              class="tm-visibility-toggle visible tm-icon-button"
               data-mocked="Button"
               variant="inline-icon"
             >

diff --git a/...poser/src/components/panels/SceneHierarchyPanel/components/SubModelTree/SubModelTree.scss b/...poser/src/components/panels/SceneHierarchyPanel/components/SubModelTree/SubModelTree.scss
@@ -1,8 +1,45 @@
 .tm-tree {
   .tm-sub-model {
     .tm-tree-item-inner {
-      border-bottom: 1px solid #2A2E33;
       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;
+
+      .tm-icon-button {
+        grid-column: 1/2;
+        position: relative;
+      }
+
+      span {
+        grid-column: 2/-1;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        background-color: #414750;
+
+        p {
+          background-color: #414750;
+          margin: 0;
+          padding: 8px 8px 8px 0;
+
+          &.actions {
+            background-color: #414750;
+          }
+        }
+      }
+
+      &:hover {
+        span {
+          background-color: unset;
+          p {
+            background-color: unset;
+          }
+        }
+      }
     }
 
     .actions {

diff --git a/...c/components/panels/SceneHierarchyPanel/components/SubModelTree/SubModelTreeItemLabel.tsx b/...c/components/panels/SceneHierarchyPanel/components/SubModelTree/SubModelTreeItemLabel.tsx
@@ -12,10 +12,10 @@ interface TreeItemLabelProps extends DetailedHTMLProps<LabelHTMLAttributes<HTMLL
 const SubModelTreeItemLabel: FC<TreeItemLabelProps> = ({ onAdd, visible, onVisibilityToggled, children, ...props }) => {
   return (
     <span {...props}>
-      {children}
+      <p>{children}</p>
       <span className='actions'>
-        <Button iconName='add-plus' variant={'inline-icon'} onClick={onAdd} />
-        <VisibilityToggle visible={visible} onToggle={onVisibilityToggled} />
+        <Button className='tm-icon-button' iconName='add-plus' variant={'inline-icon'} onClick={onAdd} />
+        <VisibilityToggle className='tm-icon-button' visible={visible} onToggle={onVisibilityToggled} />
       </span>
     </span>
   );

diff --git a/...Panel/components/SubModelTree/__tests__/__snapshots__/SubModelTreeItemLabel.spec.tsx.snap b/...Panel/components/SubModelTree/__tests__/__snapshots__/SubModelTreeItemLabel.spec.tsx.snap
@@ -3,17 +3,20 @@
 exports[`SubModelTreeItemLabel should render as appropriate 1`] = `
 <div>
   <span>
-    Label
+    <p>
+      Label
+    </p>
     <span
       class="actions"
     >
       <div
+        class="tm-icon-button"
         data-mocked="Button"
         iconname="add-plus"
         variant="inline-icon"
       />
       <div
-        class="tm-visibility-toggle visible"
+        class="tm-visibility-toggle visible tm-icon-button"
         data-mocked="Button"
         variant="inline-icon"
       >

diff --git a/packages/scene-composer/src/components/panels/SceneHierarchyPanel/layout/layout.scss b/packages/scene-composer/src/components/panels/SceneHierarchyPanel/layout/layout.scss
@@ -1,5 +1,4 @@
 .tm-hierarchy-panel {
-  overflow: hidden;
 
   .tm-toolbar {
     padding: 15px;

diff --git a/packages/scene-composer/src/layouts/SceneLayout/__snapshots__/SceneLayout.spec.tsx.snap b/packages/scene-composer/src/layouts/SceneLayout/__snapshots__/SceneLayout.spec.tsx.snap
@@ -67,7 +67,6 @@ exports[`SceneLayout should render correctly in Edit mode 1`] = `
 .c6 {
   width: 400px;
   height: 100%;
-  overflow-y: auto;
 }
 
 .c26 {
@@ -1170,7 +1169,6 @@ exports[`SceneLayout should render correctly in Edit mode with Modal 1`] = `
 .c8 {
   width: 400px;
   height: 100%;
-  overflow-y: auto;
 }
 
 .c28 {
@@ -2321,7 +2319,6 @@ exports[`SceneLayout should render correctly in Viewing mode 1`] = `
 .c5 {
   width: 400px;
   height: 100%;
-  overflow-y: auto;
 }
 
 .c0 {
@@ -2819,7 +2816,6 @@ exports[`SceneLayout should render correctly in Viewing mode with modal 1`] = `
 .c7 {
   width: 400px;
   height: 100%;
-  overflow-y: auto;
 }
 
 .c2 {

diff --git a/packages/scene-composer/src/layouts/SceneLayout/components/LeftPanel.tsx b/packages/scene-composer/src/layouts/SceneLayout/components/LeftPanel.tsx
@@ -8,7 +8,6 @@ import TabbedPanelContainer from './TabbedPanelContainer';
 const FixedWidthDiv = styled.div`
   width: 400px;
   height: 100%;
-  overflow-y: auto;
 `;
 
 const LeftPanel: FC<Record<string, JSX.Element>> = (props) => (

diff --git a/...s/scene-composer/src/layouts/SceneLayout/components/__snapshots__/LeftPanel.spec.tsx.snap b/...s/scene-composer/src/layouts/SceneLayout/components/__snapshots__/LeftPanel.spec.tsx.snap
@@ -4,7 +4,6 @@ exports[`<LeftPanel /> should render the expencted layout 1`] = `
 .c0 {
   width: 400px;
   height: 100%;
-  overflow-y: auto;
 }
 
 <div
-Original file line number
+Diff line change
@@ Expand Up @@
     .c0 {
       width: 400px;
       height: 100%;
-      overflow-y: auto;
     }
     <div
@@ Expand Down @@