ConceptProd/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor UI refactorings

Browse Source
This commit is contained in:
IRBorisov 2024-06-21 19:16:41 +03:00
parent 693cf5d391
commit e1d8c99ebf
18 changed files with 76 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
rsconcept/frontend/src/components/select/PickConstituenta.tsx
View File

@ -12,7 +12,7 @@ import { prefixes } from '@/utils/constants';
import { describeConstituenta } from '@/utils/labels';
import BadgeConstituenta from '../info/BadgeConstituenta';
import FlexColumn from '../ui/FlexColumn';
import NoData from '../ui/NoData';
interface PickConstituentaProps {
id?: string;
@ -106,10 +106,10 @@ function PickConstituenta({
columns={columns}
conditionalRowStyles={conditionalRowStyles}
noDataComponent={
<FlexColumn className='p-3 items-center min-h-[6rem]'>
<NoData className='min-h-[6rem]'>
<p>Список конституент пуст</p>
<p>Измените параметры фильтра</p>
</FlexColumn>
</NoData>
}
onRowClicked={onSelectValue}
/>

6
rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx
View File

@ -10,7 +10,7 @@ import { isBasicConcept } from '@/models/rsformAPI';
import { describeConstituenta } from '@/utils/labels';
import BadgeConstituenta from '../info/BadgeConstituenta';
import FlexColumn from '../ui/FlexColumn';
import NoData from '../ui/NoData';
import GraphSelectionToolbar from './GraphSelectionToolbar';
interface PickMultiConstituentaProps {
@ -103,9 +103,9 @@ function PickMultiConstituenta({ id, schema, prefixID, rows, selected, setSelect
rowSelection={rowSelection}
onRowSelectionChange={handleRowSelection}
noDataComponent={
<FlexColumn className='items-center p-3'>
<NoData>
<p>Список пуст</p>
</FlexColumn>
</NoData>
}
/>
</div>

2
rsconcept/frontend/src/components/select/PickSchema.tsx
View File

@ -104,7 +104,7 @@ function PickSchema({ id, initialFilter = '', rows = 4, value, onSelectValue }:
columns={columns}
conditionalRowStyles={conditionalRowStyles}
noDataComponent={
<FlexColumn className='p-3 items-center min-h-[6rem]'>
<FlexColumn className='dense p-3 items-center min-h-[6rem]'>
<p>Список схем пуст</p>
<p>Измените параметры фильтра</p>
</FlexColumn>

5
rsconcept/frontend/src/components/select/PickSubstitutions.tsx
View File

@ -23,6 +23,7 @@ import {
IconRemove,
IconReplace
} from '../Icons';
import NoData from '../ui/NoData';
interface PickSubstitutionsProps {
prefixID: string;
@ -259,10 +260,10 @@ function PickSubstitutions({
columns={columns}
headPosition='0'
noDataComponent={
<span className='p-2 text-center min-h-[2rem]'>
<NoData className='min-h-[2rem]'>
<p>Список пуст</p>
<p>Добавьте отождествление</p>
</span>
</NoData>
}
/>
</div>

2
rsconcept/frontend/src/components/select/SelectLocationHead.tsx
View File

@ -14,7 +14,7 @@ import DropdownButton from '../ui/DropdownButton';
interface SelectLocationHeadProps {
value: LocationHead;
onChange: (value: LocationHead) => void;
onChange: (newValue: LocationHead) => void;
excluded?: LocationHead[];
}

4
rsconcept/frontend/src/components/ui/FlexColumn.tsx
View File

@ -2,9 +2,7 @@ import clsx from 'clsx';
import { CProps } from '../props';
export interface FlexColumnProps extends CProps.Div {}
function FlexColumn({ className, children, ...restProps }: FlexColumnProps) {
function FlexColumn({ className, children, ...restProps }: CProps.Div) {
return (
<div className={clsx('cc-column', className)} {...restProps}>
{children}

13
rsconcept/frontend/src/components/ui/NoData.tsx Normal file
View File

@ -0,0 +1,13 @@
import clsx from 'clsx';
import { CProps } from '../props';
function NoData({ className, children, ...restProps }: CProps.Div) {
return (
<div className={clsx('p-3 flex flex-col items-center text-center select-none w-full', className)} {...restProps}>
{children}
</div>
);
}
export default NoData;

4
rsconcept/frontend/src/components/ui/TextURL.tsx
View File

@ -18,9 +18,9 @@ function TextURL({ text, href, title, color = 'clr-text-url', onClick }: TextURL
);
} else if (onClick) {
return (
<span tabIndex={-1} className={design} onClick={onClick}>
<button type='button' tabIndex={-1} className={design} onClick={onClick}>
{text}
</span>
</button>
);
} else {
return null;

3
rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
View File

@ -9,6 +9,7 @@ import RSInput from '@/components/RSInput';
import PickConstituenta from '@/components/select/PickConstituenta';
import DataTable, { IConditionalStyle } from '@/components/ui/DataTable';
import MiniButton from '@/components/ui/MiniButton';
import NoData from '@/components/ui/NoData';
import AnimateFade from '@/components/wrap/AnimateFade';
import { useConceptOptions } from '@/context/OptionsContext';
import { IConstituenta, IRSForm } from '@/models/rsform';
@ -160,7 +161,7 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
data={state.arguments}
columns={columns}
conditionalRowStyles={conditionalRowStyles}
noDataComponent={<p className={clsx('min-h-[3.6rem]', 'p-2', 'text-center')}>Аргументы отсутствуют</p>}
noDataComponent={<NoData className='min-h-[3.6rem]'>Аргументы отсутствуют</NoData>}
onRowClicked={handleSelectArgument}
/>

5
rsconcept/frontend/src/dialogs/DlgEditWordForms/WordFormsTable.tsx
View File

@ -7,6 +7,7 @@ import { IconRemove } from '@/components/Icons';
import BadgeWordForm from '@/components/info/BadgeWordForm';
import DataTable, { createColumnHelper } from '@/components/ui/DataTable';
import MiniButton from '@/components/ui/MiniButton';
import NoData from '@/components/ui/NoData';
import { IWordForm } from '@/models/language';
interface WordFormsTableProps {
@ -78,10 +79,10 @@ function WordFormsTable({ forms, setForms, onFormSelect }: WordFormsTableProps)
columns={columns}
headPosition='0'
noDataComponent={
<span className='p-2 text-center min-h-[2rem]'>
<NoData className='min-h-[2rem]'>
<p>Список пуст</p>
<p>Добавьте словоформу</p>
</span>
</NoData>
}
onRowClicked={onFormSelect}
/>

2
rsconcept/frontend/src/pages/LibraryPage/LibraryTable.tsx
View File

@ -164,7 +164,7 @@ function LibraryTable({ items, resetQuery, folderMode, toggleFolderMode }: Libra
className={clsx('text-xs sm:text-sm cc-scroll-y', { 'border-l border-b': folderMode })}
style={{ maxHeight: tableHeight }}
noDataComponent={
<FlexColumn className='p-3 items-center min-h-[6rem]'>
<FlexColumn className='dense p-3 items-center min-h-[6rem]'>
<p>Список схем пуст</p>
<p className='flex gap-6'>
<TextURL text='Создать схему' href='/library/create' />

2
rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
View File

@ -221,8 +221,8 @@ function FormConstituenta({
<button
key='cst_disable_comment'
id='cst_disable_comment'
tabIndex={-1}
type='button'
tabIndex={-1}
className='self-start cc-label clr-text-url hover:underline'
onClick={() => setForceComment(true)}
>

33
rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx
View File

@ -13,6 +13,7 @@ import useDropdown from '@/hooks/useDropdown';
import { ILibraryItemData, ILibraryItemEditor } from '@/models/library';
import { UserID, UserLevel } from '@/models/user';
import { prefixes } from '@/utils/constants';
import { prompts } from '@/utils/labels';
import LabeledValue from '../../../components/ui/LabeledValue';
@ -34,11 +35,7 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
if (newValue === item?.owner) {
return;
}
if (
!window.confirm(
'Вы уверены, что хотите изменить владельца? Вы потеряете право управления данной схемой. Данное действие отменить нельзя'
)
) {
if (!window.confirm(prompts.ownerChange)) {
return;
}
controller.setOwner(newValue);
@ -59,7 +56,11 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
/>
</Overlay>
) : null}
<LabeledValue className='max-w-[30rem] sm:mb-1 text-ellipsis' label='Путь' text={item?.location ?? ''} />
<LabeledValue
className='max-w-[30rem] sm:mb-1 text-ellipsis' //
label='Путь'
text={item?.location ?? ''}
/>
{accessLevel >= UserLevel.OWNER ? (
<Overlay position='top-[-0.5rem] left-[5.5rem] cc-icons'>
@ -82,7 +83,11 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
</div>
</Overlay>
) : null}
<LabeledValue className='sm:mb-1' label='Владелец' text={getUserLabel(item?.owner ?? null)} />
<LabeledValue
className='sm:mb-1' //
label='Владелец'
text={getUserLabel(item?.owner ?? null)}
/>
{accessLevel >= UserLevel.OWNER ? (
<Overlay position='top-[-0.5rem] left-[5.5rem] cc-icons'>
@ -97,12 +102,22 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
</div>
</Overlay>
) : null}
<LabeledValue id='editor_stats' className='sm:mb-1' label='Редакторы' text={item?.editors.length ?? 0} />
<LabeledValue
id='editor_stats' //
className='sm:mb-1'
label='Редакторы'
text={item?.editors.length ?? 0}
/>
<Tooltip anchorSelect='#editor_stats' layer='z-modalTooltip'>
<InfoUsers items={item?.editors ?? []} prefix={prefixes.user_editors} />
</Tooltip>
<LabeledValue id='sub_stats' className='sm:mb-1' label='Отслеживают' text={item?.subscribers.length ?? 0} />
<LabeledValue
id='sub_stats' //
className='sm:mb-1'
label='Отслеживают'
text={item?.subscribers.length ?? 0}
/>
<Tooltip anchorSelect='#sub_stats' layer='z-modalTooltip'>
<InfoUsers items={item?.subscribers ?? []} prefix={prefixes.user_subs} />
</Tooltip>

11
rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx
View File

@ -6,7 +6,8 @@ import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
import BadgeConstituenta from '@/components/info/BadgeConstituenta';
import { CProps } from '@/components/props';
import DataTable, { createColumnHelper, RowSelectionState, VisibilityState } from '@/components/ui/DataTable';
import FlexColumn from '@/components/ui/FlexColumn';
import NoData from '@/components/ui/NoData';
import TextURL from '@/components/ui/TextURL';
import { useConceptOptions } from '@/context/OptionsContext';
import useWindowSize from '@/hooks/useWindowSize';
import { ConstituentaID, IConstituenta } from '@/models/rsform';
@ -135,12 +136,12 @@ function RSTable({ items, maxHeight, enableSelection, selected, setSelected, onE
rowSelection={selected}
onRowSelectionChange={setSelected}
noDataComponent={
<FlexColumn className='items-center p-3'>
<NoData>
<p>Список пуст</p>
<p className='cursor-pointer clr-text-primary hover:underline' onClick={() => onCreateNew()}>
Создать новую конституенту
<p>
<TextURL text='Создать конституенту...' onClick={onCreateNew} />
</p>
</FlexColumn>
</NoData>
}
/>
);

7
rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
View File

@ -98,10 +98,11 @@ function ViewHidden({ items, selected, toggleSelection, setFocus, schema, colori
const id = `${prefixes.cst_hidden_list}${cst.alias}`;
return (
<div key={`wrap-${id}`}>
<div
<button
type='button'
key={id}
id={id}
className='min-w-[3rem] rounded-md text-center cursor-pointer select-none'
className='min-w-[3rem] rounded-md text-center select-none'
style={{
backgroundColor: colorBgGraphNode(cst, adjustedColoring, colors),
...(localSelected.includes(cstID) ? { outlineWidth: '2px', outlineStyle: 'solid' } : {})
@ -110,7 +111,7 @@ function ViewHidden({ items, selected, toggleSelection, setFocus, schema, colori
onDoubleClick={() => onEdit(cstID)}
>
{cst.alias}
</div>
</button>
<ConstituentaTooltip data={cst} anchor={`#${id}`} />
</div>
);

6
rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
View File

@ -1,10 +1,10 @@
'use client';
import clsx from 'clsx';
import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
import BadgeConstituenta from '@/components/info/BadgeConstituenta';
import DataTable, { createColumnHelper, IConditionalStyle, VisibilityState } from '@/components/ui/DataTable';
import NoData from '@/components/ui/NoData';
import { useConceptOptions } from '@/context/OptionsContext';
import useWindowSize from '@/hooks/useWindowSize';
import { ConstituentaID, IConstituenta } from '@/models/rsform';
@ -155,10 +155,10 @@ function ConstituentsTable({ items, activeCst, onOpenEdit, maxHeight, denseThres
columnVisibility={columnVisibility}
onColumnVisibilityChange={setColumnVisibility}
noDataComponent={
<div className={clsx('min-h-[5rem]', 'p-3', 'text-center', 'select-none')}>
<NoData className='min-h-[5rem]'>
<p>Список конституент пуст</p>
<p>Измените параметры фильтра</p>
</div>
</NoData>
}
onRowClicked={handleRowClicked}
/>

3
rsconcept/frontend/src/pages/UserProfilePage/ViewSubscriptions.tsx
View File

@ -6,6 +6,7 @@ import { useIntl } from 'react-intl';
import { urls } from '@/app/urls';
import DataTable, { createColumnHelper } from '@/components/ui/DataTable';
import NoData from '@/components/ui/NoData';
import { useConceptNavigation } from '@/context/NavigationContext';
import { ILibraryItem } from '@/models/library';
import { animateSideView } from '@/styling/animations';
@ -74,7 +75,7 @@ function ViewSubscriptions({ items }: ViewSubscriptionsProps) {
id: 'time_update',
desc: true
}}
noDataComponent={<div className='h-[10rem]'>Отслеживаемые схемы отсутствуют</div>}
noDataComponent={<NoData className='h-[10rem]'>Отслеживаемые схемы отсутствуют</NoData>}
onRowClicked={openRSForm}
/>
</motion.div>

4
rsconcept/frontend/src/utils/labels.ts
View File

@ -942,7 +942,9 @@ export const prompts = {
promptUnsaved: 'Присутствуют несохраненные изменения. Продолжить без их учета?',
deleteLibraryItem: 'Вы уверены, что хотите удалить данную схему?',
generateWordforms: 'Данное действие приведет к перезаписи словоформ при совпадении граммем. Продолжить?',
restoreArchive: 'При восстановлении архивной версии актуальная схему будет заменена. Продолжить?'
restoreArchive: 'При восстановлении архивной версии актуальная схему будет заменена. Продолжить?',
ownerChange:
'Вы уверены, что хотите изменить владельца? Вы потеряете право управления данной схемой. Данное действие отменить нельзя'
};
// ============== INTERNAL LABELS FOR DEVELOPERS TEXT ================