Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update table indicators and chevrons/stars styles #2367

Merged
merged 3 commits into from
Sep 11, 2022
Merged

Update table indicators and chevrons/stars styles #2367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8746f58
Update table indicators and chevrons/stars styles
julieg18 Sep 9, 2022
85a76a1
Add missing chevron css rule
julieg18 Sep 9, 2022
29e6fc9
Merge branch 'main' into row-styles-followup
julieg18 Sep 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 11 additions & 23 deletions webview/src/experiments/components/table/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
left: 0;
display: inline-block;
position: absolute;
border: 2px solid $watermark-color;
opacity: 0.5;
border: 2px solid $row-action-icon-color;
border-top: unset;
border-left: unset;
transition: transform 0.2s, right 0.2s, bottom 0.2s;
Expand Down Expand Up @@ -338,10 +337,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
background-color: $row-hover-background-color;
}

.indicatorCount {
border-color: $row-hover-background-color;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@maxagin, I took off the border of the indicators since VSCode doesn't have one for their indicators, but if we want to keep that effect, I don't see an issue with adding it back :)

Figma:
image

}

.td:hover,
.td:hover + .td {
border-left-color: $border-color;
Expand Down Expand Up @@ -379,19 +374,9 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
}
}

.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;
border-color: $row-action-selected-icon-color;
}
}
}
Expand Down Expand Up @@ -571,7 +556,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
align-items: center;
justify-content: center;
width: 14px;
opacity: 0.4;
cursor: pointer;

&[aria-checked='true'] {
Expand Down Expand Up @@ -621,6 +605,14 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
}
}

.experimentCell .rowActions .starSwitch svg {
fill: $row-action-icon-color;

.rowSelected & {
fill: $row-action-selected-icon-color;
}
}

.webviewHeader {
display: flex;
justify-content: space-between;
Expand Down Expand Up @@ -820,17 +812,13 @@ $badge-size: 0.85rem;
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 {
Expand Down Expand Up @@ -859,7 +847,7 @@ $badge-size: 0.85rem;
.indicatorCount {
display: none;
.experimentGroup & {
display: flex;
display: block;
&[aria-label='0'] {
display: none;
}
Expand Down
16 changes: 8 additions & 8 deletions webview/src/shared/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,14 @@ $row-hover-background-color: var(--vscode-list-hoverBackground);

$accent-color: var(--button-primary-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);
$indicator-badge-background: var(--vscode-activityBarBadge-background);
$indicator-badge-foreground: var(--vscode-activityBarBadge-foreground);

$row-action-icon-color: var(--vscode-icon-foreground);
$row-action-selected-icon-color: var(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

--vscode-icon-foreground appears to be the variable used for tree chevrons!

Also, I realized that the default theme trees don't actually have their chevrons stay the same color when selected. Looks like they actually change their color based on the variable --vscode-list-activeSelectionIconForeground. The light theme and a couple other themes use this variable as well:

image

image

Matching how vscode themes work, I had our table update its chevrons if it's selected with --vscode-list-activeSelectionIconForeground, defaulting to the --vscode-icon-foreground since not all themes use the active variable.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the text also changes color.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! Probably also relies on some kind of active variable 🤔. Can look into it and open a pr at a later date!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙏🏻

--vscode-list-activeSelectionIconForeground,
var(--vscode-icon-foreground)
);

$shadow: var(--vscode-widget-shadow);

Expand Down