diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css index f8c158b..f26e14d 100644 --- a/admin/css/wp-allstars-admin.css +++ b/admin/css/wp-allstars-admin.css @@ -609,27 +609,28 @@ input:checked + .wp-toggle-slider:before { } /* Settings Notification */ -.wp-status { - position: relative !important; +.wp-setting-notification { display: inline-flex; align-items: center; - margin-left: 15px; - transform: none; - top: auto; - right: auto; + margin-left: 10px; background: #00a32a; color: white; - padding: 4px 12px; + padding: 3px 10px; border-radius: 12px; - font-size: 13px; + font-size: 12px; font-weight: 500; - z-index: 100; + animation: fadeIn 0.3s ease-in-out; } -.wp-status.error { +.wp-setting-notification.error { background: #d63638; } +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + .wpa-loading-overlay { position: absolute; top: 0; diff --git a/admin/js/wp-allstars-admin.js b/admin/js/wp-allstars-admin.js index e4eb622..629ff80 100644 --- a/admin/js/wp-allstars-admin.js +++ b/admin/js/wp-allstars-admin.js @@ -1,14 +1,21 @@ jQuery(document).ready(function($) { // Function to show notification - function showNotification(message, isError = false) { - // Remove any existing notification - $('.wp-status').remove(); + function showNotification(message, element, isError = false) { + // Remove any existing notifications + $('.wp-setting-notification').remove(); - // Create and append the new notification - var $notification = $('' + message + ''); - $('.wp-allstars-header h1').after($notification); + // Create notification element + var $notification = $('' + message + ''); - // Remove the notification after 2 seconds + // If element is provided, show notification next to it + if (element) { + $(element).after($notification); + } else { + // Fallback to header if no element provided + $('.wp-allstars-header h1').after($notification); + } + + // Fade out after delay setTimeout(function() { $notification.fadeOut(300, function() { $(this).remove(); @@ -17,7 +24,7 @@ jQuery(document).ready(function($) { } // Handle option updates - function updateOption(option, value) { + function updateOption(option, value, element) { return $.ajax({ url: ajaxurl, type: 'POST', @@ -51,13 +58,14 @@ jQuery(document).ready(function($) { var $input = $(this); var option = $input.attr('name'); var value = $input.is(':checked') ? 1 : 0; + var $label = $input.closest('.wp-setting-left').find('label'); updateOption(option, value) .then(function() { - showNotification('Saved'); + showNotification('Saved', $label); }) .catch(function() { - showNotification('Error saving settings', true); + showNotification('Error saving settings', $label, true); }); }); } @@ -92,14 +100,15 @@ jQuery(document).ready(function($) { var $input = $(this); var option = $input.attr('name'); var value = $input.val(); + var $label = $input.prev('label'); updateOption(option, value) .then(function() { - showNotification('Setting saved'); + showNotification('Saved', $label); }) .catch(function(error) { console.error('Error:', error); - showNotification('Error saving setting', true); + showNotification('Error saving setting', $label, true); }); }); } diff --git a/admin/settings.php b/admin/settings.php index 8f59fd8..d4826d5 100644 --- a/admin/settings.php +++ b/admin/settings.php @@ -636,12 +636,12 @@ function wp_allstars_settings_page() { - - - + + + @@ -972,12 +972,12 @@ function wp_allstars_settings_page() {

- +

@@ -1001,16 +1001,24 @@ function wp_allstars_settings_page() {

- +

- +
+ + +

+