git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(theme-settings): split into two cards (CSS left, JS right)

Browse Source 
- CSS Personalizado card on left column (10 rows textarea)
- JavaScript Personalizado card on right column (Header + Footer)
- Improved visual organization with separate alerts per card

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-27 18:47:13 -06:00
parent b70e11be62
commit 82abdf047a
1 changed files with 61 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
Admin/ThemeSettings/Infrastructure/Ui/ThemeSettingsFormBuilder.php
View File

@@ -29,9 +29,14 @@ final class ThemeSettingsFormBuilder
$html .= '<div class="row g-3">';
// Columna unica - Custom Code
$html .= '<div class="col-lg-8 mx-auto">';
$html .= $this->buildCustomCodeGroup($componentId);
// Columna izquierda - CSS
$html .= '<div class="col-lg-6">';
$html .= $this->buildCssGroup($componentId);
$html .= '</div>';
// Columna derecha - JavaScript
$html .= '<div class="col-lg-6">';
$html .= $this->buildJsGroup($componentId);
$html .= '</div>';
$html .= '</div>';
@@ -63,27 +68,27 @@ final class ThemeSettingsFormBuilder
return $html;
}
private function buildCustomCodeGroup(string $componentId): string
private function buildCssGroup(string $componentId): string
{
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
$html .= ' <div class="card-body">';
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
$html .= ' <i class="bi bi-code-slash me-2" style="color: #FF8600;"></i>';
$html .= ' Codigo Personalizado';
$html .= ' <i class="bi bi-filetype-css me-2" style="color: #FF8600;"></i>';
$html .= ' CSS Personalizado';
$html .= ' </h5>';
$customCss = $this->renderer->getFieldValue($componentId, 'custom_code', 'custom_css', '');
$html .= $this->buildTextareaCode('themeSettingsCustomCss', 'CSS Personalizado', 'bi-filetype-css', $customCss, 'Se inyecta en wp_head. No incluir etiquetas &lt;style&gt;');
$html .= $this->buildTextareaCode(
'themeSettingsCustomCss',
'Estilos CSS',
$customCss,
'Se inyecta en wp_head. No incluir etiquetas &lt;style&gt;',
10
);
$customJsHeader = $this->renderer->getFieldValue($componentId, 'custom_code', 'custom_js_header', '');
$html .= $this->buildTextareaCode('themeSettingsCustomJsHeader', 'JavaScript en Header', 'bi-filetype-js', $customJsHeader, 'Se inyecta en wp_head. No incluir etiquetas &lt;script&gt;');
$customJsFooter = $this->renderer->getFieldValue($componentId, 'custom_code', 'custom_js_footer', '');
$html .= $this->buildTextareaCode('themeSettingsCustomJsFooter', 'JavaScript en Footer', 'bi-filetype-js', $customJsFooter, 'Se inyecta en wp_footer. No incluir etiquetas &lt;script&gt;');
$html .= ' <div class="alert alert-danger small mb-0 mt-2">';
$html .= ' <i class="bi bi-exclamation-octagon me-1"></i>';
$html .= ' <strong>Advertencia:</strong> El codigo personalizado puede afectar el rendimiento y seguridad del sitio.';
$html .= ' <div class="alert alert-info small mb-0 mt-2">';
$html .= ' <i class="bi bi-info-circle me-1"></i>';
$html .= ' El CSS se carga despues de los estilos del tema.';
$html .= ' </div>';
$html .= ' </div>';
@@ -92,16 +97,53 @@ final class ThemeSettingsFormBuilder
return $html;
}
private function buildTextareaCode(string $id, string $label, string $icon, mixed $value, string $helpText = ''): string
private function buildJsGroup(string $componentId): string
{
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
$html .= ' <div class="card-body">';
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
$html .= ' <i class="bi bi-filetype-js me-2" style="color: #FF8600;"></i>';
$html .= ' JavaScript Personalizado';
$html .= ' </h5>';
$customJsHeader = $this->renderer->getFieldValue($componentId, 'custom_code', 'custom_js_header', '');
$html .= $this->buildTextareaCode(
'themeSettingsCustomJsHeader',
'JavaScript en Header',
$customJsHeader,
'Se inyecta en wp_head. No incluir etiquetas &lt;script&gt;',
5
);
$customJsFooter = $this->renderer->getFieldValue($componentId, 'custom_code', 'custom_js_footer', '');
$html .= $this->buildTextareaCode(
'themeSettingsCustomJsFooter',
'JavaScript en Footer',
$customJsFooter,
'Se inyecta en wp_footer. No incluir etiquetas &lt;script&gt;',
5
);
$html .= ' <div class="alert alert-danger small mb-0 mt-2">';
$html .= ' <i class="bi bi-exclamation-octagon me-1"></i>';
$html .= ' <strong>Advertencia:</strong> El codigo JS puede afectar el rendimiento y seguridad del sitio.';
$html .= ' </div>';
$html .= ' </div>';
$html .= '</div>';
return $html;
}
private function buildTextareaCode(string $id, string $label, mixed $value, string $helpText = '', int $rows = 4): string
{
$value = $this->normalizeStringValue($value);
$html = ' <div class="mb-3">';
$html .= ' <label for="' . esc_attr($id) . '" class="form-label small mb-1 fw-semibold">';
$html .= ' <i class="bi ' . esc_attr($icon) . ' me-1" style="color: #FF8600;"></i>';
$html .= ' ' . esc_html($label);
$html .= ' </label>';
$html .= ' <textarea class="form-control form-control-sm font-monospace" id="' . esc_attr($id) . '" rows="4" style="font-size: 0.85em;">' . esc_textarea($value) . '</textarea>';
$html .= ' <textarea class="form-control form-control-sm font-monospace" id="' . esc_attr($id) . '" rows="' . $rows . '" style="font-size: 0.85em;">' . esc_textarea($value) . '</textarea>';
if (!empty($helpText)) {
$html .= ' <div class="form-text small">' . $helpText . '</div>';
}