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

43
static/style.css
View File

@ -355,3 +355,46 @@
white-space: pre-wrap; white-space: pre-wrap;
font-family: monospace; font-family: monospace;
} }
/* Two-state toggle (scope: defaults / overwrites). The label preceding the
switch tells the user what the two ends mean; the thumb position shows
which is active. Click anywhere on the track to flip. */
.se-toggle {
position: relative;
width: 2.2rem;
height: 1.1rem;
flex-shrink: 0;
border: 1px solid #555;
border-radius: 0.55rem;
background: #2a2a2a;
cursor: pointer;
padding: 0;
}
.se-toggle::after {
content: '';
position: absolute;
top: 1px;
left: 1px;
width: 0.85rem;
height: 0.85rem;
border-radius: 50%;
background: #999;
transition: transform 0.12s ease, background 0.12s ease;
}
.se-toggle[aria-checked="true"] {
background: #2d4a2d;
border-color: #4a7a4a;
}
.se-toggle[aria-checked="true"]::after {
transform: translateX(1.1rem);
background: #b0e0b0;
}
.se-toggle-label {
font-size: 0.7rem;
color: #888;
user-select: none;
min-width: 4em;
}
.se-toggle-label.active {
color: #d8d8d8;
}