mirror of
https://github.com/IRBorisov/ConceptPortal.git
synced 2025-06-26 04:50:36 +03:00
Small UI improvements
This commit is contained in:
parent
4f9f885160
commit
b5afb6e242
|
@ -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)'
|
||||
}}
|
||||
|
|
|
@ -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)}
|
||||
/>
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -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;
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue
Block a user