mgonzalez/linkedsign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add FirmaEC signature style and bump to 1.2.17

Browse Source
This commit is contained in:
Milton Gonzalez
2026-05-21 22:07:22 -05:00
parent 5d7d610322
commit 8bc244855c
12 changed files with 199 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/SignatureStylePicker.jsx
+57 -2
View File
@@ -1,4 +1,4 @@
import { QrCode, Briefcase, Stamp, PanelsLeftBottom, PanelsRightBottom, CircleOff, Square } from 'lucide-react';
import { QrCode, Briefcase, Stamp, PanelsLeftBottom, PanelsRightBottom, CircleOff, Square, ShieldCheck } from 'lucide-react';
const getQrPreviewWidth = (name = '') => {
const extraWidth = Math.max(0, name.trim().length - 18) * 4;
@@ -84,6 +84,61 @@ const STYLES = [
</div>
),
},
{
id: 'firmaec',
label: 'FirmaEC',
icon: ShieldCheck,
desc: 'Formato oficial FirmaEC: QR de validación + nombre en negrita',
preview: ({ name, qrPosition = 'left', qrBackground = 'transparent', qrBorder = 'none' }) => (
<div
className="sig-preview sig-preview--firmaec"
data-background={qrBackground}
data-border={qrBorder}
>
{qrPosition === 'left' && (
<>
<div className="sp-qr-box sp-qr-box--firmaec" data-background={qrBackground}>
<svg viewBox="0 0 10 10" className="sp-qr-svg" xmlns="http://www.w3.org/2000/svg">
{[0,1,2,3,4,5,6,7,8,9].map(r =>
[0,1,2,3,4,5,6,7,8,9].map(c => {
const v = ((r * 3 + c * 7 + r ^ c) % 3 === 0);
return v ? <rect key={`${r}-${c}`} x={c} y={r} width={1} height={1} fill="#000" /> : null;
})
)}
<rect x={0} y={0} width={3} height={3} fill="none" stroke="#000" strokeWidth={0.3} />
<rect x={7} y={0} width={3} height={3} fill="none" stroke="#000" strokeWidth={0.3} />
<rect x={0} y={7} width={3} height={3} fill="none" stroke="#000" strokeWidth={0.3} />
</svg>
</div>
<div className="sp-divider-v" />
</>
)}
<div className="sp-firmaec-text">
<span>Validar únicamente en FirmaEC.</span>
<span>Firmado electrónicamente por:</span>
<strong>{name.toUpperCase()}</strong>
</div>
{qrPosition === 'right' && (
<>
<div className="sp-divider-v" />
<div className="sp-qr-box sp-qr-box--firmaec" data-background={qrBackground}>
<svg viewBox="0 0 10 10" className="sp-qr-svg" xmlns="http://www.w3.org/2000/svg">
{[0,1,2,3,4,5,6,7,8,9].map(r =>
[0,1,2,3,4,5,6,7,8,9].map(c => {
const v = ((r * 3 + c * 7 + r ^ c) % 3 === 0);
return v ? <rect key={`${r}-${c}`} x={c} y={r} width={1} height={1} fill="#000" /> : null;
})
)}
<rect x={0} y={0} width={3} height={3} fill="none" stroke="#000" strokeWidth={0.3} />
<rect x={7} y={0} width={3} height={3} fill="none" stroke="#000" strokeWidth={0.3} />
<rect x={0} y={7} width={3} height={3} fill="none" stroke="#000" strokeWidth={0.3} />
</svg>
</div>
</>
)}
</div>
),
},
{
id: 'professional',
label: 'Profesional',
@@ -145,7 +200,7 @@ export default function SignatureStylePicker({
})}
</div>
<p className="style-card-desc">{s.desc}</p>
{s.id === 'qr' && isActive && (
{(s.id === 'qr' || s.id === 'firmaec') && isActive && (
<div className="style-card-inline-tools">
<div className="style-inline-group">
<button
frontend/src/index.css
+49
View File
@@ -1868,6 +1868,55 @@ select {
flex-direction: column;
gap: 2px;
}
.sig-preview--firmaec {
display: flex;
align-items: stretch;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.12);
padding: 8px;
gap: 8px;
}
.sig-preview--firmaec[data-background='soft'] {
background: #eef2ff;
}
.sig-preview--firmaec[data-border='line'] {
border-color: rgba(0, 0, 0, 0.45);
border-width: 1.5px;
}
.sp-qr-box--firmaec {
background: #fff;
}
.sp-qr-box--firmaec[data-background='soft'] {
background: #f5f5f5;
}
.sp-firmaec-text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
flex: 1;
min-width: 0;
font-family: 'Courier New', Courier, monospace;
}
.sp-firmaec-text span {
font-size: 8.5px;
color: #1a1a1a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sp-firmaec-text strong {
font-size: 11px;
font-weight: 800;
color: #0d0d0d;
white-space: normal;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: 'Courier New', Courier, monospace;
}
.sig-preview--image {
display: flex;
align-items: stretch;