Chore: CSS updates to Scene Hierarchy (#289)

* Fix: CSS updates to Scene Hierarchy * Eslint fix * Improving test coverage * Eslint fixes for new test coverage Co-authored-by: Emily Dodds <[email protected]>
awslabs · Oct 21, 2022 · ab3c749 · ab3c749
1 parent 0786c4a
commit ab3c749
Show file tree

Hide file tree

Showing 17 changed files with 410 additions and 172 deletions.
diff --git a/packages/scene-composer/package.json b/packages/scene-composer/package.json
@@ -157,7 +157,7 @@
         "lines": 77.48,
         "statements": 76.61,
         "functions": 77.57,
-        "branches": 63.62,
+        "branches": 63.58,
         "branchesTrue": 100
       }
     }

diff --git a/packages/scene-composer/src/GlobalStyles.ts b/packages/scene-composer/src/GlobalStyles.ts
@@ -1,10 +1,11 @@
 import { createGlobalStyle } from 'styled-components';
 
 export const GlobalStyles = createGlobalStyle`
-  .sidePanelTabs {
-    overflow: auto;
+  .tm-side-panel-tabs {
     height: 100vh;
+    max-width: 100vw;
+    overflow: auto;
   }
-  .sidePanelTabs > div:first-of-type {
+  .tm-side-panel-tabs > div:first-of-type {
     padding: 0 !important; // This removes the padding of the AWSUI Tabs Component
   }`;
diff --git a/packages/scene-composer/src/assets/auto-gen/icons/Camera.tsx b/packages/scene-composer/src/assets/auto-gen/icons/Camera.tsx
@@ -2,16 +2,8 @@ import * as React from 'react';
 import { SVGProps } from 'react';
 
 const SvgCamera = (props: SVGProps<SVGSVGElement>) => (
-  <svg width={14} height={7} fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
-    <g clipPath='url(#camera_svg__a)' fill='#879596' stroke='#879596' strokeWidth={2}>
-      <path d='M13.133 5.384V1.91l-2.606 1.737 2.606 1.737Z' strokeLinejoin='round' />
-      <path d='M9.552.87H.867v5.21h8.685V.87Z' strokeMiterlimit={10} />
-    </g>
-    <defs>
-      <clipPath id='camera_svg__a'>
-        <path fill='#fff' d='M0 0h14v6.948H0z' />
-      </clipPath>
-    </defs>
+  <svg data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' {...props}>
+    <path d='M15.12 10.2v-4l-3 2 3 2zM1 5h10v6H1z' />
   </svg>
 );
 

diff --git a/packages/scene-composer/src/assets/icons/camera.svg b/packages/scene-composer/src/assets/icons/camera.svg
diff --git a/packages/scene-composer/src/components/Tree/tree.scss b/packages/scene-composer/src/components/Tree/tree.scss
@@ -1,132 +1,169 @@
-$border: 1px solid #414750;
+$background: #2a2e33;
+$background-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(42, 46, 51, 1) 38%, rgba(42, 46, 51, 1) 100%);
+$background-hover: #414750;
+$border: 1px solid $background;
 $text-color: #d5dbdb;
 $active-highlight: #00a1c9;
 $active-bg: #12293b;
+$active-bg-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(18, 41, 59, 1) 38%, rgba(18, 41, 59, 1) 100%);
 $indent: 1rem;
+$active-color: #ec7211;
 
