feat(design): add 16 new components + update 5 pages (ronda 2)
Bloqueantes POS: modal-pago, ticket-termico, banner-cliente, fkeys-footer, columnas-costo-margen Componentes nuevos: calculadora-cambio, panel-deslizante, badge-cfdi, arbol-colapsable, tarjeta-metrica, grafica-barras, selector-periodo, etiqueta-codigo-barras Estados: estado-vacio, banner-offline, modal-confirmacion Páginas actualizadas: facturación, contabilidad, dashboard, configuración, reportes
This commit is contained in:
Lucy
338
docs/design/design-system/components/fkeys-footer.html
Normal file
338
docs/design/design-system/components/fkeys-footer.html
Normal file
@@ -0,0 +1,338 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es" data-theme="industrial">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nexus Autoparts — F-Keys Footer</title>
|
||||
<link rel="stylesheet" href="../tokens/tokens.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: var(--font-body); background: var(--color-bg-base);
|
||||
color: var(--color-text-primary); padding: var(--space-8);
|
||||
padding-bottom: 120px;
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
.theme-switcher {
|
||||
position: sticky; top: 0; z-index: calc(var(--z-modal) + 10);
|
||||
display: flex; gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--color-bg-elevated);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin: calc(-1 * var(--space-8)); margin-bottom: var(--space-8);
|
||||
}
|
||||
.theme-switcher button {
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-base); color: var(--color-text-primary);
|
||||
border-radius: var(--radius-md); cursor: pointer;
|
||||
font-family: var(--font-body); font-size: var(--text-body-sm);
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
.theme-switcher button.active {
|
||||
background: var(--color-primary); color: var(--color-text-inverse);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
h1 { font-family: var(--font-heading); font-size: var(--text-h2);
|
||||
font-weight: var(--heading-weight-primary); margin-bottom: var(--space-2);
|
||||
color: var(--color-text-accent); }
|
||||
.subtitle { color: var(--color-text-muted); font-size: var(--text-body); margin-bottom: var(--space-8); }
|
||||
section { margin-bottom: var(--space-10); }
|
||||
section > h2 {
|
||||
font-family: var(--font-heading); font-size: var(--text-h4);
|
||||
font-weight: var(--heading-weight-secondary); color: var(--color-text-secondary);
|
||||
margin-bottom: var(--space-4); padding-bottom: var(--space-2);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.label-text {
|
||||
font-size: var(--text-caption); color: var(--color-text-muted);
|
||||
text-transform: uppercase; letter-spacing: var(--tracking-widest);
|
||||
font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
/* ====== F-Keys Footer Bar ====== */
|
||||
.fkeys-footer {
|
||||
position: fixed; bottom: 0; left: 0; right: 0;
|
||||
background: var(--color-surface-2);
|
||||
border-top: 2px solid var(--color-primary);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
gap: var(--space-1);
|
||||
z-index: var(--z-sticky);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.fkey {
|
||||
display: flex; align-items: center; gap: var(--space-1);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: transparent; border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer; transition: var(--transition-fast);
|
||||
white-space: nowrap; flex-shrink: 0;
|
||||
}
|
||||
.fkey:hover {
|
||||
background: var(--color-primary-muted);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.fkey:active {
|
||||
background: var(--color-primary);
|
||||
transform: scale(0.96);
|
||||
}
|
||||
.fkey:active .fkey-label { color: var(--color-text-inverse); }
|
||||
.fkey:active .fkey-key { background: rgba(0,0,0,0.2); color: var(--color-text-inverse); border-color: transparent; }
|
||||
|
||||
.fkey-key {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
min-width: 28px; height: 22px;
|
||||
padding: 0 var(--space-2);
|
||||
background: var(--color-bg-base);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-mono); font-size: 11px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-accent);
|
||||
line-height: 1;
|
||||
}
|
||||
.fkey-label {
|
||||
font-size: var(--text-caption);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Separator */
|
||||
.fkey-sep {
|
||||
width: 1px; height: 24px;
|
||||
background: var(--color-border);
|
||||
margin: 0 var(--space-1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Highlight key (F3 = Cobrar) */
|
||||
.fkey.highlight {
|
||||
background: var(--color-primary-muted);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.fkey.highlight .fkey-key {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.fkey.highlight .fkey-label {
|
||||
color: var(--color-text-accent);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
/* ====== Inline Preview (non-fixed) ====== */
|
||||
.fkeys-inline {
|
||||
position: relative;
|
||||
background: var(--color-surface-2);
|
||||
border: 2px solid var(--color-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
gap: var(--space-1);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ====== Responsive: Stack on mobile ====== */
|
||||
@media (max-width: 768px) {
|
||||
.fkeys-footer, .fkeys-inline {
|
||||
flex-wrap: wrap; gap: var(--space-1);
|
||||
padding: var(--space-2);
|
||||
}
|
||||
.fkey {
|
||||
padding: var(--space-1) var(--space-2);
|
||||
}
|
||||
.fkey-label { font-size: 10px; }
|
||||
.fkey-key { min-width: 24px; height: 20px; font-size: 10px; }
|
||||
.fkey-sep { display: none; }
|
||||
}
|
||||
|
||||
/* ====== Compact variant ====== */
|
||||
.fkeys-compact .fkey {
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border: none; background: transparent;
|
||||
}
|
||||
.fkeys-compact .fkey:hover {
|
||||
background: var(--color-primary-muted);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.fkeys-compact .fkey-key {
|
||||
min-width: 22px; height: 18px; font-size: 10px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.fkeys-compact .fkey-label { font-size: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Theme Switcher -->
|
||||
<div class="theme-switcher">
|
||||
<button class="active" onclick="setTheme('industrial')">A — Industrial Robusto</button>
|
||||
<button onclick="setTheme('modern')">B — Técnico Moderno</button>
|
||||
</div>
|
||||
|
||||
<h1>F-Keys Footer</h1>
|
||||
<p class="subtitle">Barra fija inferior con atajos de teclado del POS: F1-F6, +/-, *, Esc.</p>
|
||||
|
||||
<!-- ============================================== -->
|
||||
<!-- SECTION: Standard Footer -->
|
||||
<!-- ============================================== -->
|
||||
<section>
|
||||
<h2>Barra Estándar (Fixed Bottom)</h2>
|
||||
<p class="label-text">Preview inline — la barra real se muestra fija abajo de la página</p>
|
||||
|
||||
<div class="fkeys-inline">
|
||||
<div class="fkey" title="Buscar producto">
|
||||
<span class="fkey-key">F1</span>
|
||||
<span class="fkey-label">Buscar</span>
|
||||
</div>
|
||||
<div class="fkey" title="Seleccionar cliente">
|
||||
<span class="fkey-key">F2</span>
|
||||
<span class="fkey-label">Cliente</span>
|
||||
</div>
|
||||
<div class="fkey highlight" title="Cobrar venta">
|
||||
<span class="fkey-key">F3</span>
|
||||
<span class="fkey-label">Cobrar</span>
|
||||
</div>
|
||||
<div class="fkey" title="Generar cotización">
|
||||
<span class="fkey-key">F4</span>
|
||||
<span class="fkey-label">Cotización</span>
|
||||
</div>
|
||||
<div class="fkey-sep"></div>
|
||||
<div class="fkey" title="Última venta">
|
||||
<span class="fkey-key">F5</span>
|
||||
<span class="fkey-label">Últ.Venta</span>
|
||||
</div>
|
||||
<div class="fkey" title="Abrir cajón de dinero">
|
||||
<span class="fkey-key">F6</span>
|
||||
<span class="fkey-label">Cajón</span>
|
||||
</div>
|
||||
<div class="fkey-sep"></div>
|
||||
<div class="fkey" title="Aumentar / Disminuir cantidad">
|
||||
<span class="fkey-key">+/-</span>
|
||||
<span class="fkey-label">Cantidad</span>
|
||||
</div>
|
||||
<div class="fkey" title="Aplicar descuento">
|
||||
<span class="fkey-key">*</span>
|
||||
<span class="fkey-label">Descuento</span>
|
||||
</div>
|
||||
<div class="fkey-sep"></div>
|
||||
<div class="fkey" title="Cancelar / Limpiar venta">
|
||||
<span class="fkey-key">Esc</span>
|
||||
<span class="fkey-label">Cancelar</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================== -->
|
||||
<!-- SECTION: Compact Variant -->
|
||||
<!-- ============================================== -->
|
||||
<section>
|
||||
<h2>Variante Compacta</h2>
|
||||
<p class="label-text">Para pantallas chicas o cuando se necesita más espacio</p>
|
||||
|
||||
<div class="fkeys-inline fkeys-compact">
|
||||
<div class="fkey"><span class="fkey-key">F1</span><span class="fkey-label">Buscar</span></div>
|
||||
<div class="fkey"><span class="fkey-key">F2</span><span class="fkey-label">Cliente</span></div>
|
||||
<div class="fkey highlight"><span class="fkey-key">F3</span><span class="fkey-label">Cobrar</span></div>
|
||||
<div class="fkey"><span class="fkey-key">F4</span><span class="fkey-label">Cotización</span></div>
|
||||
<div class="fkey"><span class="fkey-key">F5</span><span class="fkey-label">Últ.Venta</span></div>
|
||||
<div class="fkey"><span class="fkey-key">F6</span><span class="fkey-label">Cajón</span></div>
|
||||
<div class="fkey"><span class="fkey-key">+/-</span><span class="fkey-label">Cant</span></div>
|
||||
<div class="fkey"><span class="fkey-key">*</span><span class="fkey-label">Desc</span></div>
|
||||
<div class="fkey"><span class="fkey-key">Esc</span><span class="fkey-label">Salir</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================== -->
|
||||
<!-- SECTION: Extended keys -->
|
||||
<!-- ============================================== -->
|
||||
<section>
|
||||
<h2>Variante Extendida (Admin)</h2>
|
||||
<p class="label-text">Teclas adicionales para rol Admin/Owner</p>
|
||||
|
||||
<div class="fkeys-inline">
|
||||
<div class="fkey"><span class="fkey-key">F1</span><span class="fkey-label">Buscar</span></div>
|
||||
<div class="fkey"><span class="fkey-key">F2</span><span class="fkey-label">Cliente</span></div>
|
||||
<div class="fkey highlight"><span class="fkey-key">F3</span><span class="fkey-label">Cobrar</span></div>
|
||||
<div class="fkey"><span class="fkey-key">F4</span><span class="fkey-label">Cotización</span></div>
|
||||
<div class="fkey"><span class="fkey-key">F5</span><span class="fkey-label">Últ.Venta</span></div>
|
||||
<div class="fkey"><span class="fkey-key">F6</span><span class="fkey-label">Cajón</span></div>
|
||||
<div class="fkey-sep"></div>
|
||||
<div class="fkey"><span class="fkey-key">F7</span><span class="fkey-label">Corte</span></div>
|
||||
<div class="fkey"><span class="fkey-key">F8</span><span class="fkey-label">Devolución</span></div>
|
||||
<div class="fkey"><span class="fkey-key">F9</span><span class="fkey-label">Inventario</span></div>
|
||||
<div class="fkey-sep"></div>
|
||||
<div class="fkey"><span class="fkey-key">+/-</span><span class="fkey-label">Cant</span></div>
|
||||
<div class="fkey"><span class="fkey-key">*</span><span class="fkey-label">Desc</span></div>
|
||||
<div class="fkey"><span class="fkey-key">Esc</span><span class="fkey-label">Cancelar</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================== -->
|
||||
<!-- SECTION: Individual Key States -->
|
||||
<!-- ============================================== -->
|
||||
<section>
|
||||
<h2>Estados de Tecla</h2>
|
||||
<p class="label-text">Normal, hover, active, highlight, disabled</p>
|
||||
|
||||
<div style="display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center;">
|
||||
<div>
|
||||
<p class="label-text">Normal</p>
|
||||
<div class="fkey"><span class="fkey-key">F1</span><span class="fkey-label">Buscar</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="label-text">Highlight (primary action)</p>
|
||||
<div class="fkey highlight"><span class="fkey-key">F3</span><span class="fkey-label">Cobrar</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="label-text">Disabled</p>
|
||||
<div class="fkey" style="opacity: 0.4; pointer-events: none;">
|
||||
<span class="fkey-key">F8</span><span class="fkey-label">Devolución</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ====== FIXED FOOTER (actual position) ====== -->
|
||||
<div class="fkeys-footer">
|
||||
<div class="fkey" title="Buscar producto"><span class="fkey-key">F1</span><span class="fkey-label">Buscar</span></div>
|
||||
<div class="fkey" title="Seleccionar cliente"><span class="fkey-key">F2</span><span class="fkey-label">Cliente</span></div>
|
||||
<div class="fkey highlight" title="Cobrar venta"><span class="fkey-key">F3</span><span class="fkey-label">Cobrar</span></div>
|
||||
<div class="fkey" title="Cotización"><span class="fkey-key">F4</span><span class="fkey-label">Cotización</span></div>
|
||||
<div class="fkey-sep"></div>
|
||||
<div class="fkey" title="Última venta"><span class="fkey-key">F5</span><span class="fkey-label">Últ.Venta</span></div>
|
||||
<div class="fkey" title="Abrir cajón"><span class="fkey-key">F6</span><span class="fkey-label">Cajón</span></div>
|
||||
<div class="fkey-sep"></div>
|
||||
<div class="fkey" title="Cantidad"><span class="fkey-key">+/-</span><span class="fkey-label">Cantidad</span></div>
|
||||
<div class="fkey" title="Descuento"><span class="fkey-key">*</span><span class="fkey-label">Descuento</span></div>
|
||||
<div class="fkey-sep"></div>
|
||||
<div class="fkey" title="Cancelar"><span class="fkey-key">Esc</span><span class="fkey-label">Cancelar</span></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setTheme(theme) {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
document.querySelectorAll('.theme-switcher button').forEach(b => b.classList.remove('active'));
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
|
||||
// Keyboard shortcuts demo
|
||||
document.addEventListener('keydown', (e) => {
|
||||
const keyMap = {
|
||||
'F1': 'Buscar producto',
|
||||
'F2': 'Seleccionar cliente',
|
||||
'F3': 'Cobrar venta',
|
||||
'F4': 'Generar cotización',
|
||||
'F5': 'Última venta',
|
||||
'F6': 'Abrir cajón',
|
||||
'Escape': 'Cancelar'
|
||||
};
|
||||
if (keyMap[e.key]) {
|
||||
e.preventDefault();
|
||||
console.log('Atajo:', keyMap[e.key]);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user