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

Improve settings UI and functionality

Browse Source 
- Fix toggle functionality for auto upload settings\n- Remove save changes button in favor of auto-saving\n- Improve loading spinner layout to prevent content jumping\n- Update tab navigation design\n- Enhance notification system with better positioning and styling\n- Add auto-save functionality for all settings\n- Improve error handling and feedback
This commit is contained in:
Marcus Quinn
2025-03-15 04:29:38 +00:00
parent d65aa23308
commit 6e353731c8
3 changed files with 128 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: auto; width: auto;
position: relative;
} }
.wp-allstars-header h1 { .wp-allstars-header h1 {
@ -41,45 +42,45 @@
.nav-tab-wrapper, .nav-tab-wrapper,
.wrap h2.nav-tab-wrapper { .wrap h2.nav-tab-wrapper {
border-bottom: 1px solid #c3c4c7; border-bottom: 1px solid #c3c4c7;
margin: 0; margin: 0 -20px;
padding-top: 9px; padding: 0 20px;
padding-bottom: 0; background: #fff;
line-height: inherit; position: sticky;
margin-bottom: 20px; top: 32px;
z-index: 100;
} }
.nav-tab { .nav-tab {
float: left; margin: 0;
border: 1px solid #c3c4c7; padding: 12px 20px;
border-bottom: none;
margin-left: 0.5em;
padding: 8px 12px;
font-size: 14px; font-size: 14px;
line-height: 1.71428571; line-height: 2;
font-weight: 600; font-weight: 400;
background: #f0f0f1; background: transparent;
color: #50575e; color: #50575e;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
border: none;
border-bottom: 2px solid transparent;
display: inline-block;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.nav-tab:hover, .nav-tab:hover,
.nav-tab:focus { .nav-tab:focus {
background-color: #fff; color: #2271b1;
color: #1d2327; background: transparent;
border-color: #8c8f94; border-color: #2271b1;
} }
.nav-tab-active, .nav-tab-active,
.nav-tab-active:focus, .nav-tab-active:focus,
.nav-tab-active:focus:active, .nav-tab-active:focus:active,
.nav-tab-active:hover { .nav-tab-active:hover {
border-bottom: 1px solid #f0f0f1; border-bottom: 2px solid #2271b1;
background: #f0f0f1; background: transparent;
color: #2271b1; color: #2271b1;
margin-bottom: -1px; font-weight: 600;
box-shadow: none;
} }
/* Toggle Switches */ /* Toggle Switches */
@ -332,3 +333,41 @@ input:checked + .wp-toggle-slider:before {
padding: 12px; padding: 12px;
} }
} }
/* Settings Notification */
.wp-status {
position: absolute !important;
right: 20px;
top: 50%;
transform: translateY(-50%);
background: #00a32a;
color: white;
padding: 6px 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 500;
z-index: 100;
}
.wp-status.error {
background: #d63638;
}
/* Settings Container */
.wp-list-table-container {
position: relative;
min-height: 400px;
}
.wpa-loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}

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

