Small UI improvements

This commit is contained in:
IRBorisov 2024-06-05 14:43:52 +03:00
parent 4f9f885160
commit b5afb6e242
7 changed files with 29 additions and 12 deletions

View File

@ -21,6 +21,7 @@ export interface ModalProps extends CProps.Styling {
readonly?: boolean; readonly?: boolean;
canSubmit?: boolean; canSubmit?: boolean;
overflowVisible?: boolean;
hideWindow: () => void; hideWindow: () => void;
onSubmit?: () => void; onSubmit?: () => void;
@ -39,6 +40,7 @@ function Modal({
submitInvalidTooltip, submitInvalidTooltip,
className, className,
children, children,
overflowVisible,
submitText = 'Продолжить', submitText = 'Продолжить',
...restProps ...restProps
}: ModalProps) { }: ModalProps) {
@ -86,6 +88,7 @@ function Modal({
<div <div
className={clsx('overflow-auto overscroll-contain', className)} className={clsx('overflow-auto overscroll-contain', className)}
style={{ style={{
overflow: overflowVisible ? 'visible' : 'auto',
maxHeight: 'calc(100vh - 8rem)', maxHeight: 'calc(100vh - 8rem)',
maxWidth: 'calc(100vw - 2rem)' maxWidth: 'calc(100vw - 2rem)'
}} }}

View File

@ -31,13 +31,14 @@ function DlgChangeLocation({ hideWindow, initial, onChangeLocation }: DlgChangeL
return ( return (
<Modal <Modal
overflowVisible
header='Изменение расположения' header='Изменение расположения'
submitText='Переместить' submitText='Переместить'
submitInvalidTooltip={`Допустимы буквы, цифры, подчерк, пробел и "!". Сегмент пути не может начинаться и заканчиваться пробелом. Общая длина (с корнем) не должна превышать ${limits.location_len}`} submitInvalidTooltip={`Допустимы буквы, цифры, подчерк, пробел и "!". Сегмент пути не может начинаться и заканчиваться пробелом. Общая длина (с корнем) не должна превышать ${limits.location_len}`}
hideWindow={hideWindow} hideWindow={hideWindow}
canSubmit={isValid} canSubmit={isValid}
onSubmit={handleSubmit} onSubmit={handleSubmit}
className={clsx('w-[35rem]', 'pb-12 px-6 flex gap-3')} className={clsx('w-[35rem]', 'pb-3 px-6 flex gap-3')}
> >
<div className='flex flex-col gap-2 w-[7rem] h-min'> <div className='flex flex-col gap-2 w-[7rem] h-min'>
<Label text='Корень' /> <Label text='Корень' />
@ -51,7 +52,7 @@ function DlgChangeLocation({ hideWindow, initial, onChangeLocation }: DlgChangeL
id='dlg_cst_body' id='dlg_cst_body'
label='Путь' label='Путь'
className='w-[23rem]' className='w-[23rem]'
rows={5} rows={3}
value={body} value={body}
onChange={event => setBody(event.target.value)} onChange={event => setBody(event.target.value)}
/> />

View File

@ -10,8 +10,8 @@ import { ILibraryFilter } from '@/models/miscellaneous';
import { storage } from '@/utils/constants'; import { storage } from '@/utils/constants';
import { toggleTristateFlag } from '@/utils/utils'; import { toggleTristateFlag } from '@/utils/utils';
import LibraryTable from './LibraryTable';
import SearchPanel from './SearchPanel'; import SearchPanel from './SearchPanel';
import ViewLibrary from './ViewLibrary';
function LibraryPage() { function LibraryPage() {
const library = useLibrary(); const library = useLibrary();
@ -63,7 +63,7 @@ function LibraryPage() {
const view = useMemo( const view = useMemo(
() => ( () => (
<ViewLibrary <LibraryTable
resetQuery={resetFilter} // prettier: split lines resetQuery={resetFilter} // prettier: split lines
items={items} items={items}
/> />

View File

@ -7,7 +7,7 @@ import { urls } from '@/app/urls';
import { IconFolder } from '@/components/Icons'; import { IconFolder } from '@/components/Icons';
import BadgeLocation from '@/components/info/BadgeLocation'; import BadgeLocation from '@/components/info/BadgeLocation';
import { CProps } from '@/components/props'; import { CProps } from '@/components/props';
import DataTable, { createColumnHelper, VisibilityState } from '@/components/ui/DataTable'; import DataTable, { createColumnHelper, IConditionalStyle, VisibilityState } from '@/components/ui/DataTable';
import FlexColumn from '@/components/ui/FlexColumn'; import FlexColumn from '@/components/ui/FlexColumn';
import TextURL from '@/components/ui/TextURL'; import TextURL from '@/components/ui/TextURL';
import { useConceptNavigation } from '@/context/NavigationContext'; import { useConceptNavigation } from '@/context/NavigationContext';
@ -18,18 +18,18 @@ import useWindowSize from '@/hooks/useWindowSize';
import { ILibraryItem, LibraryItemType } from '@/models/library'; import { ILibraryItem, LibraryItemType } from '@/models/library';
import { storage } from '@/utils/constants'; import { storage } from '@/utils/constants';
interface ViewLibraryProps { interface LibraryTableProps {
items: ILibraryItem[]; items: ILibraryItem[];
resetQuery: () => void; resetQuery: () => void;
} }
const columnHelper = createColumnHelper<ILibraryItem>(); const columnHelper = createColumnHelper<ILibraryItem>();
function ViewLibrary({ items, resetQuery }: ViewLibraryProps) { function LibraryTable({ items, resetQuery }: LibraryTableProps) {
const router = useConceptNavigation(); const router = useConceptNavigation();
const intl = useIntl(); const intl = useIntl();
const { getUserLabel } = useUsers(); const { getUserLabel } = useUsers();
const { calculateHeight } = useConceptOptions(); const { calculateHeight, colors } = useConceptOptions();
const [itemsPerPage, setItemsPerPage] = useLocalStorage<number>(storage.libraryPagination, 50); const [itemsPerPage, setItemsPerPage] = useLocalStorage<number>(storage.libraryPagination, 50);
function handleOpenItem(item: ILibraryItem, event: CProps.EventMouse) { function handleOpenItem(item: ILibraryItem, event: CProps.EventMouse) {
@ -121,6 +121,18 @@ function ViewLibrary({ items, resetQuery }: ViewLibraryProps) {
const tableHeight = useMemo(() => calculateHeight('2.2rem'), [calculateHeight]); const tableHeight = useMemo(() => calculateHeight('2.2rem'), [calculateHeight]);
const conditionalRowStyles = useMemo(
(): IConditionalStyle<ILibraryItem>[] => [
{
when: (item: ILibraryItem) => item.item_type === LibraryItemType.OSS,
style: {
backgroundColor: colors.bgGreen50
}
}
],
[colors]
);
return ( return (
<DataTable <DataTable
id='library_data' id='library_data'
@ -149,8 +161,9 @@ function ViewLibrary({ items, resetQuery }: ViewLibraryProps) {
paginationPerPage={itemsPerPage} paginationPerPage={itemsPerPage}
onChangePaginationOption={setItemsPerPage} onChangePaginationOption={setItemsPerPage}
paginationOptions={[10, 20, 30, 50, 100]} paginationOptions={[10, 20, 30, 50, 100]}
conditionalRowStyles={conditionalRowStyles}
/> />
); );
} }
export default ViewLibrary; export default LibraryTable;

View File

@ -154,7 +154,7 @@ function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
if (error.response.status === 404) { if (error.response.status === 404) {
return ( return (
<div className='p-2 text-center'> <div className='p-2 text-center'>
<p>{`Схема с указанным идентификатором отсутствует`}</p> <p>{`Операционная схема с указанным идентификатором отсутствует`}</p>
<div className='flex justify-center'> <div className='flex justify-center'>
<TextURL text='Библиотека' href='/library' /> <TextURL text='Библиотека' href='/library' />
</div> </div>

View File

@ -291,7 +291,7 @@ function ProcessError({
if (error.response.status === 404) { if (error.response.status === 404) {
return ( return (
<div className='p-2 text-center'> <div className='p-2 text-center'>
<p>{`Схема с указанным идентификатором ${isArchive ? 'и версией ' : ''}отсутствует`}</p> <p>{`Концептуальная схема с указанным идентификатором ${isArchive ? 'и версией ' : ''}отсутствует`}</p>
<div className='flex justify-center'> <div className='flex justify-center'>
<TextURL text='Библиотека' href='/library' /> <TextURL text='Библиотека' href='/library' />
{isArchive ? <Divider vertical margins='mx-3' /> : null} {isArchive ? <Divider vertical margins='mx-3' /> : null}

View File

@ -48,7 +48,7 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit
return ( return (
<motion.div <motion.div
className={clsx( className={clsx(
'border overflow-hidden', // prettier: split-lines 'border overflow-visible', // prettier: split-lines
{ {
'mt-[2.2rem] rounded-l-md rounded-r-none': !isBottom, // prettier: split-lines 'mt-[2.2rem] rounded-l-md rounded-r-none': !isBottom, // prettier: split-lines
'mt-3 mx-6 rounded-md md:w-[45.8rem]': isBottom 'mt-3 mx-6 rounded-md md:w-[45.8rem]': isBottom