flow/vue3js-app-proposal-for-sdk-claude
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Article scope: render an actual sliding toggle, not an ASCII-labelled button

Browse Source 
Previous commit took the user's (O-) / (-O) shorthand literally and put
those glyphs as the button label. They were describing the visual states
of a real toggle switch, not text to display.

Now: pill-shaped track with a sliding circular thumb, "default" and
"overwrite" labels flanking it (the active side brightens). The button
carries role="switch" + aria-checked for accessibility. Click anywhere
on the track to flip and mark the score dirty.
This commit is contained in:
c0dev0id
2026-06-28 20:37:53 +02:00
parent 133117922a
commit a91b5747a3
2 changed files with 57 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
static/components/PaneFO.js
View File

@@ -155,25 +155,25 @@ export const PaneFO = {
);
} else if (node.type === 'article') {
const markDirty = () => props.store.markDirty();
const SCOPES = ['defaults', 'overwrites'];
const scopeLabel = s => s === 'defaults' ? '(O-) default' : '(-O) overwrite';
children.push(
h('h4', H4, `Article: ${node.name}`),
h('ul', { class: 'se-article-props', style: 'list-style:none;padding:0;margin:0' },
node.properties.map((p, idx) =>
h('li', { key: idx, style: 'display:flex;gap:0.5rem;align-items:center;padding:0.25rem 0' }, [
node.properties.map((p, idx) => {
const isOverwrite = p.scope === 'overwrites';
const flip = () => { p.scope = isOverwrite ? 'defaults' : 'overwrites'; markDirty(); };
return h('li', { key: idx, style: 'display:flex;gap:0.5rem;align-items:center;padding:0.25rem 0' }, [
h('span', { style: 'flex:1' }, `${p.name} = ${p.value}`),
h('span', { class: ['se-toggle-label', !isOverwrite ? 'active' : null], style: 'text-align:right' }, 'default'),
h('button', {
class: ['se-scope-toggle', `scope-${p.scope}`],
style: 'font-family:monospace;min-width:8em',
onClick: () => {
const i = SCOPES.indexOf(p.scope);
p.scope = SCOPES[(i + 1) % SCOPES.length];
markDirty();
},
}, scopeLabel(p.scope)),
])
)
class: 'se-toggle',
role: 'switch',
'aria-checked': String(isOverwrite),
title: isOverwrite ? 'overwrites — click to switch to defaults' : 'defaults — click to switch to overwrites',
onClick: flip,
}),
h('span', { class: ['se-toggle-label', isOverwrite ? 'active' : null] }, 'overwrite'),
]);
})
),
);
} else if (node.type === 'bar') {