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

View File

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

View File

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

View File

@ -7,7 +7,7 @@ import { urls } from '@/app/urls';
import { IconFolder } from '@/components/Icons';
import BadgeLocation from '@/components/info/BadgeLocation';
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 TextURL from '@/components/ui/TextURL';
import { useConceptNavigation } from '@/context/NavigationContext';
@ -18,18 +18,18 @@ import useWindowSize from '@/hooks/useWindowSize';
import { ILibraryItem, LibraryItemType } from '@/models/library';
import { storage } from '@/utils/constants';
interface ViewLibraryProps {
interface LibraryTableProps {
items: ILibraryItem[];
resetQuery: () => void;
}
const columnHelper = createColumnHelper<ILibraryItem>();
function ViewLibrary({ items, resetQuery }: ViewLibraryProps) {
function LibraryTable({ items, resetQuery }: LibraryTableProps) {
const router = useConceptNavigation();
const intl = useIntl();
const { getUserLabel } = useUsers();
const { calculateHeight } = useConceptOptions();
const { calculateHeight, colors } = useConceptOptions();
const [itemsPerPage, setItemsPerPage] = useLocalStorage<number>(storage.libraryPagination, 50);
function handleOpenItem(item: ILibraryItem, event: CProps.EventMouse) {
@ -121,6 +121,18 @@ function ViewLibrary({ items, resetQuery }: ViewLibraryProps) {
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 (
<DataTable
id='library_data'
@ -149,8 +161,9 @@ function ViewLibrary({ items, resetQuery }: ViewLibraryProps) {
paginationPerPage={itemsPerPage}
onChangePaginationOption={setItemsPerPage}
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) {
return (
<div className='p-2 text-center'>
<p>{`Схема с указанным идентификатором отсутствует`}</p>
<p>{`Операционная схема с указанным идентификатором отсутствует`}</p>
<div className='flex justify-center'>
<TextURL text='Библиотека' href='/library' />
</div>

View File

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

View File

@ -48,7 +48,7 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit
return (
<motion.div
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-3 mx-6 rounded-md md:w-[45.8rem]': isBottom