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

feat: Add Blend Mode support to Video and Image template fields

Browse Source
This commit is contained in:
kevinguevaradevia@gmail.com
2026-06-02 23:01:58 -05:00
parent e85d8eabcc
commit 0abfa2b8ed
3 changed files with 36 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/express/builder/FieldConfigPanel.tsx
+33 -1
View File
@@ -1,7 +1,7 @@
import React from 'react';
import {
Settings2, Tag, ToggleLeft, Type, Image as ImageIcon, Video, Pentagon,
Zap, AlertCircle, Hash, Eye, EyeOff, ArrowLeftRight,
Zap, AlertCircle, Hash, Eye, EyeOff, ArrowLeftRight, HelpCircle
} from 'lucide-react';
import { TemplateField, TemplateFieldNature, TemplateFieldType, BrandSource, StickerConfig } from '../../../types';
import { useTemplateBuilder } from '../../../context/TemplateBuilderContext';
@@ -450,6 +450,38 @@ export const FieldConfigPanel: React.FC = () => {
className="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-xs text-white focus:border-violet-500/50 focus:outline-none"
/>
</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 className="flex gap-2">
<div className="flex-1 space-y-1">
<label className="text-[9px] text-neutral-500">Ancho mín.</label>