jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(rsocials): use checkboxes for campaign wizard platform selectors 

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-24 14:22:49 -07:00
parent 4e6d0b885b
commit 5f25ae02e1
2 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
modules/rsocials/components/campaign-wizard.css
View File

@ -422,9 +422,9 @@
.cw-platform-chip { .cw-platform-chip {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.3rem; gap: 0.4rem;
padding: 0.35rem 0.7rem; padding: 0.35rem 0.7rem;
border-radius: 20px; border-radius: 6px;
border: 1px solid var(--rs-border, #444); border: 1px solid var(--rs-border, #444);
background: transparent; background: transparent;
color: var(--rs-text-muted, #64748b); color: var(--rs-text-muted, #64748b);
@ -435,13 +435,25 @@
text-transform: capitalize; text-transform: capitalize;
} }
.cw-platform-chip input[type="checkbox"] {
accent-color: var(--rs-accent, #14b8a6);
width: 14px;
height: 14px;
margin: 0;
cursor: pointer;
}
.cw-platform-chip span {
pointer-events: none;
}
.cw-platform-chip:hover { .cw-platform-chip:hover {
border-color: var(--rs-accent, #14b8a6); border-color: var(--rs-accent, #14b8a6);
color: var(--rs-text-primary, #e1e1e1); color: var(--rs-text-primary, #e1e1e1);
} }
.cw-platform-chip--active { .cw-platform-chip--active {
background: rgba(20, 184, 166, 0.15); background: rgba(20, 184, 166, 0.1);
border-color: var(--rs-accent, #14b8a6); border-color: var(--rs-accent, #14b8a6);
color: var(--rs-accent, #14b8a6); color: var(--rs-accent, #14b8a6);
} }

25
modules/rsocials/components/folk-campaign-wizard.ts
View File

@ -380,7 +380,10 @@ export class FolkCampaignWizard extends HTMLElement {
const allPlatforms = ['x', 'linkedin', 'instagram', 'youtube', 'threads', 'bluesky', 'newsletter']; const allPlatforms = ['x', 'linkedin', 'instagram', 'youtube', 'threads', 'bluesky', 'newsletter'];
const platformChips = allPlatforms.map(p => { const platformChips = allPlatforms.map(p => {
const active = this._selectedPlatforms.has(p); const active = this._selectedPlatforms.has(p);
return `<button class="cw-platform-chip ${active ? 'cw-platform-chip--active' : ''}" data-platform="${p}">${PLATFORM_ICONS[p] || ''} ${p}</button>`; return `<label class="cw-platform-chip ${active ? 'cw-platform-chip--active' : ''}">
<input type="checkbox" data-platform="${p}" ${active ? 'checked' : ''}>
<span>${PLATFORM_ICONS[p] || ''} ${p}</span>
</label>`;
}).join(''); }).join('');
return `<div class="cw-panel"> return `<div class="cw-panel">
@ -616,16 +619,18 @@ export class FolkCampaignWizard extends HTMLElement {
}); });
} }
// Platform chip toggles // Platform checkbox toggles
sr.querySelectorAll('[data-platform]').forEach(el => { sr.querySelectorAll('input[data-platform]').forEach(el => {
el.addEventListener('click', () => { el.addEventListener('change', () => {
const plat = el.getAttribute('data-platform')!; const cb = el as HTMLInputElement;
if (this._selectedPlatforms.has(plat)) { const plat = cb.getAttribute('data-platform')!;
if (this._selectedPlatforms.size > 1) { if (cb.checked) {
this._selectedPlatforms.delete(plat);
}
} else {
this._selectedPlatforms.add(plat); this._selectedPlatforms.add(plat);
} else if (this._selectedPlatforms.size > 1) {
this._selectedPlatforms.delete(plat);
} else {
cb.checked = true; // prevent unchecking the last one
return;
} }
this.render(); this.render();
}); });