@ -1,34 +1,65 @@
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
// Function to show notification
function showNotification(message, isError = false) {
// Remove any existing notifications
$('.wp-status').remove();
// Add notification to header
var $notification = $('<span class="wp-status' + (isError ? ' error' : '') + '">' + message + '</span>');
$('.wp-allstars-header').append($notification);
// Fade out and remove after delay
setTimeout(function() {
$notification.fadeOut(300, function() {
$(this).remove();
});
}, 2000);
}
// Handle all settings changes
function updateOption(option, value) {
return $.post(wpAllstars.ajaxurl, {
action: 'wp_allstars_update_option',
option: option,
value: value,
nonce: wpAllstars.nonce
}).then(function(response) {
if (!response.success) {
throw new Error(response.data || 'Error saving setting');
}
return response;
});
}
// Toggle switch functionality // Toggle switch functionality
$('.wp-allstars-toggle input[type="checkbox"]').on('change', function() { $('.wp-allstars-toggle input[type="checkbox"]').on('change', function() {
var $input = $(this); var $input = $(this);
var option = $input.attr('name'); var option = $input.attr('name');
var value = $input.is(':checked') ? 1 : 0; var value = $input.is(':checked') ? 1 : 0;
// Remove any existing status messages updateOption(option, value)
$('.wp-status').remove(); .then(function() {
showNotification('Setting saved');
// Add a small notification that fades out })
var $notification = $('<span class="wp-status" style="position: fixed; top: 32px; left: 50%; transform: translateX(-50%); z-index: 99999; background: #00a32a; color: white; padding: 8px 16px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">Setting saved</span>'); .catch(function(error) {
$('body').append($notification); console.error('Error:', error);
showNotification('Error saving setting', true);
$.post(wpAllstars.ajaxurl, {
action: 'wp_allstars_update_option',
option: option,
value: value,
nonce: wpAllstars.nonce
}, function(response) {
if (!response.success) {
console.error('Error:', response);
$notification.css('background', '#d63638').text('Error saving setting');
}
// Fade out and remove the notification after 2 seconds
setTimeout(function() {
$notification.fadeOut(300, function() {
$(this).remove();
}); });
}, 2000); });
// Handle text, number, and textarea inputs
$('.wp-allstars-setting-row input[type="text"], .wp-allstars-setting-row input[type="number"], .wp-allstars-setting-row textarea').on('change', function() {
var $input = $(this);
var option = $input.attr('name');
var value = $input.val();
updateOption(option, value)
.then(function() {
showNotification('Setting saved');
})
.catch(function(error) {
console.error('Error:', error);
showNotification('Error saving setting', true);
}); });
}); });
@ -48,21 +79,4 @@ jQuery(document).ready(function($) {
$settings.slideDown(200); $settings.slideDown(200);
} }
}); });
// Save settings on form submit
$('form').on('submit', function() {
// Remove any existing status messages
$('.wp-status').remove();
// Add a small notification that fades out
var $notification = $('<span class="wp-status" style="position: fixed; top: 32px; left: 50%; transform: translateX(-50%); z-index: 99999; background: #00a32a; color: white; padding: 8px 16px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">Settings saved</span>');
$('body').append($notification);
// Fade out and remove the notification after 2 seconds
setTimeout(function() {
$notification.fadeOut(300, function() {
$(this).remove();
});
}, 2000);
});
}); });

41
admin/settings.php
View File

