mirror of
https://github.com/IRBorisov/ConceptPortal.git
synced 2025-06-26 21:10:38 +03:00
R: Replace disabled buttons with indicators
This commit is contained in:
parent
f7354c9883
commit
3e34414b85
34
rsconcept/frontend/src/components/ui/Indicator.tsx
Normal file
34
rsconcept/frontend/src/components/ui/Indicator.tsx
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
import clsx from 'clsx';
|
||||||
|
|
||||||
|
import { globals } from '@/utils/constants';
|
||||||
|
|
||||||
|
import { CProps } from '../props';
|
||||||
|
|
||||||
|
interface IndicatorProps extends CProps.Titled, CProps.Styling {
|
||||||
|
icon: React.ReactNode;
|
||||||
|
noPadding?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Indicator({ icon, title, titleHtml, hideTitle, noPadding, className, ...restProps }: IndicatorProps) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
'clr-btn-clear',
|
||||||
|
'outline-none',
|
||||||
|
{
|
||||||
|
'px-1 py-1': !noPadding
|
||||||
|
},
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
data-tooltip-id={!!title || !!titleHtml ? globals.tooltip : undefined}
|
||||||
|
data-tooltip-html={titleHtml}
|
||||||
|
data-tooltip-content={title}
|
||||||
|
data-tooltip-hidden={hideTitle}
|
||||||
|
{...restProps}
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Indicator;
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
import { IconConsolidation, IconRSForm } from '@/components/Icons';
|
import { IconConsolidation, IconRSForm } from '@/components/Icons';
|
||||||
import TooltipOperation from '@/components/info/TooltipOperation';
|
import TooltipOperation from '@/components/info/TooltipOperation';
|
||||||
import MiniButton from '@/components/ui/MiniButton.tsx';
|
import Indicator from '@/components/ui/Indicator';
|
||||||
import Overlay from '@/components/ui/Overlay';
|
import Overlay from '@/components/ui/Overlay';
|
||||||
import { OssNodeInternal } from '@/models/miscellaneous';
|
import { OssNodeInternal } from '@/models/miscellaneous';
|
||||||
import { OperationType } from '@/models/oss';
|
import { OperationType } from '@/models/oss';
|
||||||
|
@ -25,19 +25,15 @@ function NodeCore({ node }: NodeCoreProps) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Overlay position='top-0 right-0' className='flex flex-col gap-1 p-[2px]'>
|
<Overlay position='top-0 right-0' className='flex flex-col gap-1 p-[2px]'>
|
||||||
<MiniButton
|
<Indicator
|
||||||
disabled
|
|
||||||
noHover
|
|
||||||
noPadding
|
noPadding
|
||||||
title={hasFile ? 'Связанная КС' : 'Нет связанной КС'}
|
title={hasFile ? 'Связанная КС' : 'Нет связанной КС'}
|
||||||
icon={<IconRSForm className={hasFile ? 'clr-text-green' : 'clr-text-red'} size='12px' />}
|
icon={<IconRSForm className={hasFile ? 'clr-text-green' : 'clr-text-red'} size='12px' />}
|
||||||
hideTitle={!controller.showTooltip}
|
hideTitle={!controller.showTooltip}
|
||||||
/>
|
/>
|
||||||
{node.data.operation.is_consolidation ? (
|
{node.data.operation.is_consolidation ? (
|
||||||
<MiniButton
|
<Indicator
|
||||||
disabled
|
|
||||||
noPadding
|
noPadding
|
||||||
noHover
|
|
||||||
titleHtml='<b>Внимание!</b><br />Ромбовидный синтез</br/>Возможны дубликаты конституент'
|
titleHtml='<b>Внимание!</b><br />Ромбовидный синтез</br/>Возможны дубликаты конституент'
|
||||||
icon={<IconConsolidation className='clr-text-primary' size='12px' />}
|
icon={<IconConsolidation className='clr-text-primary' size='12px' />}
|
||||||
hideTitle={!controller.showTooltip}
|
hideTitle={!controller.showTooltip}
|
||||||
|
|
|
@ -7,7 +7,7 @@ import { toast } from 'react-toastify';
|
||||||
|
|
||||||
import { IconChild, IconPredecessor, IconSave } from '@/components/Icons';
|
import { IconChild, IconPredecessor, IconSave } from '@/components/Icons';
|
||||||
import RefsInput from '@/components/RefsInput';
|
import RefsInput from '@/components/RefsInput';
|
||||||
import MiniButton from '@/components/ui/MiniButton';
|
import Indicator from '@/components/ui/Indicator';
|
||||||
import Overlay from '@/components/ui/Overlay';
|
import Overlay from '@/components/ui/Overlay';
|
||||||
import SubmitButton from '@/components/ui/SubmitButton';
|
import SubmitButton from '@/components/ui/SubmitButton';
|
||||||
import TextArea from '@/components/ui/TextArea';
|
import TextArea from '@/components/ui/TextArea';
|
||||||
|
@ -165,7 +165,7 @@ function FormConstituenta({
|
||||||
dense
|
dense
|
||||||
noResize
|
noResize
|
||||||
noBorder
|
noBorder
|
||||||
disabled={true}
|
disabled
|
||||||
label='Типизация'
|
label='Типизация'
|
||||||
value={typification}
|
value={typification}
|
||||||
colors='clr-app clr-text-default'
|
colors='clr-app clr-text-default'
|
||||||
|
@ -250,16 +250,14 @@ function FormConstituenta({
|
||||||
/>
|
/>
|
||||||
<Overlay position='top-[0.1rem] left-[0.4rem]' className='cc-icons'>
|
<Overlay position='top-[0.1rem] left-[0.4rem]' className='cc-icons'>
|
||||||
{state.is_inherited_parent && !state.is_inherited ? (
|
{state.is_inherited_parent && !state.is_inherited ? (
|
||||||
<MiniButton
|
<Indicator
|
||||||
icon={<IconPredecessor size='1.25rem' className='clr-text-primary' />}
|
icon={<IconPredecessor size='1.25rem' className='clr-text-primary' />}
|
||||||
disabled
|
|
||||||
titleHtml='Внимание!</br> Конституента имеет потомков<br/> в операционной схеме синтеза'
|
titleHtml='Внимание!</br> Конституента имеет потомков<br/> в операционной схеме синтеза'
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
{state.is_inherited ? (
|
{state.is_inherited ? (
|
||||||
<MiniButton
|
<Indicator
|
||||||
icon={<IconChild size='1.25rem' className='clr-text-primary' />}
|
icon={<IconChild size='1.25rem' className='clr-text-primary' />}
|
||||||
disabled
|
|
||||||
titleHtml='Внимание!</br> Конституента является наследником<br/>'
|
titleHtml='Внимание!</br> Конституента является наследником<br/>'
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user