From 8510968ffe2aa9b7a20c24e3403728cd8a015e65 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Tue, 2 Aug 2022 15:06:20 -0500 Subject: [PATCH 01/13] Update table styles * add cell hover style * add a bottom line every row * remove even row bg style * keep header bg same as body bg * use the same line style for header item separators * keep row arrow same color as left icons * update workspace row, making it sticky and using default row styles --- .../experiments/components/table/Table.tsx | 80 +++++++++++++---- .../components/table/TableHead.tsx | 26 +++--- .../components/table/styles.module.scss | 86 ++++++------------- webview/src/shared/variables.scss | 6 +- 4 files changed, 106 insertions(+), 92 deletions(-) diff --git a/webview/src/experiments/components/table/Table.tsx b/webview/src/experiments/components/table/Table.tsx index c2c8ac45b6..d4c275ccce 100644 --- a/webview/src/experiments/components/table/Table.tsx +++ b/webview/src/experiments/components/table/Table.tsx @@ -1,6 +1,7 @@ -import React, { useRef, useState } from 'react' +import React, { CSSProperties, useRef, useState } from 'react' import { useSelector } from 'react-redux' import cx from 'classnames' +import { useInView } from 'react-intersection-observer' import styles from './styles.module.scss' import { TableHead } from './TableHead' import { BatchSelectionProp, RowContent } from './Row' @@ -74,29 +75,57 @@ export const ExperimentGroup: React.FC< ) } -export const TableBody: React.FC< - RowProp & InstanceProp & BatchSelectionProp -> = ({ - row, - instance, - contextMenuDisabled, - projectHasCheckpoints, - hasRunningExperiment, - batchRowSelection -}) => { - instance.prepareRow(row) +const WorkspaceRowGroupWrapper: React.FC< + { + children: React.ReactNode + root: HTMLElement | null + tableHeaderHeight: number + } & InstanceProp +> = ({ children, instance, root, tableHeaderHeight }) => { + const [ref, needsShadow] = useInView({ + root, + rootMargin: `-${tableHeaderHeight + 15}px 0px 0px 0px`, + threshold: 1 + }) + return (
+ {children} +
+ ) +} + +export const TableBody: React.FC< + RowProp & + InstanceProp & + BatchSelectionProp & { root: HTMLElement | null; tableHeaderHeight: number } +> = ({ + row, + instance, + contextMenuDisabled, + projectHasCheckpoints, + hasRunningExperiment, + batchRowSelection, + root, + tableHeaderHeight +}) => { + instance.prepareRow(row) + + const content = ( + <> ))} + + ) + return row.values.id === 'workspace' ? ( + + {content} + + ) : ( +
+ {content}
) } @@ -132,6 +178,7 @@ export const Table: React.FC = ({ instance }) => { const { clearSelectedRows, batchSelection, lastSelectedRow } = React.useContext(RowSelectionContext) const [expColumnNeedsShadow, setExpColumnNeedsShadow] = useState(false) + const [tableHeadHeight, setTableHeadHeight] = useState(55) const tableRef = useRef(null) @@ -192,9 +239,12 @@ export const Table: React.FC = ({ instance }) => { instance={instance} root={tableRef.current} setExpColumnNeedsShadow={setExpColumnNeedsShadow} + setTableHeadHeight={setTableHeadHeight} /> {rows.map(row => ( root: HTMLElement | null setExpColumnNeedsShadow: (needsShadow: boolean) => void + setTableHeadHeight: (height: number) => void } export const TableHead = ({ @@ -29,7 +29,8 @@ export const TableHead = ({ rows }, root, - setExpColumnNeedsShadow + setExpColumnNeedsShadow, + setTableHeadHeight }: TableHeadProps) => { const columns = useSelector( (state: ExperimentsState) => state.tableData.columns @@ -86,21 +87,22 @@ export const TableHead = ({ type: MessageFromWebviewType.REORDER_COLUMNS }) } - const [ref, needsShadow] = useInView({ - root, - rootMargin: '-15px 0px 0px 0px', - threshold: 1 - }) const selectedForPlotsCount = getSelectedForPlotsCount(rows) const firstExpColumnCellId = headerGroups[0].headers[0].id + const wrapper = useRef(null) + + useEffect(() => { + const wrapperHeight = wrapper.current?.getBoundingClientRect().height + if (wrapperHeight) { + setTableHeadHeight(wrapperHeight) + } + }, [setTableHeadHeight]) + return ( -
+
{headerGroups.map(headerGroup => ( // eslint-disable-next-line react/jsx-key diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss index 738a6bfb7b..c6b107f549 100644 --- a/webview/src/experiments/components/table/styles.module.scss +++ b/webview/src/experiments/components/table/styles.module.scss @@ -17,7 +17,8 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; left: 0; display: inline-block; position: absolute; - border: 2px solid $fg-color; + border: 2px solid var(--vscode-descriptionForeground); + opacity: 0.5; border-top: unset; border-left: unset; transition: transform 0.2s, right 0.2s, bottom 0.2s; @@ -128,10 +129,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; background-color: $bg-color; } - .unselectedExperiment.oddRow & { - background-color: $row-bg-alt-color; - } - .workspaceWithChanges.unselectedExperiment & { border: 1px solid $changed-color; } @@ -150,18 +147,11 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; animation: spin 1s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite; background-color: $bg-color; } - .runningExperiment.oddRow & { - background-color: $row-bg-alt-color; - } + .workspaceWithChanges.runningExperiment & { border-right-color: $changed-color; border-top-color: $changed-color; } - - .runningExperiment.oddRow > .experimentCell & { - border-left: 1.5px solid $row-bg-alt-color; - border-bottom: 1.5px solid $row-bg-alt-color; - } } } @@ -181,7 +171,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; transform: rotate(45deg); right: 1px; bottom: 2px; - border-color: $fg-color; } .contractedRowArrow { @@ -280,10 +269,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; transition: box-shadow 0.25s; } } - - &.oddRow > *:first-child { - background-color: $row-bg-alt-color; - } } &.rowSelected { @@ -298,6 +283,8 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; } .bodyRow { + border-bottom: $row-border; + &:not(.rowSelected) { & > *:first-child { background-color: $row-bg-color; @@ -370,44 +357,15 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; } } - .rowGroup { - margin: 0.5rem 0; - } - .normalRowGroup { - border-top: $row-border; - border-bottom: $row-border; - .oddRow { - background-color: $row-bg-alt-color; - } - .td { - &:first-child { - border-left: $row-border; - } - - &:last-child { - border-right: $row-border; - } - } - } .workspaceRowGroup { border: none; + position: sticky; + top: var(--table-head-height); + z-index: 4; + background-color: $row-bg-color; - .td { - &:first-child { - padding-left: $workspace-row-edge-margin; - .innerCell { - padding-left: $cell-padding; - border-left: $row-border; - } - } - - &:last-child { - padding-right: $workspace-row-edge-margin; - .innerCell { - padding-right: $cell-padding; - border-right: $row-border; - } - } + &.withShadow { + box-shadow: 0 5px 8px -2px var(--vscode-widget-shadow); } .innerCell { @@ -421,8 +379,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; height: 100%; width: 100%; background-color: none; - border-top: $row-border; - border-bottom: $row-border; } } @@ -445,6 +401,11 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; font-size: 0.8rem; line-height: 2rem; align-items: center; + + &:hover { + background-color: $hover-background-color; + } + &:first-child { .innerCell { padding-left: $edge-padding; @@ -461,6 +422,11 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; display: flex; flex-flow: row nowrap; text-align: left; + + &:hover { + background-color: $hover-background-color; + } + .innerCell { justify-content: flex-start; @@ -511,14 +477,14 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; .placeholderHeaderCell { background-color: $header-bg-color; - border-right: 2px solid $header-border-color; + border-right: 1px solid $header-border-color; } .headerCell { @extend .placeholderHeaderCell; color: $header-fg-color; text-align: center; - border-bottom: 2px solid $header-border-color; + border-bottom: 1px solid $header-border-color; padding: 0.31rem $cell-padding; &.leafHeader { @@ -570,7 +536,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; } .columnResizer { - right: -5px; + right: -4px; width: 10px; height: 500%; position: absolute; @@ -679,10 +645,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; position: sticky; top: 0; z-index: 4; - - &.headWithShadow { - box-shadow: 0 5px 8px -2px var(--vscode-widget-shadow); - } } .tableIndicators { diff --git a/webview/src/shared/variables.scss b/webview/src/shared/variables.scss index 8425558a32..8d02caac70 100644 --- a/webview/src/shared/variables.scss +++ b/webview/src/shared/variables.scss @@ -13,10 +13,10 @@ $error-color: var(--vscode-errorForeground); $row-bg-color: $bg-color; $header-fg-color: $fg-color; $row-bg-alt-color: var(--vscode-sideBar-background); -$row-bg-selected-color: var(--vscode-list-activeSelectionBackground); +$row-bg-selected-color: var(--vscode-list-hoverBackground); $row-border-selected-color: var(--vscode-list-focusOutline); -$header-bg-color: var(--vscode-dropdown-background); -$header-border-color: var(--vscode-tree-tableColumnsBorder); +$header-bg-color: $bg-color; +$header-border-color: $border-color; $meta-cell-color: var(--vscode-descriptionForeground); $hover-background-color: var(--vscode-list-hoverBackground); From 1f68611b7e98e3b45b76a0b43dd628e2d468004b Mon Sep 17 00:00:00 2001 From: julieg18 Date: Tue, 2 Aug 2022 15:28:17 -0500 Subject: [PATCH 02/13] Fix plots block bg color --- webview/src/plots/components/ribbon/styles.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webview/src/plots/components/ribbon/styles.module.scss b/webview/src/plots/components/ribbon/styles.module.scss index 573289e3fa..00c6f85615 100644 --- a/webview/src/plots/components/ribbon/styles.module.scss +++ b/webview/src/plots/components/ribbon/styles.module.scss @@ -10,7 +10,7 @@ .block { border-left-style: solid; border-left-width: 3px; - background-color: $header-bg-color; + background-color: var(--vscode-dropdown-background); color: $fg-color; display: inline-flex; justify-content: space-between; From f518d9f115f250a11fbe52a107160abaf2b27d81 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Wed, 3 Aug 2022 07:57:11 -0500 Subject: [PATCH 03/13] Refactor * keep all colors in variables.scss * remove unneeded cx() --- webview/src/experiments/components/table/TableHead.tsx | 3 +-- webview/src/experiments/components/table/styles.module.scss | 6 +++--- webview/src/shared/variables.scss | 2 ++ 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/webview/src/experiments/components/table/TableHead.tsx b/webview/src/experiments/components/table/TableHead.tsx index 3596b53fd6..1da1f769dd 100644 --- a/webview/src/experiments/components/table/TableHead.tsx +++ b/webview/src/experiments/components/table/TableHead.tsx @@ -1,5 +1,4 @@ import { Experiment } from 'dvc/src/experiments/webview/contract' -import cx from 'classnames' import React, { DragEvent, useRef, useEffect } from 'react' import { useSelector } from 'react-redux' import { HeaderGroup, TableInstance } from 'react-table' @@ -102,7 +101,7 @@ export const TableHead = ({ }, [setTableHeadHeight]) return ( -
+
{headerGroups.map(headerGroup => ( // eslint-disable-next-line react/jsx-key diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss index c6b107f549..9d2127a2d4 100644 --- a/webview/src/experiments/components/table/styles.module.scss +++ b/webview/src/experiments/components/table/styles.module.scss @@ -17,7 +17,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; left: 0; display: inline-block; position: absolute; - border: 2px solid var(--vscode-descriptionForeground); + border: 2px solid $watermark-color; opacity: 0.5; border-top: unset; border-left: unset; @@ -278,7 +278,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; .table.withExpColumnShadow { .tr:not(.rowSelected) > *:first-child:after { - box-shadow: 3px 0px 3px var(--vscode-widget-shadow); + box-shadow: 3px 0px 3px $shadow; } } @@ -365,7 +365,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; background-color: $row-bg-color; &.withShadow { - box-shadow: 0 5px 8px -2px var(--vscode-widget-shadow); + box-shadow: 0 5px 8px -2px $shadow; } .innerCell { diff --git a/webview/src/shared/variables.scss b/webview/src/shared/variables.scss index 8d02caac70..511ce1166b 100644 --- a/webview/src/shared/variables.scss +++ b/webview/src/shared/variables.scss @@ -24,3 +24,5 @@ $accent-color: var(--button-primary-background); $indicator-badge-foreground: var(--vscode-activityBarBadge-foreground); $indicator-badge-background: var(--vscode-activityBarBadge-background); + +$shadow: var(--vscode-widget-shadow); From 3dd877ee5399d3f4f59a51a9b6ccb27d3ed39097 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Wed, 3 Aug 2022 07:58:44 -0500 Subject: [PATCH 04/13] Update table border width --- webview/src/experiments/components/table/styles.module.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss index 9d2127a2d4..15693f7d12 100644 --- a/webview/src/experiments/components/table/styles.module.scss +++ b/webview/src/experiments/components/table/styles.module.scss @@ -3,7 +3,7 @@ @import '../../../shared/variables.scss'; $nested-row-padding: 1.35rem; -$row-border: 1px solid $border-color; +$row-border: 0.5px solid $border-color; $edge-padding: 0.8rem; $cell-padding: 0.5rem; @@ -477,14 +477,14 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; .placeholderHeaderCell { background-color: $header-bg-color; - border-right: 1px solid $header-border-color; + border-right: 0.5px solid $header-border-color; } .headerCell { @extend .placeholderHeaderCell; color: $header-fg-color; text-align: center; - border-bottom: 1px solid $header-border-color; + border-bottom: 0.5px solid $header-border-color; padding: 0.31rem $cell-padding; &.leafHeader { From 18f2383c7ebb7890983ed32f12f2938892beeb20 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Wed, 3 Aug 2022 08:02:22 -0500 Subject: [PATCH 05/13] Refactor --- webview/src/plots/components/ribbon/styles.module.scss | 2 +- webview/src/shared/variables.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/webview/src/plots/components/ribbon/styles.module.scss b/webview/src/plots/components/ribbon/styles.module.scss index 00c6f85615..1bd59ec8b2 100644 --- a/webview/src/plots/components/ribbon/styles.module.scss +++ b/webview/src/plots/components/ribbon/styles.module.scss @@ -10,7 +10,7 @@ .block { border-left-style: solid; border-left-width: 3px; - background-color: var(--vscode-dropdown-background); + background-color: $plot-block-bg-color; color: $fg-color; display: inline-flex; justify-content: space-between; diff --git a/webview/src/shared/variables.scss b/webview/src/shared/variables.scss index 511ce1166b..4a8e0e28d8 100644 --- a/webview/src/shared/variables.scss +++ b/webview/src/shared/variables.scss @@ -26,3 +26,5 @@ $indicator-badge-foreground: var(--vscode-activityBarBadge-foreground); $indicator-badge-background: var(--vscode-activityBarBadge-background); $shadow: var(--vscode-widget-shadow); + +$plot-block-bg-color: var(--vscode-dropdown-background); From e91b097eebb3239ac720fdc9677176f4dc1c24e6 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Wed, 3 Aug 2022 09:49:32 -0500 Subject: [PATCH 06/13] Refactor * keep hooks at top --- .../experiments/components/table/TableHead.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/webview/src/experiments/components/table/TableHead.tsx b/webview/src/experiments/components/table/TableHead.tsx index 1da1f769dd..9033d47e73 100644 --- a/webview/src/experiments/components/table/TableHead.tsx +++ b/webview/src/experiments/components/table/TableHead.tsx @@ -42,6 +42,14 @@ export const TableHead = ({ const fullColumnOrder = useRef() const draggingIds = useRef() + const wrapper = useRef(null) + + useEffect(() => { + const wrapperHeight = wrapper.current?.getBoundingClientRect().height + if (wrapperHeight) { + setTableHeadHeight(wrapperHeight) + } + }, [setTableHeadHeight]) const onDragStart: DragFunction = ({ currentTarget }) => { const displacerHeader = allHeaders.find( @@ -91,15 +99,6 @@ export const TableHead = ({ const firstExpColumnCellId = headerGroups[0].headers[0].id - const wrapper = useRef(null) - - useEffect(() => { - const wrapperHeight = wrapper.current?.getBoundingClientRect().height - if (wrapperHeight) { - setTableHeadHeight(wrapperHeight) - } - }, [setTableHeadHeight]) - return (
From 47d8176d097e45c043e9b556623342c627bce7dc Mon Sep 17 00:00:00 2001 From: julieg18 Date: Wed, 3 Aug 2022 15:45:44 -0500 Subject: [PATCH 07/13] Add on body column hover styles --- .../src/experiments/components/table/Cell.tsx | 29 ++++++++++++++----- .../components/table/focusedColumnSlice.ts | 15 ++++++++++ .../components/table/styles.module.scss | 7 +++++ webview/src/experiments/store.ts | 2 ++ 4 files changed, 46 insertions(+), 7 deletions(-) create mode 100644 webview/src/experiments/components/table/focusedColumnSlice.ts diff --git a/webview/src/experiments/components/table/Cell.tsx b/webview/src/experiments/components/table/Cell.tsx index 9cd282e939..83430b796d 100644 --- a/webview/src/experiments/components/table/Cell.tsx +++ b/webview/src/experiments/components/table/Cell.tsx @@ -1,14 +1,17 @@ import React from 'react' import cx from 'classnames' import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react' +import { useDispatch, useSelector } from 'react-redux' import { ErrorTooltip } from './Errors' import { Indicator, IndicatorWithJustTheCounter } from './Indicators' import styles from './styles.module.scss' import { CellProp, RowProp } from './interfaces' +import { changeFocusedColumnId } from './focusedColumnSlice' import { clickAndEnterProps } from '../../../util/props' import { Clock, StarFull, StarEmpty } from '../../../shared/components/icons' import { pluralize } from '../../../util/strings' import { cellHasChanges } from '../../util/buildDynamicColumns' +import { ExperimentsState } from '../../store' const RowExpansionButton: React.FC = ({ row }) => row.canExpand ? ( @@ -134,7 +137,11 @@ export const FirstCell: React.FC< toggleExperiment: () => void } > = ({ cell, bulletColor, toggleExperiment, ...rowActionsProps }) => { - const { row, isPlaceholder } = cell + const dispatch = useDispatch() + const focusedColumn = useSelector( + (state: ExperimentsState) => state.focusedColumn + ) + const { row, isPlaceholder, column } = cell const { original: { error, queued } } = row @@ -146,12 +153,13 @@ export const FirstCell: React.FC< return (
dispatch(changeFocusedColumnId(column.id))} + onMouseLeave={() => dispatch(changeFocusedColumnId(''))} >
@@ -194,16 +202,23 @@ export const CellWrapper: React.FC< children?: React.ReactNode } > = ({ cell, cellId, changes }) => { + const dispatch = useDispatch() + const focusedColumn = useSelector( + (state: ExperimentsState) => state.focusedColumn + ) return (
dispatch(changeFocusedColumnId(cell.column.id))} + onMouseLeave={() => dispatch(changeFocusedColumnId(''))} > {cell.render('Cell')}
diff --git a/webview/src/experiments/components/table/focusedColumnSlice.ts b/webview/src/experiments/components/table/focusedColumnSlice.ts new file mode 100644 index 0000000000..265df7baa8 --- /dev/null +++ b/webview/src/experiments/components/table/focusedColumnSlice.ts @@ -0,0 +1,15 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit' + +export const focusedColumnSlice = createSlice({ + initialState: '', + name: 'focusedColumnId', + reducers: { + changeFocusedColumnId: (_, action: PayloadAction) => { + return action.payload + } + } +}) + +export const { changeFocusedColumnId } = focusedColumnSlice.actions + +export default focusedColumnSlice.reducer diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss index 15693f7d12..fc120e81a0 100644 --- a/webview/src/experiments/components/table/styles.module.scss +++ b/webview/src/experiments/components/table/styles.module.scss @@ -401,6 +401,13 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; font-size: 0.8rem; line-height: 2rem; align-items: center; + border-right: $row-border; + border-left: $row-border; + border-color: transparent; + + &.withCellXBorder { + border-color: $border-color; + } &:hover { background-color: $hover-background-color; diff --git a/webview/src/experiments/store.ts b/webview/src/experiments/store.ts index 754b48e041..874f4b58df 100644 --- a/webview/src/experiments/store.ts +++ b/webview/src/experiments/store.ts @@ -1,10 +1,12 @@ import { configureStore } from '@reduxjs/toolkit' import tableDataReducer from './components/table/tableDataSlice' +import FocusedColumnReducer from './components/table/focusedColumnSlice' import headersReducer from './components/table/headersSlice' import dragAndDropReducer from '../shared/components/dragDrop/dragDropSlice' export const experimentsReducers = { dragAndDrop: dragAndDropReducer, + focusedColumn: FocusedColumnReducer, headers: headersReducer, tableData: tableDataReducer } From a70ea7ee811260d2f590468e34bb88e94e34934d Mon Sep 17 00:00:00 2001 From: julieg18 Date: Wed, 3 Aug 2022 16:04:21 -0500 Subject: [PATCH 08/13] Remove updated selected row bg color --- webview/src/shared/variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webview/src/shared/variables.scss b/webview/src/shared/variables.scss index 4a8e0e28d8..3aed1d1b0e 100644 --- a/webview/src/shared/variables.scss +++ b/webview/src/shared/variables.scss @@ -13,7 +13,7 @@ $error-color: var(--vscode-errorForeground); $row-bg-color: $bg-color; $header-fg-color: $fg-color; $row-bg-alt-color: var(--vscode-sideBar-background); -$row-bg-selected-color: var(--vscode-list-hoverBackground); +$row-bg-selected-color: var(--vscode-list-activeSelectionBackground); $row-border-selected-color: var(--vscode-list-focusOutline); $header-bg-color: $bg-color; $header-border-color: $border-color; From d99cd7c205fa8db06e9d3f43108a764d33646d85 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Wed, 3 Aug 2022 16:06:08 -0500 Subject: [PATCH 09/13] Fix buggy hover style on experiment cell --- .../components/table/styles.module.scss | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss index fc120e81a0..51aa74faf4 100644 --- a/webview/src/experiments/components/table/styles.module.scss +++ b/webview/src/experiments/components/table/styles.module.scss @@ -430,8 +430,24 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; flex-flow: row nowrap; text-align: left; - &:hover { + &:before { + position: absolute; + content: ''; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: -1; background-color: $hover-background-color; + opacity: 0; + } + + &:hover { + background-color: $row-bg-color; + + &:before { + opacity: 1; + } } .innerCell { From 10949b60d06c4ba25107f26675d9d71e4256cf07 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Thu, 4 Aug 2022 16:25:39 -0500 Subject: [PATCH 10/13] Update table colors --- .../experiments/components/table/styles.module.scss | 10 ++++++---- webview/src/shared/variables.scss | 4 ++-- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss index 51aa74faf4..2031e743c1 100644 --- a/webview/src/experiments/components/table/styles.module.scss +++ b/webview/src/experiments/components/table/styles.module.scss @@ -3,7 +3,7 @@ @import '../../../shared/variables.scss'; $nested-row-padding: 1.35rem; -$row-border: 0.5px solid $border-color; +$row-border: 1px solid $border-color; $edge-padding: 0.8rem; $cell-padding: 0.5rem; @@ -314,7 +314,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; } &:not(.rowSelected) > *:first-child:after { - right: -2px; + right: -1px; } &:last-child, @@ -395,12 +395,14 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; } .th { height: auto; + background-color: $header-bg-color; } .td { height: auto; font-size: 0.8rem; line-height: 2rem; align-items: center; + background-color: $row-bg-color; border-right: $row-border; border-left: $row-border; border-color: transparent; @@ -500,14 +502,14 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; .placeholderHeaderCell { background-color: $header-bg-color; - border-right: 0.5px solid $header-border-color; + border-right: 1px solid $header-border-color; } .headerCell { @extend .placeholderHeaderCell; color: $header-fg-color; text-align: center; - border-bottom: 0.5px solid $header-border-color; + border-bottom: 1px solid $header-border-color; padding: 0.31rem $cell-padding; &.leafHeader { diff --git a/webview/src/shared/variables.scss b/webview/src/shared/variables.scss index 3aed1d1b0e..8b381ab3b8 100644 --- a/webview/src/shared/variables.scss +++ b/webview/src/shared/variables.scss @@ -1,9 +1,9 @@ $fg-color: var(--vscode-editor-foreground); -$bg-color: var(--vscode-editor-background); +$bg-color: var(--vscode-editorWidget-background); $bullet-size: 9px; $watermark-color: var(--vscode-descriptionForeground); -$border-color: var(--vscode-dropdown-border); +$border-color: var(--vscode-editorWidget-border); $metrics-color: var(--vscode-dvc-metrics); $params-color: var(--vscode-dvc-params); $deps-color: var(--vscode-dvc-deps); From e1be2007761d5bc44482228fdc191d81bc3c2f48 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Tue, 9 Aug 2022 18:45:21 -0500 Subject: [PATCH 11/13] Revert "Add on body column hover styles" This reverts commit 47d8176d097e45c043e9b556623342c627bce7dc. --- .../src/experiments/components/table/Cell.tsx | 29 +++++-------------- .../components/table/focusedColumnSlice.ts | 15 ---------- .../components/table/styles.module.scss | 8 ----- webview/src/experiments/store.ts | 2 -- 4 files changed, 7 insertions(+), 47 deletions(-) delete mode 100644 webview/src/experiments/components/table/focusedColumnSlice.ts diff --git a/webview/src/experiments/components/table/Cell.tsx b/webview/src/experiments/components/table/Cell.tsx index 83430b796d..9cd282e939 100644 --- a/webview/src/experiments/components/table/Cell.tsx +++ b/webview/src/experiments/components/table/Cell.tsx @@ -1,17 +1,14 @@ import React from 'react' import cx from 'classnames' import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react' -import { useDispatch, useSelector } from 'react-redux' import { ErrorTooltip } from './Errors' import { Indicator, IndicatorWithJustTheCounter } from './Indicators' import styles from './styles.module.scss' import { CellProp, RowProp } from './interfaces' -import { changeFocusedColumnId } from './focusedColumnSlice' import { clickAndEnterProps } from '../../../util/props' import { Clock, StarFull, StarEmpty } from '../../../shared/components/icons' import { pluralize } from '../../../util/strings' import { cellHasChanges } from '../../util/buildDynamicColumns' -import { ExperimentsState } from '../../store' const RowExpansionButton: React.FC = ({ row }) => row.canExpand ? ( @@ -137,11 +134,7 @@ export const FirstCell: React.FC< toggleExperiment: () => void } > = ({ cell, bulletColor, toggleExperiment, ...rowActionsProps }) => { - const dispatch = useDispatch() - const focusedColumn = useSelector( - (state: ExperimentsState) => state.focusedColumn - ) - const { row, isPlaceholder, column } = cell + const { row, isPlaceholder } = cell const { original: { error, queued } } = row @@ -153,13 +146,12 @@ export const FirstCell: React.FC< return (
dispatch(changeFocusedColumnId(column.id))} - onMouseLeave={() => dispatch(changeFocusedColumnId(''))} >
@@ -202,23 +194,16 @@ export const CellWrapper: React.FC< children?: React.ReactNode } > = ({ cell, cellId, changes }) => { - const dispatch = useDispatch() - const focusedColumn = useSelector( - (state: ExperimentsState) => state.focusedColumn - ) return (
dispatch(changeFocusedColumnId(cell.column.id))} - onMouseLeave={() => dispatch(changeFocusedColumnId(''))} > {cell.render('Cell')}
diff --git a/webview/src/experiments/components/table/focusedColumnSlice.ts b/webview/src/experiments/components/table/focusedColumnSlice.ts deleted file mode 100644 index 265df7baa8..0000000000 --- a/webview/src/experiments/components/table/focusedColumnSlice.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { createSlice, PayloadAction } from '@reduxjs/toolkit' - -export const focusedColumnSlice = createSlice({ - initialState: '', - name: 'focusedColumnId', - reducers: { - changeFocusedColumnId: (_, action: PayloadAction) => { - return action.payload - } - } -}) - -export const { changeFocusedColumnId } = focusedColumnSlice.actions - -export default focusedColumnSlice.reducer diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss index 2031e743c1..fadc15317f 100644 --- a/webview/src/experiments/components/table/styles.module.scss +++ b/webview/src/experiments/components/table/styles.module.scss @@ -402,14 +402,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; font-size: 0.8rem; line-height: 2rem; align-items: center; - background-color: $row-bg-color; - border-right: $row-border; - border-left: $row-border; - border-color: transparent; - - &.withCellXBorder { - border-color: $border-color; - } &:hover { background-color: $hover-background-color; diff --git a/webview/src/experiments/store.ts b/webview/src/experiments/store.ts index 874f4b58df..754b48e041 100644 --- a/webview/src/experiments/store.ts +++ b/webview/src/experiments/store.ts @@ -1,12 +1,10 @@ import { configureStore } from '@reduxjs/toolkit' import tableDataReducer from './components/table/tableDataSlice' -import FocusedColumnReducer from './components/table/focusedColumnSlice' import headersReducer from './components/table/headersSlice' import dragAndDropReducer from '../shared/components/dragDrop/dragDropSlice' export const experimentsReducers = { dragAndDrop: dragAndDropReducer, - focusedColumn: FocusedColumnReducer, headers: headersReducer, tableData: tableDataReducer } From 525ffa32b74427a4506f4e8b823b6fca4d86a007 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Tue, 9 Aug 2022 19:34:11 -0500 Subject: [PATCH 12/13] Adjust table colors and add row hover styles --- .../components/table/styles.module.scss | 34 ++++++------------- webview/src/shared/variables.scss | 6 ++-- 2 files changed, 14 insertions(+), 26 deletions(-) diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss index fadc15317f..b1c43d349b 100644 --- a/webview/src/experiments/components/table/styles.module.scss +++ b/webview/src/experiments/components/table/styles.module.scss @@ -253,6 +253,16 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; .tr { position: relative; + &:hover:not(.rowSelected) { + .td { + background-color: $row-hover-background-color; + + &:hover { + background-color: $cell-hover-background-color; + } + } + } + &:not(.rowSelected) { & > *:first-child { position: sticky; @@ -403,10 +413,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; line-height: 2rem; align-items: center; - &:hover { - background-color: $hover-background-color; - } - &:first-child { .innerCell { padding-left: $edge-padding; @@ -424,26 +430,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding; flex-flow: row nowrap; text-align: left; - &:before { - position: absolute; - content: ''; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: -1; - background-color: $hover-background-color; - opacity: 0; - } - - &:hover { - background-color: $row-bg-color; - - &:before { - opacity: 1; - } - } - .innerCell { justify-content: flex-start; diff --git a/webview/src/shared/variables.scss b/webview/src/shared/variables.scss index 8b381ab3b8..57eb32839a 100644 --- a/webview/src/shared/variables.scss +++ b/webview/src/shared/variables.scss @@ -1,9 +1,9 @@ $fg-color: var(--vscode-editor-foreground); -$bg-color: var(--vscode-editorWidget-background); +$bg-color: var(--vscode-editor-background); $bullet-size: 9px; $watermark-color: var(--vscode-descriptionForeground); -$border-color: var(--vscode-editorWidget-border); +$border-color: var(--checkbox-border); $metrics-color: var(--vscode-dvc-metrics); $params-color: var(--vscode-dvc-params); $deps-color: var(--vscode-dvc-deps); @@ -20,6 +20,8 @@ $header-border-color: $border-color; $meta-cell-color: var(--vscode-descriptionForeground); $hover-background-color: var(--vscode-list-hoverBackground); +$row-hover-background-color: var(--vscode-list-hoverBackground); +$cell-hover-background-color: $border-color; $accent-color: var(--button-primary-background); $indicator-badge-foreground: var(--vscode-activityBarBadge-foreground); From a542c94226fd26143d0fc27c011befeb983c1998 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Mon, 15 Aug 2022 09:49:04 -0500 Subject: [PATCH 13/13] Update cell hover background color --- webview/src/shared/variables.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webview/src/shared/variables.scss b/webview/src/shared/variables.scss index 57eb32839a..9781fdb36e 100644 --- a/webview/src/shared/variables.scss +++ b/webview/src/shared/variables.scss @@ -21,7 +21,8 @@ $meta-cell-color: var(--vscode-descriptionForeground); $hover-background-color: var(--vscode-list-hoverBackground); $row-hover-background-color: var(--vscode-list-hoverBackground); -$cell-hover-background-color: $border-color; +$cell-hover-background-color: var(--vscode-dropdown-background); + $accent-color: var(--button-primary-background); $indicator-badge-foreground: var(--vscode-activityBarBadge-foreground);