F: Various UI fixes
This commit is contained in:
Ivan
parent
27dcb3a4cc
commit
422f1bb49a
|
|
@ -75,7 +75,7 @@ export function TableBody<TData>({
|
|||
key={row.id}
|
||||
className={clsx(
|
||||
'cc-scroll-row',
|
||||
'clr-hover cc-animate-background duration-300',
|
||||
'clr-hover cc-animate-background duration-(--duration-fade)',
|
||||
!noHeader && 'scroll-mt-[calc(2px+2rem)]',
|
||||
table.options.enableRowSelection && row.getIsSelected()
|
||||
? 'clr-selected'
|
||||
|
|
|
|||
|
|
@ -146,6 +146,7 @@ export { BiGitMerge as IconGraphOutputs } from 'react-icons/bi';
|
|||
export { LuAtom as IconGraphCore } from 'react-icons/lu';
|
||||
export { LuRotate3D as IconRotate3D } from 'react-icons/lu';
|
||||
export { MdOutlineFitScreen as IconFitImage } from 'react-icons/md';
|
||||
export { RiFocus3Line as IconFocus } from 'react-icons/ri';
|
||||
export { LuSparkles as IconClustering } from 'react-icons/lu';
|
||||
export { LuSparkle as IconClusteringOff } from 'react-icons/lu';
|
||||
export { TbGridDots as IconGrid } from 'react-icons/tb';
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {
|
|||
IconEdit,
|
||||
IconFilter,
|
||||
IconFitImage,
|
||||
IconFocus,
|
||||
IconGraphCollapse,
|
||||
IconGraphCore,
|
||||
IconGraphExpand,
|
||||
|
|
@ -47,9 +48,7 @@ export function HelpRSGraphTerm() {
|
|||
<div className='sm:w-84'>
|
||||
<h1>Изменение узлов</h1>
|
||||
<li>Клик на узел – выделение</li>
|
||||
<li>
|
||||
Левый клик – выбор <span className='text-(--acc-fg-purple)'>фокус-конституенты</span>
|
||||
</li>
|
||||
<li>Левый клик – выбор фокус-конституенты</li>
|
||||
<li>
|
||||
<IconReset className='inline-icon' /> Esc – сбросить выделение
|
||||
</li>
|
||||
|
|
@ -76,6 +75,9 @@ export function HelpRSGraphTerm() {
|
|||
<li>
|
||||
<IconFilter className='inline-icon' /> Открыть настройки
|
||||
</li>
|
||||
<li>
|
||||
<IconFocus className='inline-icon' /> Задать фокус
|
||||
</li>
|
||||
<li>
|
||||
<IconFitImage className='inline-icon' /> Вписать в экран
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export function LibraryPage() {
|
|||
<div className='relative cc-fade-in flex'>
|
||||
<MiniButton
|
||||
title='Выгрузить в формате CSV'
|
||||
className='absolute z-tooltip -top-8 right-6'
|
||||
className='absolute z-tooltip -top-8 right-6 hidden sm:block'
|
||||
icon={<IconCSV size='1.25rem' className='icon-green' />}
|
||||
onClick={handleDownloadCSV}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ export function EditorRSList() {
|
|||
) : null}
|
||||
|
||||
<MiniButton
|
||||
className='absolute z-pop top-18 right-4'
|
||||
className='absolute z-pop top-18 right-4 hidden sm:block'
|
||||
title='Выгрузить в формате CSV'
|
||||
icon={<IconCSV size='1.25rem' className='icon-green' />}
|
||||
onClick={handleDownloadCSV}
|
||||
|
|
|
|||
|
|
@ -27,10 +27,10 @@ interface TGNodeInternal {
|
|||
}
|
||||
|
||||
export function TGNode(node: TGNodeInternal) {
|
||||
const { focusCst, setFocus: setFocusCst, navigateCst } = useRSEdit();
|
||||
const { focusCst, setFocus, navigateCst } = useRSEdit();
|
||||
const filter = useTermGraphStore(state => state.filter);
|
||||
const coloring = useTermGraphStore(state => state.coloring);
|
||||
const isFocused = focusCst === node.data;
|
||||
const isFocused = focusCst?.id === node.data.id;
|
||||
|
||||
const label = node.data.alias;
|
||||
const description = !filter.noText ? node.data.term_resolved : '';
|
||||
|
|
@ -38,7 +38,7 @@ export function TGNode(node: TGNodeInternal) {
|
|||
function handleContextMenu(event: React.MouseEvent<HTMLElement>) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
setFocusCst(isFocused ? null : node.data);
|
||||
setFocus(isFocused ? null : node.data);
|
||||
}
|
||||
|
||||
function handleDoubleClick(event: React.MouseEvent) {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export function ToolbarFocusedCst() {
|
|||
const filter = useTermGraphStore(state => state.filter);
|
||||
const setFilter = useTermGraphStore(state => state.setFilter);
|
||||
|
||||
function resetSelection() {
|
||||
function resetFocus() {
|
||||
setFocus(null);
|
||||
}
|
||||
|
||||
|
|
@ -36,17 +36,17 @@ export function ToolbarFocusedCst() {
|
|||
|
||||
return (
|
||||
<div className='flex items-center cc-icons'>
|
||||
<div className='w-31 mt-0.5 text-right select-none color-(--acc-fg-purple)'>
|
||||
<div className='w-31 mt-0.5 text-right select-none text-(--acc-fg-purple)'>
|
||||
<span>
|
||||
Фокус
|
||||
<b className='pr-1'> {focusCst.alias} </b>
|
||||
<b> {focusCst.alias} </b>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<MiniButton
|
||||
title='Сбросить фокус'
|
||||
icon={<IconReset size='1.25rem' className='icon-primary' />}
|
||||
onClick={resetSelection}
|
||||
onClick={resetFocus}
|
||||
/>
|
||||
<MiniButton
|
||||
title={filter.focusShowInputs ? 'Скрыть поставщиков' : 'Отобразить поставщиков'}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
IconDestroy,
|
||||
IconFilter,
|
||||
IconFitImage,
|
||||
IconFocus,
|
||||
IconNewItem,
|
||||
IconText,
|
||||
IconTextOff,
|
||||
|
|
@ -31,6 +32,7 @@ export function ToolbarTermGraph() {
|
|||
const {
|
||||
schema, //
|
||||
selected,
|
||||
setFocus,
|
||||
navigateOss,
|
||||
isContentEditable,
|
||||
canDeleteSelected,
|
||||
|
|
@ -78,6 +80,13 @@ export function ToolbarTermGraph() {
|
|||
}, PARAMETER.minimalTimeout);
|
||||
}
|
||||
|
||||
function handleSetFocus() {
|
||||
const target = schema.cstByID.get(selected[0]);
|
||||
if (target) {
|
||||
setFocus(target);
|
||||
}
|
||||
}
|
||||
|
||||
function handleFoldDerived() {
|
||||
setFilter({
|
||||
...filter,
|
||||
|
|
@ -98,6 +107,12 @@ export function ToolbarTermGraph() {
|
|||
icon={<IconFilter size='1.25rem' className='icon-primary' />}
|
||||
onClick={showParams}
|
||||
/>
|
||||
<MiniButton
|
||||
title='Задать фокус конституенту'
|
||||
icon={<IconFocus size='1.25rem' className='icon-primary' />}
|
||||
disabled={selected.length !== 1}
|
||||
onClick={handleSetFocus}
|
||||
/>
|
||||
<MiniButton
|
||||
title='Граф целиком'
|
||||
icon={<IconFitImage size='1.25rem' className='icon-primary' />}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@ export function RSTabs({ activeID, activeTab }: RSTabsProps) {
|
|||
if (activeTab === RSTabID.CST_EDIT) {
|
||||
if (activeID && schema.cstByID.has(activeID)) {
|
||||
setSelected([activeID]);
|
||||
} else if (schema.items.length > 0) {
|
||||
setSelected([schema.items[0].id]);
|
||||
} else {
|
||||
deselectAll();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
--clr-warn-600: oklch(060% 0.250 27deg);
|
||||
--clr-ok-600: oklch(060% 0.250 143deg);
|
||||
|
||||
--clr-select-node: oklch(080% 0.150 165deg);
|
||||
--clr-select-node: oklch(080% 0.250 180deg);
|
||||
|
||||
/* Highlight accents */
|
||||
--acc-bg-red: oklch(085% 0.150 27deg);
|
||||
|
|
@ -51,8 +51,8 @@
|
|||
--acc-bg-teal: oklch(085% 0.200 210deg);
|
||||
--acc-bg-orange: oklch(085% 0.150 62deg);
|
||||
|
||||
--acc-bg-green25: oklch(097% 0.131 138deg);
|
||||
--acc-bg-green50: oklch(090% 0.175 138deg);
|
||||
--acc-bg-green25: oklch(097% 0.150 138deg);
|
||||
--acc-bg-green50: oklch(090% 0.150 138deg);
|
||||
--acc-bg-orange50: oklch(090% 0.044 62deg);
|
||||
|
||||
--acc-fg-red: oklch(060% 0.220 27deg);
|
||||
|
|
@ -83,11 +83,11 @@
|
|||
--clr-sec-600: oklch(065% 0.250 295deg);
|
||||
--clr-sec-800: oklch(075% 0.250 295deg);
|
||||
|
||||
--clr-warn-100: oklch(025% 0.108 27deg);
|
||||
--clr-warn-100: oklch(025% 0.100 27deg);
|
||||
--clr-warn-600: oklch(070% 0.200 27deg);
|
||||
--clr-ok-600: oklch(070% 0.200 143deg);
|
||||
|
||||
--clr-select-node: oklch(070% 0.147 165deg);
|
||||
--clr-select-node: oklch(070% 0.250 180deg);
|
||||
|
||||
/* Highlight accents */
|
||||
--acc-bg-red: oklch(050% 0.150 27deg);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user