@perspective-dev/viewer 4.0.0

package/src/less/column-settings-panel.less

@@ -0,0 +1,255 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 (reference) url(./column-selector.less);
+
+:host {
+    #column_settings_sidebar {
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        #attributes-button-panel {
+            flex: 0 0 auto;
+            margin-top: 4px;
+        }
+
+        #attributes-tab {
+            flex-direction: column;
+            display: flex;
+            overflow: hidden;
+        }
+
+        #attributes-tab > .split-panel-child {
+            min-height: 200px;
+            flex: 0 1 auto;
+        }
+
+        // NOTE: These should probably make their way to global form styling eventually.
+        .errored {
+            outline-color: var(--error--color);
+        }
+
+        .item_title {
+            flex: 0 0 auto;
+            font-size: var(--label--font-size, 0.75em);
+        }
+
+        .radio-list-item label {
+            margin-top: 6px;
+        }
+
+        input {
+            &[type="text"],
+            &[type="search"] {
+                outline: 1px solid;
+                outline-color: var(--inactive--color);
+                background-color: var(--plugin--background);
+                border: none;
+                margin-bottom: 0.5em;
+                font-family: inherit;
+                font-size: 1em;
+                &:disabled {
+                    background-color: var(--inactive--color);
+                }
+            }
+
+            &[type="search"] {
+                min-height: 24px;
+                border-radius: 2px;
+            }
+
+            &::-webkit-search-cancel-button {
+                cursor: pointer;
+            }
+        }
+
+        .sidebar_header_contents {
+            display: flex;
+            margin: 8px;
+            align-items: center;
+            border-radius: 3px;
+            outline-width: 1px;
+            outline-color: var(--inactive--color);
+
+            &.editable {
+                &:hover {
+                    outline-style: solid;
+                    cursor: text;
+                }
+            }
+            &::focus {
+                outline-style: solid;
+                background: var(--plugin--background);
+            }
+            &.edited {
+                outline-style: dashed;
+            }
+            &.invalid {
+                outline-color: var(--error--color);
+            }
+
+            .sidebar_header_title {
+                line-height: normal;
+                margin: 0;
+                flex: 1;
+                padding-left: 5px;
+                background: none;
+                outline: none;
+                color: unset;
+
+                &:disabled {
+                    background: none;
+                    outline: none;
+                    color: unset;
+                }
+            }
+        }
+    }
+
+    label#color-label:before {
+        content: var(--color-label--content, "Color");
+    }
+
+    label#format-label:before {
+        content: var(--format-label--content, "Format");
+    }
+
+    label#timezone-label:before {
+        content: var(--timezone-label--content, "Timezone");
+    }
+
+    label#date-style-label:before {
+        content: var(--date-style-label--content, "Date Style");
+    }
+
+    label#time-style-label:before {
+        content: var(--time-style-label--content, "Time Style");
+    }
+
+    label#foreground-label:before {
+        content: var(--foreground-label--content, "Foreground");
+    }
+
+    label#background-label:before {
+        content: var(--background-label--content, "Background");
+    }
+
+    label#series-label:before {
+        content: var(--series-label--content, "Series");
+    }
+
+    label#color-range-label:before {
+        content: var(--color-range-label--content, "Color Range");
+    }
+
+    label#style-label:before {
+        content: var(--style-label--content, "Style");
+    }
+
+    label#minimum-integer-digits-label:before {
+        content: var(
+            --minimum-integer-digits-label--content,
+            "Minimum Integer Digits"
+        );
+    }
+
+    label#rounding-increment-label:before {
+        content: var(--rounding-increment-label--content, "Rounding Increment");
+    }
+
+    label#notation-label:before {
+        content: var(--notation-label--content, "Notation");
+    }
+
+    label#use-grouping-label:before {
+        content: var(--use-grouping-label--content, "Use Grouping");
+    }
+
+    label#sign-display-label:before {
+        content: var(--sign-display-label--content, "Sign Display");
+    }
+
+    label#aggregate-depth-label:before {
+        content: var(--aggregate-depth-label--content, "Aggregate Depth");
+    }
+
+    label#max-value-label:before {
+        content: var(--max-value-label--content, "Max Value");
+    }
+
+    label#rounding-priority-label:before {
+        content: var(--rounding-priority-label--content, "Rounding Priority");
+    }
+
+    label#rounding-mode-label:before {
+        content: var(--rounding-mode-label--content, "Rounding Mode");
+    }
+
+    label#trailing-zero-display-label:before {
+        content: var(
+            --trailing-zero-display-label--content,
+            "Trailing Zero Display"
+        );
+    }
+
+    label#significant-digits-label:before {
+        content: var(--significant-digits-label--content, "Significant Digits");
+    }
+
+    label#fractional-digits-label:before {
+        content: var(--fractional-digits-label--content, "Fractional Digits");
+    }
+
+    label#year-label:before {
+        content: var(--year-label--content, "Year");
+    }
+
+    label#month-label:before {
+        content: var(--month-label--content, "Month");
+    }
+
+    label#day-label:before {
+        content: var(--day-label--content, "Day");
+    }
+
+    label#weekday-label:before {
+        content: var(--weekday-label--content, "Weekday");
+    }
+
+    label#hour-label:before {
+        content: var(--hour-label--content, "Hour");
+    }
+
+    label#minute-label:before {
+        content: var(--minute-label--content, "Minute");
+    }
+
+    label#second-label:before {
+        content: var(--second-label--content, "Second");
+    }
+
+    label#fractional-seconds-label:before {
+        content: var(--fractional-seconds-label--content, "Fractional Seconds");
+    }
+
+    label#hours-label:before {
+        content: var(--hours-label--content, "12/24 Hours");
+    }
+
+    div.tab-title#Style:before {
+        content: var(--style-tab-label--content, "Style");
+    }
+
+    div.tab-title#Attributes:before {
+        content: var(--attributes-tab-label--content, "Attributes");
+    }
+}

