CSS Cleanup.

texodus · texodus · commit 362140e29c4b · 2020-02-10T03:28:33.000-05:00
diff --git a/examples/simple/superstore-arrow.html b/examples/simple/superstore-arrow.html
@@ -28,7 +28,9 @@
 
 <body>
 
-    <perspective-viewer plugin="d3_sunburst" row-pivots='["Sub-Category","Region","Segment"]' sort='[["Profit","desc"]]' columns='["Sales", "Profit"]'>
+    <perspective-viewer plugin="hypergrid" row-pivots='["Region", "State",
+    "City"]' column-pivots='["Category", "Sub-Category"]' sort='[["Profit","desc"]]' columns='["Sales",
+    "Profit"]'>
 
     </perspective-viewer>
 
diff --git a/examples/simple/superstore-hypergrid.html b/examples/simple/superstore-hypergrid.html
@@ -32,7 +32,7 @@
     </perspective-viewer>
 
     <script>
-        window.addEventListener('WebComponentsReady', function() {
+        window.addEventListener('DOMContentLoaded', async function() {
             const viewer = document.getElementsByTagName('perspective-viewer')[0];
             const data = await fetch("superstore.arrow");
             viewer.load(await data.arrayBuffer(), {index: "Row ID"});
diff --git a/packages/perspective-viewer/src/less/viewer.less b/packages/perspective-viewer/src/less/viewer.less
@@ -413,7 +413,7 @@
         z-index: 1;
         perspective-row {
             margin-bottom: -1px;
-            display: inline-block;
+            display: var(--top-panel-row--display, inline-block);
             --psp_row-display: inline-block;
         }
     }
diff --git a/packages/perspective-viewer/src/themes/material.less b/packages/perspective-viewer/src/themes/material.less
@@ -10,7 +10,7 @@
 @import "../less/fonts";
 @import "../less/variables";
 
-perspective-viewer, .perspective-viewer-material{
+perspective-viewer, .perspective-viewer-material {
     .perspective-viewer-material-base();
     --active--color: @blue800;
     
@@ -23,7 +23,7 @@ perspective-viewer, .perspective-viewer-material{
     --hypergrid-selection--background: rgba(0, 0, 0, 0.1);
 }
 
-.perspective-viewer-material-base(){
+.perspective-viewer-material-base() {
     font-family: "Open Sans";
 
     --interface-monospace--font-family: "Roboto Mono";
@@ -90,6 +90,7 @@ perspective-viewer, .perspective-viewer-material{
     --button--font-size: 16px;
 
     --top_panel--padding: 0px 0px 24px 0px;
+    --top-panel-row--display: inline-flex;
     --hypergrid-scrollbar--width: 8px;
     --hypergrid-scrollbar--border-radius: 5px;
 
diff --git a/packages/perspective-workspace/src/less/dockpanel.less b/packages/perspective-workspace/src/less/dockpanel.less
@@ -53,10 +53,14 @@
     min-width: 300px;
 }
 
-.p-DockPanel.resizing perspective-viewer, .p-SplitPanel.resizing perspective-viewer {
+.p-DockPanel.resizing ::slotted(perspective-viewer), .p-SplitPanel.resizing ::slotted(perspective-viewer) {
     pointer-events: none;
 }
 
+.widget-blur ::slotted(perspective-viewer) {
+    opacity: 0.5;
+}
+ 
 .p-DockPanel-handle.resizing {
     background-color: rgba(0,0,0,0.05);
 }
diff --git a/packages/perspective-workspace/src/less/viewer.less b/packages/perspective-workspace/src/less/viewer.less
@@ -1,18 +1,18 @@
 @border-color: 1px solid #eaeaea;
 
-.workspace-master-widget{
+.workspace-master-widget {
    --settings-button--content: var(--open-settings-button--content, "\1F527") !important;
 }
 
 .workspace-master-widget[settings] {
    --settings-button--content: var(--close-settings-button--content, "\1F527") !important;;
 }
 
-.workspace-detail-widget.widget-maximize{
+.workspace-detail-widget.widget-maximize {
    --settings-button--content: var(--open-settings-button--content, "\1F527") !important;
 }
 
-.workspace-detail-widget.widget-maximize[settings]{
+.workspace-detail-widget.widget-maximize[settings] {
    --settings-button--content: var(--close-settings-button--content, "\1F527") !important;
 }
 
@@ -24,15 +24,11 @@
    min-height: 200px;
 }
 
-.workspace-detail-widget{
+.workspace-detail-widget {
    --settings-button--content: "" !important;
    --plugin--border: 1px solid #eaeaea;
 }
 
-perspective-viewer.widget-blur{
-   opacity: 0.5;
-}
-
 .context-menu > perspective-viewer.context-focus{
    opacity: 1;
 
diff --git a/packages/perspective-workspace/src/theme/material.less b/packages/perspective-workspace/src/theme/material.less
@@ -2,19 +2,19 @@
 @import (reference) "~@finos/perspective-viewer/src/themes/material-dense.less";
 @import (reference) "~@finos/perspective-viewer/src/themes/material-dense.dark.less";
 
-perspective-workspace{
+perspective-workspace {
     .perspective-workspace-material-base();
 }
 
-perspective-viewer.workspace-detail-widget{
+perspective-viewer.workspace-detail-widget {
     .perspective-viewer-material-dense();
 }
 
-perspective-viewer.workspace-master-widget{
+perspective-viewer.workspace-master-widget {
     .perspective-viewer-material-dense-dark();
 }
 
-.perspective-workspace-material-base(){
+.perspective-workspace-material-base() {
     --open-settings-button--content: "expand_more";
     --close-settings-button--content: "expand_less";
     --close-button--content: "close";

Original file line number	Diff line number	Diff line change
`@@ -413,7 +413,7 @@`
`413`	`413`	`z-index: 1;`
`414`	`414`	`perspective-row {`
`415`	`415`	`margin-bottom: -1px;`
`416`		`- display: inline-block;`
	`416`	`+ display: var(--top-panel-row--display, inline-block);`
`417`	`417`	`--psp_row-display: inline-block;`
`418`	`418`	`}`
`419`	`419`	`}`
Original file line number	Diff line number	Diff line change
`@@ -53,10 +53,14 @@`
`53`	`53`	`min-width: 300px;`
`54`	`54`	`}`
`55`	`55`
`56`		`-.p-DockPanel.resizing perspective-viewer, .p-SplitPanel.resizing perspective-viewer {`
	`56`	`+.p-DockPanel.resizing ::slotted(perspective-viewer), .p-SplitPanel.resizing ::slotted(perspective-viewer) {`
`57`	`57`	`pointer-events: none;`
`58`	`58`	`}`
`59`	`59`
	`60`	`+.widget-blur ::slotted(perspective-viewer) {`
	`61`	`+ opacity: 0.5;`
	`62`	`+}`
	`63`	`+`
`60`	`64`	`.p-DockPanel-handle.resizing {`
`61`	`65`	`background-color: rgba(0,0,0,0.05);`
`62`	`66`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,18 +1,18 @@`
`1`	`1`	`@border-color: 1px solid #eaeaea;`
`2`	`2`
`3`		`-.workspace-master-widget{`
	`3`	`+.workspace-master-widget {`
`4`	`4`	`--settings-button--content: var(--open-settings-button--content, "\1F527") !important;`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`.workspace-master-widget[settings] {`
`8`	`8`	`--settings-button--content: var(--close-settings-button--content, "\1F527") !important;;`
`9`	`9`	`}`
`10`	`10`
`11`		`-.workspace-detail-widget.widget-maximize{`
	`11`	`+.workspace-detail-widget.widget-maximize {`
`12`	`12`	`--settings-button--content: var(--open-settings-button--content, "\1F527") !important;`
`13`	`13`	`}`
`14`	`14`
`15`		`-.workspace-detail-widget.widget-maximize[settings]{`
	`15`	`+.workspace-detail-widget.widget-maximize[settings] {`
`16`	`16`	`--settings-button--content: var(--close-settings-button--content, "\1F527") !important;`
`17`	`17`	`}`
`18`	`18`
`@@ -24,15 +24,11 @@`
`24`	`24`	`min-height: 200px;`
`25`	`25`	`}`
`26`	`26`
`27`		`-.workspace-detail-widget{`
	`27`	`+.workspace-detail-widget {`
`28`	`28`	`--settings-button--content: "" !important;`
`29`	`29`	`--plugin--border: 1px solid #eaeaea;`
`30`	`30`	`}`
`31`	`31`
`32`		`-perspective-viewer.widget-blur{`
`33`		`- opacity: 0.5;`
`34`		`-}`
`35`		`-`
`36`	`32`	`.context-menu > perspective-viewer.context-focus{`
`37`	`33`	`opacity: 1;`
`38`	`34`