fix(composer): Fixes for layout in Console, submodel layout updates, …

…bug fix for submodel interactive highlights (#344) Co-authored-by: Emily Dodds <dodemily@amazon.com>
awslabs · Nov 10, 2022 · a1ea148 · a1ea148
1 parent 94dcdda
commit a1ea148
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 55 deletions.
diff --git a/packages/scene-composer/package.json b/packages/scene-composer/package.json
@@ -154,10 +154,10 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "lines": 77.55,
-        "statements": 76.71,
-        "functions": 77.15,
-        "branches": 63.49,
+        "lines": 77.57,
+        "statements": 76.73,
+        "functions": 77.19,
+        "branches": 63.54,
         "branchesTrue": 100
       }
     }

diff --git a/packages/scene-composer/src/components/Tree/tree.scss b/packages/scene-composer/src/components/Tree/tree.scss
@@ -28,6 +28,11 @@ $active-color: #ec7211;
 #tm-main {
   margin-bottom: 5px;
 
+  // Adjustment to ensure we're able to keep layouts inline with Polaris modifications
+  p {
+    line-height: 2rem;
+  }
+
   .tm-tree {
     border-top: $border;
     list-style-position: outside;
@@ -44,7 +49,11 @@ $active-color: #ec7211;
 
     .tm-tree-item {
       padding-left: $indent * 2;
-      border-top: 1px solid $background-hover;
+      padding-top: 0;
+
+      .tm-draggable[draggable=true]::before {
+        margin-top: 1.6rem;
+    }
 
       .tm-tree-item-inner {
         cursor: pointer;
@@ -58,14 +67,14 @@ $active-color: #ec7211;
         }
 
         .tm-scene-node-label {
+          border-top: 1px solid $background-hover;
           display: grid;
           grid-template-columns: repeat(20, 1fr);
           align-items: center;
 
           .tm-scene-node-label-inner {
             flex: 0 0 100%;
-            padding: 16px 20px 16px 16px;
-            padding-right: 20px;
+            padding: 13px 50px 14px 20px;
             width: 100vw;
             margin: 0;
             white-space: nowrap;
@@ -76,7 +85,7 @@ $active-color: #ec7211;
             background: $background-gradient;
             position: sticky;
             right: 0;
-            padding: 12px 10px 12px 20px;
+            padding-right: 12px;
             color: $active-color;
           }
         }
@@ -86,11 +95,18 @@ $active-color: #ec7211;
           margin-bottom: 0px; // Cancells out movement from hover/selected border
           @include hover;
 
+          .tm-scene-node-label-inner {
+            border: none;
+            @include selected;
+            margin-bottom: -1px;
+            margin-top: -2px;
+          }
+
           .actions {
             @include selected-action;
-            margin-top: -1px;
+            margin-top: -3px;
             margin-bottom: -1px;
-            padding: 16px 10px 16px 20px;
+            padding: 12px 12px 13px 50px;
           }
 
           .tm-visibility-toggle,
@@ -107,14 +123,17 @@ $active-color: #ec7211;
           .tm-scene-node-label-inner {
             border: none;
             @include selected;
-            margin-top: -1px;
             margin-bottom: -1px;
+            margin-top: -2px;
+            margin-right: -30px;
           }
 
           .actions {
             @include selected-action;
-            padding: 16px 10px 16px 50px;
-            margin-left: -30px;
+            margin-top: -3px;
+            margin-bottom: -1px;
+            padding-bottom: 13px;
+            padding: 12px 12px 13px 50px;
           }
         }
       }

diff --git a/...poser/src/components/panels/SceneHierarchyPanel/components/SubModelTree/SubModelTree.scss b/...poser/src/components/panels/SceneHierarchyPanel/components/SubModelTree/SubModelTree.scss
@@ -1,62 +1,58 @@
 $background: #414750;
-$background-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(42, 46, 51, 1) 38%, rgba(42, 46, 51, 1) 100%);
+$border: #2a2e33;
 $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%);
 $active-highlight: #00a1c9;
 $active-color: #ec7211;
 
+@mixin selected {
+  border-top: 1px solid $active-highlight;
+  border-bottom: 1px solid $active-highlight;
+  background: $active-bg;
+}
+
 .tm-hierarchy-panel {
   #tm-main {
     .tm-tree {
       .tm-tree-item.tm-sub-model {
         background-color: $background;
 
         .tm-tree-item-inner {
-          .tm-tree-label-content {
-            align-items: center;
-            display: flex;
-            flex: auto;
-            justify-content: space-between;
-
-            .actions {
-              background-color: $background; // fallback for gradient
-              background: linear-gradient(
-                90deg,
-                rgba(0, 0, 0, 0) 0%,
-                rgba(65, 71, 80, 1) 29%,
-                rgba(65, 71, 80, 1) 100%
-              );
-              margin-right: 4px;
+          .tm-scene-node-label {
+            .tm-scene-node-label-inner {
+              border-bottom: 1px solid $border;
+              background-color: $background;
             }
           }
 
+          .actions {
+            background-color: $background; // fallback for gradient
+            background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(65, 71, 80, 1) 29%, rgba(65, 71, 80, 1) 100%);
+            display: flex;
+            margin-top: -3px;
+            margin-bottom: -1px;
+            padding: 12px 12px 13px 50px;
+            margin-left: -30px;
+          }
+
           &:hover {
-            margin-top: -2px; // Cancells out movement from hover/selected border
-            border-top: 1px solid $active-highlight;
-            border-bottom: 1px solid $active-highlight;
-            background: $active-bg;
-            color: $active-color;
+            margin-top: 0;
+
+            .tm-scene-node-label {
+              .tm-scene-node-label-inner {
+                border: none;
+                @include selected;
+                margin-bottom: -1px;
+                margin-top: -2px;
+              }
+            }
 
             button {
               color: $active-color;
             }
-
-            .tm-tree-label-content {
-              .actions {
-                background-color: $active-bg;
-                background: $active-bg-gradient;
-              }
-            }
-          }
-        }
-
-        &.expandable.tm-sub-model {
-          .tm-tree-item-inner {
-            align-items: center;
-            display: flex;
-
-            button.tm-tree-item-expand-btn {
-              flex: 0 0 25px;
+            .actions {
+              background-color: $active-bg;
+              background: $active-bg-gradient;
             }
           }
         }

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

diff --git a/...Panel/components/SubModelTree/__tests__/__snapshots__/SubModelTreeItemLabel.spec.tsx.snap b/...Panel/components/SubModelTree/__tests__/__snapshots__/SubModelTreeItemLabel.spec.tsx.snap
@@ -3,9 +3,11 @@
 exports[`SubModelTreeItemLabel should render as appropriate 1`] = `
 <div>
   <span
-    class="tm-tree-label-content"
+    class="tm-scene-node-label"
   >
-    <p>
+    <p
+      class="tm-scene-node-label-inner"
+    >
       Label
     </p>
     <span