kevinguevara/brandly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Expose Blend Mode selector for brand-variable and static fields

Browse Source
This commit is contained in:
kevinguevaradevia@gmail.com
2026-06-02 23:10:35 -05:00
parent 0abfa2b8ed
commit 419e25a87b
1 changed files with 34 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/express/builder/FieldConfigPanel.tsx
+34 -30
View File
@@ -396,6 +396,40 @@ export const FieldConfigPanel: React.FC = () => {
resolvedDesignMD={resolvedDesignMD} resolvedDesignMD={resolvedDesignMD}
/> />
{/* ── Blend Mode (Image/Video only) ── */}
{(field.type === 'image' || field.type === 'video') && (
<div className="space-y-1 mt-2">
<label className="text-[9px] text-neutral-500 flex items-center justify-between">
Modo de Fusión (Blend)
<div className="group relative">
<HelpCircle size={10} className="text-neutral-400 hover:text-white cursor-help" />
<div className="absolute right-0 bottom-full mb-2 w-48 p-2 bg-neutral-900 border border-neutral-700 rounded-lg text-[10px] text-neutral-300 hidden group-hover:block z-50 shadow-xl pointer-events-none">
<ul className="space-y-1">
<li><strong className="text-white">Normal:</strong> Sin efecto.</li>
<li><strong className="text-white">Screen:</strong> Elimina fondos negros. Ideal para brillos o fuego.</li>
<li><strong className="text-white">Multiply:</strong> Elimina fondos blancos. Ideal para bocetos o texturas oscuras.</li>
<li><strong className="text-white">Overlay:</strong> Aumenta el contraste combinando oscuros y claros.</li>
</ul>
</div>
</div>
</label>
<select
value={field.style.blendMode || 'normal'}
onChange={(e) => updateField(field.id, {
style: { ...field.style, blendMode: e.target.value as any }
})}
className="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1.5 text-xs text-white focus:border-violet-500/50 focus:outline-none"
>
<option value="normal">Normal</option>
<option value="multiply">Multiply (Elimina Blanco)</option>
<option value="screen">Screen (Elimina Negro)</option>
<option value="overlay">Overlay</option>
<option value="soft-light">Soft Light</option>
<option value="color-dodge">Color Dodge</option>
</select>
</div>
)}
{/* ── Rules (editable-slot only) ── */} {/* ── Rules (editable-slot only) ── */}
{field.nature === 'editable-slot' && ( {field.nature === 'editable-slot' && (
<CollapsibleSection title="Reglas de validación" defaultOpen={false}> <CollapsibleSection title="Reglas de validación" defaultOpen={false}>
@@ -451,36 +485,6 @@ export const FieldConfigPanel: React.FC = () => {
/> />
</div> </div>
{/* Blend Mode */}
<div className="space-y-1 mt-2 border-t border-neutral-800 pt-2">
<label className="text-[9px] text-neutral-500 flex items-center justify-between">
Modo de Fusión (Blend)
<div className="group relative">
<HelpCircle size={10} className="text-neutral-400 hover:text-white cursor-help" />
<div className="absolute right-0 bottom-full mb-2 w-48 p-2 bg-neutral-900 border border-neutral-700 rounded-lg text-[10px] text-neutral-300 hidden group-hover:block z-50 shadow-xl pointer-events-none">
<ul className="space-y-1">
<li><strong className="text-white">Normal:</strong> Sin efecto.</li>
<li><strong className="text-white">Screen:</strong> Elimina fondos negros. Ideal para brillos o fuego.</li>
<li><strong className="text-white">Multiply:</strong> Elimina fondos blancos. Ideal para bocetos o texturas oscuras.</li>
<li><strong className="text-white">Overlay:</strong> Aumenta el contraste combinando oscuros y claros.</li>
</ul>
</div>
</div>
</label>
<select
value={field.style.blendMode || 'normal'}
onChange={(e) => updateField(field.id, {
style: { ...field.style, blendMode: e.target.value as any }
})}
className="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1.5 text-xs text-white focus:border-violet-500/50 focus:outline-none"
>
<option value="normal">Normal</option>
<option value="multiply">Multiply (Elimina Blanco)</option>
<option value="screen">Screen (Elimina Negro)</option>
<option value="overlay">Overlay</option>
<option value="soft-light">Soft Light</option>
<option value="color-dodge">Color Dodge</option>
</select>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<div className="flex-1 space-y-1"> <div className="flex-1 space-y-1">