diff --git a/modules/rsocials/components/campaign-wizard.css b/modules/rsocials/components/campaign-wizard.css index 437b7e5..046e6ae 100644 --- a/modules/rsocials/components/campaign-wizard.css +++ b/modules/rsocials/components/campaign-wizard.css @@ -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); } diff --git a/modules/rsocials/components/folk-campaign-wizard.ts b/modules/rsocials/components/folk-campaign-wizard.ts index c94c5f6..b05c537 100644 --- a/modules/rsocials/components/folk-campaign-wizard.ts +++ b/modules/rsocials/components/folk-campaign-wizard.ts @@ -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 ``; + return ``; }).join(''); return `
@@ -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(); });