687a2318b0
Core Features: - Add Quick Setup Wizard for new users with multi-step flow - Implement distraction-free onboarding layout (no sidebar/header) - Create OnboardingController API endpoint for saving settings - Redirect new users to /setup automatically on first admin access Onboarding Components: - StepMode: Select between full/minimal store modes - StepHomepage: Choose or auto-create homepage - StepAppearance: Configure container width and primary color - StepProgress: Visual progress indicator Navigation & Routing: - Fix Help page links to use react-router navigation (prevent full reload) - Update onboarding completion redirect to /appearance/pages - Add manual onboarding access via Settings > Store Details UI/UX Improvements: - Enable dark mode support for Page Editor - Fix page title rendering in onboarding dropdown - Improve title fallback logic (title.rendered, title, post_title) Type Safety: - Unify PageItem interface across all components - Add 'default' to containerWidth type definition - Add missing properties (permalink_base, has_template, icon) Files Modified: - includes/Api/OnboardingController.php - includes/Api/Routes.php - includes/Admin/Assets.php - admin-spa/src/App.tsx - admin-spa/src/routes/Onboarding/* - admin-spa/src/routes/Help/DocContent.tsx - admin-spa/src/routes/Settings/Store.tsx - admin-spa/src/routes/Appearance/Pages/*
798 lines
53 KiB
TypeScript
798 lines
53 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { __ } from '@/lib/i18n';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from '@/components/ui/accordion';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Slider } from '@/components/ui/slider';
|
|
import {
|
|
Settings,
|
|
PanelRightClose,
|
|
PanelRight,
|
|
Trash2,
|
|
ExternalLink,
|
|
Palette,
|
|
Type,
|
|
Home
|
|
} from 'lucide-react';
|
|
import { InspectorField, SectionProp } from './InspectorField';
|
|
import { InspectorRepeater } from './InspectorRepeater';
|
|
import { MediaUploader } from '@/components/MediaUploader';
|
|
import { SectionStyles, ElementStyle, PageItem } from '../store/usePageEditorStore';
|
|
|
|
interface Section {
|
|
id: string;
|
|
type: string;
|
|
layoutVariant?: string;
|
|
colorScheme?: string;
|
|
styles?: SectionStyles;
|
|
elementStyles?: Record<string, ElementStyle>;
|
|
props: Record<string, SectionProp>;
|
|
}
|
|
|
|
interface InspectorPanelProps {
|
|
page: PageItem | null;
|
|
selectedSection: Section | null;
|
|
isCollapsed: boolean;
|
|
isTemplate: boolean;
|
|
availableSources: { value: string; label: string }[];
|
|
onToggleCollapse: () => void;
|
|
onSectionPropChange: (propName: string, value: SectionProp) => void;
|
|
onLayoutChange: (layout: string) => void;
|
|
onColorSchemeChange: (scheme: string) => void;
|
|
onSectionStylesChange: (styles: Partial<SectionStyles>) => void;
|
|
onElementStylesChange: (fieldName: string, styles: Partial<ElementStyle>) => void;
|
|
onDeleteSection: () => void;
|
|
onSetAsSpaLanding?: () => void;
|
|
onUnsetSpaLanding?: () => void;
|
|
onDeletePage?: () => void;
|
|
onContainerWidthChange?: (width: 'boxed' | 'fullwidth') => void;
|
|
}
|
|
|
|
// Section field configurations
|
|
const SECTION_FIELDS: Record<string, { name: string; label: string; type: 'text' | 'textarea' | 'url' | 'image' | 'rte'; dynamic?: boolean }[]> = {
|
|
hero: [
|
|
{ name: 'title', label: 'Title', type: 'text', dynamic: true },
|
|
{ name: 'subtitle', label: 'Subtitle', type: 'text', dynamic: true },
|
|
{ name: 'image', label: 'Image URL', type: 'url', dynamic: true },
|
|
{ name: 'cta_text', label: 'Button Text', type: 'text' },
|
|
{ name: 'cta_url', label: 'Button URL', type: 'url' },
|
|
],
|
|
content: [
|
|
{ name: 'content', label: 'Content', type: 'rte', dynamic: true },
|
|
{ name: 'cta_text', label: 'Button Text', type: 'text' },
|
|
{ name: 'cta_url', label: 'Button URL', type: 'url' },
|
|
],
|
|
'image-text': [
|
|
{ name: 'title', label: 'Title', type: 'text', dynamic: true },
|
|
{ name: 'text', label: 'Text', type: 'textarea', dynamic: true },
|
|
{ name: 'image', label: 'Image URL', type: 'url', dynamic: true },
|
|
{ name: 'cta_text', label: 'Button Text', type: 'text' },
|
|
{ name: 'cta_url', label: 'Button URL', type: 'url' },
|
|
],
|
|
'feature-grid': [
|
|
{ name: 'heading', label: 'Heading', type: 'text' },
|
|
],
|
|
'cta-banner': [
|
|
{ name: 'title', label: 'Title', type: 'text' },
|
|
{ name: 'text', label: 'Description', type: 'text' },
|
|
{ name: 'button_text', label: 'Button Text', type: 'text' },
|
|
{ name: 'button_url', label: 'Button URL', type: 'url' },
|
|
],
|
|
'contact-form': [
|
|
{ name: 'title', label: 'Title', type: 'text' },
|
|
{ name: 'webhook_url', label: 'Webhook URL', type: 'url' },
|
|
{ name: 'redirect_url', label: 'Redirect URL', type: 'url' },
|
|
],
|
|
};
|
|
|
|
const LAYOUT_OPTIONS: Record<string, { value: string; label: string }[]> = {
|
|
hero: [
|
|
{ value: 'default', label: 'Centered' },
|
|
{ value: 'hero-left-image', label: 'Image Left' },
|
|
{ value: 'hero-right-image', label: 'Image Right' },
|
|
],
|
|
'image-text': [
|
|
{ value: 'image-left', label: 'Image Left' },
|
|
{ value: 'image-right', label: 'Image Right' },
|
|
],
|
|
'feature-grid': [
|
|
{ value: 'grid-2', label: '2 Columns' },
|
|
{ value: 'grid-3', label: '3 Columns' },
|
|
{ value: 'grid-4', label: '4 Columns' },
|
|
],
|
|
content: [
|
|
{ value: 'default', label: 'Full Width' },
|
|
{ value: 'narrow', label: 'Narrow' },
|
|
{ value: 'medium', label: 'Medium' },
|
|
],
|
|
};
|
|
|
|
const COLOR_SCHEMES = [
|
|
{ value: 'default', label: 'Default' },
|
|
{ value: 'primary', label: 'Primary' },
|
|
{ value: 'secondary', label: 'Secondary' },
|
|
{ value: 'muted', label: 'Muted' },
|
|
{ value: 'gradient', label: 'Gradient' },
|
|
];
|
|
|
|
const STYLABLE_ELEMENTS: Record<string, { name: string; label: string; type: 'text' | 'image' }[]> = {
|
|
hero: [
|
|
{ name: 'title', label: 'Title', type: 'text' },
|
|
{ name: 'subtitle', label: 'Subtitle', type: 'text' },
|
|
{ name: 'image', label: 'Image', type: 'image' },
|
|
{ name: 'cta_text', label: 'Button', type: 'text' },
|
|
],
|
|
content: [
|
|
{ name: 'heading', label: 'Headings', type: 'text' },
|
|
{ name: 'text', label: 'Body Text', type: 'text' },
|
|
{ name: 'link', label: 'Links', type: 'text' },
|
|
{ name: 'image', label: 'Images', type: 'image' },
|
|
{ name: 'button', label: 'Button', type: 'text' },
|
|
{ name: 'content', label: 'Container', type: 'text' }, // Keep for backward compat or wrapper style
|
|
],
|
|
'image-text': [
|
|
{ name: 'title', label: 'Title', type: 'text' },
|
|
{ name: 'text', label: 'Text', type: 'text' },
|
|
{ name: 'image', label: 'Image', type: 'image' },
|
|
{ name: 'button', label: 'Button', type: 'text' },
|
|
],
|
|
'feature-grid': [
|
|
{ name: 'heading', label: 'Heading', type: 'text' },
|
|
{ name: 'feature_item', label: 'Feature Item (Card)', type: 'text' },
|
|
],
|
|
'cta-banner': [
|
|
{ name: 'title', label: 'Title', type: 'text' },
|
|
{ name: 'text', label: 'Description', type: 'text' },
|
|
{ name: 'button_text', label: 'Button', type: 'text' },
|
|
],
|
|
'contact-form': [
|
|
{ name: 'title', label: 'Title', type: 'text' },
|
|
{ name: 'button', label: 'Button', type: 'text' },
|
|
{ name: 'fields', label: 'Input Fields', type: 'text' },
|
|
],
|
|
};
|
|
|
|
export function InspectorPanel({
|
|
page,
|
|
selectedSection,
|
|
isCollapsed,
|
|
isTemplate,
|
|
availableSources,
|
|
onToggleCollapse,
|
|
onSectionPropChange,
|
|
onLayoutChange,
|
|
onColorSchemeChange,
|
|
onSectionStylesChange,
|
|
onElementStylesChange,
|
|
onDeleteSection,
|
|
onSetAsSpaLanding,
|
|
onUnsetSpaLanding,
|
|
onDeletePage,
|
|
onContainerWidthChange,
|
|
}: InspectorPanelProps) {
|
|
if (isCollapsed) {
|
|
return (
|
|
<div className="w-10 border-l bg-white flex flex-col items-center py-4">
|
|
<Button variant="ghost" size="icon" onClick={onToggleCollapse} className="mb-4">
|
|
<PanelRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!selectedSection) {
|
|
return (
|
|
<div className="w-80 border-l bg-white flex flex-col h-full">
|
|
<div className="flex items-center justify-between p-4 border-b shrink-0">
|
|
<h3 className="font-semibold text-sm">{__('Page Settings')}</h3>
|
|
<Button variant="ghost" size="icon" onClick={onToggleCollapse} className="h-8 w-8">
|
|
<PanelRightClose className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="p-4 space-y-4 overflow-y-auto">
|
|
<div className="flex items-center gap-2 text-sm font-medium text-gray-700">
|
|
<Settings className="w-4 h-4" />
|
|
{isTemplate ? __('Template Info') : __('Page Info')}
|
|
</div>
|
|
<div className="space-y-4 bg-gray-50 p-3 rounded-lg border">
|
|
<div>
|
|
<Label className="text-xs text-gray-500 uppercase tracking-wider">{__('Type')}</Label>
|
|
<p className="text-sm font-medium">
|
|
{isTemplate ? __('Template (Dynamic)') : __('Page (Structural)')}
|
|
</p>
|
|
</div>
|
|
{page?.title && (
|
|
<div>
|
|
<Label className="text-xs text-gray-500 uppercase tracking-wider">{__('Title')}</Label>
|
|
<p className="text-sm font-medium">{page.title}</p>
|
|
</div>
|
|
)}
|
|
{page?.url && (
|
|
<div>
|
|
<Label className="text-xs text-gray-500 uppercase tracking-wider">{__('URL')}</Label>
|
|
<a href={page.url} target="_blank" rel="noopener noreferrer" className="text-sm text-blue-600 hover:underline flex items-center gap-1 mt-1">
|
|
{__('View Page')}
|
|
<ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
</div>
|
|
)}
|
|
|
|
{/* SPA Landing Settings - Only for Pages */}
|
|
{!isTemplate && page && (
|
|
<div className="pt-2 border-t mt-2">
|
|
<Label className="text-xs text-gray-500 uppercase tracking-wider block mb-2">{__('SPA Landing Page')}</Label>
|
|
{page.isSpaLanding ? (
|
|
<div className="space-y-2">
|
|
<div className="bg-green-50 text-green-700 px-3 py-2 rounded-md text-sm flex items-center gap-2 border border-green-100">
|
|
<Home className="w-4 h-4" />
|
|
<span className="font-medium">{__('This is your SPA Landing')}</span>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full text-red-600 hover:text-red-700 hover:bg-red-50 border-red-200"
|
|
onClick={onUnsetSpaLanding}
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
{__('Unset Landing Page')}
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full justify-start"
|
|
onClick={onSetAsSpaLanding}
|
|
>
|
|
<Home className="w-4 h-4 mr-2" />
|
|
{__('Set as SPA Landing')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Container Width */}
|
|
{!isTemplate && page && onContainerWidthChange && (
|
|
<div className="pt-2 border-t mt-2">
|
|
<Label className="text-xs text-gray-500 uppercase tracking-wider block mb-2">{__('Container Width')}</Label>
|
|
<RadioGroup
|
|
value={page.containerWidth || 'boxed'}
|
|
onValueChange={(val: any) => onContainerWidthChange(val)}
|
|
className="gap-2"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="boxed" id="cw-boxed" />
|
|
<Label htmlFor="cw-boxed" className="text-sm font-normal cursor-pointer">{__('Boxed')}</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="fullwidth" id="cw-full" />
|
|
<Label htmlFor="cw-full" className="text-sm font-normal cursor-pointer">{__('Full Width')}</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="default" id="cw-default" />
|
|
<Label htmlFor="cw-default" className="text-sm font-normal cursor-pointer text-gray-500">{__('Default (SPA Settings)')}</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
)}
|
|
|
|
{/* Danger Zone */}
|
|
{!isTemplate && page && onDeletePage && (
|
|
<div className="pt-2 border-t mt-2">
|
|
<Label className="text-xs text-red-600 uppercase tracking-wider block mb-2">{__('Danger Zone')}</Label>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full justify-start text-red-600 hover:text-red-700 hover:bg-red-50 border-red-200"
|
|
onClick={onDeletePage}
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
{__('Delete This Page')}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="bg-blue-50 text-blue-800 p-3 rounded text-xs leading-relaxed">
|
|
{__('Select any section on the canvas to edit its content and design.')}
|
|
</div>
|
|
</div>
|
|
</div >
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"w-80 border-l bg-white flex flex-col transition-all duration-300 shadow-xl z-30",
|
|
isCollapsed && "w-0 overflow-hidden border-none"
|
|
)}
|
|
>
|
|
{/* Header */}
|
|
<div className="h-14 border-b flex items-center justify-between px-4 shrink-0 bg-white">
|
|
<span className="font-semibold text-sm truncate">
|
|
{SECTION_FIELDS[selectedSection.type]
|
|
? (selectedSection.type.charAt(0).toUpperCase() + selectedSection.type.slice(1)).replace('-', ' ')
|
|
: 'Settings'}
|
|
</span>
|
|
<Button variant="ghost" size="icon" onClick={onToggleCollapse} className="h-8 w-8 hover:bg-gray-100">
|
|
<PanelRightClose className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Content Tabs (Content vs Design) */}
|
|
<Tabs defaultValue="content" className="flex-1 flex flex-col overflow-hidden">
|
|
<div className="px-4 pt-4 shrink-0 bg-white">
|
|
<TabsList className="w-full grid grid-cols-2">
|
|
<TabsTrigger value="content">{__('Content')}</TabsTrigger>
|
|
<TabsTrigger value="design">{__('Design')}</TabsTrigger>
|
|
</TabsList>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
{/* Content Tab */}
|
|
<TabsContent value="content" className="p-4 space-y-6 m-0">
|
|
{/* Structure & Presets */}
|
|
<div className="space-y-4">
|
|
<h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">{__('Structure')}</h4>
|
|
{LAYOUT_OPTIONS[selectedSection.type] && (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">{__('Layout Variant')}</Label>
|
|
<Select
|
|
value={selectedSection.layoutVariant || 'default'}
|
|
onValueChange={onLayoutChange}
|
|
>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
{LAYOUT_OPTIONS[selectedSection.type].map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">{__('Preset Scheme')}</Label>
|
|
<Select
|
|
value={selectedSection.colorScheme || 'default'}
|
|
onValueChange={onColorSchemeChange}
|
|
>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
{COLOR_SCHEMES.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full h-px bg-gray-100" />
|
|
|
|
{/* Fields */}
|
|
<div className="space-y-4">
|
|
<h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">{__('Fields')}</h4>
|
|
{SECTION_FIELDS[selectedSection.type]?.map((field) => (
|
|
<React.Fragment key={field.name}>
|
|
<InspectorField
|
|
fieldName={field.name}
|
|
fieldLabel={field.label}
|
|
fieldType={field.type}
|
|
value={selectedSection.props[field.name] || { type: 'static', value: '' }}
|
|
onChange={(val) => onSectionPropChange(field.name, val)}
|
|
supportsDynamic={field.dynamic && isTemplate}
|
|
availableSources={availableSources}
|
|
/>
|
|
{selectedSection.type === 'contact-form' && field.name === 'redirect_url' && (
|
|
<p className="text-[10px] text-gray-500 mt-1 pl-1">
|
|
Available shortcodes: {'{name}'}, {'{email}'}, {'{date}'}
|
|
</p>
|
|
)}
|
|
{selectedSection.type === 'contact-form' && field.name === 'webhook_url' && (
|
|
<Accordion type="single" collapsible className="w-full mt-1 border rounded-md">
|
|
<AccordionItem value="payload" className="border-0">
|
|
<AccordionTrigger className="text-[10px] py-1 px-2 hover:no-underline text-gray-500">
|
|
View Payload Example
|
|
</AccordionTrigger>
|
|
<AccordionContent className="px-2 pb-2">
|
|
<pre className="text-[10px] bg-gray-50 p-2 rounded overflow-x-auto">
|
|
{JSON.stringify({
|
|
"form_id": "contact_form_123",
|
|
"fields": {
|
|
"name": "John Doe",
|
|
"email": "john@example.com",
|
|
"message": "Hello world"
|
|
},
|
|
"meta": {
|
|
"url": "https://site.com/contact",
|
|
"timestamp": 1710000000
|
|
}
|
|
}, null, 2)}
|
|
</pre>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
|
|
{/* Feature Grid Repeater */}
|
|
{selectedSection.type === 'feature-grid' && (
|
|
<div className="pt-4 border-t">
|
|
<InspectorRepeater
|
|
label={__('Features')}
|
|
items={Array.isArray(selectedSection.props.features?.value) ? selectedSection.props.features.value : []}
|
|
onChange={(items) => onSectionPropChange('features', { type: 'static', value: items })}
|
|
fields={[
|
|
{ name: 'title', label: 'Title', type: 'text' },
|
|
{ name: 'description', label: 'Description', type: 'textarea' },
|
|
{ name: 'icon', label: 'Icon', type: 'icon' },
|
|
]}
|
|
itemLabelKey="title"
|
|
/>
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
{/* Design Tab */}
|
|
<TabsContent value="design" className="p-4 space-y-6 m-0">
|
|
{/* Background */}
|
|
<div className="space-y-4">
|
|
<h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">{__('Background')}</h4>
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">{__('Background Color')}</Label>
|
|
<div className="flex gap-2">
|
|
<div className="relative w-8 h-8 rounded border shadow-sm shrink-0 overflow-hidden">
|
|
<div className="absolute inset-0" style={{ backgroundColor: selectedSection.styles?.backgroundColor || 'transparent' }} />
|
|
<input
|
|
type="color"
|
|
className="absolute inset-0 opacity-0 cursor-pointer w-full h-full p-0 border-0"
|
|
value={selectedSection.styles?.backgroundColor || '#ffffff'}
|
|
onChange={(e) => onSectionStylesChange({ backgroundColor: e.target.value })}
|
|
/>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
placeholder="#FFFFFF"
|
|
className="flex-1 h-8 rounded-md border border-input bg-background px-3 py-1 text-sm"
|
|
value={selectedSection.styles?.backgroundColor || ''}
|
|
onChange={(e) => onSectionStylesChange({ backgroundColor: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">{__('Background Image')}</Label>
|
|
<MediaUploader type="image" onSelect={(url) => onSectionStylesChange({ backgroundImage: url })}>
|
|
{selectedSection.styles?.backgroundImage ? (
|
|
<div className="relative group cursor-pointer border rounded overflow-hidden h-24 bg-gray-50">
|
|
<img src={selectedSection.styles.backgroundImage} alt="Background" className="w-full h-full object-cover" />
|
|
<div className="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span className="text-white text-xs font-medium">{__('Change')}</span>
|
|
</div>
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); onSectionStylesChange({ backgroundImage: '' }); }}
|
|
className="absolute top-1 right-1 bg-white/90 p-1 rounded-full text-gray-600 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
>
|
|
<Trash2 className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<Button variant="outline" className="w-full h-24 border-dashed flex flex-row gap-2 text-gray-400 font-normal">
|
|
<Palette className="w-6 h-6" />
|
|
{__('Select Image')}
|
|
</Button>
|
|
)}
|
|
</MediaUploader>
|
|
</div>
|
|
|
|
<div className="space-y-3 pt-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs">{__('Overlay Opacity')}</Label>
|
|
<span className="text-xs text-gray-500">{selectedSection.styles?.backgroundOverlay ?? 0}%</span>
|
|
</div>
|
|
<Slider
|
|
value={[selectedSection.styles?.backgroundOverlay ?? 0]}
|
|
max={100}
|
|
step={5}
|
|
onValueChange={(vals) => onSectionStylesChange({ backgroundOverlay: vals[0] })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2 pt-2">
|
|
<Label className="text-xs">{__('Section Height')}</Label>
|
|
<Select
|
|
value={selectedSection.styles?.heightPreset || 'default'}
|
|
onValueChange={(val) => {
|
|
// Map presets to padding values
|
|
const paddingMap: Record<string, string> = {
|
|
'default': '0',
|
|
'small': '0',
|
|
'medium': '0',
|
|
'large': '0',
|
|
'screen': '0',
|
|
};
|
|
const padding = paddingMap[val] || '4rem';
|
|
|
|
// If screen, we might need a specific flag, but for now lets reuse paddingTop/Bottom or add a new prop.
|
|
// To avoid breaking schema, let's use paddingTop as the "preset carrier" or add a new styles prop if possible.
|
|
// Since styles key is SectionStyles, let's stick to modifying paddingTop/Bottom for now as a simple preset.
|
|
|
|
onSectionStylesChange({
|
|
paddingTop: padding,
|
|
paddingBottom: padding,
|
|
heightPreset: val // We'll add this to interface
|
|
} as any);
|
|
}}
|
|
>
|
|
<SelectTrigger><SelectValue placeholder="Height" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="default">Default</SelectItem>
|
|
<SelectItem value="small">Small (Compact)</SelectItem>
|
|
<SelectItem value="medium">Medium</SelectItem>
|
|
<SelectItem value="large">Large (Spacious)</SelectItem>
|
|
<SelectItem value="screen">Full Screen</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div className="w-full h-px bg-gray-100" />
|
|
|
|
{/* Element Styles */}
|
|
<div className="space-y-4">
|
|
<h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">{__('Element Styles')}</h4>
|
|
|
|
<Accordion type="single" collapsible className="w-full">
|
|
{(STYLABLE_ELEMENTS[selectedSection.type] || []).map((field) => {
|
|
const styles = selectedSection.elementStyles?.[field.name] || {};
|
|
const isImage = field.type === 'image';
|
|
|
|
return (
|
|
<AccordionItem key={field.name} value={field.name}>
|
|
<AccordionTrigger className="text-xs hover:no-underline py-2">{field.label}</AccordionTrigger>
|
|
<AccordionContent className="space-y-4 pt-2">
|
|
{/* Common: Background Wrapper */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs text-gray-500">{__('Background (Wrapper)')}</Label>
|
|
<div className="flex items-center gap-2">
|
|
<div className="relative w-6 h-6 rounded border shadow-sm shrink-0 overflow-hidden">
|
|
<div className="absolute inset-0" style={{ backgroundColor: styles.backgroundColor || 'transparent' }} />
|
|
<input
|
|
type="color"
|
|
className="absolute inset-0 opacity-0 cursor-pointer w-full h-full p-0 border-0"
|
|
value={styles.backgroundColor || '#ffffff'}
|
|
onChange={(e) => onElementStylesChange(field.name, { backgroundColor: e.target.value })}
|
|
/>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
placeholder="Color (#fff)"
|
|
className="flex-1 h-7 text-xs rounded border px-2"
|
|
value={styles.backgroundColor || ''}
|
|
onChange={(e) => onElementStylesChange(field.name, { backgroundColor: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{!isImage ? (
|
|
<>
|
|
{/* Text Color */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs text-gray-500">{__('Text Color')}</Label>
|
|
<div className="flex items-center gap-2">
|
|
<div className="relative w-6 h-6 rounded border shadow-sm shrink-0 overflow-hidden">
|
|
<div className="absolute inset-0" style={{ backgroundColor: styles.color || '#000000' }} />
|
|
<input
|
|
type="color"
|
|
className="absolute inset-0 opacity-0 cursor-pointer w-full h-full p-0 border-0"
|
|
value={styles.color || '#000000'}
|
|
onChange={(e) => onElementStylesChange(field.name, { color: e.target.value })}
|
|
/>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
placeholder="Color (#000)"
|
|
className="flex-1 h-7 text-xs rounded border px-2"
|
|
value={styles.color || ''}
|
|
onChange={(e) => onElementStylesChange(field.name, { color: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Typography Group */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs text-gray-500">{__('Typography')}</Label>
|
|
|
|
<Select value={styles.fontFamily || 'default'} onValueChange={(val) => onElementStylesChange(field.name, { fontFamily: val === 'default' ? undefined : val as any })}>
|
|
<SelectTrigger className="h-7 text-xs"><SelectValue placeholder="Font Family" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="default">Default</SelectItem>
|
|
<SelectItem value="primary">Primary (Headings)</SelectItem>
|
|
<SelectItem value="secondary">Secondary (Body)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<Select value={styles.fontSize || 'default'} onValueChange={(val) => onElementStylesChange(field.name, { fontSize: val === 'default' ? undefined : val })}>
|
|
<SelectTrigger className="h-7 text-xs"><SelectValue placeholder="Size" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="default">Default Size</SelectItem>
|
|
<SelectItem value="text-sm">Small</SelectItem>
|
|
<SelectItem value="text-base">Base</SelectItem>
|
|
<SelectItem value="text-lg">Large</SelectItem>
|
|
<SelectItem value="text-xl">XL</SelectItem>
|
|
<SelectItem value="text-2xl">2XL</SelectItem>
|
|
<SelectItem value="text-3xl">3XL</SelectItem>
|
|
<SelectItem value="text-4xl">4XL</SelectItem>
|
|
<SelectItem value="text-5xl">5XL</SelectItem>
|
|
<SelectItem value="text-6xl">6XL</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={styles.fontWeight || 'default'} onValueChange={(val) => onElementStylesChange(field.name, { fontWeight: val === 'default' ? undefined : val })}>
|
|
<SelectTrigger className="h-7 text-xs"><SelectValue placeholder="Weight" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="default">Default Weight</SelectItem>
|
|
<SelectItem value="font-light">Light</SelectItem>
|
|
<SelectItem value="font-normal">Normal</SelectItem>
|
|
<SelectItem value="font-medium">Medium</SelectItem>
|
|
<SelectItem value="font-semibold">Semibold</SelectItem>
|
|
<SelectItem value="font-bold">Bold</SelectItem>
|
|
<SelectItem value="font-extrabold">Extra Bold</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<Select value={styles.textAlign || 'default'} onValueChange={(val) => onElementStylesChange(field.name, { textAlign: val === 'default' ? undefined : val as any })}>
|
|
<SelectTrigger className="h-7 text-xs"><SelectValue placeholder="Alignment" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="default">Default Align</SelectItem>
|
|
<SelectItem value="left">Left</SelectItem>
|
|
<SelectItem value="center">Center</SelectItem>
|
|
<SelectItem value="right">Right</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Link Specific Styles */}
|
|
{field.name === 'link' && (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs text-gray-500">{__('Link Styles')}</Label>
|
|
<Select value={styles.textDecoration || 'default'} onValueChange={(val) => onElementStylesChange(field.name, { textDecoration: val === 'default' ? undefined : val as any })}>
|
|
<SelectTrigger className="h-7 text-xs"><SelectValue placeholder="Decoration" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="default">Default</SelectItem>
|
|
<SelectItem value="none">None</SelectItem>
|
|
<SelectItem value="underline">Underline</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-400">{__('Hover Color')}</Label>
|
|
<div className="flex items-center gap-2">
|
|
<div className="relative w-6 h-6 rounded border shadow-sm shrink-0 overflow-hidden">
|
|
<div className="absolute inset-0" style={{ backgroundColor: styles.hoverColor || 'transparent' }} />
|
|
<input
|
|
type="color"
|
|
className="absolute inset-0 opacity-0 cursor-pointer w-full h-full p-0 border-0"
|
|
value={styles.hoverColor || '#000000'}
|
|
onChange={(e) => onElementStylesChange(field.name, { hoverColor: e.target.value })}
|
|
/>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
placeholder="Hover Color"
|
|
className="flex-1 h-7 text-xs rounded border px-2"
|
|
value={styles.hoverColor || ''}
|
|
onChange={(e) => onElementStylesChange(field.name, { hoverColor: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Button/Box Specific Styles */}
|
|
{field.name === 'button' && (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs text-gray-500">{__('Box Styles')}</Label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-400">{__('Border Color')}</Label>
|
|
<div className="flex items-center gap-2 h-7">
|
|
<div className="relative w-6 h-6 rounded border shadow-sm shrink-0 overflow-hidden">
|
|
<div className="absolute inset-0" style={{ backgroundColor: styles.borderColor || 'transparent' }} />
|
|
<input
|
|
type="color"
|
|
className="absolute inset-0 opacity-0 cursor-pointer w-full h-full p-0 border-0"
|
|
value={styles.borderColor || '#000000'}
|
|
onChange={(e) => onElementStylesChange(field.name, { borderColor: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-400">{__('Border Width')}</Label>
|
|
<input type="text" placeholder="e.g. 1px" className="w-full h-7 text-xs rounded border px-2" value={styles.borderWidth || ''} onChange={(e) => onElementStylesChange(field.name, { borderWidth: e.target.value })} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-400">{__('Radius')}</Label>
|
|
<input type="text" placeholder="e.g. 4px" className="w-full h-7 text-xs rounded border px-2" value={styles.borderRadius || ''} onChange={(e) => onElementStylesChange(field.name, { borderRadius: e.target.value })} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-400">{__('Padding')}</Label>
|
|
<input type="text" placeholder="e.g. 8px 16px" className="w-full h-7 text-xs rounded border px-2" value={styles.padding || ''} onChange={(e) => onElementStylesChange(field.name, { padding: e.target.value })} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
{/* Image Settings */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs text-gray-500">{__('Image Fit')}</Label>
|
|
<Select value={styles.objectFit || 'default'} onValueChange={(val) => onElementStylesChange(field.name, { objectFit: val === 'default' ? undefined : val as any })}>
|
|
<SelectTrigger className="h-7 text-xs"><SelectValue placeholder="Object Fit" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="default">Default</SelectItem>
|
|
<SelectItem value="cover">Cover</SelectItem>
|
|
<SelectItem value="contain">Contain</SelectItem>
|
|
<SelectItem value="fill">Fill</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-500">{__('Width')}</Label>
|
|
<input type="text" placeholder="e.g. 100%" className="w-full h-7 text-xs rounded border px-2" value={styles.width || ''} onChange={(e) => onElementStylesChange(field.name, { width: e.target.value })} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-500">{__('Height')}</Label>
|
|
<input type="text" placeholder="e.g. auto" className="w-full h-7 text-xs rounded border px-2" value={styles.height || ''} onChange={(e) => onElementStylesChange(field.name, { height: e.target.value })} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
);
|
|
})}
|
|
</Accordion>
|
|
</div>
|
|
</TabsContent>
|
|
</div>
|
|
|
|
{/* Footer - Delete Button */}
|
|
{
|
|
selectedSection && (
|
|
<div className="p-4 border-t mt-auto shrink-0 bg-gray-50/50">
|
|
<Button variant="destructive" className="w-full" onClick={onDeleteSection}>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
{__('Delete Section')}
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
</Tabs >
|
|
</div >
|
|
);
|
|
}
|