cameleer/cameleer-server
1
0
Fork 0
Code Issues 44 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): replace text badges with droplet/footprint icons matching context menu
Some checks failed
CI / cleanup-branch (push) Has been skipped
Details
CI / docker (push) Has been cancelled
Details
CI / deploy (push) Has been cancelled
Details
CI / deploy-feature (push) Has been cancelled
Details
CI / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
hsiegeln
2026-03-28 16:05:45 +01:00
parent 7903a300db
commit dd1cae6f70
1 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
ui/src/components/ProcessDiagram/ConfigBadge.tsx
View File

@@ -1,8 +1,6 @@
import type { NodeConfig } from './types'; import type { NodeConfig } from './types';
const BADGE_HEIGHT = 14; const BADGE_SIZE = 18;
const BADGE_RADIUS = 7;
const BADGE_FONT_SIZE = 8;
const BADGE_GAP = 4; const BADGE_GAP = 4;
interface ConfigBadgeProps { interface ConfigBadgeProps {
@@ -11,35 +9,38 @@ interface ConfigBadgeProps {
} }
export function ConfigBadge({ nodeWidth, config }: ConfigBadgeProps) { export function ConfigBadge({ nodeWidth, config }: ConfigBadgeProps) {
const badges: { label: string; color: string }[] = []; const badges: { icon: 'tap' | 'trace'; color: string }[] = [];
if (config.tapExpression) badges.push({ label: 'TAP', color: '#7C3AED' }); if (config.tapExpression) badges.push({ icon: 'tap', color: '#7C3AED' });
if (config.traceEnabled) badges.push({ label: 'TRACE', color: '#1A7F8E' }); if (config.traceEnabled) badges.push({ icon: 'trace', color: '#1A7F8E' });
if (badges.length === 0) return null; if (badges.length === 0) return null;
let xOffset = nodeWidth; let xOffset = nodeWidth;
return ( return (
<g className="config-badges"> <g className="config-badges">
{badges.map((badge, i) => { {badges.map((badge, i) => {
const textWidth = badge.label.length * 5.5 + 8; xOffset -= BADGE_SIZE + (i > 0 ? BADGE_GAP : 0);
xOffset -= textWidth + (i > 0 ? BADGE_GAP : 0);
return ( return (
<g key={badge.label} transform={`translate(${xOffset}, ${-BADGE_HEIGHT / 2 - 2})`}> <g key={badge.icon} transform={`translate(${xOffset}, ${-BADGE_SIZE / 2 - 1})`}>
<rect <circle
width={textWidth} cx={BADGE_SIZE / 2}
height={BADGE_HEIGHT} cy={BADGE_SIZE / 2}
rx={BADGE_RADIUS} r={BADGE_SIZE / 2}
fill={badge.color} fill={badge.color}
/> />
<text {badge.icon === 'tap' ? (
x={textWidth / 2} /* Droplets icon (simplified) */
y={BADGE_HEIGHT / 2 + 3} <g transform="translate(4, 4)" stroke="white" strokeWidth={1.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
fill="white" <path d="M5 1 C5 1 2 4.5 2 6.5a3 3 0 006 0C8 4.5 5 1 5 1z" />
fontSize={BADGE_FONT_SIZE} </g>
fontWeight={600} ) : (
textAnchor="middle" /* Footprints icon (simplified) */
> <g transform="translate(3.5, 3)" stroke="white" strokeWidth={1.3} fill="none" strokeLinecap="round" strokeLinejoin="round">
{badge.label} <path d="M4 1c0 0-1.5 2-1.5 3.5a1.5 1.5 0 003 0C5.5 3 4 1 4 1z" />
</text> <path d="M7.5 4c0 0-1 1.5-1 2.5a1 1 0 002 0c0-1-1-2.5-1-2.5z" />
<line x1="3.5" y1="7" x2="3" y2="9.5" />
<line x1="7" y1="8" x2="7.5" y2="10" />
</g>
)}
</g> </g>
); );
})} })}