← All changes
|
includes/extensions/Theme_Builder/Theme_Builder.php
+937
-334
51.1.44
→
51.1.87
View file →
| @@ -245,178 +245,295 @@ | ||
| 245 | 245 | if (!current_user_can('manage_options')) { |
| 246 | 246 | return; |
| 247 | 247 | } |
| 248 | 248 | |
| 249 | + // Keep cache fresh. | |
| 250 | + $this->repository->clear_cache(); | |
| 251 | + | |
| 252 | + // Shared dark theme support (used by Woo Builder admin page). | |
| 253 | + include KING_ADDONS_PATH . 'includes/admin/shared/dark-theme.php'; | |
| 254 | + | |
| 249 | 255 | $this->handle_inline_actions(); |
| 250 | - | |
| 251 | 256 | $templates = $this->prepare_admin_templates(); |
| 252 | - $table = new Admin_List_Table($templates, admin_url('admin.php?page=' . $this->menu_slug)); | |
| 253 | - $table->prepare_items(); | |
| 254 | 257 | |
| 255 | - // Enqueue shared V3 styles | |
| 256 | - wp_enqueue_style( | |
| 257 | - 'king-addons-admin-v3', | |
| 258 | - KING_ADDONS_URL . 'includes/admin/layouts/shared/admin-v3-styles.css', | |
| 259 | - [], | |
| 260 | - KING_ADDONS_VERSION | |
| 258 | + $base_url = admin_url('admin.php?page=' . $this->menu_slug); | |
| 259 | + $status_filter = isset($_GET['status']) ? sanitize_key(wp_unslash($_GET['status'])) : 'all'; // phpcs:ignore WordPress.Security.NonceVerification.Recommended | |
| 260 | + if (!in_array($status_filter, ['all', 'enabled', 'disabled'], true)) { | |
| 261 | + $status_filter = 'all'; | |
| 262 | + } | |
| 263 | + $filtered_templates = array_values( | |
| 264 | + array_filter( | |
| 265 | + $templates, | |
| 266 | + static function (array $template) use ($status_filter): bool { | |
| 267 | + if ('enabled' === $status_filter) { | |
| 268 | + return !empty($template['enabled']); | |
| 269 | + } | |
| 270 | + if ('disabled' === $status_filter) { | |
| 271 | + return empty($template['enabled']); | |
| 272 | + } | |
| 273 | + return true; | |
| 274 | + } | |
| 275 | + ) | |
| 261 | 276 | ); |
| 262 | 277 | |
| 278 | + $type_cards = [ | |
| 279 | + 'single' => [ | |
| 280 | + 'label' => esc_html__('Single', 'king-addons'), | |
| 281 | + 'desc' => esc_html__('Posts, pages & custom post types', 'king-addons'), | |
| 282 | + 'default_location' => 'single_post', | |
| 283 | + ], | |
| 284 | + 'archive' => [ | |
| 285 | + 'label' => esc_html__('Archive', 'king-addons'), | |
| 286 | + 'desc' => esc_html__('Blog, categories, tags & taxonomies', 'king-addons'), | |
| 287 | + 'default_location' => 'archive_blog', | |
| 288 | + ], | |
| 289 | + 'author' => [ | |
| 290 | + 'label' => esc_html__('Author', 'king-addons'), | |
| 291 | + 'desc' => esc_html__('Author pages', 'king-addons'), | |
| 292 | + 'default_location' => 'author_all', | |
| 293 | + ], | |
| 294 | + 'search' => [ | |
| 295 | + 'label' => esc_html__('Search', 'king-addons'), | |
| 296 | + 'desc' => esc_html__('Search results page', 'king-addons'), | |
| 297 | + 'default_location' => 'search_results', | |
| 298 | + ], | |
| 299 | + 'not_found' => [ | |
| 300 | + 'label' => esc_html__('404', 'king-addons'), | |
| 301 | + 'desc' => esc_html__('Not found page', 'king-addons'), | |
| 302 | + 'default_location' => 'not_found', | |
| 303 | + ], | |
| 304 | + ]; | |
| 305 | + | |
| 263 | 306 | $this->render_modern_styles(); |
| 264 | 307 | |
| 265 | - // Theme mode is per-user | |
| 266 | - $theme_mode = get_user_meta(get_current_user_id(), 'king_addons_theme_mode', true); | |
| 267 | - $allowed_theme_modes = ['dark', 'light', 'auto']; | |
| 268 | - if (!in_array($theme_mode, $allowed_theme_modes, true)) { | |
| 269 | - $theme_mode = 'dark'; | |
| 270 | - } | |
| 308 | + ka_render_dark_theme_styles(); | |
| 309 | + ka_render_dark_theme_init(); | |
| 271 | 310 | ?> |
| 272 | 311 | <script> |
| 273 | - (function() { | |
| 274 | - const mode = '<?php echo esc_js($theme_mode); ?>'; | |
| 275 | - const mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null; | |
| 276 | - const isDark = mode === 'auto' ? !!(mql && mql.matches) : mode === 'dark'; | |
| 277 | - document.documentElement.classList.toggle('ka-v3-dark', isDark); | |
| 312 | + if (document.body) { | |
| 278 | 313 | document.body.classList.add('ka-admin-v3'); |
| 279 | - document.body.classList.toggle('ka-v3-dark', isDark); | |
| 280 | - })(); | |
| 314 | + } else { | |
| 315 | + document.addEventListener('DOMContentLoaded', function() { | |
| 316 | + document.body.classList.add('ka-admin-v3'); | |
| 317 | + }); | |
| 318 | + } | |
| 281 | 319 | </script> |
| 282 | - <div class="ka-admin-wrap ka-tb-wrap"> | |
| 283 | - <!-- Header --> | |
| 284 | - <div class="ka-admin-header"> | |
| 285 | - <div class="ka-admin-header-left"> | |
| 286 | - <div class="ka-admin-header-icon"> | |
| 287 | - <span class="dashicons dashicons-layout"></span> | |
| 320 | + | |
| 321 | + <div class="ka-tb"> | |
| 322 | + <header class="ka-tb-header"> | |
| 323 | + <div class="ka-tb-header-content"> | |
| 324 | + <span class="ka-tb-title-icon" aria-hidden="true"> | |
| 325 | + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| 326 | + <path d="M4 4h16v16H4z" /> | |
| 327 | + <path d="M8 8h8M8 12h8M8 16h5" /> | |
| 328 | + </svg> | |
| 329 | + </span> | |
| 330 | + <div class="ka-tb-header-titles"> | |
| 331 | + <h1><span class="ka-tb-title-text"><?php esc_html_e('Theme Builder', 'king-addons'); ?></span></h1> | |
| 332 | + <p><?php esc_html_e('Create custom templates for your site', 'king-addons'); ?></p> | |
| 288 | 333 | </div> |
| 289 | - <div> | |
| 290 | - <h1 class="ka-admin-title"><?php esc_html_e('Theme Builder', 'king-addons'); ?></h1> | |
| 291 | - <p class="ka-admin-subtitle"><?php esc_html_e('Create custom templates for your site', 'king-addons'); ?></p> | |
| 292 | - </div> | |
| 293 | 334 | </div> |
| 294 | - <div class="ka-admin-header-actions"> | |
| 295 | - <button type="button" id="ka-theme-builder-add-new" class="ka-btn ka-btn-primary"> | |
| 296 | - <span class="dashicons dashicons-plus-alt2"></span> | |
| 335 | + <div class="ka-tb-header-actions"> | |
| 336 | + <button type="button" id="ka-theme-builder-add-new" class="ka-tb-btn ka-tb-btn-primary"> | |
| 337 | + <span class="ka-tb-btn-icon" aria-hidden="true">＋</span> | |
| 297 | 338 | <?php esc_html_e('Add New Template', 'king-addons'); ?> |
| 298 | 339 | </button> |
| 299 | - <div class="ka-v3-segmented" id="ka-v3-theme-segment" role="radiogroup" aria-label="Theme" data-active="<?php echo esc_attr($theme_mode); ?>"> | |
| 300 | - <span class="ka-v3-segmented-indicator" aria-hidden="true"></span> | |
| 301 | - <button type="button" class="ka-v3-segmented-btn" data-theme="light" aria-pressed="<?php echo $theme_mode === 'light' ? 'true' : 'false'; ?>"><?php esc_html_e('Light', 'king-addons'); ?></button> | |
| 302 | - <button type="button" class="ka-v3-segmented-btn" data-theme="dark" aria-pressed="<?php echo $theme_mode === 'dark' ? 'true' : 'false'; ?>"><?php esc_html_e('Dark', 'king-addons'); ?></button> | |
| 303 | - <button type="button" class="ka-v3-segmented-btn" data-theme="auto" aria-pressed="<?php echo $theme_mode === 'auto' ? 'true' : 'false'; ?>"><?php esc_html_e('Auto', 'king-addons'); ?></button> | |
| 304 | - </div> | |
| 340 | + <?php ka_render_dark_theme_toggle(); ?> | |
| 305 | 341 | </div> |
| 342 | + </header> | |
| 343 | + | |
| 344 | + <div class="ka-tb-types" role="list"> | |
| 345 | + <?php foreach ($type_cards as $type_slug => $data) : ?> | |
| 346 | + <?php $type_icon_svg = $this->get_theme_builder_type_icon_svg((string) $type_slug); ?> | |
| 347 | + <button | |
| 348 | + type="button" | |
| 349 | + class="ka-tb-type" | |
| 350 | + role="listitem" | |
| 351 | + data-ka-tb-type="<?php echo esc_attr($type_slug); ?>" | |
| 352 | + data-ka-tb-location="<?php echo esc_attr($data['default_location']); ?>" | |
| 353 | + > | |
| 354 | + <div class="ka-tb-type-icon" aria-hidden="true"> | |
| 355 | + <?php echo $type_icon_svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> | |
| 356 | + </div> | |
| 357 | + <div class="ka-tb-type-label"><?php echo esc_html($data['label']); ?></div> | |
| 358 | + <div class="ka-tb-type-desc"><?php echo esc_html($data['desc']); ?></div> | |
| 359 | + </button> | |
| 360 | + <?php endforeach; ?> | |
| 306 | 361 | </div> |
| 307 | 362 | |
| 308 | - <?php $this->render_add_new_modal(); ?> | |
| 309 | - <?php $this->render_quick_edit_modal(); ?> | |
| 310 | - | |
| 311 | - <div class="ka-card"> | |
| 312 | - <div class="ka-card-header"> | |
| 313 | - <span class="dashicons dashicons-admin-page" style="color: #0071e3;"></span> | |
| 314 | - <h2><?php esc_html_e('Templates', 'king-addons'); ?></h2> | |
| 363 | + <section class="ka-tb-section"> | |
| 364 | + <div class="ka-tb-section-header"> | |
| 365 | + <h2 class="ka-tb-section-title"><?php esc_html_e('Templates', 'king-addons'); ?></h2> | |
| 366 | + <div class="ka-tb-section-actions"> | |
| 367 | + <div class="ka-tb-filters" role="navigation" aria-label="<?php echo esc_attr(esc_html__('Template filters', 'king-addons')); ?>"> | |
| 368 | + <?php | |
| 369 | + $base = remove_query_arg(['status', 'paged'], $base_url); | |
| 370 | + $filters = [ | |
| 371 | + 'all' => esc_html__('All', 'king-addons'), | |
| 372 | + 'enabled' => esc_html__('Enabled', 'king-addons'), | |
| 373 | + 'disabled' => esc_html__('Disabled', 'king-addons'), | |
| 374 | + ]; | |
| 375 | + foreach ($filters as $key => $label) { | |
| 376 | + $url = ('all' === $key) ? $base : add_query_arg('status', $key, $base); | |
| 377 | + $is_active = $status_filter === $key; | |
| 378 | + echo '<a class="ka-tb-filter' . ($is_active ? ' is-active' : '') . '" href="' . esc_url($url) . '">' . esc_html($label) . '</a>'; | |
| 379 | + } | |
| 380 | + ?> | |
| 381 | + </div> | |
| 382 | + <div class="ka-tb-section-count"><?php echo esc_html(count($filtered_templates) . ' ' . _n('item', 'items', count($filtered_templates), 'king-addons')); ?></div> | |
| 383 | + </div> | |
| 315 | 384 | </div> |
| 316 | - <div class="ka-card-body" style="padding: 0;"> | |
| 317 | - <form method="post"> | |
| 318 | - <?php $table->views(); ?> | |
| 319 | - <?php $table->display(); ?> | |
| 320 | - </form> | |
| 321 | - </div> | |
| 322 | - </div> | |
| 323 | - </div> | |
| 324 | - <script> | |
| 325 | - (function() { | |
| 326 | - const ajaxUrl = '<?php echo esc_url(admin_url('admin-ajax.php')); ?>'; | |
| 327 | - const nonce = '<?php echo esc_js(wp_create_nonce('king_addons_dashboard_ui')); ?>'; | |
| 328 | - const segment = document.getElementById('ka-v3-theme-segment'); | |
| 329 | - const mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null; | |
| 330 | - let mode = (segment && segment.getAttribute('data-active') ? segment.getAttribute('data-active') : 'dark').toString(); | |
| 331 | - let mqlHandler = null; | |
| 332 | 385 | |
| 333 | - function saveUISetting(key, value) { | |
| 334 | - const body = new URLSearchParams(); | |
| 335 | - body.set('action', 'king_addons_save_dashboard_ui'); | |
| 336 | - body.set('nonce', nonce); | |
| 337 | - body.set('key', key); | |
| 338 | - body.set('value', value); | |
| 339 | - fetch(ajaxUrl, { | |
| 340 | - method: 'POST', | |
| 341 | - headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, | |
| 342 | - body: body.toString() | |
| 343 | - }); | |
| 344 | - } | |
| 386 | + <div class="ka-tb-templates" role="list"> | |
| 387 | + <?php if (empty($filtered_templates)) : ?> | |
| 388 | + <div class="ka-tb-empty"> | |
| 389 | + <h3 class="ka-tb-empty-title"><?php esc_html_e('No templates yet', 'king-addons'); ?></h3> | |
| 390 | + <p class="ka-tb-empty-desc"><?php esc_html_e('Create your first template to start customizing your site.', 'king-addons'); ?></p> | |
| 391 | + <button type="button" class="ka-tb-btn ka-tb-btn-primary" id="ka-theme-builder-add-new-empty"> | |
| 392 | + <span class="ka-tb-btn-icon" aria-hidden="true">＋</span> | |
| 393 | + <?php esc_html_e('Add New Template', 'king-addons'); ?> | |
| 394 | + </button> | |
| 395 | + </div> | |
| 396 | + <?php else : ?> | |
| 397 | + <?php foreach ($filtered_templates as $template) : ?> | |
| 398 | + <?php | |
| 399 | + $template_id = (int) ($template['id'] ?? 0); | |
| 400 | + if (!$template_id) { | |
| 401 | + continue; | |
| 402 | + } | |
| 345 | 403 | |
| 346 | - function updateSegment(activeMode) { | |
| 347 | - if (!segment) { | |
| 348 | - return; | |
| 349 | - } | |
| 350 | - segment.setAttribute('data-active', activeMode); | |
| 351 | - segment.querySelectorAll('.ka-v3-segmented-btn').forEach((btn) => { | |
| 352 | - const theme = btn.getAttribute('data-theme'); | |
| 353 | - btn.setAttribute('aria-pressed', theme === activeMode ? 'true' : 'false'); | |
| 354 | - }); | |
| 355 | - } | |
| 404 | + $title = !empty($template['title']) ? (string) $template['title'] : sprintf( | |
| 405 | + /* translators: %d: template ID */ | |
| 406 | + esc_html__('Template #%d', 'king-addons'), | |
| 407 | + $template_id | |
| 408 | + ); | |
| 356 | 409 | |
| 357 | - function applyTheme(isDark) { | |
| 358 | - document.body.classList.toggle('ka-v3-dark', isDark); | |
| 359 | - document.documentElement.classList.toggle('ka-v3-dark', isDark); | |
| 360 | - } | |
| 410 | + $edit_url = admin_url('post.php?post=' . $template_id . '&action=elementor'); | |
| 411 | + $enabled = !empty($template['enabled']); | |
| 412 | + $toggle_action = $enabled ? 'disable_template' : 'enable_template'; | |
| 413 | + $toggle_url = wp_nonce_url(add_query_arg(['action' => $toggle_action, 'template_id' => $template_id], $base_url), 'ka_theme_builder_toggle_' . $template_id); | |
| 414 | + $delete_url = wp_nonce_url(add_query_arg(['action' => 'delete_template', 'template_id' => $template_id], $base_url), 'ka_theme_builder_delete_' . $template_id); | |
| 415 | + $conditions_text = isset($template['conditions']) && is_array($template['conditions']) | |
| 416 | + ? $this->summarize_admin_conditions($template['conditions']) | |
| 417 | + : esc_html__('All', 'king-addons'); | |
| 418 | + $type_label = !empty($template['type']) ? (string) $template['type'] : ''; | |
| 419 | + $location_label = !empty($template['sub_location']) ? (string) $template['sub_location'] : ''; | |
| 420 | + $priority = isset($template['priority']) ? (int) $template['priority'] : 10; | |
| 421 | + $title_icon_svg = $this->get_theme_builder_type_icon_svg((string) $type_label); | |
| 422 | + ?> | |
| 423 | + <div class="ka-tb-template" role="listitem"> | |
| 424 | + <div class="ka-tb-template-status <?php echo $enabled ? 'is-enabled' : 'is-disabled'; ?>"> | |
| 425 | + <?php echo $enabled ? esc_html__('Enabled', 'king-addons') : esc_html__('Disabled', 'king-addons'); ?> | |
| 426 | + </div> | |
| 427 | + <div class="ka-tb-template-info"> | |
| 428 | + <a class="ka-tb-template-title" href="<?php echo esc_url($edit_url); ?>"> | |
| 429 | + <span class="ka-tb-template-title-icon" aria-hidden="true"> | |
| 430 | + <?php echo $title_icon_svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> | |
| 431 | + </span> | |
| 432 | + <span class="ka-tb-template-title-text"><?php echo esc_html($title); ?></span> | |
| 433 | + </a> | |
| 434 | + <div class="ka-tb-template-meta"> | |
| 435 | + <?php if ($type_label) : ?> | |
| 436 | + <span class="ka-tb-template-type"><?php echo esc_html($type_label); ?></span> | |
| 437 | + <?php endif; ?> | |
| 438 | + <?php if ($location_label) : ?> | |
| 439 | + <span><?php echo esc_html($location_label); ?></span> | |
| 440 | + <?php endif; ?> | |
| 441 | + <span><?php echo esc_html(sprintf(esc_html__('Priority %d', 'king-addons'), $priority)); ?></span> | |
| 442 | + </div> | |
| 443 | + </div> | |
| 444 | + <button type="button" class="ka-tb-template-condition" title="<?php echo esc_attr($conditions_text); ?>"> | |
| 445 | + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> | |
| 446 | + <path d="M4 6h16M4 12h16M4 18h10" /> | |
| 447 | + </svg> | |
| 448 | + <?php echo esc_html($conditions_text); ?> | |
| 449 | + </button> | |
| 450 | + <div class="ka-tb-template-actions"> | |
| 451 | + <a class="ka-tb-btn ka-tb-btn-secondary" href="<?php echo esc_url($edit_url); ?>"><?php esc_html_e('Edit', 'king-addons'); ?></a> | |
| 452 | + <button type="button" class="ka-tb-btn ka-tb-btn-secondary ka-tb-quick-edit" data-template-id="<?php echo esc_attr((string) $template_id); ?>" data-priority="<?php echo esc_attr((string) $priority); ?>" data-enabled="<?php echo $enabled ? '1' : '0'; ?>"><?php esc_html_e('Quick Edit', 'king-addons'); ?></button> | |
| 453 | + <div class="ka-tb-dropdown" data-ka-dropdown> | |
| 454 | + <button type="button" class="ka-tb-dropdown-trigger" aria-label="<?php echo esc_attr(esc_html__('More actions', 'king-addons')); ?>"> | |
| 455 | + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> | |
| 456 | + <circle cx="12" cy="5" r="1" /> | |
| 457 | + <circle cx="12" cy="12" r="1" /> | |
| 458 | + <circle cx="12" cy="19" r="1" /> | |
| 459 | + </svg> | |
| 460 | + </button> | |
| 461 | + <div class="ka-tb-dropdown-menu" role="menu"> | |
| 462 | + <a class="ka-tb-dropdown-item" role="menuitem" href="<?php echo esc_url($toggle_url); ?>"> | |
| 463 | + <?php echo $enabled ? esc_html__('Disable', 'king-addons') : esc_html__('Enable', 'king-addons'); ?> | |
| 464 | + </a> | |
| 465 | + <div class="ka-tb-dropdown-divider" aria-hidden="true"></div> | |
| 466 | + <a class="ka-tb-dropdown-item is-danger" role="menuitem" href="<?php echo esc_url($delete_url); ?>" onclick="return confirm('<?php echo esc_js(esc_html__('Move template to trash?', 'king-addons')); ?>');"> | |
| 467 | + <?php esc_html_e('Delete', 'king-addons'); ?> | |
| 468 | + </a> | |
| 469 | + </div> | |
| 470 | + </div> | |
| 471 | + </div> | |
| 472 | + </div> | |
| 473 | + <?php endforeach; ?> | |
| 474 | + <?php endif; ?> | |
| 475 | + </div> | |
| 476 | + </section> | |
| 361 | 477 | |
| 362 | - function setThemeMode(nextMode, save) { | |
| 363 | - mode = nextMode; | |
| 364 | - updateSegment(nextMode); | |
| 478 | + <?php $this->render_add_new_modal(); ?> | |
| 479 | + <?php $this->render_quick_edit_modal(); ?> | |
| 480 | + </div> | |
| 481 | + <?php ka_render_dark_theme_script(); ?> | |
| 482 | + <?php | |
| 483 | + } | |
| 365 | 484 | |
| 366 | - if (mqlHandler && mql) { | |
| 367 | - if (mql.removeEventListener) { | |
| 368 | - mql.removeEventListener('change', mqlHandler); | |
| 369 | - } else if (mql.removeListener) { | |
| 370 | - mql.removeListener(mqlHandler); | |
| 371 | - } | |
| 372 | - mqlHandler = null; | |
| 373 | - } | |
| 485 | + /** | |
| 486 | + * Summarize conditions to a short label for admin list. | |
| 487 | + * | |
| 488 | + * @param array<string,mixed> $conditions Conditions payload. | |
| 489 | + * | |
| 490 | + * @return string | |
| 491 | + */ | |
| 492 | + private function summarize_admin_conditions(array $conditions): string | |
| 493 | + { | |
| 494 | + $groups = $conditions['groups'] ?? []; | |
| 495 | + if (empty($groups)) { | |
| 496 | + return (string) esc_html__('All', 'king-addons'); | |
| 497 | + } | |
| 374 | 498 | |
| 375 | - if (nextMode === 'auto') { | |
| 376 | - applyTheme(!!(mql && mql.matches)); | |
| 377 | - mqlHandler = (e) => { | |
| 378 | - if (mode !== 'auto') { | |
| 379 | - return; | |
| 380 | - } | |
| 381 | - applyTheme(!!e.matches); | |
| 382 | - }; | |
| 383 | - if (mql) { | |
| 384 | - if (mql.addEventListener) { | |
| 385 | - mql.addEventListener('change', mqlHandler); | |
| 386 | - } else if (mql.addListener) { | |
| 387 | - mql.addListener(mqlHandler); | |
| 388 | - } | |
| 389 | - } | |
| 390 | - } else { | |
| 391 | - applyTheme(nextMode === 'dark'); | |
| 392 | - } | |
| 499 | + $rules_count = 0; | |
| 500 | + foreach ($groups as $group) { | |
| 501 | + $rules = $group['rules'] ?? []; | |
| 502 | + $rules_count += is_array($rules) ? count($rules) : 0; | |
| 503 | + } | |
| 393 | 504 | |
| 394 | - if (save) { | |
| 395 | - saveUISetting('theme_mode', nextMode); | |
| 396 | - } | |
| 397 | - } | |
| 505 | + return (string) sprintf( | |
| 506 | + /* translators: %d: number of rules */ | |
| 507 | + esc_html__('%d rules', 'king-addons'), | |
| 508 | + $rules_count | |
| 509 | + ); | |
| 510 | + } | |
| 398 | 511 | |
| 399 | - window.kaV3ToggleDark = function() { | |
| 400 | - const isDark = document.body.classList.contains('ka-v3-dark'); | |
| 401 | - setThemeMode(isDark ? 'light' : 'dark', true); | |
| 402 | - }; | |
| 403 | - | |
| 404 | - if (segment) { | |
| 405 | - segment.addEventListener('click', function(e) { | |
| 406 | - const btn = e.target.closest('.ka-v3-segmented-btn'); | |
| 407 | - if (!btn) return; | |
| 408 | - e.preventDefault(); | |
| 409 | - setThemeMode((btn.getAttribute('data-theme') || 'dark').toString(), true); | |
| 410 | - }); | |
| 411 | - } | |
| 412 | - | |
| 413 | - if (segment) { | |
| 414 | - setThemeMode(mode, false); | |
| 415 | - } | |
| 416 | - })(); | |
| 417 | - </script> | |
| 418 | - <?php | |
| 512 | + /** | |
| 513 | + * SVG icon for Theme Builder type. | |
| 514 | + * | |
| 515 | + * @param string $type_slug Theme Builder type slug. | |
| 516 | + * | |
| 517 | + * @return string | |
| 518 | + */ | |
| 519 | + private function get_theme_builder_type_icon_svg(string $type_slug): string | |
| 520 | + { | |
| 521 | + $type_slug = sanitize_key($type_slug); | |
| 522 | + switch ($type_slug) { | |
| 523 | + case 'single': | |
| 524 | + return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8M8 17h6"/></svg>'; | |
| 525 | + case 'archive': | |
| 526 | + return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="4" width="18" height="6" rx="2"/><path d="M7 10v10h10V10"/><path d="M10 14h4"/></svg>'; | |
| 527 | + case 'author': | |
| 528 | + return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20 21a8 8 0 1 0-16 0"/><circle cx="12" cy="7" r="4"/></svg>'; | |
| 529 | + case 'search': | |
| 530 | + return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>'; | |
| 531 | + case 'not_found': | |
| 532 | + return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'; | |
| 533 | + default: | |
| 534 | + return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 4h16v16H4z"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>'; | |
| 535 | + } | |
| 419 | 536 | } |
| 420 | 537 | |
| 421 | 538 | /** |
| 422 | 539 | * Render modern CSS styles for Theme Builder admin page. |
| @@ -426,208 +543,684 @@ | ||
| 426 | 543 | private function render_modern_styles(): void |
| 427 | 544 | { |
| 428 | 545 | ?> |
| 429 | 546 | <style> |
| 430 | - /* Theme Builder V3 Additional Styles */ | |
| 431 | - .ka-tb-wrap { | |
| 432 | - max-width: 1400px; | |
| 547 | + /* ================================================ | |
| 548 | + Theme Builder - Match Woo Builder Admin Design | |
| 549 | + ================================================ */ | |
| 550 | + | |
| 551 | + :root { | |
| 552 | + --ka-tb-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif; | |
| 553 | + --ka-tb-bg: #f5f5f7; | |
| 554 | + --ka-tb-surface: #ffffff; | |
| 555 | + --ka-tb-text: #1d1d1f; | |
| 556 | + --ka-tb-text-secondary: #86868b; | |
| 557 | + --ka-tb-border: rgba(0, 0, 0, 0.06); | |
| 558 | + --ka-tb-accent: #0071e3; | |
| 559 | + --ka-tb-accent-hover: #0077ed; | |
| 560 | + --ka-tb-radius: 20px; | |
| 561 | + --ka-tb-radius-sm: 12px; | |
| 562 | + --ka-tb-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); | |
| 563 | + --ka-tb-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.10); | |
| 564 | + --ka-tb-transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); | |
| 433 | 565 | } |
| 434 | 566 | |
| 435 | - /* Table overrides for V3 */ | |
| 436 | - .ka-tb-wrap .wp-list-table { | |
| 437 | - border: none; | |
| 567 | + body.ka-v3-dark { | |
| 568 | + --ka-tb-bg: #000000; | |
| 569 | + --ka-tb-surface: #1c1c1e; | |
| 570 | + --ka-tb-text: #f5f5f7; | |
| 571 | + --ka-tb-text-secondary: #98989d; | |
| 572 | + --ka-tb-border: rgba(255, 255, 255, 0.10); | |
| 573 | + --ka-tb-shadow: 0 4px 24px rgba(0, 0, 0, 0.30); | |
| 574 | + --ka-tb-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.40); | |
| 438 | 575 | } |
| 439 | - .ka-tb-wrap .wp-list-table th { | |
| 440 | - background: rgba(0, 0, 0, 0.02); | |
| 441 | - padding: 14px 20px; | |
| 442 | - font-size: 11px; | |
| 443 | - font-weight: 600; | |
| 444 | - color: #86868b; | |
| 445 | - text-transform: uppercase; | |
| 446 | - letter-spacing: 0.5px; | |
| 447 | - border-bottom: 1px solid rgba(0, 0, 0, 0.04); | |
| 576 | + | |
| 577 | + body.wp-admin #wpcontent, | |
| 578 | + body.wp-admin #wpbody, | |
| 579 | + body.wp-admin #wpbody-content { | |
| 580 | + background: var(--ka-tb-bg) !important; | |
| 581 | + padding: 0 !important; | |
| 448 | 582 | } |
| 449 | - body.ka-v3-dark .ka-tb-wrap .wp-list-table th { | |
| 450 | - background: rgba(255, 255, 255, 0.02); | |
| 451 | - color: #86868b; | |
| 452 | - border-bottom-color: rgba(255, 255, 255, 0.04); | |
| 583 | + | |
| 584 | + .ka-tb { | |
| 585 | + font-family: var(--ka-tb-font); | |
| 586 | + max-width: 1100px; | |
| 587 | + margin: 0 auto; | |
| 588 | + padding: 48px 40px 80px; | |
| 589 | + color: var(--ka-tb-text); | |
| 590 | + -webkit-font-smoothing: antialiased; | |
| 453 | 591 | } |
| 454 | - .ka-tb-wrap .wp-list-table td { | |
| 455 | - padding: 14px 20px; | |
| 456 | - border-bottom: 1px solid rgba(0, 0, 0, 0.04); | |
| 592 | + .ka-tb * { box-sizing: border-box; } | |
| 593 | + | |
| 594 | + /* Header */ | |
| 595 | + .ka-tb-header { | |
| 596 | + display: flex; | |
| 597 | + justify-content: space-between; | |
| 598 | + align-items: flex-start; | |
| 599 | + margin-bottom: 40px; | |
| 600 | + gap: 20px; | |
| 601 | + } | |
| 602 | + .ka-tb-header-content { | |
| 603 | + display: flex; | |
| 604 | + align-items: flex-start; | |
| 605 | + gap: 16px; | |
| 606 | + } | |
| 607 | + | |
| 608 | + .ka-tb-header-titles { | |
| 609 | + display: flex; | |
| 610 | + flex-direction: column; | |
| 611 | + gap: 8px; | |
| 612 | + min-width: 0; | |
| 613 | + } | |
| 614 | + | |
| 615 | + .ka-tb-header-titles h1 { | |
| 616 | + font-size: 56px; | |
| 617 | + font-weight: 700; | |
| 618 | + letter-spacing: -0.025em; | |
| 619 | + margin: 0; | |
| 620 | + line-height: 1; | |
| 621 | + } | |
| 622 | + .ka-tb-header-titles p { | |
| 623 | + font-size: 21px; | |
| 624 | + color: var(--ka-tb-text-secondary); | |
| 625 | + margin: 0; | |
| 626 | + font-weight: 400; | |
| 627 | + } | |
| 628 | + .ka-tb-title-icon { | |
| 629 | + width: 76px; | |
| 630 | + height: 76px; | |
| 631 | + display: inline-flex; | |
| 632 | + align-items: center; | |
| 633 | + justify-content: center; | |
| 634 | + border-radius: 22px; | |
| 635 | + background: rgba(0, 113, 227, 0.12); | |
| 636 | + color: var(--ka-tb-accent); | |
| 637 | + flex: 0 0 auto; | |
| 638 | + } | |
| 639 | + body.ka-v3-dark .ka-tb-title-icon { | |
| 640 | + background: rgba(10, 132, 255, 0.18); | |
| 641 | + color: #0a84ff; | |
| 642 | + } | |
| 643 | + .ka-tb-title-icon svg { width: 36px; height: 36px; } | |
| 644 | + .ka-tb-title-text { | |
| 645 | + background: linear-gradient(135deg, var(--ka-tb-text) 0%, var(--ka-tb-text-secondary) 100%); | |
| 646 | + -webkit-background-clip: text; | |
| 647 | + -webkit-text-fill-color: transparent; | |
| 648 | + background-clip: text; | |
| 649 | + } | |
| 650 | + /* subtitle moved under .ka-tb-header-titles */ | |
| 651 | + .ka-tb-header-actions { | |
| 652 | + display: flex; | |
| 653 | + align-items: center; | |
| 654 | + gap: 12px; | |
| 655 | + flex-wrap: wrap; | |
| 656 | + justify-content: flex-end; | |
| 657 | + } | |
| 658 | + | |
| 659 | + /* Buttons */ | |
| 660 | + .ka-tb-btn { | |
| 661 | + display: inline-flex; | |
| 662 | + align-items: center; | |
| 663 | + justify-content: center; | |
| 664 | + gap: 8px; | |
| 665 | + padding: 10px 18px; | |
| 457 | 666 | font-size: 14px; |
| 458 | - color: #1d1d1f; | |
| 667 | + font-weight: 500; | |
| 668 | + text-decoration: none; | |
| 669 | + border-radius: 980px; | |
| 670 | + border: none; | |
| 671 | + cursor: pointer; | |
| 672 | + transition: var(--ka-tb-transition); | |
| 673 | + white-space: nowrap; | |
| 674 | + font-family: inherit; | |
| 459 | 675 | } |
| 460 | - body.ka-v3-dark .ka-tb-wrap .wp-list-table td { | |
| 461 | - color: #f5f5f7; | |
| 462 | - border-bottom-color: rgba(255, 255, 255, 0.04); | |
| 676 | + .ka-tb-btn-icon { | |
| 677 | + font-size: 16px; | |
| 678 | + line-height: 1; | |
| 463 | 679 | } |
| 464 | - .ka-tb-wrap .wp-list-table tbody tr:hover td { | |
| 465 | - background: rgba(0, 0, 0, 0.02); | |
| 680 | + .ka-tb-btn-primary { | |
| 681 | + background: var(--ka-tb-accent); | |
| 682 | + color: #fff; | |
| 466 | 683 | } |
| 467 | - body.ka-v3-dark .ka-tb-wrap .wp-list-table tbody tr:hover td { | |
| 468 | - background: rgba(255, 255, 255, 0.02); | |
| 684 | + .ka-tb-btn-primary:hover { | |
| 685 | + background: var(--ka-tb-accent-hover); | |
| 686 | + color: #fff; | |
| 687 | + transform: scale(1.02); | |
| 469 | 688 | } |
| 470 | - .ka-tb-wrap .wp-list-table .row-actions { | |
| 471 | - font-size: 12px; | |
| 689 | + .ka-tb-btn-secondary { | |
| 690 | + background: rgba(0, 0, 0, 0.04); | |
| 691 | + color: var(--ka-tb-text); | |
| 472 | 692 | } |
| 473 | - .ka-tb-wrap .wp-list-table .row-actions a { | |
| 474 | - color: #0071e3; | |
| 693 | + body.ka-v3-dark .ka-tb-btn-secondary { | |
| 694 | + background: rgba(255, 255, 255, 0.08); | |
| 475 | 695 | } |
| 476 | - body.ka-v3-dark .ka-tb-wrap .wp-list-table .row-actions a { | |
| 477 | - color: #2997ff; | |
| 696 | + .ka-tb-btn-secondary:hover { | |
| 697 | + background: rgba(0, 0, 0, 0.08); | |
| 698 | + color: var(--ka-tb-text); | |
| 478 | 699 | } |
| 479 | - .ka-tb-wrap .subsubsub { | |
| 480 | - margin: 16px 24px; | |
| 700 | + body.ka-v3-dark .ka-tb-btn-secondary:hover { | |
| 701 | + background: rgba(255, 255, 255, 0.12); | |
| 481 | 702 | } |
| 482 | - .ka-tb-wrap .subsubsub a { | |
| 483 | - color: #1d1d1f; | |
| 703 | + | |
| 704 | + /* Template Types */ | |
| 705 | + .ka-tb-types { | |
| 706 | + display: grid; | |
| 707 | + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| 708 | + gap: 16px; | |
| 709 | + margin-bottom: 44px; | |
| 484 | 710 | } |
| 485 | - body.ka-v3-dark .ka-tb-wrap .subsubsub a { | |
| 486 | - color: #f5f5f7; | |
| 711 | + .ka-tb-type { | |
| 712 | + position: relative; | |
| 713 | + display: flex; | |
| 714 | + flex-direction: column; | |
| 715 | + align-items: center; | |
| 716 | + padding: 32px 20px; | |
| 717 | + background: var(--ka-tb-surface); | |
| 718 | + border: 1px solid var(--ka-tb-border); | |
| 719 | + border-radius: var(--ka-tb-radius); | |
| 720 | + color: var(--ka-tb-text); | |
| 721 | + transition: var(--ka-tb-transition); | |
| 722 | + cursor: pointer; | |
| 723 | + overflow: hidden; | |
| 487 | 724 | } |
| 488 | - .ka-tb-wrap .subsubsub a.current { | |
| 489 | - color: #0071e3; | |
| 725 | + .ka-tb-type:hover { | |
| 726 | + transform: translateY(-4px); | |
| 727 | + box-shadow: var(--ka-tb-shadow-hover); | |
| 728 | + border-color: var(--ka-tb-accent); | |
| 490 | 729 | } |
| 491 | - body.ka-v3-dark .ka-tb-wrap .subsubsub a.current { | |
| 492 | - color: #2997ff; | |
| 730 | + .ka-tb-type-icon { | |
| 731 | + width: 48px; | |
| 732 | + height: 48px; | |
| 733 | + margin-bottom: 16px; | |
| 734 | + color: var(--ka-tb-text-secondary); | |
| 735 | + transition: var(--ka-tb-transition); | |
| 493 | 736 | } |
| 494 | - .ka-tb-wrap .tablenav { | |
| 495 | - padding: 12px 24px; | |
| 737 | + .ka-tb-type:hover .ka-tb-type-icon { | |
| 738 | + transform: scale(1.1); | |
| 739 | + color: var(--ka-tb-accent); | |
| 496 | 740 | } |
| 741 | + .ka-tb-type-icon svg { width: 100%; height: 100%; } | |
| 742 | + .ka-tb-type-label { | |
| 743 | + font-size: 17px; | |
| 744 | + font-weight: 600; | |
| 745 | + margin-bottom: 4px; | |
| 746 | + text-align: center; | |
| 747 | + } | |
| 748 | + .ka-tb-type-desc { | |
| 749 | + font-size: 13px; | |
| 750 | + color: var(--ka-tb-text-secondary); | |
| 751 | + text-align: center; | |
| 752 | + } | |
| 497 | 753 | |
| 498 | - /* Modal V3 */ | |
| 499 | - .ka-theme-builder-modal { | |
| 500 | - position: fixed; | |
| 501 | - inset: 0; | |
| 502 | - z-index: 100000; | |
| 503 | - display: flex; | |
| 504 | - align-items: center; | |
| 505 | - justify-content: center; | |
| 754 | + /* Section */ | |
| 755 | + .ka-tb-section { margin-bottom: 48px; } | |
| 756 | + .ka-tb-section-header { | |
| 757 | + display: flex; | |
| 758 | + justify-content: space-between; | |
| 759 | + align-items: center; | |
| 760 | + margin-bottom: 18px; | |
| 761 | + gap: 12px; | |
| 506 | 762 | } |
| 507 | - .ka-theme-builder-modal__backdrop { | |
| 508 | - position: absolute; | |
| 509 | - inset: 0; | |
| 510 | - background: rgba(0,0,0,0.5); | |
| 511 | - backdrop-filter: blur(20px); | |
| 512 | - -webkit-backdrop-filter: blur(20px); | |
| 763 | + .ka-tb-section-title { | |
| 764 | + font-size: 28px; | |
| 765 | + font-weight: 600; | |
| 766 | + letter-spacing: -0.01em; | |
| 767 | + margin: 0; | |
| 513 | 768 | } |
| 514 | - .ka-theme-builder-modal__content { | |
| 515 | - position: relative; | |
| 516 | - background: #fff; | |
| 517 | - border-radius: 20px; | |
| 518 | - padding: 32px; | |
| 519 | - max-width: 500px; | |
| 520 | - width: 90%; | |
| 521 | - box-shadow: 0 20px 60px rgba(0,0,0,0.3); | |
| 522 | - animation: kaModalIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| 769 | + .ka-tb-section-actions { | |
| 770 | + display: flex; | |
| 771 | + align-items: center; | |
| 772 | + gap: 12px; | |
| 523 | 773 | } |
| 524 | - body.ka-v3-dark .ka-theme-builder-modal__content { | |
| 525 | - background: #1c1c1e; | |
| 774 | + .ka-tb-section-count { | |
| 775 | + font-size: 15px; | |
| 776 | + color: var(--ka-tb-text-secondary); | |
| 777 | + background: var(--ka-tb-surface); | |
| 778 | + padding: 6px 14px; | |
| 779 | + border-radius: 20px; | |
| 780 | + border: 1px solid var(--ka-tb-border); | |
| 781 | + white-space: nowrap; | |
| 526 | 782 | } |
| 527 | - @keyframes kaModalIn { | |
| 528 | - from { opacity: 0; transform: scale(0.95) translateY(-10px); } | |
| 529 | - to { opacity: 1; transform: scale(1) translateY(0); } | |
| 783 | + | |
| 784 | + /* Filters */ | |
| 785 | + .ka-tb-filters { | |
| 786 | + display: inline-flex; | |
| 787 | + align-items: center; | |
| 788 | + gap: 6px; | |
| 789 | + padding: 6px; | |
| 790 | + border-radius: 980px; | |
| 791 | + border: 1px solid var(--ka-tb-border); | |
| 792 | + background: var(--ka-tb-surface); | |
| 530 | 793 | } |
| 531 | - .ka-theme-builder-modal__content h2 { | |
| 532 | - margin: 0 0 24px; | |
| 533 | - font-size: 22px; | |
| 534 | - font-weight: 600; | |
| 535 | - color: #1d1d1f; | |
| 794 | + .ka-tb-filter { | |
| 795 | + display: inline-flex; | |
| 796 | + align-items: center; | |
| 797 | + justify-content: center; | |
| 798 | + padding: 8px 12px; | |
| 799 | + border-radius: 980px; | |
| 800 | + text-decoration: none; | |
| 801 | + font-size: 13px; | |
| 802 | + font-weight: 600; | |
| 803 | + color: var(--ka-tb-text-secondary); | |
| 804 | + transition: var(--ka-tb-transition); | |
| 536 | 805 | } |
| 537 | - body.ka-v3-dark .ka-theme-builder-modal__content h2 { | |
| 538 | - color: #f5f5f7; | |
| 806 | + .ka-tb-filter.is-active { | |
| 807 | + background: rgba(0, 113, 227, 0.12); | |
| 808 | + color: var(--ka-tb-accent); | |
| 539 | 809 | } |
| 540 | - .ka-theme-builder-modal__content p { | |
| 541 | - margin-bottom: 16px; | |
| 542 | - color: #86868b; | |
| 810 | + .ka-tb-filter:hover { | |
| 811 | + background: rgba(0, 0, 0, 0.04); | |
| 812 | + color: var(--ka-tb-text); | |
| 543 | 813 | } |
| 544 | - .ka-theme-builder-modal__content label { | |
| 545 | - display: block; | |
| 546 | - font-size: 14px; | |
| 814 | + body.ka-v3-dark .ka-tb-filter:hover { | |
| 815 | + background: rgba(255, 255, 255, 0.06); | |
| 816 | + } | |
| 817 | + | |
| 818 | + /* Templates List */ | |
| 819 | + .ka-tb-templates { | |
| 820 | + background: var(--ka-tb-surface); | |
| 821 | + border-radius: var(--ka-tb-radius); | |
| 822 | + border: 1px solid var(--ka-tb-border); | |
| 823 | + overflow: visible; | |
| 824 | + } | |
| 825 | + .ka-tb-template { | |
| 826 | + display: grid; | |
| 827 | + grid-template-columns: auto 1fr auto auto; | |
| 828 | + align-items: center; | |
| 829 | + gap: 20px; | |
| 830 | + padding: 20px 24px; | |
| 831 | + border-bottom: 1px solid var(--ka-tb-border); | |
| 832 | + transition: var(--ka-tb-transition); | |
| 833 | + } | |
| 834 | + .ka-tb-template:last-child { border-bottom: none; } | |
| 835 | + .ka-tb-template:hover { background: rgba(0, 113, 227, 0.03); } | |
| 836 | + body.ka-v3-dark .ka-tb-template:hover { background: rgba(255, 255, 255, 0.03); } | |
| 837 | + | |
| 838 | + .ka-tb-template-info { | |
| 839 | + display: flex; | |
| 840 | + flex-direction: column; | |
| 841 | + gap: 4px; | |
| 842 | + min-width: 0; | |
| 843 | + } | |
| 844 | + .ka-tb-template-title { | |
| 845 | + font-size: 16px; | |
| 547 | 846 | font-weight: 500; |
| 548 | - color: #1d1d1f; | |
| 549 | - margin-bottom: 8px; | |
| 847 | + color: var(--ka-tb-text); | |
| 848 | + text-decoration: none; | |
| 849 | + display: inline-flex; | |
| 850 | + align-items: center; | |
| 851 | + gap: 8px; | |
| 852 | + min-width: 0; | |
| 853 | + transition: var(--ka-tb-transition); | |
| 550 | 854 | } |
| 551 | - body.ka-v3-dark .ka-theme-builder-modal__content label { | |
| 552 | - color: #f5f5f7; | |
| 855 | + .ka-tb-template-title-icon { | |
| 856 | + width: 18px; | |
| 857 | + height: 18px; | |
| 858 | + display: inline-flex; | |
| 859 | + align-items: center; | |
| 860 | + justify-content: center; | |
| 861 | + color: var(--ka-tb-text-secondary); | |
| 862 | + flex: 0 0 auto; | |
| 553 | 863 | } |
| 554 | - .ka-theme-builder-modal__content input[type="text"], | |
| 555 | - .ka-theme-builder-modal__content input[type="number"], | |
| 556 | - .ka-theme-builder-modal__content select { | |
| 557 | - width: 100%; | |
| 558 | - padding: 12px 16px; | |
| 559 | - border: 1px solid rgba(0, 0, 0, 0.1); | |
| 560 | - border-radius: 12px; | |
| 561 | - font-size: 15px; | |
| 562 | - background: #fff; | |
| 563 | - transition: border-color 0.2s, box-shadow 0.2s; | |
| 864 | + .ka-tb-template-title-icon svg { width: 18px; height: 18px; } | |
| 865 | + .ka-tb-template-title-text { | |
| 866 | + min-width: 0; | |
| 867 | + white-space: nowrap; | |
| 868 | + overflow: hidden; | |
| 869 | + text-overflow: ellipsis; | |
| 564 | 870 | } |
| 565 | - body.ka-v3-dark .ka-theme-builder-modal__content input[type="text"], | |
| 566 | - body.ka-v3-dark .ka-theme-builder-modal__content input[type="number"], | |
| 567 | - body.ka-v3-dark .ka-theme-builder-modal__content select { | |
| 568 | - background: #2c2c2e; | |
| 569 | - border-color: rgba(255, 255, 255, 0.1); | |
| 570 | - color: #f5f5f7; | |
| 871 | + .ka-tb-template-title:hover { color: var(--ka-tb-accent); } | |
| 872 | + .ka-tb-template-meta { | |
| 873 | + display: flex; | |
| 874 | + align-items: center; | |
| 875 | + gap: 12px; | |
| 876 | + font-size: 13px; | |
| 877 | + color: var(--ka-tb-text-secondary); | |
| 878 | + flex-wrap: wrap; | |
| 571 | 879 | } |
| 572 | - .ka-theme-builder-modal__content input:focus, | |
| 573 | - .ka-theme-builder-modal__content select:focus { | |
| 574 | - outline: none; | |
| 575 | - border-color: #0071e3; | |
| 576 | - box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1); | |
| 880 | + .ka-tb-template-type { | |
| 881 | + display: inline-flex; | |
| 882 | + align-items: center; | |
| 883 | + gap: 6px; | |
| 577 | 884 | } |
| 578 | - body.ka-v3-dark .ka-theme-builder-modal__content input:focus, | |
| 579 | - body.ka-v3-dark .ka-theme-builder-modal__content select:focus { | |
| 580 | - border-color: #2997ff; | |
| 581 | - box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.2); | |
| 885 | + .ka-tb-template-type::before { | |
| 886 | + content: ''; | |
| 887 | + width: 6px; | |
| 888 | + height: 6px; | |
| 889 | + background: var(--ka-tb-accent); | |
| 890 | + border-radius: 50%; | |
| 582 | 891 | } |
| 583 | - .ka-theme-builder-modal__content .submit { | |
| 584 | - margin-top: 24px; | |
| 585 | - display: flex; | |
| 892 | + | |
| 893 | + .ka-tb-template-status { | |
| 894 | + display: inline-flex; | |
| 895 | + align-items: center; | |
| 896 | + padding: 6px 14px; | |
| 897 | + font-size: 13px; | |
| 898 | + font-weight: 600; | |
| 899 | + border-radius: 8px; | |
| 900 | + white-space: nowrap; | |
| 901 | + min-width: 90px; | |
| 902 | + justify-content: center; | |
| 903 | + justify-self: start; | |
| 904 | + } | |
| 905 | + .ka-tb-template-status.is-enabled { | |
| 906 | + background: rgba(52, 199, 89, 0.15); | |
| 907 | + color: #30d158; | |
| 908 | + } | |
| 909 | + .ka-tb-template-status.is-disabled { | |
| 910 | + background: rgba(255, 149, 0, 0.15); | |
| 911 | + color: #ff9f0a; | |
| 912 | + } | |
| 913 | + | |
| 914 | + .ka-tb-template-condition { | |
| 915 | + display: inline-flex; | |
| 916 | + align-items: center; | |
| 917 | + gap: 8px; | |
| 918 | + padding: 10px 18px; | |
| 919 | + min-height: 40px; | |
| 920 | + font-size: 14px; | |
| 921 | + font-weight: 500; | |
| 922 | + border-radius: 980px; | |
| 923 | + background: rgba(0, 113, 227, 0.10); | |
| 924 | + color: var(--ka-tb-accent); | |
| 925 | + max-width: 240px; | |
| 926 | + overflow: hidden; | |
| 927 | + text-overflow: ellipsis; | |
| 928 | + white-space: nowrap; | |
| 929 | + border: none; | |
| 930 | + cursor: default; | |
| 931 | + } | |
| 932 | + .ka-tb-template-condition svg { | |
| 933 | + width: 18px; | |
| 934 | + height: 18px; | |
| 935 | + flex-shrink: 0; | |
| 936 | + opacity: 0.7; | |
| 937 | + } | |
| 938 | + | |
| 939 | + .ka-tb-template-actions { | |
| 940 | + display: flex; | |
| 941 | + align-items: center; | |
| 586 | 942 | gap: 12px; |
| 943 | + flex-wrap: nowrap; | |
| 587 | 944 | } |
| 588 | - .ka-theme-builder-modal__content .button-primary { | |
| 589 | - background: #0071e3; | |
| 590 | - border: none; | |
| 591 | - padding: 12px 24px; | |
| 592 | - font-size: 15px; | |
| 593 | - font-weight: 400; | |
| 594 | - border-radius: 980px; | |
| 595 | - cursor: pointer; | |
| 596 | - color: #fff; | |
| 597 | - transition: all 0.3s; | |
| 945 | + | |
| 946 | + /* Dropdown */ | |
| 947 | + .ka-tb-dropdown { position: relative; } | |
| 948 | + .ka-tb-dropdown-trigger { | |
| 949 | + display: flex; | |
| 950 | + align-items: center; | |
| 951 | + justify-content: center; | |
| 952 | + width: 40px; | |
| 953 | + height: 40px; | |
| 954 | + border-radius: 10px; | |
| 955 | + background: transparent; | |
| 956 | + border: 1px solid transparent; | |
| 957 | + cursor: pointer; | |
| 958 | + transition: var(--ka-tb-transition); | |
| 959 | + color: var(--ka-tb-text-secondary); | |
| 598 | 960 | } |
| 599 | - .ka-theme-builder-modal__content .button-primary:hover { | |
| 600 | - background: #0077ed; | |
| 961 | + .ka-tb-dropdown-trigger:hover { | |
| 962 | + background: var(--ka-tb-surface); | |
| 963 | + border-color: var(--ka-tb-border); | |
| 964 | + color: var(--ka-tb-text); | |
| 601 | 965 | } |
| 602 | - .ka-theme-builder-modal__content .button { | |
| 603 | - padding: 12px 20px; | |
| 604 | - border-radius: 980px; | |
| 605 | - font-size: 15px; | |
| 966 | + .ka-tb-dropdown-trigger svg { width: 20px; height: 20px; } | |
| 967 | + .ka-tb-dropdown-menu { | |
| 968 | + position: absolute; | |
| 969 | + top: 100%; | |
| 970 | + right: 0; | |
| 971 | + z-index: 100; | |
| 972 | + min-width: 180px; | |
| 973 | + padding: 8px 0; | |
| 974 | + background: var(--ka-tb-surface); | |
| 975 | + border: 1px solid var(--ka-tb-border); | |
| 976 | + border-radius: var(--ka-tb-radius-sm); | |
| 977 | + box-shadow: var(--ka-tb-shadow-hover); | |
| 978 | + opacity: 0; | |
| 979 | + visibility: hidden; | |
| 980 | + transform: translateY(-8px); | |
| 981 | + transition: var(--ka-tb-transition); | |
| 982 | + } | |
| 983 | + .ka-tb-dropdown.is-open .ka-tb-dropdown-menu { | |
| 984 | + opacity: 1; | |
| 985 | + visibility: visible; | |
| 986 | + transform: translateY(4px); | |
| 987 | + } | |
| 988 | + .ka-tb-dropdown-item { | |
| 989 | + display: flex; | |
| 990 | + align-items: center; | |
| 991 | + gap: 10px; | |
| 992 | + padding: 10px 16px; | |
| 993 | + font-size: 14px; | |
| 994 | + color: var(--ka-tb-text); | |
| 995 | + text-decoration: none; | |
| 606 | 996 | cursor: pointer; |
| 607 | - background: rgba(0, 0, 0, 0.06); | |
| 608 | - border: none; | |
| 609 | - color: #1d1d1f; | |
| 997 | + transition: var(--ka-tb-transition); | |
| 610 | 998 | } |
| 611 | - body.ka-v3-dark .ka-theme-builder-modal__content .button { | |
| 612 | - background: rgba(255, 255, 255, 0.1); | |
| 613 | - color: #f5f5f7; | |
| 999 | + .ka-tb-dropdown-item:hover { background: var(--ka-tb-border); } | |
| 1000 | + .ka-tb-dropdown-item.is-danger { color: #ff3b30; } | |
| 1001 | + .ka-tb-dropdown-divider { height: 1px; margin: 8px 0; background: var(--ka-tb-border); } | |
| 1002 | + | |
| 1003 | + /* Empty state */ | |
| 1004 | + .ka-tb-empty { | |
| 1005 | + padding: 42px 24px; | |
| 1006 | + text-align: center; | |
| 614 | 1007 | } |
| 615 | - .ka-theme-builder-modal__content input[type="checkbox"] { | |
| 616 | - width: 18px; | |
| 617 | - height: 18px; | |
| 618 | - margin-right: 8px; | |
| 619 | - vertical-align: middle; | |
| 1008 | + .ka-tb-empty-title { | |
| 1009 | + margin: 0 0 8px; | |
| 1010 | + font-size: 20px; | |
| 1011 | + font-weight: 600; | |
| 620 | 1012 | } |
| 1013 | + .ka-tb-empty-desc { | |
| 1014 | + margin: 0 0 18px; | |
| 1015 | + color: var(--ka-tb-text-secondary); | |
| 1016 | + font-size: 15px; | |
| 1017 | + } | |
| 621 | 1018 | |
| 1019 | + /* Modal - Premium Design */ | |
| 1020 | + .ka-theme-builder-modal { display: none; } | |
| 1021 | + .ka-tb-modal-overlay { | |
| 1022 | + position: fixed; | |
| 1023 | + top: 0; | |
| 1024 | + left: 0; | |
| 1025 | + right: 0; | |
| 1026 | + bottom: 0; | |
| 1027 | + z-index: 100000; | |
| 1028 | + background: rgba(0, 0, 0, 0.55); | |
| 1029 | + backdrop-filter: blur(12px); | |
| 1030 | + -webkit-backdrop-filter: blur(12px); | |
| 1031 | + display: flex; | |
| 1032 | + align-items: center; | |
| 1033 | + justify-content: center; | |
| 1034 | + opacity: 0; | |
| 1035 | + visibility: hidden; | |
| 1036 | + transition: opacity 0.25s ease, visibility 0.25s ease; | |
| 1037 | + padding: 20px; | |
| 1038 | + } | |
| 1039 | + .ka-tb-modal-overlay.is-open { | |
| 1040 | + opacity: 1; | |
| 1041 | + visibility: visible; | |
| 1042 | + } | |
| 1043 | + .ka-tb-modal { | |
| 1044 | + width: 100%; | |
| 1045 | + max-width: 480px; | |
| 1046 | + padding: 40px 44px 36px; | |
| 1047 | + background: var(--ka-tb-surface); | |
| 1048 | + border-radius: 24px; | |
| 1049 | + box-shadow: 0 32px 100px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; | |
| 1050 | + transform: scale(0.92) translateY(20px); | |
| 1051 | + transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; | |
| 1052 | + opacity: 0; | |
| 1053 | + } | |
| 1054 | + body.ka-v3-dark .ka-tb-modal { | |
| 1055 | + background: rgba(28, 28, 30, 0.92); | |
| 1056 | + border: 1px solid rgba(255, 255, 255, 0.12); | |
| 1057 | + box-shadow: 0 32px 100px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; | |
| 1058 | + } | |
| 1059 | + .ka-tb-modal-overlay.is-open .ka-tb-modal { | |
| 1060 | + transform: scale(1) translateY(0); | |
| 1061 | + opacity: 1; | |
| 1062 | + } | |
| 1063 | + .ka-tb-modal h3 { | |
| 1064 | + font-size: 28px; | |
| 1065 | + font-weight: 700; | |
| 1066 | + margin: 0 0 6px; | |
| 1067 | + color: var(--ka-tb-text); | |
| 1068 | + letter-spacing: -0.03em; | |
| 1069 | + line-height: 1.15; | |
| 1070 | + } | |
| 1071 | + .ka-tb-modal-desc { | |
| 1072 | + font-size: 16px; | |
| 1073 | + color: var(--ka-tb-text-secondary); | |
| 1074 | + margin: 0 0 28px; | |
| 1075 | + line-height: 1.5; | |
| 1076 | + } | |
| 1077 | + .ka-tb-form-group { | |
| 1078 | + margin-bottom: 20px; | |
| 1079 | + } | |
| 1080 | + .ka-tb-form-label { | |
| 1081 | + display: block; | |
| 1082 | + font-size: 12px; | |
| 1083 | + font-weight: 600; | |
| 1084 | + color: var(--ka-tb-text-secondary); | |
| 1085 | + margin-bottom: 8px; | |
| 1086 | + text-transform: uppercase; | |
| 1087 | + letter-spacing: 0.6px; | |
| 1088 | + } | |
| 1089 | + .ka-tb-modal input[type="text"].ka-tb-modal-input, | |
| 1090 | + .ka-tb-modal-input { | |
| 1091 | + width: 100% !important; | |
| 1092 | + padding: 16px 20px !important; | |
| 1093 | + font-size: 17px !important; | |
| 1094 | + font-family: inherit !important; | |
| 1095 | + font-weight: 400 !important; | |
| 1096 | + border: 2px solid rgba(84, 84, 88, 0.36) !important; | |
| 1097 | + border-radius: 14px !important; | |
| 1098 | + background: #2c2c2e !important; | |
| 1099 | + color: #f5f5f7 !important; | |
| 1100 | + transition: all 0.2s ease !important; | |
| 1101 | + box-shadow: none !important; | |
| 1102 | + -webkit-appearance: none !important; | |
| 1103 | + appearance: none !important; | |
| 1104 | + line-height: 1.4 !important; | |
| 1105 | + height: auto !important; | |
| 1106 | + margin: 0 !important; | |
| 1107 | + } | |
| 1108 | + body:not(.ka-v3-dark) .ka-tb-modal input[type="text"].ka-tb-modal-input, | |
| 1109 | + body:not(.ka-v3-dark) .ka-tb-modal-input { | |
| 1110 | + background: #f5f5f7 !important; | |
| 1111 | + border-color: rgba(0, 0, 0, 0.12) !important; | |
| 1112 | + color: #1d1d1f !important; | |
| 1113 | + } | |
| 1114 | + .ka-tb-modal-input::placeholder { | |
| 1115 | + color: #98989d !important; | |
| 1116 | + opacity: 1 !important; | |
| 1117 | + } | |
| 1118 | + .ka-tb-modal-input:hover { | |
| 1119 | + border-color: rgba(10, 132, 255, 0.5) !important; | |
| 1120 | + } | |
| 1121 | + body:not(.ka-v3-dark) .ka-tb-modal-input:hover { | |
| 1122 | + border-color: rgba(0, 113, 227, 0.5) !important; | |
| 1123 | + } | |
| 1124 | + .ka-tb-modal-input:focus { | |
| 1125 | + outline: none !important; | |
| 1126 | + border-color: #0a84ff !important; | |
| 1127 | + background: #3a3a3c !important; | |
| 1128 | + box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.25) !important; | |
| 1129 | + } | |
| 1130 | + body:not(.ka-v3-dark) .ka-tb-modal-input:focus { | |
| 1131 | + background: #ffffff !important; | |
| 1132 | + border-color: #0071e3 !important; | |
| 1133 | + box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important; | |
| 1134 | + } | |
| 1135 | + .ka-tb-modal select.ka-tb-form-select, | |
| 1136 | + .ka-tb-form-select { | |
| 1137 | + width: 100% !important; | |
| 1138 | + padding: 16px 52px 16px 20px !important; | |
| 1139 | + font-size: 17px !important; | |
| 1140 | + font-family: inherit !important; | |
| 1141 | + font-weight: 400 !important; | |
| 1142 | + border: 2px solid rgba(84, 84, 88, 0.36) !important; | |
| 1143 | + border-radius: 14px !important; | |
| 1144 | + background-color: #2c2c2e !important; | |
| 1145 | + color: #f5f5f7 !important; | |
| 1146 | + transition: all 0.2s ease !important; | |
| 1147 | + cursor: pointer !important; | |
| 1148 | + appearance: none !important; | |
| 1149 | + -webkit-appearance: none !important; | |
| 1150 | + -moz-appearance: none !important; | |
| 1151 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; | |
| 1152 | + background-repeat: no-repeat !important; | |
| 1153 | + background-position: right 18px center !important; | |
| 1154 | + background-size: 20px 20px !important; | |
| 1155 | + line-height: 1.4 !important; | |
| 1156 | + height: auto !important; | |
| 1157 | + margin: 0 !important; | |
| 1158 | + box-shadow: none !important; | |
| 1159 | + } | |
| 1160 | + body:not(.ka-v3-dark) .ka-tb-modal select.ka-tb-form-select, | |
| 1161 | + body:not(.ka-v3-dark) .ka-tb-form-select { | |
| 1162 | + background-color: #f5f5f7 !important; | |
| 1163 | + border-color: rgba(0, 0, 0, 0.12) !important; | |
| 1164 | + color: #1d1d1f !important; | |
| 1165 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; | |
| 1166 | + } | |
| 1167 | + .ka-tb-form-select:hover { | |
| 1168 | + border-color: rgba(10, 132, 255, 0.5) !important; | |
| 1169 | + } | |
| 1170 | + body:not(.ka-v3-dark) .ka-tb-form-select:hover { | |
| 1171 | + border-color: rgba(0, 113, 227, 0.5) !important; | |
| 1172 | + } | |
| 1173 | + .ka-tb-form-select:focus { | |
| 1174 | + outline: none !important; | |
| 1175 | + border-color: #0a84ff !important; | |
| 1176 | + background-color: #3a3a3c !important; | |
| 1177 | + box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.25) !important; | |
| 1178 | + } | |
| 1179 | + body:not(.ka-v3-dark) .ka-tb-form-select:focus { | |
| 1180 | + background-color: #ffffff !important; | |
| 1181 | + border-color: #0071e3 !important; | |
| 1182 | + box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important; | |
| 1183 | + } | |
| 1184 | + .ka-tb-form-select option { | |
| 1185 | + background: #2c2c2e !important; | |
| 1186 | + color: #f5f5f7 !important; | |
| 1187 | + padding: 12px !important; | |
| 1188 | + } | |
| 1189 | + body:not(.ka-v3-dark) .ka-tb-form-select option { | |
| 1190 | + background: #ffffff !important; | |
| 1191 | + color: #1d1d1f !important; | |
| 1192 | + } | |
| 1193 | + .ka-tb-modal-actions { | |
| 1194 | + display: flex; | |
| 1195 | + gap: 12px; | |
| 1196 | + margin-top: 28px; | |
| 1197 | + justify-content: flex-end; | |
| 1198 | + flex-wrap: wrap; | |
| 1199 | + } | |
| 1200 | + .ka-tb-modal-actions .ka-tb-btn { | |
| 1201 | + padding: 14px 24px; | |
| 1202 | + font-size: 15px; | |
| 1203 | + font-weight: 500; | |
| 1204 | + } | |
| 1205 | + .ka-tb-modal-actions .ka-tb-btn-primary { | |
| 1206 | + min-width: 180px; | |
| 1207 | + } | |
| 1208 | + | |
| 622 | 1209 | /* Responsive */ |
| 623 | 1210 | @media (max-width: 782px) { |
| 624 | - .ka-tb-wrap .ka-admin-header { | |
| 625 | - flex-direction: column; | |
| 626 | - text-align: center; | |
| 627 | - gap: 16px; | |
| 628 | - } | |
| 1211 | + .ka-tb { padding: 36px 20px 70px; } | |
| 1212 | + .ka-tb-header { flex-direction: column; align-items: flex-start; } | |
| 1213 | + .ka-tb-header-titles h1 { font-size: 44px; } | |
| 1214 | + .ka-tb-title-icon { width: 64px; height: 64px; border-radius: 18px; } | |
| 1215 | + .ka-tb-title-icon svg { width: 30px; height: 30px; } | |
| 1216 | + .ka-tb-template { grid-template-columns: 1fr; gap: 12px; } | |
| 1217 | + .ka-tb-template-actions { justify-content: flex-start; flex-wrap: wrap; } | |
| 1218 | + .ka-tb-section-header { flex-direction: column; align-items: stretch; } | |
| 1219 | + .ka-tb-section-actions { flex-wrap: wrap; width: 100%; } | |
| 1220 | + .ka-tb-filters { flex-wrap: wrap; border-radius: 16px; max-width: 100%; } | |
| 629 | 1221 | } |
| 1222 | + /* (Old table/modal styles removed; Theme Builder now mirrors Woo Builder UI) */ | |
| 630 | 1223 | </style> |
| 631 | 1224 | <?php |
| 632 | 1225 | } |
| 633 | 1226 | |
| @@ -1057,22 +1650,25 @@ | ||
| 1057 | 1650 | */ |
| 1058 | 1651 | private function render_add_new_modal(): void |
| 1059 | 1652 | { |
| 1060 | 1653 | ?> |
| 1061 | - <div id="ka-theme-builder-modal" class="ka-theme-builder-modal" style="display:none;"> | |
| 1062 | - <div class="ka-theme-builder-modal__backdrop"></div> | |
| 1063 | - <div class="ka-theme-builder-modal__content"> | |
| 1064 | - <h2><?php echo esc_html__('Create Theme Template', 'king-addons'); ?></h2> | |
| 1654 | + <div id="ka-theme-builder-modal" class="ka-tb-modal-overlay" aria-hidden="true"> | |
| 1655 | + <div class="ka-tb-modal" role="dialog" aria-modal="true" aria-labelledby="ka-tb-create-title"> | |
| 1656 | + <h3 id="ka-tb-create-title"><?php echo esc_html__('Create Theme Template', 'king-addons'); ?></h3> | |
| 1657 | + <p class="ka-tb-modal-desc"><?php echo esc_html__('Choose the template type and where it should apply.', 'king-addons'); ?></p> | |
| 1658 | + | |
| 1065 | 1659 | <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>"> |
| 1066 | 1660 | <input type="hidden" name="action" value="ka_theme_builder_create" /> |
| 1067 | 1661 | <?php wp_nonce_field('ka_theme_builder_create', 'ka_theme_builder_create_nonce'); ?> |
| 1068 | - <p> | |
| 1069 | - <label for="ka-tb-title"><?php echo esc_html__('Template Name', 'king-addons'); ?></label> | |
| 1070 | - <input type="text" id="ka-tb-title" name="ka_tb_title" class="regular-text" value="<?php echo esc_attr__('Theme Template', 'king-addons'); ?>" /> | |
| 1071 | - </p> | |
| 1072 | - <p> | |
| 1073 | - <label for="ka-tb-type"><?php echo esc_html__('Template Type', 'king-addons'); ?></label> | |
| 1074 | - <select id="ka-tb-type" name="ka_tb_type"> | |
| 1662 | + | |
| 1663 | + <div class="ka-tb-form-group"> | |
| 1664 | + <label class="ka-tb-form-label" for="ka-tb-title"><?php echo esc_html__('Template Name', 'king-addons'); ?></label> | |
| 1665 | + <input type="text" id="ka-tb-title" name="ka_tb_title" class="ka-tb-modal-input" value="<?php echo esc_attr__('Theme Template', 'king-addons'); ?>" /> | |
| 1666 | + </div> | |
| 1667 | + | |
| 1668 | + <div class="ka-tb-form-group"> | |
| 1669 | + <label class="ka-tb-form-label" for="ka-tb-type"><?php echo esc_html__('Template Type', 'king-addons'); ?></label> | |
| 1670 | + <select id="ka-tb-type" name="ka_tb_type" class="ka-tb-form-select"> | |
| 1075 | 1671 | <option value="single"><?php echo esc_html__('Single', 'king-addons'); ?></option> |
| 1076 | 1672 | <option value="archive"><?php echo esc_html__('Archive', 'king-addons'); ?></option> |
| 1077 | 1673 | <option value="author"><?php echo esc_html__('Author', 'king-addons'); ?></option> |
| 1078 | 1674 | <option value="search"><?php echo esc_html__('Search', 'king-addons'); ?></option> |
| @@ -1077,12 +1673,13 @@ | ||
| 1077 | 1673 | <option value="author"><?php echo esc_html__('Author', 'king-addons'); ?></option> |
| 1078 | 1674 | <option value="search"><?php echo esc_html__('Search', 'king-addons'); ?></option> |
| 1079 | 1675 | <option value="not_found"><?php echo esc_html__('404', 'king-addons'); ?></option> |
| 1080 | 1676 | </select> |
| 1081 | - </p> | |
| 1082 | - <p> | |
| 1083 | - <label for="ka-tb-location"><?php echo esc_html__('Location', 'king-addons'); ?></label> | |
| 1084 | - <select id="ka-tb-location" name="ka_tb_location"> | |
| 1677 | + </div> | |
| 1678 | + | |
| 1679 | + <div class="ka-tb-form-group"> | |
| 1680 | + <label class="ka-tb-form-label" for="ka-tb-location"><?php echo esc_html__('Location', 'king-addons'); ?></label> | |
| 1681 | + <select id="ka-tb-location" name="ka_tb_location" class="ka-tb-form-select"> | |
| 1085 | 1682 | <option value="single_post"><?php echo esc_html__('All Posts', 'king-addons'); ?></option> |
| 1086 | 1683 | <option value="single_page"><?php echo esc_html__('All Pages', 'king-addons'); ?></option> |
| 1087 | 1684 | <option value="single_cpt"><?php echo esc_html__('Custom Post Types (Pro)', 'king-addons'); ?></option> |
| 1088 | 1685 | <option value="archive_blog"><?php echo esc_html__('Blog / Posts Page', 'king-addons'); ?></option> |
| @@ -1093,13 +1690,14 @@ | ||
| 1093 | 1690 | <option value="author_specific"><?php echo esc_html__('Specific Authors (Pro)', 'king-addons'); ?></option> |
| 1094 | 1691 | <option value="search_results"><?php echo esc_html__('Search Results', 'king-addons'); ?></option> |
| 1095 | 1692 | <option value="not_found"><?php echo esc_html__('404 Page', 'king-addons'); ?></option> |
| 1096 | 1693 | </select> |
| 1097 | - </p> | |
| 1098 | - <p class="submit"> | |
| 1099 | - <button type="submit" class="button button-primary"><?php echo esc_html__('Create and Edit with Elementor', 'king-addons'); ?></button> | |
| 1100 | - <button type="button" class="button ka-theme-builder-modal__close"><?php echo esc_html__('Cancel', 'king-addons'); ?></button> | |
| 1101 | - </p> | |
| 1694 | + </div> | |
| 1695 | + | |
| 1696 | + <div class="ka-tb-modal-actions"> | |
| 1697 | + <button type="button" class="ka-tb-btn ka-tb-btn-secondary ka-tb-modal-close"><?php echo esc_html__('Cancel', 'king-addons'); ?></button> | |
| 1698 | + <button type="submit" class="ka-tb-btn ka-tb-btn-primary"><?php echo esc_html__('Create and Edit with Elementor', 'king-addons'); ?></button> | |
| 1699 | + </div> | |
| 1102 | 1700 | </form> |
| 1103 | 1701 | </div> |
| 1104 | 1702 | </div> |
| 1105 | 1703 | <?php |
| @@ -1112,30 +1710,35 @@ | ||
| 1112 | 1710 | */ |
| 1113 | 1711 | private function render_quick_edit_modal(): void |
| 1114 | 1712 | { |
| 1115 | 1713 | ?> |
| 1116 | - <div id="ka-theme-builder-quick-modal" class="ka-theme-builder-modal" style="display:none;"> | |
| 1117 | - <div class="ka-theme-builder-modal__backdrop"></div> | |
| 1118 | - <div class="ka-theme-builder-modal__content"> | |
| 1119 | - <h2><?php echo esc_html__('Quick Edit Template', 'king-addons'); ?></h2> | |
| 1714 | + <div id="ka-theme-builder-quick-modal" class="ka-tb-modal-overlay" aria-hidden="true"> | |
| 1715 | + <div class="ka-tb-modal" role="dialog" aria-modal="true" aria-labelledby="ka-tb-quick-title"> | |
| 1716 | + <h3 id="ka-tb-quick-title"><?php echo esc_html__('Quick Edit Template', 'king-addons'); ?></h3> | |
| 1717 | + <p class="ka-tb-modal-desc"><?php echo esc_html__('Change priority and enabled status.', 'king-addons'); ?></p> | |
| 1718 | + | |
| 1120 | 1719 | <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>"> |
| 1121 | 1720 | <input type="hidden" name="action" value="ka_theme_builder_quick_update" /> |
| 1122 | 1721 | <?php wp_nonce_field('ka_theme_builder_quick', 'ka_theme_builder_quick_nonce'); ?> |
| 1123 | 1722 | <input type="hidden" id="ka-tb-quick-template-id" name="template_id" value="" /> |
| 1124 | - <p> | |
| 1125 | - <label for="ka-tb-quick-priority"><?php echo esc_html__('Priority', 'king-addons'); ?></label> | |
| 1126 | - <input type="number" id="ka-tb-quick-priority" name="priority" min="0" step="1" value="10" /> | |
| 1127 | - </p> | |
| 1128 | - <p> | |
| 1129 | - <label> | |
| 1130 | - <input type="checkbox" id="ka-tb-quick-enabled" name="enabled" value="1" /> | |
| 1131 | - <?php echo esc_html__('Enabled', 'king-addons'); ?> | |
| 1132 | - </label> | |
| 1133 | - </p> | |
| 1134 | - <p class="submit"> | |
| 1135 | - <button type="submit" class="button button-primary"><?php echo esc_html__('Save', 'king-addons'); ?></button> | |
| 1136 | - <button type="button" class="button ka-theme-builder-modal__close"><?php echo esc_html__('Cancel', 'king-addons'); ?></button> | |
| 1137 | - </p> | |
| 1723 | + | |
| 1724 | + <div class="ka-tb-form-group"> | |
| 1725 | + <label class="ka-tb-form-label" for="ka-tb-quick-priority"><?php echo esc_html__('Priority', 'king-addons'); ?></label> | |
| 1726 | + <input type="number" id="ka-tb-quick-priority" name="priority" min="0" step="1" value="10" class="ka-tb-modal-input" /> | |
| 1727 | + </div> | |
| 1728 | + | |
| 1729 | + <div class="ka-tb-form-group"> | |
| 1730 | + <label class="ka-tb-form-label" for="ka-tb-quick-enabled"><?php echo esc_html__('Status', 'king-addons'); ?></label> | |
| 1731 | + <select id="ka-tb-quick-enabled" name="enabled" class="ka-tb-form-select"> | |
| 1732 | + <option value="1"><?php echo esc_html__('Enabled', 'king-addons'); ?></option> | |
| 1733 | + <option value="0"><?php echo esc_html__('Disabled', 'king-addons'); ?></option> | |
| 1734 | + </select> | |
| 1735 | + </div> | |
| 1736 | + | |
| 1737 | + <div class="ka-tb-modal-actions"> | |
| 1738 | + <button type="button" class="ka-tb-btn ka-tb-btn-secondary ka-tb-modal-close"><?php echo esc_html__('Cancel', 'king-addons'); ?></button> | |
| 1739 | + <button type="submit" class="ka-tb-btn ka-tb-btn-primary"><?php echo esc_html__('Save', 'king-addons'); ?></button> | |
| 1740 | + </div> | |
| 1138 | 1741 | </form> |
| 1139 | 1742 | </div> |
| 1140 | 1743 | </div> |
| 1141 | 1744 | <?php |