marcus/wpa-superstar-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update settings UI: reorder tabs, clarify examples, and improve notifications

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 03:32:52 +00:00
parent 08659f8efd
commit f35e6639c8
3 changed files with 48 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
admin/css/wp-allstars-admin.css
View File

@ -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;

31
admin/js/wp-allstars-admin.js
View File

@ -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 = $('<span class="wp-status' + (isError ? ' error' : '') + '">' + message + '</span>');
// Create notification element
var $notification = $('<span class="wp-setting-notification' + (isError ? ' error' : '') + '">' + message + '</span>');
// 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);
}
// Remove the notification after 2 seconds
// 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);
});
});
}

24
admin/settings.php
View File

@ -636,12 +636,12 @@ function wp_allstars_settings_page() {
<a href="?page=wp-allstars&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>">
<?php esc_html_e('General', 'wp-allstars'); ?>
</a>
<a href="?page=wp-allstars&tab=workflow" class="nav-tab <?php echo $active_tab == 'workflow' ? 'nav-tab-active' : ''; ?>">
<?php esc_html_e('Workflow', 'wp-allstars'); ?>
</a>
<a href="?page=wp-allstars&tab=advanced" class="nav-tab <?php echo $active_tab == 'advanced' ? 'nav-tab-active' : ''; ?>">
<?php esc_html_e('Advanced', 'wp-allstars'); ?>
</a>
<a href="?page=wp-allstars&tab=workflow" class="nav-tab <?php echo $active_tab == 'workflow' ? 'nav-tab-active' : ''; ?>">
<?php esc_html_e('Workflow', 'wp-allstars'); ?>
</a>
<a href="?page=wp-allstars&tab=recommended" class="nav-tab <?php echo $active_tab == 'recommended' ? 'nav-tab-active' : ''; ?>">
<?php esc_html_e('Free Plugins', 'wp-allstars'); ?>
</a>
@ -972,12 +972,12 @@ function wp_allstars_settings_page() {
<span class="wp-toggle-slider"></span>
</div>
<label for="wp_allstars_simple_setting" class="wp-setting-label">
<?php esc_html_e('Simple Toggle Setting', 'wp-allstars'); ?>
<?php esc_html_e('Example: Simple Toggle', 'wp-allstars'); ?>
</label>
</div>
</div>
<p class="wp-setting-description">
<?php esc_html_e('This is an example of a simple toggle setting without an expandable panel.', 'wp-allstars'); ?>
<?php esc_html_e('This is an example of a simple toggle setting without an expandable panel. Currently for demonstration purposes only.', 'wp-allstars'); ?>
</p>
</div>
</div>
@ -1001,16 +1001,24 @@ function wp_allstars_settings_page() {
<span class="wp-toggle-slider"></span>
</div>
<label for="wp_allstars_auto_upload_images">
<?php esc_html_e('Enable Auto Upload Images', 'wp-allstars'); ?>
<?php esc_html_e('Example: Expandable Panel', 'wp-allstars'); ?>
</label>
</div>
</div>
<p class="wp-setting-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'); ?>
<?php esc_html_e('This is an example of an expandable panel setting. Currently for demonstration purposes only - no actual functionality.', 'wp-allstars'); ?>
</p>
</div>
<div class="wp-allstars-toggle-settings">
<!-- Additional settings content here -->
<div class="wp-allstars-setting-row">
<label for="example_text"><?php esc_html_e('Example Text Field', 'wp-allstars'); ?></label>
<input type="text"
id="example_text"
name="example_text"
value="Example value"
/>
<p class="description"><?php esc_html_e('This is an example text field for demonstration purposes.', 'wp-allstars'); ?></p>
</div>
</div>
</div>
</div>