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 {
display: inline-flex;
align-items: center;
gap: 0.3rem;
gap: 0.4rem;
padding: 0.35rem 0.7rem;
border-radius: 20px;
border-radius: 6px;
border: 1px solid var(--rs-border, #444);
background: transparent;
color: var(--rs-text-muted, #64748b);
@ -435,13 +435,25 @@
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 {
border-color: var(--rs-accent, #14b8a6);
color: var(--rs-text-primary, #e1e1e1);
}
.cw-platform-chip--active {
background: rgba(20, 184, 166, 0.15);
background: rgba(20, 184, 166, 0.1);
border-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 platformChips = allPlatforms.map(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('');
return `<div class="cw-panel">
@ -616,16 +619,18 @@ export class FolkCampaignWizard extends HTMLElement {
});
}
// Platform chip toggles
sr.querySelectorAll('[data-platform]').forEach(el => {
el.addEventListener('click', () => {
const plat = el.getAttribute('data-platform')!;
if (this._selectedPlatforms.has(plat)) {
if (this._selectedPlatforms.size > 1) {
this._selectedPlatforms.delete(plat);
}
} else {
// Platform checkbox toggles
sr.querySelectorAll('input[data-platform]').forEach(el => {
el.addEventListener('change', () => {
const cb = el as HTMLInputElement;
const plat = cb.getAttribute('data-platform')!;
if (cb.checked) {
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();
});