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

A few CSS fixes for regular-table in shadow DOM #2526

Merged
merged 7 commits into from
Feb 15, 2024
+212 −152
Merged

A few CSS fixes for regular-table in shadow DOM #2526

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
23ac709
Move regular-table theme variables to higher-scoped rule
tomjakubowski Feb 5, 2024
4d6b487
Fix CSS bug in mitered headers
tomjakubowski Feb 5, 2024
057845f
Fix related CSS bugs in shadow dom
tomjakubowski Feb 5, 2024
ce9217d
Fix missing border when sidebar open
tomjakubowski Feb 6, 2024
bddc5b6
Clarify TODOs
tomjakubowski Feb 6, 2024
e644cef
datagrid: guard shadow DOM behind feature detection
tomjakubowski Feb 6, 2024
f0e7a60
Handle light/shadow DOM split more robustly
tomjakubowski Feb 6, 2024
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
6 changes: 5 additions & 1 deletion packages/perspective-viewer-datagrid/src/js/custom_elements/datagrid.js
View file
Original file line number Diff line number Diff line change
@@ -137,6 +137,10 @@ export class HTMLPerspectiveViewerDatagridPluginElement extends HTMLElement {
this.regular_table.clear();
}

static renderTarget = "shadow";
static renderTarget =
window.CSS?.supports &&
window.CSS?.supports("selector(:host-context(foo))")
? "shadow"
: "light";
static #sheet;
}
16 changes: 12 additions & 4 deletions packages/perspective-viewer-datagrid/src/less/mitered-headers.less
View file
Original file line number Diff line number Diff line change
@@ -37,10 +37,18 @@
0px 10px 0 -9px var(--inactive--border-color, #8b868045);
}

