From 6aeccf077eac597eb57e156238bc0cbd59a5b523 Mon Sep 17 00:00:00 2001 From: Philip Langer Date: Mon, 10 Jun 2024 15:51:42 +0200 Subject: [PATCH 1/3] Improve Options Overlay Introduces an `Accordion` to make the overlay panel for the advanced options easier to work with. --- media/options-widget.css | 53 +++- src/webview/components/multi-select.tsx | 12 +- src/webview/components/options-widget.tsx | 356 ++++++++++++---------- 3 files changed, 253 insertions(+), 168 deletions(-) diff --git a/media/options-widget.css b/media/options-widget.css index b2e8c1f..a25544e 100644 --- a/media/options-widget.css +++ b/media/options-widget.css @@ -98,13 +98,51 @@ color: var(--vscode-descriptionForeground); } -.advanced-options-content { - color: var(--vscode-settings-headerForeground); +.advanced-options-panel .p-overlaypanel-content { + padding: 0.8rem; +} + +.advanced-options-panel .advanced-options-header { + font-size: 11px; + text-transform: uppercase; + line-height: 22px; + margin:0; + font-weight: normal; +} + +.advanced-options-accordion a:focus { + outline-color: var(--vscode-focusBorder); +} + +.advanced-options-accordion .p-accordion-tab { + width: 180px; } -.advanced-options-content h2 { - font-size: 110%; - margin: 1.2rem 0 0 0; +.advanced-options-accordion .p-accordion-header { + border-top: 1px solid var(--vscode-widget-border); + color: var(--vscode-sideBarSectionHeader-foreground); +} + +.advanced-options-accordion .p-accordion-header-link { + overflow: hidden; + text-overflow: ellipsis; + color: var(--vscode-sideBarSectionHeader-foreground); +} + +.advanced-options-accordion .p-accordion-header-text { + font-size: 11px; + text-transform: uppercase; + font-weight: bold; + line-height: 22px; +} + +.advanced-options-accordion .p-accordion-toggle-icon { + margin-right: 3px; +} + +.advanced-options-content { + color: var(--vscode-settings-headerForeground); + padding-bottom: 0.5rem; } .advanced-options-toggle { @@ -113,6 +151,10 @@ margin-top: 1.1rem } +.p-accordion-content .advanced-options-content { + padding-left: 0.5rem; +} + .advanced-options-content { width: 180px; text-align: left; @@ -143,6 +185,7 @@ overflow-y: scroll; max-height: 100%; margin-top: 0px; + width: 210px; } .advanced-options-panel::-webkit-scrollbar-track { background-color: var(--vscode-dropdown-listBackground); diff --git a/src/webview/components/multi-select.tsx b/src/webview/components/multi-select.tsx index d5be8d5..1723d87 100644 --- a/src/webview/components/multi-select.tsx +++ b/src/webview/components/multi-select.tsx @@ -25,12 +25,13 @@ export interface SingleSelectItemProps { interface MultiSelectProps { items: SingleSelectItemProps[]; - label: string; + label?: string; id?: string; + classNames?: string; onSelectionChanged: (labelSelected: string, newSelectionState: boolean) => unknown; } -const MultiSelectBar: React.FC = ({ items, onSelectionChanged, id }) => { +export const MultiSelectBar: React.FC = ({ items, onSelectionChanged, id }) => { const changeHandler: ((e: CheckboxChangeEvent) => unknown) = React.useCallback(e => { const target = e.target as HTMLInputElement; if (target) { @@ -54,10 +55,3 @@ const MultiSelectBar: React.FC = ({ items, onSelectionChanged, ); }; - -export const MultiSelectWithLabel: React.FC = ({ id, label, items, onSelectionChanged }) => ( -
-

{label}

- -
-); diff --git a/src/webview/components/options-widget.tsx b/src/webview/components/options-widget.tsx index 13ccd66..cf0c6ef 100644 --- a/src/webview/components/options-widget.tsx +++ b/src/webview/components/options-widget.tsx @@ -15,6 +15,7 @@ ********************************************************************************/ import { Formik, FormikConfig, FormikErrors, FormikProps } from 'formik'; +import { Accordion, AccordionTab, AccordionTabChangeEvent } from 'primereact/accordion'; import { Button } from 'primereact/button'; import { Checkbox } from 'primereact/checkbox'; import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown'; @@ -31,7 +32,7 @@ import { TableRenderOptions } from '../columns/column-contribution-service'; import { DEFAULT_MEMORY_DISPLAY_CONFIGURATION } from '../memory-webview-view'; import { AddressPaddingOptions, DEFAULT_READ_ARGUMENTS, MemoryState, SerializedTableRenderOptions } from '../utils/view-types'; import { createSectionVscodeContext } from '../utils/vscode-contexts'; -import { MultiSelectWithLabel } from './multi-select'; +import { MultiSelectBar } from './multi-select'; export interface OptionsWidgetProps extends Omit { @@ -53,6 +54,10 @@ export interface OptionsWidgetProps interface OptionsWidgetState { isTitleEditing: boolean; + showColumnsOptions: boolean; + showMemoryOptions: boolean; + showAddressOptions: boolean; + showRefreshOptions: boolean; } const enum InputId { @@ -85,6 +90,12 @@ export class OptionsWidget extends React.Component(); protected optionsMenuContext = createSectionVscodeContext('optionsWidget'); protected advancedOptionsContext = createSectionVscodeContext('advancedOptionsOverlay'); + protected advancedOptionsSections: { key: keyof OptionsWidgetState, index: number }[] = [ + { key: 'showColumnsOptions', index: 0 }, + { key: 'showMemoryOptions', index: 1 }, + { key: 'showAddressOptions', index: 2 }, + { key: 'showRefreshOptions', index: 3 } + ]; protected get optionsFormValues(): OptionsForm { return { @@ -103,7 +114,13 @@ export class OptionsWidget extends React.Component this.props.fetchMemory(this.props.configuredReadArguments), }; - this.state = { isTitleEditing: false }; + this.state = { + isTitleEditing: false, + showColumnsOptions: false, + showMemoryOptions: true, + showAddressOptions: false, + showRefreshOptions: true + }; } protected validate = (values: OptionsForm) => { @@ -286,7 +303,12 @@ export class OptionsWidget extends React.Component )} - + +

Advanced Options