M: Improve focus cst label positioning
This commit is contained in:
parent
924a169224
commit
eedc470f9a
|
|
@ -100,11 +100,9 @@ export function TGReadonlyFlow({ schema }: TGReadonlyFlowProps) {
|
|||
|
||||
return (
|
||||
<div className='relative w-full h-full flex flex-col'>
|
||||
<div className='cc-tab-tools flex flex-col mt-2 items-center rounded-b-2xl backdrop-blur-xs'>
|
||||
<div className='cc-tab-tools flex mt-2 items-start rounded-b-2xl backdrop-blur-xs'>
|
||||
{focusCst ? <ToolbarFocusedCst focus={focusCst} resetFocus={() => setFocusCst(null)} /> : null}
|
||||
<ToolbarGraphFilter />
|
||||
{focusCst ? (
|
||||
<ToolbarFocusedCst className='-translate-x-9' focus={focusCst} resetFocus={() => setFocusCst(null)} />
|
||||
) : null}
|
||||
</div>
|
||||
<div className='absolute z-pop top-24 sm:top-16 left-2 sm:left-3 w-54 flex flex-col pointer-events-none'>
|
||||
<SelectColoring className='rounded-b-none' schema={schema} />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
'use client';
|
||||
|
||||
import clsx from 'clsx';
|
||||
|
||||
import { type IConstituenta } from '@/features/rsform/models/rsform';
|
||||
|
||||
import { MiniButton } from '@/components/control';
|
||||
|
|
@ -20,29 +22,39 @@ export function ToolbarFocusedCst({ focus, resetFocus, className }: ToolbarFocus
|
|||
const toggleFocusOutputs = useTermGraphStore(state => state.toggleFocusOutputs);
|
||||
|
||||
return (
|
||||
<div className={cn('flex items-center cc-icons', className)}>
|
||||
<div className='w-31 mt-0.5 text-right select-none text-accent-purple-foreground'>
|
||||
<span>
|
||||
<div className={cn('grid', className)}>
|
||||
<div className='flex items-center cc-icons'>
|
||||
<MiniButton
|
||||
title='Сбросить фокус'
|
||||
icon={<IconReset size='1.25rem' className='icon-primary' />}
|
||||
onClick={resetFocus}
|
||||
/>
|
||||
<MiniButton
|
||||
title={filter.focusShowInputs ? 'Скрыть поставщиков' : 'Отобразить поставщиков'}
|
||||
icon={<IconGraphInputs size='1.25rem' className={filter.focusShowInputs ? 'icon-green' : 'icon-primary'} />}
|
||||
onClick={toggleFocusInputs}
|
||||
/>
|
||||
<MiniButton
|
||||
title={filter.focusShowOutputs ? 'Скрыть потребителей' : 'Отобразить потребителей'}
|
||||
icon={<IconGraphOutputs size='1.25rem' className={filter.focusShowOutputs ? 'icon-green' : 'icon-primary'} />}
|
||||
onClick={toggleFocusOutputs}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'translate-x-1/2',
|
||||
'w-full text-right',
|
||||
'px-1',
|
||||
'select-none',
|
||||
'hover:bg-background',
|
||||
'text-accent-purple-foreground rounded-md'
|
||||
)}
|
||||
>
|
||||
<span aria-label='Фокус-конституента' className='whitespace-nowrap'>
|
||||
Фокус
|
||||
<b> {focus.alias} </b>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<MiniButton
|
||||
title='Сбросить фокус'
|
||||
icon={<IconReset size='1.25rem' className='icon-primary' />}
|
||||
onClick={resetFocus}
|
||||
/>
|
||||
<MiniButton
|
||||
title={filter.focusShowInputs ? 'Скрыть поставщиков' : 'Отобразить поставщиков'}
|
||||
icon={<IconGraphInputs size='1.25rem' className={filter.focusShowInputs ? 'icon-green' : 'icon-primary'} />}
|
||||
onClick={toggleFocusInputs}
|
||||
/>
|
||||
<MiniButton
|
||||
title={filter.focusShowOutputs ? 'Скрыть потребителей' : 'Отобразить потребителей'}
|
||||
icon={<IconGraphOutputs size='1.25rem' className={filter.focusShowOutputs ? 'icon-green' : 'icon-primary'} />}
|
||||
onClick={toggleFocusOutputs}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ export function ToolbarTermGraph({ className }: ToolbarTermGraphProps) {
|
|||
|
||||
<BadgeHelp topic={HelpTopic.UI_GRAPH_TERM} contentClass='sm:max-w-160' offset={4} />
|
||||
</div>
|
||||
<div className='cc-icons items-center'>
|
||||
<div className='cc-icons items-start'>
|
||||
{focusCst ? (
|
||||
<ToolbarFocusedCst
|
||||
focus={focusCst} //
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user