M: Improve focus cst label positioning

This commit is contained in:
Ivan 2025-11-04 13:44:03 +03:00
parent 5bf70ed3fa
commit cdff229c8c
3 changed files with 34 additions and 24 deletions

View File

@ -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} />

View File

@ -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>
);
}

View File

@ -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} //