ConceptProd/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

M: Improve label visibility

Browse Source
This commit is contained in:
Ivan 2024-08-19 11:56:46 +03:00
parent c6e64fddb8
commit f8f1ba4a62
4 changed files with 43 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
rsconcept/frontend/src/pages/OssPage/EditorOssGraph/InputNode.tsx
View File

@ -5,13 +5,17 @@ import TooltipOperation from '@/components/info/TooltipOperation';
import MiniButton from '@/components/ui/MiniButton.tsx';
import Overlay from '@/components/ui/Overlay';
import { OssNodeInternal } from '@/models/miscellaneous';
import { prefixes } from '@/utils/constants';
import { PARAMETER, prefixes } from '@/utils/constants';
import { truncateText } from '@/utils/utils';
import { useOssEdit } from '../OssEditContext';
function InputNode(node: OssNodeInternal) {
const controller = useOssEdit();
const hasFile = !!node.data.operation.result;
const longLabel = node.data.label.length > PARAMETER.ossLongLabel;
const labelText = truncateText(node.data.label, PARAMETER.ossTruncateLabel);
const handleOpenSchema = () => {
controller.openOperationSchema(Number(node.id));
@ -21,7 +25,7 @@ function InputNode(node: OssNodeInternal) {
<>
<Handle type='source' position={Position.Bottom} />
<Overlay position='top-0 right-0' className='flex'>
<Overlay position='top-0 right-0' className='flex p-[0.1rem]'>
<MiniButton
icon={<IconRSForm className={hasFile ? 'clr-text-green' : 'clr-text-red'} size='0.75rem' />}
noHover
@ -41,8 +45,18 @@ function InputNode(node: OssNodeInternal) {
</Overlay>
) : null}
<div id={`${prefixes.operation_list}${node.id}`} className='flex-grow text-center'>
{node.data.label}
<div id={`${prefixes.operation_list}${node.id}`} className='h-[34px] w-[144px] flex items-center justify-center'>
<div
className='text-center'
style={{
fontSize: longLabel ? '12px' : '14px',
lineHeight: longLabel ? '16px' : '20px',
paddingLeft: '4px',
paddingRight: longLabel ? '10px' : '4px'
}}
>
{labelText}
</div>
{controller.showTooltip && !node.dragging ? (
<TooltipOperation anchor={`#${prefixes.operation_list}${node.id}`} node={node} />
) : null}

32
rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OperationNode.tsx
View File

@ -1,3 +1,5 @@
'use client';
import { Handle, Position } from 'reactflow';
import { IconConsolidation, IconRSForm } from '@/components/Icons';
@ -5,7 +7,8 @@ import TooltipOperation from '@/components/info/TooltipOperation';
import MiniButton from '@/components/ui/MiniButton.tsx';
import Overlay from '@/components/ui/Overlay';
import { OssNodeInternal } from '@/models/miscellaneous';
import { prefixes } from '@/utils/constants';
import { PARAMETER, prefixes } from '@/utils/constants';
import { truncateText } from '@/utils/utils';
import { useOssEdit } from '../OssEditContext';
@ -13,6 +16,8 @@ function OperationNode(node: OssNodeInternal) {
const controller = useOssEdit();
const hasFile = !!node.data.operation.result;
const longLabel = node.data.label.length > PARAMETER.ossLongLabel;
const labelText = truncateText(node.data.label, PARAMETER.ossTruncateLabel);
const handleOpenSchema = () => {
controller.openOperationSchema(Number(node.id));
@ -22,14 +27,9 @@ function OperationNode(node: OssNodeInternal) {
<>
<Handle type='source' position={Position.Bottom} />
<Overlay position='top-0 right-0' className='flex flex-col gap-1'>
<Overlay position='top-0 right-0' className='flex flex-col gap-1 p-[0.1rem]'>
<MiniButton
icon={
<IconRSForm
className={hasFile ? 'clr-text-green' : 'clr-text-red'}
size={node.data.operation.is_consolidation ? '0.6rem' : '0.75rem'}
/>
}
icon={<IconRSForm className={hasFile ? 'clr-text-green' : 'clr-text-red'} size='0.75rem' />}
noHover
noPadding
title={hasFile ? 'Связанная КС' : 'Нет связанной КС'}
@ -39,7 +39,7 @@ function OperationNode(node: OssNodeInternal) {
/>
{node.data.operation.is_consolidation ? (
<MiniButton
icon={<IconConsolidation className='clr-text-primary' size='0.6rem' />}
icon={<IconConsolidation className='clr-text-primary' size='0.75rem' />}
disabled
noPadding
noHover
@ -55,8 +55,18 @@ function OperationNode(node: OssNodeInternal) {
</Overlay>
) : null}
<div id={`${prefixes.operation_list}${node.id}`} className='flex-grow text-center'>
{node.data.label}
<div id={`${prefixes.operation_list}${node.id}`} className='h-[34px] w-[144px] flex items-center justify-center'>
<div
className='px-1 text-center'
style={{
fontSize: longLabel ? '12px' : '14px',
lineHeight: longLabel ? '16px' : '20px',
paddingLeft: '4px',
paddingRight: longLabel ? '10px' : '4px'
}}
>
{labelText}
</div>
{controller.showTooltip && !node.dragging ? (
<TooltipOperation anchor={`#${prefixes.operation_list}${node.id}`} node={node} />
) : null}

2
rsconcept/frontend/src/styling/overrides.css
View File

@ -66,7 +66,7 @@
border: 1px solid;
padding: 2px;
width: 150px;
height: 30px;
height: 40px;
font-size: 14px;
border-radius: 5px;

3
rsconcept/frontend/src/utils/constants.ts
View File

@ -25,6 +25,9 @@ export const PARAMETER = {
graphPopupDelay: 500, // milliseconds delay for graph popup selections
graphRefreshDelay: 10, // milliseconds delay for graph viewpoint reset
ossLongLabel: 14, // characters - threshold for long labels - small font
ossTruncateLabel: 28, // characters - threshold for long labels - truncate
logicLabel: 'LOGIC',
exteorVersion: '4.9.3',