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