From 6965e83e1952e321b8da0156449b7a932a27101d Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Mon, 18 Dec 2023 12:25:39 +0300 Subject: [PATCH] Refactor UI classes and improve editing UX --- rsconcept/frontend/src/App.tsx | 5 +- .../frontend/src/components/Common/Button.tsx | 9 +- .../src/components/Common/Checkbox.tsx | 9 +- .../src/components/Common/ConceptLoader.tsx | 2 +- .../src/components/Common/ConceptSearch.tsx | 2 +- .../components/Common/DropdownCheckbox.tsx | 3 +- .../frontend/src/components/Common/Modal.tsx | 6 +- .../src/components/Common/SubmitButton.tsx | 8 +- .../src/components/Common/TextArea.tsx | 14 +-- .../src/components/Common/TextInput.tsx | 14 +-- .../src/components/Common/Tristate.tsx | 6 +- .../src/components/Common/commonInterfaces.ts | 7 +- .../src/components/DataTable/DataTable.tsx | 6 +- .../src/components/Navigation/Navigation.tsx | 2 +- .../src/components/RSInput/RSInput.tsx | 9 +- .../src/components/Shared/SelectGrammeme.tsx | 4 +- .../src/dialogs/DlgCloneLibraryItem.tsx | 2 +- .../ConstituentaTab.tsx | 24 +++-- .../DlgConstituentaTemplate.tsx | 55 +++++----- .../DlgConstituentaTemplate/TemplateTab.tsx | 6 +- .../frontend/src/dialogs/DlgCreateCst.tsx | 10 +- .../DlgEditReference/DlgEditReference.tsx | 58 +++++----- .../dialogs/DlgEditReference/EntityTab.tsx | 13 ++- .../DlgEditReference/SelectWordForm.tsx | 17 +-- .../dialogs/DlgEditReference/SyntacticTab.tsx | 2 +- .../DlgEditReference/WordformButton.tsx | 2 +- .../DlgEditWordForms/DlgEditWordForms.tsx | 59 +++++----- .../frontend/src/dialogs/DlgRenameCst.tsx | 8 +- rsconcept/frontend/src/dialogs/DlgShowAST.tsx | 4 +- .../frontend/src/dialogs/DlgUploadRSForm.tsx | 2 +- .../frontend/src/hooks/useCheckExpression.ts | 72 +++++++------ rsconcept/frontend/src/models/rslang.ts | 1 + .../frontend/src/pages/CreateRSFormPage.tsx | 6 +- rsconcept/frontend/src/pages/LoginPage.tsx | 3 +- .../EditorRSExpression/EditorRSExpression.tsx | 49 ++++++--- .../EditorRSExpression/ParsingResult.tsx | 2 +- .../EditorRSExpression/RSAnalyzer.tsx | 61 ----------- .../EditorRSExpression/RSEditControls.tsx | 79 ++++++-------- .../EditorRSExpression/RSLocalButton.tsx | 2 +- .../EditorRSExpression/RSTokenButton.tsx | 2 +- .../EditorRSExpression/StatusBar.tsx | 34 ++++-- .../RSFormPage/EditorRSForm/FormRSForm.tsx | 7 +- .../pages/RSFormPage/EditorRSList/RSTable.tsx | 2 +- .../RSFormPage/EditorTermGraph/TermGraph.tsx | 2 +- .../frontend/src/pages/RSFormPage/RSTabs.tsx | 101 ++++++++---------- .../src/pages/RSFormPage/RSTabsMenu.tsx | 8 +- rsconcept/frontend/src/pages/RegisterPage.tsx | 10 +- .../UserProfilePage/ViewSubscriptions.tsx | 2 +- rsconcept/frontend/src/utils/labels.ts | 2 + 49 files changed, 382 insertions(+), 431 deletions(-) delete mode 100644 rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSAnalyzer.tsx diff --git a/rsconcept/frontend/src/App.tsx b/rsconcept/frontend/src/App.tsx index 00349130..2883a9aa 100644 --- a/rsconcept/frontend/src/App.tsx +++ b/rsconcept/frontend/src/App.tsx @@ -33,7 +33,7 @@ function Root() {
- -
+
); diff --git a/rsconcept/frontend/src/components/Common/Button.tsx b/rsconcept/frontend/src/components/Common/Button.tsx index 945f69c0..0479c7b5 100644 --- a/rsconcept/frontend/src/components/Common/Button.tsx +++ b/rsconcept/frontend/src/components/Common/Button.tsx @@ -3,7 +3,7 @@ import clsx from 'clsx'; import { IColorsProps, IControlProps } from './commonInterfaces'; interface ButtonProps -extends IControlProps, IColorsProps, Omit, 'className' | 'children' | 'title'| 'type'> { +extends IControlProps, IColorsProps, Omit, 'children' | 'title'| 'type'> { text?: string icon?: React.ReactNode @@ -12,11 +12,10 @@ extends IControlProps, IColorsProps, Omit diff --git a/rsconcept/frontend/src/components/Common/Checkbox.tsx b/rsconcept/frontend/src/components/Common/Checkbox.tsx index 9646c26c..0395cabe 100644 --- a/rsconcept/frontend/src/components/Common/Checkbox.tsx +++ b/rsconcept/frontend/src/components/Common/Checkbox.tsx @@ -5,10 +5,9 @@ import { CheckboxCheckedIcon } from '../Icons'; import Label from './Label'; export interface CheckboxProps -extends Omit, 'className' | 'children' | 'title' | 'value' | 'onClick' > { +extends Omit, 'children' | 'title' | 'value' | 'onClick' > { label?: string disabled?: boolean - dimensions?: string tooltip?: string value: boolean @@ -17,7 +16,7 @@ extends Omit, 'className' | 'child function Checkbox({ id, disabled, tooltip, label, - dimensions = 'w-fit', value, setValue, ...restProps + className, value, setValue, ...restProps }: CheckboxProps) { const cursor = useMemo( () => { @@ -44,8 +43,8 @@ function Checkbox({ 'flex items-center gap-2', 'outline-none', 'text-start', - dimensions, - cursor + cursor, + className )} title={tooltip} disabled={disabled} diff --git a/rsconcept/frontend/src/components/Common/ConceptLoader.tsx b/rsconcept/frontend/src/components/Common/ConceptLoader.tsx index 9ad8b364..20c0337d 100644 --- a/rsconcept/frontend/src/components/Common/ConceptLoader.tsx +++ b/rsconcept/frontend/src/components/Common/ConceptLoader.tsx @@ -11,7 +11,7 @@ interface ConceptLoaderProps { export function ConceptLoader({size=10}: ConceptLoaderProps) { const {colors} = useConceptTheme(); return ( -
+
(onChange ? onChange(event.target.value) : undefined)} diff --git a/rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx b/rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx index c4d08c88..c62f605c 100644 --- a/rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx +++ b/rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx @@ -21,8 +21,7 @@ function DropdownCheckbox({ tooltip, setValue, disabled, ...restProps }: Dropdow !!setValue && !disabled && 'clr-hover' )} > -
@@ -92,14 +90,14 @@ function Modal({
diff --git a/rsconcept/frontend/src/components/Common/SubmitButton.tsx b/rsconcept/frontend/src/components/Common/SubmitButton.tsx index 729e7e4e..6af35512 100644 --- a/rsconcept/frontend/src/components/Common/SubmitButton.tsx +++ b/rsconcept/frontend/src/components/Common/SubmitButton.tsx @@ -6,12 +6,13 @@ extends Omit, 'children' | 'title' tooltip?: string loading?: boolean icon?: React.ReactNode - dimensions?: string } function SubmitButton({ - text = 'ОК', icon, disabled, tooltip, loading, className, - dimensions = 'w-fit h-fit', ...restProps + text = 'ОК', + icon, disabled, tooltip, loading, + className, + ...restProps }: SubmitButtonProps) { return (