diff options
Diffstat (limited to 'public/bluebey-studio/src/ui.js')
| -rw-r--r-- | public/bluebey-studio/src/ui.js | 15 |
1 files changed, 13 insertions, 2 deletions
diff --git a/public/bluebey-studio/src/ui.js b/public/bluebey-studio/src/ui.js index e184f5e..46c5adb 100644 --- a/public/bluebey-studio/src/ui.js +++ b/public/bluebey-studio/src/ui.js @@ -36,10 +36,12 @@ export function toast(message) { toastTimer = setTimeout(() => node.classList.remove('show'), 2400); } -export function section(parent, title, { open = false } = {}) { +export function section(parent, title, { open = false, icon = null } = {}) { const body = h('div', { class: 'sec-body' }); const head = h('button', { type: 'button', class: 'sec-head' }, - h('span', { text: title }), + h('span', { class: 'sec-title' }, + icon ? secIcon(icon) : null, + h('span', { text: title })), h('span', { class: 'chev', text: '▾' })); const el = h('section', { class: `sec${open ? '' : ' closed'}` }, head, body); head.addEventListener('click', () => el.classList.toggle('closed')); @@ -83,6 +85,15 @@ function tabIcon(d) { return svg; } +function secIcon(d) { + const svg = tabIcon(d); + svg.setAttribute('class', 'sec-icon'); + svg.setAttribute('width', '16'); + svg.setAttribute('height', '16'); + svg.style.verticalAlign = 'middle'; + return svg; +} + /** * Tabbed container: returns the per-tab panels to fill in. When a definition * carries an `icon` (an SVG path `d`) the tab shows only that icon, and the |