@perspective-dev/viewer 4.0.0

package/src/less/status-bar.less

@@ -0,0 +1,551 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+:host {
+    #status_bar.titled {
+        padding-right: 108px;
+
+        #menu-bar {
+            opacity: 0.2;
+        }
+    }
+
+    // When settings open ...
+    #main_column #status_bar,
+    #main_column #status_bar.titled {
+        padding-left: 0px;
+        padding-right: 36px;
+
+        input::placeholder {
+            color: var(--inactive--color);
+        }
+
+        #menu-bar {
+            opacity: 1;
+        }
+    }
+
+    #status_bar.updating {
+        box-shadow: none;
+    }
+
+    #status_bar {
+        box-shadow: 0 13px 0 -12px var(--inactive--border-color);
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        background: var(--plugin--background);
+        padding: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: var(--status-bar--height, 48px);
+        border-radius: var(--status-bar--border-radius);
+        #status-bar-placeholder {
+            margin: 0px;
+            pointer-events: none;
+        }
+
+        input {
+            font-size: 1em;
+        }
+
+        input:placeholder-shown + #status-bar-placeholder:before {
+            content: var(--untitled--content, "untitled");
+            color: var(--inactive--color);
+        }
+
+        .input-sizer {
+            display: inline-block;
+            align-items: center;
+            position: relative;
+            margin-top: 1px;
+            min-width: 65px;
+            overflow: hidden;
+
+            &:after,
+            input,
+            textarea {
+                width: auto;
+                grid-area: 1 / 1;
+                font-family: inherit;
+            }
+
+            input,
+            textarea {
+                // grid-area: 1 / 1;
+                position: absolute;
+                left: 0;
+                right: 0;
+                text-overflow: ellipsis;
+                padding: 0;
+                border: none;
+                background: transparent;
+                color: inherit;
+                height: 100%;
+            }
+
+            &:after {
+                content: attr(data-value) " ";
+                color: var(--inactive--color, inherit);
+                visibility: hidden;
+                white-space: nowrap;
+                padding-right: 12px;
+            }
+
+            &:focus-within {
+                textarea:focus,
+                input:focus {
+                    outline: none;
+                }
+            }
+        }
+
+        .app-title {
+            margin-left: 12px;
+            font-size: 16px;
+        }
+
+        .section {
+            display: flex;
+            align-items: center;
+        }
+
+        #spacer {
+            flex: 1 1000 auto;
+        }
+
+        span#rows {
+            flex: 0 1000 auto;
+            overflow: hidden;
+            margin: 0px 14px;
+            span {
+                margin: 0 !important;
+            }
+
+            span {
+                color: var(--inactive--color);
+            }
+        }
+
+        // Exceptions when the menu bar is visible and the settings panel is closed.
+        #menu-bar {
+            flex: 0 1000000 auto;
+            height: 100%;
+        }
+
+        #plugin-settings {
+            margin-left: auto;
+            align-self: stretch;
+        }
+
+        #counter-arrow:before {
+            content: var(--status-bar-counter--content, "arrow_back");
+        }
+
+        span {
+            white-space: nowrap;
+
+            // font-size: var(--label--font-size, 0.75em);
+            margin: 0px 14px;
+            user-select: none;
+            // height: 100%;
+            // line-height: 36px;
+
+            // &:before {
+            //     position: relative;
+            // }
+
+            &:hover {
+                color: inherit;
+            }
+        }
+
+        // span#rows {
+        //     margin-left: 2px;
+        // }
+
+        span.icon {
+            height: 100%;
+            line-height: 36px;
+            margin: 0;
+        }
+
+        span#status {
+            width: 20px;
+            height: 20px;
+            background-repeat: no-repeat;
+            background-color: var(--icon--color);
+            content: "";
+            -webkit-mask-size: cover;
+            mask-size: cover;
+            pointer-events: none;
+            image-rendering: pixelated;
+        }
+
+        // span#status_updating
+
+        span#status.loading {
+            image-rendering: pixelated;
+            mask-image: var(--downloading-icon--mask-image);
+            -webkit-mask-image: var(--downloading-icon--mask-image);
+        }
+
+        span#status.uninitialized {
+            background-color: transparent;
+        }
+
+        span#status.connected,
+        span#status.updating {
+            mask-image: var(--status-ok-icon--mask-image);
+            -webkit-mask-image: var(--status-ok-icon--mask-image);
+        }
+
+        .error-dialog {
+            position: absolute;
+            z-index: 1;
+            width: 100%;
+            flex-direction: column;
+            max-height: 300px;
+            top: 0;
+            left: 0;
+            padding: 0px 0px 0px 50px;
+            display: none;
+            white-space: pre-wrap;
+            color: var(--plugin--background);
+            background: var(--icon--color);
+            border-radius: var(--status-bar--border-radius);
+        }
+
+        .error-dialog-message {
+            white-space: nowrap;
+            overflow: hidden;
+            align-items: center;
+            display: flex;
+            padding-right: 17px;
+            height: var(--status-bar--height, 48px);
+            min-height: var(--status-bar--height, 48px);
+        }
+
+        .error-dialog-stack {
+            font-size: 10px;
+            padding-right: 17px;
+            color: var(--inactive--color);
+            overflow-y: auto;
+            padding-bottom: 24px;
+        }
+
+        .section:hover .error-dialog {
+            display: flex;
+        }
+
+        div#status_reconnect {
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            border-radius: var(--status-bar--border-radius);
+            height: var(--status-bar--height, 48px);
+            &.errored {
+                cursor: pointer;
+            }
+
+            &.errored.disabled {
+                cursor: auto;
+                pointer-events: none;
+            }
+
+            span#status.errored {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 20px;
+                border-radius: 10px;
+                color: var(--plugin--background);
+                height: 20px;
+                // pointer-events: all;
+                // mask-image: url(../svg/status_error.svg);
+                // -webkit-mask-image: url(../svg/status_error.svg);
+                &:before {
+                    content: "!";
+                }
+            }
+
+            &.errored:hover {
+                background-color: var(--icon--color);
+                span#status.errored {
+                    color: var(--icon--color);
+                    background-color: var(--plugin--background);
+                }
+            }
+        }
+
+        // Status bar status icon animations
+        span#status_updating {
+            position: absolute;
+            opacity: 0;
+            width: 20px;
+            height: 20px;
+            background-repeat: no-repeat;
+            background-color: var(--icon--color);
+            content: "";
+            -webkit-mask-size: cover;
+            mask-size: cover;
+            pointer-events: none;
+            image-rendering: pixelated;
+            mask-image: var(--updating-icon--mask-image);
+            -webkit-mask-image: var(--updating-icon--mask-image);
+        }
+
+        // span#status.uninitialized {
+
+        // }
+
+        span#status.updating {
+            animation-name: status-bar-updating-inverse;
+            animation-fill-mode: forwards;
+            animation-iteration-count: 1;
+            animation-duration: 0.3s;
+        }
+
+        span#status_updating.updating {
+            animation-name: status-bar-updating;
+            animation-fill-mode: forwards;
+            animation-iteration-count: 1;
+            animation-duration: 0.3s;
+        }
+
+        .button:before {
+            height: 21px;
+            width: 21px;
+            background-repeat: no-repeat;
+            background-color: var(--icon--color);
+            content: "";
+            -webkit-mask-size: cover;
+            mask-size: cover;
+            pointer-events: none;
+        }
+
+        span#export {
+            &:before {
+                -webkit-mask-image: var(--export-icon--mask-image);
+                mask-image: var(--export-icon--mask-image);
+            }
+            span:before {
+                content: var(--export-button--content, "Export");
+            }
+        }
+
+        span#lock {
+            &:before {
+                -webkit-mask-image: var(--free-scroll-icon--mask-image);
+                mask-image: var(--free-scroll-icon--mask-image);
+            }
+        }
+
+        span#reset {
+            &:before {
+                -webkit-mask-image: var(--reset-icon--mask-image);
+                mask-image: var(--reset-icon--mask-image);
+            }
+            span:before {
+                content: var(--reset-button--content);
+            }
+        }
+
+        span#copy {
+            &:before {
+                -webkit-mask-image: var(--copy-icon--mask-image);
+                mask-image: var(--copy-icon--mask-image);
+            }
+            span:before {
+                content: var(--copy-button--content);
+            }
+        }
+
+        #theme_icon {
+            margin-right: -32px;
+            height: 100%;
+            width: 28px;
+            z-index: 1;
+        }
+
+        #theme_icon.modified {
+            cursor: pointer;
+        }
+
+        #theme {
+            align-self: stretch;
+            border-radius: 0px;
+            select {
+                height: 100%;
+            }
+
+            &:before {
+                margin: 0 6px 0 4px;
+                -webkit-mask-image: var(--theme-icon--mask-image);
+                mask-image: var(--theme-icon--mask-image);
+            }
+        }
+
+        #theme_icon.modified:hover + #theme:before {
+            -webkit-mask-image: var(--close-icon--mask-image);
+            mask-image: var(--close-icon--mask-image);
+        }
+
+        #theme_selector {
+            max-width: 100px;
+            text-overflow: ellipsis;
+        }
+
+        .button {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0px;
+            padding: 0 5px;
+            color: var(--inactive--color, #ccc);
+            border: 1px solid transparent;
+            border-radius: 3px;
+            font-size: var(--label--font-size, 0.75em);
+
+            & > span,
+            & > .dropdown-width-container {
+                pointer-events: none;
+                overflow: hidden;
+                display: none;
+            }
+
+            &:before {
+                z-index: 1;
+            }
+        }
+
+        .hover-target {
+            margin: 0;
+            display: inline-flex;
+            height: 100%;
+            align-items: center;
+
+            &:focus-within,
+            &:hover,
+            &.modal-target {
+                box-shadow:
+                    -4px 0 0 var(--icon--color),
+                    4px 0 0 var(--icon--color);
+                background-color: var(--icon--color);
+            }
+
+            &:focus-within .button select,
+            &:hover .button select {
+                background-color: transparent;
+            }
+
+            .modal-target .button > span {
+                color: var(--icon--color) !important;
+            }
+
+            &:focus-within .button,
+            &:hover .button,
+            &.modal-target .button {
+                position: relative;
+                min-width: var(--button--min-width, 33px);
+                color: inherit;
+                cursor: pointer;
+                transition: none;
+                background-color: var(--icon--color);
+                color: var(--plugin--background);
+
+                &:before {
+                    background-color: var(--plugin--background);
+                }
+
+                // The label.
+                @mixin label {
+                    display: block;
+                    text-align: center;
+                    position: absolute;
+                    top: calc(100% + 3px);
+                    left: 50%;
+                    translate: -50%;
+                    margin: 0;
+                    padding: 5px;
+                    height: auto;
+                    white-space: nowrap;
+                    line-height: 1;
+                    width: 41px;
+                    background-color: var(--icon--color);
+                    border-radius: 0 0 3px 3px;
+                }
+
+                & > span {
+                    @include label;
+                }
+
+                & > .dropdown-width-container {
+                    display: block;
+                    margin: 0;
+                    white-space: nowrap;
+                    line-height: 1;
+                    background-color: var(--icon--color);
+                    pointer-events: all;
+
+                    & > select {
+                        position: static;
+                        cursor: pointer;
+                    }
+
+                    &::before {
+                        content: "";
+                        display: block;
+                        position: absolute;
+                        inset-block-start: -3px;
+                        inset-inline-start: 0;
+                        inline-size: 100%;
+                        block-size: 3px;
+                    }
+                    &::after {
+                        content: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@keyframes status-bar-updating {
+    0% {
+        opacity: 0;
+    }
+
+    99% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes status-bar-updating-inverse {
+    0% {
+        opacity: 1;
+    }
+
+    99% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}

package/src/less/type-icon.less

@@ -0,0 +1,68 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+:host #selected-columns .type-icon,
+:host #sub-columns .type-icon {
+    position: absolute;
+    left: 15px;
+}
+
+:host .type-icon {
+    height: 13px;
+    width: 13px;
+    background-repeat: no-repeat;
+    background-color: var(--icon--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    flex-shrink: 0;
+
+    &.none {
+        content: none;
+    }
+
+    &.integer {
+        -webkit-mask-image: var(--column-type-integer--mask-image);
+        mask-image: var(--column-type-integer--mask-image);
+    }
+
+    &.float {
+        -webkit-mask-image: var(--column-type-float--mask-image);
+        mask-image: var(--column-type-float--mask-image);
+    }
+
+    &.string {
+        -webkit-mask-image: var(--column-type-string--mask-image);
+        mask-image: var(--column-type-string--mask-image);
+    }
+
+    &.boolean {
+        -webkit-mask-image: var(--column-type-boolean--mask-image);
+        mask-image: var(--column-type-boolean--mask-image);
+    }
+
+    &.date {
+        -webkit-mask-image: var(--column-type-date--mask-image);
+        mask-image: var(--column-type-date--mask-image);
+    }
+
+    &.datetime {
+        -webkit-mask-image: var(--column-type-datetime--mask-image);
+        mask-image: var(--column-type-datetime--mask-image);
+    }
+
+    &.expression {
+        -webkit-mask-image: var(--add-expression-icon--mask-image);
+        mask-image: var(--add-expression-icon--mask-image);
+    }
+}