diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css index b3fb683..bae5040 100644 --- a/admin/css/wp-allstars-admin.css +++ b/admin/css/wp-allstars-admin.css @@ -88,9 +88,8 @@ position: relative; display: inline-block; width: 40px; - height: 20px; - margin-right: 12px; - cursor: pointer; + height: 24px; + flex-shrink: 0; } .wp-toggle-switch input { @@ -146,11 +145,10 @@ input:checked + .wp-toggle-slider:before { /* Toggle Sections */ .wp-allstars-toggle { background: #fff; - border: 1px solid #ddd; + border: 1px solid #ccc; border-radius: 8px; margin-bottom: 15px; - box-shadow: 0 1px 3px rgba(0,0,0,0.1); - transition: all 0.2s ease; + position: relative; } .wp-allstars-toggle:hover { @@ -159,15 +157,38 @@ input:checked + .wp-toggle-slider:before { } .wp-allstars-toggle-header { - padding: 24px; + padding: 15px; cursor: pointer; - user-select: none; + position: relative; +} + +.wp-allstars-toggle-header::after { + content: ''; + position: absolute; + right: 15px; + top: 50%; + transform: translateY(-50%); + width: 24px; + height: 24px; + background: url('data:image/svg+xml;utf8,') no-repeat center; + background-size: 24px; + transition: transform 0.3s ease; +} + +.wp-allstars-toggle-header[aria-expanded="true"]::after { + transform: translateY(-50%) rotate(180deg); } .wp-allstars-toggle-main { display: flex; align-items: center; justify-content: space-between; + padding-right: 40px; +} + +.wp-allstars-toggle-left { + display: flex; + align-items: center; gap: 10px; } @@ -181,6 +202,7 @@ input:checked + .wp-toggle-slider:before { color: #1d2327; line-height: 1.4; cursor: default; + pointer-events: none; } .wp-allstars-expand-settings { @@ -239,21 +261,6 @@ input:checked + .wp-toggle-slider:before { outline: 2px solid transparent; } -/* Add chevron icon using pseudo-element */ -.wp-allstars-toggle-header::after { - content: ""; - display: block; - width: 20px; - height: 20px; - background: url('data:image/svg+xml;utf8,') no-repeat center; - transition: transform 0.2s ease; - background-size: 20px; -} - -.wp-allstars-toggle-header[aria-expanded="true"]::after { - transform: rotate(180deg); -} - /* Clear floats after tabs */ .nav-tab-wrapper::after { content: ""; diff --git a/admin/js/wp-allstars-admin.js b/admin/js/wp-allstars-admin.js index 0dbc3a9..c5ff284 100644 --- a/admin/js/wp-allstars-admin.js +++ b/admin/js/wp-allstars-admin.js @@ -31,37 +31,35 @@ jQuery(document).ready(function($) { }); } - // Toggle switch functionality - stop propagation to prevent panel toggle + // Handle toggle switch clicks $('.wp-toggle-switch').on('click', function(e) { - e.stopPropagation(); // Prevent the click from bubbling to the header + e.stopPropagation(); }); - $('.wp-allstars-toggle input[type="checkbox"]').on('change', function(e) { - e.stopPropagation(); // Prevent the change from bubbling to the header - var $input = $(this); - var option = $input.attr('name'); - var value = $input.is(':checked') ? 1 : 0; + // Handle checkbox changes + $('.wp-toggle-switch input[type="checkbox"]').on('change', function(e) { + e.stopPropagation(); + }); + + // Handle panel toggle + $('.wp-allstars-toggle-header').on('click', function(e) { + if (!$(e.target).closest('.wp-toggle-switch').length) { + var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings'); + var isExpanded = $(this).attr('aria-expanded') === 'true'; + + $(this).attr('aria-expanded', !isExpanded); + $settings.slideToggle(); + } + }); + + // Set initial state + $('.wp-allstars-toggle-header').each(function() { + var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings'); + var isExpanded = $(this).attr('aria-expanded') === 'true'; - $.ajax({ - url: ajaxurl, - type: 'POST', - data: { - action: 'wp_allstars_update_option', - option: option, - value: value, - nonce: wpAllstars.nonce - }, - success: function(response) { - if (response.success) { - showNotification('Saved'); - } else { - showNotification('Error saving settings', true); - } - }, - error: function() { - showNotification('Error saving settings', true); - } - }); + if (!isExpanded) { + $settings.hide(); + } }); // Handle text, number, and textarea inputs @@ -80,37 +78,6 @@ jQuery(document).ready(function($) { }); }); - // Initialize accordion state - $('.wp-allstars-toggle-header').each(function() { - var $header = $(this); - var $panel = $header.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings'); - var isExpanded = $header.attr('aria-expanded') === 'true'; - - // Set initial state - if (isExpanded) { - $panel.show(); - } else { - $panel.hide(); - } - }); - - // Handle accordion functionality - $('.wp-allstars-toggle-header').on('click', function(e) { - var $header = $(this); - var $panel = $header.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings'); - var isExpanded = $header.attr('aria-expanded') === 'true'; - - // Toggle state - $header.attr('aria-expanded', !isExpanded); - - // Toggle panel with animation - if (!isExpanded) { - $panel.slideDown(200); - } else { - $panel.slideUp(200); - } - }); - // Handle form submission $('form').on('submit', function() { showNotification('Saved'); @@ -145,10 +112,11 @@ jQuery(document).ready(function($) { $.ajax({ url: ajaxurl, + type: 'POST', data: { action: 'wp_allstars_get_plugins', category: category || 'minimal', - _ajax_nonce: wpAllstars.nonce + _wpnonce: wpAllstars.nonce }, success: function(response) { if (response.success) { @@ -179,9 +147,10 @@ jQuery(document).ready(function($) { $.ajax({ url: ajaxurl, + type: 'POST', data: { action: 'wp_allstars_get_theme', - _ajax_nonce: wpAllstars.nonce + _wpnonce: wpAllstars.nonce }, success: function(response) { if (response.success) { diff --git a/admin/settings.php b/admin/settings.php index 6215a54..a8a8825 100644 --- a/admin/settings.php +++ b/admin/settings.php @@ -660,7 +660,7 @@ function wp_allstars_settings_page() {