Minor UI fixes

This commit is contained in:
IRBorisov 2023-10-02 23:43:29 +03:00
parent f54254bb56
commit ce513eeb90
10 changed files with 48 additions and 38 deletions

View File

@ -14,22 +14,25 @@ function InfoCstStatus({ title }: InfoCstStatusProps) {
return ( return (
<div className='flex flex-col gap-1'> <div className='flex flex-col gap-1'>
{ title && <h1>{title}</h1>} { title && <h1>{title}</h1>}
{ Object.values(ExpressionStatus).map( { Object.values(ExpressionStatus)
(status, index) => { .filter(status => status !== ExpressionStatus.UNDEFINED)
return ( .map(
<p key={`${prefixes.cst_status_list}${index}`}> (status, index) => {
<span return (
className='px-1 inline-block font-semibold min-w-[5rem] text-center border text-sm' <p key={`${prefixes.cst_status_list}${index}`}>
style={{backgroundColor: colorbgCstStatus(status, colors)}} <span
> className='px-1 inline-block font-semibold min-w-[7rem] text-center border text-sm'
{labelExpressionStatus(status)} style={{backgroundColor: colorbgCstStatus(status, colors)}}
</span> >
<span> - </span> {labelExpressionStatus(status)}
<span> </span>
{describeExpressionStatus(status)} <span> - </span>
</span> <span>
</p>); {describeExpressionStatus(status)}
})} </span>
</p>);
}
)}
</div> </div>
); );
} }

View File

@ -229,7 +229,7 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
canSubmit={isValid} canSubmit={isValid}
onSubmit={handleSubmit} onSubmit={handleSubmit}
> >
<div className='min-w-[40rem] flex flex-col gap-4 mb-4 mt-2 min-h-[34rem]'> <div className='min-w-[40rem] max-w-[40rem] flex flex-col gap-4 mb-4 mt-2 min-h-[34rem]'>
<div className='flex items-center self-center flex-start'> <div className='flex items-center self-center flex-start'>
<ReferenceTypeButton <ReferenceTypeButton
type={ReferenceType.ENTITY} type={ReferenceType.ENTITY}
@ -262,7 +262,7 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
value={offset} value={offset}
onChange={event => setOffset(event.target.valueAsNumber)} onChange={event => setOffset(event.target.valueAsNumber)}
/> />
<div className='self-center text-sm font-semibold whitespace-nowrap ml-2'> <div className='self-center ml-2 text-sm font-semibold whitespace-nowrap'>
Основная ссылка: Основная ссылка:
</div> </div>
<TextInput <TextInput

View File

