feat(admin): Implementar interfaz HTML del Top Bar según especificación
- Actualizar main.php con diseño completo del Tab Top Bar - Agregar switches en lugar de checkboxes básicos - Implementar layout responsive con grid Bootstrap - Agregar textarea con contador de caracteres para mensaje - Implementar color pickers para estilos personalizados - Mejorar accesibilidad con labels y roles ARIA - Agregar vista previa informativa Basado en: 05-IMPLEMENTACION-ADMIN-INTERFAZ-TOP-BAR.md Issue: #144 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
@@ -20,154 +20,306 @@ if (!defined('ABSPATH')) {
|
||||
<!-- Navigation Tabs -->
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-bs-toggle="tab" data-bs-target="#topBar" href="#topBar">Top Bar</a>
|
||||
<a class="nav-link active" data-bs-toggle="tab" data-bs-target="#topBarTab" href="#topBarTab" role="tab">
|
||||
<i class="bi bi-megaphone-fill me-2"></i>
|
||||
Top Bar
|
||||
</a>
|
||||
</li>
|
||||
<!-- Más tabs aquí: Navbar, Hero, Footer, etc. -->
|
||||
</ul>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content mt-3">
|
||||
<!-- Top Bar Tab -->
|
||||
<div id="topBar" class="tab-pane fade show active">
|
||||
<h3>Configuración Top Bar</h3>
|
||||
<p class="text-muted">Personaliza la barra de notificación superior del sitio.</p>
|
||||
<!-- ============================= -->
|
||||
<!-- TAB: TOP BAR -->
|
||||
<!-- ============================= -->
|
||||
<div id="topBarTab" class="tab-pane fade show active" role="tabpanel">
|
||||
<h3 class="mb-4">Configuración Top Bar</h3>
|
||||
|
||||
<!-- Activación y Visibilidad -->
|
||||
<div class="form-section mb-4">
|
||||
<!-- ============================= -->
|
||||
<!-- GRUPO 1: ACTIVACIÓN -->
|
||||
<!-- ============================= -->
|
||||
<div class="form-section">
|
||||
<h4>Activación y Visibilidad</h4>
|
||||
<div class="form-group mb-3">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" id="topBarEnabled" class="form-check-input">
|
||||
Activar Top Bar
|
||||
</label>
|
||||
<p class="form-text text-muted">Si está desactivado, el Top Bar no se mostrará en el sitio.</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" id="topBarShowOnMobile" class="form-check-input">
|
||||
Mostrar en móvil
|
||||
</label>
|
||||
<!-- Enabled + Show on Mobile + Show on Desktop -->
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label class="text-secondary fw-medium d-block mb-2">Estado del Componente</label>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input"
|
||||
type="checkbox"
|
||||
id="topBarEnabled"
|
||||
role="switch">
|
||||
<label class="form-check-label" for="topBarEnabled">
|
||||
Activar Top Bar
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" id="topBarShowOnDesktop" class="form-check-input">
|
||||
Mostrar en desktop
|
||||
</label>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label class="text-secondary fw-medium d-block mb-2">Visibilidad Mobile</label>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input"
|
||||
type="checkbox"
|
||||
id="topBarShowOnMobile"
|
||||
role="switch">
|
||||
<label class="form-check-label" for="topBarShowOnMobile">
|
||||
Mostrar en dispositivos móviles
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label class="text-secondary fw-medium d-block mb-2">Visibilidad Desktop</label>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input"
|
||||
type="checkbox"
|
||||
id="topBarShowOnDesktop"
|
||||
role="switch">
|
||||
<label class="form-check-label" for="topBarShowOnDesktop">
|
||||
Mostrar en desktop
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenido -->
|
||||
<div class="form-section mb-4">
|
||||
<h4>Contenido</h4>
|
||||
<!-- ============================= -->
|
||||
<!-- GRUPO 2: CONTENIDO -->
|
||||
<!-- ============================= -->
|
||||
<div class="form-section">
|
||||
<h4>Contenido y Mensajes</h4>
|
||||
|
||||
<!-- Icono -->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="topBarIconClass">Clase del icono</label>
|
||||
<input type="text" id="topBarIconClass" class="form-control" placeholder="bi bi-megaphone-fill">
|
||||
<p class="form-text text-muted">Usa clases de <a href="https://icons.getbootstrap.com/" target="_blank">Bootstrap Icons</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" id="topBarShowIcon" class="form-check-input">
|
||||
Mostrar icono
|
||||
<div class="col-md-8">
|
||||
<div class="form-group">
|
||||
<label for="topBarIconClass" class="text-secondary fw-medium">
|
||||
Clase del icono
|
||||
<small class="text-muted">(Bootstrap Icons)</small>
|
||||
</label>
|
||||
<input type="text"
|
||||
id="topBarIconClass"
|
||||
class="form-control"
|
||||
placeholder="Ej: bi bi-megaphone-fill"
|
||||
maxlength="50">
|
||||
<small class="form-text text-muted">
|
||||
Ver iconos disponibles: <a href="https://icons.getbootstrap.com/" target="_blank">Bootstrap Icons</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label class="text-secondary fw-medium d-block mb-2">Opciones de Icono</label>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input"
|
||||
type="checkbox"
|
||||
id="topBarShowIcon"
|
||||
role="switch">
|
||||
<label class="form-check-label" for="topBarShowIcon">
|
||||
Mostrar icono
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label for="topBarHighlightText">Texto destacado</label>
|
||||
<input type="text" id="topBarHighlightText" class="form-control" placeholder="Nuevo:" maxlength="30">
|
||||
<p class="form-text text-muted">Máximo 30 caracteres. Aparece en negritas.</p>
|
||||
<!-- Texto destacado -->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<label for="topBarHighlightText" class="text-secondary fw-medium">
|
||||
Texto destacado
|
||||
<small class="text-muted">(opcional)</small>
|
||||
</label>
|
||||
<input type="text"
|
||||
id="topBarHighlightText"
|
||||
class="form-control"
|
||||
placeholder='Ej: "Nuevo:" o "Promoción:"'
|
||||
maxlength="30">
|
||||
<small class="form-text text-muted">
|
||||
Se muestra en negritas y con color destacado. Dejar vacío para omitir.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label for="topBarMessageText">Mensaje principal *</label>
|
||||
<input type="text" id="topBarMessageText" class="form-control" placeholder="Accede a más de 200,000 APUs..." maxlength="250" required>
|
||||
<p class="form-text text-muted">Máximo 250 caracteres. Campo obligatorio.</p>
|
||||
<!-- Mensaje principal -->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<label for="topBarMessageText" class="text-secondary fw-medium">
|
||||
Mensaje principal <span class="text-danger">*</span>
|
||||
</label>
|
||||
<textarea id="topBarMessageText"
|
||||
class="form-control"
|
||||
rows="3"
|
||||
maxlength="250"
|
||||
placeholder="Ej: Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025."
|
||||
required></textarea>
|
||||
<small class="form-text text-muted">
|
||||
<span id="topBarMessageTextCount">0</span>/250 caracteres
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enlace -->
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="form-group mb-3">
|
||||
<label for="topBarLinkText">Texto del enlace</label>
|
||||
<input type="text" id="topBarLinkText" class="form-control" placeholder="Ver Catálogo" maxlength="50">
|
||||
<div class="form-group">
|
||||
<label for="topBarLinkText" class="text-secondary fw-medium">
|
||||
Texto del enlace
|
||||
</label>
|
||||
<input type="text"
|
||||
id="topBarLinkText"
|
||||
class="form-control"
|
||||
placeholder="Ej: Ver Catálogo"
|
||||
maxlength="50">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="form-group mb-3">
|
||||
<label for="topBarLinkUrl">URL del enlace</label>
|
||||
<input type="url" id="topBarLinkUrl" class="form-control" placeholder="/catalogo">
|
||||
<div class="form-group">
|
||||
<label for="topBarLinkUrl" class="text-secondary fw-medium">
|
||||
URL del enlace
|
||||
</label>
|
||||
<input type="url"
|
||||
id="topBarLinkUrl"
|
||||
class="form-control"
|
||||
placeholder="Ej: /catalogo o https://ejemplo.com">
|
||||
<small class="form-text text-muted">URLs relativas o absolutas</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="topBarLinkTarget">Target</label>
|
||||
<div class="form-group">
|
||||
<label for="topBarLinkTarget" class="text-secondary fw-medium">
|
||||
Target
|
||||
</label>
|
||||
<select id="topBarLinkTarget" class="form-select">
|
||||
<option value="_self">Misma pestaña</option>
|
||||
<option value="_blank">Nueva pestaña</option>
|
||||
<option value="_self">Misma ventana</option>
|
||||
<option value="_blank">Nueva ventana</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mb-3">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" id="topBarShowLink" class="form-check-input">
|
||||
Mostrar enlace
|
||||
</label>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input"
|
||||
type="checkbox"
|
||||
id="topBarShowLink"
|
||||
role="switch">
|
||||
<label class="form-check-label" for="topBarShowLink">
|
||||
Mostrar enlace
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Estilos Personalizados -->
|
||||
<!-- ============================= -->
|
||||
<!-- GRUPO 3: ESTILOS AVANZADOS -->
|
||||
<!-- ============================= -->
|
||||
<div class="form-section">
|
||||
<h4>Estilos Personalizados</h4>
|
||||
<p class="form-text text-muted mb-3">Deja en blanco para usar los colores del tema por defecto.</p>
|
||||
|
||||
<!-- Colores (4 en una fila) -->
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="topBarBgColor">Color de fondo</label>
|
||||
<input type="color" id="topBarBgColor" class="form-control form-control-color">
|
||||
<div class="form-group">
|
||||
<label for="topBarBgColor" class="text-secondary fw-medium">
|
||||
Color de fondo
|
||||
</label>
|
||||
<input type="color"
|
||||
id="topBarBgColor"
|
||||
class="form-control form-control-color"
|
||||
value="#0E2337"
|
||||
title="Seleccionar color de fondo">
|
||||
<small class="form-text text-muted">Default: #0E2337</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="topBarTextColor">Color de texto</label>
|
||||
<input type="color" id="topBarTextColor" class="form-control form-control-color">
|
||||
<div class="form-group">
|
||||
<label for="topBarTextColor" class="text-secondary fw-medium">
|
||||
Color de texto
|
||||
</label>
|
||||
<input type="color"
|
||||
id="topBarTextColor"
|
||||
class="form-control form-control-color"
|
||||
value="#ffffff"
|
||||
title="Seleccionar color de texto">
|
||||
<small class="form-text text-muted">Default: #ffffff</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="topBarHighlightColor">Color del highlight</label>
|
||||
<input type="color" id="topBarHighlightColor" class="form-control form-control-color">
|
||||
<div class="form-group">
|
||||
<label for="topBarHighlightColor" class="text-secondary fw-medium">
|
||||
Color destacado
|
||||
</label>
|
||||
<input type="color"
|
||||
id="topBarHighlightColor"
|
||||
class="form-control form-control-color"
|
||||
value="#FF8600"
|
||||
title="Seleccionar color destacado">
|
||||
<small class="form-text text-muted">Default: #FF8600</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="topBarLinkHoverColor">Color hover enlace</label>
|
||||
<input type="color" id="topBarLinkHoverColor" class="form-control form-control-color">
|
||||
<div class="form-group">
|
||||
<label for="topBarLinkHoverColor" class="text-secondary fw-medium">
|
||||
Color hover enlace
|
||||
</label>
|
||||
<input type="color"
|
||||
id="topBarLinkHoverColor"
|
||||
class="form-control form-control-color"
|
||||
value="#FF8600"
|
||||
title="Seleccionar color hover del enlace">
|
||||
<small class="form-text text-muted">Default: #FF8600</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label for="topBarFontSize">Tamaño de fuente</label>
|
||||
<select id="topBarFontSize" class="form-select" style="max-width: 200px;">
|
||||
<option value="small">Pequeña</option>
|
||||
<option value="normal" selected>Normal</option>
|
||||
<option value="large">Grande</option>
|
||||
</select>
|
||||
<!-- Tamaño de fuente -->
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label for="topBarFontSize" class="text-secondary fw-medium">
|
||||
Tamaño de fuente
|
||||
</label>
|
||||
<select id="topBarFontSize" class="form-select">
|
||||
<option value="small">Pequeño (0.8rem)</option>
|
||||
<option value="normal" selected>Normal (0.9rem)</option>
|
||||
<option value="large">Grande (1rem)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vista previa (opcional para futuras versiones) -->
|
||||
<div class="form-section bg-light">
|
||||
<h4>Vista Previa</h4>
|
||||
<p class="text-muted">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
Guarda los cambios para ver el Top Bar actualizado en el frontend.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user