@ -507,28 +507,16 @@ function wp_allstars_settings_page() {
<div class="wpa-settings-content"> <div class="wpa-settings-content">
<?php if ($active_tab == 'workflow'): ?> <?php if ($active_tab == 'workflow'): ?>
<form action="options.php" method="post"> <div class="wp-allstars-settings-content">
<?php settings_fields('wp_allstars_workflow'); ?>
<div class="wp-allstars-toggle"> <div class="wp-allstars-toggle">
<div class="wp-allstars-toggle-header"> <div class="wp-allstars-toggle-header">
<label for="wp_allstars_auto_upload_images"> <label for="wp_allstars_auto_upload_images">
<div class="wp-toggle-switch"> <div class="wp-toggle-switch">
<input type="checkbox" <input type="checkbox"
id="wp_allstars_auto_upload_images" id="wp_allstars_auto_upload_images"
name="wp_allstars_workflow_options[auto_upload_images]" name="wp_allstars_auto_upload_images"
value="1" value="1"
<?php <?php checked(get_option('wp_allstars_auto_upload_images', false)); ?>
$options = get_option('wp_allstars_workflow_options', array(
'auto_upload_images' => false,
'max_width' => 1920,
'max_height' => 1080,
'exclude_urls' => '',
'exclude_post_types' => array(),
'image_name_pattern' => '%filename%',
'image_alt_pattern' => '%filename%'
));
checked($options['auto_upload_images'], true);
?>
/> />
<span class="wp-toggle-slider"></span> <span class="wp-toggle-slider"></span>
</div> </div>
@ -546,8 +534,8 @@ function wp_allstars_settings_page() {
<label for="wp_max_width"><?php esc_html_e('Max Width', 'wp-allstars'); ?></label> <label for="wp_max_width"><?php esc_html_e('Max Width', 'wp-allstars'); ?></label>
<input type="number" <input type="number"
id="wp_max_width" id="wp_max_width"
name="wp_allstars_workflow_options[max_width]" name="wp_max_width"
value="<?php echo esc_attr($options['max_width']); ?>" value="<?php echo esc_attr(get_option('wp_allstars_max_width', 1920)); ?>"
min="0" min="0"
/> />
<p class="description"><?php esc_html_e('Maximum width of uploaded images (px). Leave empty for no limit.', 'wp-allstars'); ?></p> <p class="description"><?php esc_html_e('Maximum width of uploaded images (px). Leave empty for no limit.', 'wp-allstars'); ?></p>
@ -557,8 +545,8 @@ function wp_allstars_settings_page() {
<label for="wp_max_height"><?php esc_html_e('Max Height', 'wp-allstars'); ?></label> <label for="wp_max_height"><?php esc_html_e('Max Height', 'wp-allstars'); ?></label>
<input type="number" <input type="number"
id="wp_max_height" id="wp_max_height"
name="wp_allstars_workflow_options[max_height]" name="wp_max_height"
value="<?php echo esc_attr($options['max_height']); ?>" value="<?php echo esc_attr(get_option('wp_allstars_max_height', 1080)); ?>"
min="0" min="0"
/> />
<p class="description"><?php esc_html_e('Maximum height of uploaded images (px). Leave empty for no limit.', 'wp-allstars'); ?></p> <p class="description"><?php esc_html_e('Maximum height of uploaded images (px). Leave empty for no limit.', 'wp-allstars'); ?></p>
@ -567,10 +555,10 @@ function wp_allstars_settings_page() {
<div class="wp-allstars-setting-row"> <div class="wp-allstars-setting-row">
<label for="wp_exclude_urls"><?php esc_html_e('Exclude URLs', 'wp-allstars'); ?></label> <label for="wp_exclude_urls"><?php esc_html_e('Exclude URLs', 'wp-allstars'); ?></label>
<textarea id="wp_exclude_urls" <textarea id="wp_exclude_urls"
name="wp_allstars_workflow_options[exclude_urls]" name="wp_exclude_urls"
rows="3" rows="3"
placeholder="example.com&#10;another-domain.com" placeholder="example.com&#10;another-domain.com"
><?php echo esc_textarea($options['exclude_urls']); ?></textarea> ><?php echo esc_textarea(get_option('wp_allstars_exclude_urls', '')); ?></textarea>
<p class="description"><?php esc_html_e('Enter domains to exclude (one per line). Images from these domains will not be imported.', 'wp-allstars'); ?></p> <p class="description"><?php esc_html_e('Enter domains to exclude (one per line). Images from these domains will not be imported.', 'wp-allstars'); ?></p>
</div> </div>
@ -578,8 +566,8 @@ function wp_allstars_settings_page() {
<label for="wp_image_name"><?php esc_html_e('Image Name Pattern', 'wp-allstars'); ?></label> <label for="wp_image_name"><?php esc_html_e('Image Name Pattern', 'wp-allstars'); ?></label>
<input type="text" <input type="text"
id="wp_image_name" id="wp_image_name"
name="wp_allstars_workflow_options[image_name_pattern]" name="wp_image_name"
value="<?php echo esc_attr($options['image_name_pattern']); ?>" value="<?php echo esc_attr(get_option('wp_allstars_image_name_pattern', '%filename%')); ?>"
/> />
<p class="description"> <p class="description">
<?php esc_html_e('Available patterns:', 'wp-allstars'); ?> %filename%, %post_id%, %postname%, %timestamp%, %date%, %year%, %month%, %day% <?php esc_html_e('Available patterns:', 'wp-allstars'); ?> %filename%, %post_id%, %postname%, %timestamp%, %date%, %year%, %month%, %day%
@ -590,8 +578,8 @@ function wp_allstars_settings_page() {
<label for="wp_image_alt"><?php esc_html_e('Image Alt Pattern', 'wp-allstars'); ?></label> <label for="wp_image_alt"><?php esc_html_e('Image Alt Pattern', 'wp-allstars'); ?></label>
<input type="text" <input type="text"
id="wp_image_alt" id="wp_image_alt"
name="wp_allstars_workflow_options[image_alt_pattern]" name="wp_image_alt"
value="<?php echo esc_attr($options['image_alt_pattern']); ?>" value="<?php echo esc_attr(get_option('wp_allstars_image_alt_pattern', '%filename%')); ?>"
/> />
<p class="description"> <p class="description">
<?php esc_html_e('Available patterns:', 'wp-allstars'); ?> %filename%, %post_title%, %post_id%, %postname%, %timestamp% <?php esc_html_e('Available patterns:', 'wp-allstars'); ?> %filename%, %post_title%, %post_id%, %postname%, %timestamp%
@ -599,8 +587,7 @@ function wp_allstars_settings_page() {
</div> </div>
</div> </div>
</div> </div>
<?php submit_button(); ?> </div>
</form>
<script> <script>
jQuery(document).ready(function($) { jQuery(document).ready(function($) {