Add shadow to table head (#1835)

* Add width/height: 100% styles in Storybook preview * Add shadow to sticky header * Remove preview marker from marketplace listing (#1860) * Add init to command palette when there is no DVC project in the workspace (#1861) * Upgrade dev dependencies and resolutions (security) (#1864) * Remove div wrapper on header cells and add special exp cell border * Make head and body rows have different background colors * Fix style suppression Co-authored-by: mattseddon <[email protected]>
iterative · Jun 10, 2022 · d22127e · d22127e
1 parent 8eecddf
commit d22127e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 22 deletions.
diff --git a/webview/src/experiments/components/table/MergeHeaderGroups.tsx b/webview/src/experiments/components/table/MergeHeaderGroups.tsx
@@ -33,22 +33,21 @@ export const MergedHeaderGroups: React.FC<{
   return (
     <div
       {...headerGroup.getHeaderGroupProps({
-        className: cx(styles.tr, styles.headerRow)
+        className: cx(styles.tr, styles.headRow)
       })}
     >
       {headerGroup.headers.map((column: HeaderGroup<Experiment>) => (
-        <div key={column.id}>
-          <TableHeader
-            orderedColumns={orderedColumns}
-            column={column}
-            columns={columns}
-            sorts={sorts}
-            filters={filters}
-            onDragOver={onDragUpdate}
-            onDragStart={onDragStart}
-            onDrop={onDragEnd}
-          />
-        </div>
+        <TableHeader
+          key={column.id}
+          orderedColumns={orderedColumns}
+          column={column}
+          columns={columns}
+          sorts={sorts}
+          filters={filters}
+          onDragOver={onDragUpdate}
+          onDragStart={onDragStart}
+          onDrop={onDragEnd}
+        />
       ))}
     </div>
   )

diff --git a/webview/src/experiments/components/table/Row.tsx b/webview/src/experiments/components/table/Row.tsx
@@ -149,6 +149,7 @@ export const RowContent: React.FC<
           className: cx(
             className,
             styles.tr,
+            styles.bodyRow,
             getExperimentTypeClass(original),
             flatIndex % 2 === 0 || styles.oddRow,
             isWorkspace ? styles.workspaceRow : styles.normalRow,

diff --git a/webview/src/experiments/components/table/TableHeader.tsx b/webview/src/experiments/components/table/TableHeader.tsx
@@ -105,7 +105,10 @@ const getHeaderPropsArgs = (
         [styles.sortingHeaderCellDesc]:
           sortOrder === SortOrder.DESCENDING && !column.placeholderOf
       }
-    )
+    ),
+    style: {
+      position: undefined
+    }
   }
 }
 

diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
@@ -251,25 +251,27 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
     width: 1rem;
   }
 
-  .thead {
-    border-bottom: $row-border;
-  }
-
   .tr {
     position: relative;
     & > *:first-child {
-      background-color: $row-bg-color;
       position: sticky;
       left: 0;
       z-index: 3;
+      border-right: 2px solid var(--editor-foreground-transparency-4);
     }
 
     &.oddRow > *:first-child {
       background-color: $row-bg-alt-color;
     }
   }
 
-  .headerRow {
+  .bodyRow {
+    & > *:first-child {
+      background-color: $row-bg-color;
+    }
+  }
+
+  .headRow {
     font-size: 0.7rem;
 
     .headerCellWrapper {
@@ -286,6 +288,10 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
       }
     }
 
+    & > *:first-child {
+      background-color: $header-bg-color;
+    }
+
     &:last-child,
     .firstLevelHeader {
       .paramHeaderCell,
@@ -387,7 +393,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
     position: relative;
   }
   .th {
-    height: 100%;
+    height: auto;
   }
   .td {
     height: auto;
@@ -557,8 +563,10 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
 }
 
 .thead {
+  background-color: $bg-color;
+  border-bottom: $row-border;
+  box-shadow: 0 5px 8px -2px var(--vscode-widget-shadow);
   position: sticky;
   top: 0;
   z-index: 4;
-  background-color: $bg-color;
 }