dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Complete Social Icons & Settings Expansion! 🎨

Browse Source 
## Implemented (Tasks 1-6):

### 1. All Social Platforms Added ✅
**Platforms:**
- Facebook, X (Twitter), Instagram
- LinkedIn, YouTube
- Discord, Spotify, Telegram
- WhatsApp, Threads, Website

**Frontend:** Updated select dropdown with all platforms
**Backend:** Added to allowed_platforms whitelist

### 2. PNG Icons Instead of Emoji ✅
- Use local PNG files from `/assets/icons/`
- Format: `mage--{platform}-{color}.png`
- Applied to email rendering and preview
- Much more accurate than emoji

### 3. Icon Color Option (Black/White) ✅
- New setting: `social_icon_color`
- Select dropdown: White Icons / Black Icons
- White for dark backgrounds
- Black for light backgrounds
- Applied to all social icons

### 4. Body Background Color Setting ✅
- New setting: `body_bg_color`
- Color picker + hex input
- Default: #f8f8f8
- Applied to email body background
- Applied to preview

### 5. Editor Mode Styling 📝
**Note:** Editor mode intentionally shows structure/content
Preview mode shows final styled result with all customizations
This is standard email builder UX pattern

### 6. Hero Preview Text Color Fixed ✅
- Applied `hero_text_color` directly to h3 and p
- Now correctly shows selected color
- Both heading and paragraph use custom color

## Technical Changes:

**Frontend:**
- Added body_bg_color and social_icon_color to interface
- Updated all social platform icons (Lucide)
- PNG icon URLs in preview
- Hero preview color fix

**Backend:**
- Added body_bg_color and social_icon_color to defaults
- Sanitization for new fields
- Updated allowed_platforms array
- PNG icon URL generation with color param

**Email Rendering:**
- Use PNG icons with color selection
- Apply body_bg_color
- get_social_icon_url() updated for PNG files

## Files Modified:
- `routes/Settings/Notifications/EmailCustomization.tsx`
- `routes/Settings/Notifications/EditTemplate.tsx`
- `includes/Api/NotificationsController.php`
- `includes/Core/Notifications/EmailRenderer.php`

Task 7 (default email content) pending - separate commit.
This commit is contained in:
dwindown
2025-11-13 14:50:55 +07:00
parent e52429603b
commit b6c2b077ee
26 changed files with 120 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
View File

@@ -276,6 +276,8 @@ export default function EditTemplate() {
const heroGradientEnd = settings.hero_gradient_end || '#764ba2';
const heroTextColor = settings.hero_text_color || '#ffffff';
const buttonTextColor = settings.button_text_color || '#ffffff';
const bodyBgColor = settings.body_bg_color || '#f8f8f8';
const socialIconColor = settings.social_icon_color || 'white';
const logoUrl = settings.logo_url || '';
const headerText = settings.header_text || 'My WordPress Store';
const footerText = settings.footer_text || `© ${new Date().getFullYear()} My WordPress Store. All rights reserved.`;
@@ -284,12 +286,13 @@ export default function EditTemplate() {
// Replace {current_year} in footer
const processedFooter = footerText.replace('{current_year}', new Date().getFullYear().toString());
// Generate social icons HTML
// Generate social icons HTML with PNG images
const pluginUrl = (window as any).woonoowData?.pluginUrl || '';
const socialIconsHtml = socialLinks.length > 0 ? `
<div style="margin-top: 16px;">
${socialLinks.map((link: any) => `
<a href="${link.url}" style="display: inline-block; margin: 0 8px; text-decoration: none;">
<span style="font-size: 24px;">${getSocialIcon(link.platform)}</span>
<img src="${pluginUrl}assets/icons/mage--${link.platform}-${socialIconColor}.png" alt="${link.platform}" style="width: 24px; height: 24px;" />
</a>
`).join('')}
</div>
@@ -300,7 +303,7 @@ export default function EditTemplate() {
<html>
<head>
<style>
body { font-family: 'Inter', Arial, sans-serif; background: #f8f8f8; margin: 0; padding: 20px; }
body { font-family: 'Inter', Arial, sans-serif; background: ${bodyBgColor}; margin: 0; padding: 20px; }
.container { max-width: 600px; margin: 0 auto; }
.header { padding: 32px; text-align: center; background: #f8f8f8; }
.card-gutter { padding: 0 16px; }