package/src/less/column-style.less

@@ -0,0 +1,319 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@mixin icon {
+    background-repeat: no-repeat;
+    background-color: var(--icon--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+}
+
+:host {
+    #column-style-container {
+        outline: none;
+        user-select: none;
+
+        &.no-style {
+            font-style: italic;
+            background-color: #8b868045;
+        }
+
+        .is-default-value .dropdown-width-container {
+            background-color: var(--plugin--background);
+        }
+
+        .dropdown-width-container {
+            cursor: pointer;
+            height: 24px;
+            border: 1px solid transparent;
+            border-radius: 2px;
+            padding: 0 8px;
+            border-radius: 2px;
+            // border: 1px solid transparent;
+            border-color: var(--inactive--color, #666);
+
+            &:hover {
+                background-color: var(--plugin--background);
+            }
+        }
+
+        select {
+            cursor: pointer;
+            font-size: 10px;
+            height: 22px;
+            // padding-bottom: 2px;
+            // border-bottom: 1px solid var(--input--border-color, #ccc);
+            padding: 0 8px;
+        }
+
+        label {
+            display: block;
+            font-size: var(--label--font-size, 0.75em);
+            margin: 4px 0 2px 0;
+            width: 100%;
+        }
+
+        span.reset-default-style-disabled {
+            margin-left: 4px;
+            width: 14px;
+            height: 14px;
+            border: 1px solid var(--inactive--border-color);
+            border-radius: 2px;
+        }
+
+        span.reset-default-style {
+            cursor: pointer;
+            width: 22px;
+            height: 22px;
+            margin-right: -4px;
+
+            &:before {
+                @include icon;
+                width: 22px;
+                height: 22px;
+                -webkit-mask-image: var(--close-icon--mask-image);
+                mask-image: var(--close-icon--mask-image);
+            }
+        }
+
+        .is-default-value input.parameter {
+            background-color: var(--plugin--background);
+        }
+
+        input.parameter {
+            background: none;
+            color: inherit;
+            border: 0px solid transparent;
+            outline: none;
+        }
+
+        input.parameter[type="number"] {
+            flex: 1 1 auto;
+            text-align: left;
+            font-family: inherit;
+            width: 0;
+            border-radius: 2px;
+            font-size: 10px;
+            height: 24px;
+            padding-left: 8px;
+            border-width: 1px;
+            border-color: var(
+                --input--border-color,
+                var(--inactive--color, inherit)
+            );
+        }
+
+        input.parameter.parameter-min[type="number"] {
+            border-radius: 2px 0 0 2px;
+        }
+
+        input.parameter.parameter-max[type="number"] {
+            border-radius: 0 2px 2px 0;
+            border-left-width: 0px;
+        }
+
+        input[type="number"]::-webkit-inner-spin-button,
+        input[type="number"]::-webkit-outer-spin-button {
+            opacity: 1;
+            background: transparent;
+            background-color: transparent;
+        }
+
+        .column-style-label {
+            display: flex;
+            padding: 4px 0px;
+        }
+
+        .indent {
+            margin-left: 24px;
+        }
+
+        input[type="radio"] {
+            appearance: none;
+
+            &:checked:before {
+                -webkit-mask-image: var(--column-radio-on--mask-image);
+                mask-image: var(--column-radio-on--mask-image);
+            }
+
+            &:before {
+                @include icon;
+                width: 10px;
+                height: 10px;
+                -webkit-mask-image: var(--column-radio-off--mask-image);
+                mask-image: var(--column-radio-off--mask-image);
+            }
+
+            &:hover:before {
+                -webkit-mask-image: var(--column-radio-hover--mask-image);
+                mask-image: var(--column-radio-hover--mask-image);
+            }
+        }
+
+        div.section {
+            display: flex;
+            align-items: center;
+            flex: 1 1 100%;
+        }
+
+        div.bool-field {
+            display: flex;
+            label {
+                padding: 0 8px;
+            }
+        }
+
+        div.inner_section {
+            margin-top: 4px;
+            width: 0px;
+            margin-bottom: 8px;
+            flex: 1 1 100%;
+        }
+
+        div.row {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            margin-bottom: 10px;
+        }
+
+        fieldset {
+            margin: 0;
+        }
+
+        fieldset.style-control {
+            border: none;
+            padding: 0px 0;
+        }
+
+        .color-gradient-container {
+            display: flex;
+            align-items: center;
+            flex-wrap: nowrap;
+            flex: 1 1 100%;
+            .color-thermometer {
+                flex: 1 1 auto;
+                height: 24px;
+            }
+        }
+
+        .color-selector {
+            display: grid;
+
+            input {
+                grid-column: 1;
+                grid-row: 1;
+            }
+            .color-label {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: 14px;
+                grid-column: 1;
+                grid-row: 1;
+                margin: 0;
+                font-family: var(--button--font-family, inherit);
+                color: var(--sign--color, white);
+                width: 36px;
+                height: 24px;
+                text-align: center;
+                z-index: 1;
+            }
+        }
+
+        input[type="color"] {
+            width: 100%;
+            height: 24px;
+            cursor: pointer;
+            padding: 0;
+            font-family: inherit;
+            overflow: hidden;
+            border-radius: 12px;
+
+            &:hover {
+                opacity: 0.8;
+            }
+
+            &.pos-color-param {
+                width: 36px;
+                border-radius: 12px 0 0 12px;
+                margin: 0 1px 0 0;
+            }
+
+            &.neg-color-param {
+                width: 36px;
+                border-radius: 0 12px 12px 0;
+                margin: 0 0 0 1px;
+            }
+        }
+
+        ::-webkit-color-swatch-wrapper {
+            padding: 0;
+        }
+
+        ::-webkit-color-swatch {
+            border: 0;
+            border-radius: 0;
+        }
+
+        ::-moz-color-swatch,
+        ::-moz-focus-inner {
+            border: 0;
+        }
+
+        ::-moz-focus-inner {
+            padding: 0;
+        }
+
+        .operator {
+            font-family: inherit;
+            white-space: pre;
+        }
+
+        input[disabled]:before {
+            opacity: 0.5;
+        }
+
+        input.parameter[disabled] {
+            opacity: 0.5;
+        }
+
+        button#datetime_format {
+            appearance: none;
+            background: none;
+            color: inherit;
+            border: 1px solid var(--inactive--color);
+            border-radius: 3px;
+            font-family: inherit;
+            padding: 6px;
+            font-size: 10px;
+            width: 100%;
+            cursor: pointer;
+
+            &:before {
+                content: attr(data-title);
+            }
+
+            &:hover {
+                border-color: var(--icon--color);
+                background-color: var(--icon--color);
+                color: var(--plugin--background);
+            }
+
+            &:hover:before {
+                content: attr(data-title-hover);
+            }
+        }
+    }
+}

