Improve settings UI and functionality
- 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
@ -14,6 +14,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-allstars-header h1 {
|
||||
@ -41,45 +42,45 @@
|
||||
.nav-tab-wrapper,
|
||||
.wrap h2.nav-tab-wrapper {
|
||||
border-bottom: 1px solid #c3c4c7;
|
||||
margin: 0;
|
||||
padding-top: 9px;
|
||||
padding-bottom: 0;
|
||||
line-height: inherit;
|
||||
margin-bottom: 20px;
|
||||
margin: 0 -20px;
|
||||
padding: 0 20px;
|
||||
background: #fff;
|
||||
position: sticky;
|
||||
top: 32px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
float: left;
|
||||
border: 1px solid #c3c4c7;
|
||||
border-bottom: none;
|
||||
margin-left: 0.5em;
|
||||
padding: 8px 12px;
|
||||
margin: 0;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.71428571;
|
||||
font-weight: 600;
|
||||
background: #f0f0f1;
|
||||
line-height: 2;
|
||||
font-weight: 400;
|
||||
background: transparent;
|
||||
color: #50575e;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-tab:hover,
|
||||
.nav-tab:focus {
|
||||
background-color: #fff;
|
||||
color: #1d2327;
|
||||
border-color: #8c8f94;
|
||||
color: #2271b1;
|
||||
background: transparent;
|
||||
border-color: #2271b1;
|
||||
}
|
||||
|
||||
.nav-tab-active,
|
||||
.nav-tab-active:focus,
|
||||
.nav-tab-active:focus:active,
|
||||
.nav-tab-active:hover {
|
||||
border-bottom: 1px solid #f0f0f1;
|
||||
background: #f0f0f1;
|
||||
border-bottom: 2px solid #2271b1;
|
||||
background: transparent;
|
||||
color: #2271b1;
|
||||
margin-bottom: -1px;
|
||||
box-shadow: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Toggle Switches */
|
||||
@ -332,3 +333,41 @@ input:checked + .wp-toggle-slider:before {
|
||||
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;
|
||||
}
|
||||
@ -1,35 +1,66 @@
|
||||
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
|
||||
$('.wp-allstars-toggle input[type="checkbox"]').on('change', function() {
|
||||
var $input = $(this);
|
||||
var option = $input.attr('name');
|
||||
var value = $input.is(':checked') ? 1 : 0;
|
||||
|
||||
// Remove any existing status messages
|
||||
$('.wp-status').remove();
|
||||
updateOption(option, value)
|
||||
.then(function() {
|
||||
showNotification('Setting saved');
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.error('Error:', error);
|
||||
showNotification('Error saving setting', true);
|
||||
});
|
||||
});
|
||||
|
||||
// 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>');
|
||||
$('body').append($notification);
|
||||
// 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();
|
||||
|
||||
$.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);
|
||||
});
|
||||
updateOption(option, value)
|
||||
.then(function() {
|
||||
showNotification('Setting saved');
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.error('Error:', error);
|
||||
showNotification('Error saving setting', true);
|
||||
});
|
||||
});
|
||||
|
||||
// Expand/collapse settings functionality
|
||||
@ -48,21 +79,4 @@ jQuery(document).ready(function($) {
|
||||
$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);
|
||||
});
|
||||
});
|
||||
@ -507,28 +507,16 @@ function wp_allstars_settings_page() {
|
||||
|
||||
<div class="wpa-settings-content">
|
||||
<?php if ($active_tab == 'workflow'): ?>
|
||||
<form action="options.php" method="post">
|
||||
<?php settings_fields('wp_allstars_workflow'); ?>
|
||||
<div class="wp-allstars-settings-content">
|
||||
<div class="wp-allstars-toggle">
|
||||
<div class="wp-allstars-toggle-header">
|
||||
<label for="wp_allstars_auto_upload_images">
|
||||
<div class="wp-toggle-switch">
|
||||
<input type="checkbox"
|
||||
id="wp_allstars_auto_upload_images"
|
||||
name="wp_allstars_workflow_options[auto_upload_images]"
|
||||
name="wp_allstars_auto_upload_images"
|
||||
value="1"
|
||||
<?php
|
||||
$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);
|
||||
?>
|
||||
<?php checked(get_option('wp_allstars_auto_upload_images', false)); ?>
|
||||
/>
|
||||
<span class="wp-toggle-slider"></span>
|
||||
</div>
|
||||
@ -546,8 +534,8 @@ function wp_allstars_settings_page() {
|
||||
<label for="wp_max_width"><?php esc_html_e('Max Width', 'wp-allstars'); ?></label>
|
||||
<input type="number"
|
||||
id="wp_max_width"
|
||||
name="wp_allstars_workflow_options[max_width]"
|
||||
value="<?php echo esc_attr($options['max_width']); ?>"
|
||||
name="wp_max_width"
|
||||
value="<?php echo esc_attr(get_option('wp_allstars_max_width', 1920)); ?>"
|
||||
min="0"
|
||||
/>
|
||||
<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>
|
||||
<input type="number"
|
||||
id="wp_max_height"
|
||||
name="wp_allstars_workflow_options[max_height]"
|
||||
value="<?php echo esc_attr($options['max_height']); ?>"
|
||||
name="wp_max_height"
|
||||
value="<?php echo esc_attr(get_option('wp_allstars_max_height', 1080)); ?>"
|
||||
min="0"
|
||||
/>
|
||||
<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">
|
||||
<label for="wp_exclude_urls"><?php esc_html_e('Exclude URLs', 'wp-allstars'); ?></label>
|
||||
<textarea id="wp_exclude_urls"
|
||||
name="wp_allstars_workflow_options[exclude_urls]"
|
||||
name="wp_exclude_urls"
|
||||
rows="3"
|
||||
placeholder="example.com 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>
|
||||
</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>
|
||||
<input type="text"
|
||||
id="wp_image_name"
|
||||
name="wp_allstars_workflow_options[image_name_pattern]"
|
||||
value="<?php echo esc_attr($options['image_name_pattern']); ?>"
|
||||
name="wp_image_name"
|
||||
value="<?php echo esc_attr(get_option('wp_allstars_image_name_pattern', '%filename%')); ?>"
|
||||
/>
|
||||
<p class="description">
|
||||
<?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>
|
||||
<input type="text"
|
||||
id="wp_image_alt"
|
||||
name="wp_allstars_workflow_options[image_alt_pattern]"
|
||||
value="<?php echo esc_attr($options['image_alt_pattern']); ?>"
|
||||
name="wp_image_alt"
|
||||
value="<?php echo esc_attr(get_option('wp_allstars_image_alt_pattern', '%filename%')); ?>"
|
||||
/>
|
||||
<p class="description">
|
||||
<?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>
|
||||
<?php submit_button(); ?>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
|
||||
Reference in New Issue
Block a user