From 41bb83b784cf33985709ecc781da44129a71faeb Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Sat, 30 Sep 2023 12:47:27 +0300 Subject: [PATCH] Minor UI fixes --- .../src/components/Common/TextInput.tsx | 4 +- .../src/components/DataTable/index.tsx | 22 ++- .../src/components/Help/HelpConstituenta.tsx | 2 +- .../components/RefsInput/DlgEditReference.tsx | 32 ++-- rsconcept/frontend/src/index.css | 4 + .../src/pages/LibraryPage/SearchPanel.tsx | 2 +- .../src/pages/LibraryPage/ViewLibrary.tsx | 5 +- .../src/pages/RSFormPage/DlgEditWordForms.tsx | 141 ++++++++++-------- .../src/pages/RSFormPage/EditorItems.tsx | 3 +- .../elements/ViewSideConstituents.tsx | 1 + .../UserProfilePage/ViewSubscriptions.tsx | 5 +- rsconcept/frontend/src/utils/codemirror.ts | 2 +- rsconcept/frontend/src/utils/constants.ts | 1 + rsconcept/frontend/src/utils/labels.ts | 2 +- 14 files changed, 132 insertions(+), 94 deletions(-) diff --git a/rsconcept/frontend/src/components/Common/TextInput.tsx b/rsconcept/frontend/src/components/Common/TextInput.tsx index 8af9eab2..3522570d 100644 --- a/rsconcept/frontend/src/components/Common/TextInput.tsx +++ b/rsconcept/frontend/src/components/Common/TextInput.tsx @@ -17,7 +17,7 @@ function TextInput({ colorClass = 'clr-input', ...props }: TextInputProps) { - const borderClass = noBorder ? '': 'border'; + const borderClass = noBorder ? '': 'border shadow'; return (
{label && @@ -28,7 +28,7 @@ function TextInput({ />} diff --git a/rsconcept/frontend/src/components/DataTable/index.tsx b/rsconcept/frontend/src/components/DataTable/index.tsx index ceb4ca4a..7aed92e0 100644 --- a/rsconcept/frontend/src/components/DataTable/index.tsx +++ b/rsconcept/frontend/src/components/DataTable/index.tsx @@ -26,6 +26,7 @@ extends Pick, 'onRowSelectionChange' | 'onColumnVisibilityChange' > { dense?: boolean + headPosition?: string conditionalRowStyles?: IConditionalStyle[] onRowClicked?: (rowData: TData, event: React.MouseEvent) => void onRowDoubleClicked?: (rowData: TData, event: React.MouseEvent) => void @@ -46,8 +47,14 @@ extends Pick, initialSorting?: ColumnSort } +/** + * UI element: data representation as a table. + * + * @param headPosition - Top position of sticky header (0 if no other sticky elements are present). + * No sticky header if omitted +*/ export default function DataTable({ - dense, conditionalRowStyles, + dense, headPosition, conditionalRowStyles, onRowClicked, onRowDoubleClicked, noDataComponent, enableRowSelection, @@ -106,7 +113,13 @@ export default function DataTable({ {!isEmpty && - + {tableImpl.getHeaderGroups().map( (headerGroup: HeaderGroup) => ( @@ -122,7 +135,7 @@ export default function DataTable({ style={{ textAlign: header.getSize() > 100 ? 'left': 'center', width: header.getSize(), - cursor: enableSorting && header.column.getCanSort() ? 'pointer': 'auto' + cursor: enableSorting && header.column.getCanSort() ? 'pointer': 'auto', }} onClick={enableSorting ? header.column.getToggleSortingHandler() : undefined} > @@ -144,8 +157,7 @@ export default function DataTable({ key={row.id} className={ row.getIsSelected() ? 'clr-selected clr-hover' : - index % 2 === 0 ? 'clr-controls clr-hover' : - 'clr-app clr-hover' + index % 2 === 0 ? 'clr-controls clr-hover' : 'clr-app clr-hover' } style={conditionalRowStyles && getRowStyles(row)} > diff --git a/rsconcept/frontend/src/components/Help/HelpConstituenta.tsx b/rsconcept/frontend/src/components/Help/HelpConstituenta.tsx index f121beb8..4b11059d 100644 --- a/rsconcept/frontend/src/components/Help/HelpConstituenta.tsx +++ b/rsconcept/frontend/src/components/Help/HelpConstituenta.tsx @@ -7,7 +7,7 @@ function HelpConstituenta() {

Подсказки

Изменения сохраняются ПОСЛЕ нажатия на кнопку снизу или справа вверху

Клик на формальное выражение - обратите внимание на кнопки снизу
Горячие клавиши указаны в подсказках при наведении

-

Поля Термин и Определение - Ctrl+Пробел открывает диалог редактирования отсылок
Перед открытием диалога переместите текстовый курсор на заменяемое слово или ссылку

+

Поля Термин и Определение - Ctrl + Пробел открывает диалог редактирования отсылок
Перед открытием диалога переместите текстовый курсор на заменяемое слово или ссылку

Список конституент справа - обратите внимание на настройки фильтрации

- слева от ввода текста настраивается набор атрибутов конституенты

- справа от ввода текста настраивается список конституент, которые фильтруются

diff --git a/rsconcept/frontend/src/components/RefsInput/DlgEditReference.tsx b/rsconcept/frontend/src/components/RefsInput/DlgEditReference.tsx index 1875a597..4ddd8fff 100644 --- a/rsconcept/frontend/src/components/RefsInput/DlgEditReference.tsx +++ b/rsconcept/frontend/src/components/RefsInput/DlgEditReference.tsx @@ -174,7 +174,7 @@ function DlgEditReference({ hideWindow, items, initialRef, initialText, initialT const cst = props.row.original; return (<>
{cst.alias}
- + ); } }), @@ -217,7 +217,7 @@ function DlgEditReference({ hideWindow, items, initialRef, initialText, initialT onSubmit={handleSubmit} >
-
+
@@ -269,6 +269,8 @@ function DlgEditReference({ hideWindow, items, initialRef, initialText, initialT data={filteredData} columns={columnsConstituenta} conditionalRowStyles={conditionalRowStyles} + + headPosition='0' dense noDataComponent={ @@ -289,15 +291,19 @@ function DlgEditReference({ hideWindow, items, initialRef, initialText, initialT value={alias} onChange={event => setAlias(event.target.value)} /> - +
+
+ Термин: +
+ +
{FormButtons}
diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css index 421b1564..ffd36bee 100644 --- a/rsconcept/frontend/src/index.css +++ b/rsconcept/frontend/src/index.css @@ -122,6 +122,10 @@ .border { @apply rounded } + + .shadow-border { + @apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)] + } .clr-modal-backdrop { opacity: 0.75; diff --git a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx index 269f568e..66d646b5 100644 --- a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx +++ b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx @@ -69,7 +69,7 @@ function SearchPanel({ total, filtered, query, setQuery, strategy, setStrategy, }, [strategy, navigateTo]); return ( -
+
Фильтр diff --git a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx index 4f79f5a3..e4c9df90 100644 --- a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx +++ b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx @@ -96,9 +96,9 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) { return (
{items.length > 0 && -
+
-
+
@@ -112,6 +112,7 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) { columns={columns} data={items} + headPosition='2.3rem' noDataComponent={

Список схем пуст

diff --git a/rsconcept/frontend/src/pages/RSFormPage/DlgEditWordForms.tsx b/rsconcept/frontend/src/pages/RSFormPage/DlgEditWordForms.tsx index 98ae88c6..59b25db3 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/DlgEditWordForms.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/DlgEditWordForms.tsx @@ -1,7 +1,6 @@ import { useEffect, useLayoutEffect, useMemo, useState } from 'react'; import ConceptTooltip from '../../components/Common/ConceptTooltip'; -import Divider from '../../components/Common/Divider'; import MiniButton from '../../components/Common/MiniButton'; import Modal from '../../components/Common/Modal'; import SelectMulti from '../../components/Common/SelectMulti'; @@ -107,9 +106,8 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps) setInputGrams(SelectorGrammems.filter(gram => form.grams.find(test => test === gram.value))); } - function handleResetForm() { - setInputText(''); - setInputGrams([]); + function handleResetAll() { + setForms([]); } function handleInflect() { @@ -199,12 +197,12 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps) maxSize: 50, cell: props =>
- } - noHover - onClick={() => handleDeleteRow(props.row.index)} - /> + } + noHover + onClick={() => handleDeleteRow(props.row.index)} + />
}) ], [colors]); @@ -232,7 +230,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
-
+