From deefa46aeb215d3620109e2becf2a816d4be5905 Mon Sep 17 00:00:00 2001 From: Haydar Metin Date: Wed, 24 Jan 2024 16:11:22 +0100 Subject: [PATCH 01/16] Migrate vscode-webview-ui-toolkit to primereact - Use primereact theme aligned to VSCode - Use formik for input handling - Allow to submit on enter - Show loading icon on fetch - Use lazy loading and virtual scrolling - Fix column alignment - Fix resetting of memory address after webview focus change --- .vscode/settings.json | 11 + media/index.css | 20 + ...{memory-inspector.css => memory-table.css} | 100 +-- media/multi-select.css | 23 + media/options-widget.css | 75 +++ media/primereact-theme/README.md | 5 + media/primereact-theme/base/_base.scss | 121 ++++ .../components/overlay/_confirmpopup.scss | 91 +++ .../components/overlay/_overlaypanel.scss | 83 +++ .../themes/vscode/_extensions.scss | 110 ++++ .../themes/vscode/_fonts.scss | 17 + .../themes/vscode/_variables.scss | 123 ++++ .../primereact-theme/themes/vscode/theme.scss | 20 + .../themes/vscode/variables/_button.scss | 452 ++++++++++++++ .../themes/vscode/variables/_data.scss | 366 +++++++++++ .../themes/vscode/variables/_form.scss | 579 ++++++++++++++++++ .../themes/vscode/variables/_general.scss | 159 +++++ .../themes/vscode/variables/_media.scss | 247 ++++++++ .../themes/vscode/variables/_menu.scss | 303 +++++++++ .../themes/vscode/variables/_message.scss | 159 +++++ .../themes/vscode/variables/_misc.scss | 130 ++++ .../themes/vscode/variables/_overlay.scss | 83 +++ .../themes/vscode/variables/_panel.scss | 332 ++++++++++ media/root.css | 25 + package.json | 26 +- src/plugin/manifest.ts | 2 + src/plugin/memory-webview-main.ts | 12 +- .../{ascii-column.ts => ascii-column.tsx} | 25 +- src/webview/columns/data-column.tsx | 6 +- src/webview/components/memory-table.tsx | 461 +++++++++++--- src/webview/components/memory-widget.tsx | 8 +- src/webview/components/multi-select.tsx | 28 +- src/webview/components/options-widget.tsx | 342 +++++++++-- src/webview/memory-webview-view.tsx | 37 +- src/webview/utils/arrays.ts | 27 + src/webview/utils/view-types.ts | 5 +- webpack.config.js | 10 +- yarn.lock | 340 ++++++++-- 38 files changed, 4621 insertions(+), 342 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 media/index.css rename media/{memory-inspector.css => memory-table.css} (53%) create mode 100644 media/multi-select.css create mode 100644 media/options-widget.css create mode 100644 media/primereact-theme/README.md create mode 100644 media/primereact-theme/base/_base.scss create mode 100644 media/primereact-theme/base/components/overlay/_confirmpopup.scss create mode 100644 media/primereact-theme/base/components/overlay/_overlaypanel.scss create mode 100644 media/primereact-theme/themes/vscode/_extensions.scss create mode 100644 media/primereact-theme/themes/vscode/_fonts.scss create mode 100644 media/primereact-theme/themes/vscode/_variables.scss create mode 100644 media/primereact-theme/themes/vscode/theme.scss create mode 100644 media/primereact-theme/themes/vscode/variables/_button.scss create mode 100644 media/primereact-theme/themes/vscode/variables/_data.scss create mode 100644 media/primereact-theme/themes/vscode/variables/_form.scss create mode 100644 media/primereact-theme/themes/vscode/variables/_general.scss create mode 100644 media/primereact-theme/themes/vscode/variables/_media.scss create mode 100644 media/primereact-theme/themes/vscode/variables/_menu.scss create mode 100644 media/primereact-theme/themes/vscode/variables/_message.scss create mode 100644 media/primereact-theme/themes/vscode/variables/_misc.scss create mode 100644 media/primereact-theme/themes/vscode/variables/_overlay.scss create mode 100644 media/primereact-theme/themes/vscode/variables/_panel.scss create mode 100644 media/root.css rename src/webview/columns/{ascii-column.ts => ascii-column.tsx} (72%) create mode 100644 src/webview/utils/arrays.ts diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..37dde12 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,11 @@ +// If one would like to add/remove/modify user preferences without modifying the content of the +// workspace settings file, then one would need to modify the `settings.json` under here: +// - Windows: %APPDATA%\Code\User\settings.json +// - Linux: $HOME/.config/Code/User/settings.json +// - Mac: $HOME/Library/Application Support/Code/User/settings.json +{ + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + } +} \ No newline at end of file diff --git a/media/index.css b/media/index.css new file mode 100644 index 0000000..2e78279 --- /dev/null +++ b/media/index.css @@ -0,0 +1,20 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +@import "./root.css"; +@import "./multi-select.css"; +@import "./options-widget.css"; +@import "./memory-table.css"; diff --git a/media/memory-inspector.css b/media/memory-table.css similarity index 53% rename from media/memory-inspector.css rename to media/memory-table.css index 877abc8..17667d7 100644 --- a/media/memory-inspector.css +++ b/media/memory-table.css @@ -14,6 +14,11 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ +.memory-inspector-table .group-separator > td { + border-bottom: 2px solid var(--vscode-editor-lineHighlightBorder); +} + +/* == MoreMemorySelect == */ .bytes-select { color: var(--vscode-dropdown-forground); @@ -42,7 +47,7 @@ border-color: transparent; } -.more-memory-select-top:hover { +.more-memory-select:hover .more-memory-select-top { border-bottom: 1px solid; padding-bottom: 0; border-color: var(--vscode-sideBar-foreground); @@ -61,96 +66,3 @@ .more-memory-select select:hover { background: var(--vscode-dropdown-background); } - -.memory-options-widget { - margin-bottom: 8px; -} - -.multi-select { - width: 160px; - display: flex; - flex-direction: column; - text-align: left; -} - -.multi-select-bar { - display: flex; - flex-direction: column; -} - -.multi-select-checkbox { - appearance: none; - -moz-appearance: none; - position: absolute; - left: 0; - top: 0; - margin: 0; - height: 100%; - width: 100%; - cursor: pointer; -} - -.options-widget-title { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; -} - -.advanced-options-toggle { - margin-left: auto; -} - -.advanced-options-content { - position: absolute; - z-index: 1; - margin: 20px -165px; - width: 160px; - padding: 12px; - border-radius: 1px; - background-color: var(--vscode-dropdown-background); - box-shadow: var(--vscode-dropdown-border) 0 2px 4px; - text-align: left; - display: none; - flex-direction: column; -} - -.advanced-options-toggle:focus .advanced-options-content, .advanced-options-content:active, .advanced-options-content:focus-within { - display: flex; -} - -.options-dropdown { - width: 70px; - min-width: 70px; -} - -.options-label { - margin: 10px 0px 2px 0px; - font-weight: bold; -} - -.multi-select-label { - margin-bottom: 2px; - font-weight: bold; -} - -.core-options { - display: flex; - flex-direction: row; - align-items: end; - column-gap: 12px; - margin: 6px 0; -} - -.options-textfield { - width: 100px; -} - -.options-texfield-long { - width: 200px; -} - -.go-button { - /* Match height of inputs */ - height: calc(var(--input-height) * 1px); - align-self: end; -} diff --git a/media/multi-select.css b/media/multi-select.css new file mode 100644 index 0000000..2f31bc3 --- /dev/null +++ b/media/multi-select.css @@ -0,0 +1,23 @@ +/******************************************************************************** + * Copyright (C) 2023-2024 Ericsson, EclipseSource and others. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +.multi-select { + width: 160px; +} + +.multi-select-label { + font-weight: bold; +} diff --git a/media/options-widget.css b/media/options-widget.css new file mode 100644 index 0000000..46a8acb --- /dev/null +++ b/media/options-widget.css @@ -0,0 +1,75 @@ +/******************************************************************************** + * Copyright (C) 2023-2024 Ericsson, EclipseSource and others. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +.memory-options-widget { + margin-bottom: 8px; + padding-bottom: 4px; +} + +.core-options { + display: flex; + flex-direction: row; + align-items: end; + margin: 6px 0; + flex-wrap: wrap; + border-bottom: 1px solid var(--vscode-widget-border); +} + +.form-options { + display: flex; + flex-direction: row; + align-items: start; + flex-wrap: wrap; + column-gap: 12px; + row-gap: 12px; +} + +.form-textfield { + width: 150px; +} + +.form-texfield-long { + width: 200px; +} + +.form-options button[type="submit"] { + /* Match height of inputs */ + height: calc(var(--input-height) * 1px); + margin-top: 1rem; + align-self: start; +} + +.advanced-options-toggle { + margin-left: auto; + align-self: start; + margin-top: 1rem; +} + +.advanced-options-content { + width: 160px; + text-align: left; + display: flex; + flex-direction: column; + gap: 8px; +} + +.advanced-options-dropdown { + width: 100%; +} + +.advanced-options-label { + width: 100%; +} diff --git a/media/primereact-theme/README.md b/media/primereact-theme/README.md new file mode 100644 index 0000000..0395cb1 --- /dev/null +++ b/media/primereact-theme/README.md @@ -0,0 +1,5 @@ +# Theme + +Information regarding how theming works can be taken from: . + +Mapping the VSCode theme to our purposes requires manual work. You can check the CSS by using the devtools in . diff --git a/media/primereact-theme/base/_base.scss b/media/primereact-theme/base/_base.scss new file mode 100644 index 0000000..1be29d9 --- /dev/null +++ b/media/primereact-theme/base/_base.scss @@ -0,0 +1,121 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +@import "~primereact-sass-theme/theme-base/_mixins"; +@import "~primereact-sass-theme/theme-base/_colors"; + +@import "~primereact-sass-theme/theme-base/components/input/_editor"; + +@layer primereact { + @import "~primereact-sass-theme/theme-base/_common"; + + //Input + @import "~primereact-sass-theme/theme-base/components/input/_autocomplete"; + @import "~primereact-sass-theme/theme-base/components/input/_calendar"; + @import "~primereact-sass-theme/theme-base/components/input/_cascadeselect"; + @import "~primereact-sass-theme/theme-base/components/input/_checkbox"; + @import "~primereact-sass-theme/theme-base/components/input/_chips"; + @import "~primereact-sass-theme/theme-base/components/input/_colorpicker"; + @import "~primereact-sass-theme/theme-base/components/input/_dropdown"; + @import "~primereact-sass-theme/theme-base/components/input/_inputgroup"; + @import "~primereact-sass-theme/theme-base/components/input/_inputnumber"; + @import "~primereact-sass-theme/theme-base/components/input/_inputswitch"; + @import "~primereact-sass-theme/theme-base/components/input/_inputtext"; + @import "~primereact-sass-theme/theme-base/components/input/_listbox"; + @import "~primereact-sass-theme/theme-base/components/input/_mention"; + @import "~primereact-sass-theme/theme-base/components/input/_multiselect"; + @import "~primereact-sass-theme/theme-base/components/input/_password"; + @import "~primereact-sass-theme/theme-base/components/input/_radiobutton"; + @import "~primereact-sass-theme/theme-base/components/input/_rating"; + @import "~primereact-sass-theme/theme-base/components/input/_selectbutton"; + @import "~primereact-sass-theme/theme-base/components/input/_slider"; + @import "~primereact-sass-theme/theme-base/components/input/_treeselect"; + @import "~primereact-sass-theme/theme-base/components/input/_togglebutton"; + + //Button + @import "~primereact-sass-theme/theme-base/components/button/_button"; + @import "~primereact-sass-theme/theme-base/components/button/_splitbutton"; + @import "~primereact-sass-theme/theme-base/components/button/_speeddial"; + + //Data + @import "~primereact-sass-theme/theme-base/components/data/_carousel"; + @import "~primereact-sass-theme/theme-base/components/data/_datatable"; + @import "~primereact-sass-theme/theme-base/components/data/_dataview"; + @import "~primereact-sass-theme/theme-base/components/data/_datascroller"; + @import "~primereact-sass-theme/theme-base/components/data/_filter"; + @import "~primereact-sass-theme/theme-base/components/data/_orderlist"; + @import "~primereact-sass-theme/theme-base/components/data/_organizationchart"; + @import "~primereact-sass-theme/theme-base/components/data/_paginator"; + @import "~primereact-sass-theme/theme-base/components/data/_picklist"; + @import "~primereact-sass-theme/theme-base/components/data/_tree"; + @import "~primereact-sass-theme/theme-base/components/data/_treetable"; + @import "~primereact-sass-theme/theme-base/components/data/_timeline"; + + //Panel + @import "~primereact-sass-theme/theme-base/components/panel/_accordion"; + @import "~primereact-sass-theme/theme-base/components/panel/_card"; + @import "~primereact-sass-theme/theme-base/components/panel/_fieldset"; + @import "~primereact-sass-theme/theme-base/components/panel/_divider"; + @import "~primereact-sass-theme/theme-base/components/panel/_panel"; + @import "~primereact-sass-theme/theme-base/components/panel/_splitter"; + @import "~primereact-sass-theme/theme-base/components/panel/_scrollpanel"; + @import "~primereact-sass-theme/theme-base/components/panel/_tabview"; + @import "~primereact-sass-theme/theme-base/components/panel/_toolbar"; + + //Overlay + @import "./components/overlay/_confirmpopup"; + @import "~primereact-sass-theme/theme-base/components/overlay/_dialog"; + @import "./components/overlay/_overlaypanel"; + @import "~primereact-sass-theme/theme-base/components/overlay/_sidebar"; + @import "~primereact-sass-theme/theme-base/components/overlay/_tooltip"; + + //File + @import "~primereact-sass-theme/theme-base/components/file/_fileupload"; + + //Menu + @import "~primereact-sass-theme/theme-base/components/menu/_breadcrumb"; + @import "~primereact-sass-theme/theme-base/components/menu/_contextmenu"; + @import "~primereact-sass-theme/theme-base/components/menu/_dock"; + @import "~primereact-sass-theme/theme-base/components/menu/_megamenu"; + @import "~primereact-sass-theme/theme-base/components/menu/_menu"; + @import "~primereact-sass-theme/theme-base/components/menu/_menubar"; + @import "~primereact-sass-theme/theme-base/components/menu/_panelmenu"; + @import "~primereact-sass-theme/theme-base/components/menu/_slidemenu"; + @import "~primereact-sass-theme/theme-base/components/menu/_steps"; + @import "~primereact-sass-theme/theme-base/components/menu/_tabmenu"; + @import "~primereact-sass-theme/theme-base/components/menu/_tieredmenu"; + + //Messages + @import "~primereact-sass-theme/theme-base/components/messages/_inlinemessage"; + @import "~primereact-sass-theme/theme-base/components/messages/_message"; + @import "~primereact-sass-theme/theme-base/components/messages/toast"; + + //MultiMedia + @import "~primereact-sass-theme/theme-base/components/multimedia/_galleria"; + @import "~primereact-sass-theme/theme-base/components/multimedia/_image"; + + //Misc + @import "~primereact-sass-theme/theme-base/components/misc/_avatar"; + @import "~primereact-sass-theme/theme-base/components/misc/_chip"; + @import "~primereact-sass-theme/theme-base/components/misc/_scrolltop"; + @import "~primereact-sass-theme/theme-base/components/misc/_skeleton"; + @import "~primereact-sass-theme/theme-base/components/misc/_tag"; + @import "~primereact-sass-theme/theme-base/components/misc/_inplace"; + @import "~primereact-sass-theme/theme-base/components/misc/_progressbar"; + @import "~primereact-sass-theme/theme-base/components/misc/_terminal"; + @import "~primereact-sass-theme/theme-base/components/misc/_blockui"; + @import "~primereact-sass-theme/theme-base/components/misc/_badge"; +} diff --git a/media/primereact-theme/base/components/overlay/_confirmpopup.scss b/media/primereact-theme/base/components/overlay/_confirmpopup.scss new file mode 100644 index 0000000..73d2f79 --- /dev/null +++ b/media/primereact-theme/base/components/overlay/_confirmpopup.scss @@ -0,0 +1,91 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/* +* We want to use the CSS variables provided by VS Code. This file fixes compatibility issues. +* +* Changes: +* - Removes `scale-color` from `.p-confirm-popup &:before`. +*/ + +.p-confirm-popup { + background: $overlayContentBg; + color: $panelContentTextColor; + border: $overlayContentBorder; + border-radius: $borderRadius; + box-shadow: $overlayContainerShadow; + + .p-confirm-popup-content { + padding: $confirmPopupContentPadding; + } + + .p-confirm-popup-footer { + text-align: right; + padding: $confirmPopupFooterPadding; + + button { + margin: 0 $inlineSpacing 0 0; + width: auto; + + &:last-child { + margin: 0; + } + } + } + + &:after { + border: solid transparent; + border-color: rgba($overlayContentBg, 0); + border-bottom-color: $overlayContentBg; + } + + &:before { + border: solid transparent; + + @if (nth($overlayContentBorder, 2) == "none") { + border-color: rgba($overlayContentBg, 0); + } @else { + border-color: rgba(nth($overlayContentBorder, 3), 0); + } + } + + &.p-confirm-popup-flipped { + &:after { + border-top-color: $overlayContentBg; + } + + &:before { + @if (nth($overlayContentBorder, 2) == "none") { + border-top-color: $overlayContentBg; + } @else { + border-top-color: nth($overlayContentBorder, 3); + } + } + } + + .p-confirm-popup-icon { + font-size: $primeIconFontSize * 1.5; + + &.p-icon { + width: $primeIconFontSize * 1.5; + height: $primeIconFontSize * 1.5; + } + } + + .p-confirm-popup-message { + margin-left: $inlineSpacing * 2; + } +} diff --git a/media/primereact-theme/base/components/overlay/_overlaypanel.scss b/media/primereact-theme/base/components/overlay/_overlaypanel.scss new file mode 100644 index 0000000..346058a --- /dev/null +++ b/media/primereact-theme/base/components/overlay/_overlaypanel.scss @@ -0,0 +1,83 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/* +* We want to use the CSS variables provided by VS Code. This file fixes compatibility issues. +* +* Changes: +* - Removes `scale-color` from `.p-overlaypanel &:before`. +*/ + +@use "sass:math"; + +.p-overlaypanel { + background: $overlayContentBg; + color: $panelContentTextColor; + border: $overlayContentBorder; + border-radius: $borderRadius; + box-shadow: $overlayContainerShadow; + + .p-overlaypanel-content { + padding: $panelContentPadding; + } + + .p-overlaypanel-close { + background: $buttonBg; + color: $buttonTextColor; + width: $actionIconWidth; + height: $actionIconHeight; + transition: $actionIconTransition; + border-radius: $actionIconBorderRadius; + position: absolute; + top: math.div(-1 * $actionIconWidth, 2); + right: math.div(-1 * $actionIconWidth, 2); + + &:enabled:hover { + background: $buttonHoverBg; + color: $buttonTextHoverColor; + } + } + + &:after { + border: solid transparent; + border-color: rgba($overlayContentBg, 0); + border-bottom-color: $overlayContentBg; + } + + &:before { + border: solid transparent; + + @if (nth($overlayContentBorder, 2) == "none") { + border-color: rgba($overlayContentBg, 0); + } @else { + border-color: rgba(nth($overlayContentBorder, 3), 0); + } + } + + &.p-overlaypanel-flipped { + &:after { + border-top-color: $overlayContentBg; + } + + &:before { + @if (nth($overlayContentBorder, 2) == "none") { + border-top-color: $overlayContentBg; + } @else { + border-top-color: nth($overlayContentBorder, 3); + } + } + } +} diff --git a/media/primereact-theme/themes/vscode/_extensions.scss b/media/primereact-theme/themes/vscode/_extensions.scss new file mode 100644 index 0000000..be647e4 --- /dev/null +++ b/media/primereact-theme/themes/vscode/_extensions.scss @@ -0,0 +1,110 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/* Customizations to the designer theme should be defined here */ + +.p-inputtext { + height: calc(var(--input-height) * 1px); +} + +.pm-top-label { + display: flex; + flex-direction: column; + font-size: var(--type-ramp-base-font-size); + + .p-inputtext-label { + margin-bottom: 2px; + cursor: pointer; + } +} + +.p-button-icon-only { + background: var(--button-icon-background); + border-radius: var(--button-icon-corner-radius); + color: var(--vscode-editor-foreground); + border: none; + + &:not(:disabled):hover { + background: var(--button-icon-hover-background); + outline: 1px dotted var(--contrast-active-border); + outline-offset: -1px; + } + + &:not(:disabled):active { + background: color-mix( + in srgb, + var(--button-icon-hover-background), + #fff 10% + ); + } +} + +// Remove arrow +.p-overlaypanel { + &:before { + content: none; + } + + &:after { + content: none; + } + + margin-top: 4px; +} + +.p-checkbox { + .p-checkbox-box { + background: var(--vscode-checkbox-background); + } +} + +.p-dropdown { + border: 1px solid var(--vscode-dropdown-border); +} + +.p-datatable { + .p-datatable-tbody { + > tr { + > td { + vertical-align: text-top; + + &.p-highlight { + background: var(--vscode-list-activeSelectionBackground); + color: var(--vscode-list-activeSelectionForeground); + } + } + + &.p-highlight { + background: var(--vscode-settings-focusedRowBackground); + } + } + } + + .p-selectable-row:hover { + background: $tableBodyRowHoverBg; + } +} + +.p-progress-spinner-circle { + stroke: var(--vscode-notificationsInfoIcon-foreground); + stroke-width: 3; + animation: none; +} + +small.p-invalid { + margin-top: 4px; + color: var(--vscode-errorForeground); +} diff --git a/media/primereact-theme/themes/vscode/_fonts.scss b/media/primereact-theme/themes/vscode/_fonts.scss new file mode 100644 index 0000000..248a2c0 --- /dev/null +++ b/media/primereact-theme/themes/vscode/_fonts.scss @@ -0,0 +1,17 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +// Configuration for the font-face of the theme, defaults to the system font so left as blank diff --git a/media/primereact-theme/themes/vscode/_variables.scss b/media/primereact-theme/themes/vscode/_variables.scss new file mode 100644 index 0000000..2ad8c1a --- /dev/null +++ b/media/primereact-theme/themes/vscode/_variables.scss @@ -0,0 +1,123 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +$primaryColor: #2196f3; +$primaryDarkColor: #1e88e5; +$primaryDarkerColor: #1976d2; +$primaryTextColor: var(--vscode-editor-foreground); + +$colors: ( + "blue": #2196f3, + "green": #4caf50, + "yellow": #fbc02d, + "cyan": #00bcd4, + "pink": #e91e63, + "indigo": #3f51b5, + "teal": #009688, + "orange": #f57c00, + "bluegray": #607d8b, + "purple": #9c27b0, + "red": #ff4032, + "primary": $primaryColor, +); + +// Mandatory Designer Variables +@import "./variables/general"; +@import "./variables/form"; +@import "./variables/button"; +@import "./variables/panel"; +@import "./variables/_data"; +@import "./variables/_overlay"; +@import "./variables/_message"; +@import "./variables/_menu"; +@import "./variables/_media"; +@import "./variables/_misc"; + +:root { + --font-family: var(--vscode-font-family); + --surface-a: #ffffff; + --surface-b: #f8f9fa; + --surface-c: #e9ecef; + --surface-d: #dee2e6; + --surface-e: #ffffff; + --surface-f: #ffffff; + --text-color: #495057; + --text-color-secondary: #6c757d; + --primary-color: #2196f3; + --primary-color-text: #ffffff; + --surface-0: #ffffff; + --surface-50: #fafafa; + --surface-100: #f5f5f5; + --surface-200: #eeeeee; + --surface-300: #e0e0e0; + --surface-400: #bdbdbd; + --surface-500: #9e9e9e; + --surface-600: #757575; + --surface-700: #616161; + --surface-800: #424242; + --surface-900: #212121; + --gray-50: #fafafa; + --gray-100: #f5f5f5; + --gray-200: #eeeeee; + --gray-300: #e0e0e0; + --gray-400: #bdbdbd; + --gray-500: #9e9e9e; + --gray-600: #757575; + --gray-700: #616161; + --gray-800: #424242; + --gray-900: #212121; + --content-padding: #{$panelContentPadding}; + --inline-spacing: #{$inlineSpacing}; + --border-radius: #{$borderRadius}; + --surface-ground: #f8f9fa; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #dee2e6; + --surface-hover: #e9ecef; + --focus-ring: #{$focusShadow}; + --maskbg: #{$maskBg}; + --highlight-bg: #{$highlightBg}; + --highlight-text-color: #{$highlightTextColor}; + color-scheme: light; +} + +// VSCode variables +:root { + --button-icon-background: transparent; + --button-icon-corner-radius: 5px; + --button-icon-outline-offset: 0; + --button-icon-hover-background: rgba(90, 93, 94, 0.31); + --button-icon-padding: 3px; + --button-padding-horizontal: 11px; + --button-padding-vertical: 4px; + + --border-width: 1; + + --input-height: 26; + --input-min-width: 100px; + + --type-ramp-base-font-size: 13px; + --type-ramp-base-line-height: normal; + --type-ramp-minus1-font-size: 11px; + --type-ramp-minus1-line-height: 16px; + --type-ramp-minus2-font-size: 9px; + --type-ramp-minus2-line-height: 16px; + --type-ramp-plus1-font-size: 16px; + --type-ramp-plus1-line-height: 24px; + + --divider-background: #454545; +} diff --git a/media/primereact-theme/themes/vscode/theme.scss b/media/primereact-theme/themes/vscode/theme.scss new file mode 100644 index 0000000..735d723 --- /dev/null +++ b/media/primereact-theme/themes/vscode/theme.scss @@ -0,0 +1,20 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +@import "./variables"; +@import "./_fonts"; +@import "../../base/_base"; +@import "./_extensions"; diff --git a/media/primereact-theme/themes/vscode/variables/_button.scss b/media/primereact-theme/themes/vscode/variables/_button.scss new file mode 100644 index 0000000..212cd58 --- /dev/null +++ b/media/primereact-theme/themes/vscode/variables/_button.scss @@ -0,0 +1,452 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/// Padding of a button, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" +/// @group button +$buttonPadding: 4px 11px; // VSCODE var(--button-padding-vertical) var(--button-padding-horizontal) + +/// Width of a button having an icon with no label +/// @group button +$buttonIconOnlyWidth: 2.357rem; + +/// Padding of a button having an icon with no label +/// @group button +$buttonIconOnlyPadding: 3px 0px; // VSCODE var(--button-icon-padding) + +/// Background of a button +/// @group button +$buttonBg: var(--vscode-button-background); + +/// Text color of a button +/// @group button +$buttonTextColor: var(--vscode-button-foreground); + +/// Border of a button +/// @group button +$buttonBorder: calc(var(--border-width) * 1px) solid var(--vscode-button-border); + +/// Background of a button in hover state +/// @group button +$buttonHoverBg: var(--vscode-button-hoverBackground); + +/// Text color of a button in hover state +/// @group button +$buttonTextHoverColor: $primaryTextColor; + +/// Border color of a button in hover state +/// @group button +$buttonHoverBorderColor: var(--vscode-button-border); + +/// Background of a button in pressed state +/// @group button +$buttonActiveBg: $buttonBg; + +/// Color of a button in pressed state +/// @group button +$buttonTextActiveColor: $buttonTextColor; + +/// Border color of a button in pressed state +/// @group button +$buttonActiveBorderColor: var(--button-border); + +/// Shadow of a raised button +/// @group button +$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + +/// Border radius of a rounded button +/// @group button +$roundedButtonBorderRadius: 2rem; + +/// Alpha level of a text button background in hover state +/// @group button +$textButtonHoverBgOpacity: 0.04; + +/// Alpha level of a text button background in active state +/// @group button +$textButtonActiveBgOpacity: 0.16; + +/// Border style of a outlined button +/// @group button +$outlinedButtonBorder: 1px solid; + +/// Text color of a plain text button +/// @group button +$plainButtonTextColor: #6c757d; + +/// Background color of a plain text button in hover state +/// @group button +$plainButtonHoverBgColor: #e9ecef; + +/// Background color of a plain text button in active state +/// @group button +$plainButtonActiveBgColor: #dee2e6; + +/// Background of a secondary button +/// @group button +$secondaryButtonBg: #607d8b; + +/// Text color of a secondary button +/// @group button +$secondaryButtonTextColor: #ffffff; + +/// Border of a secondary button +/// @group button +$secondaryButtonBorder: 1px solid #607d8b; + +/// Background of a secondary button in hover state +/// @group button +$secondaryButtonHoverBg: #546e7a; + +/// Text color of a secondary button in hover state +/// @group button +$secondaryButtonTextHoverColor: #ffffff; + +/// Border color of a secondary button in hover state +/// @group button +$secondaryButtonHoverBorderColor: #546e7a; + +/// Background of a secondary button in pressed state +/// @group button +$secondaryButtonActiveBg: #455a64; + +/// Text color of a secondary button in pressed state +/// @group button +$secondaryButtonTextActiveColor: #ffffff; + +/// Border color of a secondary button in pressed state +/// @group button +$secondaryButtonActiveBorderColor: #455a64; + +/// Box shadow of a secondary button in focused state +/// @group button +$secondaryButtonFocusShadow: 0 0 0 0.2rem #b0bec5; + +/// Background of an info button +/// @group button +$infoButtonBg: #03a9f4; + +/// Text color of an info button +/// @group button +$infoButtonTextColor: #ffffff; + +/// Border of an info button +/// @group button +$infoButtonBorder: 1px solid #03a9f4; + +/// Background of an info button in hover state +/// @group button +$infoButtonHoverBg: #039be5; + +/// Text color of an info button in hover state +/// @group button +$infoButtonTextHoverColor: #ffffff; + +/// Border color of an info button in hover state +/// @group button +$infoButtonHoverBorderColor: #039be5; + +/// Background of an info button in pressed state +/// @group button +$infoButtonActiveBg: #0288d1; + +/// Text color of an info button in pressed state +/// @group button +$infoButtonTextActiveColor: #ffffff; + +/// Border color of an info button in pressed state +/// @group button +$infoButtonActiveBorderColor: #0288d1; + +/// Box shadow of an info button in focused state +/// @group button +$infoButtonFocusShadow: 0 0 0 0.2rem lighten($infoButtonBg, 35%); + +/// Background of a success button +/// @group button +$successButtonBg: #4caf50; + +/// Text color of a success button +/// @group button +$successButtonTextColor: #ffffff; + +/// Border of a success button +/// @group button +$successButtonBorder: 1px solid #4caf50; + +/// Background of a success button in hover state +/// @group button +$successButtonHoverBg: #43a047; + +/// Text color of a success button in hover state +/// @group button +$successButtonTextHoverColor: #ffffff; + +/// Border color of a success button in hover state +/// @group button +$successButtonHoverBorderColor: #43a047; + +/// Background of a success button in pressed state +/// @group button +$successButtonActiveBg: #388e3c; + +/// Text Color of a success button in pressed state +/// @group button +$successButtonTextActiveColor: #ffffff; + +/// Border color of a success button in pressed state +/// @group button +$successButtonActiveBorderColor: #388e3c; + +/// Box shadow of a success button in focused state +/// @group button +$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 35%); + +/// Background of a warning button +/// @group button +$warningButtonBg: #ffc107; + +/// Text color of a warning button +/// @group button +$warningButtonTextColor: $textColor; + +/// Border of a warning button +/// @group button +$warningButtonBorder: 1px solid #ffc107; + +/// Background of a warning button in hover state +/// @group button +$warningButtonHoverBg: #ffb300; + +/// Text color of a warning button in hover state +/// @group button +$warningButtonTextHoverColor: $textColor; + +/// Border color of a warning button in hover state +/// @group button +$warningButtonHoverBorderColor: #ffb300; + +/// Background of a warning button in pressed state +/// @group button +$warningButtonActiveBg: #ffa000; + +/// Text color of a warning button in pressed state +/// @group button +$warningButtonTextActiveColor: $textColor; + +/// Border color of a warning button in pressed state +/// @group button +$warningButtonActiveBorderColor: #ffa000; + +/// Box shadow of a warning button in focused state +/// @group button +$warningButtonFocusShadow: 0 0 0 0.2rem lighten($warningButtonBg, 35%); + +/// Background of a help button +/// @group button +$helpButtonBg: #9c27b0; + +/// Text color of a help button +/// @group button +$helpButtonTextColor: #ffffff; + +/// Border of a help button +/// @group button +$helpButtonBorder: 1px solid #9c27b0; + +/// Background of a help help in hover state +/// @group button +$helpButtonHoverBg: #8e24aa; + +/// Text color of a help button in hover state +/// @group button +$helpButtonTextHoverColor: #ffffff; + +/// Border color of a help button in hover state +/// @group button +$helpButtonHoverBorderColor: #8e24aa; + +/// Background of a help button in pressed state +/// @group button +$helpButtonActiveBg: #7b1fa2; + +/// Text color of a help button in pressed state +/// @group button +$helpButtonTextActiveColor: #ffffff; + +/// Border color of a help button in pressed state +/// @group button +$helpButtonActiveBorderColor: #7b1fa2; + +/// Box shadow of a help button in focused state +/// @group button +$helpButtonFocusShadow: 0 0 0 0.2rem #ce93d8; + +/// Background of a danger button +/// @group button +$dangerButtonBg: #f44336; + +/// Text color of a danger button +/// @group button +$dangerButtonTextColor: #ffffff; + +/// Border of a danger button +/// @group button +$dangerButtonBorder: 1px solid #f44336; + +/// Background of a danger button in hover state +/// @group button +$dangerButtonHoverBg: #e53935; + +/// Text color of a danger button in hover state +/// @group button +$dangerButtonTextHoverColor: #ffffff; + +/// Border color of a danger button in hover state +/// @group button +$dangerButtonHoverBorderColor: #e53935; + +/// Background of a danger button in pressed state +/// @group button +$dangerButtonActiveBg: #d32f2f; + +/// Text color of a danger button in pressed state +/// @group button +$dangerButtonTextActiveColor: #ffffff; + +/// Border color of a danger button in pressed state +/// @group button +$dangerButtonActiveBorderColor: #d32f2f; + +/// Box shadow of a danger button in focused state +/// @group button +$dangerButtonFocusShadow: 0 0 0 0.2rem lighten($dangerButtonBg, 35%); + +/// Text color of a link button +/// @group button +$linkButtonColor: $primaryDarkerColor; + +/// Text color of a link button in hover state +/// @group button +$linkButtonHoverColor: $primaryDarkerColor; + +/// Text decoration of a link button in hover state +/// @group button +$linkButtonTextHoverDecoration: underline; + +/// Box shadow of a link button in focused state +/// @group button +$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor; + +/// Background of a toggle button +/// @group button +$toggleButtonBg: #ffffff; + +/// Border of a toggle button +/// @group button +$toggleButtonBorder: 1px solid #ced4da; + +/// Text color of a toggle button +/// @group button +$toggleButtonTextColor: $textColor; + +/// Icon color of a toggle button +/// @group button +$toggleButtonIconColor: $textSecondaryColor; + +/// Background of a toggle button in hover state +/// @group button +$toggleButtonHoverBg: #e9ecef; + +/// Border color of a toggle button in hover state +/// @group button +$toggleButtonHoverBorderColor: #ced4da; + +/// Text color of a toggle button in hover state +/// @group button +$toggleButtonTextHoverColor: $textColor; + +/// Icon color of a toggle button in hover state +/// @group button +$toggleButtonIconHoverColor: $textSecondaryColor; + +/// Background of a toggle button in selected state +/// @group button +$toggleButtonActiveBg: $primaryColor; + +/// Border color of a toggle button in selected state +/// @group button +$toggleButtonActiveBorderColor: $primaryColor; + +/// Text color of a toggle button in selected state +/// @group button +$toggleButtonTextActiveColor: $primaryTextColor; + +/// Icon color of a toggle button in selected state +/// @group button +$toggleButtonIconActiveColor: $primaryTextColor; + +/// Hover background of a toggle button in selected state +/// @group button +$toggleButtonActiveHoverBg: $primaryDarkColor; + +/// Hover border color of a toggle button in selected state +/// @group button +$toggleButtonActiveHoverBorderColor: $primaryDarkColor; + +/// Hover text color of a toggle button in selected state +/// @group button +$toggleButtonTextActiveHoverColor: $primaryTextColor; + +/// Hover icon of a toggle button in selected state +/// @group button +$toggleButtonIconActiveHoverColor: $primaryTextColor; + +/// Width of a floating action button on speed dial +/// @group button +$speedDialButtonWidth: 4rem; + +/// Height of a floating action button on speed dial +/// @group button +$speedDialButtonHeight: 4rem; + +/// Font Size of a floating action button on speed dial +/// @group button +$speedDialButtonIconFontSize: 1.3rem; + +/// Width of any action button on speed dial +/// @group button +$speedDialActionWidth: 3rem; + +/// Height of any action button on speed dial +/// @group button +$speedDialActionHeight: 3rem; + +/// Background color of any action button on speed dial +/// @group button +$speedDialActionBg: #495057; + +/// Background color of any action button on speed dial in hover state +/// @group button +$speedDialActionHoverBg: #343a40; + +/// Color of any action button on speed dial +/// @group button +$speedDialActionTextColor: #fff; + +/// Color of any action button on speed dial in hover state +/// @group button +$speedDialActionTextHoverColor: #fff; diff --git a/media/primereact-theme/themes/vscode/variables/_data.scss b/media/primereact-theme/themes/vscode/variables/_data.scss new file mode 100644 index 0000000..3aeae75 --- /dev/null +++ b/media/primereact-theme/themes/vscode/variables/_data.scss @@ -0,0 +1,366 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/// Background of a paginator +/// @group data +$paginatorBg: #ffffff; + +/// Text color of a paginator +/// @group data +$paginatorTextColor: $textSecondaryColor; + +/// Border of a paginator +/// @group data +$paginatorBorder: solid #e9ecef; + +/// Border width of a paginator +/// @group data +$paginatorBorderWidth: 0; + +/// Padding of a paginator +/// @group data +$paginatorPadding: 0.5rem 1rem; + +/// Width of a paginator element +/// @group data +$paginatorElementWidth: $buttonIconOnlyWidth; + +/// Height of a paginator element +/// @group data +$paginatorElementHeight: $buttonIconOnlyWidth; + +/// Background of a paginator element +/// @group data +$paginatorElementBg: transparent; + +/// Border of a paginator element +/// @group data +$paginatorElementBorder: 0 none; + +/// Icon color of a paginator element +/// @group data +$paginatorElementIconColor: $textSecondaryColor; + +/// Background of a paginator element in hover state +/// @group data +$paginatorElementHoverBg: #e9ecef; + +/// Border color of a paginator element in hover state +/// @group data +$paginatorElementHoverBorderColor: transparent; + +/// Icon color of a paginator element in hover state +/// @group data +$paginatorElementIconHoverColor: $textSecondaryColor; + +/// Border radius of a paginator element +/// @group data +$paginatorElementBorderRadius: $borderRadius; + +/// Margin of a paginator element +/// @group data +$paginatorElementMargin: 0.143rem; + +/// Padding of a paginator element +/// @group data +$paginatorElementPadding: 0; + +/// Border of a table header +/// @group data +$tableHeaderBorder: none; + +/// Border width of a table header +/// @group data +$tableHeaderBorderWidth: 0; + +/// Background of a table header +/// @group data +$tableHeaderBg: var(--vscode-editor-background); + +/// Text color of a table header +/// @group data +$tableHeaderTextColor: $textColor; + +/// Font weight of a table header +/// @group data +$tableHeaderFontWeight: 600; + +/// Padding of a table header, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" +/// @group data +$tableHeaderPadding: 0.5rem 0.5rem; + +/// Padding of a table header cell, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" +/// @group data +$tableHeaderCellPadding: 0.5rem 0.5rem; + +/// Background of a table header cell +/// @group data +$tableHeaderCellBg: var(--vscode-editor-background); + +/// Text color of a table header cell +/// @group data +$tableHeaderCellTextColor: $textColor; + +/// Font weight of a table header cell +/// @group data +$tableHeaderCellFontWeight: 600; + +/// Border of a table header cell +/// @group data +$tableHeaderCellBorder: none; + +/// Border width of a table header cell +/// @group data +$tableHeaderCellBorderWidth: 0; + +/// Background of a table header cell in hover state +/// @group data +$tableHeaderCellHoverBg: none; + +/// Text color of a table header cell in hover state +/// @group data +$tableHeaderCellTextHoverColor: $textColor; + +/// Icon color of a table header cell +/// @group data +$tableHeaderCellIconColor: $textSecondaryColor; + +/// Icon color of a table header cell in hover state +/// @group data +$tableHeaderCellIconHoverColor: $textSecondaryColor; + +/// Background of a table header cell in sorted state +/// @group data +$tableHeaderCellHighlightBg: #f8f9fa; + +/// Text color of a table header cell in sorted state +/// @group data +$tableHeaderCellHighlightTextColor: $primaryColor; + +/// Hover background of a table header cell in sorted state +/// @group data +$tableHeaderCellHighlightHoverBg: #e9ecef; + +/// Hover text color of a table header cell in sorted state +/// @group data +$tableHeaderCellHighlightTextHoverColor: $primaryColor; + +/// Size of a multiple column sorting order indicator +/// @group data +$tableSortableColumnBadgeSize: 1.143rem; + +/// Background of a table body row +/// @group data +$tableBodyRowBg: var(--vscode-editor-background); + +/// Text color of a table body row +/// @group data +$tableBodyRowTextColor: $textColor; + +/// Background of an even table body row +/// @group data +$tableBodyRowEvenBg: #ffffff; + +/// Background of a table body row in hover state +/// @group data +$tableBodyRowHoverBg: var(--vscode-settings-rowHoverBackground); + +/// Text color of a table body row in hover state +/// @group data +$tableBodyRowTextHoverColor: $textColor; + +/// Border for a cell of a table toby row +/// @group data +$tableBodyCellBorder: none; + +/// Border width for a cell of a table toby row +/// @group data +$tableBodyCellBorderWidth: 0 0 0 0; + +/// Padding for a cell of a table toby row, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" +/// @group data +$tableBodyCellPadding: 0.5rem 0.5rem; + +/// Padding of a table footer cell, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" +/// @group data +$tableFooterCellPadding: 0.5rem 0.5rem; + +/// Background of a table footer cell +/// @group data +$tableFooterCellBg: #f8f9fa; + +/// Text color of a table footer cell +/// @group data +$tableFooterCellTextColor: $textColor; + +/// Font weight of a table footer cell +/// @group data +$tableFooterCellFontWeight: 600; + +/// Border of a table footer cell +/// @group data + +/// Border of a table footer cell +/// @group data +$tableFooterCellBorder: 1px solid #e9ecef; + +/// Border width of a table footer cell +/// @group data +$tableFooterCellBorderWidth: 0 0 1px 0; + +/// Background of a table column resize indicator bar +/// @group data +$tableResizerHelperBg: $primaryColor; + +/// Background of drag helper used for multiple row selection +/// @group data +$tableDragHelperBg: rgba($primaryColor, 0.16); + +/// Border of a table footer +/// @group data +$tableFooterBorder: none; + +/// Border width of a table footer +/// @group data +$tableFooterBorderWidth: 0 0 1px 0; + +/// Background of a table footer +/// @group data +$tableFooterBg: var(--vscode-editor-background); + +/// Text color of a table footer +/// @group data +$tableFooterTextColor: $textColor; + +/// Font weight of a table footer +/// @group data +$tableFooterFontWeight: 600; + +/// Padding of a table footer, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" +/// @group data +$tableFooterPadding: 0.5rem 0.5rem; + +/// Content alignment of a table cell +/// @group data +$tableCellContentAlignment: left; + +/// Border width of a table paginator positioned at top +/// @group data +$tableTopPaginatorBorderWidth: 1px 0 1px 0; + +/// Border width of a table paginator positioned at bottom +/// @group data +$tableBottomPaginatorBorderWidth: 0 0 1px 0; + +/// Scale factor of a small datatable +/// @group data +$tableScaleSM: 0.5; + +/// Scale factor of a large datatable +/// @group data +$tableScaleLG: 1.25; + +/// Padding for content section of a dataview +/// @group data +$dataViewContentPadding: 0; + +/// Border for content section of a dataview +/// @group data +$dataViewContentBorder: 0 none; + +/// Border for an item of a dataview in list orientation +/// @group data +$dataViewListItemBorder: solid #e9ecef; + +/// Border width for an item of a dataview in list orientation +/// @group data +$dataViewListItemBorderWidth: 0 0 1px 0; + +/// Padding for content section of a datascroller +/// @group data +$dataScrollerContentPadding: 0; + +/// Border for content section of a datascroller +/// @group data +$dataScrollerContentBorder: 0 none; + +/// Border for an item of a datascroller +/// @group data +$dataScrollerListItemBorder: solid #e9ecef; + +/// Border width for an item of a datascroller +/// @group data +$dataScrollerListItemBorderWidth: 0 0 1px 0; + +/// Padding of a tree +/// @group data +$treeContainerPadding: 0.286rem; + +/// Padding of a tree node +/// @group data +$treeNodePadding: 0.143rem; + +/// Padding of a tree node content consists of toggler, icon and label +/// @group data +$treeNodeContentPadding: 0.5rem; + +/// Padding of a tree node children container +/// @group data +$treeNodeChildrenPadding: 0 0 0 1rem; + +/// Color of a treenode data icon, $dataActionIconColor for the toggler element +/// @group data +$treeNodeIconColor: $textSecondaryColor; + +/// Padding of a vertical timeline content element +/// @group data +$timelineVerticalEventContentPadding: 0 1rem; + +/// Padding of a horizontal timeline content element +/// @group data +$timelineHorizontalEventContentPadding: 1rem 0; + +/// Width of a timeline marker +/// @group data +$timelineEventMarkerWidth: 1rem; + +/// Height of a timeline marker +/// @group data +$timelineEventMarkerHeight: 1rem; + +/// Border radius of a timeline marker +/// @group data +$timelineEventMarkerBorderRadius: 50%; + +/// Border of a timeline marker +/// @group data +$timelineEventMarkerBorder: 2px solid $highlightBg; + +/// Background of a timeline marker +/// @group data +$timelineEventMarkerBackground: $highlightTextColor; + +/// Size of a timeline connector +/// @group data +$timelineEventConnectorSize: 2px; + +/// Color of a timeline event +/// @group data +$timelineEventColor: #dee2e6; + +/// Color of a line to connect to organization chart nodes +/// @group data +$organizationChartConnectorColor: #dee2e6; diff --git a/media/primereact-theme/themes/vscode/variables/_form.scss b/media/primereact-theme/themes/vscode/variables/_form.scss new file mode 100644 index 0000000..d1b5f4f --- /dev/null +++ b/media/primereact-theme/themes/vscode/variables/_form.scss @@ -0,0 +1,579 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/// Padding of an input field, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" +/// @group form +$inputPadding: 0.5rem 0.5rem; + +/// Background of an input field +/// @group form +$inputBg: var(--vscode-input-background); + +/// Font size of an input field +/// @group form +$inputTextFontSize: 13px; // VSCODE --type-ramp-base-font-size + +/// Text color of an input field +/// @group form +$inputTextColor: var(--vscode-input-foreground); + +/// Font size of an input field +/// @group form +$inputTextLabelFontSize: 13px; // VSCODE --type-ramp-base-font-size + +/// Color of an icon inside an input field +/// @group form +$inputIconColor: $textColor; + +/// Border of an input field +/// @group form +$inputBorder: 1px solid var(--vscode-dropdown-border); + +/// Border of an input field in hover state +/// @group form +$inputHoverBorderColor: $primaryColor; + +/// Border of an input field in focus state +/// @group form +$inputFocusBorderColor: $primaryColor; + +/// Color of an input field in invalid state +/// @group form +$inputErrorBorderColor: $errorColor; + +/// Text color of a placeholder +/// @group form +$inputPlaceholderTextColor: #6c757d; + +/// Background of a filled input +/// @group form +$inputFilledBg: #f8f9fa; + +/// Background of a filled input in hover state +/// @group form +$inputFilledHoverBg: #f8f9fa; + +/// Background of a filled input in focus state +/// @group form +$inputFilledFocusBg: #f8f9fa; + +/// Backgroud color of an input group addon +/// @group form +$inputGroupBg: #e9ecef; + +/// Text color of an input group addon +/// @group form +$inputGroupTextColor: $textSecondaryColor; + +/// Minimum width of an input group addon +/// @group form +$inputGroupAddOnMinWidth: 2.357rem; + +/// Background of an input list such as dropdown, listbox, multiselect +/// @group form +$inputListBg: #ffffff; + +/// Text color of an input list +/// @group form +$inputListTextColor: var(--vscode-dropdown-foreground); + +/// Border of an input list +/// @group form +$inputListBorder: $inputBorder; + +/// Padding of an input list +/// @group form +$inputListPadding: 0.5rem 0; + +/// Padding for an individual itrem of an input list +/// @group form +$inputListItemPadding: 0.5rem 1rem; + +/// Background for an individual itrem of an input list +/// @group form +$inputListItemBg: transparent; + +/// Text color for an individual itrem of an input list +/// @group form +$inputListItemTextColor: $textColor; + +/// Hover state background for an individual itrem of an input list +/// @group form +$inputListItemHoverBg: $highlightBg; + +/// Hover state text color for an individual itrem of an input list +/// @group form +$inputListItemTextHoverColor: $textColor; + +/// Focus state text color for an individual itrem of an input list +/// @group form +$inputListItemTextFocusColor: $textColor; + +/// Focus state background for an individual itrem of an input list +/// @group form +$inputListItemFocusBg: #f8f9fa; + +/// Border for an individual itrem of an input list +/// @group form +$inputListItemBorder: 0 none; + +/// Border radius for an individual itrem of an input list +/// @group form +$inputListItemBorderRadius: 0; + +/// Margin for an individual itrem of an input list +/// @group form +$inputListItemMargin: 0; + +/// Box shadow for an individual itrem of an input list in focused state +/// @group form +$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor; + +/// Padding for a header of an input list +/// @group form +$inputListHeaderPadding: 0.5rem 1rem; + +/// Margin for a header of an input list +/// @group form +$inputListHeaderMargin: 0; + +/// Background for a header of an input list +/// @group form +$inputListHeaderBg: #f8f9fa; + +/// Text color for a header of an input list +/// @group form +$inputListHeaderTextColor: $textColor; + +/// Border for a header of an input list +/// @group form +$inputListHeaderBorder: 0 none; + +/// Background for an overlay of an input such as autocomplete or dropdown +/// @group form +$inputOverlayBg: var(--vscode-dropdown-background); + +/// Background for an overlay header of an input such as autocomplete or dropdown +/// @group form +$inputOverlayHeaderBg: $inputListHeaderBg; + +/// Border for an overlay of an input such as autocomplete or dropdown +/// @group form +$inputOverlayBorder: 1px solid var(--vscode-dropdown-border); + +/// Shadow for an overlay of an input such as autocomplete or dropdown +/// @group form +$inputOverlayShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + +/// Width of a checkbox +/// @group form +$checkboxWidth: 18px; // VSCODE calc(var(--design-unit) * 4px + 2px); + +/// Height of a checkbox +/// @group form +$checkboxHeight: 18px; // VSCODE calc(var(--design-unit) * 4px + 2px); + +/// Border of a checkbox +/// @group form +$checkboxBorder: 2px solid var(--vscode-checkbox-border); + +/// Size of a checkbox icon +/// @group form +$checkboxIconFontSize: 14px; + +/// Border color of a selected checkbox +/// @group form +$checkboxActiveBorderColor: none; + +/// Background of a selected checkbox +/// @group form +$checkboxActiveBg: var(--vscode-checkbox-selectBackground); + +/// Icon color of a selected checkbox +/// @group form +$checkboxIconActiveColor: $primaryTextColor; + +/// Background of a selected checkbox in hover state +/// @group form +$checkboxActiveHoverBg: $primaryDarkerColor; + +/// Icon color of a selected checkbox in hover state +/// @group form +$checkboxIconActiveHoverColor: $primaryTextColor; + +/// Border color of a selected checkbox in hover state +/// @group form +$checkboxActiveHoverBorderColor: $primaryDarkerColor; + +/// Width of a radiobutton +/// @group form +$radiobuttonWidth: 20px; + +/// Height of a radiobutton +/// @group form +$radiobuttonHeight: 20px; + +/// Border of a radiobutton +/// @group form +$radiobuttonBorder: 2px solid #ced4da; + +/// Font size of a radiobutton icon +/// @group form +$radiobuttonIconSize: 12px; + +/// Border color of a selected radiobutton +/// @group form +$radiobuttonActiveBorderColor: $primaryColor; + +/// Background of a selected radiobutton +/// @group form +$radiobuttonActiveBg: $primaryColor; + +/// Icon color of a selected radiobutton +/// @group form +$radiobuttonIconActiveColor: $primaryTextColor; + +/// Background of a selected radiobutton in hover state +/// @group form +$radiobuttonActiveHoverBg: $primaryDarkerColor; + +/// Icon color of a selected radiobutton in hover state +/// @group form +$radiobuttonIconActiveHoverColor: $primaryTextColor; + +/// Border color of a selected radiobutton in hover state +/// @group form +$radiobuttonActiveHoverBorderColor: $primaryDarkerColor; + +/// Width of a color picker preview element +/// @group form +$colorPickerPreviewWidth: 2rem; + +/// Height of a color picker preview element +/// @group form +$colorPickerPreviewHeight: 2rem; + +/// Background of a color picker +/// @group form +$colorPickerBg: #323232; + +/// Border color of a color picker +/// @group form +$colorPickerBorder: 1px solid #191919; + +/// Handle color of a color picker +/// @group form +$colorPickerHandleColor: #ffffff; + +/// Font size of a rating icon +/// @group form +$ratingIconFontSize: 1.143rem; + +/// Icon color for the cancel icon of a rating +/// @group form +$ratingCancelIconColor: #e74c3c; + +/// Hover icon color for the cancel icon of a rating +/// @group form +$ratingCancelIconHoverColor: #c0392b; + +/// Icon color for the star icon of a rating in unselected state +/// @group form +$ratingStarIconOffColor: $textColor; + +/// Icon color for the star icon of a rating in selected state +/// @group form +$ratingStarIconOnColor: $primaryColor; + +/// Icon color for the star icon of a rating in hover state +/// @group form +$ratingStarIconHoverColor: $primaryColor; + +/// Background of a slider +/// @group form +$sliderBg: #dee2e6; + +/// Border of a slider +/// @group form +$sliderBorder: 0 none; + +/// Height of a horizontal slider +/// @group form +$sliderHorizontalHeight: 0.286rem; + +/// Width of a vertical slider +/// @group form +$sliderVerticalWidth: 0.286rem; + +/// Width of a slider handle +/// @group form +$sliderHandleWidth: 1.143rem; + +/// Height of a slider handle +/// @group form +$sliderHandleHeight: 1.143rem; + +/// Background of a slider handle +/// @group form +$sliderHandleBg: #ffffff; + +/// Border of a slider handle +/// @group form +$sliderHandleBorder: 2px solid $primaryColor; + +/// Border radius of a slider handle +/// @group form +$sliderHandleBorderRadius: 50%; + +/// Border of a slider handle in hover state +/// @group form +$sliderHandleHoverBorderColor: $primaryColor; + +/// Background of a slider handle in hover state +/// @group form +$sliderHandleHoverBg: $primaryColor; + +/// Background color of a range slider +/// @group form +$sliderRangeBg: $primaryColor; + +/// Margin of a calendar table +/// @group form +$calendarTableMargin: 0.5rem 0; + +/// Margin of a calendar +/// @group form +$calendarPadding: 0.5rem; + +/// Background of a calendar +/// @group form +$calendarBg: #ffffff; + +/// Background of an inlime calendar +/// @group form +$calendarInlineBg: $calendarBg; + +/// Text color of a calendar +/// @group form +$calendarTextColor: $textColor; + +/// Border of an inline calendar +/// @group form +$calendarBorder: $inputListBorder; + +/// Border of an overlay calendar +/// @group form +$calendarOverlayBorder: $inputOverlayBorder; + +/// Padding of a calendar header +/// @group form +$calendarHeaderPadding: 0.5rem; + +/// Text color of current month and year text in hover state +/// @group form +$calendarMonthYearHeaderHoverTextColor: $primaryColor !default; + +/// Background of a calendar header +/// @group form +$calendarHeaderBg: #ffffff; + +/// Background of an inline calendar header +/// @group form +$calendarInlineHeaderBg: $calendarBg; + +/// Border of a calendar header +/// @group form +$calendarHeaderBorder: 1px solid #dee2e6; + +/// Text color of a calendar header +/// @group form +$calendarHeaderTextColor: $textColor; + +/// Font weight of a calendar header +/// @group form +$calendarHeaderFontWeight: 600; + +/// Padding of a calendar weekday cell +/// @group form +$calendarHeaderCellPadding: 0.5rem; + +/// Padding of a calendar date cell +/// @group form +$calendarCellDatePadding: 0.5rem; + +/// Width of a calendar date cell +/// @group form +$calendarCellDateWidth: 2.5rem; + +/// Height of a calendar date cell +/// @group form +$calendarCellDateHeight: 2.5rem; + +/// Border radius of a calendar date cell +/// @group form +$calendarCellDateBorderRadius: 50%; + +/// Border of a calendar date cell +/// @group form +$calendarCellDateBorder: 1px solid transparent; + +/// Background of a calendar date cell in hover state +/// @group form +$calendarCellDateHoverBg: #e9ecef; + +/// Background of a calendar date cell indicating today +/// @group form +$calendarCellDateTodayBg: #ced4da; + +/// Border color of a calendar date cell indicating today +/// @group form +$calendarCellDateTodayBorderColor: transparent; + +/// Text color of a calendar date cell indicating today +/// @group form +$calendarCellDateTodayTextColor: $textColor; + +/// Padding of the calendar button bar +/// @group form +$calendarButtonBarPadding: 1rem 0; + +/// Padding of a time picker container of a calendar +/// @group form +$calendarTimePickerPadding: 0.5rem; + +/// Padding of a time picker element of a calendar +/// @group form +$calendarTimePickerElementPadding: 0 0.429rem; + +/// Font size of a time picker element of a calendar +/// @group form +$calendarTimePickerTimeFontSize: 1.286rem; + +/// Breakpoint of calendar to apply styles for small screens like phones +/// @group form +$calendarBreakpoint: 769px; + +/// Padding of a calendar date cell on small screens like phones +/// @group form +$calendarCellDatePaddingSM: 0; + +/// Width of an inputswitch +/// @group form +$inputSwitchWidth: 3rem; + +/// Height of an inputswitch +/// @group form +$inputSwitchHeight: 1.75rem; + +/// Border radius of an inputswitch +/// @group form +$inputSwitchBorderRadius: 30px; + +/// Width of an inputswitch handle +/// @group form +$inputSwitchHandleWidth: 1.25rem; + +/// Height of an inputswitch handle +/// @group form +$inputSwitchHandleHeight: 1.25rem; + +/// Border radius of an inputswitch handle +/// @group form +$inputSwitchHandleBorderRadius: 50%; + +/// Padding of an inputswitch slider +/// @group form +$inputSwitchSliderPadding: 0.25rem; + +/// Background color of an inputswitch slider when unselected +/// @group form +$inputSwitchSliderOffBg: #ced4da; + +/// Background color of an inputswitch handle when unselected +/// @group form +$inputSwitchHandleOffBg: #ffffff; + +/// Hover background color of an inputswitch slider when unselected +/// @group form +$inputSwitchSliderOffHoverBg: #c3cad2; + +/// Background color of an inputswitch slider when selected +/// @group form +$inputSwitchSliderOnBg: $primaryColor; + +/// Hover background color of an inputswitch slider when selected +/// @group form +$inputSwitchSliderOnHoverBg: $primaryDarkColor; + +/// Background color of an inputswitch handle when selected +/// @group form +$inputSwitchHandleOnBg: #ffffff; + +/// Height for the progress bar of a fileupload +/// @group form +$fileUploadProgressBarHeight: 0.25rem; + +/// Padding of the fileupload content section +/// @group form +$fileUploadContentPadding: 2rem 1rem; + +/// Background of an editor toolbar +/// @group form +$editorToolbarBg: #f8f9fa; + +/// Border of an editor toolbar +/// @group form +$editorToolbarBorder: 1px solid #dee2e6; + +/// Padding of an editor toolbar +/// @group form +$editorToolbarPadding: 1rem; + +/// Icon color of an editor toolbar +/// @group form +$editorToolbarIconColor: #6c757d; + +/// Icon color of an editor toolbar in hover state +/// @group form +$editorToolbarIconHoverColor: #495057; + +/// Icon color of an editor toolbar in active state +/// @group form +$editorIconActiveColor: $primaryColor; + +/// Border of an editor content +/// @group form +$editorContentBorder: 1px solid #dee2e6; + +/// Background of an editor content +/// @group form +$editorContentBg: #ffffff; + +/// Background of a password meter +/// @group form +$passwordMeterBg: #dee2e6; + +/// Background of a week password +/// @group form +$passwordWeakBg: #e53935; + +/// Background of a medium password +/// @group form +$passwordMediumBg: #ffb300; + +/// Background of a strong password +/// @group form +$passwordStrongBg: #43a047; diff --git a/media/primereact-theme/themes/vscode/variables/_general.scss b/media/primereact-theme/themes/vscode/variables/_general.scss new file mode 100644 index 0000000..f8f7ca3 --- /dev/null +++ b/media/primereact-theme/themes/vscode/variables/_general.scss @@ -0,0 +1,159 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/// Font of the theme +/// @group general +$fontFamily: var(--vscode-font-family); + +/// Size of the font +/// @group general +$fontSize: 13px; // VSCODE var(--vscode-font-size) + +/// Thickness of the texts +/// @group general +$fontWeight: var(--vscode-font-weight); + +/// Primary text color +/// @group general +$textColor: var(--vscode-editor-foreground); + +/// Secondary text color +/// @group general +$textSecondaryColor: #6c757d; + +/// Background of a highlighted item +/// @group general +$highlightBg: $primaryColor; + +/// Text color of a highlighted item +/// @group general +$highlightTextColor: $primaryTextColor; + +/// Background of a highlighted item in focus state +/// @group general +$highlightFocusBg: rgba($primaryColor, 0.24) !default; + +/// Radius of the corners +/// @group general +$borderRadius: 3px; + +/// Duration of the property transitions +/// @group general +$transitionDuration: 0.2s; + +/// Properties of a form element transition +/// @group general +$formElementTransition: background-color $transitionDuration, + color $transitionDuration, border-color $transitionDuration, + box-shadow $transitionDuration; + +/// Properties of a action icon transition +/// @group general +$actionIconTransition: background-color $transitionDuration, + color $transitionDuration, box-shadow $transitionDuration; + +/// Properties of a list item transition +/// @group general +$listItemTransition: background-color $transitionDuration, + border-color $transitionDuration, box-shadow $transitionDuration; + +/// Size of the Icons +/// @group general +$primeIconFontSize: 1rem; + +/// Separator border +/// @group general +$divider: 1px solid #dee2e6; + +/// Space between two inline items +/// @group general +$inlineSpacing: 0.5rem; + +/// Opacity of the disabled elements +/// @group general +$disabledOpacity: 0.8; + +/// Background of the modal layer +/// @group general +$maskBg: rgba(0, 0, 0, 0.4); + +/// Font size of the loading icons +/// @group general +$loadingIconFontSize: 2rem; + +/// Color to use on an invalid element e.g. invalid input +/// @group general +$errorColor: var(--vscode-errorForeground); + +/// Outline color of a focused element +/// @group general +$focusOutlineColor: none; + +/// Outline of a focused element +/// @group general +$focusOutline: 0 none; + +/// Outline offset of a focused element +/// @group general +$focusOutlineOffset: 0; + +/// Box shadow of a focused element +/// @group general +$focusShadow: 0 0 0 0.2rem $focusOutlineColor; + +/// Width of an action icon +/// @group general +$actionIconWidth: 2rem; + +/// Height of an action icon +/// @group general +$actionIconHeight: 2rem; + +/// Background of an action icon +/// @group general +$actionIconBg: transparent; + +/// Border of an action icon +/// @group general +$actionIconBorder: 0 none; + +/// Color of an action icon +/// @group general +$actionIconColor: $textSecondaryColor; + +/// Backgroun of an action icon in hover state +/// @group general +$actionIconHoverBg: #e9ecef; + +/// Border of an action icon in hover state +/// @group general +$actionIconHoverBorderColor: transparent; + +/// Color of an action icon in hover state +/// @group general +$actionIconHoverColor: $textColor; + +/// Border radius of an action icon +/// @group general +$actionIconBorderRadius: 50%; + +/// Scale factor of small component size +/// @group general +$scaleSM: 0.875; + +/// Scale factor of small large size +/// @group general +$scaleLG: 1.25; diff --git a/media/primereact-theme/themes/vscode/variables/_media.scss b/media/primereact-theme/themes/vscode/variables/_media.scss new file mode 100644 index 0000000..bfd2cf6 --- /dev/null +++ b/media/primereact-theme/themes/vscode/variables/_media.scss @@ -0,0 +1,247 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/// Padding of a carousel indicators container +/// @group media +$carouselIndicatorsPadding: 1rem; + +/// Padding of a carousel indicator +/// @group media +$carouselIndicatorBg: #e9ecef; + +/// Padding of a carousel indicator in hover state +/// @group media +$carouselIndicatorHoverBg: #dee2e6; + +/// Border radius of a carousel indicator +/// @group media +$carouselIndicatorBorderRadius: 0; + +/// Width of a carousel indicator +/// @group media +$carouselIndicatorWidth: 2rem; + +/// Height of a carousel indicator +/// @group media +$carouselIndicatorHeight: 0.5rem; + +/// Background of a galleria modal +/// @group media +$galleriaMaskBg: rgba(0, 0, 0, 0.9); + +/// Margin of a galleria close icon +/// @group media +$galleriaCloseIconMargin: 0.5rem; + +/// Font size of a galleria close icon +/// @group media +$galleriaCloseIconFontSize: 2rem; + +/// Background of a galleria close icon +/// @group media +$galleriaCloseIconBg: transparent; + +/// Color of a galleria close icon +/// @group media +$galleriaCloseIconColor: #ebedef; + +/// Background of a galleria close icon in hover state +/// @group media +$galleriaCloseIconHoverBg: rgba(255, 255, 255, 0.1); + +/// Color of a galleria close icon in hover state +/// @group media +$galleriaCloseIconHoverColor: #ebedef; + +/// Width of a galleria close icon +/// @group media +$galleriaCloseIconWidth: 4rem; + +/// Height of a galleria close icon +/// @group media +$galleriaCloseIconHeight: 4rem; + +/// Border radius of a galleria close icon +/// @group media +$galleriaCloseIconBorderRadius: 50%; + +/// Background of a galleria navigator item +/// @group media +$galleriaItemNavigatorBg: rgba(0, 0, 0, 0.2); + +/// Color of a galleria navigator item +/// @group media +$galleriaItemNavigatorColor: #aeb6bf; + +/// Margin of a galleria navigator item +/// @group media +$galleriaItemNavigatorMargin: 0.5rem 0; + +/// Font size of a galleria navigator item +/// @group media +$galleriaItemNavigatorFontSize: 2rem; + +/// Background of a galleria navigator item in hover state +/// @group media +$galleriaItemNavigatorHoverBg: rgba(0, 0, 0, 0.3); + +/// Color of a galleria navigator item in hover state +/// @group media +$galleriaItemNavigatorHoverColor: #ebedef; + +/// Width of a galleria navigator item +/// @group media +$galleriaItemNavigatorWidth: 4rem; + +/// Height of a galleria navigator item +/// @group media +$galleriaItemNavigatorHeight: 4rem; + +/// Border radius of a galleria navigator item +/// @group media +$galleriaItemNavigatorBorderRadius: $borderRadius; + +/// Background of a galleria caption +/// @group media +$galleriaCaptionBg: rgba(0, 0, 0, 0.5); + +/// Color of a galleria caption +/// @group media +$galleriaCaptionTextColor: #ebedef; + +/// Padding of a galleria caption +/// @group media +$galleriaCaptionPadding: 1rem; + +/// Padding of a galleria indicators container +/// @group media +$galleriaIndicatorsPadding: 1rem; + +/// Background of a galleria indicator +/// @group media +$galleriaIndicatorBg: #e9ecef; + +/// Background of a galleria indicator in hover state +/// @group media +$galleriaIndicatorHoverBg: #dee2e6; + +/// Border radius of a galleria indicator +/// @group media +$galleriaIndicatorBorderRadius: 50%; + +/// Width of a galleria indicator +/// @group media +$galleriaIndicatorWidth: 1rem; + +/// Height of a galleria indicator +/// @group media +$galleriaIndicatorHeight: 1rem; + +/// Background of a galleria indicator container when placed inside the viewport +/// @group media +$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, 0.5); + +/// Background of a galleria indicator when placed inside the viewport +/// @group media +$galleriaIndicatorBgOnItem: rgba(255, 255, 255, 0.4); + +/// Background of a galleria indicator in hover state when placed inside the viewport +/// @group media +$galleriaIndicatorHoverBgOnItem: rgba(255, 255, 255, 0.6); + +/// Background of a galleria thumbnail container +/// @group media +$galleriaThumbnailContainerBg: rgba(0, 0, 0, 0.9); + +/// Padding of a galleria thumbnail container +/// @group media +$galleriaThumbnailContainerPadding: 1rem 0.25rem; + +/// Background of a galleria thumbnail navigator +/// @group media +$galleriaThumbnailNavigatorBg: transparent; + +/// Color of a galleria thumbnail navigator +/// @group media +$galleriaThumbnailNavigatorColor: #aeb6bf; + +/// Background of a galleria thumbnail navigator in hover state +/// @group media +$galleriaThumbnailNavigatorHoverBg: rgba(255, 255, 255, 0.1); + +/// Color of a galleria thumbnail navigator in hover state +/// @group media +$galleriaThumbnailNavigatorHoverColor: #aeb6bf; + +/// Border radius of a galleria thumbnail navigator in hover state +/// @group media +$galleriaThumbnailNavigatorBorderRadius: 50%; + +/// Width of a galleria thumbnail navigator in hover state +/// @group media +$galleriaThumbnailNavigatorWidth: 2rem; + +/// Height of a galleria thumbnail navigator in hover state +/// @group media +$galleriaThumbnailNavigatorHeight: 2rem; + +/// Background of an image preview modal +/// @group media +$imageMaskBg: rgba(0, 0, 0, 0.9) !default; + +/// Padding of image preview toolbar +/// @group media +$imagePreviewToolbarPadding: 1rem !default; + +/// Text color of the image preview indicator +/// @group media +$imagePreviewIndicatorColor: #f8f9fa !default; + +/// Background of the image preview indicator +/// @group media +$imagePreviewIndicatorBg: rgba(0, 0, 0, 0.5) !default; + +/// Background of an image action item +/// @group media +$imagePreviewActionIconBg: transparent !default; + +/// Text color of an image action item +/// @group media +$imagePreviewActionIconColor: #f8f9fa !default; + +/// Background of an image action item in hover state +/// @group media +$imagePreviewActionIconHoverBg: rgba(255, 255, 255, 0.1) !default; + +/// Tect color of an image action item in hover state +/// @group media +$imagePreviewActionIconHoverColor: #f8f9fa !default; + +/// Width of an image action item +/// @group media +$imagePreviewActionIconWidth: 3rem !default; + +/// Height of an image action item +/// @group media +$imagePreviewActionIconHeight: 3rem !default; + +/// Font size of an image action item icon +/// @group media +$imagePreviewActionIconFontSize: 1.5rem !default; + +/// Border radius of an image action item +/// @group media +$imagePreviewActionIconBorderRadius: 50% !default; diff --git a/media/primereact-theme/themes/vscode/variables/_menu.scss b/media/primereact-theme/themes/vscode/variables/_menu.scss new file mode 100644 index 0000000..fdaf093 --- /dev/null +++ b/media/primereact-theme/themes/vscode/variables/_menu.scss @@ -0,0 +1,303 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/// Background of a steps item +/// @group menu +$stepsItemBg: #ffffff; + +/// Border of a steps item +/// @group menu +$stepsItemBorder: 1px solid #c8c8c8; + +/// Text color of a steps item +/// @group menu +$stepsItemTextColor: $textSecondaryColor; + +/// Width of a steps itrem number +/// @group menu +$stepsItemNumberWidth: 2rem; + +/// Height of a steps itrem number +/// @group menu +$stepsItemNumberHeight: 2rem; + +/// Font size of a steps itrem number +/// @group menu +$stepsItemNumberFontSize: 1.143rem; + +/// Color of a steps itrem number +/// @group menu +$stepsItemNumberColor: $textColor; + +/// Border radius of a steps itrem number +/// @group menu +$stepsItemNumberBorderRadius: 50%; + +/// Font weight of an active steps itrem number +/// @group menu +$stepsItemActiveFontWeight: 600; + +/// Width of a vertical menu such as tieredmenu or context menu +/// @group menu +$menuWidth: 12.5rem; + +/// Background of a menu +/// @group menu +$menuBg: #ffffff; + +/// Border of a menu +/// @group menu +$menuBorder: 1px solid #dee2e6; + +/// Text color of a menu +/// @group menu +$menuTextColor: $textColor; + +/// Padding of a menuitem +/// @group menu +$menuitemPadding: 0.75rem 1rem; + +/// Border radius of a menuitem +/// @group menu +$menuitemBorderRadius: 0; + +/// Text color of a menuitem +/// @group menu +$menuitemTextColor: $textColor; + +/// Icon color of a menuitem +/// @group menu +$menuitemIconColor: $textSecondaryColor; + +/// Text color of a menuitrem in hover state +/// @group menu +$menuitemTextHoverColor: $textColor; + +/// Icon color of a menuitrem in hover state +/// @group menu +$menuitemIconHoverColor: $textSecondaryColor; + +/// Background of a menuitrem in hover state +/// @group menu +$menuitemHoverBg: #e9ecef; + +/// Text color of a menuitem in focus state +/// @group menu +$menuitemTextFocusColor: $textColor; + +/// Icon color of a menuitem in focus state +/// @group menu +$menuitemIconFocusColor: $textColor; + +/// Background of a menuitem in focus state +/// @group menu +$menuitemFocusBg: #f8f9fa; + +/// Text color of a menuitrem in active state +/// @group menu +$menuitemTextActiveColor: $textColor; + +/// Icon color of a menuitrem in active state +/// @group menu +$menuitemIconActiveColor: $textSecondaryColor; + +/// Background of a menuitrem in active state +/// @group menu +$menuitemActiveBg: #e9ecef; + +/// Background of a menuitem in active and focus states +/// @group menu +$menuitemActiveFocusBg: #e9ecef; + +/// Font size of an icon indicating the itrem has a submenu +/// @group menu +$menuitemSubmenuIconFontSize: 0.875rem; + +/// Margin of a submenu header +/// @group menu +$submenuHeaderMargin: 0; + +/// Padding of a submenu header +/// @group menu +$submenuHeaderPadding: 0.75rem 1rem; + +/// Background of a submenu header +/// @group menu +$submenuHeaderBg: #ffffff; + +/// Text color of a submenu header +/// @group menu +$submenuHeaderTextColor: $textColor; + +/// Border radius of a submenu header +/// @group menu +$submenuHeaderBorderRadius: 0; + +/// Font weight of a submenu header +/// @group menu +$submenuHeaderFontWeight: 600; + +/// Background of an overlay menu +/// @group menu +$overlayMenuBg: $menuBg; + +/// Border of an overlay menu +/// @group menu +$overlayMenuBorder: 0 none; + +/// Box shadow of an overlay menu +/// @group menu +$overlayMenuShadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + +/// Padding of a vertical menu e.g. tieredmenu, contextmenu +/// @group menu +$verticalMenuPadding: 0.25rem 0; + +/// Margin of a menuitrem separator +/// @group menu +$menuSeparatorMargin: 0.25rem 0; + +/// Padding of a breadcrumb +/// @group menu +$breadcrumbPadding: 1rem; + +/// Background of a breadcrumb +/// @group menu +$breadcrumbBg: $menuBg; + +/// Border of a breadcrumb +/// @group menu +$breadcrumbBorder: $menuBorder; + +/// Text color of a breadcrumb item +/// @group menu +$breadcrumbItemTextColor: $menuitemTextColor; + +/// Icon color of a breadcrumb item +/// @group menu +$breadcrumbItemIconColor: $menuitemIconColor; + +/// Text color of the breadcrumb item +/// @group menu +$breadcrumbLastItemTextColor: $menuitemTextColor; + +/// Icon color of the breadcrumb item +/// @group menu +$breadcrumbLastItemIconColor: $menuitemIconColor; + +/// Color of a breadcrumb separator +/// @group menu +$breadcrumbSeparatorColor: $menuitemTextColor; + +/// Padding of a horizontal menu e.g. menubar +/// @group menu +$horizontalMenuPadding: 0.5rem; + +/// Background of a horizontal menu e.g. menubar +/// @group menu +$horizontalMenuBg: #f8f9fa; + +/// Border of a horizontal menu e.g. menubar +/// @group menu +$horizontalMenuBorder: $menuBorder; + +/// Text color of a horizontal menu e.g. menubar +/// @group menu +$horizontalMenuTextColor: $menuTextColor; + +/// Padding of a horizontal menu root item e.g. menubar +/// @group menu +$horizontalMenuRootMenuitemPadding: $menuitemPadding; + +/// Border radius of a horizontal menu root item e.g. menubar +/// @group menu +$horizontalMenuRootMenuitemBorderRadius: $borderRadius; + +/// Text color of a horizontal menu root item e.g. menubar +/// @group menu +$horizontalMenuRootMenuitemTextColor: $menuitemTextColor; + +/// Icon color of a horizontal menu root item e.g. menubar +/// @group menu +$horizontalMenuRootMenuitemIconColor: $menuitemIconColor; + +/// Text color of a horizontal menu root item in hover state e.g. menubar +/// @group menu +$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor; + +/// Icon color of a horizontal menu root item in hover state e.g. menubar +/// @group menu +$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor; + +/// Background of a horizontal menu root item in hover state e.g. menubar +/// @group menu +$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg; + +/// Text color of a horizontal menu root item in hover active e.g. menubar +/// @group menu +$horizontalMenuRootMenuitemTextActiveColor: $menuitemTextActiveColor; + +/// Icon color of a horizontal menu root item in hover active e.g. menubar +/// @group menu +$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor; + +/// Background of a horizontal menu root item in active state e.g. menubar +/// @group menu +$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg; + +/// Width of an action item on dock +/// @group menu +$dockActionWidth: 4rem; + +/// Height of an action item on dock +/// @group menu +$dockActionHeight: 4rem; + +/// Padding of an action item on dock +/// @group menu +$dockItemPadding: 0.5rem; + +/// Border radius of an action item on dock +/// @group menu +$dockItemBorderRadius: $borderRadius; + +/// Margin of the current action item on dock +/// @group menu +$dockCurrentItemMargin: 1.5rem; + +/// Margin of the previous and next action item on dock +/// @group menu +$dockFirstItemsMargin: 1.3rem; + +/// Margin of the second previous and second next action item on dock +/// @group menu +$dockSecondItemsMargin: 0.9rem; + +/// Background of the list on dock +/// @group menu +$dockBg: rgba(255, 255, 255, 0.1); + +/// Border of the list on dock +/// @group menu +$dockBorder: 1px solid rgba(255, 255, 255, 0.2); + +/// Padding of the list on dock +/// @group menu +$dockPadding: 0.5rem 0.5rem; + +/// Border Radius of the list on dock +/// @group menu +$dockBorderRadius: 0.5rem; diff --git a/media/primereact-theme/themes/vscode/variables/_message.scss b/media/primereact-theme/themes/vscode/variables/_message.scss new file mode 100644 index 0000000..371b8e5 --- /dev/null +++ b/media/primereact-theme/themes/vscode/variables/_message.scss @@ -0,0 +1,159 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/// Margin of a message +/// @group message +$messageMargin: 1rem 0; + +/// Padding of a message +/// @group message +$messagePadding: 1rem 1.5rem; + +/// Border width of a message +/// @group message +$messageBorderWidth: 0 0 0 4px; + +/// Font size of a message icon +/// @group message +$messageIconFontSize: 1.5rem; + +/// Font size of a message text +/// @group message +$messageTextFontSize: 1rem; + +/// Font weight of a message text +/// @group message +$messageTextFontWeight: 500; + +/// Padding of an inline message +/// @group message +$inlineMessagePadding: $inputPadding; + +/// Margin of an inline message +/// @group message +$inlineMessageMargin: 0; + +/// Font size of an inline message icon +/// @group message +$inlineMessageIconFontSize: 1rem; + +/// Padding of an inline message text +/// @group message +$inlineMessageTextFontSize: 1rem; + +/// Border width of an inline message text +/// @group message +$inlineMessageBorderWidth: 1px; + +/// Font size of a toast message icon +/// @group message +$toastIconFontSize: 2rem; + +/// Margin of a toast message text +/// @group message +$toastMessageTextMargin: 0 0 0 1rem; + +/// Margin of a toast message +/// @group message +$toastMargin: 0 0 1rem 0; + +/// Padding of a toast message +/// @group message +$toastPadding: 1rem; + +/// Border width of a toast message +/// @group message +$toastBorderWidth: 0 0 0 4px; + +/// Box shadow of a toast message +/// @group message +$toastShadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3); + +/// Opacity of a toast message +/// @group message +$toastOpacity: 0.9; + +/// Font weight of a toast message title text +/// @group message +$toastTitleFontWeight: 700; + +/// Margin of a toast message detail text +/// @group message +$toastDetailMargin: $inlineSpacing 0 0 0; + +/// Background of an info message +/// @group message +$infoMessageBg: #039be5; + +/// Border of an info message +/// @group message +$infoMessageBorder: solid #027cb7; + +/// Text color of an info message +/// @group message +$infoMessageTextColor: #ffffff; + +/// Icon color of an info message +/// @group message +$infoMessageIconColor: #ffffff; + +/// Background of a success message +/// @group message +$successMessageBg: #43a047; + +/// Border of a success message +/// @group message +$successMessageBorder: 0 none; + +/// Text color of a success message +/// @group message +$successMessageTextColor: #ffffff; + +/// Icon color of a success message +/// @group message +$successMessageIconColor: #ffffff; + +/// Background of a warning message +/// @group message +$warningMessageBg: #ffb300; + +/// Border of a warning message +/// @group message +$warningMessageBorder: 0 none; + +/// Text color of a warning message +/// @group message +$warningMessageTextColor: $textColor; + +/// Icon color of a warning message +/// @group message +$warningMessageIconColor: $textColor; + +/// Background of an error message +/// @group message +$errorMessageBg: #e53935; + +/// Border of an error message +/// @group message +$errorMessageBorder: 0 none; + +/// Text color of an error message +/// @group message +$errorMessageTextColor: #ffffff; + +/// Icon color of an error message +/// @group message +$errorMessageIconColor: #ffffff; diff --git a/media/primereact-theme/themes/vscode/variables/_misc.scss b/media/primereact-theme/themes/vscode/variables/_misc.scss new file mode 100644 index 0000000..48f0583 --- /dev/null +++ b/media/primereact-theme/themes/vscode/variables/_misc.scss @@ -0,0 +1,130 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/// Padding of an inplace element +/// @group misc +$inplacePadding: $inputPadding; + +/// Background of an inplace element in hover state +/// @group misc +$inplaceHoverBg: #e9ecef; + +/// Text color of an inplace element in hover state +/// @group misc +$inplaceTextHoverColor: $textColor; + +/// Background of a badge +/// @group misc +$badgeBg: $primaryColor; + +/// Text color of a badge +/// @group misc +$badgeTextColor: $primaryTextColor; + +/// Minimum width of a badge +/// @group misc +$badgeMinWidth: 1.5rem; + +/// Height of a badge +/// @group misc +$badgeHeight: 1.5rem; + +/// Font weight of a badge +/// @group misc +$badgeFontWeight: 700; + +/// Font size of a badge +/// @group misc +$badgeFontSize: 0.75rem; + +/// Padding of a badge +/// @group misc +$tagPadding: 0.25rem 0.4rem; + +/// Height of a progress bar +/// @group misc +$progressBarHeight: 1.5rem; + +/// Border of a progress bar +/// @group misc +$progressBarBorder: 0 none; + +/// Background of a progress bar +/// @group misc +$progressBarBg: #dee2e6; + +/// Background of a progress bar value +/// @group misc +$progressBarValueBg: $primaryColor; + +/// @group misc +$progressBarValueTextColor: $primaryTextColor; + +// Background of an avatar +/// @group misc +$avatarBg: #dee2e6; + +/// Text color of an avatar +/// @group misc +$avatarTextColor: $textColor; + +/// Background of a chip +/// @group misc +$chipBg: #dee2e6; + +/// Text color of a chip +/// @group misc +$chipTextColor: $textColor; + +/// Border radius of a chip +/// @group misc +$chipBorderRadius: 16px; + +/// Background of a scrollTop +/// @group misc +$scrollTopBg: rgba(0, 0, 0, 0.7); + +/// Background of a scrollTop in hover state +/// @group misc +$scrollTopHoverBg: rgba(0, 0, 0, 0.8); + +/// Width of a scrollTop +/// @group misc +$scrollTopWidth: 3rem; + +/// Height of a scrollTop +/// @group misc +$scrollTopHeight: 3rem; + +/// Border radius of a scrollTop +/// @group misc +$scrollTopBorderRadius: 50%; + +/// Font size of a scrollTop +/// @group misc +$scrollTopFontSize: 1.5rem; + +/// Text color of a scrollTop +/// @group misc +$scrollTopTextColor: #f8f9fa; + +/// Background of a skeleton +/// @group misc +$skeletonBg: #e9ecef; + +/// Background of a skeleton animation +/// @group misc +$skeletonAnimationBg: rgba(255, 255, 255, 0.4); diff --git a/media/primereact-theme/themes/vscode/variables/_overlay.scss b/media/primereact-theme/themes/vscode/variables/_overlay.scss new file mode 100644 index 0000000..90f5c1c --- /dev/null +++ b/media/primereact-theme/themes/vscode/variables/_overlay.scss @@ -0,0 +1,83 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/// Border of an overlay container element such as dialog or overlaypanel +/// @group overlay +$overlayContentBorder: 0 none; + +/// Background of an overlay container element such as dialog or overlaypanel +/// @group overlay +$overlayContentBg: $panelContentBg; + +/// Box shadow of an overlay container element such as dialog or overlaypanel +/// @group overlay +$overlayContainerShadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + +/// Background of a dialog header +/// @group overlay +$dialogHeaderBg: #ffffff; + +/// Border of a dialog header +/// @group overlay +$dialogHeaderBorder: 1px solid #dee2e6; + +/// Text color of a dialog header +/// @group overlay +$dialogHeaderTextColor: $panelHeaderTextColor; + +/// Font weight of a dialog header +/// @group overlay +$dialogHeaderFontWeight: 600; + +/// Font size of a dialog header +/// @group overlay +$dialogHeaderFontSize: 1.25rem; + +/// Padding of a dialog header +/// @group overlay +$dialogHeaderPadding: 1.5rem; + +/// Padding of a dialog content +/// @group overlay +$dialogContentPadding: 0 1.5rem; + +/// Border of a dialog footer +/// @group overlay +$dialogFooterBorder: 1px solid #dee2e6; + +/// Padding of a dialog footer +/// @group overlay +$dialogFooterPadding: 1.5rem; + +/// Padding of a confirmpopup content +/// @group overlay +$confirmPopupContentPadding: $panelContentPadding; + +/// Padding of a confirmpopup footer +/// @group overlay +$confirmPopupFooterPadding: 0 1rem 1rem 1rem; + +/// Background of a tooltip +/// @group overlay +$tooltipBg: $textColor; + +/// Text color of a tooltip +/// @group overlay +$tooltipTextColor: #ffffff; + +/// Padding of a tooltip +/// @group overlay +$tooltipPadding: $inputPadding; diff --git a/media/primereact-theme/themes/vscode/variables/_panel.scss b/media/primereact-theme/themes/vscode/variables/_panel.scss new file mode 100644 index 0000000..7a04d21 --- /dev/null +++ b/media/primereact-theme/themes/vscode/variables/_panel.scss @@ -0,0 +1,332 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/// Border color of a panel header +/// @group panel +$panelHeaderBorderColor: #dee2e6; + +/// Border of a panel header +/// @group panel +$panelHeaderBorder: none; + +/// Background of a panel header +/// @group panel +$panelHeaderBg: var(--vscode-dropdown-background); + +/// Text color of a panel header +/// @group panel +$panelHeaderTextColor: $textColor; + +/// Font weight of a panel header +/// @group panel +$panelHeaderFontWeight: 600; + +/// Padding of a panel header +/// @group panel +$panelHeaderPadding: 1rem; + +/// Font weight of a toggleable panel header +/// @group panel +$panelToggleableHeaderPadding: 0.5rem 1rem; + +/// Border color for the content section of a panel +/// @group panel +$panelContentBorderColor: #dee2e6; + +/// Border for the content section of a panel +/// @group panel +$panelContentBorder: none; + +/// Background for the content section of a panel +/// @group panel +$panelContentBg: var(--vscode-dropdown-background); + +/// Background for the striped row. +/// @group panel +$panelContentEvenRowBg: #e9ecef; + +/// Text color for the content section of a panel +/// @group panel +$panelContentTextColor: var(--vscode-dropdown-foreground); + +/// Padding for the content section of a panel +/// @group panel +$panelContentPadding: 1rem; + +/// Border for the footer section of a panel +/// @group panel +$panelFooterBorder: 1px solid #dee2e6; + +/// Background for the footer section of a panel +/// @group panel +$panelFooterBg: #ffffff; + +/// Text color for the footer section of a panel +/// @group panel +$panelFooterTextColor: $textColor; + +/// Padding for the footer section of a panel +/// @group panel +$panelFooterPadding: 0.5rem 1rem; + +/// Spacing between to accordion panels +/// @group panel +$accordionSpacing: 0; + +/// Border of an accordion panel header +/// @group panel +$accordionHeaderBorder: $panelHeaderBorder; + +/// Background of an accordion panel header +/// @group panel +$accordionHeaderBg: $panelHeaderBg; + +/// Text color of an accordion panel header +/// @group panel +$accordionHeaderTextColor: $panelHeaderTextColor; + +/// Font weight of an accordion panel header +/// @group panel +$accordionHeaderFontWeight: $panelHeaderFontWeight; + +/// Padding of an accordion panel header +/// @group panel +$accordionHeaderPadding: $panelHeaderPadding; + +/// Background of an accordion panel header in hover state +/// @group panel +$accordionHeaderHoverBg: #e9ecef; + +/// Border of an accordion panel header in hover state +/// @group panel +$accordionHeaderHoverBorderColor: $panelHeaderBorder; + +/// Text color of an accordion panel header in hover state +/// @group panel +$accordionHeaderTextHoverColor: $textColor; + +/// Background of an accordion panel header in expanded state +/// @group panel +$accordionHeaderActiveBg: $panelHeaderBg; + +/// Border of an accordion panel header in expanded state +/// @group panel +$accordionHeaderActiveBorderColor: #dee2e6; + +/// Text color of an accordion panel header in expanded state +/// @group panel +$accordionHeaderTextActiveColor: $textColor; + +/// Hover background of an accordion panel header in expanded state +/// @group panel +$accordionHeaderActiveHoverBg: #e9ecef; + +/// Hover border of an accordion panel header in expanded state +/// @group panel +$accordionHeaderActiveHoverBorderColor: #dee2e6; + +/// Text color of an accordion panel header in expanded state +/// @group panel +$accordionHeaderTextActiveHoverColor: $textColor; + +/// Border for a content section of an accordion panel +/// @group panel +$accordionContentBorder: $panelContentBorder; + +/// Background for a content section of an accordion panel +/// @group panel +$accordionContentBg: $panelContentBg; + +/// Text color for a content section of an accordion panel +/// @group panel +$accordionContentTextColor: $panelContentTextColor; + +/// Padding for a content section of an accordion panel +/// @group panel +$accordionContentPadding: $panelContentPadding; + +/// Border for a parent element containing all the headers of a tabview +/// @group panel +$tabviewNavBorder: 1px solid #dee2e6; + +/// Border width for a parent element containing all the headers of a tabview +/// @group panel +$tabviewNavBorderWidth: 0 0 2px 0; + +/// Background for a parent element containing all the headers of a tabview +/// @group panel +$tabviewNavBg: #ffffff; + +/// Spacing between tabview headers +/// @group panel +$tabviewHeaderSpacing: 0; + +/// Border of a tabview header +/// @group panel +$tabviewHeaderBorder: solid #dee2e6; + +/// Border width of a tabview header +/// @group panel +$tabviewHeaderBorderWidth: 0 0 2px 0; + +/// Border color of a tabview header +/// @group panel +$tabviewHeaderBorderColor: transparent transparent #dee2e6 transparent; + +/// Background of a tabview header +/// @group panel +$tabviewHeaderBg: #ffffff; + +/// Text color of a tabview header +/// @group panel +$tabviewHeaderTextColor: $textSecondaryColor; + +/// Font weight of a tabview header +/// @group panel +$tabviewHeaderFontWeight: $panelHeaderFontWeight; + +/// Padding of a tabview header +/// @group panel +$tabviewHeaderPadding: $panelHeaderPadding; + +/// Margin of a tabview header +/// @group panel +$tabviewHeaderMargin: 0 0 -2px 0; + +/// Background of a tabview header in hover state +/// @group panel +$tabviewHeaderHoverBg: #ffffff; + +/// Border of a tabview header in hover state +/// @group panel +$tabviewHeaderHoverBorderColor: #9ba2aa; + +/// Text color of a tabview header in hover state +/// @group panel +$tabviewHeaderTextHoverColor: $textSecondaryColor; + +/// Background of a tabview header in selected state +/// @group panel +$tabviewHeaderActiveBg: #ffffff; + +/// Border of a tabview header in selected state +/// @group panel +$tabviewHeaderActiveBorderColor: $primaryColor; + +/// Text color of a tabview header in selected state +/// @group panel +$tabviewHeaderTextActiveColor: $primaryColor; + +/// Border for content section of a tabview tab +/// @group panel +$tabviewContentBorder: 0 none; + +/// Background for content section of a tabview tab +/// @group panel +$tabviewContentBg: $panelContentBg; + +/// Text color for a content section of a tabview tab +/// @group panel +$tabviewContentTextColor: $panelContentTextColor; + +/// Padding for a content section of a tabview tab +/// @group panel +$tabviewContentPadding: $panelContentPadding; + +/// Background of a fieldset header in hover state +/// @group panel +$panelHeaderHoverBg: #e9ecef; + +/// Border of a fieldset header in hover state +/// @group panel +$panelHeaderHoverBorderColor: #dee2e6; + +/// Text color of a fieldset header in hover state +/// @group panel +$panelHeaderTextHoverColor: $textColor; + +/// Border for a track bar of a scroll panel +/// @group panel +$scrollPanelTrackBorder: 0 none; + +/// Background for a track bar of a scroll panel +/// @group panel +$scrollPanelTrackBg: #f8f9fa; + +/// Padding of a card body +/// @group panel +$cardBodyPadding: 1rem; + +/// Font size of a card title +/// @group panel +$cardTitleFontSize: 1.5rem; + +/// Font weight of a card title +/// @group panel +$cardTitleFontWeight: 700; + +/// Font size of a card subtitle +/// @group panel +$cardSubTitleFontWeight: 700; + +/// Text color of a card subtitle +/// @group panel +$cardSubTitleColor: $textSecondaryColor; + +/// Padding of a card content +/// @group panel +$cardContentPadding: 1rem 0; + +/// Padding of a card footer +/// @group panel +$cardFooterPadding: 1rem 0 0 0; + +/// Box shadow of a card +/// @group panel +$cardShadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), + 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + +/// Margin of divider in horizontal layout +/// @group panel +$dividerHorizontalMargin: 1rem 0; + +/// Padding of divider in horizontal layout +/// @group panel +$dividerHorizontalPadding: 0 1rem; + +/// Margin of divider in vertical layout +/// @group panel +$dividerVerticalMargin: 0 1rem; + +/// Padding of divider in vertical layout +/// @group panel +$dividerVerticalPadding: 1rem 0; + +/// Border width of the divider +/// @group panel +$dividerSize: 1px; + +/// Color of the divider border +/// @group panel +$dividerColor: #dee2e6; + +/// Background of the splitter gutter +/// @group panel +$splitterGutterBg: #f8f9fa; + +/// Background of the splitter gutter handle +/// @group panel +$splitterGutterHandleBg: #dee2e6; diff --git a/media/root.css b/media/root.css new file mode 100644 index 0000000..295c201 --- /dev/null +++ b/media/root.css @@ -0,0 +1,25 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +#root { + display: flex; + flex-direction: column; + height: 100vh; +} + +body { + padding: 0; +} diff --git a/package.json b/package.json index 4319833..dc76f37 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,10 @@ }, "dependencies": { "@vscode/codicons": "^0.0.32", - "@vscode/webview-ui-toolkit": "^1.2.0", "fast-deep-equal": "^3.1.3", + "formik": "^2.4.5", + "primeflex": "^3.3.1", + "primereact": "^10.3.1", "react": "^18.2.0", "react-dom": "^18.2.0", "vscode-messenger": "^0.4.3", @@ -50,20 +52,25 @@ "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/eslint-plugin-tslint": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", + "@vscode/debugprotocol": "^1.55.0", "@vscode/vsce": "^2.15.0", + "css-loader": "^6.9.0", "eslint": "^8.29.0", "eslint-plugin-deprecation": "^1.3.3", "eslint-plugin-import": "^2.26.0", "eslint-plugin-no-null": "^1.0.2", "eslint-plugin-no-unsanitized": "^4.0.2", "eslint-plugin-react": "^7.31.11", + "sass": "^1.70.0", + "sass-loader": "^14.0.0", "serve": "^14.1.2", + "style-loader": "^3.3.4", "ts-loader": "^9.4.2", "tslint": "^6.1.3", "typescript": "^4.9.3", - "@vscode/debugprotocol": "^1.55.0", "webpack": "^5.75.0", - "webpack-cli": "^5.0.0" + "webpack-cli": "^5.0.0", + "primereact-sass-theme": "github:primefaces/primereact-sass-theme#10.3.3" }, "contributes": { "commands": [ @@ -201,6 +208,19 @@ "Appends new memory to bounds of current request, resulting in a growing list." ], "description": "Behavior when adding more memory beyond the current view." + }, + "memory-inspector.loadingBehavior": { + "type": "string", + "enum": [ + "Manual", + "Automatic" + ], + "default": "Manual", + "markdownEnumDescriptions": [ + "Shows a button to load the next bytes.", + "Automatically loads the next bytes if the bottom of the list is reached. Only applies when `#memory-inspector.scrollingBehavior#` is set to `Infinite`." + ], + "description": "Behavior on how new memory should be loaded." } } } diff --git a/src/plugin/manifest.ts b/src/plugin/manifest.ts index 37facab..0675519 100644 --- a/src/plugin/manifest.ts +++ b/src/plugin/manifest.ts @@ -31,6 +31,8 @@ export const CONFIG_GROUPS_PER_ROW = 'groupings.groupsPerRow'; export const DEFAULT_GROUPS_PER_ROW = 4; export const CONFIG_SCROLLING_BEHAVIOR = 'scrollingBehavior'; export const DEFAULT_SCROLLING_BEHAVIOR = 'Paginate'; +export const CONFIG_LOADING_BEHAVIOR = 'loadingBehavior'; +export const DEFAULT_LOADING_BEHAVIOR = 'Manual'; export const CONFIG_SHOW_VARIABLES_COLUMN = 'columns.variables'; export const CONFIG_SHOW_ASCII_COLUMN = 'columns.ascii'; diff --git a/src/plugin/memory-webview-main.ts b/src/plugin/memory-webview-main.ts index c8c6420..5c639c6 100644 --- a/src/plugin/memory-webview-main.ts +++ b/src/plugin/memory-webview-main.ts @@ -35,7 +35,7 @@ import { import { MemoryProvider } from './memory-provider'; import { outputChannelLogger } from './logger'; import { VariableRange } from '../common/memory-range'; -import { ColumnVisibilityStatus, MemoryDisplayConfiguration as MemoryDisplayConfiguration, ScrollingBehavior } from '../webview/utils/view-types'; +import { ColumnVisibilityStatus, LoadingBehavior, MemoryDisplayConfiguration as MemoryDisplayConfiguration, ScrollingBehavior } from '../webview/utils/view-types'; interface Variable { name: string; @@ -90,7 +90,7 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider { public openCustomDocument(uri: vscode.Uri): vscode.CustomDocument { return { uri, - dispose: () => {} + dispose: () => { } }; } @@ -154,7 +154,7 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider { const cspSrc = panel.webview.cspSource; const codiconsUri = panel.webview.asWebviewUri(vscode.Uri.joinPath(this.extensionUri, 'node_modules', '@vscode/codicons', 'dist', 'codicon.css')); - const memoryInspectorCSS = panel.webview.asWebviewUri(vscode.Uri.joinPath(this.extensionUri, 'media', 'memory-inspector.css')); + const memoryInspectorCSS = panel.webview.asWebviewUri(vscode.Uri.joinPath(this.extensionUri, 'media', 'index.css')); panel.webview.html = ` @@ -181,6 +181,9 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider { this.messenger.onNotification(readyType, () => { this.refresh(participant, options); }, { sender: participant }), + this.messenger.onRequest(setOptionsType, o => { + options = { ...options, ...o }; + }, { sender: participant }), this.messenger.onRequest(logMessageType, message => outputChannelLogger.info('[webview]:', message), { sender: participant }), this.messenger.onRequest(readMemoryType, request => this.readMemory(request), { sender: participant }), this.messenger.onRequest(writeMemoryType, request => this.writeMemory(request), { sender: participant }), @@ -230,7 +233,8 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider { const wordsPerGroup = memoryInspectorConfiguration.get(manifest.CONFIG_WORDS_PER_GROUP) || manifest.DEFAULT_WORDS_PER_GROUP; const groupsPerRow = memoryInspectorConfiguration.get(manifest.CONFIG_GROUPS_PER_ROW) || manifest.DEFAULT_GROUPS_PER_ROW; const scrollingBehavior = memoryInspectorConfiguration.get(manifest.CONFIG_SCROLLING_BEHAVIOR) || manifest.DEFAULT_SCROLLING_BEHAVIOR; - return { wordsPerGroup, groupsPerRow, scrollingBehavior }; + const loadingBehavior = memoryInspectorConfiguration.get(manifest.CONFIG_LOADING_BEHAVIOR) || manifest.DEFAULT_LOADING_BEHAVIOR; + return { wordsPerGroup, groupsPerRow, scrollingBehavior, loadingBehavior }; } protected onMemoryDisplayConfigurationChanged(participant: MessageParticipant): vscode.Disposable { diff --git a/src/webview/columns/ascii-column.ts b/src/webview/columns/ascii-column.tsx similarity index 72% rename from src/webview/columns/ascii-column.ts rename to src/webview/columns/ascii-column.tsx index 319d45a..52be24e 100644 --- a/src/webview/columns/ascii-column.ts +++ b/src/webview/columns/ascii-column.tsx @@ -14,10 +14,12 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ +import * as React from 'react'; import { ReactNode } from 'react'; import { BigIntMemoryRange, toOffset } from '../../common/memory-range'; import { ColumnContribution, TableRenderOptions } from './column-contribution-service'; import { Memory } from '../utils/view-types'; +import { chunkIntoN } from '../utils/arrays'; function isPrintableAsAscii(input: number): boolean { return input >= 32 && input < (128 - 1); @@ -32,13 +34,28 @@ export class AsciiColumn implements ColumnContribution { readonly id = 'ascii'; readonly label = 'ASCII'; readonly priority = 3; + render(range: BigIntMemoryRange, memory: Memory, options: TableRenderOptions): ReactNode { const startOffset = toOffset(memory.address, range.startAddress, options.wordSize); const endOffset = toOffset(memory.address, range.endAddress, options.wordSize); - let result = ''; - for (let i = startOffset; i < endOffset; i++) { - result += getASCIIForSingleByte(memory.bytes[i]); + + const indices = Array.from({ length: endOffset - startOffset }, (_, a) => a + startOffset); + const chunks = chunkIntoN(indices, options.groupsPerRow); + const groups: ReactNode[] = []; + + for (const chunk of chunks) { + let result = ''; + for (const i of chunk) { + result += getASCIIForSingleByte(memory.bytes[i]); + } + + groups.push({result}); } - return result; + + return ( +
+ {groups} +
+ ); } } diff --git a/src/webview/columns/data-column.tsx b/src/webview/columns/data-column.tsx index b8ba9f2..21d483f 100644 --- a/src/webview/columns/data-column.tsx +++ b/src/webview/columns/data-column.tsx @@ -40,7 +40,11 @@ export class DataColumn implements ColumnContribution { } } if (words.length) { groups.push({words}); } - return groups; + return ( +
+ {groups} +
+ ); } protected renderWord(memory: Memory, options: TableRenderOptions, currentAddress: bigint): React.ReactNode { diff --git a/src/webview/components/memory-table.tsx b/src/webview/components/memory-table.tsx index 1bb587a..43875f2 100644 --- a/src/webview/components/memory-table.tsx +++ b/src/webview/components/memory-table.tsx @@ -14,16 +14,20 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ +// Primereact works with null values +/* eslint-disable no-null/no-null */ + import React from 'react'; -import { - VSCodeDataGrid, - VSCodeDataGridRow, - VSCodeDataGridCell -} from '@vscode/webview-ui-toolkit/react'; -import { Decoration, Memory, MemoryDisplayConfiguration, ScrollingBehavior, StylableNodeAttributes, isTrigger } from '../utils/view-types'; -import { toHexStringWithRadixMarker } from '../../common/memory-range'; +import { Decoration, Memory, MemoryDisplayConfiguration, ScrollingBehavior, isTrigger } from '../utils/view-types'; import { TableRenderOptions } from '../columns/column-contribution-service'; import { DebugProtocol } from '@vscode/debugprotocol'; +import { DataTable, DataTableCellSelection, DataTableProps, DataTableRowData, DataTableSelectionCellChangeEvent } from 'primereact/datatable'; +import { Column } from 'primereact/column'; +import { VirtualScrollerLazyEvent } from 'primereact/virtualscroller'; +import deepequal from 'fast-deep-equal'; +import { resize } from '../utils/arrays'; +import { ProgressSpinner } from 'primereact/progressspinner'; +import { Nullable } from 'primereact/ts-helpers'; export interface MoreMemorySelectProps { count: number; @@ -98,103 +102,388 @@ interface MemoryTableProps extends TableRenderOptions, MemoryDisplayConfiguratio offset: number; count: number; fetchMemory(partialOptions?: Partial): Promise; + isMemoryFetching: boolean; +} + +interface MemoryRowListOptions { + numRows: number; + wordsPerRow: number; + bigWordsPerRow: bigint; } -export class MemoryTable extends React.Component { +interface MemoryRowData { + rowIndex: number; + startAddress: bigint; + endAddress: bigint; +} + +interface MemoryTableState { + memory?: Memory; + data: MemoryRowData[]; + isLazyLoading: boolean; + selectedData: Nullable>; +} + +const itemHeightSingleGroupPerRow = 31; +const heightGroupsPerRowGain = 14; +const datatableRequestCount = 32; + +export class MemoryTable extends React.Component { + + protected datatableRef; + + protected get isShowMoreEnabled(): boolean { + return !!this.props.memory?.bytes.length; + } + + protected get isInfiniteAutomaticBehavior(): boolean { + return this.props.scrollingBehavior === 'Infinite' && this.props.loadingBehavior === 'Automatic'; + } + + constructor(props: MemoryTableProps) { + super(props); + + this.datatableRef = React.createRef>(); + this.initState(); + } + + protected initState(): void { + const memory = this.props.memory; + const numRows = memory ? this.createMemoryRowListOptions(memory, this.props).numRows : 1; + this.state = { + data: Array.from({ length: numRows }), + selectedData: null, + isLazyLoading: false + }; + } + + public componentDidUpdate(prevProps: Readonly): void { + this.onMemoryChange(this.props); + this.onOptionsChange(prevProps, this.props); + this.onBehaviorChange(prevProps, this.props); + } + + /** + * Updates the internal `state.data` to the new memory changes. + * + * **Details** + * + * Depending on how the memory changed, the new memory will be handled differently. + * + * - Through lazy loading: The new data will be appended to the bottom of our `state.data`. + * - Outside (e.g., options): The whole `state.data` will be replaced with the incoming data. + */ + protected onMemoryChange(currentProps: Readonly): void { + const state = this.state; + const memory = currentProps.memory; + + if (!deepequal(memory, state.memory)) { + if (memory !== undefined) { + // We triggered the change through lazy loading + if (this.state.isLazyLoading) { + const options = this.createMemoryRowListOptions(memory, currentProps); + const first = state.data.length - 1; + const last = options.numRows; + let virtualData = [...state.data]; + virtualData = resize(virtualData, options.numRows); + + const newRows = this.createTableRows(options, first, last, memory); + virtualData.splice(first, last - first, ...newRows); + + this.setState(({ + memory, + data: virtualData, + isLazyLoading: false + })); + } else { + // The memory changed from somewhere else + this.resetState(currentProps); + } + } else { + this.resetState(currentProps); + } + } + } + + /** + * Updates the internal `state.data` to respect the new options. + * + * **Details** + * + * Changes to the options restructures the whole datatable. We need to replace the old data with new the new memory. + */ + protected onOptionsChange(prevProps: Readonly, currentProps: Readonly): void { + if ((prevProps.wordsPerGroup !== currentProps.wordsPerGroup || prevProps.groupsPerRow !== currentProps.groupsPerRow)) { + this.resetState(currentProps); + } + } + + /** + * Updates the internal `state.data` to respect the new behaviors provided. + * + * **Details** + * + * To allow the `virtualScroller` to work correctly, there needs to be sufficient rows available in the bottom of the list. + * Consequently, additional data will be requested if there is a switch to `Infinite + Automatic` behavior. + */ + protected onBehaviorChange(prevProps: Readonly, currentProps: Readonly): void { + if ((prevProps.loadingBehavior !== currentProps.loadingBehavior || prevProps.scrollingBehavior !== currentProps.scrollingBehavior)) { + const memory = currentProps.memory; + + if (this.isInfiniteAutomaticBehavior && memory !== undefined) { + const { wordsPerRow } = this.createMemoryRowListOptions(memory, currentProps); + const scrollingCount = currentProps.count + wordsPerRow * datatableRequestCount; + + this.props.fetchMemory({ count: scrollingCount }); + } + } + } + public render(): React.ReactNode { - const rows = this.getTableRows(); - const { offset, count, memory, fetchMemory, scrollingBehavior } = this.props; - const showMoreMemoryButton = !!memory?.bytes.length; + const columnWidth = 100 / (this.props.columnOptions.length); + const props = this.createBehaviorSpecificProperties(this.createDataTableProperties()); + return ( -
- - - {this.props.columnOptions.map(({ contribution }, index) => - {contribution.label} - )} - - {showMoreMemoryButton && ()} - {rows} - {showMoreMemoryButton && ()} - +
+ + {this.props.columnOptions.map(({ contribution }) => row && contribution.render(row, this.props.memory!, this.props)} + > + {contribution.label} + )} +
); } - protected getTableRows(): React.ReactNode { - if (!this.props.memory) { - return ( - - {this.props.columnOptions.map((column, index) => - column.active - && No Data - )} - - ); - } + protected createDataTableProperties(): DataTableProps { + return { + dataKey: 'startAddress', + cellSelection: true, + className: MemoryTable.TABLE_CLASS, + resizableColumns: true, + header: this.renderHeader(), + lazy: true, + loading: false, + metaKeySelection: false, + onSelectionChange: this.onSelectionChanged, + rowClassName: this.rowClass, + value: this.state.data, + scrollable: true, + scrollHeight: 'flex', + selectionMode: 'single', + selection: this.state.selectedData as DataTableCellSelection, + tableStyle: { minWidth: '30rem' }, + }; - return this.renderRows(this.props.memory); } - protected renderRows(memory: Memory): React.ReactNode { - const wordsPerRow = this.props.wordsPerGroup * this.props.groupsPerRow; - const numRows = Math.ceil((memory.bytes.length * 8) / (wordsPerRow * this.props.wordSize)); - const bigWordsPerRow = BigInt(wordsPerRow); - const gridTemplateColumns = new Array(this.props.columnOptions.length).fill('1fr').join(' '); - const rows = []; - let startAddress = memory.address; - for (let i = 0; i < numRows; i++) { - rows.push(this.renderRow(startAddress, startAddress + bigWordsPerRow, gridTemplateColumns, i % 4 === 3)); - startAddress += bigWordsPerRow; + protected createBehaviorSpecificProperties(props: DataTableProps): DataTableProps { + if (this.isInfiniteAutomaticBehavior) { + return { + ...props, + virtualScrollerOptions: { + lazy: true, + items: this.state.data, + onLazyLoad: this.onLazyLoad, + itemSize: itemHeightSingleGroupPerRow + heightGroupsPerRowGain * (this.props.groupsPerRow - 1), + } + }; + } else { + return { + ...props, + virtualScrollerOptions: { + items: this.state.data, + itemSize: itemHeightSingleGroupPerRow + heightGroupsPerRowGain * (this.props.groupsPerRow - 1), + }, + footer: this.renderFooter() + }; } - return rows; } - protected renderRow(startAddress: bigint, endAddress: bigint, columnStyle: string, divider?: boolean): React.ReactNode { - const addressString = toHexStringWithRadixMarker(startAddress); - const range = { startAddress, endAddress }; - const { title, style, className } = this.getRowAttributes(divider); + /** + * Handles the lazy load triggered from the `virtualScroller`. + * + * **Details** + * + * This method fetches extra data to allow a smooth scrolling experience. + */ + protected onLazyLoad = async (event: VirtualScrollerLazyEvent) => { + if (this.state.isLazyLoading || this.props.isMemoryFetching) { + return; + } + this.setState(prev => ({ ...prev, isLazyLoading: true })); + const first = event.first as number; + const last = event.last as number; + const virtualData = [...this.state.data]; + const memory = this.props.memory; + + // Something in the background changed the data - ignore it + if (first > last) { + this.setState(prev => ({ ...prev, isLazyLoading: false })); + return; + } + + if (memory !== undefined) { + const options = this.createMemoryRowListOptions(memory, this.props); + + if (last === options.numRows) { + // We reached the end of the list + const wordsPerRow = options.wordsPerRow; + const newCount = this.props.count + wordsPerRow * datatableRequestCount; + + this.props.fetchMemory({ count: newCount }); + } else { + // We are somewhere between + const loadedData = this.createTableRows(options, first, last, memory); + + virtualData.splice(first, last - first, ...loadedData); + + this.setState(prev => ({ ...prev, data: virtualData, isLazyLoading: false })); + } + + } else { + this.setState(prev => ({ ...prev, isLazyLoading: false })); + } + }; + + protected onSelectionChanged = (event: DataTableSelectionCellChangeEvent) => { + this.setState(prev => ({ ...prev, selectedData: event.value })); + }; + + protected renderHeader(): React.ReactNode | undefined { + const { offset, count, fetchMemory, scrollingBehavior } = this.props; + + let memorySelect: React.ReactNode | undefined; + let loading: React.ReactNode | undefined; + + if (this.isShowMoreEnabled) { + memorySelect =
+ +
; + } + + if (this.props.isMemoryFetching) { + loading =
+ + Loading +
; + } + return ( - - {this.props.columnOptions.map((column, index) => ( - - {column.contribution.render(range, this.props.memory!, this.props)} - - ))} - +
+ {memorySelect} + {loading} +
); } - protected getRowAttributes(divider?: boolean): Partial { - const className = 'row'; - if (divider) { - return { style: { borderBottom: '2px solid var(--vscode-editor-lineHighlightBorder)' }, className }; + protected renderFooter(): React.ReactNode | undefined { + const { offset, count, fetchMemory, scrollingBehavior } = this.props; + + let memorySelect: React.ReactNode | undefined; + + if (this.isShowMoreEnabled) { + memorySelect =
+ +
; } - return { className }; + + return ( +
+ {memorySelect} +
+ ); } + + protected rowClass = (data?: DataTableRowData) => { + const css: string[] = []; + + if (data !== undefined && this.isGroupSeparatorRow(data)) { + css.push(MemoryTable.GROUP_SEPARATOR); + } + + return css; + }; + + protected isGroupSeparatorRow(row: MemoryRowData): boolean { + return row.rowIndex % 4 === 3; + } + + protected createTableRows(options: MemoryRowListOptions, first: number, last: number, memory?: Memory): MemoryRowData[] { + if (memory === undefined) { + return []; + } + + const rows: MemoryRowData[] = []; + for (let i = first; i < last && i < options.numRows; i++) { + const startAddress = memory.address + options.bigWordsPerRow * BigInt(i); + rows.push(this.createMemoryRow(i, startAddress, options)); + } + + return rows; + } + + protected createMemoryRowListOptions(memory: Memory, props: MemoryTableProps): MemoryRowListOptions { + const wordsPerRow = props.wordsPerGroup * props.groupsPerRow; + const numRows = Math.ceil((memory.bytes.length * 8) / (wordsPerRow * props.wordSize)); + const bigWordsPerRow = BigInt(wordsPerRow); + + return { + numRows, + wordsPerRow, + bigWordsPerRow + }; + } + + protected createMemoryRow(rowIndex: number, startAddress: bigint, memoryTableOptions: MemoryRowListOptions): MemoryRowData { + return { + rowIndex, + startAddress, + endAddress: startAddress + memoryTableOptions.bigWordsPerRow + }; + } + + protected resetState(props: MemoryTableProps): void { + const memory = props.memory; + let data: MemoryRowData[] = []; + + if (memory !== undefined) { + const options = this.createMemoryRowListOptions(memory, props); + data = this.createTableRows(options, 0, options.numRows, memory); + } + + this.setState(({ + memory, + data, + selectedData: null, + isLazyLoading: false + })); + } +} + +export namespace MemoryTable { + export const TABLE_CLASS = 'memory-inspector-table'; + export const GROUP_SEPARATOR = 'group-separator'; } diff --git a/src/webview/components/memory-widget.tsx b/src/webview/components/memory-widget.tsx index 2e68a16..c2d2c1b 100644 --- a/src/webview/components/memory-widget.tsx +++ b/src/webview/components/memory-widget.tsx @@ -30,6 +30,7 @@ interface MemoryWidgetProps { memoryReference: string; offset: number; count: number; + isMemoryFetching: boolean; refreshMemory: () => void; updateMemoryArguments: (memoryArguments: Partial) => void; toggleColumn(id: string, active: boolean): void; @@ -47,6 +48,7 @@ const defaultOptions: MemoryWidgetState = { wordsPerGroup: 1, groupsPerRow: 4, scrollingBehavior: 'Paginate', + loadingBehavior: 'Manual' }; export class MemoryWidget extends React.Component { @@ -60,7 +62,7 @@ export class MemoryWidget extends React.Component + return (
- ; +
); } protected updateRenderOptions = (newState: Partial) => this.setState(prevState => ({ ...prevState, ...newState })); diff --git a/src/webview/components/multi-select.tsx b/src/webview/components/multi-select.tsx index 8e583b6..58e3a8c 100644 --- a/src/webview/components/multi-select.tsx +++ b/src/webview/components/multi-select.tsx @@ -14,7 +14,7 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ -import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react'; +import { Checkbox, CheckboxChangeEvent } from 'primereact/checkbox'; import * as React from 'react'; export interface SingleSelectItemProps { @@ -31,31 +31,33 @@ interface MultiSelectProps { } const MultiSelectBar: React.FC = ({ items, onSelectionChanged, id }) => { - const changeHandler: ((e: Event) => unknown) & React.FormEventHandler = React.useCallback(e => { + const changeHandler: ((e: CheckboxChangeEvent) => unknown) = React.useCallback(e => { const target = e.target as HTMLInputElement; if (target) { onSelectionChanged(target.id, target.checked); } }, [onSelectionChanged]); + return ( -
+
{items.map(({ label, id: itemId, checked }) => ( - {label} - +
+ + +
))}
); }; export const MultiSelectWithLabel: React.FC = ({ id, label, items, onSelectionChanged }) => ( -
- +
+
); diff --git a/src/webview/components/options-widget.tsx b/src/webview/components/options-widget.tsx index 650cce1..4d70dda 100644 --- a/src/webview/components/options-widget.tsx +++ b/src/webview/components/options-widget.tsx @@ -14,19 +14,31 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ -import React from 'react'; import type { DebugProtocol } from '@vscode/debugprotocol'; -import { MemoryDisplayConfigurationChangeRequest, SerializedTableRenderOptions } from '../utils/view-types'; -import { VSCodeButton, VSCodeDivider, VSCodeDropdown, VSCodeOption, VSCodeTextField } from '@vscode/webview-ui-toolkit/react'; -import { messenger } from '../view-messenger'; -import { setMemoryDisplayConfigurationType } from '../../common/messaging'; +import { Formik, FormikConfig, FormikErrors, FormikProps } from 'formik'; +import { Button } from 'primereact/button'; +import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown'; +import { InputText } from 'primereact/inputtext'; +import { OverlayPanel } from 'primereact/overlaypanel'; +import React, { KeyboardEvent } from 'react'; import { HOST_EXTENSION } from 'vscode-messenger-common'; +import { setMemoryDisplayConfigurationType } from '../../common/messaging'; import { TableRenderOptions } from '../columns/column-contribution-service'; +import { + MemoryDisplayConfigurationChangeRequest, + SerializedTableRenderOptions, +} from '../utils/view-types'; +import { messenger } from '../view-messenger'; import { MultiSelectWithLabel } from './multi-select'; +import { classNames } from 'primereact/utils'; -export interface OptionsWidgetProps extends Omit, Required { +export interface OptionsWidgetProps + extends Omit, + Required { updateRenderOptions: (options: Partial) => void; - updateMemoryArguments: (memoryArguments: Partial) => void; + updateMemoryArguments: ( + memoryArguments: Partial + ) => void; refreshMemory: () => void; toggleColumn(id: string, active: boolean): void; } @@ -39,78 +51,278 @@ const enum InputId { GroupsPerRow = 'groups-per-row', } +interface OptionsForm { + address: string; + offset: string; + count: string; +} + +const allowedBytesPerGroup = [1, 2, 4, 8, 16]; +const allowedGroupsPerRow = [1, 2, 4, 8, 16, 32]; + export class OptionsWidget extends React.Component { + protected formConfig: FormikConfig; + protected extendedOptions = React.createRef(); + + protected get optionsFormValues(): OptionsForm { + return { + address: this.props.memoryReference, + offset: this.props.offset.toString(), + count: this.props.count.toString(), + }; + } + constructor(props: OptionsWidgetProps) { super(props); + + this.formConfig = { + initialValues: this.optionsFormValues, + enableReinitialize: true, + validate: this.validate, + onSubmit: () => { + this.props.refreshMemory(); + }, + }; } + protected validate = (values: OptionsForm) => { + const errors: FormikErrors = {}; + + if (values.address.trim().length === 0) { + errors.address = 'Required'; + } else { + const address = +values.address; + if (!isNaN(address) && address < 0) { + errors.address = 'Value needs to be larger than 0'; + } + } + + if (values.offset.trim().length === 0) { + errors.offset = 'Required'; + } else { + const offset = +values.offset; + if (isNaN(offset)) { + errors.offset = 'No number provided'; + } + } + + if (values.count.trim().length === 0) { + errors.count = 'Required'; + } else { + const count = +values.count; + if (isNaN(count)) { + errors.count = 'No number provided'; + } else if (count < 0) { + errors.count = 'Value needs to be larger than 0'; + } + } + + return errors; + }; + override render(): React.ReactNode { + this.formConfig.initialValues = this.optionsFormValues; - return
-
-
-
-
- - Address - - Offset - Length - Go - -
-
- {!!this.props.columnOptions.length && configurable) - .map(column => ({ id: column.contribution.id, label: column.contribution.label, checked: column.active }))} - onSelectionChanged={this.props.toggleColumn} - />} - - - 1 - 2 - 4 - 8 - 16 - - - - 1 - 2 - 4 - 8 - 16 - 32 - -
- + return ( +
+
+ + {formik => ( +
+ + + this.doHandleBlur(ev, formik)} + /> + {formik.errors.address ? + ( + {formik.errors.address} + ) + : undefined} + + + + this.doHandleBlur(ev, formik)} + /> + {formik.errors.offset ? + ( + {formik.errors.offset} + ) + : undefined} + + + + this.doHandleBlur(ev, formik)} + /> + {formik.errors.count ? + ( + {formik.errors.count} + ) + : undefined} + + +
+ )} + + + +
+ {!!this.props.columnOptions.length && ( + configurable) + .map(column => ({ + id: column.contribution.id, + label: column.contribution.label, + checked: column.active, + }))} + onSelectionChanged={this.props.toggleColumn} + /> + )} + + + + +
+ +
- -
; + ); + } + + protected doHandleBlur( + ev: React.FocusEvent, + formik: FormikProps + ): void { + formik.handleBlur(ev); + const id = ev.currentTarget.id as InputId; + const value = ev.currentTarget.value; + + this.updateOptions(id, value); + } + + protected handleKeyDown: (event: KeyboardEvent) => void = e => this.doHandleKeyDown(e); + protected doHandleKeyDown(event: KeyboardEvent): void { + if (event.code === 'Enter') { + const id = event.currentTarget.id as InputId; + const value = event.currentTarget.value; + + this.updateOptions(id, value); + } + } + + protected updateOptions(id: InputId, value: string): void { + switch (id) { + case InputId.Address: + this.props.updateMemoryArguments({ + memoryReference: value, + }); + break; + case InputId.Offset: + if (!Number.isNaN(value)) { + this.props.updateMemoryArguments({ + offset: Number(value), + }); + } + break; + case InputId.Length: + if (!Number.isNaN(value)) { + this.props.updateMemoryArguments({ + count: Number(value), + }); + } + break; + default: { + throw new Error(`${id} can not be handled. Did you call the correct method?`); + } + } } - /* eslint-disable @typescript-eslint/no-explicit-any */ // The types from the VSCode components are hard to reconcile with plain React types. - protected handleInputChange: React.FormEventHandler & ((event: Event) => unknown) = e => this.doHandleChangeEvent(e as any); + protected handleAdvancedOptionsDropdownChange: (event: DropdownChangeEvent) => void = e => this.doHandleAdvancedOptionsDropdownChange(e); + protected doHandleAdvancedOptionsDropdownChange(event: DropdownChangeEvent): void { + const id = event.target.id as InputId; + const value = event.target.value; - protected doHandleChangeEvent(event: React.FormEvent): unknown { - const id = event.currentTarget.id as InputId; switch (id) { - case InputId.Address: return this.props.updateMemoryArguments({ memoryReference: event.currentTarget.value }); - case InputId.Offset: return !Number.isNaN(event.currentTarget.value) && this.props.updateMemoryArguments({ offset: Number(event.currentTarget.value) }); - case InputId.Length: return !Number.isNaN(event.currentTarget.value) && this.props.updateMemoryArguments({ count: Number(event.currentTarget.value) }); - case InputId.WordsPerGroup: return this.updateConfiguration({ id: 'groupings.wordsPerGroup', value: Number(event.currentTarget.value) }); - case InputId.GroupsPerRow: return this.updateConfiguration({ id: 'groupings.groupsPerRow', value: Number(event.currentTarget.value) }); + case InputId.WordsPerGroup: + this.updateConfiguration({ + id: 'groupings.wordsPerGroup', + value: Number(value), + }); + break; + case InputId.GroupsPerRow: + this.updateConfiguration({ + id: 'groupings.groupsPerRow', + value: Number(value), + }); + break; + default: { + throw new Error(`${id} can not be handled. Did you call the correct method?`); + } } } - protected updateConfiguration(viewConfigurationChangeRequest: MemoryDisplayConfigurationChangeRequest): void { - return messenger.sendNotification(setMemoryDisplayConfigurationType, HOST_EXTENSION, viewConfigurationChangeRequest); + protected updateConfiguration( + viewConfigurationChangeRequest: MemoryDisplayConfigurationChangeRequest + ): void { + return messenger.sendNotification( + setMemoryDisplayConfigurationType, + HOST_EXTENSION, + viewConfigurationChangeRequest + ); } } diff --git a/src/webview/memory-webview-view.tsx b/src/webview/memory-webview-view.tsx index 4485407..df9f73d 100644 --- a/src/webview/memory-webview-view.tsx +++ b/src/webview/memory-webview-view.tsx @@ -34,6 +34,9 @@ import { variableDecorator } from './variables/variable-decorations'; import { AsciiColumn } from './columns/ascii-column'; import { AddressColumn } from './columns/address-column'; import { DataColumn } from './columns/data-column'; +import { PrimeReactProvider } from 'primereact/api'; +import '../../media/primereact-theme/themes/vscode/theme.scss'; +import 'primeflex/primeflex.scss'; export interface MemoryAppState extends MemoryState { decorations: Decoration[]; @@ -59,6 +62,7 @@ class App extends React.Component<{}, MemoryAppState> { count: 256, decorations: [], columns: columnContributionService.getColumns(), + isMemoryFetching: false }; } @@ -69,18 +73,21 @@ class App extends React.Component<{}, MemoryAppState> { } public render(): React.ReactNode { - return ; + return + + ; } protected async handleColumnVisibilityChanged(request: ColumnVisibilityStatus): Promise { @@ -101,6 +108,7 @@ class App extends React.Component<{}, MemoryAppState> { protected fetchMemory = async (partialOptions?: Partial): Promise => this.doFetchMemory(partialOptions); protected async doFetchMemory(partialOptions?: Partial): Promise { + this.setState(prev => ({ ...prev, isMemoryFetching: true })); const completeOptions = { memoryReference: partialOptions?.memoryReference || this.state.memoryReference, offset: partialOptions?.offset ?? this.state.offset, @@ -112,12 +120,17 @@ class App extends React.Component<{}, MemoryAppState> { new Set(columnContributionService.getUpdateExecutors().concat(decorationService.getUpdateExecutors())), executor => executor.fetchData(completeOptions) )); + this.setState({ decorations: decorationService.decorations, memory: this.convertMemory(response), + memoryReference: completeOptions.memoryReference, offset: completeOptions.offset, count: completeOptions.count, + isMemoryFetching: false }); + messenger.sendRequest(setOptionsType, HOST_EXTENSION, completeOptions); + } protected convertMemory(result: DebugProtocol.ReadMemoryResponse['body']): Memory { diff --git a/src/webview/utils/arrays.ts b/src/webview/utils/arrays.ts new file mode 100644 index 0000000..bc7124c --- /dev/null +++ b/src/webview/utils/arrays.ts @@ -0,0 +1,27 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +// https://www.30secondsofcode.org/js/s/split-array-into-chunks/ +export function chunkIntoN(arr: T[], n: number): T[][] { + const size = Math.ceil(arr.length / n); + return Array.from({ length: n }, (_, i) => + arr.slice(i * size, i * size + size) + ); +} + +export function resize(arr: T[], newSize: number, defaultValue?: T): T[] { + return [...arr, ...Array(Math.max(newSize - arr.length, 0)).fill(defaultValue)]; +} diff --git a/src/webview/utils/view-types.ts b/src/webview/utils/view-types.ts index 6e9075e..e4cc5a2 100644 --- a/src/webview/utils/view-types.ts +++ b/src/webview/utils/view-types.ts @@ -55,6 +55,7 @@ export function areDecorationsEqual(one: Decoration, other: Decoration): boolean export interface MemoryState extends DebugProtocol.ReadMemoryArguments { memory?: Memory; + isMemoryFetching: boolean; } export interface UpdateExecutor { @@ -72,10 +73,12 @@ export interface FullNodeAttributes extends StylableNodeAttributes { } export type ScrollingBehavior = 'Paginate' | 'Infinite'; +export type LoadingBehavior = 'Manual' | 'Automatic'; export interface MemoryDisplayConfiguration { wordsPerGroup: number; groupsPerRow: number; scrollingBehavior: ScrollingBehavior; + loadingBehavior: LoadingBehavior; } export interface ColumnVisibilityStatus { @@ -84,7 +87,7 @@ export interface ColumnVisibilityStatus { } export interface MemoryDisplayConfigurationChangeRequest { - id: 'groupings.wordsPerGroup' | 'groupings.groupsPerRow' | 'scrollingBehavior'; + id: 'groupings.wordsPerGroup' | 'groupings.groupsPerRow' | 'scrollingBehavior' | 'loadingBehavior'; value: number; } diff --git a/webpack.config.js b/webpack.config.js index 41d3666..3c9c71f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -21,7 +21,15 @@ const common = { resolve: { fullySpecified: false } - } + }, + { + test: /\.s[ac]ss$/i, + use: [ + "style-loader", + "css-loader", + "sass-loader", + ], + }, ] }, externals: { diff --git a/yarn.lock b/yarn.lock index 095cfb0..3a3cbd1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23,6 +23,13 @@ chalk "^2.0.0" js-tokens "^4.0.0" +"@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7": + version "7.23.8" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650" + integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw== + dependencies: + regenerator-runtime "^0.14.0" + "@discoveryjs/json-ext@^0.5.0": version "0.5.7" resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70" @@ -102,36 +109,6 @@ "@jridgewell/resolve-uri" "3.1.0" "@jridgewell/sourcemap-codec" "1.4.14" -"@microsoft/fast-element@^1.11.0", "@microsoft/fast-element@^1.6.2", "@microsoft/fast-element@^1.9.0": - version "1.11.0" - resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.11.0.tgz#494f6c87057bcbb42406982d68a92887d6b5acb1" - integrity sha512-VKJYMkS5zgzHHb66sY7AFpYv6IfFhXrjQcAyNgi2ivD65My1XOhtjfKez5ELcLFRJfgZNAxvI8kE69apXERTkw== - -"@microsoft/fast-foundation@^2.38.0", "@microsoft/fast-foundation@^2.41.1": - version "2.47.0" - resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.47.0.tgz#a4cc8c5277e21d080215f5adcaed4266a8dd8a8e" - integrity sha512-EyFuioaZQ9ngjUNRQi8R3dIPPsaNQdUOS+tP0G7b1MJRhXmQWIitBM6IeveQA6ZvXG6H21dqgrfEWlsYrUZ2sw== - dependencies: - "@microsoft/fast-element" "^1.11.0" - "@microsoft/fast-web-utilities" "^5.4.1" - tabbable "^5.2.0" - tslib "^1.13.0" - -"@microsoft/fast-react-wrapper@^0.1.18": - version "0.1.48" - resolved "https://registry.yarnpkg.com/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.1.48.tgz#aa89c0dfb703c2f71619c536de2342e28b40b8c9" - integrity sha512-9NvEjru9Kn5ZKjomAMX6v+eF0DR+eDkxKDwDfi+Wb73kTbrNzcnmlwd4diN15ygH97kldgj2+lpvI4CKLQQWLg== - dependencies: - "@microsoft/fast-element" "^1.9.0" - "@microsoft/fast-foundation" "^2.41.1" - -"@microsoft/fast-web-utilities@^5.4.1": - version "5.4.1" - resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz#8e3082ee2ff2b5467f17e7cb1fb01b0e4906b71f" - integrity sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg== - dependencies: - exenv-es6 "^1.1.1" - "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -179,6 +156,14 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40" integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ== +"@types/hoist-non-react-statics@^3.3.1": + version "3.3.5" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494" + integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/json-schema@*", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9": version "7.0.11" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" @@ -211,6 +196,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.4.1": + version "4.4.10" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac" + integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@^18.0.26": version "18.0.26" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917" @@ -374,15 +366,6 @@ yauzl "^2.3.1" yazl "^2.2.2" -"@vscode/webview-ui-toolkit@^1.2.0": - version "1.2.0" - resolved "https://registry.yarnpkg.com/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-1.2.0.tgz#1da6f7842afe619932b210032a1cb244cceb1740" - integrity sha512-3ai3B2iFK0myqSnEgK9JZd1nKJIR1zgOlQbwSqHS9Y15cyO0diyjsKzcDFCnuBI1UG4vmekWp+xWSTbrh36kLw== - dependencies: - "@microsoft/fast-element" "^1.6.2" - "@microsoft/fast-foundation" "^2.38.0" - "@microsoft/fast-react-wrapper" "^0.1.18" - "@webassemblyjs/ast@1.11.1": version "1.11.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7" @@ -618,6 +601,14 @@ ansi-styles@^6.1.0: resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5" integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug== +anymatch@~3.1.2: + version "3.1.3" + resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e" + integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw== + dependencies: + normalize-path "^3.0.0" + picomatch "^2.0.4" + arch@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11" @@ -705,6 +696,11 @@ base64-js@^1.3.1: resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a" integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA== +binary-extensions@^2.0.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" + integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== + bl@^4.0.3: version "4.1.0" resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a" @@ -741,7 +737,7 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" -braces@^3.0.2: +braces@^3.0.2, braces@~3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== @@ -868,6 +864,21 @@ cheerio@^1.0.0-rc.9: parse5 "^7.0.0" parse5-htmlparser2-tree-adapter "^7.0.0" +"chokidar@>=3.0.0 <4.0.0": + version "3.5.3" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" + integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + chownr@^1.1.1: version "1.1.4" resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b" @@ -984,6 +995,20 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3: shebang-command "^2.0.0" which "^2.0.1" +css-loader@^6.9.0: + version "6.9.0" + resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.9.0.tgz#0cc2f14df94ed97c526c5ae42b6b13916d1d8d0e" + integrity sha512-3I5Nu4ytWlHvOP6zItjiHlefBNtrH+oehq8tnQa2kO305qpVyx9XNIT1CXIj5bgCJs7qICBCkgCYxQLKPANoLA== + dependencies: + icss-utils "^5.1.0" + postcss "^8.4.31" + postcss-modules-extract-imports "^3.0.0" + postcss-modules-local-by-default "^4.0.3" + postcss-modules-scope "^3.1.0" + postcss-modules-values "^4.0.0" + postcss-value-parser "^4.2.0" + semver "^7.5.4" + css-select@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6" @@ -1000,6 +1025,11 @@ css-what@^6.1.0: resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw== +cssesc@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" + integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== + csstype@^3.0.2: version "3.1.1" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" @@ -1043,6 +1073,11 @@ deep-is@^0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== +deepmerge@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170" + integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA== + define-properties@^1.1.3, define-properties@^1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1" @@ -1082,6 +1117,14 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-helpers@^5.0.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-serializer@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53" @@ -1443,11 +1486,6 @@ execa@^5.1.1: signal-exit "^3.0.3" strip-final-newline "^2.0.0" -exenv-es6@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/exenv-es6/-/exenv-es6-1.1.1.tgz#80b7a8c5af24d53331f755bac07e84abb1f6de67" - integrity sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ== - expand-template@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c" @@ -1548,6 +1586,20 @@ flatted@^3.1.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787" integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== +formik@^2.4.5: + version "2.4.5" + resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.5.tgz#f899b5b7a6f103a8fabb679823e8fafc7e0ee1b4" + integrity sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ== + dependencies: + "@types/hoist-non-react-statics" "^3.3.1" + deepmerge "^2.1.1" + hoist-non-react-statics "^3.3.0" + lodash "^4.17.21" + lodash-es "^4.17.21" + react-fast-compare "^2.0.1" + tiny-warning "^1.0.2" + tslib "^2.0.0" + fs-constants@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad" @@ -1558,6 +1610,11 @@ fs.realpath@^1.0.0: resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== +fsevents@~2.3.2: + version "2.3.3" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" + integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== + function-bind@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" @@ -1605,7 +1662,7 @@ github-from-package@0.0.0: resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce" integrity sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw== -glob-parent@^5.1.2: +glob-parent@^5.1.2, glob-parent@~5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== @@ -1706,6 +1763,13 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +hoist-non-react-statics@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hosted-git-info@^4.0.2: version "4.1.0" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-4.1.0.tgz#827b82867e9ff1c8d0c4d9d53880397d2c86d224" @@ -1728,6 +1792,11 @@ human-signals@^2.1.0: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0" integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw== +icss-utils@^5.0.0, icss-utils@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae" + integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA== + ieee754@^1.1.13: version "1.2.1" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" @@ -1738,6 +1807,11 @@ ignore@^5.2.0: resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.1.tgz#c2b1f76cb999ede1502f3a226a9310fdfe88d46c" integrity sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA== +immutable@^4.0.0: + version "4.3.4" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f" + integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA== + import-fresh@^3.0.0, import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" @@ -1798,6 +1872,13 @@ is-bigint@^1.0.1: dependencies: has-bigints "^1.0.1" +is-binary-path@~2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" + integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== + dependencies: + binary-extensions "^2.0.0" + is-boolean-object@^1.1.0: version "1.1.2" resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719" @@ -1840,7 +1921,7 @@ is-fullwidth-code-point@^3.0.0: resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d" integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== -is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3: +is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1: version "4.0.3" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084" integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== @@ -2060,6 +2141,11 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" +lodash-es@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" + integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== + lodash.merge@^4.6.2: version "4.6.2" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" @@ -2201,6 +2287,11 @@ mute-stream@~0.0.4: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== +nanoid@^3.3.7: + version "3.3.7" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8" + integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g== + napi-build-utils@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806" @@ -2243,6 +2334,11 @@ node-releases@^2.0.6: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503" integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg== +normalize-path@^3.0.0, normalize-path@~3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" + integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== + npm-run-path@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea" @@ -2455,7 +2551,7 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== -picomatch@^2.3.1: +picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== @@ -2467,6 +2563,56 @@ pkg-dir@^4.2.0: dependencies: find-up "^4.0.0" +postcss-modules-extract-imports@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d" + integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw== + +postcss-modules-local-by-default@^4.0.3: + version "4.0.4" + resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz#7cbed92abd312b94aaea85b68226d3dec39a14e6" + integrity sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q== + dependencies: + icss-utils "^5.0.0" + postcss-selector-parser "^6.0.2" + postcss-value-parser "^4.1.0" + +postcss-modules-scope@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.1.0.tgz#fbfddfda93a31f310f1d152c2bb4d3f3c5592ee0" + integrity sha512-SaIbK8XW+MZbd0xHPf7kdfA/3eOt7vxJ72IRecn3EzuZVLr1r0orzf0MX/pN8m+NMDoo6X/SQd8oeKqGZd8PXg== + dependencies: + postcss-selector-parser "^6.0.4" + +postcss-modules-values@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c" + integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ== + dependencies: + icss-utils "^5.0.0" + +postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4: + version "6.0.15" + resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535" + integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw== + dependencies: + cssesc "^3.0.0" + util-deprecate "^1.0.2" + +postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" + integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== + +postcss@^8.4.31: + version "8.4.33" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742" + integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg== + dependencies: + nanoid "^3.3.7" + picocolors "^1.0.0" + source-map-js "^1.0.2" + prebuild-install@^7.0.1: version "7.1.1" resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45" @@ -2490,7 +2636,24 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -prop-types@^15.8.1: +primeflex@^3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/primeflex/-/primeflex-3.3.1.tgz#361dddf6eb5db50d733e4cddd4b6e376a3d7bd68" + integrity sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ== + +"primereact-sass-theme@github:primefaces/primereact-sass-theme#10.3.3": + version "10.3.3" + resolved "https://codeload.github.com/primefaces/primereact-sass-theme/tar.gz/db9c3b1f9340b9fe53dc6b2a0728e5459b8ffdf3" + +primereact@^10.3.1: + version "10.3.1" + resolved "https://registry.yarnpkg.com/primereact/-/primereact-10.3.1.tgz#e8910c37b24f2bca386a70d9c741f0542bb9760d" + integrity sha512-poBFT6MKMpcOjYzw+q/RIH8fpQdavEw8VqFcU2V/ZtxjuCiPD+IZvgLQgvdCnPtZGNWA56C+CmkV7bqJnglOug== + dependencies: + "@types/react-transition-group" "^4.4.1" + react-transition-group "^4.4.1" + +prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -2559,11 +2722,26 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-is@^16.13.1: +react-fast-compare@^2.0.1: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" + integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== + +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-transition-group@^4.4.1: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" + integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" @@ -2587,6 +2765,13 @@ readable-stream@^3.1.1, readable-stream@^3.4.0: string_decoder "^1.1.1" util-deprecate "^1.0.1" +readdirp@~3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" + integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== + dependencies: + picomatch "^2.2.1" + rechoir@^0.8.0: version "0.8.0" resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.8.0.tgz#49f866e0d32146142da3ad8f0eff352b3215ff22" @@ -2594,6 +2779,11 @@ rechoir@^0.8.0: dependencies: resolve "^1.20.0" +regenerator-runtime@^0.14.0: + version "0.14.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f" + integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw== + regexp.prototype.flags@^1.4.3: version "1.4.3" resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac" @@ -2701,6 +2891,22 @@ safe-regex-test@^1.0.0: get-intrinsic "^1.1.3" is-regex "^1.1.4" +sass-loader@^14.0.0: + version "14.0.0" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-14.0.0.tgz#fc8390f7cc16863622cd16f3ea07b36ba6ea8f91" + integrity sha512-oceP9wWbep/yRJ2+sMbCzk0UsXsDzdNis+N8nu9i5GwPXjy6v3DNB6TqfJLSpPO9k4+B8x8p/CEgjA9ZLkoLug== + dependencies: + neo-async "^2.6.2" + +sass@^1.70.0: + version "1.70.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.70.0.tgz#761197419d97b5358cb25f9dd38c176a8a270a75" + integrity sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ== + dependencies: + chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" + sax@>=0.6.0: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -2739,6 +2945,13 @@ semver@^7.3.4, semver@^7.3.5, semver@^7.3.7: dependencies: lru-cache "^6.0.0" +semver@^7.5.4: + version "7.5.4" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e" + integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA== + dependencies: + lru-cache "^6.0.0" + serialize-javascript@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.0.tgz#efae5d88f45d7924141da8b5c3a7a7e663fefeb8" @@ -2829,6 +3042,11 @@ slash@^3.0.0: resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== + source-map-support@~0.5.20: version "0.5.21" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f" @@ -2938,6 +3156,11 @@ strip-json-comments@~2.0.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ== +style-loader@^3.3.4: + version "3.3.4" + resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.4.tgz#f30f786c36db03a45cbd55b6a70d930c479090e7" + integrity sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w== + supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -2964,11 +3187,6 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== -tabbable@^5.2.0: - version "5.3.3" - resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf" - integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA== - tapable@^2.1.1, tapable@^2.2.0: version "2.2.1" resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0" @@ -3021,6 +3239,11 @@ text-table@^0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw== +tiny-warning@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== + tmp@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14" @@ -3060,6 +3283,11 @@ tslib@^1.13.0, tslib@^1.8.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== +tslib@^2.0.0: + version "2.6.2" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" + integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== + tslib@^2.3.1: version "2.4.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e" @@ -3189,7 +3417,7 @@ url-join@^4.0.1: resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.1.tgz#b642e21a2646808ffa178c4c5fda39844e12cde7" integrity sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA== -util-deprecate@^1.0.1: +util-deprecate@^1.0.1, util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== From fc0ca10a2695a9751b852faeeb1b879f07e4b408 Mon Sep 17 00:00:00 2001 From: Haydar Metin Date: Mon, 29 Jan 2024 12:08:21 +0100 Subject: [PATCH 02/16] Remove automatic scroll --- package.json | 13 -- src/plugin/manifest.ts | 4 +- src/plugin/memory-webview-main.ts | 5 +- src/webview/components/memory-table.tsx | 146 ++-------------------- src/webview/components/memory-widget.tsx | 2 - src/webview/components/options-widget.tsx | 2 +- src/webview/utils/arrays.ts | 4 - src/webview/utils/view-types.ts | 4 +- 8 files changed, 15 insertions(+), 165 deletions(-) diff --git a/package.json b/package.json index dc76f37..56bf5ea 100644 --- a/package.json +++ b/package.json @@ -208,19 +208,6 @@ "Appends new memory to bounds of current request, resulting in a growing list." ], "description": "Behavior when adding more memory beyond the current view." - }, - "memory-inspector.loadingBehavior": { - "type": "string", - "enum": [ - "Manual", - "Automatic" - ], - "default": "Manual", - "markdownEnumDescriptions": [ - "Shows a button to load the next bytes.", - "Automatically loads the next bytes if the bottom of the list is reached. Only applies when `#memory-inspector.scrollingBehavior#` is set to `Infinite`." - ], - "description": "Behavior on how new memory should be loaded." } } } diff --git a/src/plugin/manifest.ts b/src/plugin/manifest.ts index 0675519..f3a6b82 100644 --- a/src/plugin/manifest.ts +++ b/src/plugin/manifest.ts @@ -21,7 +21,7 @@ export const EDITOR_NAME = `${PACKAGE_NAME}.inspect`; export const CONFIG_LOGGING_VERBOSITY = 'loggingVerbosity'; export const DEFAULT_LOGGING_VERBOSITY = 'warn'; export const CONFIG_DEBUG_TYPES = 'debugTypes'; -export const DEFAULT_DEBUG_TYPES = [ 'gdb', 'embedded-debug', 'arm-debugger' ]; +export const DEFAULT_DEBUG_TYPES = ['gdb', 'embedded-debug', 'arm-debugger']; export const CONFIG_REFRESH_ON_STOP = 'refreshOnStop'; export const DEFAULT_REFRESH_ON_STOP = 'on'; @@ -31,8 +31,6 @@ export const CONFIG_GROUPS_PER_ROW = 'groupings.groupsPerRow'; export const DEFAULT_GROUPS_PER_ROW = 4; export const CONFIG_SCROLLING_BEHAVIOR = 'scrollingBehavior'; export const DEFAULT_SCROLLING_BEHAVIOR = 'Paginate'; -export const CONFIG_LOADING_BEHAVIOR = 'loadingBehavior'; -export const DEFAULT_LOADING_BEHAVIOR = 'Manual'; export const CONFIG_SHOW_VARIABLES_COLUMN = 'columns.variables'; export const CONFIG_SHOW_ASCII_COLUMN = 'columns.ascii'; diff --git a/src/plugin/memory-webview-main.ts b/src/plugin/memory-webview-main.ts index 5c639c6..bde999e 100644 --- a/src/plugin/memory-webview-main.ts +++ b/src/plugin/memory-webview-main.ts @@ -35,7 +35,7 @@ import { import { MemoryProvider } from './memory-provider'; import { outputChannelLogger } from './logger'; import { VariableRange } from '../common/memory-range'; -import { ColumnVisibilityStatus, LoadingBehavior, MemoryDisplayConfiguration as MemoryDisplayConfiguration, ScrollingBehavior } from '../webview/utils/view-types'; +import { ColumnVisibilityStatus, MemoryDisplayConfiguration as MemoryDisplayConfiguration, ScrollingBehavior } from '../webview/utils/view-types'; interface Variable { name: string; @@ -233,8 +233,7 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider { const wordsPerGroup = memoryInspectorConfiguration.get(manifest.CONFIG_WORDS_PER_GROUP) || manifest.DEFAULT_WORDS_PER_GROUP; const groupsPerRow = memoryInspectorConfiguration.get(manifest.CONFIG_GROUPS_PER_ROW) || manifest.DEFAULT_GROUPS_PER_ROW; const scrollingBehavior = memoryInspectorConfiguration.get(manifest.CONFIG_SCROLLING_BEHAVIOR) || manifest.DEFAULT_SCROLLING_BEHAVIOR; - const loadingBehavior = memoryInspectorConfiguration.get(manifest.CONFIG_LOADING_BEHAVIOR) || manifest.DEFAULT_LOADING_BEHAVIOR; - return { wordsPerGroup, groupsPerRow, scrollingBehavior, loadingBehavior }; + return { wordsPerGroup, groupsPerRow, scrollingBehavior }; } protected onMemoryDisplayConfigurationChanged(participant: MessageParticipant): vscode.Disposable { diff --git a/src/webview/components/memory-table.tsx b/src/webview/components/memory-table.tsx index 43875f2..5f5884e 100644 --- a/src/webview/components/memory-table.tsx +++ b/src/webview/components/memory-table.tsx @@ -23,9 +23,7 @@ import { TableRenderOptions } from '../columns/column-contribution-service'; import { DebugProtocol } from '@vscode/debugprotocol'; import { DataTable, DataTableCellSelection, DataTableProps, DataTableRowData, DataTableSelectionCellChangeEvent } from 'primereact/datatable'; import { Column } from 'primereact/column'; -import { VirtualScrollerLazyEvent } from 'primereact/virtualscroller'; import deepequal from 'fast-deep-equal'; -import { resize } from '../utils/arrays'; import { ProgressSpinner } from 'primereact/progressspinner'; import { Nullable } from 'primereact/ts-helpers'; @@ -120,13 +118,11 @@ interface MemoryRowData { interface MemoryTableState { memory?: Memory; data: MemoryRowData[]; - isLazyLoading: boolean; selectedData: Nullable>; } const itemHeightSingleGroupPerRow = 31; const heightGroupsPerRowGain = 14; -const datatableRequestCount = 32; export class MemoryTable extends React.Component { @@ -136,10 +132,6 @@ export class MemoryTable extends React.Component): void { this.onMemoryChange(this.props); this.onOptionsChange(prevProps, this.props); - this.onBehaviorChange(prevProps, this.props); } /** * Updates the internal `state.data` to the new memory changes. - * - * **Details** - * - * Depending on how the memory changed, the new memory will be handled differently. - * - * - Through lazy loading: The new data will be appended to the bottom of our `state.data`. - * - Outside (e.g., options): The whole `state.data` will be replaced with the incoming data. */ protected onMemoryChange(currentProps: Readonly): void { const state = this.state; const memory = currentProps.memory; if (!deepequal(memory, state.memory)) { - if (memory !== undefined) { - // We triggered the change through lazy loading - if (this.state.isLazyLoading) { - const options = this.createMemoryRowListOptions(memory, currentProps); - const first = state.data.length - 1; - const last = options.numRows; - let virtualData = [...state.data]; - virtualData = resize(virtualData, options.numRows); - - const newRows = this.createTableRows(options, first, last, memory); - virtualData.splice(first, last - first, ...newRows); - - this.setState(({ - memory, - data: virtualData, - isLazyLoading: false - })); - } else { - // The memory changed from somewhere else - this.resetState(currentProps); - } - } else { - this.resetState(currentProps); - } + this.resetState(currentProps); } } @@ -218,30 +178,9 @@ export class MemoryTable extends React.Component, currentProps: Readonly): void { - if ((prevProps.loadingBehavior !== currentProps.loadingBehavior || prevProps.scrollingBehavior !== currentProps.scrollingBehavior)) { - const memory = currentProps.memory; - - if (this.isInfiniteAutomaticBehavior && memory !== undefined) { - const { wordsPerRow } = this.createMemoryRowListOptions(memory, currentProps); - const scrollingCount = currentProps.count + wordsPerRow * datatableRequestCount; - - this.props.fetchMemory({ count: scrollingCount }); - } - } - } - public render(): React.ReactNode { const columnWidth = 100 / (this.props.columnOptions.length); - const props = this.createBehaviorSpecificProperties(this.createDataTableProperties()); + const props = this.createDataTableProperties(); return (
@@ -268,92 +207,28 @@ export class MemoryTable extends React.Component, tableStyle: { minWidth: '30rem' }, + value: this.state.data, + virtualScrollerOptions: { + items: this.state.data, + itemSize: itemHeightSingleGroupPerRow + heightGroupsPerRowGain * (this.props.groupsPerRow - 1), + }, }; } - protected createBehaviorSpecificProperties(props: DataTableProps): DataTableProps { - if (this.isInfiniteAutomaticBehavior) { - return { - ...props, - virtualScrollerOptions: { - lazy: true, - items: this.state.data, - onLazyLoad: this.onLazyLoad, - itemSize: itemHeightSingleGroupPerRow + heightGroupsPerRowGain * (this.props.groupsPerRow - 1), - } - }; - } else { - return { - ...props, - virtualScrollerOptions: { - items: this.state.data, - itemSize: itemHeightSingleGroupPerRow + heightGroupsPerRowGain * (this.props.groupsPerRow - 1), - }, - footer: this.renderFooter() - }; - } - } - - /** - * Handles the lazy load triggered from the `virtualScroller`. - * - * **Details** - * - * This method fetches extra data to allow a smooth scrolling experience. - */ - protected onLazyLoad = async (event: VirtualScrollerLazyEvent) => { - if (this.state.isLazyLoading || this.props.isMemoryFetching) { - return; - } - this.setState(prev => ({ ...prev, isLazyLoading: true })); - const first = event.first as number; - const last = event.last as number; - const virtualData = [...this.state.data]; - const memory = this.props.memory; - - // Something in the background changed the data - ignore it - if (first > last) { - this.setState(prev => ({ ...prev, isLazyLoading: false })); - return; - } - - if (memory !== undefined) { - const options = this.createMemoryRowListOptions(memory, this.props); - - if (last === options.numRows) { - // We reached the end of the list - const wordsPerRow = options.wordsPerRow; - const newCount = this.props.count + wordsPerRow * datatableRequestCount; - - this.props.fetchMemory({ count: newCount }); - } else { - // We are somewhere between - const loadedData = this.createTableRows(options, first, last, memory); - - virtualData.splice(first, last - first, ...loadedData); - - this.setState(prev => ({ ...prev, data: virtualData, isLazyLoading: false })); - } - - } else { - this.setState(prev => ({ ...prev, isLazyLoading: false })); - } - }; - protected onSelectionChanged = (event: DataTableSelectionCellChangeEvent) => { this.setState(prev => ({ ...prev, selectedData: event.value })); }; @@ -477,8 +352,7 @@ export class MemoryTable extends React.Component { @@ -90,7 +89,6 @@ export class MemoryWidget extends React.Component
); } diff --git a/src/webview/components/options-widget.tsx b/src/webview/components/options-widget.tsx index 4d70dda..1c3cee5 100644 --- a/src/webview/components/options-widget.tsx +++ b/src/webview/components/options-widget.tsx @@ -33,7 +33,7 @@ import { MultiSelectWithLabel } from './multi-select'; import { classNames } from 'primereact/utils'; export interface OptionsWidgetProps - extends Omit, + extends Omit, Required { updateRenderOptions: (options: Partial) => void; updateMemoryArguments: ( diff --git a/src/webview/utils/arrays.ts b/src/webview/utils/arrays.ts index bc7124c..f3f09ef 100644 --- a/src/webview/utils/arrays.ts +++ b/src/webview/utils/arrays.ts @@ -21,7 +21,3 @@ export function chunkIntoN(arr: T[], n: number): T[][] { arr.slice(i * size, i * size + size) ); } - -export function resize(arr: T[], newSize: number, defaultValue?: T): T[] { - return [...arr, ...Array(Math.max(newSize - arr.length, 0)).fill(defaultValue)]; -} diff --git a/src/webview/utils/view-types.ts b/src/webview/utils/view-types.ts index e4cc5a2..b9d445c 100644 --- a/src/webview/utils/view-types.ts +++ b/src/webview/utils/view-types.ts @@ -73,12 +73,10 @@ export interface FullNodeAttributes extends StylableNodeAttributes { } export type ScrollingBehavior = 'Paginate' | 'Infinite'; -export type LoadingBehavior = 'Manual' | 'Automatic'; export interface MemoryDisplayConfiguration { wordsPerGroup: number; groupsPerRow: number; scrollingBehavior: ScrollingBehavior; - loadingBehavior: LoadingBehavior; } export interface ColumnVisibilityStatus { @@ -87,7 +85,7 @@ export interface ColumnVisibilityStatus { } export interface MemoryDisplayConfigurationChangeRequest { - id: 'groupings.wordsPerGroup' | 'groupings.groupsPerRow' | 'scrollingBehavior' | 'loadingBehavior'; + id: 'groupings.wordsPerGroup' | 'groupings.groupsPerRow' | 'scrollingBehavior'; value: number; } From 8fc5235471f6992a5078cbe559a243051fdf7b1d Mon Sep 17 00:00:00 2001 From: Haydar Metin Date: Mon, 29 Jan 2024 14:23:00 +0100 Subject: [PATCH 03/16] Remove sass theme --- media/index.css | 2 + media/options-widget.css | 4 +- media/primereact-theme/base/_base.scss | 121 ---- .../components/overlay/_confirmpopup.scss | 91 --- .../components/overlay/_overlaypanel.scss | 83 --- .../themes/vscode/_extensions.scss | 110 ---- .../themes/vscode/_variables.scss | 123 ---- .../themes/vscode/variables/_button.scss | 452 -------------- .../themes/vscode/variables/_data.scss | 366 ----------- .../themes/vscode/variables/_form.scss | 579 ------------------ .../themes/vscode/variables/_general.scss | 159 ----- .../themes/vscode/variables/_media.scss | 247 -------- .../themes/vscode/variables/_menu.scss | 303 --------- .../themes/vscode/variables/_message.scss | 159 ----- .../themes/vscode/variables/_misc.scss | 130 ---- .../themes/vscode/variables/_overlay.scss | 83 --- .../themes/vscode/variables/_panel.scss | 332 ---------- media/{primereact-theme => theme}/README.md | 2 +- media/theme/components/button.css | 56 ++ media/theme/components/checkbox.css | 44 ++ media/theme/components/dropdown.css | 72 +++ media/theme/components/input.css | 43 ++ media/theme/components/overlay.css | 27 + .../components/progress-spinner.css} | 6 +- media/theme/components/table.css | 68 ++ .../theme.scss => theme/extensions.css} | 19 +- media/theme/theme.css | 32 + package.json | 5 +- src/webview/components/options-widget.tsx | 7 +- src/webview/memory-webview-view.tsx | 38 +- webpack.config.js | 3 +- yarn.lock | 87 +-- 32 files changed, 399 insertions(+), 3454 deletions(-) delete mode 100644 media/primereact-theme/base/_base.scss delete mode 100644 media/primereact-theme/base/components/overlay/_confirmpopup.scss delete mode 100644 media/primereact-theme/base/components/overlay/_overlaypanel.scss delete mode 100644 media/primereact-theme/themes/vscode/_extensions.scss delete mode 100644 media/primereact-theme/themes/vscode/_variables.scss delete mode 100644 media/primereact-theme/themes/vscode/variables/_button.scss delete mode 100644 media/primereact-theme/themes/vscode/variables/_data.scss delete mode 100644 media/primereact-theme/themes/vscode/variables/_form.scss delete mode 100644 media/primereact-theme/themes/vscode/variables/_general.scss delete mode 100644 media/primereact-theme/themes/vscode/variables/_media.scss delete mode 100644 media/primereact-theme/themes/vscode/variables/_menu.scss delete mode 100644 media/primereact-theme/themes/vscode/variables/_message.scss delete mode 100644 media/primereact-theme/themes/vscode/variables/_misc.scss delete mode 100644 media/primereact-theme/themes/vscode/variables/_overlay.scss delete mode 100644 media/primereact-theme/themes/vscode/variables/_panel.scss rename media/{primereact-theme => theme}/README.md (62%) create mode 100644 media/theme/components/button.css create mode 100644 media/theme/components/checkbox.css create mode 100644 media/theme/components/dropdown.css create mode 100644 media/theme/components/input.css create mode 100644 media/theme/components/overlay.css rename media/{primereact-theme/themes/vscode/_fonts.scss => theme/components/progress-spinner.css} (86%) create mode 100644 media/theme/components/table.css rename media/{primereact-theme/themes/vscode/theme.scss => theme/extensions.css} (75%) create mode 100644 media/theme/theme.css diff --git a/media/index.css b/media/index.css index 2e78279..fd38565 100644 --- a/media/index.css +++ b/media/index.css @@ -14,6 +14,8 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ +@import "./theme/theme.css"; + @import "./root.css"; @import "./multi-select.css"; @import "./options-widget.css"; diff --git a/media/options-widget.css b/media/options-widget.css index 46a8acb..b6dac05 100644 --- a/media/options-widget.css +++ b/media/options-widget.css @@ -37,11 +37,11 @@ row-gap: 12px; } -.form-textfield { +.form-textfield > input { width: 150px; } -.form-texfield-long { +.form-texfield-long > input { width: 200px; } diff --git a/media/primereact-theme/base/_base.scss b/media/primereact-theme/base/_base.scss deleted file mode 100644 index 1be29d9..0000000 --- a/media/primereact-theme/base/_base.scss +++ /dev/null @@ -1,121 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -@import "~primereact-sass-theme/theme-base/_mixins"; -@import "~primereact-sass-theme/theme-base/_colors"; - -@import "~primereact-sass-theme/theme-base/components/input/_editor"; - -@layer primereact { - @import "~primereact-sass-theme/theme-base/_common"; - - //Input - @import "~primereact-sass-theme/theme-base/components/input/_autocomplete"; - @import "~primereact-sass-theme/theme-base/components/input/_calendar"; - @import "~primereact-sass-theme/theme-base/components/input/_cascadeselect"; - @import "~primereact-sass-theme/theme-base/components/input/_checkbox"; - @import "~primereact-sass-theme/theme-base/components/input/_chips"; - @import "~primereact-sass-theme/theme-base/components/input/_colorpicker"; - @import "~primereact-sass-theme/theme-base/components/input/_dropdown"; - @import "~primereact-sass-theme/theme-base/components/input/_inputgroup"; - @import "~primereact-sass-theme/theme-base/components/input/_inputnumber"; - @import "~primereact-sass-theme/theme-base/components/input/_inputswitch"; - @import "~primereact-sass-theme/theme-base/components/input/_inputtext"; - @import "~primereact-sass-theme/theme-base/components/input/_listbox"; - @import "~primereact-sass-theme/theme-base/components/input/_mention"; - @import "~primereact-sass-theme/theme-base/components/input/_multiselect"; - @import "~primereact-sass-theme/theme-base/components/input/_password"; - @import "~primereact-sass-theme/theme-base/components/input/_radiobutton"; - @import "~primereact-sass-theme/theme-base/components/input/_rating"; - @import "~primereact-sass-theme/theme-base/components/input/_selectbutton"; - @import "~primereact-sass-theme/theme-base/components/input/_slider"; - @import "~primereact-sass-theme/theme-base/components/input/_treeselect"; - @import "~primereact-sass-theme/theme-base/components/input/_togglebutton"; - - //Button - @import "~primereact-sass-theme/theme-base/components/button/_button"; - @import "~primereact-sass-theme/theme-base/components/button/_splitbutton"; - @import "~primereact-sass-theme/theme-base/components/button/_speeddial"; - - //Data - @import "~primereact-sass-theme/theme-base/components/data/_carousel"; - @import "~primereact-sass-theme/theme-base/components/data/_datatable"; - @import "~primereact-sass-theme/theme-base/components/data/_dataview"; - @import "~primereact-sass-theme/theme-base/components/data/_datascroller"; - @import "~primereact-sass-theme/theme-base/components/data/_filter"; - @import "~primereact-sass-theme/theme-base/components/data/_orderlist"; - @import "~primereact-sass-theme/theme-base/components/data/_organizationchart"; - @import "~primereact-sass-theme/theme-base/components/data/_paginator"; - @import "~primereact-sass-theme/theme-base/components/data/_picklist"; - @import "~primereact-sass-theme/theme-base/components/data/_tree"; - @import "~primereact-sass-theme/theme-base/components/data/_treetable"; - @import "~primereact-sass-theme/theme-base/components/data/_timeline"; - - //Panel - @import "~primereact-sass-theme/theme-base/components/panel/_accordion"; - @import "~primereact-sass-theme/theme-base/components/panel/_card"; - @import "~primereact-sass-theme/theme-base/components/panel/_fieldset"; - @import "~primereact-sass-theme/theme-base/components/panel/_divider"; - @import "~primereact-sass-theme/theme-base/components/panel/_panel"; - @import "~primereact-sass-theme/theme-base/components/panel/_splitter"; - @import "~primereact-sass-theme/theme-base/components/panel/_scrollpanel"; - @import "~primereact-sass-theme/theme-base/components/panel/_tabview"; - @import "~primereact-sass-theme/theme-base/components/panel/_toolbar"; - - //Overlay - @import "./components/overlay/_confirmpopup"; - @import "~primereact-sass-theme/theme-base/components/overlay/_dialog"; - @import "./components/overlay/_overlaypanel"; - @import "~primereact-sass-theme/theme-base/components/overlay/_sidebar"; - @import "~primereact-sass-theme/theme-base/components/overlay/_tooltip"; - - //File - @import "~primereact-sass-theme/theme-base/components/file/_fileupload"; - - //Menu - @import "~primereact-sass-theme/theme-base/components/menu/_breadcrumb"; - @import "~primereact-sass-theme/theme-base/components/menu/_contextmenu"; - @import "~primereact-sass-theme/theme-base/components/menu/_dock"; - @import "~primereact-sass-theme/theme-base/components/menu/_megamenu"; - @import "~primereact-sass-theme/theme-base/components/menu/_menu"; - @import "~primereact-sass-theme/theme-base/components/menu/_menubar"; - @import "~primereact-sass-theme/theme-base/components/menu/_panelmenu"; - @import "~primereact-sass-theme/theme-base/components/menu/_slidemenu"; - @import "~primereact-sass-theme/theme-base/components/menu/_steps"; - @import "~primereact-sass-theme/theme-base/components/menu/_tabmenu"; - @import "~primereact-sass-theme/theme-base/components/menu/_tieredmenu"; - - //Messages - @import "~primereact-sass-theme/theme-base/components/messages/_inlinemessage"; - @import "~primereact-sass-theme/theme-base/components/messages/_message"; - @import "~primereact-sass-theme/theme-base/components/messages/toast"; - - //MultiMedia - @import "~primereact-sass-theme/theme-base/components/multimedia/_galleria"; - @import "~primereact-sass-theme/theme-base/components/multimedia/_image"; - - //Misc - @import "~primereact-sass-theme/theme-base/components/misc/_avatar"; - @import "~primereact-sass-theme/theme-base/components/misc/_chip"; - @import "~primereact-sass-theme/theme-base/components/misc/_scrolltop"; - @import "~primereact-sass-theme/theme-base/components/misc/_skeleton"; - @import "~primereact-sass-theme/theme-base/components/misc/_tag"; - @import "~primereact-sass-theme/theme-base/components/misc/_inplace"; - @import "~primereact-sass-theme/theme-base/components/misc/_progressbar"; - @import "~primereact-sass-theme/theme-base/components/misc/_terminal"; - @import "~primereact-sass-theme/theme-base/components/misc/_blockui"; - @import "~primereact-sass-theme/theme-base/components/misc/_badge"; -} diff --git a/media/primereact-theme/base/components/overlay/_confirmpopup.scss b/media/primereact-theme/base/components/overlay/_confirmpopup.scss deleted file mode 100644 index 73d2f79..0000000 --- a/media/primereact-theme/base/components/overlay/_confirmpopup.scss +++ /dev/null @@ -1,91 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -/* -* We want to use the CSS variables provided by VS Code. This file fixes compatibility issues. -* -* Changes: -* - Removes `scale-color` from `.p-confirm-popup &:before`. -*/ - -.p-confirm-popup { - background: $overlayContentBg; - color: $panelContentTextColor; - border: $overlayContentBorder; - border-radius: $borderRadius; - box-shadow: $overlayContainerShadow; - - .p-confirm-popup-content { - padding: $confirmPopupContentPadding; - } - - .p-confirm-popup-footer { - text-align: right; - padding: $confirmPopupFooterPadding; - - button { - margin: 0 $inlineSpacing 0 0; - width: auto; - - &:last-child { - margin: 0; - } - } - } - - &:after { - border: solid transparent; - border-color: rgba($overlayContentBg, 0); - border-bottom-color: $overlayContentBg; - } - - &:before { - border: solid transparent; - - @if (nth($overlayContentBorder, 2) == "none") { - border-color: rgba($overlayContentBg, 0); - } @else { - border-color: rgba(nth($overlayContentBorder, 3), 0); - } - } - - &.p-confirm-popup-flipped { - &:after { - border-top-color: $overlayContentBg; - } - - &:before { - @if (nth($overlayContentBorder, 2) == "none") { - border-top-color: $overlayContentBg; - } @else { - border-top-color: nth($overlayContentBorder, 3); - } - } - } - - .p-confirm-popup-icon { - font-size: $primeIconFontSize * 1.5; - - &.p-icon { - width: $primeIconFontSize * 1.5; - height: $primeIconFontSize * 1.5; - } - } - - .p-confirm-popup-message { - margin-left: $inlineSpacing * 2; - } -} diff --git a/media/primereact-theme/base/components/overlay/_overlaypanel.scss b/media/primereact-theme/base/components/overlay/_overlaypanel.scss deleted file mode 100644 index 346058a..0000000 --- a/media/primereact-theme/base/components/overlay/_overlaypanel.scss +++ /dev/null @@ -1,83 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -/* -* We want to use the CSS variables provided by VS Code. This file fixes compatibility issues. -* -* Changes: -* - Removes `scale-color` from `.p-overlaypanel &:before`. -*/ - -@use "sass:math"; - -.p-overlaypanel { - background: $overlayContentBg; - color: $panelContentTextColor; - border: $overlayContentBorder; - border-radius: $borderRadius; - box-shadow: $overlayContainerShadow; - - .p-overlaypanel-content { - padding: $panelContentPadding; - } - - .p-overlaypanel-close { - background: $buttonBg; - color: $buttonTextColor; - width: $actionIconWidth; - height: $actionIconHeight; - transition: $actionIconTransition; - border-radius: $actionIconBorderRadius; - position: absolute; - top: math.div(-1 * $actionIconWidth, 2); - right: math.div(-1 * $actionIconWidth, 2); - - &:enabled:hover { - background: $buttonHoverBg; - color: $buttonTextHoverColor; - } - } - - &:after { - border: solid transparent; - border-color: rgba($overlayContentBg, 0); - border-bottom-color: $overlayContentBg; - } - - &:before { - border: solid transparent; - - @if (nth($overlayContentBorder, 2) == "none") { - border-color: rgba($overlayContentBg, 0); - } @else { - border-color: rgba(nth($overlayContentBorder, 3), 0); - } - } - - &.p-overlaypanel-flipped { - &:after { - border-top-color: $overlayContentBg; - } - - &:before { - @if (nth($overlayContentBorder, 2) == "none") { - border-top-color: $overlayContentBg; - } @else { - border-top-color: nth($overlayContentBorder, 3); - } - } - } -} diff --git a/media/primereact-theme/themes/vscode/_extensions.scss b/media/primereact-theme/themes/vscode/_extensions.scss deleted file mode 100644 index be647e4..0000000 --- a/media/primereact-theme/themes/vscode/_extensions.scss +++ /dev/null @@ -1,110 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -/* Customizations to the designer theme should be defined here */ - -.p-inputtext { - height: calc(var(--input-height) * 1px); -} - -.pm-top-label { - display: flex; - flex-direction: column; - font-size: var(--type-ramp-base-font-size); - - .p-inputtext-label { - margin-bottom: 2px; - cursor: pointer; - } -} - -.p-button-icon-only { - background: var(--button-icon-background); - border-radius: var(--button-icon-corner-radius); - color: var(--vscode-editor-foreground); - border: none; - - &:not(:disabled):hover { - background: var(--button-icon-hover-background); - outline: 1px dotted var(--contrast-active-border); - outline-offset: -1px; - } - - &:not(:disabled):active { - background: color-mix( - in srgb, - var(--button-icon-hover-background), - #fff 10% - ); - } -} - -// Remove arrow -.p-overlaypanel { - &:before { - content: none; - } - - &:after { - content: none; - } - - margin-top: 4px; -} - -.p-checkbox { - .p-checkbox-box { - background: var(--vscode-checkbox-background); - } -} - -.p-dropdown { - border: 1px solid var(--vscode-dropdown-border); -} - -.p-datatable { - .p-datatable-tbody { - > tr { - > td { - vertical-align: text-top; - - &.p-highlight { - background: var(--vscode-list-activeSelectionBackground); - color: var(--vscode-list-activeSelectionForeground); - } - } - - &.p-highlight { - background: var(--vscode-settings-focusedRowBackground); - } - } - } - - .p-selectable-row:hover { - background: $tableBodyRowHoverBg; - } -} - -.p-progress-spinner-circle { - stroke: var(--vscode-notificationsInfoIcon-foreground); - stroke-width: 3; - animation: none; -} - -small.p-invalid { - margin-top: 4px; - color: var(--vscode-errorForeground); -} diff --git a/media/primereact-theme/themes/vscode/_variables.scss b/media/primereact-theme/themes/vscode/_variables.scss deleted file mode 100644 index 2ad8c1a..0000000 --- a/media/primereact-theme/themes/vscode/_variables.scss +++ /dev/null @@ -1,123 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -$primaryColor: #2196f3; -$primaryDarkColor: #1e88e5; -$primaryDarkerColor: #1976d2; -$primaryTextColor: var(--vscode-editor-foreground); - -$colors: ( - "blue": #2196f3, - "green": #4caf50, - "yellow": #fbc02d, - "cyan": #00bcd4, - "pink": #e91e63, - "indigo": #3f51b5, - "teal": #009688, - "orange": #f57c00, - "bluegray": #607d8b, - "purple": #9c27b0, - "red": #ff4032, - "primary": $primaryColor, -); - -// Mandatory Designer Variables -@import "./variables/general"; -@import "./variables/form"; -@import "./variables/button"; -@import "./variables/panel"; -@import "./variables/_data"; -@import "./variables/_overlay"; -@import "./variables/_message"; -@import "./variables/_menu"; -@import "./variables/_media"; -@import "./variables/_misc"; - -:root { - --font-family: var(--vscode-font-family); - --surface-a: #ffffff; - --surface-b: #f8f9fa; - --surface-c: #e9ecef; - --surface-d: #dee2e6; - --surface-e: #ffffff; - --surface-f: #ffffff; - --text-color: #495057; - --text-color-secondary: #6c757d; - --primary-color: #2196f3; - --primary-color-text: #ffffff; - --surface-0: #ffffff; - --surface-50: #fafafa; - --surface-100: #f5f5f5; - --surface-200: #eeeeee; - --surface-300: #e0e0e0; - --surface-400: #bdbdbd; - --surface-500: #9e9e9e; - --surface-600: #757575; - --surface-700: #616161; - --surface-800: #424242; - --surface-900: #212121; - --gray-50: #fafafa; - --gray-100: #f5f5f5; - --gray-200: #eeeeee; - --gray-300: #e0e0e0; - --gray-400: #bdbdbd; - --gray-500: #9e9e9e; - --gray-600: #757575; - --gray-700: #616161; - --gray-800: #424242; - --gray-900: #212121; - --content-padding: #{$panelContentPadding}; - --inline-spacing: #{$inlineSpacing}; - --border-radius: #{$borderRadius}; - --surface-ground: #f8f9fa; - --surface-section: #ffffff; - --surface-card: #ffffff; - --surface-overlay: #ffffff; - --surface-border: #dee2e6; - --surface-hover: #e9ecef; - --focus-ring: #{$focusShadow}; - --maskbg: #{$maskBg}; - --highlight-bg: #{$highlightBg}; - --highlight-text-color: #{$highlightTextColor}; - color-scheme: light; -} - -// VSCode variables -:root { - --button-icon-background: transparent; - --button-icon-corner-radius: 5px; - --button-icon-outline-offset: 0; - --button-icon-hover-background: rgba(90, 93, 94, 0.31); - --button-icon-padding: 3px; - --button-padding-horizontal: 11px; - --button-padding-vertical: 4px; - - --border-width: 1; - - --input-height: 26; - --input-min-width: 100px; - - --type-ramp-base-font-size: 13px; - --type-ramp-base-line-height: normal; - --type-ramp-minus1-font-size: 11px; - --type-ramp-minus1-line-height: 16px; - --type-ramp-minus2-font-size: 9px; - --type-ramp-minus2-line-height: 16px; - --type-ramp-plus1-font-size: 16px; - --type-ramp-plus1-line-height: 24px; - - --divider-background: #454545; -} diff --git a/media/primereact-theme/themes/vscode/variables/_button.scss b/media/primereact-theme/themes/vscode/variables/_button.scss deleted file mode 100644 index 212cd58..0000000 --- a/media/primereact-theme/themes/vscode/variables/_button.scss +++ /dev/null @@ -1,452 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -/// Padding of a button, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group button -$buttonPadding: 4px 11px; // VSCODE var(--button-padding-vertical) var(--button-padding-horizontal) - -/// Width of a button having an icon with no label -/// @group button -$buttonIconOnlyWidth: 2.357rem; - -/// Padding of a button having an icon with no label -/// @group button -$buttonIconOnlyPadding: 3px 0px; // VSCODE var(--button-icon-padding) - -/// Background of a button -/// @group button -$buttonBg: var(--vscode-button-background); - -/// Text color of a button -/// @group button -$buttonTextColor: var(--vscode-button-foreground); - -/// Border of a button -/// @group button -$buttonBorder: calc(var(--border-width) * 1px) solid var(--vscode-button-border); - -/// Background of a button in hover state -/// @group button -$buttonHoverBg: var(--vscode-button-hoverBackground); - -/// Text color of a button in hover state -/// @group button -$buttonTextHoverColor: $primaryTextColor; - -/// Border color of a button in hover state -/// @group button -$buttonHoverBorderColor: var(--vscode-button-border); - -/// Background of a button in pressed state -/// @group button -$buttonActiveBg: $buttonBg; - -/// Color of a button in pressed state -/// @group button -$buttonTextActiveColor: $buttonTextColor; - -/// Border color of a button in pressed state -/// @group button -$buttonActiveBorderColor: var(--button-border); - -/// Shadow of a raised button -/// @group button -$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - -/// Border radius of a rounded button -/// @group button -$roundedButtonBorderRadius: 2rem; - -/// Alpha level of a text button background in hover state -/// @group button -$textButtonHoverBgOpacity: 0.04; - -/// Alpha level of a text button background in active state -/// @group button -$textButtonActiveBgOpacity: 0.16; - -/// Border style of a outlined button -/// @group button -$outlinedButtonBorder: 1px solid; - -/// Text color of a plain text button -/// @group button -$plainButtonTextColor: #6c757d; - -/// Background color of a plain text button in hover state -/// @group button -$plainButtonHoverBgColor: #e9ecef; - -/// Background color of a plain text button in active state -/// @group button -$plainButtonActiveBgColor: #dee2e6; - -/// Background of a secondary button -/// @group button -$secondaryButtonBg: #607d8b; - -/// Text color of a secondary button -/// @group button -$secondaryButtonTextColor: #ffffff; - -/// Border of a secondary button -/// @group button -$secondaryButtonBorder: 1px solid #607d8b; - -/// Background of a secondary button in hover state -/// @group button -$secondaryButtonHoverBg: #546e7a; - -/// Text color of a secondary button in hover state -/// @group button -$secondaryButtonTextHoverColor: #ffffff; - -/// Border color of a secondary button in hover state -/// @group button -$secondaryButtonHoverBorderColor: #546e7a; - -/// Background of a secondary button in pressed state -/// @group button -$secondaryButtonActiveBg: #455a64; - -/// Text color of a secondary button in pressed state -/// @group button -$secondaryButtonTextActiveColor: #ffffff; - -/// Border color of a secondary button in pressed state -/// @group button -$secondaryButtonActiveBorderColor: #455a64; - -/// Box shadow of a secondary button in focused state -/// @group button -$secondaryButtonFocusShadow: 0 0 0 0.2rem #b0bec5; - -/// Background of an info button -/// @group button -$infoButtonBg: #03a9f4; - -/// Text color of an info button -/// @group button -$infoButtonTextColor: #ffffff; - -/// Border of an info button -/// @group button -$infoButtonBorder: 1px solid #03a9f4; - -/// Background of an info button in hover state -/// @group button -$infoButtonHoverBg: #039be5; - -/// Text color of an info button in hover state -/// @group button -$infoButtonTextHoverColor: #ffffff; - -/// Border color of an info button in hover state -/// @group button -$infoButtonHoverBorderColor: #039be5; - -/// Background of an info button in pressed state -/// @group button -$infoButtonActiveBg: #0288d1; - -/// Text color of an info button in pressed state -/// @group button -$infoButtonTextActiveColor: #ffffff; - -/// Border color of an info button in pressed state -/// @group button -$infoButtonActiveBorderColor: #0288d1; - -/// Box shadow of an info button in focused state -/// @group button -$infoButtonFocusShadow: 0 0 0 0.2rem lighten($infoButtonBg, 35%); - -/// Background of a success button -/// @group button -$successButtonBg: #4caf50; - -/// Text color of a success button -/// @group button -$successButtonTextColor: #ffffff; - -/// Border of a success button -/// @group button -$successButtonBorder: 1px solid #4caf50; - -/// Background of a success button in hover state -/// @group button -$successButtonHoverBg: #43a047; - -/// Text color of a success button in hover state -/// @group button -$successButtonTextHoverColor: #ffffff; - -/// Border color of a success button in hover state -/// @group button -$successButtonHoverBorderColor: #43a047; - -/// Background of a success button in pressed state -/// @group button -$successButtonActiveBg: #388e3c; - -/// Text Color of a success button in pressed state -/// @group button -$successButtonTextActiveColor: #ffffff; - -/// Border color of a success button in pressed state -/// @group button -$successButtonActiveBorderColor: #388e3c; - -/// Box shadow of a success button in focused state -/// @group button -$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 35%); - -/// Background of a warning button -/// @group button -$warningButtonBg: #ffc107; - -/// Text color of a warning button -/// @group button -$warningButtonTextColor: $textColor; - -/// Border of a warning button -/// @group button -$warningButtonBorder: 1px solid #ffc107; - -/// Background of a warning button in hover state -/// @group button -$warningButtonHoverBg: #ffb300; - -/// Text color of a warning button in hover state -/// @group button -$warningButtonTextHoverColor: $textColor; - -/// Border color of a warning button in hover state -/// @group button -$warningButtonHoverBorderColor: #ffb300; - -/// Background of a warning button in pressed state -/// @group button -$warningButtonActiveBg: #ffa000; - -/// Text color of a warning button in pressed state -/// @group button -$warningButtonTextActiveColor: $textColor; - -/// Border color of a warning button in pressed state -/// @group button -$warningButtonActiveBorderColor: #ffa000; - -/// Box shadow of a warning button in focused state -/// @group button -$warningButtonFocusShadow: 0 0 0 0.2rem lighten($warningButtonBg, 35%); - -/// Background of a help button -/// @group button -$helpButtonBg: #9c27b0; - -/// Text color of a help button -/// @group button -$helpButtonTextColor: #ffffff; - -/// Border of a help button -/// @group button -$helpButtonBorder: 1px solid #9c27b0; - -/// Background of a help help in hover state -/// @group button -$helpButtonHoverBg: #8e24aa; - -/// Text color of a help button in hover state -/// @group button -$helpButtonTextHoverColor: #ffffff; - -/// Border color of a help button in hover state -/// @group button -$helpButtonHoverBorderColor: #8e24aa; - -/// Background of a help button in pressed state -/// @group button -$helpButtonActiveBg: #7b1fa2; - -/// Text color of a help button in pressed state -/// @group button -$helpButtonTextActiveColor: #ffffff; - -/// Border color of a help button in pressed state -/// @group button -$helpButtonActiveBorderColor: #7b1fa2; - -/// Box shadow of a help button in focused state -/// @group button -$helpButtonFocusShadow: 0 0 0 0.2rem #ce93d8; - -/// Background of a danger button -/// @group button -$dangerButtonBg: #f44336; - -/// Text color of a danger button -/// @group button -$dangerButtonTextColor: #ffffff; - -/// Border of a danger button -/// @group button -$dangerButtonBorder: 1px solid #f44336; - -/// Background of a danger button in hover state -/// @group button -$dangerButtonHoverBg: #e53935; - -/// Text color of a danger button in hover state -/// @group button -$dangerButtonTextHoverColor: #ffffff; - -/// Border color of a danger button in hover state -/// @group button -$dangerButtonHoverBorderColor: #e53935; - -/// Background of a danger button in pressed state -/// @group button -$dangerButtonActiveBg: #d32f2f; - -/// Text color of a danger button in pressed state -/// @group button -$dangerButtonTextActiveColor: #ffffff; - -/// Border color of a danger button in pressed state -/// @group button -$dangerButtonActiveBorderColor: #d32f2f; - -/// Box shadow of a danger button in focused state -/// @group button -$dangerButtonFocusShadow: 0 0 0 0.2rem lighten($dangerButtonBg, 35%); - -/// Text color of a link button -/// @group button -$linkButtonColor: $primaryDarkerColor; - -/// Text color of a link button in hover state -/// @group button -$linkButtonHoverColor: $primaryDarkerColor; - -/// Text decoration of a link button in hover state -/// @group button -$linkButtonTextHoverDecoration: underline; - -/// Box shadow of a link button in focused state -/// @group button -$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor; - -/// Background of a toggle button -/// @group button -$toggleButtonBg: #ffffff; - -/// Border of a toggle button -/// @group button -$toggleButtonBorder: 1px solid #ced4da; - -/// Text color of a toggle button -/// @group button -$toggleButtonTextColor: $textColor; - -/// Icon color of a toggle button -/// @group button -$toggleButtonIconColor: $textSecondaryColor; - -/// Background of a toggle button in hover state -/// @group button -$toggleButtonHoverBg: #e9ecef; - -/// Border color of a toggle button in hover state -/// @group button -$toggleButtonHoverBorderColor: #ced4da; - -/// Text color of a toggle button in hover state -/// @group button -$toggleButtonTextHoverColor: $textColor; - -/// Icon color of a toggle button in hover state -/// @group button -$toggleButtonIconHoverColor: $textSecondaryColor; - -/// Background of a toggle button in selected state -/// @group button -$toggleButtonActiveBg: $primaryColor; - -/// Border color of a toggle button in selected state -/// @group button -$toggleButtonActiveBorderColor: $primaryColor; - -/// Text color of a toggle button in selected state -/// @group button -$toggleButtonTextActiveColor: $primaryTextColor; - -/// Icon color of a toggle button in selected state -/// @group button -$toggleButtonIconActiveColor: $primaryTextColor; - -/// Hover background of a toggle button in selected state -/// @group button -$toggleButtonActiveHoverBg: $primaryDarkColor; - -/// Hover border color of a toggle button in selected state -/// @group button -$toggleButtonActiveHoverBorderColor: $primaryDarkColor; - -/// Hover text color of a toggle button in selected state -/// @group button -$toggleButtonTextActiveHoverColor: $primaryTextColor; - -/// Hover icon of a toggle button in selected state -/// @group button -$toggleButtonIconActiveHoverColor: $primaryTextColor; - -/// Width of a floating action button on speed dial -/// @group button -$speedDialButtonWidth: 4rem; - -/// Height of a floating action button on speed dial -/// @group button -$speedDialButtonHeight: 4rem; - -/// Font Size of a floating action button on speed dial -/// @group button -$speedDialButtonIconFontSize: 1.3rem; - -/// Width of any action button on speed dial -/// @group button -$speedDialActionWidth: 3rem; - -/// Height of any action button on speed dial -/// @group button -$speedDialActionHeight: 3rem; - -/// Background color of any action button on speed dial -/// @group button -$speedDialActionBg: #495057; - -/// Background color of any action button on speed dial in hover state -/// @group button -$speedDialActionHoverBg: #343a40; - -/// Color of any action button on speed dial -/// @group button -$speedDialActionTextColor: #fff; - -/// Color of any action button on speed dial in hover state -/// @group button -$speedDialActionTextHoverColor: #fff; diff --git a/media/primereact-theme/themes/vscode/variables/_data.scss b/media/primereact-theme/themes/vscode/variables/_data.scss deleted file mode 100644 index 3aeae75..0000000 --- a/media/primereact-theme/themes/vscode/variables/_data.scss +++ /dev/null @@ -1,366 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -/// Background of a paginator -/// @group data -$paginatorBg: #ffffff; - -/// Text color of a paginator -/// @group data -$paginatorTextColor: $textSecondaryColor; - -/// Border of a paginator -/// @group data -$paginatorBorder: solid #e9ecef; - -/// Border width of a paginator -/// @group data -$paginatorBorderWidth: 0; - -/// Padding of a paginator -/// @group data -$paginatorPadding: 0.5rem 1rem; - -/// Width of a paginator element -/// @group data -$paginatorElementWidth: $buttonIconOnlyWidth; - -/// Height of a paginator element -/// @group data -$paginatorElementHeight: $buttonIconOnlyWidth; - -/// Background of a paginator element -/// @group data -$paginatorElementBg: transparent; - -/// Border of a paginator element -/// @group data -$paginatorElementBorder: 0 none; - -/// Icon color of a paginator element -/// @group data -$paginatorElementIconColor: $textSecondaryColor; - -/// Background of a paginator element in hover state -/// @group data -$paginatorElementHoverBg: #e9ecef; - -/// Border color of a paginator element in hover state -/// @group data -$paginatorElementHoverBorderColor: transparent; - -/// Icon color of a paginator element in hover state -/// @group data -$paginatorElementIconHoverColor: $textSecondaryColor; - -/// Border radius of a paginator element -/// @group data -$paginatorElementBorderRadius: $borderRadius; - -/// Margin of a paginator element -/// @group data -$paginatorElementMargin: 0.143rem; - -/// Padding of a paginator element -/// @group data -$paginatorElementPadding: 0; - -/// Border of a table header -/// @group data -$tableHeaderBorder: none; - -/// Border width of a table header -/// @group data -$tableHeaderBorderWidth: 0; - -/// Background of a table header -/// @group data -$tableHeaderBg: var(--vscode-editor-background); - -/// Text color of a table header -/// @group data -$tableHeaderTextColor: $textColor; - -/// Font weight of a table header -/// @group data -$tableHeaderFontWeight: 600; - -/// Padding of a table header, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableHeaderPadding: 0.5rem 0.5rem; - -/// Padding of a table header cell, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableHeaderCellPadding: 0.5rem 0.5rem; - -/// Background of a table header cell -/// @group data -$tableHeaderCellBg: var(--vscode-editor-background); - -/// Text color of a table header cell -/// @group data -$tableHeaderCellTextColor: $textColor; - -/// Font weight of a table header cell -/// @group data -$tableHeaderCellFontWeight: 600; - -/// Border of a table header cell -/// @group data -$tableHeaderCellBorder: none; - -/// Border width of a table header cell -/// @group data -$tableHeaderCellBorderWidth: 0; - -/// Background of a table header cell in hover state -/// @group data -$tableHeaderCellHoverBg: none; - -/// Text color of a table header cell in hover state -/// @group data -$tableHeaderCellTextHoverColor: $textColor; - -/// Icon color of a table header cell -/// @group data -$tableHeaderCellIconColor: $textSecondaryColor; - -/// Icon color of a table header cell in hover state -/// @group data -$tableHeaderCellIconHoverColor: $textSecondaryColor; - -/// Background of a table header cell in sorted state -/// @group data -$tableHeaderCellHighlightBg: #f8f9fa; - -/// Text color of a table header cell in sorted state -/// @group data -$tableHeaderCellHighlightTextColor: $primaryColor; - -/// Hover background of a table header cell in sorted state -/// @group data -$tableHeaderCellHighlightHoverBg: #e9ecef; - -/// Hover text color of a table header cell in sorted state -/// @group data -$tableHeaderCellHighlightTextHoverColor: $primaryColor; - -/// Size of a multiple column sorting order indicator -/// @group data -$tableSortableColumnBadgeSize: 1.143rem; - -/// Background of a table body row -/// @group data -$tableBodyRowBg: var(--vscode-editor-background); - -/// Text color of a table body row -/// @group data -$tableBodyRowTextColor: $textColor; - -/// Background of an even table body row -/// @group data -$tableBodyRowEvenBg: #ffffff; - -/// Background of a table body row in hover state -/// @group data -$tableBodyRowHoverBg: var(--vscode-settings-rowHoverBackground); - -/// Text color of a table body row in hover state -/// @group data -$tableBodyRowTextHoverColor: $textColor; - -/// Border for a cell of a table toby row -/// @group data -$tableBodyCellBorder: none; - -/// Border width for a cell of a table toby row -/// @group data -$tableBodyCellBorderWidth: 0 0 0 0; - -/// Padding for a cell of a table toby row, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableBodyCellPadding: 0.5rem 0.5rem; - -/// Padding of a table footer cell, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableFooterCellPadding: 0.5rem 0.5rem; - -/// Background of a table footer cell -/// @group data -$tableFooterCellBg: #f8f9fa; - -/// Text color of a table footer cell -/// @group data -$tableFooterCellTextColor: $textColor; - -/// Font weight of a table footer cell -/// @group data -$tableFooterCellFontWeight: 600; - -/// Border of a table footer cell -/// @group data - -/// Border of a table footer cell -/// @group data -$tableFooterCellBorder: 1px solid #e9ecef; - -/// Border width of a table footer cell -/// @group data -$tableFooterCellBorderWidth: 0 0 1px 0; - -/// Background of a table column resize indicator bar -/// @group data -$tableResizerHelperBg: $primaryColor; - -/// Background of drag helper used for multiple row selection -/// @group data -$tableDragHelperBg: rgba($primaryColor, 0.16); - -/// Border of a table footer -/// @group data -$tableFooterBorder: none; - -/// Border width of a table footer -/// @group data -$tableFooterBorderWidth: 0 0 1px 0; - -/// Background of a table footer -/// @group data -$tableFooterBg: var(--vscode-editor-background); - -/// Text color of a table footer -/// @group data -$tableFooterTextColor: $textColor; - -/// Font weight of a table footer -/// @group data -$tableFooterFontWeight: 600; - -/// Padding of a table footer, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group data -$tableFooterPadding: 0.5rem 0.5rem; - -/// Content alignment of a table cell -/// @group data -$tableCellContentAlignment: left; - -/// Border width of a table paginator positioned at top -/// @group data -$tableTopPaginatorBorderWidth: 1px 0 1px 0; - -/// Border width of a table paginator positioned at bottom -/// @group data -$tableBottomPaginatorBorderWidth: 0 0 1px 0; - -/// Scale factor of a small datatable -/// @group data -$tableScaleSM: 0.5; - -/// Scale factor of a large datatable -/// @group data -$tableScaleLG: 1.25; - -/// Padding for content section of a dataview -/// @group data -$dataViewContentPadding: 0; - -/// Border for content section of a dataview -/// @group data -$dataViewContentBorder: 0 none; - -/// Border for an item of a dataview in list orientation -/// @group data -$dataViewListItemBorder: solid #e9ecef; - -/// Border width for an item of a dataview in list orientation -/// @group data -$dataViewListItemBorderWidth: 0 0 1px 0; - -/// Padding for content section of a datascroller -/// @group data -$dataScrollerContentPadding: 0; - -/// Border for content section of a datascroller -/// @group data -$dataScrollerContentBorder: 0 none; - -/// Border for an item of a datascroller -/// @group data -$dataScrollerListItemBorder: solid #e9ecef; - -/// Border width for an item of a datascroller -/// @group data -$dataScrollerListItemBorderWidth: 0 0 1px 0; - -/// Padding of a tree -/// @group data -$treeContainerPadding: 0.286rem; - -/// Padding of a tree node -/// @group data -$treeNodePadding: 0.143rem; - -/// Padding of a tree node content consists of toggler, icon and label -/// @group data -$treeNodeContentPadding: 0.5rem; - -/// Padding of a tree node children container -/// @group data -$treeNodeChildrenPadding: 0 0 0 1rem; - -/// Color of a treenode data icon, $dataActionIconColor for the toggler element -/// @group data -$treeNodeIconColor: $textSecondaryColor; - -/// Padding of a vertical timeline content element -/// @group data -$timelineVerticalEventContentPadding: 0 1rem; - -/// Padding of a horizontal timeline content element -/// @group data -$timelineHorizontalEventContentPadding: 1rem 0; - -/// Width of a timeline marker -/// @group data -$timelineEventMarkerWidth: 1rem; - -/// Height of a timeline marker -/// @group data -$timelineEventMarkerHeight: 1rem; - -/// Border radius of a timeline marker -/// @group data -$timelineEventMarkerBorderRadius: 50%; - -/// Border of a timeline marker -/// @group data -$timelineEventMarkerBorder: 2px solid $highlightBg; - -/// Background of a timeline marker -/// @group data -$timelineEventMarkerBackground: $highlightTextColor; - -/// Size of a timeline connector -/// @group data -$timelineEventConnectorSize: 2px; - -/// Color of a timeline event -/// @group data -$timelineEventColor: #dee2e6; - -/// Color of a line to connect to organization chart nodes -/// @group data -$organizationChartConnectorColor: #dee2e6; diff --git a/media/primereact-theme/themes/vscode/variables/_form.scss b/media/primereact-theme/themes/vscode/variables/_form.scss deleted file mode 100644 index d1b5f4f..0000000 --- a/media/primereact-theme/themes/vscode/variables/_form.scss +++ /dev/null @@ -1,579 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -/// Padding of an input field, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem" -/// @group form -$inputPadding: 0.5rem 0.5rem; - -/// Background of an input field -/// @group form -$inputBg: var(--vscode-input-background); - -/// Font size of an input field -/// @group form -$inputTextFontSize: 13px; // VSCODE --type-ramp-base-font-size - -/// Text color of an input field -/// @group form -$inputTextColor: var(--vscode-input-foreground); - -/// Font size of an input field -/// @group form -$inputTextLabelFontSize: 13px; // VSCODE --type-ramp-base-font-size - -/// Color of an icon inside an input field -/// @group form -$inputIconColor: $textColor; - -/// Border of an input field -/// @group form -$inputBorder: 1px solid var(--vscode-dropdown-border); - -/// Border of an input field in hover state -/// @group form -$inputHoverBorderColor: $primaryColor; - -/// Border of an input field in focus state -/// @group form -$inputFocusBorderColor: $primaryColor; - -/// Color of an input field in invalid state -/// @group form -$inputErrorBorderColor: $errorColor; - -/// Text color of a placeholder -/// @group form -$inputPlaceholderTextColor: #6c757d; - -/// Background of a filled input -/// @group form -$inputFilledBg: #f8f9fa; - -/// Background of a filled input in hover state -/// @group form -$inputFilledHoverBg: #f8f9fa; - -/// Background of a filled input in focus state -/// @group form -$inputFilledFocusBg: #f8f9fa; - -/// Backgroud color of an input group addon -/// @group form -$inputGroupBg: #e9ecef; - -/// Text color of an input group addon -/// @group form -$inputGroupTextColor: $textSecondaryColor; - -/// Minimum width of an input group addon -/// @group form -$inputGroupAddOnMinWidth: 2.357rem; - -/// Background of an input list such as dropdown, listbox, multiselect -/// @group form -$inputListBg: #ffffff; - -/// Text color of an input list -/// @group form -$inputListTextColor: var(--vscode-dropdown-foreground); - -/// Border of an input list -/// @group form -$inputListBorder: $inputBorder; - -/// Padding of an input list -/// @group form -$inputListPadding: 0.5rem 0; - -/// Padding for an individual itrem of an input list -/// @group form -$inputListItemPadding: 0.5rem 1rem; - -/// Background for an individual itrem of an input list -/// @group form -$inputListItemBg: transparent; - -/// Text color for an individual itrem of an input list -/// @group form -$inputListItemTextColor: $textColor; - -/// Hover state background for an individual itrem of an input list -/// @group form -$inputListItemHoverBg: $highlightBg; - -/// Hover state text color for an individual itrem of an input list -/// @group form -$inputListItemTextHoverColor: $textColor; - -/// Focus state text color for an individual itrem of an input list -/// @group form -$inputListItemTextFocusColor: $textColor; - -/// Focus state background for an individual itrem of an input list -/// @group form -$inputListItemFocusBg: #f8f9fa; - -/// Border for an individual itrem of an input list -/// @group form -$inputListItemBorder: 0 none; - -/// Border radius for an individual itrem of an input list -/// @group form -$inputListItemBorderRadius: 0; - -/// Margin for an individual itrem of an input list -/// @group form -$inputListItemMargin: 0; - -/// Box shadow for an individual itrem of an input list in focused state -/// @group form -$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor; - -/// Padding for a header of an input list -/// @group form -$inputListHeaderPadding: 0.5rem 1rem; - -/// Margin for a header of an input list -/// @group form -$inputListHeaderMargin: 0; - -/// Background for a header of an input list -/// @group form -$inputListHeaderBg: #f8f9fa; - -/// Text color for a header of an input list -/// @group form -$inputListHeaderTextColor: $textColor; - -/// Border for a header of an input list -/// @group form -$inputListHeaderBorder: 0 none; - -/// Background for an overlay of an input such as autocomplete or dropdown -/// @group form -$inputOverlayBg: var(--vscode-dropdown-background); - -/// Background for an overlay header of an input such as autocomplete or dropdown -/// @group form -$inputOverlayHeaderBg: $inputListHeaderBg; - -/// Border for an overlay of an input such as autocomplete or dropdown -/// @group form -$inputOverlayBorder: 1px solid var(--vscode-dropdown-border); - -/// Shadow for an overlay of an input such as autocomplete or dropdown -/// @group form -$inputOverlayShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); - -/// Width of a checkbox -/// @group form -$checkboxWidth: 18px; // VSCODE calc(var(--design-unit) * 4px + 2px); - -/// Height of a checkbox -/// @group form -$checkboxHeight: 18px; // VSCODE calc(var(--design-unit) * 4px + 2px); - -/// Border of a checkbox -/// @group form -$checkboxBorder: 2px solid var(--vscode-checkbox-border); - -/// Size of a checkbox icon -/// @group form -$checkboxIconFontSize: 14px; - -/// Border color of a selected checkbox -/// @group form -$checkboxActiveBorderColor: none; - -/// Background of a selected checkbox -/// @group form -$checkboxActiveBg: var(--vscode-checkbox-selectBackground); - -/// Icon color of a selected checkbox -/// @group form -$checkboxIconActiveColor: $primaryTextColor; - -/// Background of a selected checkbox in hover state -/// @group form -$checkboxActiveHoverBg: $primaryDarkerColor; - -/// Icon color of a selected checkbox in hover state -/// @group form -$checkboxIconActiveHoverColor: $primaryTextColor; - -/// Border color of a selected checkbox in hover state -/// @group form -$checkboxActiveHoverBorderColor: $primaryDarkerColor; - -/// Width of a radiobutton -/// @group form -$radiobuttonWidth: 20px; - -/// Height of a radiobutton -/// @group form -$radiobuttonHeight: 20px; - -/// Border of a radiobutton -/// @group form -$radiobuttonBorder: 2px solid #ced4da; - -/// Font size of a radiobutton icon -/// @group form -$radiobuttonIconSize: 12px; - -/// Border color of a selected radiobutton -/// @group form -$radiobuttonActiveBorderColor: $primaryColor; - -/// Background of a selected radiobutton -/// @group form -$radiobuttonActiveBg: $primaryColor; - -/// Icon color of a selected radiobutton -/// @group form -$radiobuttonIconActiveColor: $primaryTextColor; - -/// Background of a selected radiobutton in hover state -/// @group form -$radiobuttonActiveHoverBg: $primaryDarkerColor; - -/// Icon color of a selected radiobutton in hover state -/// @group form -$radiobuttonIconActiveHoverColor: $primaryTextColor; - -/// Border color of a selected radiobutton in hover state -/// @group form -$radiobuttonActiveHoverBorderColor: $primaryDarkerColor; - -/// Width of a color picker preview element -/// @group form -$colorPickerPreviewWidth: 2rem; - -/// Height of a color picker preview element -/// @group form -$colorPickerPreviewHeight: 2rem; - -/// Background of a color picker -/// @group form -$colorPickerBg: #323232; - -/// Border color of a color picker -/// @group form -$colorPickerBorder: 1px solid #191919; - -/// Handle color of a color picker -/// @group form -$colorPickerHandleColor: #ffffff; - -/// Font size of a rating icon -/// @group form -$ratingIconFontSize: 1.143rem; - -/// Icon color for the cancel icon of a rating -/// @group form -$ratingCancelIconColor: #e74c3c; - -/// Hover icon color for the cancel icon of a rating -/// @group form -$ratingCancelIconHoverColor: #c0392b; - -/// Icon color for the star icon of a rating in unselected state -/// @group form -$ratingStarIconOffColor: $textColor; - -/// Icon color for the star icon of a rating in selected state -/// @group form -$ratingStarIconOnColor: $primaryColor; - -/// Icon color for the star icon of a rating in hover state -/// @group form -$ratingStarIconHoverColor: $primaryColor; - -/// Background of a slider -/// @group form -$sliderBg: #dee2e6; - -/// Border of a slider -/// @group form -$sliderBorder: 0 none; - -/// Height of a horizontal slider -/// @group form -$sliderHorizontalHeight: 0.286rem; - -/// Width of a vertical slider -/// @group form -$sliderVerticalWidth: 0.286rem; - -/// Width of a slider handle -/// @group form -$sliderHandleWidth: 1.143rem; - -/// Height of a slider handle -/// @group form -$sliderHandleHeight: 1.143rem; - -/// Background of a slider handle -/// @group form -$sliderHandleBg: #ffffff; - -/// Border of a slider handle -/// @group form -$sliderHandleBorder: 2px solid $primaryColor; - -/// Border radius of a slider handle -/// @group form -$sliderHandleBorderRadius: 50%; - -/// Border of a slider handle in hover state -/// @group form -$sliderHandleHoverBorderColor: $primaryColor; - -/// Background of a slider handle in hover state -/// @group form -$sliderHandleHoverBg: $primaryColor; - -/// Background color of a range slider -/// @group form -$sliderRangeBg: $primaryColor; - -/// Margin of a calendar table -/// @group form -$calendarTableMargin: 0.5rem 0; - -/// Margin of a calendar -/// @group form -$calendarPadding: 0.5rem; - -/// Background of a calendar -/// @group form -$calendarBg: #ffffff; - -/// Background of an inlime calendar -/// @group form -$calendarInlineBg: $calendarBg; - -/// Text color of a calendar -/// @group form -$calendarTextColor: $textColor; - -/// Border of an inline calendar -/// @group form -$calendarBorder: $inputListBorder; - -/// Border of an overlay calendar -/// @group form -$calendarOverlayBorder: $inputOverlayBorder; - -/// Padding of a calendar header -/// @group form -$calendarHeaderPadding: 0.5rem; - -/// Text color of current month and year text in hover state -/// @group form -$calendarMonthYearHeaderHoverTextColor: $primaryColor !default; - -/// Background of a calendar header -/// @group form -$calendarHeaderBg: #ffffff; - -/// Background of an inline calendar header -/// @group form -$calendarInlineHeaderBg: $calendarBg; - -/// Border of a calendar header -/// @group form -$calendarHeaderBorder: 1px solid #dee2e6; - -/// Text color of a calendar header -/// @group form -$calendarHeaderTextColor: $textColor; - -/// Font weight of a calendar header -/// @group form -$calendarHeaderFontWeight: 600; - -/// Padding of a calendar weekday cell -/// @group form -$calendarHeaderCellPadding: 0.5rem; - -/// Padding of a calendar date cell -/// @group form -$calendarCellDatePadding: 0.5rem; - -/// Width of a calendar date cell -/// @group form -$calendarCellDateWidth: 2.5rem; - -/// Height of a calendar date cell -/// @group form -$calendarCellDateHeight: 2.5rem; - -/// Border radius of a calendar date cell -/// @group form -$calendarCellDateBorderRadius: 50%; - -/// Border of a calendar date cell -/// @group form -$calendarCellDateBorder: 1px solid transparent; - -/// Background of a calendar date cell in hover state -/// @group form -$calendarCellDateHoverBg: #e9ecef; - -/// Background of a calendar date cell indicating today -/// @group form -$calendarCellDateTodayBg: #ced4da; - -/// Border color of a calendar date cell indicating today -/// @group form -$calendarCellDateTodayBorderColor: transparent; - -/// Text color of a calendar date cell indicating today -/// @group form -$calendarCellDateTodayTextColor: $textColor; - -/// Padding of the calendar button bar -/// @group form -$calendarButtonBarPadding: 1rem 0; - -/// Padding of a time picker container of a calendar -/// @group form -$calendarTimePickerPadding: 0.5rem; - -/// Padding of a time picker element of a calendar -/// @group form -$calendarTimePickerElementPadding: 0 0.429rem; - -/// Font size of a time picker element of a calendar -/// @group form -$calendarTimePickerTimeFontSize: 1.286rem; - -/// Breakpoint of calendar to apply styles for small screens like phones -/// @group form -$calendarBreakpoint: 769px; - -/// Padding of a calendar date cell on small screens like phones -/// @group form -$calendarCellDatePaddingSM: 0; - -/// Width of an inputswitch -/// @group form -$inputSwitchWidth: 3rem; - -/// Height of an inputswitch -/// @group form -$inputSwitchHeight: 1.75rem; - -/// Border radius of an inputswitch -/// @group form -$inputSwitchBorderRadius: 30px; - -/// Width of an inputswitch handle -/// @group form -$inputSwitchHandleWidth: 1.25rem; - -/// Height of an inputswitch handle -/// @group form -$inputSwitchHandleHeight: 1.25rem; - -/// Border radius of an inputswitch handle -/// @group form -$inputSwitchHandleBorderRadius: 50%; - -/// Padding of an inputswitch slider -/// @group form -$inputSwitchSliderPadding: 0.25rem; - -/// Background color of an inputswitch slider when unselected -/// @group form -$inputSwitchSliderOffBg: #ced4da; - -/// Background color of an inputswitch handle when unselected -/// @group form -$inputSwitchHandleOffBg: #ffffff; - -/// Hover background color of an inputswitch slider when unselected -/// @group form -$inputSwitchSliderOffHoverBg: #c3cad2; - -/// Background color of an inputswitch slider when selected -/// @group form -$inputSwitchSliderOnBg: $primaryColor; - -/// Hover background color of an inputswitch slider when selected -/// @group form -$inputSwitchSliderOnHoverBg: $primaryDarkColor; - -/// Background color of an inputswitch handle when selected -/// @group form -$inputSwitchHandleOnBg: #ffffff; - -/// Height for the progress bar of a fileupload -/// @group form -$fileUploadProgressBarHeight: 0.25rem; - -/// Padding of the fileupload content section -/// @group form -$fileUploadContentPadding: 2rem 1rem; - -/// Background of an editor toolbar -/// @group form -$editorToolbarBg: #f8f9fa; - -/// Border of an editor toolbar -/// @group form -$editorToolbarBorder: 1px solid #dee2e6; - -/// Padding of an editor toolbar -/// @group form -$editorToolbarPadding: 1rem; - -/// Icon color of an editor toolbar -/// @group form -$editorToolbarIconColor: #6c757d; - -/// Icon color of an editor toolbar in hover state -/// @group form -$editorToolbarIconHoverColor: #495057; - -/// Icon color of an editor toolbar in active state -/// @group form -$editorIconActiveColor: $primaryColor; - -/// Border of an editor content -/// @group form -$editorContentBorder: 1px solid #dee2e6; - -/// Background of an editor content -/// @group form -$editorContentBg: #ffffff; - -/// Background of a password meter -/// @group form -$passwordMeterBg: #dee2e6; - -/// Background of a week password -/// @group form -$passwordWeakBg: #e53935; - -/// Background of a medium password -/// @group form -$passwordMediumBg: #ffb300; - -/// Background of a strong password -/// @group form -$passwordStrongBg: #43a047; diff --git a/media/primereact-theme/themes/vscode/variables/_general.scss b/media/primereact-theme/themes/vscode/variables/_general.scss deleted file mode 100644 index f8f7ca3..0000000 --- a/media/primereact-theme/themes/vscode/variables/_general.scss +++ /dev/null @@ -1,159 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -/// Font of the theme -/// @group general -$fontFamily: var(--vscode-font-family); - -/// Size of the font -/// @group general -$fontSize: 13px; // VSCODE var(--vscode-font-size) - -/// Thickness of the texts -/// @group general -$fontWeight: var(--vscode-font-weight); - -/// Primary text color -/// @group general -$textColor: var(--vscode-editor-foreground); - -/// Secondary text color -/// @group general -$textSecondaryColor: #6c757d; - -/// Background of a highlighted item -/// @group general -$highlightBg: $primaryColor; - -/// Text color of a highlighted item -/// @group general -$highlightTextColor: $primaryTextColor; - -/// Background of a highlighted item in focus state -/// @group general -$highlightFocusBg: rgba($primaryColor, 0.24) !default; - -/// Radius of the corners -/// @group general -$borderRadius: 3px; - -/// Duration of the property transitions -/// @group general -$transitionDuration: 0.2s; - -/// Properties of a form element transition -/// @group general -$formElementTransition: background-color $transitionDuration, - color $transitionDuration, border-color $transitionDuration, - box-shadow $transitionDuration; - -/// Properties of a action icon transition -/// @group general -$actionIconTransition: background-color $transitionDuration, - color $transitionDuration, box-shadow $transitionDuration; - -/// Properties of a list item transition -/// @group general -$listItemTransition: background-color $transitionDuration, - border-color $transitionDuration, box-shadow $transitionDuration; - -/// Size of the Icons -/// @group general -$primeIconFontSize: 1rem; - -/// Separator border -/// @group general -$divider: 1px solid #dee2e6; - -/// Space between two inline items -/// @group general -$inlineSpacing: 0.5rem; - -/// Opacity of the disabled elements -/// @group general -$disabledOpacity: 0.8; - -/// Background of the modal layer -/// @group general -$maskBg: rgba(0, 0, 0, 0.4); - -/// Font size of the loading icons -/// @group general -$loadingIconFontSize: 2rem; - -/// Color to use on an invalid element e.g. invalid input -/// @group general -$errorColor: var(--vscode-errorForeground); - -/// Outline color of a focused element -/// @group general -$focusOutlineColor: none; - -/// Outline of a focused element -/// @group general -$focusOutline: 0 none; - -/// Outline offset of a focused element -/// @group general -$focusOutlineOffset: 0; - -/// Box shadow of a focused element -/// @group general -$focusShadow: 0 0 0 0.2rem $focusOutlineColor; - -/// Width of an action icon -/// @group general -$actionIconWidth: 2rem; - -/// Height of an action icon -/// @group general -$actionIconHeight: 2rem; - -/// Background of an action icon -/// @group general -$actionIconBg: transparent; - -/// Border of an action icon -/// @group general -$actionIconBorder: 0 none; - -/// Color of an action icon -/// @group general -$actionIconColor: $textSecondaryColor; - -/// Backgroun of an action icon in hover state -/// @group general -$actionIconHoverBg: #e9ecef; - -/// Border of an action icon in hover state -/// @group general -$actionIconHoverBorderColor: transparent; - -/// Color of an action icon in hover state -/// @group general -$actionIconHoverColor: $textColor; - -/// Border radius of an action icon -/// @group general -$actionIconBorderRadius: 50%; - -/// Scale factor of small component size -/// @group general -$scaleSM: 0.875; - -/// Scale factor of small large size -/// @group general -$scaleLG: 1.25; diff --git a/media/primereact-theme/themes/vscode/variables/_media.scss b/media/primereact-theme/themes/vscode/variables/_media.scss deleted file mode 100644 index bfd2cf6..0000000 --- a/media/primereact-theme/themes/vscode/variables/_media.scss +++ /dev/null @@ -1,247 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -/// Padding of a carousel indicators container -/// @group media -$carouselIndicatorsPadding: 1rem; - -/// Padding of a carousel indicator -/// @group media -$carouselIndicatorBg: #e9ecef; - -/// Padding of a carousel indicator in hover state -/// @group media -$carouselIndicatorHoverBg: #dee2e6; - -/// Border radius of a carousel indicator -/// @group media -$carouselIndicatorBorderRadius: 0; - -/// Width of a carousel indicator -/// @group media -$carouselIndicatorWidth: 2rem; - -/// Height of a carousel indicator -/// @group media -$carouselIndicatorHeight: 0.5rem; - -/// Background of a galleria modal -/// @group media -$galleriaMaskBg: rgba(0, 0, 0, 0.9); - -/// Margin of a galleria close icon -/// @group media -$galleriaCloseIconMargin: 0.5rem; - -/// Font size of a galleria close icon -/// @group media -$galleriaCloseIconFontSize: 2rem; - -/// Background of a galleria close icon -/// @group media -$galleriaCloseIconBg: transparent; - -/// Color of a galleria close icon -/// @group media -$galleriaCloseIconColor: #ebedef; - -/// Background of a galleria close icon in hover state -/// @group media -$galleriaCloseIconHoverBg: rgba(255, 255, 255, 0.1); - -/// Color of a galleria close icon in hover state -/// @group media -$galleriaCloseIconHoverColor: #ebedef; - -/// Width of a galleria close icon -/// @group media -$galleriaCloseIconWidth: 4rem; - -/// Height of a galleria close icon -/// @group media -$galleriaCloseIconHeight: 4rem; - -/// Border radius of a galleria close icon -/// @group media -$galleriaCloseIconBorderRadius: 50%; - -/// Background of a galleria navigator item -/// @group media -$galleriaItemNavigatorBg: rgba(0, 0, 0, 0.2); - -/// Color of a galleria navigator item -/// @group media -$galleriaItemNavigatorColor: #aeb6bf; - -/// Margin of a galleria navigator item -/// @group media -$galleriaItemNavigatorMargin: 0.5rem 0; - -/// Font size of a galleria navigator item -/// @group media -$galleriaItemNavigatorFontSize: 2rem; - -/// Background of a galleria navigator item in hover state -/// @group media -$galleriaItemNavigatorHoverBg: rgba(0, 0, 0, 0.3); - -/// Color of a galleria navigator item in hover state -/// @group media -$galleriaItemNavigatorHoverColor: #ebedef; - -/// Width of a galleria navigator item -/// @group media -$galleriaItemNavigatorWidth: 4rem; - -/// Height of a galleria navigator item -/// @group media -$galleriaItemNavigatorHeight: 4rem; - -/// Border radius of a galleria navigator item -/// @group media -$galleriaItemNavigatorBorderRadius: $borderRadius; - -/// Background of a galleria caption -/// @group media -$galleriaCaptionBg: rgba(0, 0, 0, 0.5); - -/// Color of a galleria caption -/// @group media -$galleriaCaptionTextColor: #ebedef; - -/// Padding of a galleria caption -/// @group media -$galleriaCaptionPadding: 1rem; - -/// Padding of a galleria indicators container -/// @group media -$galleriaIndicatorsPadding: 1rem; - -/// Background of a galleria indicator -/// @group media -$galleriaIndicatorBg: #e9ecef; - -/// Background of a galleria indicator in hover state -/// @group media -$galleriaIndicatorHoverBg: #dee2e6; - -/// Border radius of a galleria indicator -/// @group media -$galleriaIndicatorBorderRadius: 50%; - -/// Width of a galleria indicator -/// @group media -$galleriaIndicatorWidth: 1rem; - -/// Height of a galleria indicator -/// @group media -$galleriaIndicatorHeight: 1rem; - -/// Background of a galleria indicator container when placed inside the viewport -/// @group media -$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, 0.5); - -/// Background of a galleria indicator when placed inside the viewport -/// @group media -$galleriaIndicatorBgOnItem: rgba(255, 255, 255, 0.4); - -/// Background of a galleria indicator in hover state when placed inside the viewport -/// @group media -$galleriaIndicatorHoverBgOnItem: rgba(255, 255, 255, 0.6); - -/// Background of a galleria thumbnail container -/// @group media -$galleriaThumbnailContainerBg: rgba(0, 0, 0, 0.9); - -/// Padding of a galleria thumbnail container -/// @group media -$galleriaThumbnailContainerPadding: 1rem 0.25rem; - -/// Background of a galleria thumbnail navigator -/// @group media -$galleriaThumbnailNavigatorBg: transparent; - -/// Color of a galleria thumbnail navigator -/// @group media -$galleriaThumbnailNavigatorColor: #aeb6bf; - -/// Background of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorHoverBg: rgba(255, 255, 255, 0.1); - -/// Color of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorHoverColor: #aeb6bf; - -/// Border radius of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorBorderRadius: 50%; - -/// Width of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorWidth: 2rem; - -/// Height of a galleria thumbnail navigator in hover state -/// @group media -$galleriaThumbnailNavigatorHeight: 2rem; - -/// Background of an image preview modal -/// @group media -$imageMaskBg: rgba(0, 0, 0, 0.9) !default; - -/// Padding of image preview toolbar -/// @group media -$imagePreviewToolbarPadding: 1rem !default; - -/// Text color of the image preview indicator -/// @group media -$imagePreviewIndicatorColor: #f8f9fa !default; - -/// Background of the image preview indicator -/// @group media -$imagePreviewIndicatorBg: rgba(0, 0, 0, 0.5) !default; - -/// Background of an image action item -/// @group media -$imagePreviewActionIconBg: transparent !default; - -/// Text color of an image action item -/// @group media -$imagePreviewActionIconColor: #f8f9fa !default; - -/// Background of an image action item in hover state -/// @group media -$imagePreviewActionIconHoverBg: rgba(255, 255, 255, 0.1) !default; - -/// Tect color of an image action item in hover state -/// @group media -$imagePreviewActionIconHoverColor: #f8f9fa !default; - -/// Width of an image action item -/// @group media -$imagePreviewActionIconWidth: 3rem !default; - -/// Height of an image action item -/// @group media -$imagePreviewActionIconHeight: 3rem !default; - -/// Font size of an image action item icon -/// @group media -$imagePreviewActionIconFontSize: 1.5rem !default; - -/// Border radius of an image action item -/// @group media -$imagePreviewActionIconBorderRadius: 50% !default; diff --git a/media/primereact-theme/themes/vscode/variables/_menu.scss b/media/primereact-theme/themes/vscode/variables/_menu.scss deleted file mode 100644 index fdaf093..0000000 --- a/media/primereact-theme/themes/vscode/variables/_menu.scss +++ /dev/null @@ -1,303 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -/// Background of a steps item -/// @group menu -$stepsItemBg: #ffffff; - -/// Border of a steps item -/// @group menu -$stepsItemBorder: 1px solid #c8c8c8; - -/// Text color of a steps item -/// @group menu -$stepsItemTextColor: $textSecondaryColor; - -/// Width of a steps itrem number -/// @group menu -$stepsItemNumberWidth: 2rem; - -/// Height of a steps itrem number -/// @group menu -$stepsItemNumberHeight: 2rem; - -/// Font size of a steps itrem number -/// @group menu -$stepsItemNumberFontSize: 1.143rem; - -/// Color of a steps itrem number -/// @group menu -$stepsItemNumberColor: $textColor; - -/// Border radius of a steps itrem number -/// @group menu -$stepsItemNumberBorderRadius: 50%; - -/// Font weight of an active steps itrem number -/// @group menu -$stepsItemActiveFontWeight: 600; - -/// Width of a vertical menu such as tieredmenu or context menu -/// @group menu -$menuWidth: 12.5rem; - -/// Background of a menu -/// @group menu -$menuBg: #ffffff; - -/// Border of a menu -/// @group menu -$menuBorder: 1px solid #dee2e6; - -/// Text color of a menu -/// @group menu -$menuTextColor: $textColor; - -/// Padding of a menuitem -/// @group menu -$menuitemPadding: 0.75rem 1rem; - -/// Border radius of a menuitem -/// @group menu -$menuitemBorderRadius: 0; - -/// Text color of a menuitem -/// @group menu -$menuitemTextColor: $textColor; - -/// Icon color of a menuitem -/// @group menu -$menuitemIconColor: $textSecondaryColor; - -/// Text color of a menuitrem in hover state -/// @group menu -$menuitemTextHoverColor: $textColor; - -/// Icon color of a menuitrem in hover state -/// @group menu -$menuitemIconHoverColor: $textSecondaryColor; - -/// Background of a menuitrem in hover state -/// @group menu -$menuitemHoverBg: #e9ecef; - -/// Text color of a menuitem in focus state -/// @group menu -$menuitemTextFocusColor: $textColor; - -/// Icon color of a menuitem in focus state -/// @group menu -$menuitemIconFocusColor: $textColor; - -/// Background of a menuitem in focus state -/// @group menu -$menuitemFocusBg: #f8f9fa; - -/// Text color of a menuitrem in active state -/// @group menu -$menuitemTextActiveColor: $textColor; - -/// Icon color of a menuitrem in active state -/// @group menu -$menuitemIconActiveColor: $textSecondaryColor; - -/// Background of a menuitrem in active state -/// @group menu -$menuitemActiveBg: #e9ecef; - -/// Background of a menuitem in active and focus states -/// @group menu -$menuitemActiveFocusBg: #e9ecef; - -/// Font size of an icon indicating the itrem has a submenu -/// @group menu -$menuitemSubmenuIconFontSize: 0.875rem; - -/// Margin of a submenu header -/// @group menu -$submenuHeaderMargin: 0; - -/// Padding of a submenu header -/// @group menu -$submenuHeaderPadding: 0.75rem 1rem; - -/// Background of a submenu header -/// @group menu -$submenuHeaderBg: #ffffff; - -/// Text color of a submenu header -/// @group menu -$submenuHeaderTextColor: $textColor; - -/// Border radius of a submenu header -/// @group menu -$submenuHeaderBorderRadius: 0; - -/// Font weight of a submenu header -/// @group menu -$submenuHeaderFontWeight: 600; - -/// Background of an overlay menu -/// @group menu -$overlayMenuBg: $menuBg; - -/// Border of an overlay menu -/// @group menu -$overlayMenuBorder: 0 none; - -/// Box shadow of an overlay menu -/// @group menu -$overlayMenuShadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); - -/// Padding of a vertical menu e.g. tieredmenu, contextmenu -/// @group menu -$verticalMenuPadding: 0.25rem 0; - -/// Margin of a menuitrem separator -/// @group menu -$menuSeparatorMargin: 0.25rem 0; - -/// Padding of a breadcrumb -/// @group menu -$breadcrumbPadding: 1rem; - -/// Background of a breadcrumb -/// @group menu -$breadcrumbBg: $menuBg; - -/// Border of a breadcrumb -/// @group menu -$breadcrumbBorder: $menuBorder; - -/// Text color of a breadcrumb item -/// @group menu -$breadcrumbItemTextColor: $menuitemTextColor; - -/// Icon color of a breadcrumb item -/// @group menu -$breadcrumbItemIconColor: $menuitemIconColor; - -/// Text color of the breadcrumb item -/// @group menu -$breadcrumbLastItemTextColor: $menuitemTextColor; - -/// Icon color of the breadcrumb item -/// @group menu -$breadcrumbLastItemIconColor: $menuitemIconColor; - -/// Color of a breadcrumb separator -/// @group menu -$breadcrumbSeparatorColor: $menuitemTextColor; - -/// Padding of a horizontal menu e.g. menubar -/// @group menu -$horizontalMenuPadding: 0.5rem; - -/// Background of a horizontal menu e.g. menubar -/// @group menu -$horizontalMenuBg: #f8f9fa; - -/// Border of a horizontal menu e.g. menubar -/// @group menu -$horizontalMenuBorder: $menuBorder; - -/// Text color of a horizontal menu e.g. menubar -/// @group menu -$horizontalMenuTextColor: $menuTextColor; - -/// Padding of a horizontal menu root item e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemPadding: $menuitemPadding; - -/// Border radius of a horizontal menu root item e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemBorderRadius: $borderRadius; - -/// Text color of a horizontal menu root item e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemTextColor: $menuitemTextColor; - -/// Icon color of a horizontal menu root item e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemIconColor: $menuitemIconColor; - -/// Text color of a horizontal menu root item in hover state e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor; - -/// Icon color of a horizontal menu root item in hover state e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor; - -/// Background of a horizontal menu root item in hover state e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg; - -/// Text color of a horizontal menu root item in hover active e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemTextActiveColor: $menuitemTextActiveColor; - -/// Icon color of a horizontal menu root item in hover active e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor; - -/// Background of a horizontal menu root item in active state e.g. menubar -/// @group menu -$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg; - -/// Width of an action item on dock -/// @group menu -$dockActionWidth: 4rem; - -/// Height of an action item on dock -/// @group menu -$dockActionHeight: 4rem; - -/// Padding of an action item on dock -/// @group menu -$dockItemPadding: 0.5rem; - -/// Border radius of an action item on dock -/// @group menu -$dockItemBorderRadius: $borderRadius; - -/// Margin of the current action item on dock -/// @group menu -$dockCurrentItemMargin: 1.5rem; - -/// Margin of the previous and next action item on dock -/// @group menu -$dockFirstItemsMargin: 1.3rem; - -/// Margin of the second previous and second next action item on dock -/// @group menu -$dockSecondItemsMargin: 0.9rem; - -/// Background of the list on dock -/// @group menu -$dockBg: rgba(255, 255, 255, 0.1); - -/// Border of the list on dock -/// @group menu -$dockBorder: 1px solid rgba(255, 255, 255, 0.2); - -/// Padding of the list on dock -/// @group menu -$dockPadding: 0.5rem 0.5rem; - -/// Border Radius of the list on dock -/// @group menu -$dockBorderRadius: 0.5rem; diff --git a/media/primereact-theme/themes/vscode/variables/_message.scss b/media/primereact-theme/themes/vscode/variables/_message.scss deleted file mode 100644 index 371b8e5..0000000 --- a/media/primereact-theme/themes/vscode/variables/_message.scss +++ /dev/null @@ -1,159 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -/// Margin of a message -/// @group message -$messageMargin: 1rem 0; - -/// Padding of a message -/// @group message -$messagePadding: 1rem 1.5rem; - -/// Border width of a message -/// @group message -$messageBorderWidth: 0 0 0 4px; - -/// Font size of a message icon -/// @group message -$messageIconFontSize: 1.5rem; - -/// Font size of a message text -/// @group message -$messageTextFontSize: 1rem; - -/// Font weight of a message text -/// @group message -$messageTextFontWeight: 500; - -/// Padding of an inline message -/// @group message -$inlineMessagePadding: $inputPadding; - -/// Margin of an inline message -/// @group message -$inlineMessageMargin: 0; - -/// Font size of an inline message icon -/// @group message -$inlineMessageIconFontSize: 1rem; - -/// Padding of an inline message text -/// @group message -$inlineMessageTextFontSize: 1rem; - -/// Border width of an inline message text -/// @group message -$inlineMessageBorderWidth: 1px; - -/// Font size of a toast message icon -/// @group message -$toastIconFontSize: 2rem; - -/// Margin of a toast message text -/// @group message -$toastMessageTextMargin: 0 0 0 1rem; - -/// Margin of a toast message -/// @group message -$toastMargin: 0 0 1rem 0; - -/// Padding of a toast message -/// @group message -$toastPadding: 1rem; - -/// Border width of a toast message -/// @group message -$toastBorderWidth: 0 0 0 4px; - -/// Box shadow of a toast message -/// @group message -$toastShadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3); - -/// Opacity of a toast message -/// @group message -$toastOpacity: 0.9; - -/// Font weight of a toast message title text -/// @group message -$toastTitleFontWeight: 700; - -/// Margin of a toast message detail text -/// @group message -$toastDetailMargin: $inlineSpacing 0 0 0; - -/// Background of an info message -/// @group message -$infoMessageBg: #039be5; - -/// Border of an info message -/// @group message -$infoMessageBorder: solid #027cb7; - -/// Text color of an info message -/// @group message -$infoMessageTextColor: #ffffff; - -/// Icon color of an info message -/// @group message -$infoMessageIconColor: #ffffff; - -/// Background of a success message -/// @group message -$successMessageBg: #43a047; - -/// Border of a success message -/// @group message -$successMessageBorder: 0 none; - -/// Text color of a success message -/// @group message -$successMessageTextColor: #ffffff; - -/// Icon color of a success message -/// @group message -$successMessageIconColor: #ffffff; - -/// Background of a warning message -/// @group message -$warningMessageBg: #ffb300; - -/// Border of a warning message -/// @group message -$warningMessageBorder: 0 none; - -/// Text color of a warning message -/// @group message -$warningMessageTextColor: $textColor; - -/// Icon color of a warning message -/// @group message -$warningMessageIconColor: $textColor; - -/// Background of an error message -/// @group message -$errorMessageBg: #e53935; - -/// Border of an error message -/// @group message -$errorMessageBorder: 0 none; - -/// Text color of an error message -/// @group message -$errorMessageTextColor: #ffffff; - -/// Icon color of an error message -/// @group message -$errorMessageIconColor: #ffffff; diff --git a/media/primereact-theme/themes/vscode/variables/_misc.scss b/media/primereact-theme/themes/vscode/variables/_misc.scss deleted file mode 100644 index 48f0583..0000000 --- a/media/primereact-theme/themes/vscode/variables/_misc.scss +++ /dev/null @@ -1,130 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -/// Padding of an inplace element -/// @group misc -$inplacePadding: $inputPadding; - -/// Background of an inplace element in hover state -/// @group misc -$inplaceHoverBg: #e9ecef; - -/// Text color of an inplace element in hover state -/// @group misc -$inplaceTextHoverColor: $textColor; - -/// Background of a badge -/// @group misc -$badgeBg: $primaryColor; - -/// Text color of a badge -/// @group misc -$badgeTextColor: $primaryTextColor; - -/// Minimum width of a badge -/// @group misc -$badgeMinWidth: 1.5rem; - -/// Height of a badge -/// @group misc -$badgeHeight: 1.5rem; - -/// Font weight of a badge -/// @group misc -$badgeFontWeight: 700; - -/// Font size of a badge -/// @group misc -$badgeFontSize: 0.75rem; - -/// Padding of a badge -/// @group misc -$tagPadding: 0.25rem 0.4rem; - -/// Height of a progress bar -/// @group misc -$progressBarHeight: 1.5rem; - -/// Border of a progress bar -/// @group misc -$progressBarBorder: 0 none; - -/// Background of a progress bar -/// @group misc -$progressBarBg: #dee2e6; - -/// Background of a progress bar value -/// @group misc -$progressBarValueBg: $primaryColor; - -/// @group misc -$progressBarValueTextColor: $primaryTextColor; - -// Background of an avatar -/// @group misc -$avatarBg: #dee2e6; - -/// Text color of an avatar -/// @group misc -$avatarTextColor: $textColor; - -/// Background of a chip -/// @group misc -$chipBg: #dee2e6; - -/// Text color of a chip -/// @group misc -$chipTextColor: $textColor; - -/// Border radius of a chip -/// @group misc -$chipBorderRadius: 16px; - -/// Background of a scrollTop -/// @group misc -$scrollTopBg: rgba(0, 0, 0, 0.7); - -/// Background of a scrollTop in hover state -/// @group misc -$scrollTopHoverBg: rgba(0, 0, 0, 0.8); - -/// Width of a scrollTop -/// @group misc -$scrollTopWidth: 3rem; - -/// Height of a scrollTop -/// @group misc -$scrollTopHeight: 3rem; - -/// Border radius of a scrollTop -/// @group misc -$scrollTopBorderRadius: 50%; - -/// Font size of a scrollTop -/// @group misc -$scrollTopFontSize: 1.5rem; - -/// Text color of a scrollTop -/// @group misc -$scrollTopTextColor: #f8f9fa; - -/// Background of a skeleton -/// @group misc -$skeletonBg: #e9ecef; - -/// Background of a skeleton animation -/// @group misc -$skeletonAnimationBg: rgba(255, 255, 255, 0.4); diff --git a/media/primereact-theme/themes/vscode/variables/_overlay.scss b/media/primereact-theme/themes/vscode/variables/_overlay.scss deleted file mode 100644 index 90f5c1c..0000000 --- a/media/primereact-theme/themes/vscode/variables/_overlay.scss +++ /dev/null @@ -1,83 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -/// Border of an overlay container element such as dialog or overlaypanel -/// @group overlay -$overlayContentBorder: 0 none; - -/// Background of an overlay container element such as dialog or overlaypanel -/// @group overlay -$overlayContentBg: $panelContentBg; - -/// Box shadow of an overlay container element such as dialog or overlaypanel -/// @group overlay -$overlayContainerShadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); - -/// Background of a dialog header -/// @group overlay -$dialogHeaderBg: #ffffff; - -/// Border of a dialog header -/// @group overlay -$dialogHeaderBorder: 1px solid #dee2e6; - -/// Text color of a dialog header -/// @group overlay -$dialogHeaderTextColor: $panelHeaderTextColor; - -/// Font weight of a dialog header -/// @group overlay -$dialogHeaderFontWeight: 600; - -/// Font size of a dialog header -/// @group overlay -$dialogHeaderFontSize: 1.25rem; - -/// Padding of a dialog header -/// @group overlay -$dialogHeaderPadding: 1.5rem; - -/// Padding of a dialog content -/// @group overlay -$dialogContentPadding: 0 1.5rem; - -/// Border of a dialog footer -/// @group overlay -$dialogFooterBorder: 1px solid #dee2e6; - -/// Padding of a dialog footer -/// @group overlay -$dialogFooterPadding: 1.5rem; - -/// Padding of a confirmpopup content -/// @group overlay -$confirmPopupContentPadding: $panelContentPadding; - -/// Padding of a confirmpopup footer -/// @group overlay -$confirmPopupFooterPadding: 0 1rem 1rem 1rem; - -/// Background of a tooltip -/// @group overlay -$tooltipBg: $textColor; - -/// Text color of a tooltip -/// @group overlay -$tooltipTextColor: #ffffff; - -/// Padding of a tooltip -/// @group overlay -$tooltipPadding: $inputPadding; diff --git a/media/primereact-theme/themes/vscode/variables/_panel.scss b/media/primereact-theme/themes/vscode/variables/_panel.scss deleted file mode 100644 index 7a04d21..0000000 --- a/media/primereact-theme/themes/vscode/variables/_panel.scss +++ /dev/null @@ -1,332 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2024 EclipseSource. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -/// Border color of a panel header -/// @group panel -$panelHeaderBorderColor: #dee2e6; - -/// Border of a panel header -/// @group panel -$panelHeaderBorder: none; - -/// Background of a panel header -/// @group panel -$panelHeaderBg: var(--vscode-dropdown-background); - -/// Text color of a panel header -/// @group panel -$panelHeaderTextColor: $textColor; - -/// Font weight of a panel header -/// @group panel -$panelHeaderFontWeight: 600; - -/// Padding of a panel header -/// @group panel -$panelHeaderPadding: 1rem; - -/// Font weight of a toggleable panel header -/// @group panel -$panelToggleableHeaderPadding: 0.5rem 1rem; - -/// Border color for the content section of a panel -/// @group panel -$panelContentBorderColor: #dee2e6; - -/// Border for the content section of a panel -/// @group panel -$panelContentBorder: none; - -/// Background for the content section of a panel -/// @group panel -$panelContentBg: var(--vscode-dropdown-background); - -/// Background for the striped row. -/// @group panel -$panelContentEvenRowBg: #e9ecef; - -/// Text color for the content section of a panel -/// @group panel -$panelContentTextColor: var(--vscode-dropdown-foreground); - -/// Padding for the content section of a panel -/// @group panel -$panelContentPadding: 1rem; - -/// Border for the footer section of a panel -/// @group panel -$panelFooterBorder: 1px solid #dee2e6; - -/// Background for the footer section of a panel -/// @group panel -$panelFooterBg: #ffffff; - -/// Text color for the footer section of a panel -/// @group panel -$panelFooterTextColor: $textColor; - -/// Padding for the footer section of a panel -/// @group panel -$panelFooterPadding: 0.5rem 1rem; - -/// Spacing between to accordion panels -/// @group panel -$accordionSpacing: 0; - -/// Border of an accordion panel header -/// @group panel -$accordionHeaderBorder: $panelHeaderBorder; - -/// Background of an accordion panel header -/// @group panel -$accordionHeaderBg: $panelHeaderBg; - -/// Text color of an accordion panel header -/// @group panel -$accordionHeaderTextColor: $panelHeaderTextColor; - -/// Font weight of an accordion panel header -/// @group panel -$accordionHeaderFontWeight: $panelHeaderFontWeight; - -/// Padding of an accordion panel header -/// @group panel -$accordionHeaderPadding: $panelHeaderPadding; - -/// Background of an accordion panel header in hover state -/// @group panel -$accordionHeaderHoverBg: #e9ecef; - -/// Border of an accordion panel header in hover state -/// @group panel -$accordionHeaderHoverBorderColor: $panelHeaderBorder; - -/// Text color of an accordion panel header in hover state -/// @group panel -$accordionHeaderTextHoverColor: $textColor; - -/// Background of an accordion panel header in expanded state -/// @group panel -$accordionHeaderActiveBg: $panelHeaderBg; - -/// Border of an accordion panel header in expanded state -/// @group panel -$accordionHeaderActiveBorderColor: #dee2e6; - -/// Text color of an accordion panel header in expanded state -/// @group panel -$accordionHeaderTextActiveColor: $textColor; - -/// Hover background of an accordion panel header in expanded state -/// @group panel -$accordionHeaderActiveHoverBg: #e9ecef; - -/// Hover border of an accordion panel header in expanded state -/// @group panel -$accordionHeaderActiveHoverBorderColor: #dee2e6; - -/// Text color of an accordion panel header in expanded state -/// @group panel -$accordionHeaderTextActiveHoverColor: $textColor; - -/// Border for a content section of an accordion panel -/// @group panel -$accordionContentBorder: $panelContentBorder; - -/// Background for a content section of an accordion panel -/// @group panel -$accordionContentBg: $panelContentBg; - -/// Text color for a content section of an accordion panel -/// @group panel -$accordionContentTextColor: $panelContentTextColor; - -/// Padding for a content section of an accordion panel -/// @group panel -$accordionContentPadding: $panelContentPadding; - -/// Border for a parent element containing all the headers of a tabview -/// @group panel -$tabviewNavBorder: 1px solid #dee2e6; - -/// Border width for a parent element containing all the headers of a tabview -/// @group panel -$tabviewNavBorderWidth: 0 0 2px 0; - -/// Background for a parent element containing all the headers of a tabview -/// @group panel -$tabviewNavBg: #ffffff; - -/// Spacing between tabview headers -/// @group panel -$tabviewHeaderSpacing: 0; - -/// Border of a tabview header -/// @group panel -$tabviewHeaderBorder: solid #dee2e6; - -/// Border width of a tabview header -/// @group panel -$tabviewHeaderBorderWidth: 0 0 2px 0; - -/// Border color of a tabview header -/// @group panel -$tabviewHeaderBorderColor: transparent transparent #dee2e6 transparent; - -/// Background of a tabview header -/// @group panel -$tabviewHeaderBg: #ffffff; - -/// Text color of a tabview header -/// @group panel -$tabviewHeaderTextColor: $textSecondaryColor; - -/// Font weight of a tabview header -/// @group panel -$tabviewHeaderFontWeight: $panelHeaderFontWeight; - -/// Padding of a tabview header -/// @group panel -$tabviewHeaderPadding: $panelHeaderPadding; - -/// Margin of a tabview header -/// @group panel -$tabviewHeaderMargin: 0 0 -2px 0; - -/// Background of a tabview header in hover state -/// @group panel -$tabviewHeaderHoverBg: #ffffff; - -/// Border of a tabview header in hover state -/// @group panel -$tabviewHeaderHoverBorderColor: #9ba2aa; - -/// Text color of a tabview header in hover state -/// @group panel -$tabviewHeaderTextHoverColor: $textSecondaryColor; - -/// Background of a tabview header in selected state -/// @group panel -$tabviewHeaderActiveBg: #ffffff; - -/// Border of a tabview header in selected state -/// @group panel -$tabviewHeaderActiveBorderColor: $primaryColor; - -/// Text color of a tabview header in selected state -/// @group panel -$tabviewHeaderTextActiveColor: $primaryColor; - -/// Border for content section of a tabview tab -/// @group panel -$tabviewContentBorder: 0 none; - -/// Background for content section of a tabview tab -/// @group panel -$tabviewContentBg: $panelContentBg; - -/// Text color for a content section of a tabview tab -/// @group panel -$tabviewContentTextColor: $panelContentTextColor; - -/// Padding for a content section of a tabview tab -/// @group panel -$tabviewContentPadding: $panelContentPadding; - -/// Background of a fieldset header in hover state -/// @group panel -$panelHeaderHoverBg: #e9ecef; - -/// Border of a fieldset header in hover state -/// @group panel -$panelHeaderHoverBorderColor: #dee2e6; - -/// Text color of a fieldset header in hover state -/// @group panel -$panelHeaderTextHoverColor: $textColor; - -/// Border for a track bar of a scroll panel -/// @group panel -$scrollPanelTrackBorder: 0 none; - -/// Background for a track bar of a scroll panel -/// @group panel -$scrollPanelTrackBg: #f8f9fa; - -/// Padding of a card body -/// @group panel -$cardBodyPadding: 1rem; - -/// Font size of a card title -/// @group panel -$cardTitleFontSize: 1.5rem; - -/// Font weight of a card title -/// @group panel -$cardTitleFontWeight: 700; - -/// Font size of a card subtitle -/// @group panel -$cardSubTitleFontWeight: 700; - -/// Text color of a card subtitle -/// @group panel -$cardSubTitleColor: $textSecondaryColor; - -/// Padding of a card content -/// @group panel -$cardContentPadding: 1rem 0; - -/// Padding of a card footer -/// @group panel -$cardFooterPadding: 1rem 0 0 0; - -/// Box shadow of a card -/// @group panel -$cardShadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), - 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); - -/// Margin of divider in horizontal layout -/// @group panel -$dividerHorizontalMargin: 1rem 0; - -/// Padding of divider in horizontal layout -/// @group panel -$dividerHorizontalPadding: 0 1rem; - -/// Margin of divider in vertical layout -/// @group panel -$dividerVerticalMargin: 0 1rem; - -/// Padding of divider in vertical layout -/// @group panel -$dividerVerticalPadding: 1rem 0; - -/// Border width of the divider -/// @group panel -$dividerSize: 1px; - -/// Color of the divider border -/// @group panel -$dividerColor: #dee2e6; - -/// Background of the splitter gutter -/// @group panel -$splitterGutterBg: #f8f9fa; - -/// Background of the splitter gutter handle -/// @group panel -$splitterGutterHandleBg: #dee2e6; diff --git a/media/primereact-theme/README.md b/media/theme/README.md similarity index 62% rename from media/primereact-theme/README.md rename to media/theme/README.md index 0395cb1..8bc923d 100644 --- a/media/primereact-theme/README.md +++ b/media/theme/README.md @@ -2,4 +2,4 @@ Information regarding how theming works can be taken from: . -Mapping the VSCode theme to our purposes requires manual work. You can check the CSS by using the devtools in . +Mapping the VSCode theme to our purposes requires manual work. You can check the CSS by using the devtools in . The VSCode theme colors can be found in diff --git a/media/theme/components/button.css b/media/theme/components/button.css new file mode 100644 index 0000000..3e96b6d --- /dev/null +++ b/media/theme/components/button.css @@ -0,0 +1,56 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +:root { + --button-icon-background: transparent; + --button-icon-corner-radius: 5px; + --button-icon-hover-background: rgba(90, 93, 94, 0.31); + --button-icon-padding: 3px; + --button-padding-horizontal: 11px; + --button-padding-vertical: 4px; +} + +.p-button { + color: var(--vscode-button-foreground); + background: var(--vscode-button-background); + border: 1px solid var(--vscode-button-border); + padding: var(--button-padding-vertical) var(--button-padding-horizontal); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, + box-shadow 0.2s; +} +.p-button:not(:disabled):hover { + background: var(--vscode-button-hoverBackground); +} +.p-button:not(:disabled):active { + background: var(--vscode-button-background); +} + +.p-button.p-button-rounded { + border-radius: 2rem; +} +.p-button.p-button-icon-only { + color: var(--vscode-icon-foreground); + background: var(--button-icon-background); + padding: var(--button-icon-padding); + outline: none; + border: none; +} +.p-button.p-button.p-button-icon-only:hover { + background: var(--button-icon-hover-background); +} +.p-button.p-button-icon-only.p-button-rounded { + border-radius: var(--button-icon-corner-radius); +} diff --git a/media/theme/components/checkbox.css b/media/theme/components/checkbox.css new file mode 100644 index 0000000..91683ff --- /dev/null +++ b/media/theme/components/checkbox.css @@ -0,0 +1,44 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +.p-checkbox { + width: 14px; + height: 14px; +} +.p-checkbox .p-checkbox-box { + border: 1px solid var(--vscode-checkbox-border); + background: var(--vscode-checkbox-background); + width: 14px; + height: 14px; + color: var(--vscode-checkbox-foreground); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, + box-shadow 0.2s; +} +.p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + font-size: 12px; +} +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 12px; + height: 12px; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + outline: 0 none; + outline-offset: 0; +} +.p-checkbox.p-invalid > .p-checkbox-box { + border-color: #d8222f; +} diff --git a/media/theme/components/dropdown.css b/media/theme/components/dropdown.css new file mode 100644 index 0000000..c3aa0e3 --- /dev/null +++ b/media/theme/components/dropdown.css @@ -0,0 +1,72 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +.p-dropdown { + color: var(--vscode-dropdown-foreground); + background: var(--vscode-dropdown-background); + border: 1px solid var(--vscode-dropdown-border); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, + box-shadow 0.2s; +} +.p-dropdown:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + border-color: var(--vscode-focusBorder); +} +.p-dropdown .p-dropdown-label { + background: transparent; + border: 0 none; + line-height: var(--input-minHeight); +} +.p-dropdown .p-dropdown-label.p-placeholder { + color: var(--vscode-input-placeholderForeground); +} +.p-dropdown .p-dropdown-trigger { + background: transparent; + width: 2.357rem; +} +.p-dropdown.p-invalid.p-component { + border-color: #d8222f; +} +.p-dropdown-panel { + background: var(--vscode-dropdown-background); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), + 0 1px 10px 0 rgba(0, 0, 0, 0.12); +} +.p-dropdown-panel .p-dropdown-items-wrapper { + border: 1px solid var(--vscode-focusBorder); +} +.p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 0; + padding: 0.25rem 0.5rem; + border: 0 none; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { + background: var(--vscode-list-activeSelectionBackground); + color: var(--vscode-list-activeSelectionForeground); +} +.p-dropdown-panel + .p-dropdown-items + .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + background: var(--vscode-list-activeSelectionBackground); + color: var(--vscode-list-activeSelectionForeground); +} diff --git a/media/theme/components/input.css b/media/theme/components/input.css new file mode 100644 index 0000000..ffed74f --- /dev/null +++ b/media/theme/components/input.css @@ -0,0 +1,43 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +:root { + --input-minHeight: 26px; + --input-width: 100px; +} + +.p-inputtext { + font-family: var(--vscode-font-family); + line-height: var(--type-ramp-base-line-height); + font-size: var(--type-ramp-base-font-size); + color: var(--vscode-input-foreground); + background: var(--vscode-input-background); + padding: 0 11px; + border: 1px solid var(--vscode-input-border); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, + box-shadow 0.2s; + appearance: none; + min-height: var(--input-minHeight); + width: var(--input-width); +} +.p-inputtext:enabled:focus { + outline: none; + border-color: var(--vscode-focusBorder); +} + +.p-inputtext.p-invalid.p-component { + border-color: #d8222f; +} diff --git a/media/theme/components/overlay.css b/media/theme/components/overlay.css new file mode 100644 index 0000000..fdbdf51 --- /dev/null +++ b/media/theme/components/overlay.css @@ -0,0 +1,27 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +.p-overlaypanel { + background: var(--vscode-editor-background); + color: var(--vscode-foreground); + border: 0 none; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), + 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); + z-index: 99; +} +.p-overlaypanel .p-overlaypanel-content { + padding: 1rem; +} diff --git a/media/primereact-theme/themes/vscode/_fonts.scss b/media/theme/components/progress-spinner.css similarity index 86% rename from media/primereact-theme/themes/vscode/_fonts.scss rename to media/theme/components/progress-spinner.css index 248a2c0..1893b6e 100644 --- a/media/primereact-theme/themes/vscode/_fonts.scss +++ b/media/theme/components/progress-spinner.css @@ -14,4 +14,8 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ -// Configuration for the font-face of the theme, defaults to the system font so left as blank +.p-progress-spinner-circle { + stroke: var(--vscode-notificationsInfoIcon-foreground); + stroke-width: 3; + animation: none; +} diff --git a/media/theme/components/table.css b/media/theme/components/table.css new file mode 100644 index 0000000..5ff1462 --- /dev/null +++ b/media/theme/components/table.css @@ -0,0 +1,68 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +.p-datatable .p-datatable-header { + padding: 0.5rem 1rem; +} +.p-datatable .p-datatable-footer { + padding: 0.5rem 1rem; +} +.p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 1rem 1rem; + font-weight: 600; + background: var(--vscode-editor-background); + transition: box-shadow 0.2s; +} +.p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 1rem 1rem; + font-weight: 600; + background: var(--vscode-editor-background); +} +.p-datatable .p-datatable-tbody > tr { + background: var(--vscode-editor-background); + transition: box-shadow 0.2s; +} +.p-datatable .p-datatable-tbody > tr:hover { + background: var(--vscode-settings-rowHoverBackground); +} +.p-datatable .p-datatable-tbody > tr > td { + text-align: left; + padding: 0.25rem 1rem; +} +.p-datatable .p-datatable-tbody > tr > td.p-highlight { + background: var(--vscode-editor-selectionHighlightBackground); +} +.p-datatable.p-datatable-selectable + .p-datatable-tbody + > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: var(--vscode-settings-rowHoverBackground); +} +.p-datatable.p-datatable-selectable-cell + .p-datatable-tbody + > tr.p-selectable-row + > td.p-selectable-cell:not(.p-highlight):hover { + background: var(--vscode-settings-rowHoverBackground); +} +.p-datatable.p-datatable-hoverable-rows + .p-datatable-tbody + > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: var(--vscode-settings-rowHoverBackground); +} +.p-datatable .p-column-resizer-helper { + background: var(--vscode-focusBorder); +} diff --git a/media/primereact-theme/themes/vscode/theme.scss b/media/theme/extensions.css similarity index 75% rename from media/primereact-theme/themes/vscode/theme.scss rename to media/theme/extensions.css index 735d723..e2db523 100644 --- a/media/primereact-theme/themes/vscode/theme.scss +++ b/media/theme/extensions.css @@ -14,7 +14,18 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ -@import "./variables"; -@import "./_fonts"; -@import "../../base/_base"; -@import "./_extensions"; +.pm-top-label { + display: flex; + flex-direction: column; + font-size: var(--type-ramp-base-font-size); +} + +.pm-top-label .p-inputtext-label { + margin-bottom: 2px; + cursor: pointer; +} + +small.p-invalid { + margin-top: 4px; + color: var(--vscode-errorForeground); +} diff --git a/media/theme/theme.css b/media/theme/theme.css new file mode 100644 index 0000000..4ac17e4 --- /dev/null +++ b/media/theme/theme.css @@ -0,0 +1,32 @@ +/******************************************************************************** + * Copyright (C) 2024 EclipseSource. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +@import "./components/button.css"; +@import "./components/checkbox.css"; +@import "./components/dropdown.css"; +@import "./components/input.css"; +@import "./components/overlay.css"; +@import "./components/progress-spinner.css"; +@import "./components/table.css"; + +@import "./extensions.css"; + +:root { + --border-width: 1; + + --type-ramp-base-font-size: 13px; + --type-ramp-base-line-height: normal; +} diff --git a/package.json b/package.json index 56bf5ea..f22012c 100644 --- a/package.json +++ b/package.json @@ -61,16 +61,13 @@ "eslint-plugin-no-null": "^1.0.2", "eslint-plugin-no-unsanitized": "^4.0.2", "eslint-plugin-react": "^7.31.11", - "sass": "^1.70.0", - "sass-loader": "^14.0.0", "serve": "^14.1.2", "style-loader": "^3.3.4", "ts-loader": "^9.4.2", "tslint": "^6.1.3", "typescript": "^4.9.3", "webpack": "^5.75.0", - "webpack-cli": "^5.0.0", - "primereact-sass-theme": "github:primefaces/primereact-sass-theme#10.3.3" + "webpack-cli": "^5.0.0" }, "contributes": { "commands": [ diff --git a/src/webview/components/options-widget.tsx b/src/webview/components/options-widget.tsx index 1c3cee5..b0cb052 100644 --- a/src/webview/components/options-widget.tsx +++ b/src/webview/components/options-widget.tsx @@ -93,7 +93,7 @@ export class OptionsWidget extends React.Component { } else { const address = +values.address; if (!isNaN(address) && address < 0) { - errors.address = 'Value needs to be larger than 0'; + errors.address = 'Value needs to be >= 0'; } } @@ -112,8 +112,8 @@ export class OptionsWidget extends React.Component { const count = +values.count; if (isNaN(count)) { errors.count = 'No number provided'; - } else if (count < 0) { - errors.count = 'Value needs to be larger than 0'; + } else if (count <= 0) { + errors.count = 'Value needs to be > 0'; } } @@ -194,6 +194,7 @@ export class OptionsWidget extends React.Component { } type='button' title='Show all data' + rounded aria-label='Show all data' aria-haspopup > diff --git a/src/webview/memory-webview-view.tsx b/src/webview/memory-webview-view.tsx index df9f73d..005f487 100644 --- a/src/webview/memory-webview-view.tsx +++ b/src/webview/memory-webview-view.tsx @@ -35,8 +35,7 @@ import { AsciiColumn } from './columns/ascii-column'; import { AddressColumn } from './columns/address-column'; import { DataColumn } from './columns/data-column'; import { PrimeReactProvider } from 'primereact/api'; -import '../../media/primereact-theme/themes/vscode/theme.scss'; -import 'primeflex/primeflex.scss'; +import 'primeflex/primeflex.css'; export interface MemoryAppState extends MemoryState { decorations: Decoration[]; @@ -115,21 +114,26 @@ class App extends React.Component<{}, MemoryAppState> { count: partialOptions?.count ?? this.state.count }; - const response = await messenger.sendRequest(readMemoryType, HOST_EXTENSION, completeOptions); - await Promise.all(Array.from( - new Set(columnContributionService.getUpdateExecutors().concat(decorationService.getUpdateExecutors())), - executor => executor.fetchData(completeOptions) - )); - - this.setState({ - decorations: decorationService.decorations, - memory: this.convertMemory(response), - memoryReference: completeOptions.memoryReference, - offset: completeOptions.offset, - count: completeOptions.count, - isMemoryFetching: false - }); - messenger.sendRequest(setOptionsType, HOST_EXTENSION, completeOptions); + try { + const response = await messenger.sendRequest(readMemoryType, HOST_EXTENSION, completeOptions); + await Promise.all(Array.from( + new Set(columnContributionService.getUpdateExecutors().concat(decorationService.getUpdateExecutors())), + executor => executor.fetchData(completeOptions) + )); + + this.setState({ + decorations: decorationService.decorations, + memory: this.convertMemory(response), + memoryReference: completeOptions.memoryReference, + offset: completeOptions.offset, + count: completeOptions.count, + isMemoryFetching: false + }); + + messenger.sendRequest(setOptionsType, HOST_EXTENSION, completeOptions); + } finally { + this.setState(prev => ({ ...prev, isMemoryFetching: false })); + } } diff --git a/webpack.config.js b/webpack.config.js index 3c9c71f..f9dd75f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -23,11 +23,10 @@ const common = { } }, { - test: /\.s[ac]ss$/i, + test: /\.css$/i, use: [ "style-loader", "css-loader", - "sass-loader", ], }, ] diff --git a/yarn.lock b/yarn.lock index 3a3cbd1..9c516f9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -601,14 +601,6 @@ ansi-styles@^6.1.0: resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5" integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug== -anymatch@~3.1.2: - version "3.1.3" - resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e" - integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw== - dependencies: - normalize-path "^3.0.0" - picomatch "^2.0.4" - arch@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11" @@ -696,11 +688,6 @@ base64-js@^1.3.1: resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a" integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA== -binary-extensions@^2.0.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" - integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== - bl@^4.0.3: version "4.1.0" resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a" @@ -737,7 +724,7 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" -braces@^3.0.2, braces@~3.0.2: +braces@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== @@ -864,21 +851,6 @@ cheerio@^1.0.0-rc.9: parse5 "^7.0.0" parse5-htmlparser2-tree-adapter "^7.0.0" -"chokidar@>=3.0.0 <4.0.0": - version "3.5.3" - resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" - integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== - dependencies: - anymatch "~3.1.2" - braces "~3.0.2" - glob-parent "~5.1.2" - is-binary-path "~2.1.0" - is-glob "~4.0.1" - normalize-path "~3.0.0" - readdirp "~3.6.0" - optionalDependencies: - fsevents "~2.3.2" - chownr@^1.1.1: version "1.1.4" resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b" @@ -1610,11 +1582,6 @@ fs.realpath@^1.0.0: resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== -fsevents@~2.3.2: - version "2.3.3" - resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" - integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== - function-bind@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" @@ -1662,7 +1629,7 @@ github-from-package@0.0.0: resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce" integrity sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw== -glob-parent@^5.1.2, glob-parent@~5.1.2: +glob-parent@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== @@ -1807,11 +1774,6 @@ ignore@^5.2.0: resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.1.tgz#c2b1f76cb999ede1502f3a226a9310fdfe88d46c" integrity sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA== -immutable@^4.0.0: - version "4.3.4" - resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f" - integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA== - import-fresh@^3.0.0, import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" @@ -1872,13 +1834,6 @@ is-bigint@^1.0.1: dependencies: has-bigints "^1.0.1" -is-binary-path@~2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" - integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== - dependencies: - binary-extensions "^2.0.0" - is-boolean-object@^1.1.0: version "1.1.2" resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719" @@ -1921,7 +1876,7 @@ is-fullwidth-code-point@^3.0.0: resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d" integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== -is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1: +is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084" integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== @@ -2334,11 +2289,6 @@ node-releases@^2.0.6: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503" integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg== -normalize-path@^3.0.0, normalize-path@~3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" - integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== - npm-run-path@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea" @@ -2551,7 +2501,7 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== -picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1: +picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== @@ -2641,10 +2591,6 @@ primeflex@^3.3.1: resolved "https://registry.yarnpkg.com/primeflex/-/primeflex-3.3.1.tgz#361dddf6eb5db50d733e4cddd4b6e376a3d7bd68" integrity sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ== -"primereact-sass-theme@github:primefaces/primereact-sass-theme#10.3.3": - version "10.3.3" - resolved "https://codeload.github.com/primefaces/primereact-sass-theme/tar.gz/db9c3b1f9340b9fe53dc6b2a0728e5459b8ffdf3" - primereact@^10.3.1: version "10.3.1" resolved "https://registry.yarnpkg.com/primereact/-/primereact-10.3.1.tgz#e8910c37b24f2bca386a70d9c741f0542bb9760d" @@ -2765,13 +2711,6 @@ readable-stream@^3.1.1, readable-stream@^3.4.0: string_decoder "^1.1.1" util-deprecate "^1.0.1" -readdirp@~3.6.0: - version "3.6.0" - resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" - integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== - dependencies: - picomatch "^2.2.1" - rechoir@^0.8.0: version "0.8.0" resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.8.0.tgz#49f866e0d32146142da3ad8f0eff352b3215ff22" @@ -2891,22 +2830,6 @@ safe-regex-test@^1.0.0: get-intrinsic "^1.1.3" is-regex "^1.1.4" -sass-loader@^14.0.0: - version "14.0.0" - resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-14.0.0.tgz#fc8390f7cc16863622cd16f3ea07b36ba6ea8f91" - integrity sha512-oceP9wWbep/yRJ2+sMbCzk0UsXsDzdNis+N8nu9i5GwPXjy6v3DNB6TqfJLSpPO9k4+B8x8p/CEgjA9ZLkoLug== - dependencies: - neo-async "^2.6.2" - -sass@^1.70.0: - version "1.70.0" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.70.0.tgz#761197419d97b5358cb25f9dd38c176a8a270a75" - integrity sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ== - dependencies: - chokidar ">=3.0.0 <4.0.0" - immutable "^4.0.0" - source-map-js ">=0.6.2 <2.0.0" - sax@>=0.6.0: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -3042,7 +2965,7 @@ slash@^3.0.0: resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== -"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: +source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== From 460da889ab23055af2d8569b15a3d9c098464601 Mon Sep 17 00:00:00 2001 From: Haydar Metin Date: Mon, 29 Jan 2024 14:36:09 +0100 Subject: [PATCH 04/16] Clean up invalid color and remove not changed file --- media/theme/components/checkbox.css | 2 +- media/theme/components/dropdown.css | 2 +- media/theme/components/input.css | 2 +- src/plugin/manifest.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/media/theme/components/checkbox.css b/media/theme/components/checkbox.css index 91683ff..b5a93ee 100644 --- a/media/theme/components/checkbox.css +++ b/media/theme/components/checkbox.css @@ -40,5 +40,5 @@ outline-offset: 0; } .p-checkbox.p-invalid > .p-checkbox-box { - border-color: #d8222f; + border-color: var(--vscode-errorForeground); } diff --git a/media/theme/components/dropdown.css b/media/theme/components/dropdown.css index c3aa0e3..8014399 100644 --- a/media/theme/components/dropdown.css +++ b/media/theme/components/dropdown.css @@ -39,7 +39,7 @@ width: 2.357rem; } .p-dropdown.p-invalid.p-component { - border-color: #d8222f; + border-color: var(--vscode-errorForeground); } .p-dropdown-panel { background: var(--vscode-dropdown-background); diff --git a/media/theme/components/input.css b/media/theme/components/input.css index ffed74f..9cf1467 100644 --- a/media/theme/components/input.css +++ b/media/theme/components/input.css @@ -39,5 +39,5 @@ } .p-inputtext.p-invalid.p-component { - border-color: #d8222f; + border-color: var(--vscode-errorForeground); } diff --git a/src/plugin/manifest.ts b/src/plugin/manifest.ts index f3a6b82..37facab 100644 --- a/src/plugin/manifest.ts +++ b/src/plugin/manifest.ts @@ -21,7 +21,7 @@ export const EDITOR_NAME = `${PACKAGE_NAME}.inspect`; export const CONFIG_LOGGING_VERBOSITY = 'loggingVerbosity'; export const DEFAULT_LOGGING_VERBOSITY = 'warn'; export const CONFIG_DEBUG_TYPES = 'debugTypes'; -export const DEFAULT_DEBUG_TYPES = ['gdb', 'embedded-debug', 'arm-debugger']; +export const DEFAULT_DEBUG_TYPES = [ 'gdb', 'embedded-debug', 'arm-debugger' ]; export const CONFIG_REFRESH_ON_STOP = 'refreshOnStop'; export const DEFAULT_REFRESH_ON_STOP = 'on'; From 79ddc794ce30aff8f8b665d48f3a5c57b4c3d3bc Mon Sep 17 00:00:00 2001 From: Haydar Metin Date: Mon, 29 Jan 2024 14:56:55 +0100 Subject: [PATCH 05/16] Reduce opacity if button is disabled --- media/options-widget.css | 2 +- media/theme/components/button.css | 3 +++ media/theme/theme.css | 1 + 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/media/options-widget.css b/media/options-widget.css index b6dac05..a23a16f 100644 --- a/media/options-widget.css +++ b/media/options-widget.css @@ -47,7 +47,7 @@ .form-options button[type="submit"] { /* Match height of inputs */ - height: calc(var(--input-height) * 1px); + height: calc(var(--input-minHeight) * 1px); margin-top: 1rem; align-self: start; } diff --git a/media/theme/components/button.css b/media/theme/components/button.css index 3e96b6d..eb66bdb 100644 --- a/media/theme/components/button.css +++ b/media/theme/components/button.css @@ -31,6 +31,9 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } +.p-button:disabled { + opacity: var(--disabled-opacity); +} .p-button:not(:disabled):hover { background: var(--vscode-button-hoverBackground); } diff --git a/media/theme/theme.css b/media/theme/theme.css index 4ac17e4..9f54b24 100644 --- a/media/theme/theme.css +++ b/media/theme/theme.css @@ -26,6 +26,7 @@ :root { --border-width: 1; + --disabled-opacity: 0.4; --type-ramp-base-font-size: 13px; --type-ramp-base-line-height: normal; From 3b19a1c8ad4343cd3f62d514c380cc6abedc05bb Mon Sep 17 00:00:00 2001 From: Haydar Metin Date: Thu, 1 Feb 2024 14:17:42 +0100 Subject: [PATCH 06/16] Avoid derived state where possible --- package.json | 1 + src/webview/columns/ascii-column.tsx | 20 ++-- src/webview/components/memory-table.tsx | 147 +++++++++++------------- src/webview/utils/arrays.ts | 23 ---- yarn.lock | 5 + 5 files changed, 80 insertions(+), 116 deletions(-) delete mode 100644 src/webview/utils/arrays.ts diff --git a/package.json b/package.json index f22012c..709f992 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "@vscode/codicons": "^0.0.32", "fast-deep-equal": "^3.1.3", "formik": "^2.4.5", + "memoize-one": "^6.0.0", "primeflex": "^3.3.1", "primereact": "^10.3.1", "react": "^18.2.0", diff --git a/src/webview/columns/ascii-column.tsx b/src/webview/columns/ascii-column.tsx index 52be24e..c9a6a1c 100644 --- a/src/webview/columns/ascii-column.tsx +++ b/src/webview/columns/ascii-column.tsx @@ -19,7 +19,6 @@ import { ReactNode } from 'react'; import { BigIntMemoryRange, toOffset } from '../../common/memory-range'; import { ColumnContribution, TableRenderOptions } from './column-contribution-service'; import { Memory } from '../utils/view-types'; -import { chunkIntoN } from '../utils/arrays'; function isPrintableAsAscii(input: number): boolean { return input >= 32 && input < (128 - 1); @@ -39,17 +38,16 @@ export class AsciiColumn implements ColumnContribution { const startOffset = toOffset(memory.address, range.startAddress, options.wordSize); const endOffset = toOffset(memory.address, range.endAddress, options.wordSize); - const indices = Array.from({ length: endOffset - startOffset }, (_, a) => a + startOffset); - const chunks = chunkIntoN(indices, options.groupsPerRow); - const groups: ReactNode[] = []; - - for (const chunk of chunks) { - let result = ''; - for (const i of chunk) { - result += getASCIIForSingleByte(memory.bytes[i]); + const bytesPerGroup = options.wordSize * options.wordsPerGroup / 8; + const groups = []; + let groupAscii = ''; + for (let i = startOffset; i < endOffset; i++) { + groupAscii += getASCIIForSingleByte(memory.bytes[i]); + if (i + 1 === endOffset || groupAscii.length === bytesPerGroup) { + // Could do (i - startOffset + 1) % bytesPerGroup === 0 if we want to be agnostic about the length ASCII for each byte. + groups.push({groupAscii}); + groupAscii = ''; } - - groups.push({result}); } return ( diff --git a/src/webview/components/memory-table.tsx b/src/webview/components/memory-table.tsx index 5f5884e..6a04e8b 100644 --- a/src/webview/components/memory-table.tsx +++ b/src/webview/components/memory-table.tsx @@ -14,18 +14,14 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ -// Primereact works with null values -/* eslint-disable no-null/no-null */ - -import React from 'react'; -import { Decoration, Memory, MemoryDisplayConfiguration, ScrollingBehavior, isTrigger } from '../utils/view-types'; -import { TableRenderOptions } from '../columns/column-contribution-service'; import { DebugProtocol } from '@vscode/debugprotocol'; -import { DataTable, DataTableCellSelection, DataTableProps, DataTableRowData, DataTableSelectionCellChangeEvent } from 'primereact/datatable'; +import memoize from 'memoize-one'; import { Column } from 'primereact/column'; -import deepequal from 'fast-deep-equal'; +import { DataTable, DataTableCellSelection, DataTableProps, DataTableRowData, DataTableSelectionCellChangeEvent } from 'primereact/datatable'; import { ProgressSpinner } from 'primereact/progressspinner'; -import { Nullable } from 'primereact/ts-helpers'; +import React from 'react'; +import { TableRenderOptions } from '../columns/column-contribution-service'; +import { Decoration, Memory, MemoryDisplayConfiguration, ScrollingBehavior, isTrigger } from '../utils/view-types'; export interface MoreMemorySelectProps { count: number; @@ -116,17 +112,27 @@ interface MemoryRowData { } interface MemoryTableState { - memory?: Memory; - data: MemoryRowData[]; - selectedData: Nullable>; + selection: DataTableCellSelection | null; +} + +type MemorySizeOptions = Pick; +namespace MemorySizeOptions { + export function create(props: MemoryTableProps): MemorySizeOptions { + const { groupsPerRow, wordSize, wordsPerGroup }: MemorySizeOptions = props; + return { + wordSize, + groupsPerRow, + wordsPerGroup + }; + } } const itemHeightSingleGroupPerRow = 31; const heightGroupsPerRowGain = 14; -export class MemoryTable extends React.Component { +export class MemoryTable extends React.PureComponent { - protected datatableRef; + protected datatableRef = React.createRef>(); protected get isShowMoreEnabled(): boolean { return !!this.props.memory?.bytes.length; @@ -135,56 +141,47 @@ export class MemoryTable extends React.Component>(); this.initState(); } protected initState(): void { - const memory = this.props.memory; - const numRows = memory ? this.createMemoryRowListOptions(memory, this.props).numRows : 1; this.state = { - data: Array.from({ length: numRows }), - selectedData: null, + // eslint-disable-next-line no-null/no-null + selection: null, }; } - public componentDidUpdate(prevProps: Readonly): void { - this.onMemoryChange(this.props); - this.onOptionsChange(prevProps, this.props); - } - - /** - * Updates the internal `state.data` to the new memory changes. - */ - protected onMemoryChange(currentProps: Readonly): void { - const state = this.state; - const memory = currentProps.memory; - - if (!deepequal(memory, state.memory)) { - this.resetState(currentProps); + componentDidUpdate(prevProps: Readonly): void { + // Reset selection to new position + const selection = this.state.selection; + if (selection && (prevProps.memory?.address !== this.props.memory?.address || prevProps.offset !== this.props.offset)) { + // eslint-disable-next-line no-null/no-null + this.setState(prev => ({ ...prev, selection: null })); + + const cell = this.datatableRef.current?.getTable() + .querySelector( + `[${MemoryTable.DATA_START_ADDRESS_ATTRIBUTE}="${selection.rowData.startAddress}"][${MemoryTable.DATA_FIELD_ATTRIBUTE}="${selection.field}"]` + ) as HTMLElement | undefined; + cell?.click(); } } - /** - * Updates the internal `state.data` to respect the new options. - * - * **Details** - * - * Changes to the options restructures the whole datatable. We need to replace the old data with new the new memory. - */ - protected onOptionsChange(prevProps: Readonly, currentProps: Readonly): void { - if ((prevProps.wordsPerGroup !== currentProps.wordsPerGroup || prevProps.groupsPerRow !== currentProps.groupsPerRow)) { - this.resetState(currentProps); + public render(): React.ReactNode { + const memory = this.props.memory; + let rows: MemoryRowData[] = []; + + if (memory) { + const memorySizeOptions = MemorySizeOptions.create(this.props); + const options = this.createMemoryRowListOptions(memory, memorySizeOptions); + rows = this.createTableRows(memory, options); } - } - public render(): React.ReactNode { + const props = this.createDataTableProperties(rows); const columnWidth = 100 / (this.props.columnOptions.length); - const props = this.createDataTableProperties(); return (
- ref={this.datatableRef} {...props} > @@ -193,7 +190,13 @@ export class MemoryTable extends React.Component row && contribution.render(row, this.props.memory!, this.props)} + body={(row?: MemoryRowData) => row && +
+ {contribution.render(row, this.props.memory!, this.props)} +
} > {contribution.label} )} @@ -202,15 +205,13 @@ export class MemoryTable extends React.Component { + protected createDataTableProperties(rows: MemoryRowData[]): DataTableProps { return { - dataKey: 'startAddress', cellSelection: true, className: MemoryTable.TABLE_CLASS, footer: this.renderFooter(), header: this.renderHeader(), lazy: true, - loading: false, metaKeySelection: false, onSelectionChange: this.onSelectionChanged, rowClassName: this.rowClass, @@ -218,11 +219,11 @@ export class MemoryTable extends React.Component, + selection: this.state.selection, tableStyle: { minWidth: '30rem' }, - value: this.state.data, + value: rows, virtualScrollerOptions: { - items: this.state.data, + items: rows, itemSize: itemHeightSingleGroupPerRow + heightGroupsPerRowGain * (this.props.groupsPerRow - 1), }, }; @@ -230,7 +231,7 @@ export class MemoryTable extends React.Component) => { - this.setState(prev => ({ ...prev, selectedData: event.value })); + this.setState(prev => ({ ...prev, selection: event.value })); }; protected renderHeader(): React.ReactNode | undefined { @@ -306,23 +307,19 @@ export class MemoryTable extends React.Component { const rows: MemoryRowData[] = []; - for (let i = first; i < last && i < options.numRows; i++) { + for (let i = 0; i < options.numRows; i++) { const startAddress = memory.address + options.bigWordsPerRow * BigInt(i); rows.push(this.createMemoryRow(i, startAddress, options)); } return rows; - } + }); - protected createMemoryRowListOptions(memory: Memory, props: MemoryTableProps): MemoryRowListOptions { - const wordsPerRow = props.wordsPerGroup * props.groupsPerRow; - const numRows = Math.ceil((memory.bytes.length * 8) / (wordsPerRow * props.wordSize)); + protected createMemoryRowListOptions(memory: Memory, options: MemorySizeOptions): MemoryRowListOptions { + const wordsPerRow = options.wordsPerGroup * options.groupsPerRow; + const numRows = Math.ceil((memory.bytes.length * 8) / (wordsPerRow * options.wordSize)); const bigWordsPerRow = BigInt(wordsPerRow); return { @@ -330,7 +327,7 @@ export class MemoryTable extends React.Component(arr: T[], n: number): T[][] { - const size = Math.ceil(arr.length / n); - return Array.from({ length: n }, (_, i) => - arr.slice(i * size, i * size + size) - ); -} diff --git a/yarn.lock b/yarn.lock index 9c516f9..5bcc82b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2141,6 +2141,11 @@ mdurl@^1.0.1: resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e" integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g== +memoize-one@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045" + integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw== + merge-stream@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" From 061362605832ae6143be7489de856a35b40ed57e Mon Sep 17 00:00:00 2001 From: Haydar Metin Date: Thu, 1 Feb 2024 14:51:50 +0100 Subject: [PATCH 07/16] Undo selection movement --- src/webview/components/memory-table.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/webview/components/memory-table.tsx b/src/webview/components/memory-table.tsx index 6a04e8b..d344581 100644 --- a/src/webview/components/memory-table.tsx +++ b/src/webview/components/memory-table.tsx @@ -157,12 +157,6 @@ export class MemoryTable extends React.PureComponent ({ ...prev, selection: null })); - - const cell = this.datatableRef.current?.getTable() - .querySelector( - `[${MemoryTable.DATA_START_ADDRESS_ATTRIBUTE}="${selection.rowData.startAddress}"][${MemoryTable.DATA_FIELD_ATTRIBUTE}="${selection.field}"]` - ) as HTMLElement | undefined; - cell?.click(); } } From 6d2f3fed401c9e26c2448ff3bbeb38e1f10ffe0e Mon Sep 17 00:00:00 2001 From: Haydar Metin Date: Fri, 2 Feb 2024 08:53:36 +0100 Subject: [PATCH 08/16] Remove unused code and use deep equals for memoize --- src/webview/components/memory-table.tsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/webview/components/memory-table.tsx b/src/webview/components/memory-table.tsx index d344581..66ca59d 100644 --- a/src/webview/components/memory-table.tsx +++ b/src/webview/components/memory-table.tsx @@ -22,6 +22,7 @@ import { ProgressSpinner } from 'primereact/progressspinner'; import React from 'react'; import { TableRenderOptions } from '../columns/column-contribution-service'; import { Decoration, Memory, MemoryDisplayConfiguration, ScrollingBehavior, isTrigger } from '../utils/view-types'; +import isDeepEqual from 'fast-deep-equal'; export interface MoreMemorySelectProps { count: number; @@ -184,18 +185,11 @@ export class MemoryTable extends React.PureComponent row && -
- {contribution.render(row, this.props.memory!, this.props)} -
} - > + body={(row?: MemoryRowData) => row && contribution.render(row, this.props.memory!, this.props)}> {contribution.label} )} -
+
); } @@ -309,7 +303,7 @@ export class MemoryTable extends React.PureComponent Date: Fri, 2 Feb 2024 11:35:22 +0100 Subject: [PATCH 09/16] Reset scrolling to approximate last visible range after groups per row change --- src/webview/components/memory-table.tsx | 29 +++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/src/webview/components/memory-table.tsx b/src/webview/components/memory-table.tsx index 66ca59d..cd49b49 100644 --- a/src/webview/components/memory-table.tsx +++ b/src/webview/components/memory-table.tsx @@ -153,12 +153,38 @@ export class MemoryTable extends React.PureComponent): void { - // Reset selection to new position + // Reset selection const selection = this.state.selection; if (selection && (prevProps.memory?.address !== this.props.memory?.address || prevProps.offset !== this.props.offset)) { // eslint-disable-next-line no-null/no-null this.setState(prev => ({ ...prev, selection: null })); } + + // Groups per row has an influence to the scroll position due to the new height of the items + // We approximate the last visible range and move there + if (prevProps.groupsPerRow !== this.props.groupsPerRow) { + const table = this.datatableRef.current; + + if (table) { + table.resetScroll(); + const scroller = table.getVirtualScroller(); + + const diff = this.props.groupsPerRow - prevProps.groupsPerRow; + const range = scroller.getRenderedRange(); + + if (diff > 0) { + // More groups per row + const newIndex = range.first / (diff + 1); + scroller.scrollToIndex(Math.max(0, newIndex)); + } else if (diff < 0) { + // Less groups per row + const newIndex = range.first * Math.abs(diff); + scroller.scrollToIndex(Math.max(0, newIndex)); + } + + table.forceUpdate?.(); + } + } } public render(): React.ReactNode { @@ -211,7 +237,6 @@ export class MemoryTable extends React.PureComponent Date: Wed, 7 Feb 2024 16:17:19 +0100 Subject: [PATCH 10/16] Fit address column and remove virtual scrolling to allow dynamic column heights --- media/memory-table.css | 5 ++ media/theme/components/table.css | 7 +++ src/webview/columns/address-column.ts | 4 +- src/webview/columns/ascii-column.tsx | 20 ++------ src/webview/columns/data-column.tsx | 10 ++-- src/webview/components/memory-table.tsx | 66 +++++++++---------------- 6 files changed, 45 insertions(+), 67 deletions(-) diff --git a/media/memory-table.css b/media/memory-table.css index 17667d7..0ebb3a3 100644 --- a/media/memory-table.css +++ b/media/memory-table.css @@ -18,6 +18,11 @@ border-bottom: 2px solid var(--vscode-editor-lineHighlightBorder); } +.memory-inspector-table tr > th, +.memory-inspector-table tr > td { + min-width: 120px; +} + /* == MoreMemorySelect == */ .bytes-select { diff --git a/media/theme/components/table.css b/media/theme/components/table.css index 5ff1462..1df0b08 100644 --- a/media/theme/components/table.css +++ b/media/theme/components/table.css @@ -41,8 +41,15 @@ background: var(--vscode-settings-rowHoverBackground); } .p-datatable .p-datatable-tbody > tr > td { + vertical-align: top; text-align: left; padding: 0.25rem 1rem; + word-break: break-all; + overflow-wrap: anywhere; + white-space: unset; +} +.p-datatable .p-datatable-tbody > tr > td.fit { + width: 1%; } .p-datatable .p-datatable-tbody > tr > td.p-highlight { background: var(--vscode-editor-selectionHighlightBackground); diff --git a/src/webview/columns/address-column.ts b/src/webview/columns/address-column.ts index 6a2402d..2324216 100644 --- a/src/webview/columns/address-column.ts +++ b/src/webview/columns/address-column.ts @@ -19,8 +19,10 @@ import { BigIntMemoryRange, toHexStringWithRadixMarker } from '../../common/memo import { ColumnContribution } from './column-contribution-service'; export class AddressColumn implements ColumnContribution { + static ID = 'address'; + + readonly id = AddressColumn.ID; readonly label = 'Address'; - readonly id = 'address'; readonly priority = 0; render(range: BigIntMemoryRange): ReactNode { diff --git a/src/webview/columns/ascii-column.tsx b/src/webview/columns/ascii-column.tsx index c9a6a1c..b21c8b7 100644 --- a/src/webview/columns/ascii-column.tsx +++ b/src/webview/columns/ascii-column.tsx @@ -14,7 +14,6 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ -import * as React from 'react'; import { ReactNode } from 'react'; import { BigIntMemoryRange, toOffset } from '../../common/memory-range'; import { ColumnContribution, TableRenderOptions } from './column-contribution-service'; @@ -37,23 +36,10 @@ export class AsciiColumn implements ColumnContribution { render(range: BigIntMemoryRange, memory: Memory, options: TableRenderOptions): ReactNode { const startOffset = toOffset(memory.address, range.startAddress, options.wordSize); const endOffset = toOffset(memory.address, range.endAddress, options.wordSize); - - const bytesPerGroup = options.wordSize * options.wordsPerGroup / 8; - const groups = []; - let groupAscii = ''; + let result = ''; for (let i = startOffset; i < endOffset; i++) { - groupAscii += getASCIIForSingleByte(memory.bytes[i]); - if (i + 1 === endOffset || groupAscii.length === bytesPerGroup) { - // Could do (i - startOffset + 1) % bytesPerGroup === 0 if we want to be agnostic about the length ASCII for each byte. - groups.push({groupAscii}); - groupAscii = ''; - } + result += getASCIIForSingleByte(memory.bytes[i]); } - - return ( -
- {groups} -
- ); + return result; } } diff --git a/src/webview/columns/data-column.tsx b/src/webview/columns/data-column.tsx index 21d483f..974acdb 100644 --- a/src/webview/columns/data-column.tsx +++ b/src/webview/columns/data-column.tsx @@ -21,7 +21,9 @@ import { ColumnContribution, TableRenderOptions } from './column-contribution-se import { decorationService } from '../decorations/decoration-service'; export class DataColumn implements ColumnContribution { - readonly id = 'data'; + static ID = 'data'; + + readonly id = DataColumn.ID; readonly label = 'Data'; readonly priority = 1; @@ -40,11 +42,7 @@ export class DataColumn implements ColumnContribution { } } if (words.length) { groups.push({words}); } - return ( -
- {groups} -
- ); + return groups; } protected renderWord(memory: Memory, options: TableRenderOptions, currentAddress: bigint): React.ReactNode { diff --git a/src/webview/components/memory-table.tsx b/src/webview/components/memory-table.tsx index cd49b49..167d89f 100644 --- a/src/webview/components/memory-table.tsx +++ b/src/webview/components/memory-table.tsx @@ -23,6 +23,8 @@ import React from 'react'; import { TableRenderOptions } from '../columns/column-contribution-service'; import { Decoration, Memory, MemoryDisplayConfiguration, ScrollingBehavior, isTrigger } from '../utils/view-types'; import isDeepEqual from 'fast-deep-equal'; +import { AddressColumn } from '../columns/address-column'; +import { classNames } from 'primereact/utils'; export interface MoreMemorySelectProps { count: number; @@ -128,9 +130,6 @@ namespace MemorySizeOptions { } } -const itemHeightSingleGroupPerRow = 31; -const heightGroupsPerRowGain = 14; - export class MemoryTable extends React.PureComponent { protected datatableRef = React.createRef>(); @@ -153,38 +152,15 @@ export class MemoryTable extends React.PureComponent): void { + const hasMemoryChanged = prevProps.memory?.address !== this.props.memory?.address || prevProps.offset !== this.props.offset || prevProps.count !== this.props.count; + const hasOptionsChanged = prevProps.wordsPerGroup !== this.props.wordsPerGroup || prevProps.groupsPerRow !== this.props.groupsPerRow; + // Reset selection const selection = this.state.selection; - if (selection && (prevProps.memory?.address !== this.props.memory?.address || prevProps.offset !== this.props.offset)) { + if (selection && (hasMemoryChanged || hasOptionsChanged)) { // eslint-disable-next-line no-null/no-null this.setState(prev => ({ ...prev, selection: null })); } - - // Groups per row has an influence to the scroll position due to the new height of the items - // We approximate the last visible range and move there - if (prevProps.groupsPerRow !== this.props.groupsPerRow) { - const table = this.datatableRef.current; - - if (table) { - table.resetScroll(); - const scroller = table.getVirtualScroller(); - - const diff = this.props.groupsPerRow - prevProps.groupsPerRow; - const range = scroller.getRenderedRange(); - - if (diff > 0) { - // More groups per row - const newIndex = range.first / (diff + 1); - scroller.scrollToIndex(Math.max(0, newIndex)); - } else if (diff < 0) { - // Less groups per row - const newIndex = range.first * Math.abs(diff); - scroller.scrollToIndex(Math.max(0, newIndex)); - } - - table.forceUpdate?.(); - } - } } public render(): React.ReactNode { @@ -198,7 +174,8 @@ export class MemoryTable extends React.PureComponent @@ -206,14 +183,20 @@ export class MemoryTable extends React.PureComponent - {this.props.columnOptions.map(({ contribution }) => row && contribution.render(row, this.props.memory!, this.props)}> - {contribution.label} - )} + {this.props.columnOptions.map(({ contribution }) => { + const fit = contribution.id === AddressColumn.ID; + + return row && contribution.render(row, this.props.memory!, this.props)}> + {contribution.label} + ; + })}
); @@ -235,10 +218,7 @@ export class MemoryTable extends React.PureComponent Date: Thu, 8 Feb 2024 09:49:50 +0100 Subject: [PATCH 11/16] Align css to be more similar to the original version --- media/memory-table.css | 4 ++++ media/options-widget.css | 1 + media/root.css | 3 +++ media/theme/components/button.css | 4 +++- media/theme/components/checkbox.css | 8 ++++---- media/theme/components/input.css | 4 ++-- media/theme/components/overlay.css | 2 +- media/theme/components/table.css | 4 +++- media/theme/theme.css | 1 + src/webview/components/multi-select.tsx | 2 +- src/webview/components/options-widget.tsx | 2 +- 11 files changed, 24 insertions(+), 11 deletions(-) diff --git a/media/memory-table.css b/media/memory-table.css index 0ebb3a3..426699b 100644 --- a/media/memory-table.css +++ b/media/memory-table.css @@ -23,6 +23,10 @@ min-width: 120px; } +.memory-inspector-table tr > td { + font-family: var(--vscode-editor-font-family); +} + /* == MoreMemorySelect == */ .bytes-select { diff --git a/media/options-widget.css b/media/options-widget.css index a23a16f..303027b 100644 --- a/media/options-widget.css +++ b/media/options-widget.css @@ -72,4 +72,5 @@ .advanced-options-label { width: 100%; + font-weight: bold; } diff --git a/media/root.css b/media/root.css index 295c201..b099ad8 100644 --- a/media/root.css +++ b/media/root.css @@ -22,4 +22,7 @@ body { padding: 0; + font-family: var(--font-family); + font-size: var(--type-ramp-base-font-size); + line-height: var(--type-ramp-base-line-height); } diff --git a/media/theme/components/button.css b/media/theme/components/button.css index eb66bdb..4eb1e33 100644 --- a/media/theme/components/button.css +++ b/media/theme/components/button.css @@ -24,9 +24,11 @@ } .p-button { + font-family: inherit; color: var(--vscode-button-foreground); background: var(--vscode-button-background); - border: 1px solid var(--vscode-button-border); + border: 1px solid transparent; + border-radius: 2px; padding: var(--button-padding-vertical) var(--button-padding-horizontal); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; diff --git a/media/theme/components/checkbox.css b/media/theme/components/checkbox.css index b5a93ee..747c457 100644 --- a/media/theme/components/checkbox.css +++ b/media/theme/components/checkbox.css @@ -15,14 +15,14 @@ ********************************************************************************/ .p-checkbox { - width: 14px; - height: 14px; + width: 18px; + height: 18px; } .p-checkbox .p-checkbox-box { border: 1px solid var(--vscode-checkbox-border); background: var(--vscode-checkbox-background); - width: 14px; - height: 14px; + width: 18px; + height: 18px; color: var(--vscode-checkbox-foreground); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; diff --git a/media/theme/components/input.css b/media/theme/components/input.css index 9cf1467..907451b 100644 --- a/media/theme/components/input.css +++ b/media/theme/components/input.css @@ -20,13 +20,13 @@ } .p-inputtext { - font-family: var(--vscode-font-family); + font-family: inherit; line-height: var(--type-ramp-base-line-height); font-size: var(--type-ramp-base-font-size); color: var(--vscode-input-foreground); background: var(--vscode-input-background); padding: 0 11px; - border: 1px solid var(--vscode-input-border); + border: 1px solid var(--vscode-input-border, var(--vscode-dropdown-border)); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; diff --git a/media/theme/components/overlay.css b/media/theme/components/overlay.css index fdbdf51..02b76a0 100644 --- a/media/theme/components/overlay.css +++ b/media/theme/components/overlay.css @@ -15,7 +15,7 @@ ********************************************************************************/ .p-overlaypanel { - background: var(--vscode-editor-background); + background: var(--vscode-dropdown-background); color: var(--vscode-foreground); border: 0 none; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), diff --git a/media/theme/components/table.css b/media/theme/components/table.css index 1df0b08..593c37b 100644 --- a/media/theme/components/table.css +++ b/media/theme/components/table.css @@ -52,7 +52,9 @@ width: 1%; } .p-datatable .p-datatable-tbody > tr > td.p-highlight { - background: var(--vscode-editor-selectionHighlightBackground); + background: var(--vscode-list-activeSelectionBackground); + color: var(--vscode-list-activeSelectionForeground); + border: 1px solid var(--vscode-list-focusOutline); } .p-datatable.p-datatable-selectable .p-datatable-tbody diff --git a/media/theme/theme.css b/media/theme/theme.css index 9f54b24..c9dd50a 100644 --- a/media/theme/theme.css +++ b/media/theme/theme.css @@ -27,6 +27,7 @@ :root { --border-width: 1; --disabled-opacity: 0.4; + --font-family: system-ui, Ubuntu, "Droid Sans", sans-serif; --type-ramp-base-font-size: 13px; --type-ramp-base-line-height: normal; diff --git a/src/webview/components/multi-select.tsx b/src/webview/components/multi-select.tsx index 58e3a8c..579d7b9 100644 --- a/src/webview/components/multi-select.tsx +++ b/src/webview/components/multi-select.tsx @@ -39,7 +39,7 @@ const MultiSelectBar: React.FC = ({ items, onSelectionChanged, }, [onSelectionChanged]); return ( -
+
{items.map(({ label, id: itemId, checked }) => (
{ )} From 1a5fd98e06c0e36ee00238322f7baf05c1139685 Mon Sep 17 00:00:00 2001 From: Haydar Metin Date: Thu, 8 Feb 2024 10:12:17 +0100 Subject: [PATCH 12/16] Fix table paddings --- media/theme/components/table.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/media/theme/components/table.css b/media/theme/components/table.css index 593c37b..bd3565b 100644 --- a/media/theme/components/table.css +++ b/media/theme/components/table.css @@ -15,21 +15,21 @@ ********************************************************************************/ .p-datatable .p-datatable-header { - padding: 0.5rem 1rem; + padding: 0.5rem 12px; } .p-datatable .p-datatable-footer { - padding: 0.5rem 1rem; + padding: 0.5rem 12px; } .p-datatable .p-datatable-thead > tr > th { text-align: left; - padding: 1rem 1rem; + padding: 4px 12px; font-weight: 600; background: var(--vscode-editor-background); transition: box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; - padding: 1rem 1rem; + padding: 4px 12px; font-weight: 600; background: var(--vscode-editor-background); } @@ -43,7 +43,7 @@ .p-datatable .p-datatable-tbody > tr > td { vertical-align: top; text-align: left; - padding: 0.25rem 1rem; + padding: 4px 12px; word-break: break-all; overflow-wrap: anywhere; white-space: unset; @@ -54,7 +54,8 @@ .p-datatable .p-datatable-tbody > tr > td.p-highlight { background: var(--vscode-list-activeSelectionBackground); color: var(--vscode-list-activeSelectionForeground); - border: 1px solid var(--vscode-list-focusOutline); + outline: 1px solid var(--vscode-list-focusOutline); + outline-offset: -1px; } .p-datatable.p-datatable-selectable .p-datatable-tbody From ce8d5f68577d80c34e48b55b2b9e798105c9a416 Mon Sep 17 00:00:00 2001 From: Haydar Metin Date: Thu, 8 Feb 2024 10:15:22 +0100 Subject: [PATCH 13/16] Remove distance between options and table --- media/options-widget.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/media/options-widget.css b/media/options-widget.css index 303027b..c219524 100644 --- a/media/options-widget.css +++ b/media/options-widget.css @@ -14,11 +14,6 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ -.memory-options-widget { - margin-bottom: 8px; - padding-bottom: 4px; -} - .core-options { display: flex; flex-direction: row; From 5e81110e47ebd9c076af2f2d031e1c04a879446d Mon Sep 17 00:00:00 2001 From: Haydar Metin Date: Fri, 9 Feb 2024 10:18:46 +0100 Subject: [PATCH 14/16] Remove not used static variable --- src/webview/columns/data-column.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/webview/columns/data-column.tsx b/src/webview/columns/data-column.tsx index 974acdb..b8ba9f2 100644 --- a/src/webview/columns/data-column.tsx +++ b/src/webview/columns/data-column.tsx @@ -21,9 +21,7 @@ import { ColumnContribution, TableRenderOptions } from './column-contribution-se import { decorationService } from '../decorations/decoration-service'; export class DataColumn implements ColumnContribution { - static ID = 'data'; - - readonly id = DataColumn.ID; + readonly id = 'data'; readonly label = 'Data'; readonly priority = 1; From 9a89e38a833683a2648be634ba8318bfa2eba48b Mon Sep 17 00:00:00 2001 From: Haydar Metin Date: Fri, 9 Feb 2024 10:21:59 +0100 Subject: [PATCH 15/16] Revert changes to ascii-column --- src/webview/columns/{ascii-column.tsx => ascii-column.ts} | 1 - 1 file changed, 1 deletion(-) rename src/webview/columns/{ascii-column.tsx => ascii-column.ts} (99%) diff --git a/src/webview/columns/ascii-column.tsx b/src/webview/columns/ascii-column.ts similarity index 99% rename from src/webview/columns/ascii-column.tsx rename to src/webview/columns/ascii-column.ts index b21c8b7..319d45a 100644 --- a/src/webview/columns/ascii-column.tsx +++ b/src/webview/columns/ascii-column.ts @@ -32,7 +32,6 @@ export class AsciiColumn implements ColumnContribution { readonly id = 'ascii'; readonly label = 'ASCII'; readonly priority = 3; - render(range: BigIntMemoryRange, memory: Memory, options: TableRenderOptions): ReactNode { const startOffset = toOffset(memory.address, range.startAddress, options.wordSize); const endOffset = toOffset(memory.address, range.endAddress, options.wordSize); From 55f2b0a89fa61020cbb6f7f92db96e071b086122 Mon Sep 17 00:00:00 2001 From: Haydar Metin Date: Sat, 10 Feb 2024 00:41:44 +0100 Subject: [PATCH 16/16] Fix fitting --- media/memory-table.css | 4 ++-- media/theme/components/table.css | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/media/memory-table.css b/media/memory-table.css index 426699b..8634ff2 100644 --- a/media/memory-table.css +++ b/media/memory-table.css @@ -18,8 +18,8 @@ border-bottom: 2px solid var(--vscode-editor-lineHighlightBorder); } -.memory-inspector-table tr > th, -.memory-inspector-table tr > td { +.memory-inspector-table tr > th:not(.fit), +.memory-inspector-table tr > td:not(.fit) { min-width: 120px; } diff --git a/media/theme/components/table.css b/media/theme/components/table.css index bd3565b..45ea793 100644 --- a/media/theme/components/table.css +++ b/media/theme/components/table.css @@ -50,7 +50,13 @@ } .p-datatable .p-datatable-tbody > tr > td.fit { width: 1%; + word-wrap: break-word; + word-break: unset; } +.p-datatable .p-datatable-thead > tr > th.fit { + min-width: 80px; +} + .p-datatable .p-datatable-tbody > tr > td.p-highlight { background: var(--vscode-list-activeSelectionBackground); color: var(--vscode-list-activeSelectionForeground);