ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-26 13:00:39 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

classnames refactoring + small ui fixes

Browse Source
This commit is contained in:
IRBorisov 2024-03-19 19:19:08 +03:00
parent f8364d1a06
commit bcbe35b436
25 changed files with 42 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
rsconcept/frontend/src/components/ui/Checkbox.tsx
View File

@ -76,7 +76,7 @@ function Checkbox({
</div>
) : null}
</div>
{label ? <span className={clsx('text-start text-sm whitespace-nowrap', cursor)}>{label}</span> : null}
{label ? <span className={clsx('text-start text-sm whitespace-nowrap select-text', cursor)}>{label}</span> : null}
</button>
);
}

2
rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
View File

@ -84,7 +84,7 @@ function CheckboxTristate({
</div>
) : null}
</div>
{label ? <span className={clsx('text-start text-sm whitespace-nowrap', cursor)}>{label}</span> : null}
{label ? <span className={clsx('text-start text-sm whitespace-nowrap select-text', cursor)}>{label}</span> : null}
</button>
);
}

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

@ -1,14 +1,12 @@
import clsx from 'clsx';
import { classnames } from '@/utils/constants';
import { CProps } from '../props';
export interface FlexColumnProps extends CProps.Div {}
function FlexColumn({ className, children, ...restProps }: FlexColumnProps) {
return (
<div className={clsx(classnames.flex_col, className)} {...restProps}>
<div className={clsx('cc-column', className)} {...restProps}>
{children}
</div>
);

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

@ -12,13 +12,13 @@ function Label({ text, className, ...restProps }: LabelProps) {
}
if (restProps.htmlFor) {
return (
<label className={clsx('text-sm font-medium whitespace-nowrap', className)} {...restProps}>
<label className={clsx('cc-label', className)} {...restProps}>
{text}
</label>
);
} else {
return (
<span className={clsx('text-sm font-medium whitespace-nowrap', className)} {...restProps}>
<span className={clsx('cc-label', className)} {...restProps}>
{text}
</span>
);

3
rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx
View File

@ -13,7 +13,6 @@ import { useConceptNavigation } from '@/context/NavigationContext';
import { ILibraryItem } from '@/models/library';
import { cloneTitle } from '@/models/libraryAPI';
import { IRSFormCreateData } from '@/models/rsform';
import { classnames } from '@/utils/constants';
interface DlgCloneLibraryItemProps extends Pick<ModalProps, 'hideWindow'> {
base: ILibraryItem;
@ -63,7 +62,7 @@ function DlgCloneLibraryItem({ hideWindow, base }: DlgCloneLibraryItemProps) {
canSubmit={canSubmit}
submitText='Создать'
onSubmit={handleSubmit}
className={clsx('px-6 py-2', classnames.flex_col)}
className={clsx('px-6 py-2', 'cc-column')}
>
<TextInput
id='dlg_full_name'

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

@ -13,7 +13,6 @@ import { HelpTopic } from '@/models/miscellaneous';
import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
import { generateAlias, validateNewAlias } from '@/models/rsformAPI';
import { inferTemplatedType, substituteTemplateArgs } from '@/models/rslangAPI';
import { classnames } from '@/utils/constants';
import ArgumentsTab, { IArgumentsState } from './ArgumentsTab';
import ConstituentaTab from './ConstituentaTab';
@ -138,7 +137,7 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
<ArgumentsTab schema={schema} state={substitutes} partialUpdate={updateSubstitutes} />
</TabPanel>
<TabPanel className={classnames.flex_col} style={{ display: activeTab === TabID.CONSTITUENTA ? '' : 'none' }}>
<TabPanel className='cc-column' style={{ display: activeTab === TabID.CONSTITUENTA ? '' : 'none' }}>
<ConstituentaTab state={constituenta} partialUpdate={updateConstituenta} />
</TabPanel>
</Tabs>

3
rsconcept/frontend/src/dialogs/DlgCreateCst.tsx
View File

@ -11,7 +11,6 @@ import TextInput from '@/components/ui/TextInput';
import usePartialUpdate from '@/hooks/usePartialUpdate';
import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
import { generateAlias, validateNewAlias } from '@/models/rsformAPI';
import { classnames } from '@/utils/constants';
import { labelCstType } from '@/utils/labels';
import { SelectorCstType } from '@/utils/selectors';
@ -53,7 +52,7 @@ function DlgCreateCst({ hideWindow, initial, schema, onCreate }: DlgCreateCstPro
canSubmit={validated}
onSubmit={handleSubmit}
submitText='Создать'
className={clsx('w-[35rem]', 'py-2 px-6', classnames.flex_col)}
className={clsx('cc-column', 'w-[35rem]', 'py-2 px-6')}
>
<div className='flex self-center gap-6'>
<SelectSingle

3
rsconcept/frontend/src/dialogs/DlgCreateVersion.tsx
View File

@ -8,7 +8,6 @@ import TextArea from '@/components/ui/TextArea';
import TextInput from '@/components/ui/TextInput';
import { IVersionData, IVersionInfo } from '@/models/library';
import { nextVersion } from '@/models/libraryAPI';
import { classnames } from '@/utils/constants';
interface DlgCreateVersionProps extends Pick<ModalProps, 'hideWindow'> {
versions: IVersionInfo[];
@ -38,7 +37,7 @@ function DlgCreateVersion({ hideWindow, versions, onCreate }: DlgCreateVersionPr
canSubmit={canSubmit}
onSubmit={handleSubmit}
submitText='Создать'
className={clsx('w-[30rem]', 'py-2 px-6', classnames.flex_col)}
className={clsx('cc-column', 'w-[30rem]', 'py-2 px-6')}
>
<TextInput
id='dlg_version'

4
rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx
View File

@ -6,7 +6,7 @@ import { useMemo, useState } from 'react';
import Checkbox from '@/components/ui/Checkbox';
import Modal, { ModalProps } from '@/components/ui/Modal';
import { IRSForm } from '@/models/rsform';
import { classnames, prefixes } from '@/utils/constants';
import { prefixes } from '@/utils/constants';
import ConstituentsList from './ConstituentsList';
@ -36,7 +36,7 @@ function DlgDeleteCst({ hideWindow, selected, schema, onDelete }: DlgDeleteCstPr
submitText={expandOut ? 'Удалить с зависимыми' : 'Удалить'}
hideWindow={hideWindow}
onSubmit={handleSubmit}
className={clsx('max-w-[60vw] min-w-[30rem]', 'px-6', classnames.flex_col)}
className={clsx('cc-column', 'max-w-[60vw] min-w-[30rem]', 'px-6')}
>
<ConstituentsList
title='Выбраны к удалению'

8
rsconcept/frontend/src/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx
View File

@ -53,7 +53,7 @@ function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInli
<Modal
header='Импорт концептуальной схем'
submitText='Добавить конституенты'
className='w-[35rem] h-[30rem] px-6'
className='w-[40rem] h-[40rem] px-6'
hideWindow={hideWindow}
canSubmit={validated}
onSubmit={handleSubmit}
@ -66,9 +66,9 @@ function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInli
onSelect={setActiveTab}
>
<TabList className={clsx('mb-3 self-center', 'flex', 'border divide-x rounded-none')}>
<TabLabel label='Схема' title='Выбор импортируемой схемы' className='w-[8rem]' />
<TabLabel label='Содержание' title='Выбор переносимого содержания' className='w-[8rem]' />
<TabLabel label='Отождествления' title='Отождествление добавляемый конституент' className='w-[8rem]' />
<TabLabel label='Схема' title='Источник конституент' className='w-[8rem]' />
<TabLabel label='Содержание' title='Перечень конституент' className='w-[8rem]' />
<TabLabel label='Отождествления' title='Таблица отождествлений' className='w-[8rem]' />
</TabList>
<TabPanel style={{ display: activeTab === TabID.SCHEMA ? '' : 'none' }}>

2
rsconcept/frontend/src/dialogs/DlgInlineSynthesis/SchemaTab.tsx
View File

@ -28,7 +28,7 @@ function SchemaTab({ selected, setSelected }: SchemaTabProps) {
disabled
dense
/>
<SchemaPicker rows={6} value={selected} onSelectValue={setSelected} />
<SchemaPicker rows={16} value={selected} onSelectValue={setSelected} />
</FlexColumn>
);
}

4
rsconcept/frontend/src/pages/CreateRSFormPage.tsx
View File

@ -20,7 +20,7 @@ import { useLibrary } from '@/context/LibraryContext';
import { useConceptNavigation } from '@/context/NavigationContext';
import { LibraryItemType } from '@/models/library';
import { IRSFormCreateData } from '@/models/rsform';
import { classnames, EXTEOR_TRS_FILE, limits, patterns } from '@/utils/constants';
import { EXTEOR_TRS_FILE, limits, patterns } from '@/utils/constants';
function CreateRSFormPage() {
const router = useConceptNavigation();
@ -81,7 +81,7 @@ function CreateRSFormPage() {
return (
<AnimateFade>
<RequireAuth>
<form className={clsx('px-6 py-3', classnames.flex_col)} onSubmit={handleSubmit}>
<form className={clsx('cc-column', 'px-6 py-3')} onSubmit={handleSubmit}>
<h1>Создание концептуальной схемы</h1>
<Overlay position='top-[-2.4rem] right-[-1rem]'>
<input

4
rsconcept/frontend/src/pages/LoginPage.tsx
View File

@ -14,7 +14,7 @@ import { useAuth } from '@/context/AuthContext';
import { useConceptNavigation } from '@/context/NavigationContext';
import useQueryStrings from '@/hooks/useQueryStrings';
import { IUserLoginData } from '@/models/library';
import { classnames, resources } from '@/utils/constants';
import { resources } from '@/utils/constants';
function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
@ -64,7 +64,7 @@ function LoginPage() {
}
return (
<AnimateFade>
<form className={clsx('w-[24rem]', 'pt-12 pb-6 px-6', classnames.flex_col)} onSubmit={handleSubmit}>
<form className={clsx('cc-column', 'w-[24rem]', 'pt-12 pb-6 px-6')} onSubmit={handleSubmit}>
<img alt='Концепт Портал' src={resources.logo} className='max-h-[2.5rem] min-w-[2.5rem] mb-3' />
<TextInput
id='username'

3
rsconcept/frontend/src/pages/PasswordChangePage.tsx
View File

@ -12,7 +12,6 @@ import { useAuth } from '@/context/AuthContext';
import { useConceptNavigation } from '@/context/NavigationContext';
import useQueryStrings from '@/hooks/useQueryStrings';
import { IPasswordTokenData, IResetPasswordData } from '@/models/library';
import { classnames } from '@/utils/constants';
function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
if (axios.isAxiosError(error) && error.response && error.response.status === 404) {
@ -78,7 +77,7 @@ function PasswordChangePage() {
isLoading={loading}
hasNoData={!isTokenValid}
>
<form className={clsx('w-[24rem]', 'px-6 mt-3', classnames.flex_col)} onSubmit={handleSubmit}>
<form className={clsx('cc-column', 'w-[24rem]', 'px-6 mt-3')} onSubmit={handleSubmit}>
<TextInput
id='new_password'
type='password'

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

@ -55,7 +55,7 @@ function ConstituentaToolbar({
icon={<BiPlusCircle size={'1.25rem'} className='icon-green' />}
/>
<MiniButton
titleHtml={prepareTooltip('Клонировать конституенту', 'Alt + V]')}
titleHtml={prepareTooltip('Клонировать конституенту', 'Alt + V')}
disabled={!isMutable || isModified}
onClick={onClone}
icon={<BiDuplicate size='1.25rem' className='icon-green' />}

1
rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ControlsOverlay.tsx
View File

@ -29,6 +29,7 @@ function ControlsOverlay({ constituenta, isMutable, processing, onRename, onEdit
className={clsx(
'pt-1 pl-[1.375rem]', // prettier: split lines
'text-sm font-medium whitespace-nowrap',
'select-text cursor-default',
!isMutable && !processing && 'pl-[2.8rem]'
)}
>

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

@ -10,7 +10,6 @@ import SubmitButton from '@/components/ui/SubmitButton';
import TextArea from '@/components/ui/TextArea';
import { useRSForm } from '@/context/RSFormContext';
import { IConstituenta, ICstUpdateData } from '@/models/rsform';
import { classnames } from '@/utils/constants';
import { labelCstTypification } from '@/utils/labels';
import EditorRSExpression from '../EditorRSExpression';
@ -123,7 +122,7 @@ function FormConstituenta({
/>
<form
id={id}
className={clsx('mt-1 w-full md:w-[47.8rem] shrink-0', 'px-4 py-1', classnames.flex_col)}
className={clsx('cc-column', 'mt-1 w-full md:w-[47.8rem] shrink-0', 'px-4 py-1')}
onSubmit={handleSubmit}
>
<RefsInput

2
rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
View File

@ -90,7 +90,7 @@ interface RSEditorControlsProps {
function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsProps) {
return (
<motion.div
className='flex-wrap text-xs sm:text-sm divide-solid'
className='flex-wrap text-xs select-none sm:text-sm divide-solid'
initial={false}
animate={isOpen ? 'open' : 'closed'}
variants={animateRSControl}

8
rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
View File

@ -20,7 +20,7 @@ import { useRSForm } from '@/context/RSFormContext';
import { LibraryItemType } from '@/models/library';
import { HelpTopic } from '@/models/miscellaneous';
import { IRSFormCreateData } from '@/models/rsform';
import { classnames, limits, patterns } from '@/utils/constants';
import { limits, patterns } from '@/utils/constants';
import { useRSEdit } from '../RSEditContext';
@ -95,11 +95,7 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
};
return (
<form
id={id}
className={clsx('mt-1 min-w-[22rem] sm:w-[30rem]', 'py-1', classnames.flex_col)}
onSubmit={handleSubmit}
>
<form id={id} className={clsx('cc-column', 'mt-1 min-w-[22rem] sm:w-[30rem]', 'py-1')} onSubmit={handleSubmit}>
<TextInput
id='schema_title'
required

4
rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
View File

@ -14,7 +14,7 @@ import useLocalStorage from '@/hooks/useLocalStorage';
import { GraphColoringScheme, GraphFilterParams } from '@/models/miscellaneous';
import { ConstituentaID, CstType } from '@/models/rsform';
import { colorBgGraphNode } from '@/styling/color';
import { classnames, TIMEOUT_GRAPH_REFRESH } from '@/utils/constants';
import { TIMEOUT_GRAPH_REFRESH } from '@/utils/constants';
import { useRSEdit } from '../RSEditContext';
import GraphSidebar from './GraphSidebar';
@ -222,7 +222,7 @@ function EditorTermGraph({ selected, setSelected, onOpenEdit }: EditorTermGraphP
</Overlay>
) : null}
<Overlay position='top-0 left-0' className={clsx('w-[13.5rem]', classnames.flex_col)}>
<Overlay position='top-0 left-0' className='cc-column w-[13.5rem]'>
<GraphSidebar
coloring={coloringScheme}
layout={layout}

4
rsconcept/frontend/src/pages/RegisterPage.tsx
View File

@ -19,7 +19,7 @@ import Tooltip from '@/components/ui/Tooltip';
import { useAuth } from '@/context/AuthContext';
import { useConceptNavigation } from '@/context/NavigationContext';
import { type IUserSignupData } from '@/models/library';
import { classnames, globalIDs, patterns } from '@/utils/constants';
import { globalIDs, patterns } from '@/utils/constants';
function RegisterPage() {
const router = useConceptNavigation();
@ -69,7 +69,7 @@ function RegisterPage() {
}
return (
<AnimateFade>
<form className={clsx('px-6 py-3', classnames.flex_col)} onSubmit={handleSubmit}>
<form className={clsx('cc-column', 'px-6 py-3')} onSubmit={handleSubmit}>
<h1>Новый пользователь</h1>
<div className='flex gap-12'>
<FlexColumn>

3
rsconcept/frontend/src/pages/RestorePasswordPage.tsx
View File

@ -11,7 +11,6 @@ import TextInput from '@/components/ui/TextInput';
import TextURL from '@/components/ui/TextURL';
import { useAuth } from '@/context/AuthContext';
import { IRequestPasswordData } from '@/models/library';
import { classnames } from '@/utils/constants';
function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
@ -44,7 +43,7 @@ function RestorePasswordPage() {
return (
<AnimateFade>
{!isCompleted ? (
<form className={clsx('w-[24rem]', 'px-6 mt-3', classnames.flex_col)} onSubmit={handleSubmit}>
<form className={clsx('cc-column', 'w-[24rem]', 'px-6 mt-3')} onSubmit={handleSubmit}>
<TextInput
id='email'
allowEnter

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

@ -9,7 +9,6 @@ import TextInput from '@/components/ui/TextInput';
import { useBlockNavigation } from '@/context/NavigationContext';
import { useUserProfile } from '@/context/UserProfileContext';
import { IUserUpdateData } from '@/models/library';
import { classnames } from '@/utils/constants';
function EditorProfile() {
const { updateUser, user, processing } = useUserProfile();
@ -48,7 +47,7 @@ function EditorProfile() {
}
return (
<form onSubmit={handleSubmit} className={clsx('min-w-[18rem]', 'px-6 py-2', classnames.flex_col)}>
<form onSubmit={handleSubmit} className={clsx('cc-column', 'min-w-[18rem]', 'px-6 py-2')}>
<TextInput
id='username'
autoComplete='username'

8
rsconcept/frontend/src/styling/styles.css
View File

@ -192,4 +192,12 @@
@apply clr-text-green;
}
}
.cc-label {
@apply text-sm font-medium cursor-default select-text whitespace-nowrap;
}
.cc-column {
@apply flex flex-col gap-3;
}
}

9
rsconcept/frontend/src/utils/constants.ts
View File

@ -60,14 +60,6 @@ export const youtube = {
intro: '0Ty9mu9sOJo'
};
/**
* Tailwind CSS combinations.
* Note: using clsx in conjunction with tailwindCss is preferred to creating custom CSS
*/
export const classnames = {
flex_col: 'flex flex-col gap-3'
};
/**
* Constant URLs.
*/
@ -101,6 +93,7 @@ export const globalIDs = {
export const prefixes = {
page_size: 'page_size_',
cst_list: 'cst_list_',
cst_inline_synth_list: 'cst_inline_synth_list',
cst_side_table: 'cst_side_table_',
cst_hidden_list: 'cst_hidden_list_',
cst_modal_list: 'cst_modal_list_',