matt/navi
1
0
Fork 0
mirror of https://github.com/zvx-echo6/navi.git synced 2026-05-20 22:54:42 +02:00
Code Issues Projects Releases Packages Wiki Activity

style(radial): gray out auth-required wedges instead of lock icon

Browse source 
Lock icon overlay was visually busy and partially obscured the wedge
label. Replaced with a grayed-out treatment using reduced opacity for
auth-required wedges. Cleaner read, instantly recognizable as 'not
fully available'.
This commit is contained in:
Matt 2026-04-26 07:01:21 +00:00
commit 536c0bfe7e
3 changed files with 1656 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/RadialMenu.jsx
View file

@ -1,6 +1,5 @@
import { useEffect, useRef, useCallback } from 'react'
import { createPortal } from 'react-dom'
import { Lock } from 'lucide-react'
/**
* RadialMenu - ATAK-style radial context menu
@ -175,8 +174,9 @@ export default function RadialMenu({
{wedges.map((wedge, i) => {
const iconPos = getIconPosition(i)
const Icon = wedge.icon
const wedgeClasses = `radial-wedge${wedge.requiresAuth ? ' auth-required' : ''}`
return (
<g key={wedge.id} className="radial-wedge" data-wedge-id={wedge.id}>
<g key={wedge.id} className={wedgeClasses} data-wedge-id={wedge.id}>
<path
d={generateWedgePath(i)}
className="wedge-path"
@ -197,21 +197,6 @@ export default function RadialMenu({
/>
</foreignObject>
)}
{wedge.requiresAuth && (
<foreignObject
x={4}
y={-14}
width={10}
height={10}
style={{ overflow: 'visible' }}
>
<Lock
size={10}
className="wedge-lock"
strokeWidth={1.5}
/>
</foreignObject>
)}
<text
y={10}
textAnchor="middle"
@ -296,11 +281,6 @@ export default function RadialMenu({
color: var(--text-primary);
}
/* Lock icon — tertiary/muted */
.wedge-lock {
color: var(--text-tertiary);
}
/* Wedge labels — secondary text */
.wedge-label {
font-family: var(--font-sans);
@ -316,6 +296,26 @@ export default function RadialMenu({
fill: var(--text-primary);
}
/* Auth-required wedges — grayed out */
.radial-wedge.auth-required .wedge-icon {
color: var(--text-tertiary);
}
.radial-wedge.auth-required .wedge-label {
fill: var(--text-tertiary);
}
/* Auth-required hover — background still reacts, content stays muted */
.radial-wedge.auth-required:hover .wedge-icon,
.radial-wedge.auth-required.active .wedge-icon {
color: var(--text-secondary);
}
.radial-wedge.auth-required:hover .wedge-label,
.radial-wedge.auth-required.active .wedge-label {
fill: var(--text-secondary);
}
/* Center disc — raised surface */
.center-disc {
fill: var(--bg-raised);