package/src/less/column-symbol-attributes.less

@@ -0,0 +1,73 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 {
+    #attributes-symbols {
+        position: relative;
+        svg {
+            width: 15px;
+            height: auto;
+            color: var(--icon--color);
+            fill: var(--icon--color);
+            background: none;
+        }
+
+        .toggle-mode.is_column_active {
+            margin: 0;
+            padding: 0;
+        }
+
+        .row-selector {
+            flex: 1;
+            min-width: 0px;
+            .column-selector-column-border {
+                min-height: 24px;
+            }
+
+            input.column-empty-input {
+                padding: 0 4px;
+                margin: 0;
+                width: 100%;
+            }
+
+            .row-selector-errored input {
+                border-color: var(--error--color);
+            }
+        }
+
+        .pairs-list-item .dropdown-width-container {
+            flex: 0 1 75px;
+        }
+
+        &:before {
+            font-size: var(--label--font-size, 0.75em);
+            left: 0px;
+            padding: var(--column_type--padding, 0px 0px 0px 0px);
+            position: absolute;
+            margin-top: -15px;
+            content: attr(data-label);
+        }
+
+        &.pairs-list[data-label] {
+            margin-top: 24px;
+        }
+
+        .column_name {
+            padding: 0;
+            margin: 0 8px;
+        }
+
+        .symbol-selector-wrapper {
+            width: 75px;
+        }
+    }
+}