@perspective-dev/viewer-datagrid 4.0.0 → 4.1.0

package/src/less/pro.less

@@ -0,0 +1,196 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@row-height: 19px;
+
+regular-table {
+    padding: 0;
+    margin: 12px 0 0 12px;
+    font-family: inherit;
+    --rt-hover--border-color: var(--inactive--color, #c5c9d080);
+
+    div[tabindex] {
+        outline: none;
+    }
+
+    & > div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+    }
+
+    th {
+        text-align: center;
+    }
+
+    // Header groups should overflow and not contribute to auto-sizing.
+    thead tr:not(.rt-autosize) th {
+        overflow: hidden;
+        max-width: 0px;
+    }
+
+    thead tr:last-child .rt-float,
+    tbody .rt-float {
+        text-align: right;
+    }
+
+    thead .rt-integer,
+    tbody .rt-integer {
+        text-align: right;
+    }
+
+    tbody th {
+        text-align: left;
+    }
+
+    span.rt-tree-container {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+
+    thead .rt-string,
+    tbody .rt-string,
+    thead .rt-date,
+    tbody .rt-date,
+    thead .rt-datetime,
+    tbody .rt-datetime {
+        text-align: left;
+    }
+
+    // frozen rows
+
+    thead tr:last-child th {
+        border-bottom: 1px solid #8b868045;
+    }
+
+    tbody tr:first-child td,
+    tbody tr:first-child th {
+        border-top: 1px solid transparent !important;
+    }
+
+    th {
+        position: relative;
+    }
+
+    tr th span.rt-tree-group {
+        margin-left: 5px;
+        margin-right: 15px;
+        border-left: 1px solid #eee;
+        height: 100%;
+    }
+
+    td,
+    th {
+        white-space: nowrap;
+        font-size: 12px;
+        padding-right: 5px;
+        padding-left: 5px;
+        padding-top: 0px;
+        padding-bottom: 0px;
+        height: @row-height;
+    }
+
+    table * {
+        box-sizing: border-box;
+    }
+
+    table {
+        position: absolute;
+        color: #666;
+        outline: none;
+    }
+
+    span.rt-row-header-icon {
+        color: #aaa;
+        padding-right: 4px;
+        font-family: var(--button--font-family);
+    }
+
+    span.rt-column-header-icon {
+        font-size: 10px;
+        padding-left: 3px;
+        display: inline-block;
+        width: 10px;
+        font-family: var(--button--font-family);
+    }
+
+    span.rt-row-header-icon:hover {
+        color: #1a7da1;
+        text-shadow: 0px 0px 3px #1a7da1;
+    }
+
+    .rt-selected td {
+        background-color: #eee;
+    }
+
+    .rt-cell-clip {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    // OPTIONAL zebra striping
+
+    // @zebra-stripe-color: rgb(238,238,238);
+
+    // tbody tr:nth-child(even) td:not(.rt-group-header) {
+    //     background: @zebra-stripe-color;
+    // }
+
+    // tbody tr:nth-child(even) span.rt-group-name {
+    //     background: @zebra-stripe-color;
+    // }
+
+    td span.rt-group-name,
+    th span.rt-group-name {
+        margin-right: -5px;
+        padding-right: 5px;
+        padding-left: 8px;
+        flex: 1;
+        height: 100%;
+    }
+
+    th span.rt-group-name {
+        text-align: left;
+    }
+
+    td th span.rt-group-leaf,
+    th span.rt-group-leaf {
+        margin-left: 16px;
+        height: 100%;
+    }
+
+    .rt-column-resize {
+        height: 100%;
+        width: 10px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        cursor: col-resize;
+    }
+
+    a {
+        color: var(--rt-pos-cell--color);
+    }
+
+    a:visited {
+        color: var(--active--color);
+    }
+
+    td.psp-null:after,
+    th.psp-null:after {
+        content: var(--null--content, "-");
+    }
+}

package/src/less/regular_table.less

@@ -0,0 +1,509 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@import "./pro.less";
+@import "./mitered-headers.less";
+@import "./row-hover.less";
+@import "./sub-cell-scroll.less";
+@import "./scrollbar.less";
+
+// Row Selection
+
+@mixin icon {
+    background-repeat: no-repeat;
+    background-color: var(--icon--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+}
+
+// // TODO this makes the UI flash a CSS layout for a millsiecond when toggling
+// // settings butit could be fixed.
+
+// 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 {
+//             display: none;
+//         }
+//     }
+// }
+
+@mixin settings-open {
+    .psp-menu-enabled {
+        padding: 0 6px;
+        font-size: 8px;
+        border-radius: 3px 3px 0 0;
+    }
+
+    .psp-menu-enabled:hover,
+    tr:not(.rt-autosize) th.psp-menu-open {
+        color: var(--plugin--background);
+        background-color: var(--icon--color);
+        border-bottom-color: var(--icon--color);
+        cursor: pointer;
+    }
+
+    tr:not(.rt-autosize) th.psp-menu-open {
+        &:before {
+            @include icon;
+            height: 8px;
+            width: 10px;
+            -webkit-mask-image: var(--column-settings-icon--mask-image);
+            mask-image: var(--column-settings-icon--mask-image);
+            margin-right: 4px;
+            background-color: var(--plugin--background);
+        }
+    }
+
+    td.psp-menu-open {
+        box-shadow:
+            inset -2px 0px 0px var(--icon--color),
+            inset 2px 0px 0px var(--icon--color);
+    }
+
+    tr:first-child td.psp-menu-open {
+        border-top-color: var(--icon--color) !important;
+    }
+
+    tr:last-child td.psp-menu-open {
+        box-shadow:
+            inset -2px 0px 0px var(--icon--color),
+            inset 2px 0px 0px var(--icon--color),
+            inset 0px -2px 0px var(--icon--color);
+    }
+}
+
+perspective-viewer {
+    @include settings-open;
+}
+
+:host {
+    @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 {
+    cursor: pointer;
+}
+
+.psp-row-selected,
+:hover .psp-row-selected,
+:hover th.psp-tree-leaf.psp-row-selected,
+:hover th.psp-tree-label.psp-row-selected {
+    color: white !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 {
+    color: white;
+}
+
+.psp-row-subselected,
+:hover .psp-row-subselected,
+:hover th.psp-tree-leaf.psp-row-subselected,
+:hover th.psp-tree-label.psp-row-subselected {
+    background: rgba(234, 115, 25, 0.2) !important;
+}
+
+.psp-error {
+    color: red;
+}
+
+td:focus {
+    outline: #666;
+    outline-style: dotted;
+    outline-width: 1px;
+}
+
+@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 {
+    border-right-width: 0px;
+}
+
+.psp-header-sort-desc:after {
+    @include icon;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--sort-desc-icon--mask-image);
+    mask-image: var(--sort-desc-icon--mask-image);
+}
+
+.psp-header-sort-asc:after {
+    @include icon;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--sort-asc-icon--mask-image);
+    mask-image: var(--sort-asc-icon--mask-image);
+}
+
+.psp-header-sort-col-desc:after {
+    @include icon;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--sort-col-desc-icon--mask-image);
+    mask-image: var(--sort-col-desc-icon--mask-image);
+}
+
+.psp-header-sort-col-asc:after {
+    @include icon;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--sort-col-asc-icon--mask-image);
+    mask-image: var(--sort-col-asc-icon--mask-image);
+}
+
+.psp-header-sort-abs-desc:after {
+    @include icon;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--sort-abs-desc-icon--mask-image);
+    mask-image: var(--sort-abs-desc-icon--mask-image);
+}
+
+.psp-header-sort-abs-asc:after {
+    @include icon;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--sort-abs-asc-icon--mask-image);
+    mask-image: var(--sort-abs-asc-icon--mask-image);
+}
+
+.psp-header-sort-abs-col-desc:after {
+    @include icon;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--sort-abs-col-desc-icon--mask-image);
+    mask-image: var(--sort-abs-col-desc-icon--mask-image);
+}
+
+.psp-header-sort-abs-col-asc:after {
+    @include icon;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--sort-abs-col-asc-icon--mask-image);
+    mask-image: var(--sort-abs-col-asc-icon--mask-image);
+}
+
+tbody th:last-of-type {
+    border-right: 1px solid var(--inactive--border-color, #8b868045);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+tbody th:empty {
+    background-image: linear-gradient(
+        to right,
+        transparent 9px,
+        var(--inactive--border-color, #eee) 10px,
+        transparent 11px
+    );
+    background-repeat: no-repeat;
+    min-width: 20px;
+    max-width: 20px;
+    pointer-events: none;
+}
+.psp-tree-label {
+    max-width: 0px;
+    min-width: 0px;
+}
+.psp-tree-label:before {
+    color: var(--icon--color);
+    font-family: var(--button--font-family, inherit);
+    padding-right: 11px;
+}
+.psp-tree-label-expand:before {
+    content: var(--tree-label-expand--content, "+");
+}
+.psp-tree-label-collapse:before {
+    content: var(--tree-label-collapse--content, "-");
+}
+.psp-tree-label-expand,
+.psp-tree-label-collapse {
+    cursor: pointer;
+}
+
+.psp-tree-label:hover:before {
+    color: var(--active--color);
+    text-shadow: 0px 0px 5px var(--active--color);
+}
+
+.psp-tree-leaf {
+    padding-left: 24px;
+}
+
+.psp-align-right {
+    text-align: right;
+}
+.psp-align-left {
+    text-align: left;
+}
+.psp-positive:not(:focus) {
+    color: var(--rt-pos-cell--color);
+}
+.psp-negative:not(:focus) {
+    color: var(--rt-neg-cell--color);
+}
+
+regular-table table tbody td {
+    min-width: 52px !important;
+}
+
+.psp-is-width-override .rt-column-resize,
+.rt-column-resize:hover {
+    border: 1px dashed #999;
+    border-bottom-width: 0px;
+    border-left-width: 0px;
+}
+
+.boolean-editable {
+    cursor: pointer;
+}
+
+regular-table table {
+    user-select: none;
+    color: inherit;
+    border-collapse: separate;
+
+    th {
+        font-weight: 400;
+    }
+
+    td,
+    th {
+        border-color: var(--inactive--border-color, #8b868045);
+        height: 23px;
+    }
+
+    .psp-header-group {
+        text-overflow: ellipsis;
+    }
+
+    th.psp-header-leaf {
+        border-bottom-width: 0px;
+        span {
+            height: 23px;
+            min-height: 23px;
+        }
+    }
+
+    td,
+    th.psp-tree-label,
+    th.psp-tree-label,
+    th.psp-tree-leaf,
+    tbody tr:first-child th {
+        border-style: solid;
+        border-width: 0px;
+        border-top-width: 1px;
+    }
+
+    tbody th:empty {
+        background-position: 0px -10px;
+    }
+
+    td.psp-select-region,
+    th.psp-select-region {
+        // transition: background-color 0.5s, color 0.5s, border-color 0.5s;
+        background-color: var(--icon--color) !important;
+        color: var(--plugin--background) !important;
+        border-color: var(--plugin--background) !important;
+    }
+}
+
+regular-table
+    tbody
+    tr:hover
+    td.psp-select-region:not(.psp-row-selected):not(.psp-row-subselected),
+regular-table
+    tbody
+    tr:hover
+    + tr
+    td.psp-select-region:not(.psp-row-selected):not(.psp-row-subselected) {
+    border-color: var(--plugin--background) !important;
+}
+
+regular-table tbody tr:hover {
+    td.psp-select-region.psp-menu-open {
+        &:not(.psp-row-selected):not(.psp-row-subselected) {
+            box-shadow:
+                inset -2px 0px 0px var(--plugin--background),
+                inset 2px 0px 0px var(--plugin--background);
+        }
+    }
+}
+
+:host-context(perspective-viewer[settings]) td.psp-select-region.psp-menu-open {
+    box-shadow:
+        inset -2px 0px 0px var(--plugin--background),
+        inset 2px 0px 0px var(--plugin--background);
+}
+
+// This is a design/architecture bug. When the datagrid draws during a sidepanel
+// collapse/uncollapse, the `settings` attribute is set to the _previous_ state
+// as this collapse takes a while and we dont want the new state CSS to apply
+// 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.
+@mixin design-slash-architecture-bug {
+    regular-table #psp-column-edit-buttons:after {
+        content: none;
+    }
+}
+
+regular-table
+    #psp-column-edit-buttons
+    th:not(.rt-group-corner)
+    span:not(.rt-column-resize):before {
+    content: var(--datagrid-column-edit-button--content, "Edit");
+}
+
+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 {
+    width: 10000px;
+    box-sizing: border-box;
+    display: block;
+    height: 23px;
+    content: " ";
+    border-bottom: 1px solid var(--inactive--border-color);
+}
+
+// Extend every row to the right edge of the page with a fake column.
+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(
+            --pulse--background-color-start,
+            rgba(0, 128, 255, 0.5)
+        );
+    }
+    100% {
+        background-color: var(
+            --pulse--background-color-end,
+            rgba(0, 128, 255, 0)
+        );
+    }
+}
+
+@keyframes pulse_pos2 {
+    0% {
+        background-color: var(
+            --pulse--background-color-start,
+            rgba(0, 128, 255, 0.5)
+        );
+    }
+    100% {
+        background-color: var(
+            --pulse--background-color-end,
+            rgba(0, 128, 255, 0)
+        );
+    }
+}
+
+@keyframes pulse_neg {
+    0% {
+        background-color: var(
+            --pulse--background-color-start,
+            rgba(255, 25, 0, 0.5)
+        );
+    }
+    100% {
+        background-color: var(
+            --pulse--background-color-end,
+            rgba(255, 25, 0, 0)
+        );
+    }
+}
+
+@keyframes pulse_neg2 {
+    0% {
+        background-color: var(
+            --pulse--background-color-start,
+            rgba(255, 25, 0, 0.5)
+        );
+    }
+    100% {
+        background-color: var(
+            --pulse--background-color-end,
+            rgba(255, 25, 0, 0)
+        );
+    }
+}