Merge branch 'main' into fix-empty-table

iterative · Sep 9, 2022 · a4042c2 · a4042c2
2 parents 3618ed9 + a3fcbd7
commit a4042c2
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 5 deletions.
diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
@@ -205,6 +205,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
   position: relative;
   border: none;
   background: none;
+  cursor: pointer;
 }
 
 .expandedRowArrow {
@@ -221,13 +222,29 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
   bottom: 0;
 }
 
+.rowGroup:last-child > .tr:last-child {
+  border-color: $row-bg-color;
+
+  &.rowSelected {
+    border-color: $row-bg-selected-color;
+  }
+}
+
 .experiments {
   box-sizing: border-box;
   height: 100%;
   display: flex;
   flex-flow: column nowrap;
 
   .experimentGroup {
+    &:last-child .tr:last-child {
+      border-color: $row-bg-color;
+
+      &.rowSelected {
+        border-color: $row-bg-selected-color;
+      }
+    }
+
     .nestedRow {
       .experimentCell {
         padding-left: $nested-row-padding;
@@ -296,12 +313,35 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
     position: relative;
     background-color: $row-bg-color;
 
+    &:hover.rowSelected {
+      &:after {
+        box-shadow: inset 0 0 20px $shadow;
+        content: '';
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 4;
+        position: absolute;
+        pointer-events: none;
+      }
+
+      .td:hover,
+      .td:hover + .td {
+        border-left-color: $row-border-selected-color;
+      }
+    }
+
     &:hover:not(.rowSelected) {
       .td:not(.experimentCell),
       .experimentCell:before {
         background-color: $row-hover-background-color;
       }
 
+      .indicatorCount {
+        border-color: $row-hover-background-color;
+      }
+
       .td:hover,
       .td:hover + .td {
         border-left-color: $border-color;
@@ -325,6 +365,8 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
     }
 
     &.rowSelected {
+      border-color: $row-border-selected-color;
+
       .td {
         background-color: $row-bg-selected-color;
       }
@@ -336,6 +378,21 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
           background-color: $row-bg-selected-color;
         }
       }
+
+      .indicatorCount {
+        background-color: $indicator-selected-badge-background;
+        color: $indicator-selected-badge-foreground;
+        border: 1px solid $indicator-selected-badge-border;
+      }
+
+      .starSwitch:not([aria-checked='true']) svg {
+        fill: $star-switch-selection-fill-color;
+      }
+
+      .expandedRowArrow,
+      .contractedRowArrow {
+        border-color: $star-switch-selection-fill-color;
+      }
     }
   }
 
@@ -505,6 +562,10 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
         left: -$cell-padding;
         height: 100%;
 
+        &:first-child {
+          margin-right: 2px;
+        }
+
         .starSwitch {
           display: inline-flex;
           align-items: center;
@@ -754,18 +815,22 @@ $badge-size: 0.85rem;
 
 .indicatorCount {
   position: absolute;
-  bottom: 0;
-  right: 0;
+  bottom: 3px;
+  right: -2px;
   font-weight: bold;
   background-color: $indicator-badge-background;
   color: $indicator-badge-foreground;
+  border: 1px solid $indicator-badge-border;
   border-radius: 100%;
   width: $badge-size;
   height: $badge-size;
   line-height: $badge-size;
   text-align: center;
   vertical-align: middle;
   font-size: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .cellTooltip {
@@ -794,7 +859,7 @@ $badge-size: 0.85rem;
     .indicatorCount {
       display: none;
       .experimentGroup & {
-        display: block;
+        display: flex;
         &[aria-label='0'] {
           display: none;
         }

diff --git a/webview/src/shared/variables.scss b/webview/src/shared/variables.scss
@@ -27,8 +27,14 @@ $row-hover-background-color: var(--vscode-list-hoverBackground);
 
 $accent-color: var(--button-primary-background);
 
-$indicator-badge-foreground: var(--vscode-activityBarBadge-foreground);
-$indicator-badge-background: var(--vscode-activityBarBadge-background);
+$indicator-badge-background: var(--vscode-badge-background);
+$indicator-badge-foreground: var(--vscode-badge-foreground);
+$indicator-badge-border: $row-bg-color;
+$indicator-selected-badge-border: $row-bg-selected-color;
+$indicator-selected-badge-background: $accent-color;
+$indicator-selected-badge-foreground: var(--button-primary-foreground);
+
+$star-switch-selection-fill-color: var(--vscode-list-focusHighlightForeground);
 
 $shadow: var(--vscode-widget-shadow);