Merge pull request #2383 from finos/datagrid-rows-restyle

Datagrid rows restyle
finos · Oct 10, 2023 · b1bff0b · b1bff0b
2 parents 9832438 + 075967e
commit b1bff0b
Show file tree

Hide file tree

Showing 13 changed files with 173 additions and 114 deletions.
diff --git a/examples/blocks/src/file/index.html b/examples/blocks/src/file/index.html
@@ -19,7 +19,7 @@
             <form class="my-form">
                 <p>Upload a CSV/Arrow file by dragging from your desktop and dropping onto the dashed region.</p>
                 <p>(Data is processed in browser, and never sent to any server).</p>
-                <input type="file" id="fileElem" multiple accept=".feather .arrow .csv" />
+                <input type="file" id="fileElem" multiple accept=".feather,.arrow,.csv" />
                 <label class="button" for="fileElem">Select a file</label>
             </form>
         </div>

diff --git a/packages/perspective-viewer-datagrid/build.js b/packages/perspective-viewer-datagrid/build.js
@@ -60,6 +60,8 @@ async function compile_css() {
     add(builder1, "./pro.less");
     add(builder1, "./mitered-headers.less");
     add(builder1, "./row-hover.less");
+    add(builder1, "./sub-cell-scroll.less");
+    add(builder1, "./scrollbar.less");
     add(builder1, "./regular_table.less");
     fs.writeFileSync(
         "dist/css/perspective-viewer-datagrid.css",

diff --git a/packages/perspective-viewer-datagrid/src/less/pro.less b/packages/perspective-viewer-datagrid/src/less/pro.less
@@ -15,65 +15,8 @@
 regular-table {
     padding: 0;
     margin: 12px 0 0 12px;
-
-    // firefox scrollbar styling
-    scrollbar-color: transparent transparent;
-    scrollbar-width: thin;
-    outline: none;
-}
-
-regular-table:hover {
-    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
-}
-
-perspective-viewer-datagrid:not(.sub-cell-scroll-disabled) regular-table table {
-    tbody td,
-    thead th:not(.rt-group-corner) {
-        transform: translate(var(--regular-table--transform-x, 0px));
-    }
-
-    tbody {
-        transform: translate(0, var(--regular-table--transform-y, 0px));
-    }
-
-    tbody tr:first-child {
-        td,
-        th {
-            clip-path: polygon(
-                0 var(--regular-table--clip-y, 0),
-                0 200%,
-                200% 200%,
-                200% var(--regular-table--clip-y, 0)
-            );
-        }
-    }
-
-    thead th.rt-group-corner {
-        background: var(--plugin--background, white);
-        z-index: 1;
-    }
-
-    tbody tr td:first-of-type {
-        clip-path: polygon(
-            var(--regular-table--clip-x, 0) 0,
-            var(--regular-table--clip-x, 0) 200%,
-            200% 200%,
-            200% 0
-        );
-    }
-
-    tbody tr:first-child td:first-of-type {
-        clip-path: polygon(
-            var(--regular-table--clip-x, 0) var(--regular-table--clip-y, 0),
-            var(--regular-table--clip-x, 0) 200%,
-            200% 200%,
-            200% var(--regular-table--clip-y, 0)
-        );
-    }
-}
-
-regular-table {
     font-family: inherit;
+    --rt-hover--border-color: var(--inactive--color, #c5c9d080);
 
     div[tabindex] {
         outline: none;
@@ -175,7 +118,6 @@ regular-table {
 
     table {
         position: absolute;
-        overflow: hidden;
         color: #666;
         outline: none;
     }
@@ -255,23 +197,4 @@ regular-table {
     a:visited {
         color: var(--active--color);
     }
-
-    // webkit (chrome, safari, etc) scrollbar styling
-
-    &::-webkit-scrollbar,
-    &::-webkit-scrollbar-corner {
-        background-color: transparent;
-        height: 12px;
-        width: 12px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background-clip: content-box;
-        background: var(--icon--color);
-        border: 5.5px solid var(--plugin--background);
-        max-height: 50%;
-        max-width: 50%;
-        min-width: 10%;
-        min-height: 10%;
-    }
 }
diff --git a/packages/perspective-viewer-datagrid/src/less/regular_table.less b/packages/perspective-viewer-datagrid/src/less/regular_table.less
@@ -13,6 +13,8 @@
 @import "./pro.less";
 @import "./mitered-headers.less";
 @import "./row-hover.less";
+@import "./sub-cell-scroll.less";
+@import "./scrollbar.less";
 
 // Row Selection
 
@@ -258,6 +260,36 @@ regular-table table {
     }
 }
 
+regular-table table thead tr:last-child:after {
+    width: 10000px;
+    box-sizing: border-box;
+    display: block;
+    height: 23px;
+    content: " ";
+    border-bottom: 1px solid var(--inactive--border-color);
+}
+
+regular-table table tbody tr:after {
+    width: 10000px;
+    box-sizing: border-box;
+    display: block;
+    height: 23px;
+    content: " ";
+    border-top: 1px solid transparent;
+}
+
+regular-table table tbody tr:not(:first-child):after {
+    border-top: 1px solid var(--inactive--border-color);
+}
+
+regular-table table tbody tr:hover:not(:first-child):after {
+    border-top: 1px solid var(--rt-hover--border-color);
+}
+
+regular-table table tbody tr:hover + tr:after {
+    border-top: 1px solid var(--rt-hover--border-color);
+}
+
 @keyframes pulse_pos {
     0% {
         background-color: var(

diff --git a/packages/perspective-viewer-datagrid/src/less/row-hover.less b/packages/perspective-viewer-datagrid/src/less/row-hover.less
@@ -16,7 +16,8 @@ regular-table {
             th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected),
         tr:hover
             th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected),
-        tr:hover td:not(.psp-row-selected):not(.psp-row-subselected) {
+        tr:hover td:not(.psp-row-selected):not(.psp-row-subselected),
+        tr:hover:after {
             border-color: var(--rt-hover--border-color, #c5c9d080) !important;
             background-color: transparent;
             box-shadow: // 0px -2px 0px rgba(0,0,0,0.05),
@@ -46,7 +47,7 @@ regular-table {
 
             th:last-child,
             td:last-child {
-                border-right-width: 1px;
+                border-right-width: 0px;
                 border-right-color: transparent;
             }
         }

diff --git a/packages/perspective-viewer-datagrid/src/less/scrollbar.less b/packages/perspective-viewer-datagrid/src/less/scrollbar.less
@@ -0,0 +1,37 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+// Scrollbar styling
+regular-table {
+    // firefox scrollbar styling
+    scrollbar-color: transparent transparent;
+    scrollbar-width: thin;
+    outline: none;
+
+    // webkit (chrome, safari, etc) scrollbar styling
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-corner {
+        background-color: transparent;
+        height: 12px;
+        width: 12px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-clip: content-box;
+        background: var(--icon--color);
+        border: 5.5px solid var(--plugin--background);
+        max-height: 50%;
+        max-width: 50%;
+        min-width: 10%;
+        min-height: 10%;
+    }
+}
diff --git a/packages/perspective-viewer-datagrid/src/less/sub-cell-scroll.less b/packages/perspective-viewer-datagrid/src/less/sub-cell-scroll.less
@@ -0,0 +1,80 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+// Handles sub-cell scrolling via CSS transform offset by variables set during
+// rendering.
+perspective-viewer-datagrid:not(.sub-cell-scroll-disabled) regular-table table {
+    tbody td,
+    thead th:not(.rt-group-corner) {
+        transform: translate(var(--regular-table--transform-x, 0px));
+    }
+
+    tbody {
+        transform: translate(0, var(--regular-table--transform-y, 0px));
+    }
+
+    tbody tr:first-child {
+        td,
+        th {
+            clip-path: polygon(
+                0 var(--regular-table--clip-y, 0),
+                0 200%,
+                200% 200%,
+                200% var(--regular-table--clip-y, 0)
+            );
+        }
+    }
+
+    tbody tr td:first-of-type {
+        clip-path: polygon(
+            var(--regular-table--clip-x, 0) 0,
+            var(--regular-table--clip-x, 0) 200%,
+            200% 200%,
+            200% 0
+        );
+    }
+
+    tbody tr:first-child td:first-of-type {
+        clip-path: polygon(
+            var(--regular-table--clip-x, 0) var(--regular-table--clip-y, 0),
+            var(--regular-table--clip-x, 0) 200%,
+            200% 200%,
+            200% var(--regular-table--clip-y, 0)
+        );
+    }
+
+    thead tr:last-child:after {
+        transform: translate(var(--regular-table--transform-x, 0px));
+    }
+
+    tbody tr:not(:first-child):after {
+        transform: translate(var(--regular-table--transform-x, 0px));
+    }
+
+    tbody tr:hover:first-child:after {
+        clip-path: polygon(
+            0 var(--regular-table--clip-y, 0),
+            0 200%,
+            200% 200%,
+            200% var(--regular-table--clip-y, 0)
+        );
+    }
+
+    thead tr th.rt-group-corner + th:not(.rt-group-corner) {
+        clip-path: polygon(
+            var(--regular-table--clip-x, 0) 0,
+            var(--regular-table--clip-x, 0) 200%,
+            200% 200%,
+            200% 0
+        );
+    }
+}
diff --git a/rust/perspective-viewer/Cargo.lock b/rust/perspective-viewer/Cargo.lock
diff --git a/rust/perspective-viewer/src/themes/monokai.less b/rust/perspective-viewer/src/themes/monokai.less
@@ -61,11 +61,7 @@ perspective-string-column-style[theme="Monokai"] {
     regular-table {
         --rt-pos-cell--color: #78dce8 !important;
         --rt-neg-cell--color: #ff6188 !important;
-    }
-
-    regular-table table tbody tr td,
-    regular-table table tbody tr th {
-        border-top-color: #444444;
+        --rt--border-color: #444444;
     }
 
     regular-table table tbody th:empty {

diff --git a/rust/perspective-viewer/src/themes/pro-dark.less b/rust/perspective-viewer/src/themes/pro-dark.less
@@ -114,6 +114,7 @@ perspective-string-column-style[theme="Pro Dark"] {
     regular-table {
         --rt-pos-cell--color: #7dc3f0;
         --rt-neg-cell--color: #ff9485;
+        --rt-hover--border-color: #61656e;
 
         table {
             color: white;
@@ -122,15 +123,6 @@ perspective-string-column-style[theme="Pro Dark"] {
         table tr:hover {
             color: white;
         }
-
-        table tbody tr {
-
-            td,
-            th {
-                --rt-hover--border-color: #61656e;
-                border-top-color: #3b3f46;
-            }
-        }
     }
 
     tbody th:empty {

diff --git a/rust/perspective-viewer/src/themes/solarized.less b/rust/perspective-viewer/src/themes/solarized.less
@@ -66,6 +66,8 @@ perspective-string-column-style[theme="Solarized"] {
     regular-table {
         --rt-pos-cell--color: #268bd2 !important;
         --rt-neg-cell--color: #cb4b16 !important;
+        --rt-hover--border-color: #CCC;
+        --rt--border-color: #93a1a1;
     }
 
     regular-table {
@@ -74,11 +76,6 @@ perspective-string-column-style[theme="Solarized"] {
         }
     }
 
-    regular-table table tbody tr td,
-    regular-table table tbody tr th {
-        border-top-color: #93a1a1;
-    }
-
     regular-table table tbody th:empty {
         background: linear-gradient(to right,
                 transparent 9px,

diff --git a/rust/perspective-viewer/src/themes/vaporwave.less b/rust/perspective-viewer/src/themes/vaporwave.less
@@ -62,16 +62,8 @@ perspective-string-column-style[theme="Vaporwave"] {
         --pp-color-1: rgb(9, 33, 50);
         --pp-color-2: rgb(66, 182, 230);
         --rt-pos-cell--color: rgb(66, 182, 230) !important;
-    }
-
-    regular-table td,
-    th {
         --rt-hover--border-color: var(--pp-color-1) !important;
-    }
-
-    regular-table table tbody tr td,
-    regular-table table tbody tr th {
-        border-top-color: rgb(19, 33, 50) !important;
+        --rt--border-color: rgb(19, 33, 50) !important;
     }
 
     regular-table table tbody th:empty {