From 374bedbedef3fe1ca7fef7cb5dc9698835ed8871 Mon Sep 17 00:00:00 2001 From: Marcus Quinn <marcus@agentdesign.co.uk> Date: Sun, 16 Mar 2025 03:05:43 +0000 Subject: [PATCH] Fix toggle switch and chevron behavior, improve layout --- admin/css/wp-allstars-admin.css | 53 +++++++++++--------- admin/js/wp-allstars-admin.js | 89 +++++++++++---------------------- admin/settings.php | 11 ++-- 3 files changed, 64 insertions(+), 89 deletions(-) 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>') 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z" fill="%232271b1"/></svg>') 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() { <div class="wp-allstars-toggle"> <div class="wp-allstars-toggle-header"> <div class="wp-allstars-toggle-main"> - <label for="wp_allstars_auto_upload_images"> + <div class="wp-allstars-toggle-left"> <div class="wp-toggle-switch"> <input type="checkbox" id="wp_allstars_auto_upload_images" @@ -670,11 +670,10 @@ function wp_allstars_settings_page() { /> <span class="wp-toggle-slider"></span> </div> - <?php esc_html_e('Enable Auto Upload Images', 'wp-allstars'); ?> - </label> - <button type="button" class="wp-allstars-expand-settings" aria-expanded="false"> - <span class="dashicons dashicons-arrow-down-alt2"></span> - </button> + <label for="wp_allstars_auto_upload_images"> + <?php esc_html_e('Enable Auto Upload Images', 'wp-allstars'); ?> + </label> + </div> </div> <p class="description"> <?php esc_html_e('Import images that have external URLs into your Media Library when saving. Consider disabling during large data imports with many external image URLs.', 'wp-allstars'); ?>