Subcategories: all selected by default, cleaner UI
- Inverted subcategory logic: empty = all active - Click to exclude/filter out subcategories - Excluded items shown dimmed/smaller 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
b0ccd024b9
commit
52d4d36727
|
|
@ -181,6 +181,12 @@
|
|||
--color: #3b82f6;
|
||||
}
|
||||
|
||||
.fab-sub.is-excluded {
|
||||
opacity: 0.35;
|
||||
filter: grayscale(0.8);
|
||||
transform: translate(var(--x), var(--y)) scale(0.85);
|
||||
}
|
||||
|
||||
@keyframes fab-pop-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -135,17 +135,20 @@ export default function RadialMenu({
|
|||
</button>
|
||||
|
||||
{/* Subcategories - appear around the category when active */}
|
||||
{/* Logic: empty = all selected, clicking toggles exclusion */}
|
||||
{isActive && leftOpen && subcats.map((sub, si) => {
|
||||
const subAngle = angle - 25 + (si * 38); // More spacing
|
||||
const subAngle = angle - 25 + (si * 38);
|
||||
const subRad = (subAngle * Math.PI) / 180;
|
||||
const subX = x + Math.cos(subRad) * subRadius;
|
||||
const subY = y + Math.sin(subRad) * subRadius;
|
||||
const isSubActive = activeSubcategories.includes(`${cat.id}:${sub.id}`);
|
||||
// Inverted logic: active if NOT in excluded list, or if list is empty
|
||||
const catSubs = activeSubcategories.filter(s => s.startsWith(cat.id + ":"));
|
||||
const isSubActive = catSubs.length === 0 || activeSubcategories.includes(`${cat.id}:${sub.id}`);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={`${cat.id}-${sub.id}`}
|
||||
className={`fab-item fab-sub ${isSubActive ? "is-active" : ""}`}
|
||||
className={`fab-item fab-sub ${isSubActive ? "is-active" : "is-excluded"}`}
|
||||
style={{
|
||||
"--x": `${subX}px`,
|
||||
"--y": `${subY}px`,
|
||||
|
|
|
|||
Loading…
Reference in New Issue