Merge pull request #3064 from finos/fix-datagrid-plugin

Fix plugins which inherit from `perspective-viewer-datagrid`

Author: texodus

packages/perspective-viewer-datagrid/src/js/custom_elements/toolbar.js

@@ -48,7 +48,7 @@ export class HTMLPerspectiveViewerDatagridToolbarElement extends HTMLElement {
         `;
 
         const viewer = this.parentElement;
-        const plugin = viewer.querySelector("perspective-viewer-datagrid");
+        const plugin = this.previousElementSibling;
         plugin._scroll_lock = this.shadowRoot.querySelector("#scroll_lock");
         plugin._scroll_lock.addEventListener("click", () =>
             toggle_scroll_lock.call(plugin),

packages/perspective-viewer-datagrid/src/js/style_handlers/editable.js

@@ -18,9 +18,7 @@ function isEditable(viewer, allowed = false) {
         this._config.split_by.length === 0;
     const selectable = viewer.hasAttribute("selectable");
     const editable =
-        allowed ||
-        viewer.querySelector("perspective-viewer-datagrid").dataset.editMode ===
-            "EDIT";
+        allowed || viewer.children[0]?.dataset?.editMode === "EDIT";
     return has_pivots && !selectable && editable;
 }
 

packages/perspective-viewer-datagrid/src/less/regular_table.less

@@ -121,8 +121,8 @@ perspective-viewer {
 :hover th.psp-tree-leaf.psp-row-selected,
 :hover th.psp-tree-label.psp-row-selected {
     color: white !important;
-    background-color: #ea7319 !important;
-    border-color: #ea7319 !important;
+    background-color: var(--selected-row--background-color, #ea7319) !important;
+    border-color: var(--selected-row--background-color, #ea7319) !important;
 }
 
 .psp-row-selected.psp-tree-label:not(:hover):before {

packages/perspective-workspace/src/less/menu.less

@@ -83,7 +83,7 @@
     display: block;
     position: relative;
     top: 4px;
-    border-top: 1px solid #dddddd;
+    border-top: 1px solid;
 }
 
 .lm-MenuBar-menu {

packages/perspective-workspace/src/less/tabbar.less

@@ -299,7 +299,8 @@
     border: var(--workspace-tabbar--border, 1px solid #ddd);
     border-width: var(--workspace-tabbar-tab--border-width);
     box-shadow: 0 13px 0 -12px var(--inactive--border-color);
-    border-radius: 6px 6px 0 0;
+    border-radius: var(--workspace-tabbar--border-radius, 6px)
+        var(--workspace-tabbar--border-radius, 6px) 0 0;
     background-color: var(--workspace-tabbar--background-color, white);
     height: 40px !important;
     max-height: 40px !important;

packages/perspective-workspace/src/less/widget.less

@@ -15,7 +15,8 @@
 .lm-DockPanel:not([data-mode="single-document"]) .viewer-container {
     border: var(--workspace-tabbar--border, 1px solid var(--inactive--color));
     border-width: var(--workspace-tabbar--border-width);
-    border-radius: var(--workspace-tabbar--border-radius, 0 0 6px 6px);
+    border-radius: 0 0 var(--workspace-tabbar--border-radius, 6px)
+        var(--workspace-tabbar--border-radius, 6px);
 }
 
 .viewer-container {

packages/perspective-workspace/src/themes/pro-dark.less

@@ -49,7 +49,7 @@ perspective-workspace {
     --workspace-secondary--color: @grey60;
     --workspace-tabbar--border: 1px solid var(--inactive--color);
     --workspace-tabbar--border-width: 0px 1px 1px 1px;
-    --workspace-tabbar--border-radius: 0px 0px 6px 6px;
+    --workspace-tabbar--border-radius: 6px;
     --workspace-tabbar--border-color: var(--inactive--color);
     --workspace-tabbar-tab--border-width: 1px 1px 0 1px;
 }
@@ -59,17 +59,19 @@ perspective-viewer[theme="Pro Dark"].workspace-master-widget {
 }
 
 perspective-workspace-menu {
-    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
-        "Consolas", "Liberation Mono", monospace;
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
     font-weight: 300;
     background: @grey700 !important;
     color: white !important;
     border: 1px solid @grey500 !important;
 }
 
 @mixin perspective-workspace-pro-base {
-    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
-        "Consolas", "Liberation Mono", monospace;
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
     --open-settings-button--content: "expand_more";
     --close-settings-button--content: "expand_less";
     --close-button--content: "\2715";
@@ -91,7 +93,7 @@ perspective-workspace-menu {
 
     --workspace-tabbar--border: 1px solid var(--inactive--color);
     --workspace-tabbar--border-width: 0px 1px 1px 1px;
-    --workspace-tabbar--border-radius: 0px 0px 6px 6px;
+    --workspace-tabbar--border-radius: 6px;
     --workspace-tabbar--border-color: var(--inactive--color);
     --workspace-tabbar-tab--border-width: 1px 1px 0px 1px;
 

packages/perspective-workspace/src/themes/pro.less

@@ -50,8 +50,9 @@ perspective-viewer[theme="Pro Light"].workspace-master-widget {
 }
 
 @mixin perspective-workspace-pro-base {
-    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
-        "Consolas", "Liberation Mono", monospace;
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
     --open-settings-button--content: "expand_more";
     --close-settings-button--content: "expand_less";
     --close-button--content: "\2715";
@@ -74,7 +75,7 @@ perspective-viewer[theme="Pro Light"].workspace-master-widget {
 
     --workspace-tabbar--border: 1px solid var(--inactive--color);
     --workspace-tabbar--border-width: 0px 1px 1px 1px;
-    --workspace-tabbar--border-radius: 0px 0px 6px 6px;
+    --workspace-tabbar--border-radius: 6px;
     --workspace-tabbar--border-color: var(--inactive--color);
     --workspace-tabbar-tab--border-width: 1px 1px 0px 1px;
 
@@ -84,8 +85,9 @@ perspective-viewer[theme="Pro Light"].workspace-master-widget {
 }
 
 perspective-workspace-menu {
-    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
-        "Consolas", "Liberation Mono", monospace;
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
     font-weight: 300;
     color: #161616;
 }