git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
130 Commits 3 Branches 1 Tag
cc072e407aaf274ee5201a97db29f2733e5e1d6f
Commit Graph

4 Commits

Author SHA1 Message Date
FrankZamora
cc072e407a 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>
 2025-11-10 22:05:23 -06:00
FrankZamora
3beb292901 Fix: Corregir formato AJAX WordPress en Admin Panel 
Causa raíz del error 400: El código estaba usando formato JSON cuando WordPress AJAX requiere application/x-www-form-urlencoded.

## Problema

**Error:** POST admin-ajax.php 400 (Bad Request)

**Causas:**
1. JavaScript enviaba datos como JSON (`Content-Type: application/json`)
2. PHP usaba `json_decode(file_get_contents('php://input'))`
3. WordPress AJAX espera `$_POST` con `action` y `nonce`

## Solución

### JavaScript (admin-app.js)
```javascript
// ANTES (❌ Incorrecto)
data: JSON.stringify({
  action: 'apus_save_settings',
  nonce: apusAdminData.nonce,
  ...formData
})

// AHORA (✅ Correcto)
const postData = new URLSearchParams();
postData.append('action', 'apus_save_settings');
postData.append('nonce', apusAdminData.nonce);
postData.append('components', JSON.stringify(formData.components));
```

### PHP (class-settings-manager.php)
```php
// ANTES (❌ Incorrecto)
$data = json_decode(file_get_contents('php://input'), true);

// AHORA (✅ Correcto)
$components = json_decode(stripslashes($_POST['components']), true);
```

### Cambios Aplicados

**admin-app.js:**
- Usar `URLSearchParams` en lugar de `JSON.stringify`
- Header `application/x-www-form-urlencoded`
- Enviar `components` como JSON string en parámetro POST

**class-settings-manager.php:**
- Verificar nonce con `wp_verify_nonce($_POST['nonce'])`
- Parsear `$_POST['components']` como JSON
- Mensajes de error más descriptivos

## WordPress AJAX Requirements

1. ✅ `action` en $_POST
2. ✅ `nonce` en $_POST
3. ✅ Content-Type: application/x-www-form-urlencoded
4. ✅ Usar $_POST, no php://input

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-09 15:32:47 -06:00
FrankZamora
0fd0ee8231 Refactor: Top Bar v2.1 - Valores CSS + UI Compacta 
Remodulación del Top Bar siguiendo algoritmo v2.1 actualizado.

## 1. Valores de Estilos desde CSS

**Antes (v2.0):**
```php
'custom_styles' => array(
    'background_color' => '',  // Vacío
    'text_color' => '',        // Vacío
    'highlight_color' => '',   // Vacío
    'link_hover_color' => '',  // Vacío
)
```

**Ahora (v2.1):**
```php
'custom_styles' => array(
    'background_color' => '#0E2337',  // Extraído de componente-top-bar.css
    'text_color' => '#ffffff',
    'highlight_color' => '#FF8600',   // var(--color-orange-primary)
    'link_hover_color' => '#FF8600',
    'font_size' => 'normal'           // 0.9rem del CSS
)
```

**Mapping CSS → Defaults:**
- `.top-notification-bar { background-color: var(--color-navy-dark) }` → `#0E2337`
- `.top-notification-bar { color: #ffffff }` → `#ffffff`
- `.top-notification-bar strong { color: var(--color-orange-primary) }` → `#FF8600`
- `.top-notification-bar a:hover { color: var(--color-orange-primary) }` → `#FF8600`

## 2. UI Compacta

**Antes:** Checkboxes dispersos (cada uno fila completa)
**Ahora:**
- Checkboxes móvil/desktop → Fila de 2 columnas (col-md-6)
- Campos enlace (texto + URL + target) → Fila compacta (col-md-5 + 5 + 2)
- Colores ya estaban bien (row con col-md-3)

**Resultado:** Menos scroll, mejor aprovechamiento del espacio.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-09 15:25:47 -06:00
FrankZamora
465b879135 Feat: Implementar Top Bar configurable - Issue #143 
Implementación completa del componente Top Bar con 15 campos configurables desde el admin panel, siguiendo el algoritmo universal v2.0.

## Cambios Realizados

### Backend (PHP)
- Agregados defaults del Top Bar a class-settings-manager.php
- Implementada validación completa en class-validator.php (15 campos)
- Implementada sanitización con sanitize_text_field, esc_url_raw y sanitize_hex_color
- Modificado header.php con código 100% configurable usando wp_parse_args()

### Frontend (Admin Panel)
- Creado tab HTML completo con 3 secciones: Activación, Contenido y Estilos
- Implementado JavaScript para renderizado y recolección de datos
- 15 campos configurables: enabled, visibility, icon, content, link, custom styles

### Infraestructura
- Creado admin-panel/init.php para carga del módulo
- Creada class-admin-menu.php con enqueue de Bootstrap 5 y assets
- Creada estructura base CSS y JavaScript del admin
- Ya cargado en functions.php línea 276

## Características
- Responsive: Control independiente mobile/desktop
- Estilos personalizables: 4 colores + tamaño de fuente
- Validación robusta: Límites de caracteres, URLs, colores hex
- Defaults inteligentes: Valores seguros si no hay configuración

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-09 15:13:55 -06:00