From f35e6639c8833477b6bd5afd10b55140aa63de6b Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Sun, 16 Mar 2025 03:32:52 +0000
Subject: [PATCH] Update settings UI: reorder tabs, clarify examples, and
improve notifications
---
admin/css/wp-allstars-admin.css | 21 +++++++++++----------
admin/js/wp-allstars-admin.js | 33 +++++++++++++++++++++------------
admin/settings.php | 24 ++++++++++++++++--------
3 files changed, 48 insertions(+), 30 deletions(-)
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 = $('<span class="wp-status' + (isError ? ' error' : '') + '">' + message + '</span>');
- $('.wp-allstars-header h1').after($notification);
+ // Create notification element
+ var $notification = $('<span class="wp-setting-notification' + (isError ? ' error' : '') + '">' + message + '</span>');
- // 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() {
<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>