Merge pull request #168 from timkpaine/master

fix for #160
finos · Jul 24, 2018 · 314b4a9 · 314b4a9
2 parents e13f5b9 + 56f5b94
commit 314b4a9
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/packages/perspective-jupyterlab/src/ts/index.ts b/packages/perspective-jupyterlab/src/ts/index.ts
@@ -58,7 +58,7 @@ export class RenderedPSP extends Widget implements IRenderMime.IRenderer {
                 } else if (key === 'colorscheme'){
                     if(layout[key]==='dark'){
                         this.node.classList.add(PSP_CONTAINER_CLASS_DARK)
-                        psp.addEventListener('loaded', ()=>{
+                        psp.addEventListener('perspective-view-update', ()=>{
                             // Call once rendered
                             let grid = this.node.querySelector('perspective-hypergrid');
                             if (grid){
@@ -68,6 +68,14 @@ export class RenderedPSP extends Widget implements IRenderMime.IRenderer {
                                     rowProperties: [
                                         { color: '#eee', backgroundColor: '#2a2c2f' },
                                     ],
+                                    hoverRowHighlight: {
+                                        enabled: true,
+                                        backgroundColor: '#555'
+                                    },
+                                    hoverCellHighlight: {
+                                        enabled: true,
+                                        backgroundColor: '#444'
+                                    },
                                 });
                             }
                         });

diff --git a/packages/perspective-viewer-hypergrid/src/js/hypergrid.js b/packages/perspective-viewer-hypergrid/src/js/hypergrid.js
@@ -55,6 +55,14 @@ const base_grid_properties = {
     halign: 'left',
     headerTextWrapping: false,
     hoverColumnHighlight: { enabled: false },
+    hoverRowHighlight: {
+        enabled: true,
+        backgroundColor: '#555'
+    },
+    hoverCellHighlight: {
+        enabled: true,
+        backgroundColor: '#333'
+    },
     noDataMessage: '',
     minimumColumnWidth: 50,
     multipleSelections: false,
@@ -75,7 +83,7 @@ const base_grid_properties = {
     treeHeaderForegroundSelectionFont: '12px "Arial", Helvetica, sans-serif',
     useBitBlit: false,
     vScrollbarClassPrefix: '',
-    voffset: 0
+    voffset: 0,
 };
 
 const light_theme_overrides = {
@@ -175,15 +183,20 @@ bindTemplate(TEMPLATE)(class HypergridElement extends HTMLElement {
 
             const grid_properties = generateGridProperties(Hypergrid._default_properties || light_theme_overrides);
             const style = window.getComputedStyle(this, null);
+
             const header = window.getComputedStyle(this.querySelector('th'), null);
+            const style_hover = window.getComputedStyle(this.querySelector('td'), null);
 
             grid_properties['showRowNumbers'] = grid_properties['showCheckboxes'] || grid_properties['showRowNumbers'];
             grid_properties['treeHeaderBackgroundColor'] = grid_properties['backgroundColor'] = style.getPropertyValue('background-color');
             grid_properties['treeHeaderColor'] = grid_properties['color'] = style.getPropertyValue('color');
             grid_properties['columnHeaderBackgroundColor'] = header.getPropertyValue('background-color');
             grid_properties['columnHeaderSeparatorColor'] = header.getPropertyValue('border-color');
             grid_properties['columnHeaderColor'] = header.getPropertyValue('color');
-
+
+            grid_properties['hoverRowHighlight']['backgroundColor'] = style_hover.getPropertyValue('background-color');
+            grid_properties['hoverCellHighlight']['backgroundColor'] = style_hover.getPropertyValue('color');
+
             this.grid.addProperties(grid_properties);
 
             // Add tree cell renderer

diff --git a/packages/perspective-viewer/src/less/material.dark.less b/packages/perspective-viewer/src/less/material.dark.less
@@ -221,7 +221,6 @@ perspective-viewer #app {
             }
 
             perspective-row {
-
                 #name {
                     color: #666;
                 }
@@ -263,6 +262,9 @@ perspective-viewer #app {
             border-color: @coolgrey700;
             background-color: @coolgrey700;
         }
+        td {
+            color: #444;
+            background-color: #555;
+        }
     }
-
 }