@ -114,6 +114,12 @@
color-scheme: light; color-scheme: light;
} }
@layer utilities {
.small-caps {
font-variant: small-caps;
}
}
@layer components { @layer components {
h1 { h1 {
@apply text-lg font-bold text-center @apply text-lg font-bold text-center

View File

@ -26,8 +26,8 @@ export enum CstClass {
export enum ExpressionStatus { export enum ExpressionStatus {
VERIFIED = 'verified', VERIFIED = 'verified',
INCORRECT = 'incorrect', INCORRECT = 'incorrect',
PROPERTY = 'property',
INCALCULABLE = 'incalculable', INCALCULABLE = 'incalculable',
PROPERTY = 'property',
UNDEFINED = 'undefined', UNDEFINED = 'undefined',
UNKNOWN = 'unknown', UNKNOWN = 'unknown',
} }

View File

@ -149,10 +149,10 @@ function EditorConstituenta({
onClick={onEditTerm} onClick={onEditTerm}
icon={<PenIcon size={4} color={isEnabled ? 'text-primary' : ''} />} icon={<PenIcon size={4} color={isEnabled ? 'text-primary' : ''} />}
/>} />}
<div className='flex items-center justify-center w-full gap-1'> <div className='flex items-center justify-center w-full'>
<div className='font-semibold w-fit'> <div className='font-semibold w-fit'>
<span className=''>Конституента </span> <span className='small-caps'>Конституента</span>
<span className='ml-4'>{alias}</span> <span className='ml-2 small-caps'>{alias}</span>
</div> </div>
<MiniButton <MiniButton
tooltip='Переименовать конституенту' tooltip='Переименовать конституенту'

View File

@ -157,7 +157,7 @@ function EditorRSExpression({
<RSTokenButton token={TokenID.LESSER_OR_EQ} onInsert={handleEdit}/> <RSTokenButton token={TokenID.LESSER_OR_EQ} onInsert={handleEdit}/>
</div> </div>
</div> </div>
<div className='text-xs w-fit'> <div className='text-sm w-fit'>
<div className='flex justify-start'> <div className='flex justify-start'>
<RSLocalButton text='μ' tooltip='q' onInsert={handleEdit}/> <RSLocalButton text='μ' tooltip='q' onInsert={handleEdit}/>
<RSLocalButton text='ω' tooltip='w' onInsert={handleEdit}/> <RSLocalButton text='ω' tooltip='w' onInsert={handleEdit}/>
@ -187,7 +187,7 @@ function EditorRSExpression({
}, [handleEdit]); }, [handleEdit]);
return ( return (
<div className='flex flex-col items-start w-full min-h-[15.75rem]'> <div className='flex flex-col items-start w-full'>
<div className='relative w-full'> <div className='relative w-full'>
<div className='absolute top-[-0.3rem] right-0'> <div className='absolute top-[-0.3rem] right-0'>
<StatusBar <StatusBar
@ -198,8 +198,7 @@ function EditorRSExpression({
</div> </div>
</div> </div>
<RSInput innerref={rsInput} <RSInput innerref={rsInput}
className='text-lg' height='7.6rem'
height='10.1rem'
value={value} value={value}
editable={!disabled} editable={!disabled}
onChange={handleChange} onChange={handleChange}

View File

@ -17,14 +17,14 @@ import { useConceptTheme } from '../../context/ThemeContext';
import useLocalStorage from '../../hooks/useLocalStorage'; import useLocalStorage from '../../hooks/useLocalStorage';
import { CstType, IConstituenta, ICstCreateData } from '../../models/rsform'; import { CstType, IConstituenta, ICstCreateData } from '../../models/rsform';
import { graphDarkT, graphLightT, IColorTheme } from '../../utils/color'; import { graphDarkT, graphLightT, IColorTheme } from '../../utils/color';
import { prefixes, resources, TIMEOUT_GRAPH_REFRESH } from '../../utils/constants';
import { Graph } from '../../utils/Graph';
import { SelectorGraphLayout } from '../../utils/selectors';
import { SelectorGraphColoring } from '../../utils/selectors';
import { colorbgCstClass } from '../../utils/color'; import { colorbgCstClass } from '../../utils/color';
import { colorbgCstStatus } from '../../utils/color'; import { colorbgCstStatus } from '../../utils/color';
import { prefixes, resources, TIMEOUT_GRAPH_REFRESH } from '../../utils/constants';
import { Graph } from '../../utils/Graph';
import { mapLabelColoring } from '../../utils/labels'; import { mapLabelColoring } from '../../utils/labels';
import { mapLableLayout } from '../../utils/labels'; import { mapLableLayout } from '../../utils/labels';
import { SelectorGraphLayout } from '../../utils/selectors';
import { SelectorGraphColoring } from '../../utils/selectors';
import DlgGraphOptions from './DlgGraphOptions'; import DlgGraphOptions from './DlgGraphOptions';
import ConstituentaTooltip from './elements/ConstituentaTooltip'; import ConstituentaTooltip from './elements/ConstituentaTooltip';
@ -487,7 +487,9 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
/> />
</div> </div>
<ConceptTooltip anchorSelect='#items-graph-help'> <ConceptTooltip anchorSelect='#items-graph-help'>
<div className='text-sm max-w-[calc(100vw-20rem)]'>
<HelpTermGraph /> <HelpTermGraph />
</div>
</ConceptTooltip> </ConceptTooltip>
<GraphCanvas <GraphCanvas
draggable draggable

View File

@ -15,7 +15,7 @@ function RSLocalButton({ text, tooltip, disabled, onInsert }: RSLocalButtonProps
onClick={() => onInsert(TokenID.ID_LOCAL, text)} onClick={() => onInsert(TokenID.ID_LOCAL, text)}
title={tooltip} title={tooltip}
tabIndex={-1} tabIndex={-1}
className='w-[1.5rem] h-7 cursor-pointer border rounded-none clr-btn-clear' className='w-[1.5rem] h-7 cursor-pointer border rounded-none clr-hover clr-btn-clear'
> >
{text} {text}
</button> </button>

View File

@ -31,7 +31,7 @@ function StatusBar({ isModified, constituenta, parseData }: StatusBarProps) {
className='text-sm h-[1.6rem] w-[10rem] font-semibold inline-flex border items-center select-none justify-center align-middle' className='text-sm h-[1.6rem] w-[10rem] font-semibold inline-flex border items-center select-none justify-center align-middle'
style={{backgroundColor: colorbgCstStatus(status, colors)}} style={{backgroundColor: colorbgCstStatus(status, colors)}}
> >
Статус: [ {labelExpressionStatus(status)} ] {labelExpressionStatus(status)}
</div> </div>
) )
} }

View File

@ -173,11 +173,11 @@ new Map([
export function labelExpressionStatus(status: ExpressionStatus): string { export function labelExpressionStatus(status: ExpressionStatus): string {
switch (status) { switch (status) {
case ExpressionStatus.VERIFIED: return 'ок'; case ExpressionStatus.VERIFIED: return 'корректно';
case ExpressionStatus.INCORRECT: return 'ошибка'; case ExpressionStatus.INCORRECT: return 'ошибка';
case ExpressionStatus.INCALCULABLE: return 'невыч'; case ExpressionStatus.INCALCULABLE: return 'невычислимо';
case ExpressionStatus.PROPERTY: return 'св-во'; case ExpressionStatus.PROPERTY: return 'неразмерное';
case ExpressionStatus.UNKNOWN: return 'неизв'; case ExpressionStatus.UNKNOWN: return 'непроверено';
case ExpressionStatus.UNDEFINED: return 'N/A'; case ExpressionStatus.UNDEFINED: return 'N/A';
} }
} }
@ -186,8 +186,8 @@ export function describeExpressionStatus(status: ExpressionStatus): string {
switch (status) { switch (status) {
case ExpressionStatus.VERIFIED: return 'выражение корректно и вычислимо'; case ExpressionStatus.VERIFIED: return 'выражение корректно и вычислимо';
case ExpressionStatus.INCORRECT: return 'ошибка в выражении'; case ExpressionStatus.INCORRECT: return 'ошибка в выражении';
case ExpressionStatus.INCALCULABLE: return 'выражение не вычислимо'; case ExpressionStatus.INCALCULABLE: return 'нельзя использовать для вычисления интерпретации';
case ExpressionStatus.PROPERTY: return 'можно проверить принадлежность, но нельзя получить значение'; case ExpressionStatus.PROPERTY: return 'только для проверки принадлежности';
case ExpressionStatus.UNKNOWN: return 'требует проверки выражения'; case ExpressionStatus.UNKNOWN: return 'требует проверки выражения';
case ExpressionStatus.UNDEFINED: return 'произошла ошибка при проверке выражения'; case ExpressionStatus.UNDEFINED: return 'произошла ошибка при проверке выражения';
} }