From 7d2be2a6cbf1863c2d7783c6632d90b884400a92 Mon Sep 17 00:00:00 2001 From: Andrew Stein Date: Sat, 9 Mar 2024 23:59:43 -0500 Subject: [PATCH 1/2] Localization support --- .../src/js/custom_elements/toolbar.js | 4 +- .../src/js/data_listener/formatter_cache.js | 8 +- .../src/js/data_listener/index.js | 2 +- .../src/js/model/toolbar.js | 10 -- .../src/less/regular_table.less | 9 ++ .../src/less/toolbar.less | 30 +++- .../perspective/src/js/perspective.node.js | 6 +- rust/perspective-viewer/Cargo.lock | 17 --- rust/perspective-viewer/Cargo.toml | 3 - rust/perspective-viewer/build.rs | 1 + .../src/less/column-dropdown.less | 6 +- .../src/less/column-selector.less | 39 ++++- .../src/less/column-settings-panel.less | 138 +++++++++++++++++- .../src/less/column-style.less | 3 +- .../src/less/column-symbol-attributes.less | 2 +- .../src/less/config-selector.less | 19 +-- .../src/less/containers/dropdown-menu.less | 14 +- .../src/less/containers/tabs.less | 1 - .../src/less/empty-column.less | 1 - .../src/less/expression-editor.less | 2 - .../src/less/filter-dropdown.less | 2 +- .../src/less/filter-item.less | 2 - .../src/less/form/code-editor.less | 6 +- .../src/less/function-dropdown.less | 2 +- .../src/less/plugin-selector.less | 6 + .../src/less/render-warning.less | 2 - .../src/less/status-bar.less | 30 +++- rust/perspective-viewer/src/less/viewer.less | 4 +- .../src/rust/components/column_dropdown.rs | 2 +- .../column_selector/active_column.rs | 17 +++ .../column_selector/add_expression_button.rs | 2 +- .../column_settings_sidebar/style_tab.rs | 4 +- .../rust/components/containers/tab_list.rs | 2 +- .../rust/components/datetime_column_style.rs | 25 ++-- .../datetime_column_style/custom.rs | 18 +-- .../datetime_column_style/simple.rs | 4 +- .../components/form/color_range_selector.rs | 3 +- .../rust/components/form/color_selector.rs | 2 +- .../rust/components/form/optional_field.rs | 6 +- .../rust/components/number_column_style.rs | 6 +- .../src/rust/components/plugin_selector.rs | 15 +- .../src/rust/components/status_bar.rs | 11 +- .../src/rust/components/status_bar_counter.rs | 27 ++-- .../rust/components/string_column_style.rs | 10 +- .../number_string_format/digits_section.rs | 16 +- .../number_string_format/misc_section.rs | 8 +- .../number_string_format/style_section.rs | 12 +- .../src/rust/config/columns_config.rs | 6 +- .../src/rust/config/number_string_format.rs | 2 - rust/perspective-viewer/src/rust/utils/mod.rs | 2 + .../src/rust/utils/number_format.rs | 49 +++++++ rust/perspective-viewer/src/themes/icons.less | 11 -- rust/perspective-viewer/src/themes/intl.less | 97 ++++++++++++ rust/perspective-viewer/tasks/lint/main.rs | 2 +- .../test/js/column_settings.spec.ts | 14 +- .../test/js/column_settings/datagrid.spec.ts | 6 +- .../js/column_settings/interactions.spec.ts | 30 +++- .../number_string_format.spec.ts | 3 +- rust/perspective-viewer/test/js/intl.spec.js | 45 ++++++ tools/perspective-scripts/lint.mjs | 2 +- tools/perspective-test/playwright.config.ts | 2 +- tools/perspective-test/results.tar.gz | Bin 226884 -> 226813 bytes .../src/js/models/column_settings.ts | 4 +- .../src/js/models/settings_panel.ts | 2 +- 64 files changed, 612 insertions(+), 224 deletions(-) create mode 100644 rust/perspective-viewer/src/rust/utils/number_format.rs create mode 100644 rust/perspective-viewer/src/themes/intl.less create mode 100644 rust/perspective-viewer/test/js/intl.spec.js diff --git a/packages/perspective-viewer-datagrid/src/js/custom_elements/toolbar.js b/packages/perspective-viewer-datagrid/src/js/custom_elements/toolbar.js index a9cfbf2778..45c8b78931 100644 --- a/packages/perspective-viewer-datagrid/src/js/custom_elements/toolbar.js +++ b/packages/perspective-viewer-datagrid/src/js/custom_elements/toolbar.js @@ -34,9 +34,9 @@ export class HTMLPerspectiveViewerDatagridToolbarElement extends HTMLElement {
- Free Scroll + - Read Only +
`; diff --git a/packages/perspective-viewer-datagrid/src/js/data_listener/formatter_cache.js b/packages/perspective-viewer-datagrid/src/js/data_listener/formatter_cache.js index c9db920871..5855323053 100644 --- a/packages/perspective-viewer-datagrid/src/js/data_listener/formatter_cache.js +++ b/packages/perspective-viewer-datagrid/src/js/data_listener/formatter_cache.js @@ -51,7 +51,7 @@ export class FormatterCache { options.timeStyle = type_config.format.timeStyle; } - return new Intl.DateTimeFormat([], options); + return new Intl.DateTimeFormat(navigator.languages, options); } else { const options = { // ...type_config.format, @@ -112,7 +112,7 @@ export class FormatterCache { options.hour12 = true; } - return new Intl.DateTimeFormat([], options); + return new Intl.DateTimeFormat(navigator.languages, options); } } else { const options = { @@ -126,7 +126,7 @@ export class FormatterCache { options.dateStyle = type_config.format.dateStyle; } - return new Intl.DateTimeFormat([], options); + return new Intl.DateTimeFormat(navigator.languages, options); } } @@ -136,7 +136,7 @@ export class FormatterCache { format = plugin.number_format; } - return new FORMATTER_CONS[type]([], format); + return new FORMATTER_CONS[type](navigator.languages, format); } create_boolean_formatter(type, plugin) { diff --git a/packages/perspective-viewer-datagrid/src/js/data_listener/index.js b/packages/perspective-viewer-datagrid/src/js/data_listener/index.js index cb932c4a78..9bbed7b989 100644 --- a/packages/perspective-viewer-datagrid/src/js/data_listener/index.js +++ b/packages/perspective-viewer-datagrid/src/js/data_listener/index.js @@ -94,7 +94,7 @@ export function createDataListener(viewer) { ); metadata.push(column); if (is_settings_open) { - path_parts.push("Edit"); + path_parts.push(""); } column_headers.push(path_parts); diff --git a/packages/perspective-viewer-datagrid/src/js/model/toolbar.js b/packages/perspective-viewer-datagrid/src/js/model/toolbar.js index 236a49f483..6d0c88a19e 100644 --- a/packages/perspective-viewer-datagrid/src/js/model/toolbar.js +++ b/packages/perspective-viewer-datagrid/src/js/model/toolbar.js @@ -19,11 +19,6 @@ export function toggle_edit_mode(force = undefined) { this.classList.toggle("editable", force); if (this._edit_mode !== undefined) { this._edit_mode.classList.toggle("editable", force); - if (force) { - this._edit_mode.children[0].textContent = "Editable"; - } else { - this._edit_mode.children[0].textContent = "Read Only"; - } } } @@ -36,10 +31,5 @@ export function toggle_scroll_lock(force = undefined) { this.classList.toggle("sub-cell-scroll-disabled", force); if (this._scroll_lock !== undefined) { this._scroll_lock.classList.toggle("lock-scroll", force); - if (!force) { - this._scroll_lock.children[0].textContent = "Free Scroll"; - } else { - this._scroll_lock.children[0].textContent = "Align Scroll"; - } } } diff --git a/packages/perspective-viewer-datagrid/src/less/regular_table.less b/packages/perspective-viewer-datagrid/src/less/regular_table.less index bb731d551a..0a82fdac68 100644 --- a/packages/perspective-viewer-datagrid/src/less/regular_table.less +++ b/packages/perspective-viewer-datagrid/src/less/regular_table.less @@ -319,9 +319,18 @@ regular-table table { 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; } diff --git a/packages/perspective-viewer-datagrid/src/less/toolbar.less b/packages/perspective-viewer-datagrid/src/less/toolbar.less index b2ce63a65f..1df187f8fd 100644 --- a/packages/perspective-viewer-datagrid/src/less/toolbar.less +++ b/packages/perspective-viewer-datagrid/src/less/toolbar.less @@ -58,6 +58,22 @@ -webkit-mask-image: var(--toolbar-edit-mode-active--content); } +#edit_mode span:before { + content: var(--edit-mode-toggle--content, "Read Only"); +} + +#edit_mode.editable span:before { + content: var(--edit-mode-alt-toggle--content, "Editable"); +} + +#scroll_lock span:before { + content: var(--scroll-lock-toggle--content, "Free Scroll"); +} + +#scroll_lock.lock-scroll span:before { + content: var(--scroll-lock-alt-toggle--content, "Align Scroll"); +} + :host(.aggregated) #toolbar #edit_mode { display: none; } @@ -78,15 +94,16 @@ } .button { - display: inline-flex; align-items: center; - user-select: none; - width: 37px; - height: 22px; + border-radius: 3px; + border: 1px solid transparent; box-sizing: border-box; + display: inline-flex; + font-size: var(--label--font-size, 0.75em); + height: 22px; + user-select: none; white-space: nowrap; - border: 1px solid transparent; - border-radius: 3px; + width: 37px; } .button > span { @@ -112,6 +129,5 @@ .button:hover > span { display: contents; - font-size: 9px; line-height: 36px; } diff --git a/packages/perspective/src/js/perspective.node.js b/packages/perspective/src/js/perspective.node.js index cfaa16ddd4..2f09fd2430 100644 --- a/packages/perspective/src/js/perspective.node.js +++ b/packages/perspective/src/js/perspective.node.js @@ -89,9 +89,9 @@ const DEFAULT_ASSETS = [ ]; const CONTENT_TYPES = { - ".js": "text/javascript", - ".css": "text/css", - ".json": "application/json", + ".js": "text/javascript; charset=utf-8", + ".css": "text/css; charset=utf-8", + ".json": "application/json; charset=utf-8", ".arrow": "arraybuffer", ".feather": "arraybuffer", ".wasm": "application/wasm", diff --git a/rust/perspective-viewer/Cargo.lock b/rust/perspective-viewer/Cargo.lock index 7fa67a430f..f6c2b7f45c 100644 --- a/rust/perspective-viewer/Cargo.lock +++ b/rust/perspective-viewer/Cargo.lock @@ -101,12 +101,6 @@ version = "0.13.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "d301b3b94cb4b2f23d7917810addbbaff90738e0ca2be692bd027e70d7e0330c" -[[package]] -name = "arrayvec" -version = "0.7.4" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "96d30a06541fbafbc7f82ed10c06164cfbd2c401138f6addd8404629c4b16711" - [[package]] name = "async-lock" version = "2.8.0" @@ -1335,16 +1329,6 @@ version = "0.1.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "51d515d32fb182ee37cda2ccdcb92950d6a3c2893aa280e540671c2cd0f3b1d9" -[[package]] -name = "num-format" -version = "0.4.4" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "a652d9771a63711fd3c3deb670acfbe5c30a4072e664d7a3bf5a9e1056ac72c3" -dependencies = [ - "arrayvec", - "itoa", -] - [[package]] name = "num-traits" version = "0.2.17" @@ -1420,7 +1404,6 @@ dependencies = [ "js-intern", "js-sys", "nom", - "num-format", "procss", "rmp-serde", "serde", diff --git a/rust/perspective-viewer/Cargo.toml b/rust/perspective-viewer/Cargo.toml index 8268a8b46d..ba447391aa 100644 --- a/rust/perspective-viewer/Cargo.toml +++ b/rust/perspective-viewer/Cargo.toml @@ -99,9 +99,6 @@ js-sys = "0.3.64" # Parse ExprTK for syntax highlighting. nom = "7.1.1" -# Comma-sep numeric representation -num-format = "0.4.4" - # MessagePack serialization rmp-serde = "1.1.1" diff --git a/rust/perspective-viewer/build.rs b/rust/perspective-viewer/build.rs index 633742f2b4..8c5eaebb2f 100644 --- a/rust/perspective-viewer/build.rs +++ b/rust/perspective-viewer/build.rs @@ -58,6 +58,7 @@ fn main() -> Result<(), anyhow::Error> { if !cfg!(feature = "define_custom_elements_async") { build.add_file("variables.less"); build.add_file("icons.less"); + build.add_file("intl.less"); build.add_file("pro.less"); build.add_file("pro-dark.less"); build.add_file("monokai.less"); diff --git a/rust/perspective-viewer/src/less/column-dropdown.less b/rust/perspective-viewer/src/less/column-dropdown.less index 9261292d95..f49c5eff75 100644 --- a/rust/perspective-viewer/src/less/column-dropdown.less +++ b/rust/perspective-viewer/src/less/column-dropdown.less @@ -24,7 +24,7 @@ position: fixed; z-index: 10000; outline: none; - font-size: 12px; + font-size: 0.75em; border: inherit; // box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%); user-select: none; @@ -56,6 +56,10 @@ font-size: 8px; } + .no-results:before { + content: var(--no-results--content, "Invalid Column"); + } + #add-expression { &:before { @include icon; diff --git a/rust/perspective-viewer/src/less/column-selector.less b/rust/perspective-viewer/src/less/column-selector.less index b789134af3..e2fe08dd7f 100644 --- a/rust/perspective-viewer/src/less/column-selector.less +++ b/rust/perspective-viewer/src/less/column-selector.less @@ -23,6 +23,10 @@ } :host { + #add-expression-button:before { + content: var(--add-expression-button--content, "New Column"); + } + .column-selector-column-title { display: flex; width: 100%; @@ -80,7 +84,6 @@ border: var(--column-add--border, 1px solid transparent); min-height: 24px; flex-direction: row; - font-size: 12px; background-color: #8b868045; border-radius: 2px; display: flex; @@ -184,7 +187,6 @@ display: flex; flex-direction: row-reverse; align-items: center; - font-size: 12px; // Expression column toolbar buttons span.expression-edit-button, @@ -233,7 +235,6 @@ cursor: move; display: flex; align-items: start; - font-size: 12px; flex-grow: 1; color: inherit; box-sizing: border-box; @@ -315,12 +316,12 @@ } #sub-columns:before { - font-size: 9px; + font-size: var(--label--font-size, 0.75em); padding: var(--column_type--padding, 0px 0px 0px 0px); position: absolute; margin-top: 14px; top: 0; - content: "All Columns"; + content: var(--all-columns-label--content, "All Columns"); } #sub-columns #add-expression { @@ -393,6 +394,30 @@ } } + // .column-selector-column[data-index="0"]:before { + // content: var(--column-selector-column-0--label, attr(data-label)); + // } + + // .column-selector-column[data-index="1"]:before { + // content: var(--column-selector-column-1--label, attr(data-label)); + // } + + // .column-selector-column[data-index="2"]:before { + // content: var(--column-selector-column-2--label, attr(data-label)); + // } + + // .column-selector-column[data-index="3"]:before { + // content: var(--column-selector-column-3--label, attr(data-label)); + // } + + // .column-selector-column[data-index="4"]:before { + // content: var(--column-selector-column-4--label, attr(data-label)); + // } + + // .column-selector-column[data-index="5"]:before { + // content: var(--column-selector-column-5--label, attr(data-label)); + // } + .column-selector-column { position: relative; @@ -406,12 +431,12 @@ } &:before { - font-size: 9px; + font-size: var(--label--font-size, 0.75em); left: 0px; padding: var(--column_type--padding, 0px 0px 0px 0px); position: absolute; margin-top: -43px; - content: attr(data-label); + content: var(--default-column-title, attr(data-label)); } &[data-label] { diff --git a/rust/perspective-viewer/src/less/column-settings-panel.less b/rust/perspective-viewer/src/less/column-settings-panel.less index aeb435a796..5275b7bf72 100644 --- a/rust/perspective-viewer/src/less/column-settings-panel.less +++ b/rust/perspective-viewer/src/less/column-settings-panel.less @@ -25,7 +25,7 @@ .item_title { flex: 0 0 auto; - font-size: 9px; + font-size: var(--label--font-size, 0.75em); } .radio-list-item label { @@ -41,7 +41,7 @@ border: none; margin-bottom: 0.5em; font-family: inherit; - font-size: 12px; + font-size: 1em; &:disabled { background-color: var(--inactive--color); } @@ -94,4 +94,138 @@ } } } + + 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#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"); + } } diff --git a/rust/perspective-viewer/src/less/column-style.less b/rust/perspective-viewer/src/less/column-style.less index 21c6a0a713..9d3f642bb2 100644 --- a/rust/perspective-viewer/src/less/column-style.less +++ b/rust/perspective-viewer/src/less/column-style.less @@ -22,7 +22,6 @@ :host { #column-style-container { outline: none; - font-size: 12px; user-select: none; &.no-style { @@ -60,7 +59,7 @@ label { display: block; - font-size: 9px; + font-size: var(--label--font-size, 0.75em); margin: 4px 0 2px 0; width: 100%; } diff --git a/rust/perspective-viewer/src/less/column-symbol-attributes.less b/rust/perspective-viewer/src/less/column-symbol-attributes.less index 9bd247e2f4..83ac78dee5 100644 --- a/rust/perspective-viewer/src/less/column-symbol-attributes.less +++ b/rust/perspective-viewer/src/less/column-symbol-attributes.less @@ -49,7 +49,7 @@ } &:before { - font-size: 9px; + font-size: var(--label--font-size, 0.75em); left: 0px; padding: var(--column_type--padding, 0px 0px 0px 0px); position: absolute; diff --git a/rust/perspective-viewer/src/less/config-selector.less b/rust/perspective-viewer/src/less/config-selector.less index ce9a4b2872..aa22a451f2 100644 --- a/rust/perspective-viewer/src/less/config-selector.less +++ b/rust/perspective-viewer/src/less/config-selector.less @@ -162,23 +162,19 @@ } #group_by label.pivot-selector-label:before { - content: var(--group_by--content, "Group By"); + content: var(--group-by-label--content, "Group By"); } #split_by label.pivot-selector-label:before { - content: var(--split_by--content, "Split By"); + content: var(--split-by-label--content, "Split By"); } #sort label.pivot-selector-label:before { - content: "Order By"; + content: var(--sort-label--content, "Order By"); } - // #filter { - // min-width: 300px; - // } - #filter label.pivot-selector-label:before { - content: "Where"; + content: var(--filter-label--content, "Where"); } .highlight-drop { @@ -235,7 +231,6 @@ display: none; margin: 0; padding: 0 0 0 0; - font-size: 12px; min-height: 26px; // margin-bottom: -1px; @@ -259,7 +254,7 @@ // color: var(--inactive--color); white-space: nowrap; padding: var(--column-drop-container--padding, 0px); - font-size: 12px; + font-size: var(--label--font-size, 0.75em); display: inline-block; } @@ -271,7 +266,7 @@ position: absolute; top: 0px; margin: var(--column-drop-label--margin, -16px 0px 0px 0px); - font-size: 9px; //var(--column-drop-label--font-size, 10px); + font-size: var(--label--font-size, 0.75em); display: var(--column-drop-label--display, none); } @@ -279,7 +274,7 @@ cursor: pointer; flex-grow: 0; font-family: inherit; - font-size: 9px; + font-size: var(--label--font-size, 0.75em); user-select: none; padding: 0; align-self: center; diff --git a/rust/perspective-viewer/src/less/containers/dropdown-menu.less b/rust/perspective-viewer/src/less/containers/dropdown-menu.less index 98e1b22308..10b5e22714 100644 --- a/rust/perspective-viewer/src/less/containers/dropdown-menu.less +++ b/rust/perspective-viewer/src/less/containers/dropdown-menu.less @@ -14,7 +14,7 @@ position: fixed; z-index: 10000; outline: none; - font-size: 14px; + font-size: 0.75em; border: inherit; box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%); user-select: none; @@ -26,9 +26,7 @@ min-width: 80px; code { - font-size: 12px; - font-family: var(--interface-monospace--font-family), - monospace; + font-family: var(--interface-monospace--font-family), monospace; } input { @@ -38,9 +36,7 @@ border: none; border-bottom: 1px solid var(--inactive--color, #ccc); background: transparent; - font-family: var(--interface-monospace--font-family), - monospace; - font-size: 12px; + font-family: var(--interface-monospace--font-family), monospace; color: inherit; outline: none; } @@ -55,7 +51,7 @@ } .dropdown-group-label { - font-size: 10px; + font-size: var(--label--font-size, 0.75em); } .dropdown-group-container { @@ -90,4 +86,4 @@ .dropdown-group-container span:hover { background-color: rgba(0, 0, 0, 0.05); } -} \ No newline at end of file +} diff --git a/rust/perspective-viewer/src/less/containers/tabs.less b/rust/perspective-viewer/src/less/containers/tabs.less index 4a3cafce8e..32577c08d1 100644 --- a/rust/perspective-viewer/src/less/containers/tabs.less +++ b/rust/perspective-viewer/src/less/containers/tabs.less @@ -72,7 +72,6 @@ // border-bottom: 1px solid var(--inactive--border-color); } .text { - font-size: 14px; margin-left: 1em; } } diff --git a/rust/perspective-viewer/src/less/empty-column.less b/rust/perspective-viewer/src/less/empty-column.less index cb7e912031..6aab52ca04 100644 --- a/rust/perspective-viewer/src/less/empty-column.less +++ b/rust/perspective-viewer/src/less/empty-column.less @@ -59,7 +59,6 @@ width: calc(100% - 7px); outline: none; padding-left: 10px; - font-size: 12px; font-family: inherit; } diff --git a/rust/perspective-viewer/src/less/expression-editor.less b/rust/perspective-viewer/src/less/expression-editor.less index 5736230f8e..6250d3a407 100644 --- a/rust/perspective-viewer/src/less/expression-editor.less +++ b/rust/perspective-viewer/src/less/expression-editor.less @@ -24,7 +24,6 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - font-size: 12px; min-height: 1.5em; color: var(--error--color); top: 0; @@ -125,7 +124,6 @@ flex: 1; justify-content: center; font-family: inherit; - font-size: 12px; border: 1px solid var(--icon--color); height: 18px; padding: 2px 12px; diff --git a/rust/perspective-viewer/src/less/filter-dropdown.less b/rust/perspective-viewer/src/less/filter-dropdown.less index 2a0d1ed399..3ddbd15023 100644 --- a/rust/perspective-viewer/src/less/filter-dropdown.less +++ b/rust/perspective-viewer/src/less/filter-dropdown.less @@ -14,7 +14,7 @@ position: fixed; z-index: 10000; outline: none; - font-size: 12px; + font-size: 0.75em; border: inherit; box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%); user-select: none; diff --git a/rust/perspective-viewer/src/less/filter-item.less b/rust/perspective-viewer/src/less/filter-item.less index 5bbf333efd..f3a74bc845 100644 --- a/rust/perspective-viewer/src/less/filter-item.less +++ b/rust/perspective-viewer/src/less/filter-item.less @@ -22,7 +22,6 @@ align-items: center; position: relative; margin-top: 1px; - font-size: 12px; min-width: 45px; overflow: hidden; height: 16px; @@ -42,7 +41,6 @@ border: none; border-bottom: 1px solid var(--inactive--color, #ccc); background: transparent; - font-size: 12px; color: inherit; } diff --git a/rust/perspective-viewer/src/less/form/code-editor.less b/rust/perspective-viewer/src/less/form/code-editor.less index 671376d600..d2e0b9b2c2 100644 --- a/rust/perspective-viewer/src/less/form/code-editor.less +++ b/rust/perspective-viewer/src/less/form/code-editor.less @@ -21,7 +21,6 @@ padding: 6px; box-sizing: border-box; position: absolute; - font-size: 12px; font-weight: 400; font-family: var(--interface-monospace--font-family, monospace); top: 0; @@ -45,7 +44,6 @@ left: 0; right: 0; pointer-events: none; - font-size: 12px; font-weight: 400; font-family: var(--interface-monospace--font-family, monospace); color: var(--code-editor-error--color, red); @@ -92,8 +90,8 @@ position: absolute; width: 100%; height: 100%; - font-size: 12px; font-family: var(--interface-monospace--font-family, monospace); + font-size: 1em; resize: none; padding: 6px; padding-left: 36px; @@ -107,4 +105,4 @@ background-color: transparent; } } -} \ No newline at end of file +} diff --git a/rust/perspective-viewer/src/less/function-dropdown.less b/rust/perspective-viewer/src/less/function-dropdown.less index 6437cdb252..54be01fb8a 100644 --- a/rust/perspective-viewer/src/less/function-dropdown.less +++ b/rust/perspective-viewer/src/less/function-dropdown.less @@ -14,7 +14,7 @@ position: fixed; z-index: 10000; outline: none; - font-size: 12px; + font-size: 0.75em; border: inherit; box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%); user-select: none; diff --git a/rust/perspective-viewer/src/less/plugin-selector.less b/rust/perspective-viewer/src/less/plugin-selector.less index f723e49241..070aeee050 100644 --- a/rust/perspective-viewer/src/less/plugin-selector.less +++ b/rust/perspective-viewer/src/less/plugin-selector.less @@ -58,6 +58,12 @@ .plugin-select-item-name { padding-left: 10px; + font-size: 1.33333em; + } + + .plugin-select-item-name:before { + // This value is set in a `style` tag from Yew! + content: var(--default-column-title); } .plugin-select-item { diff --git a/rust/perspective-viewer/src/less/render-warning.less b/rust/perspective-viewer/src/less/render-warning.less index 430e7e02e0..dd0bb6e126 100644 --- a/rust/perspective-viewer/src/less/render-warning.less +++ b/rust/perspective-viewer/src/less/render-warning.less @@ -34,7 +34,6 @@ } .plugin_information__text { - font-size: 12px; margin-right: 0.25rem; display: flex; flex-wrap: wrap; @@ -58,7 +57,6 @@ } .plugin_information__action { - font-size: 12px; text-decoration: underline; cursor: pointer; margin-right: 0.25rem; diff --git a/rust/perspective-viewer/src/less/status-bar.less b/rust/perspective-viewer/src/less/status-bar.less index ba53022f35..ae6b83b23a 100644 --- a/rust/perspective-viewer/src/less/status-bar.less +++ b/rust/perspective-viewer/src/less/status-bar.less @@ -47,6 +47,14 @@ right: 0; height: var(--status-bar--height, 48px); border-radius: var(--status-bar--border-radius); + #status-bar-placeholder { + margin: 0px; + } + + input:placeholder-shown + #status-bar-placeholder:before { + content: var(--untitled--content, "untitled"); + color: var(--inactive--color); + } .input-sizer { display: inline-block; @@ -74,7 +82,6 @@ padding: 0; border: none; background: transparent; - font-size: 12px; color: inherit; height: 100%; } @@ -85,7 +92,6 @@ visibility: hidden; white-space: nowrap; padding-right: 12px; - font-size: 12px; } &:focus-within { @@ -111,7 +117,6 @@ overflow: hidden; span { white-space: nowrap; - font-size: 12px; } } @@ -124,7 +129,7 @@ height: 22px; select { height: 20px; - font-size: 9px; + font-size: var(--label--font-size, 0.75em); } } } @@ -138,7 +143,7 @@ } span { - font-size: 9px; + // font-size: var(--label--font-size, 0.75em); margin: 0px 10px; user-select: none; height: 100%; @@ -210,6 +215,9 @@ -webkit-mask-image: url("../svg/export-icon.svg"); mask-image: url("../svg/export-icon.svg"); } + span:before { + content: var(--export-button--content, "Export"); + } } span#lock { @@ -217,6 +225,9 @@ -webkit-mask-image: url("../svg/free-scroll-icon.svg"); mask-image: url("../svg/free-scroll-icon.svg"); } + // span:before { + // content: var(--export-button--content, "Export"); + // } } span#reset { @@ -224,6 +235,9 @@ -webkit-mask-image: url("../svg/revert-icon.svg"); mask-image: url("../svg/revert-icon.svg"); } + span:before { + content: var(--reset-button--content, "Reset"); + } } span#copy { @@ -231,6 +245,9 @@ -webkit-mask-image: url("../svg/duplicate-icon.svg"); mask-image: url("../svg/duplicate-icon.svg"); } + span:before { + content: var(--copy-button--content, "Copy"); + } } span#theme { @@ -248,7 +265,7 @@ color: var(--inactive--color, #ccc); border: 1px solid transparent; border-radius: 3px; - font-size: 9px; + font-size: var(--label--font-size, 0.75em); & > span, & > .dropdown-width-container { @@ -259,7 +276,6 @@ &:before { z-index: 1; - font-size: 14px; } &:hover select { diff --git a/rust/perspective-viewer/src/less/viewer.less b/rust/perspective-viewer/src/less/viewer.less index 0861d8df9c..79bf5c1695 100644 --- a/rust/perspective-viewer/src/less/viewer.less +++ b/rust/perspective-viewer/src/less/viewer.less @@ -57,6 +57,7 @@ flex-direction: column; align-items: stretch; font-family: Arial; + font-size: 0.75em; * { box-sizing: border-box; @@ -227,7 +228,7 @@ &:before { font-feature-settings: "liga"; - content: var(--config-button-icon--content, "\1f527"); + content: var(--config-button-icon--content, "Configure"); } } @@ -293,7 +294,6 @@ #expr_panel_header_title, .sidebar_header_title { padding-left: 9px; - font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/rust/perspective-viewer/src/rust/components/column_dropdown.rs b/rust/perspective-viewer/src/rust/components/column_dropdown.rs index c2343cbdfc..b6df9a4b8f 100644 --- a/rust/perspective-viewer/src/rust/components/column_dropdown.rs +++ b/rust/perspective-viewer/src/rust/components/column_dropdown.rs @@ -147,7 +147,7 @@ impl Component for ColumnDropDown { } }) } } else { - { "Invalid Column" } + } } }; diff --git a/rust/perspective-viewer/src/rust/components/column_selector/active_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/active_column.rs index a24dee7e3c..37d48e9069 100644 --- a/rust/perspective-viewer/src/rust/components/column_selector/active_column.rs +++ b/rust/perspective-viewer/src/rust/components/column_selector/active_column.rs @@ -286,6 +286,20 @@ impl Component for ActiveColumn { } }); + let path: String = name + .0 + .clone() + .unwrap_or_default() + .chars() + .map(|x| { + if x.is_alphanumeric() { + x.to_ascii_lowercase() + } else { + '-' + } + }) + .collect(); + let col_type = ctx.props().get_table_type(); match (name, col_type) { ((label, ColumnState::Empty), _) => { @@ -306,6 +320,7 @@ impl Component for ActiveColumn {
@@ -319,6 +334,7 @@ impl Component for ActiveColumn {
@@ -377,6 +393,7 @@ impl Component for ActiveColumn {
Html { html! {
- { "New Column" } +
} } diff --git a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab.rs b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab.rs index 16e6c685e6..017371516e 100644 --- a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab.rs +++ b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab.rs @@ -22,9 +22,9 @@ use crate::components::datetime_column_style::DatetimeColumnStyle; use crate::components::number_column_style::NumberColumnStyle; use crate::components::string_column_style::StringColumnStyle; use crate::components::style_controls::CustomNumberFormat; -use crate::config::{ColumnConfigValueUpdate, Type, ViewConfigUpdate}; +use crate::config::{ColumnConfigValueUpdate, Type}; use crate::custom_events::CustomEvents; -use crate::model::{PluginColumnStyles, UpdateAndRender}; +use crate::model::PluginColumnStyles; use crate::presentation::Presentation; use crate::renderer::Renderer; use crate::session::Session; diff --git a/rust/perspective-viewer/src/rust/components/containers/tab_list.rs b/rust/perspective-viewer/src/rust/components/containers/tab_list.rs index 43104d13f6..c1197d4f7b 100644 --- a/rust/perspective-viewer/src/rust/components/containers/tab_list.rs +++ b/rust/perspective-viewer/src/rust/components/containers/tab_list.rs @@ -79,7 +79,7 @@ impl Component for TabList { let onclick = ctx.link().callback(move |_| TabListMsg::SetSelected(idx)); html! { -
{ tab.to_string() }
+
} diff --git a/rust/perspective-viewer/src/rust/components/datetime_column_style.rs b/rust/perspective-viewer/src/rust/components/datetime_column_style.rs index 4987fe5ba1..205a51b846 100644 --- a/rust/perspective-viewer/src/rust/components/datetime_column_style.rs +++ b/rust/perspective-viewer/src/rust/components/datetime_column_style.rs @@ -27,6 +27,7 @@ use crate::components::datetime_column_style::custom::DatetimeStyleCustom; use crate::components::datetime_column_style::simple::DatetimeStyleSimple; use crate::components::form::select_field::{SelectEnumField, SelectValueField}; use crate::config::*; +use crate::utils::global::navigator; use crate::utils::WeakScope; use crate::*; @@ -47,7 +48,7 @@ static ALL_TIMEZONES: LazyLock>> = LazyLock::new(|| { static USER_TIMEZONE: LazyLock = LazyLock::new(|| { js_sys::Reflect::get( - &js_sys::Intl::DateTimeFormat::new(&json!([]), &json!({})).resolved_options(), + &js_sys::Intl::DateTimeFormat::new(&navigator().languages(), &json!({})).resolved_options(), &JsValue::from("timeZone"), ) .unwrap() @@ -212,10 +213,10 @@ impl Component for DatetimeColumnStyle { let color_controls = match selected_color_mode { DatetimeColorMode::None => html! {}, DatetimeColorMode::Foreground => { - self.color_select_row(ctx, &DatetimeColorMode::Foreground, "Foreground") + self.color_select_row(ctx, &DatetimeColorMode::Foreground, "foreground-label") }, DatetimeColorMode::Background => { - self.color_select_row(ctx, &DatetimeColorMode::Background, "Background") + self.color_select_row(ctx, &DatetimeColorMode::Background, "background-label") }, }; @@ -224,14 +225,14 @@ impl Component for DatetimeColumnStyle {
- label="Color" + label="color" on_change={color_mode_changed} current_value={selected_color_mode} /> { color_controls } if ctx.props().enable_time_config { - label="Timezone" + label="timezone" values={ALL_TIMEZONES.clone()} default_value={(*USER_TIMEZONE).clone()} on_change={ctx.link().callback(DatetimeColumnStyleMsg::TimezoneChanged)} @@ -256,12 +257,14 @@ impl Component for DatetimeColumnStyle { /> } else if let DatetimeFormatType::Custom(config) = &self.config.date_format { if ctx.props().enable_time_config { -
} if ctx.props().enable_time_config { - label="Year" + label="year" values={number_values.clone()} default_value={CustomDatetimeFormat::TwoDigit} on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Year(x.unwrap_or(CustomDatetimeFormat::TwoDigit)))} current_value={self.config.year} /> - label="Month" + label="month" values={all_values.clone()} default_value={CustomDatetimeFormat::Numeric} on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Month(x.unwrap_or(CustomDatetimeFormat::Numeric)))} current_value={self.config.month} /> - label="Day" + label="day" values={number_values.clone()} default_value={CustomDatetimeFormat::Numeric} on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Day(x.unwrap_or(CustomDatetimeFormat::Numeric)))} current_value={self.config.day} /> - label="Weekday" + label="weekday" values={text_values.clone()} default_value={CustomDatetimeFormat::Disabled} on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Weekday(x.unwrap_or(CustomDatetimeFormat::Disabled)))} current_value={self.config.weekday} /> - label="Hour" + label="hour" values={number_values.clone()} default_value={CustomDatetimeFormat::Numeric} on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Hour(x.unwrap_or(CustomDatetimeFormat::Numeric)))} current_value={self.config.hour} /> - label="Minute" + label="minute" values={number_values.clone()} default_value={CustomDatetimeFormat::Numeric} on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Minute(x.unwrap_or(CustomDatetimeFormat::Numeric)))} current_value={self.config.minute} /> - label="Second" + label="second" values={number_values.clone()} default_value={CustomDatetimeFormat::Numeric} on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Second(x.unwrap_or(CustomDatetimeFormat::Numeric)))} current_value={self.config.second} /> | DatetimeStyleCustomMsg::Hour12(x != Some("24 Hour") ))} diff --git a/rust/perspective-viewer/src/rust/components/datetime_column_style/simple.rs b/rust/perspective-viewer/src/rust/components/datetime_column_style/simple.rs index c406329f53..ba17a8f48e 100644 --- a/rust/perspective-viewer/src/rust/components/datetime_column_style/simple.rs +++ b/rust/perspective-viewer/src/rust/components/datetime_column_style/simple.rs @@ -104,13 +104,13 @@ impl Component for DatetimeStyleSimple { html! { <> - label="Date Style" + label="date-style" on_change={ctx.link().callback(DatetimeStyleSimpleMsg::DateStyleChanged)} current_value={self.config.date_style} /> if ctx.props().enable_time_config { - label="Time Style" + label="time-style" on_change={ctx.link().callback(DatetimeStyleSimpleMsg::TimeStyleChanged)} current_value={self.config.time_style} default_value={SimpleDatetimeFormat::Medium} diff --git a/rust/perspective-viewer/src/rust/components/form/color_range_selector.rs b/rust/perspective-viewer/src/rust/components/form/color_range_selector.rs index b994982aec..8f012367c3 100644 --- a/rust/perspective-viewer/src/rust/components/form/color_range_selector.rs +++ b/rust/perspective-viewer/src/rust/components/form/color_range_selector.rs @@ -72,7 +72,6 @@ pub fn color_chooser_component(props: &ColorRangeProps) -> Html { let fg_pos = infer_fg(&gradient.0); let fg_neg = infer_fg(&gradient.1); - let style = if props.is_gradient { format!( "background:linear-gradient(to right, {} 0%, transparent 50%, {} 100%)", @@ -87,7 +86,7 @@ pub fn color_chooser_component(props: &ColorRangeProps) -> Html { html! { <> - +