feat: Complete Social Icons & Settings Expansion! 🎨
## 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
@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { __ } from '@/lib/i18n';
|
||||
import { ArrowLeft, RefreshCw, Upload, Plus, Trash2, Facebook, Twitter, Instagram, Linkedin, Youtube, Globe } from 'lucide-react';
|
||||
import { ArrowLeft, RefreshCw, Upload, Plus, Trash2, Facebook, Twitter, Instagram, Linkedin, Youtube, Globe, MessageCircle, Music, Send, AtSign } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { openWPMediaLogo } from '@/lib/wp-media';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
@@ -25,6 +25,8 @@ interface EmailSettings {
|
||||
hero_gradient_end: string;
|
||||
hero_text_color: string;
|
||||
button_text_color: string;
|
||||
body_bg_color: string;
|
||||
social_icon_color: string;
|
||||
logo_url: string;
|
||||
header_text: string;
|
||||
footer_text: string;
|
||||
@@ -46,6 +48,8 @@ export default function EmailCustomization() {
|
||||
hero_gradient_end: '#764ba2',
|
||||
hero_text_color: '#ffffff',
|
||||
button_text_color: '#ffffff',
|
||||
body_bg_color: '#f8f8f8',
|
||||
social_icon_color: 'white',
|
||||
logo_url: '',
|
||||
header_text: '',
|
||||
footer_text: '',
|
||||
@@ -60,6 +64,8 @@ export default function EmailCustomization() {
|
||||
hero_gradient_end: '#764ba2',
|
||||
hero_text_color: '#ffffff',
|
||||
button_text_color: '#ffffff',
|
||||
body_bg_color: '#f8f8f8',
|
||||
social_icon_color: 'white',
|
||||
logo_url: '',
|
||||
header_text: '',
|
||||
footer_text: '',
|
||||
@@ -151,10 +157,15 @@ export default function EmailCustomization() {
|
||||
const getSocialIcon = (platform: string) => {
|
||||
const icons: Record<string, any> = {
|
||||
facebook: Facebook,
|
||||
twitter: Twitter,
|
||||
x: AtSign,
|
||||
instagram: Instagram,
|
||||
linkedin: Linkedin,
|
||||
youtube: Youtube,
|
||||
discord: MessageCircle,
|
||||
spotify: Music,
|
||||
telegram: Send,
|
||||
whatsapp: MessageCircle,
|
||||
threads: AtSign,
|
||||
website: Globe,
|
||||
};
|
||||
const Icon = icons[platform] || Globe;
|
||||
@@ -334,11 +345,10 @@ export default function EmailCustomization() {
|
||||
|
||||
{/* Preview */}
|
||||
<div className="mt-4 p-6 rounded-lg text-center" style={{
|
||||
background: `linear-gradient(135deg, ${formData.hero_gradient_start} 0%, ${formData.hero_gradient_end} 100%)`,
|
||||
color: formData.hero_text_color
|
||||
background: `linear-gradient(135deg, ${formData.hero_gradient_start} 0%, ${formData.hero_gradient_end} 100%)`
|
||||
}}>
|
||||
<h3 className="text-xl font-bold mb-2">{__('Preview')}</h3>
|
||||
<p className="text-sm opacity-90">{__('This is how your hero cards will look')}</p>
|
||||
<h3 className="text-xl font-bold mb-2" style={{ color: formData.hero_text_color }}>{__('Preview')}</h3>
|
||||
<p className="text-sm opacity-90" style={{ color: formData.hero_text_color }}>{__('This is how your hero cards will look')}</p>
|
||||
</div>
|
||||
</SettingsCard>
|
||||
|
||||
@@ -396,6 +406,56 @@ export default function EmailCustomization() {
|
||||
</div>
|
||||
</SettingsCard>
|
||||
|
||||
{/* Email Background & Social Icons */}
|
||||
<SettingsCard
|
||||
title={__('Email Background & Social Icons')}
|
||||
description={__('Customize email background and social icon colors')}
|
||||
>
|
||||
<div className="grid gap-6 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="body_bg_color">{__('Email Background Color')}</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="body_bg_color"
|
||||
type="color"
|
||||
value={formData.body_bg_color}
|
||||
onChange={(e) => handleChange('body_bg_color', e.target.value)}
|
||||
className="w-20 h-10 p-1 cursor-pointer"
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
value={formData.body_bg_color}
|
||||
onChange={(e) => handleChange('body_bg_color', e.target.value)}
|
||||
placeholder="#f8f8f8"
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{__('Background color for the email body')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="social_icon_color">{__('Social Icon Color')}</Label>
|
||||
<Select
|
||||
value={formData.social_icon_color}
|
||||
onValueChange={(value) => handleChange('social_icon_color', value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="white">{__('White Icons')}</SelectItem>
|
||||
<SelectItem value="black">{__('Black Icons')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{__('Choose white icons for dark backgrounds, black for light backgrounds')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsCard>
|
||||
|
||||
{/* Logo & Branding */}
|
||||
<SettingsCard
|
||||
title={__('Logo & Branding')}
|
||||
@@ -505,10 +565,10 @@ export default function EmailCustomization() {
|
||||
Facebook
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="twitter">
|
||||
<SelectItem value="x">
|
||||
<div className="flex items-center gap-2">
|
||||
<Twitter className="h-4 w-4" />
|
||||
Twitter
|
||||
<AtSign className="h-4 w-4" />
|
||||
X (Twitter)
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="instagram">
|
||||
@@ -529,6 +589,36 @@ export default function EmailCustomization() {
|
||||
YouTube
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="discord">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageCircle className="h-4 w-4" />
|
||||
Discord
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="spotify">
|
||||
<div className="flex items-center gap-2">
|
||||
<Music className="h-4 w-4" />
|
||||
Spotify
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="telegram">
|
||||
<div className="flex items-center gap-2">
|
||||
<Send className="h-4 w-4" />
|
||||
Telegram
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="whatsapp">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageCircle className="h-4 w-4" />
|
||||
WhatsApp
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="threads">
|
||||
<div className="flex items-center gap-2">
|
||||
<AtSign className="h-4 w-4" />
|
||||
Threads
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="website">
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="h-4 w-4" />
|
||||
|
||||
Reference in New Issue
Block a user