backup: estado antes de limpieza de defaults
This commit is contained in:
FrankZamora
393
admin/components/component-lets-talk-button.php
Normal file
393
admin/components/component-lets-talk-button.php
Normal file
@@ -0,0 +1,393 @@
|
||||
<?php
|
||||
/**
|
||||
* Component: Let's Talk Button Configuration
|
||||
*
|
||||
* @package Apus_Theme
|
||||
* @since 2.0.0
|
||||
*/
|
||||
|
||||
if (!defined('ABSPATH')) {
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
|
||||
<!-- ============================================================
|
||||
TAB: BOTÓN LET'S TALK CONFIGURATION
|
||||
============================================================ -->
|
||||
<div class="tab-pane fade" id="letsTalkButtonTab" role="tabpanel" aria-labelledby="lets-talk-button-config-tab">
|
||||
|
||||
<!-- ========================================
|
||||
PATRÓN 1: HEADER CON GRADIENTE
|
||||
======================================== -->
|
||||
<div class="rounded p-4 mb-4 shadow text-white" style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%); border-left: 4px solid #FF8600;">
|
||||
<div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
|
||||
<div>
|
||||
<h3 class="h4 mb-1 fw-bold">
|
||||
<i class="bi bi-lightning-charge-fill me-2" style="color: #FF8600;"></i>
|
||||
Configuración del Botón Let's Talk
|
||||
</h3>
|
||||
<p class="mb-0 small" style="opacity: 0.85;">
|
||||
Personaliza el botón de contacto "Let's Talk" del navbar
|
||||
</p>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-light" id="resetLetsTalkButtonDefaults">
|
||||
<i class="bi bi-arrow-counterclockwise me-1"></i>
|
||||
Restaurar valores por defecto
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================================
|
||||
PATRÓN 2: LAYOUT 2 COLUMNAS
|
||||
======================================== -->
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-6">
|
||||
<!-- ========================================
|
||||
GRUPO 1: ACTIVACIÓN Y VISIBILIDAD (3 campos)
|
||||
PATRÓN 3: CARD CON BORDER-LEFT NAVY
|
||||
PATRÓN 4: 3 SWITCHES OBLIGATORIOS
|
||||
======================================== -->
|
||||
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
||||
<i class="bi bi-toggle-on me-2" style="color: #FF8600;"></i>
|
||||
Activación y Visibilidad
|
||||
</h5>
|
||||
|
||||
<!-- Switch 1: Enabled (OBLIGATORIO) -->
|
||||
<div class="mb-2">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="letsTalkButtonEnabled" checked>
|
||||
<label class="form-check-label small" for="letsTalkButtonEnabled" style="color: #495057;">
|
||||
<i class="bi bi-power me-1" style="color: #FF8600;"></i>
|
||||
<strong>Activar Botón Let's Talk</strong>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Switch 2: Show on Mobile (OBLIGATORIO) -->
|
||||
<div class="mb-2">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="letsTalkButtonShowOnMobile" checked>
|
||||
<label class="form-check-label small" for="letsTalkButtonShowOnMobile" style="color: #495057;">
|
||||
<i class="bi bi-phone me-1" style="color: #FF8600;"></i>
|
||||
<strong>Mostrar en Mobile</strong> <span class="text-muted">(<768px)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Switch 3: Show on Desktop (OBLIGATORIO) -->
|
||||
<div class="mb-0">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="letsTalkButtonShowOnDesktop" checked>
|
||||
<label class="form-check-label small" for="letsTalkButtonShowOnDesktop" style="color: #495057;">
|
||||
<i class="bi bi-display me-1" style="color: #FF8600;"></i>
|
||||
<strong>Mostrar en Desktop</strong> <span class="text-muted">(≥768px)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================================
|
||||
GRUPO 2: CONTENIDO (3 campos)
|
||||
PATRÓN 3: CARD CON BORDER-LEFT NAVY
|
||||
======================================== -->
|
||||
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
||||
<i class="bi bi-chat-text me-2" style="color: #FF8600;"></i>
|
||||
Contenido
|
||||
</h5>
|
||||
|
||||
<!-- Switch: show_icon -->
|
||||
<div class="mb-2">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="letsTalkButtonShowIcon" checked>
|
||||
<label class="form-check-label small" for="letsTalkButtonShowIcon" style="color: #495057;">
|
||||
<i class="bi bi-eye me-1" style="color: #FF8600;"></i>
|
||||
<strong>Mostrar icono</strong>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text inputs compactados: text + icon_class -->
|
||||
<div class="row g-2 mb-0">
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonText" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-fonts me-1" style="color: #FF8600;"></i>
|
||||
Texto del botón
|
||||
</label>
|
||||
<input type="text" id="letsTalkButtonText" class="form-control form-control-sm" value="Let's Talk" maxlength="30">
|
||||
<small class="text-muted">Máximo 30 caracteres</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonIconClass" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-star me-1" style="color: #FF8600;"></i>
|
||||
Clase del icono
|
||||
</label>
|
||||
<input type="text" id="letsTalkButtonIconClass" class="form-control form-control-sm" value="bi bi-lightning-charge-fill" placeholder="bi bi-...">
|
||||
<small class="text-muted">Bootstrap Icons</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================================
|
||||
GRUPO 3: TIPOGRAFÍA (1 campo)
|
||||
PATRÓN 3: CARD CON BORDER-LEFT NAVY
|
||||
======================================== -->
|
||||
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
||||
<i class="bi bi-fonts me-2" style="color: #FF8600;"></i>
|
||||
Tipografía
|
||||
</h5>
|
||||
|
||||
<!-- Select: font_weight -->
|
||||
<div class="mb-0">
|
||||
<label for="letsTalkButtonFontWeight" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-type-bold me-1" style="color: #FF8600;"></i>
|
||||
Peso de fuente
|
||||
</label>
|
||||
<select id="letsTalkButtonFontWeight" class="form-select form-select-sm">
|
||||
<option value="400">Normal (400)</option>
|
||||
<option value="500">Medium (500)</option>
|
||||
<option value="600" selected>Semibold (600)</option>
|
||||
<option value="700">Bold (700)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================================
|
||||
GRUPO 4: COMPORTAMIENTO (1 campo)
|
||||
PATRÓN 3: CARD CON BORDER-LEFT NAVY
|
||||
======================================== -->
|
||||
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
||||
<i class="bi bi-gear me-2" style="color: #FF8600;"></i>
|
||||
Comportamiento
|
||||
</h5>
|
||||
|
||||
<!-- Text input: modal_target -->
|
||||
<div class="mb-0">
|
||||
<label for="letsTalkButtonModalTarget" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-window me-1" style="color: #FF8600;"></i>
|
||||
ID del modal
|
||||
</label>
|
||||
<input type="text" id="letsTalkButtonModalTarget" class="form-control form-control-sm" value="#contactModal" maxlength="50" placeholder="#nombreModal">
|
||||
<small class="text-muted">Debe comenzar con #</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================================
|
||||
GRUPO 5: ESPACIADO Y POSICIÓN (3 campos)
|
||||
PATRÓN 3: CARD CON BORDER-LEFT NAVY
|
||||
======================================== -->
|
||||
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
||||
<i class="bi bi-arrows-angle-expand me-2" style="color: #FF8600;"></i>
|
||||
Espaciado y Posición
|
||||
</h5>
|
||||
|
||||
<!-- Number inputs compactados: padding_vertical + padding_horizontal -->
|
||||
<div class="row g-2 mb-2">
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonPaddingVertical" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-arrows-vertical me-1" style="color: #FF8600;"></i>
|
||||
Padding vertical
|
||||
</label>
|
||||
<input type="number" id="letsTalkButtonPaddingVertical" class="form-control form-control-sm" value="0.5" min="0" max="3" step="0.1">
|
||||
<small class="text-muted">En rem (0-3)</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonPaddingHorizontal" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-arrows-horizontal me-1" style="color: #FF8600;"></i>
|
||||
Padding horizontal
|
||||
</label>
|
||||
<input type="number" id="letsTalkButtonPaddingHorizontal" class="form-control form-control-sm" value="1.5" min="0" max="5" step="0.1">
|
||||
<small class="text-muted">En rem (0-5)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Select: position -->
|
||||
<div class="mb-0">
|
||||
<label for="letsTalkButtonPosition" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-pin-angle me-1" style="color: #FF8600;"></i>
|
||||
Posición en navbar
|
||||
</label>
|
||||
<select id="letsTalkButtonPosition" class="form-select form-select-sm">
|
||||
<option value="left">Izquierda</option>
|
||||
<option value="center">Centro</option>
|
||||
<option value="right" selected>Derecha</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- ========================================
|
||||
GRUPO 6: COLORES PERSONALIZADOS (4 campos)
|
||||
PATRÓN 3: CARD CON BORDER-LEFT NAVY
|
||||
PATRÓN 5: COLOR PICKERS EN GRID 2X2
|
||||
======================================== -->
|
||||
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
||||
<i class="bi bi-palette me-2" style="color: #FF8600;"></i>
|
||||
Colores Personalizados
|
||||
</h5>
|
||||
|
||||
<!-- Color pickers en grid 2x2 -->
|
||||
<div class="row g-2 mb-2">
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-paint-bucket me-1" style="color: #FF8600;"></i>
|
||||
Color de fondo
|
||||
</label>
|
||||
<input type="color" id="letsTalkButtonBgColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color de fondo">
|
||||
<small class="text-muted d-block mt-1" id="letsTalkButtonBgColorValue">#FF8600</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonBgHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-cursor me-1" style="color: #FF8600;"></i>
|
||||
Color hover
|
||||
</label>
|
||||
<input type="color" id="letsTalkButtonBgHoverColor" class="form-control form-control-color w-100" value="#FF6B35" title="Seleccionar color hover">
|
||||
<small class="text-muted d-block mt-1" id="letsTalkButtonBgHoverColorValue">#FF6B35</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2 mb-0">
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonTextColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-type me-1" style="color: #FF8600;"></i>
|
||||
Color de texto
|
||||
</label>
|
||||
<input type="color" id="letsTalkButtonTextColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color de texto">
|
||||
<small class="text-muted d-block mt-1" id="letsTalkButtonTextColorValue">#ffffff</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonIconColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-star-fill me-1" style="color: #FF8600;"></i>
|
||||
Color icono
|
||||
</label>
|
||||
<input type="color" id="letsTalkButtonIconColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color icono">
|
||||
<small class="text-muted d-block mt-1" id="letsTalkButtonIconColorValue">#ffffff</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================================
|
||||
GRUPO 7: ESTILOS AVANZADOS (8 campos)
|
||||
PATRÓN 3: CARD CON BORDER-LEFT NAVY
|
||||
======================================== -->
|
||||
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
||||
<i class="bi bi-sliders me-2" style="color: #FF8600;"></i>
|
||||
Estilos Avanzados
|
||||
</h5>
|
||||
|
||||
<!-- Number inputs compactados: border_radius + border_width -->
|
||||
<div class="row g-2 mb-2">
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonBorderRadius" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-border-radius me-1" style="color: #FF8600;"></i>
|
||||
Radio esquinas
|
||||
</label>
|
||||
<input type="number" id="letsTalkButtonBorderRadius" class="form-control form-control-sm" value="6" min="0" max="30" step="1">
|
||||
<small class="text-muted">En px (0-30)</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonBorderWidth" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-border-width me-1" style="color: #FF8600;"></i>
|
||||
Ancho de borde
|
||||
</label>
|
||||
<input type="number" id="letsTalkButtonBorderWidth" class="form-control form-control-sm" value="0" min="0" max="10" step="1">
|
||||
<small class="text-muted">En px (0-10)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Border color + border style compactados -->
|
||||
<div class="row g-2 mb-2">
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonBorderColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-border-style me-1" style="color: #FF8600;"></i>
|
||||
Color borde
|
||||
</label>
|
||||
<input type="color" id="letsTalkButtonBorderColor" class="form-control form-control-color w-100" value="#000000" title="Seleccionar color borde">
|
||||
<small class="text-muted d-block mt-1" id="letsTalkButtonBorderColorValue">#000000</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonBorderStyle" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-dash-lg me-1" style="color: #FF8600;"></i>
|
||||
Estilo borde
|
||||
</label>
|
||||
<select id="letsTalkButtonBorderStyle" class="form-select form-select-sm">
|
||||
<option value="solid" selected>Sólido</option>
|
||||
<option value="dashed">Guiones</option>
|
||||
<option value="dotted">Puntos</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Switch: enable_box_shadow -->
|
||||
<div class="mb-2">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="letsTalkButtonEnableBoxShadow">
|
||||
<label class="form-check-label small" for="letsTalkButtonEnableBoxShadow" style="color: #495057;">
|
||||
<i class="bi bi-box-seam me-1" style="color: #FF8600;"></i>
|
||||
<strong>Habilitar sombra</strong>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text input: box_shadow -->
|
||||
<div class="mb-2">
|
||||
<label for="letsTalkButtonBoxShadow" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-shadow me-1" style="color: #FF8600;"></i>
|
||||
CSS box-shadow
|
||||
</label>
|
||||
<input type="text" id="letsTalkButtonBoxShadow" class="form-control form-control-sm" value="0 2px 8px rgba(0, 0, 0, 0.15)" maxlength="100">
|
||||
<small class="text-muted">Ejemplo: 0 4px 12px rgba(255, 134, 0, 0.3)</small>
|
||||
</div>
|
||||
|
||||
<!-- Selects compactados: transition_speed + hover_effect -->
|
||||
<div class="row g-2 mb-0">
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonTransitionSpeed" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-speedometer me-1" style="color: #FF8600;"></i>
|
||||
Velocidad
|
||||
</label>
|
||||
<select id="letsTalkButtonTransitionSpeed" class="form-select form-select-sm">
|
||||
<option value="fast">Rápido (0.2s)</option>
|
||||
<option value="normal" selected>Normal (0.3s)</option>
|
||||
<option value="slow">Lento (0.5s)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="letsTalkButtonHoverEffect" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-magic me-1" style="color: #FF8600;"></i>
|
||||
Efecto hover
|
||||
</label>
|
||||
<select id="letsTalkButtonHoverEffect" class="form-select form-select-sm">
|
||||
<option value="none" selected>Ninguno</option>
|
||||
<option value="scale">Escala (1.05)</option>
|
||||
<option value="brightness">Brillo</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user