perspective-viewer[settings]
tr.rt-autosize
.psp-header-leaf.psp-header-border:not(.psp-menu-enabled) {
box-shadow: 1px 0px var(--inactive--border-color, #8b868045);
@mixin disabled-menu-funky-box-shadow {
tr.rt-autosize .psp-header-leaf.psp-header-border:not(.psp-menu-enabled) {
box-shadow: 1px 0px var(--inactive--border-color, #8b868045);
}
}

perspective-viewer[settings] {
@include disabled-menu-funky-box-shadow;
}

:host-context(perspective-viewer[settings]) {
@include disabled-menu-funky-box-shadow;
}

.psp-header-leaf.psp-header-border {
57 changes: 47 additions & 10 deletions packages/perspective-viewer-datagrid/src/less/regular_table.less
View file
Original file line number Diff line number Diff line change
@@ -27,8 +27,15 @@
mask-size: cover;
}

perspective-viewer:not([settings]),
perspective-viewer:not([settings]) {
@include settings-not-open;
}

:host-context(perspective-viewer:not([settings])) {
@include settings-not-open;
}

@mixin settings-not-open {
regular-table table tr.rt-autosize + tr th {
height: 0px;
span {
@@ -37,8 +44,7 @@ perspective-viewer:not([settings]),
}
}

perspective-viewer[settings],
:host-context(perspective-viewer[settings]) {
@mixin settings-open {
.psp-menu-enabled {
padding: 0 6px;
font-size: 8px;
@@ -81,9 +87,27 @@ perspective-viewer[settings],
}
}

perspective-viewer regular-table table thead tr:last-child th {
border-bottom-width: 1px;
border-bottom-color: var(--inactive--border-color, #8b868045);
perspective-viewer[settings] {
@include settings-open;
}

:host-context(perspective-viewer[settings]) {
@include settings-open;
}

@mixin viewer-table-styles {
regular-table table thead tr:last-child th {
border-bottom-width: 1px;
border-bottom-color: var(--inactive--border-color, #8b868045);
}
}

perspective-viewer {
@include viewer-table-styles;
}

:host-context(perspective-viewer) {
@include viewer-table-styles;
}

.psp-sort-enabled:hover {
@@ -120,8 +144,16 @@ td:focus {
outline-width: 1px;
}

perspective-viewer.dragging regular-table {
pointer-events: none;
@mixin table-no-dragging {
regular-table {
pointer-events: none;
}
}
perspective-viewer.dragging {
@include table-no-dragging;
}
:host-context(perspective-viewer.dragging) {
@include table-no-dragging;
}

.psp-header-border:last-child {
@@ -282,12 +314,17 @@ regular-table table {
// until the drawing is done. However, this causes the datagrid to draw its
// _first_ frame as if its in the wrong state, as it detects sidepanel state
// via HTML attribute checking.
perspective-viewer:not([settings]),
:host-context(:not([settings])) {
@mixin design-slash-architecture-bug {
regular-table #psp-column-edit-buttons:after {
content: none;
}
}
perspective-viewer:not([settings]) {
@include design-slash-architecture-bug;
}
:host-context(perspective-viewer:not([settings])) {
@include design-slash-architecture-bug;
}

// Style the last row of the `<thead>` so that is has a bottom border.
regular-table table thead tr:last-child:after {
8 changes: 3 additions & 5 deletions rust/perspective-viewer/src/themes/dracula.less
View file
Original file line number Diff line number Diff line change
@@ -67,10 +67,8 @@ perspective-dropdown[theme="Dracula"] {
}

@mixin perspective-viewer-dracula--datagrid {
regular-table {
--rt-pos-cell--color: var(--theme-blue);
--rt-neg-cell--color: var(--theme-red);
}
--rt-pos-cell--color: var(--theme-blue);
--rt-neg-cell--color: var(--theme-red);
}

@mixin perspective-viewer-dracula--d3fc {
@@ -100,4 +98,4 @@ perspective-dropdown[theme="Dracula"] {
var(--theme-bg0),
var(--theme-blue)
) !important;
}
}
8 changes: 3 additions & 5 deletions rust/perspective-viewer/src/themes/gruvbox-dark.less
View file
Original file line number Diff line number Diff line change
@@ -75,10 +75,8 @@ perspective-dropdown[theme="Gruvbox Dark"] {
}

@mixin perspective-viewer-gruvbox-dark--datagrid {
regular-table {
--rt-pos-cell--color: var(--theme-alt-blue);
--rt-neg-cell--color: var(--theme-alt-red);
}
--rt-pos-cell--color: var(--theme-alt-blue);
--rt-neg-cell--color: var(--theme-alt-red);
}

@mixin perspective-viewer-gruvbox-dark--d3fc {
@@ -115,4 +113,4 @@ perspective-dropdown[theme="Gruvbox Dark"] {
var(--theme-blue),
var(--theme-alt-blue)
) !important;
}
}
12 changes: 4 additions & 8 deletions rust/perspective-viewer/src/themes/gruvbox.less
View file
Original file line number Diff line number Diff line change
@@ -56,8 +56,6 @@ perspective-viewer[theme="Gruvbox Light"] {
// --gruvbox-light-aqua: #8ec07c;
// --gruvbox-light-orange: #fe8019;



@include perspective-viewer-pro;
@include perspective-viewer-gruvbox-light--colors;
@include perspective-viewer-gruvbox-light--animation;
@@ -100,7 +98,7 @@ perspective-dropdown[theme="Gruvbox Light"] {
--theme-alt-purple: #8f3f71;
--theme-alt-aqua: #427b58;
--theme-alt-orange: #af3a03;

color: var(--theme-fg1);
background-color: var(--theme-bg1);
--icon--color: var(--theme-fg0);
@@ -113,10 +111,8 @@ perspective-dropdown[theme="Gruvbox Light"] {
}

@mixin perspective-viewer-gruvbox-light--datagrid {
regular-table {
--rt-pos-cell--color: var(--theme-blue);
--rt-neg-cell--color: var(--theme-red);
}
--rt-pos-cell--color: var(--theme-blue);
--rt-neg-cell--color: var(--theme-red);
}

@mixin perspective-viewer-gruvbox-light--d3fc {
@@ -153,4 +149,4 @@ perspective-dropdown[theme="Gruvbox Light"] {
var(--theme-blue),
var(--theme-alt-blue)
) !important;
}
}
30 changes: 17 additions & 13 deletions rust/perspective-viewer/src/themes/monokai.less
View file
Original file line number Diff line number Diff line change
@@ -60,17 +60,19 @@ perspective-string-column-style[theme="Monokai"] {
}

@mixin perspective-viewer-monokai--datagrid {
regular-table {
--rt-pos-cell--color: #78dce8 !important;
--rt-neg-cell--color: #ff6188 !important;
--rt--border-color: #444444;
}
--rt-pos-cell--color: #78dce8 !important;
--rt-neg-cell--color: #ff6188 !important;
--rt--border-color: #444444;

// FIXME: broken in shadow DOM. Can be fixed with a new custom property allowing empty header cell backgrounds
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I took a stab at this, but I couldn't work out how to declare the "default" value for the CSS custom property so that the theme override's was more specific than it

// to be styled
regular-table table tbody th:empty {
background: linear-gradient(to right,
transparent 9px,
#444444 10px,
transparent 11px);
background: linear-gradient(
to right,
transparent 9px,
#444444 10px,
transparent 11px
);
}
}

@@ -97,7 +99,9 @@ perspective-string-column-style[theme="Monokai"] {

--d3fc-negative--gradient: linear-gradient(#272822 0%, #ff6188 100%);
--d3fc-positive--gradient: linear-gradient(#272822 0%, #78dce8 100%);
--d3fc-full--gradient: linear-gradient(#ff6188 0%,
#272822 50%,
#78dce8 100%);
}
--d3fc-full--gradient: linear-gradient(
#ff6188 0%,
#272822 50%,
#78dce8 100%
);
}
20 changes: 9 additions & 11 deletions rust/perspective-viewer/src/themes/pro-dark.less
View file
Original file line number Diff line number Diff line change
@@ -95,16 +95,12 @@ perspective-string-column-style[theme="Pro Dark"] {
--map-category-8: rgb(221, 99, 103);
--map-category-9: rgb(120, 104, 206);
--map-category-10: rgb(23, 166, 123);
--map-gradient: linear-gradient(#dd6367 0%,
#242526 50%,
#3289c8 100%);
--map-gradient: linear-gradient(#dd6367 0%, #242526 50%, #3289c8 100%);
}

@mixin perspective-viewer-pro-dark--datagrid {
regular-table {
--rt-pos-cell--color: #7dc3f0;
--rt-neg-cell--color: #ff9485;
}
--rt-pos-cell--color: #7dc3f0;
--rt-neg-cell--color: #ff9485;
}

@mixin perspective-viewer-pro-dark--d3fc {
@@ -131,10 +127,12 @@ perspective-string-column-style[theme="Pro Dark"] {
--d3fc-series-9: rgb(120, 104, 206);
--d3fc-series-10: rgb(23, 166, 123);

--d3fc-full--gradient: linear-gradient(#dd6367 0%,
#242526 50%,
#3289c8 100%);
--d3fc-full--gradient: linear-gradient(
#dd6367 0%,
#242526 50%,
#3289c8 100%
);

--d3fc-positive--gradient: linear-gradient(#242526 0%, #3289c8 100%);
--d3fc-negative--gradient: linear-gradient(#dd6367 0%, #242526 100%);
}
}
Loading
Loading