shadowdaoandClaude Sonnet 5.5
4a11a9e344
CollapsibleSection persists open/closed per section title via local-prefs. Container/Section/Columns drop the shorthand padding preset grid; the per-side Padding control expands a legacy shorthand and writes all four longhands in one undo step (new SpacingControl onChangeAll). Refs #35 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
BG_COLORS,
|
|
SPACING_PRESETS,
|
|
} from '../../../constants/presets';
|
|
import {
|
|
StylePanelProps,
|
|
SectionLabel,
|
|
ColorSwatchGrid,
|
|
GradientSwatchGrid,
|
|
PresetButtonGrid,
|
|
CollapsibleSection,
|
|
ColorPickerField,
|
|
labelStyle,
|
|
inputStyle,
|
|
sectionGap,
|
|
useNodeProp,
|
|
} from './shared';
|
|
import { AssetPicker } from '../../../ui/AssetPicker';
|
|
|
|
/* ---------- BACKGROUND SECTION ---------- */
|
|
export const BackgroundSectionStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
|
|
const { setProp, setPropStyle, setPropContinuous } = useNodeProp(selectedId);
|
|
|
|
const style = nodeProps.style || {};
|
|
|
|
return (
|
|
<>
|
|
{/* Background Image */}
|
|
<CollapsibleSection title="Background Image">
|
|
<AssetPicker value={nodeProps.bgImage || ''} onChange={(url) => setProp('bgImage', url)} variant="full" />
|
|
</CollapsibleSection>
|
|
|
|
{/* Background Color */}
|
|
<CollapsibleSection title="Background Color">
|
|
<ColorPickerField label="Background" value={nodeProps.bgColor || '#1e293b'} onChange={(v) => setPropContinuous('bgColor', v)} />
|
|
</CollapsibleSection>
|
|
|
|
{/* Overlay */}
|
|
<CollapsibleSection title="Overlay">
|
|
<ColorPickerField label="Overlay Color" value={nodeProps.overlayColor || '#000000'} onChange={(v) => setPropContinuous('overlayColor', v)} />
|
|
<div style={sectionGap}>
|
|
<label style={labelStyle}>Opacity: {Math.round((nodeProps.overlayOpacity ?? 0.4) * 100)}%</label>
|
|
<input type="range" min={0} max={100} value={Math.round((nodeProps.overlayOpacity ?? 0.4) * 100)}
|
|
onChange={(e) => setPropContinuous('overlayOpacity', parseInt(e.target.value) / 100)} style={{ width: '100%' }} />
|
|
</div>
|
|
</CollapsibleSection>
|
|
|
|
{/* Layout */}
|
|
<CollapsibleSection title="Layout">
|
|
<div style={sectionGap}>
|
|
<label style={labelStyle}>Inner Max Width</label>
|
|
<input type="text" value={nodeProps.innerMaxWidth || '1200px'}
|
|
onChange={(e) => setPropContinuous('innerMaxWidth', e.target.value)} style={inputStyle} />
|
|
</div>
|
|
<div className="guided-section">
|
|
<SectionLabel>Padding</SectionLabel>
|
|
<PresetButtonGrid presets={SPACING_PRESETS} activeValue={style.padding as string} onSelect={(v) => setPropStyle('padding', v)} />
|
|
</div>
|
|
</CollapsibleSection>
|
|
</>
|
|
);
|
|
};
|