-.tm-main {
-  overflow: auto;
-  margin-bottom: 55px;
-
-  .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;
-    }
+@mixin selected {
+  border-top: 1px solid $active-highlight;
+  border-bottom: 1px solid $active-highlight;
+  background: $active-bg;
+}
+@mixin selected-action {
+  @include selected;
+  background: $active-bg-gradient;
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
+@mixin hover {
+  @include selected;
+  color: $active-color;
+}
+
+  #tm-main {
+    margin-bottom: 5px;
 
     .tm-tree {
-      border-top: none;
-      position: initial;
-      padding-left: 0;
-      padding-bottom: 0;
-    }
+      border-top: $border;
+      list-style-position: outside;
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      position: relative;
+      user-select: none;
+
+      &.drop,
+      .drop {
+        border-bottom: 3px solid #fff;
+      }
 
-    .tm-tree-item {
-      padding-left: $indent;
+      .tm-tree-item {
+        padding-left: $indent * 2;
+        border-top: 1px solid $background-hover;
 
-      &.expandable {
-        .tm-tree {
-          margin-left: $indent * 3;
-          border-left: $border;
+        &::marker {
+          padding: 0;
+          margin: $indent * -1;
+          display: inline-block;
         }
-      }
 
-      &::marker {
-        padding: 0;
-        margin: $indent * -1;
-        display: inline-block;
-      }
+        .tm-tree-item-inner {
+          cursor: pointer;
+          margin-left: -2rem;
+          padding-left: 2rem;
 
-      .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;
+          .tm-scene-node-label {
+            .tm-scene-node-label-inner {
+              flex: 0 0 100%;
+              padding: 16px;
+              margin: -1px -20px -1px 0;
+              padding-right: 20px;
+              width: 100vw;
+            }
 
-          p {
-            margin: 0;
-            padding: 8px 8px 8px 0;
+            .actions {
+              background-color: var(--color-background-container-content-o88wxm, #ffffff); // fallback for gradient
+              background: $background-gradient;
+              position: sticky;
+              right: 0;
+              padding: 12px 10px 12px 20px;
+            }
           }
-        }
 
-        label {
-          align-items: center;
-        }
-        .tm-tree-item-expand-btn {
-          align-items: center;
-          span {
+          label {
+            width: 100%;
             align-items: center;
-          }
-        }
-        .tm-scene-node-label {
-          align-items: center;
+            padding-left: 1rem;
 
-          .tm-scene-node-label-inner {
-            grid-column: 2/-2;
-            margin: 0;
-            padding-left: 8px;
-            white-space: nowrap;
+            span {
+              span {
+                align-items: center;
+                display: flex;
 
-            label {
-              align-items: center;
+                &:before {
+                  box-shadow: none;
+                }
+
+                .tm-tree-item-expand-btn {
+                  min-width: unset; 
+                }
+              }
+
+              &[class*='awsui_control_'] {
+                margin-top: 0;
+              }
             }
-          }
 
-          span {
-            grid-column: 1/2;
+            &:hover {
+              margin-top: -1px; // Cancells out movement from hover/selected border
+              margin-bottom: -1px; // Cancells out movement from hover/selected border
+              @include hover;
 
-            &.actions {
-              button.tm-visibility-toggle.tm-icon-button {
-                position: absolute;
-                right: 0;
+              .tm-scene-node-label-inner {
+                border: none;
+                @include hover;
+                margin-top: -4px;
+                margin-bottom: -3px;
+              }
+              .actions {
+                @include selected-action;
+
+                button {
+                  padding-top: 4px; 
+                  padding-bottom: 4px; 
+                  color: $active-color;
+                }
               }
             }
           }
-        }
 
-        .tm-tree-item-expand-btn {
-          float: left;
-        }
+          &:hover {
+            label {
+              span {
+                span {
+                  color: $active-color; // this targets visibility icon
+                }
+              }
+            }
+          }
 
-        label {
-          display: block;
-          width: 100%;
+          &.selected {
+            @include selected;
+            .tm-scene-node-label-inner {
+              border: none;
+              @include selected;
+              margin-top: -4px;
+              margin-bottom: -3px;
+            }
+            .actions {
+              @include selected-action;
 
-          div {
-            width: 100%;
+              button {
+                padding-top: 4px;
+                padding-bottom: 4px;
+              }
+            }
           }
         }
+      }
 
-        /*
-      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
-
-        &:hover,
-        &.selected {
-          border-top: 1px solid $active-highlight;
-          border-bottom: 1px solid $active-highlight;
-          background: $active-bg;
-        }
+      .tm-draggable[draggable=true]::before {
+        margin: 0;
+        padding: 1.65rem 1rem;
+      }
+
+      // nested tree
+      .tm-tree {
+        border-top: none;
+        position: initial;
+        padding-left: 0;
+        padding-bottom: 0;
       }
     }
   }
-}
diff --git a/packages/scene-composer/src/components/VisibilityToggle/index.tsx b/packages/scene-composer/src/components/VisibilityToggle/index.tsx
@@ -11,9 +11,13 @@ interface VisibilityToggleProps extends ButtonProps {
 }
 
 const VisibilityToggle: FC<VisibilityToggleProps> = ({ visible = true, onToggle = () => {}, ...props }) => {
-  const onToggleHandler = useCallback(() => {
-    onToggle(!visible);
-  }, [visible]);
+  const onToggleHandler = useCallback(
+    (e) => {
+      onToggle(!visible);
+      e.stopPropagation();
+    },
+    [visible],
+  );
 
   return (
     <Button

diff --git a/...src/components/panels/SceneHierarchyPanel/__snapshots__/SceneHierarchyPanel.spec.tsx.snap b/...src/components/panels/SceneHierarchyPanel/__snapshots__/SceneHierarchyPanel.spec.tsx.snap
@@ -7,6 +7,7 @@ exports[`SceneHierarchyPanel should render search hierarchy correctly when enabl
   >
     <div
       class="tm-main"
+      id="tm-main"
     >
       <ol
         class="tm-tree"
@@ -33,6 +34,7 @@ exports[`SceneHierarchyPanel should render search hierarchy correctly when enabl
     </div>
     <div
       class="tm-main"
+      id="tm-main"
     >
       <ol
         class="tm-tree"

diff --git a/...nents/panels/SceneHierarchyPanel/components/SceneHierarchyTree/ComponentTypeIcon.spec.tsx b/...nents/panels/SceneHierarchyPanel/components/SceneHierarchyTree/ComponentTypeIcon.spec.tsx
@@ -0,0 +1,24 @@
+import renderer from 'react-test-renderer';
+import React from 'react';
+
+import { Camera, Light, Modelref, Tag } from '../../../../../assets/auto-gen/icons';
+
+import ComponentTypeIcon from './ComponentTypeIcon';
+
+describe('ComponentTypeIcon', () => {
+  [
+    ['Camera', { key: 'Camera', icon: Camera }],
+    ['Light', { key: 'Light', icon: Light }],
+    ['ModelRef', { key: 'ModelRef', icon: Modelref }],
+    ['SubModelRef', { key: 'SubModelRef', icon: Modelref }],
+    ['Tag', { key: 'Tag', icon: Tag }],
+    ['Empty', { key: '', icon: <></> }],
+  ].forEach((value) => {
+    it(`it should render the ${value[0]} svg`, () => {
+      const { key } = value[1] as any;
+      const container = renderer.create(ComponentTypeIcon({ type: key }));
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});