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

Fix multiple UI issues: notifications, Go Pro buttons, grid layout, and loading spinners

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 04:54:00 +00:00
parent 3429700e2b
commit fd5ac94d03
3 changed files with 62 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
admin/css/wp-allstars-plugins.css
View File

@ -1,6 +1,7 @@
/* Plugin Browser Styles */ /* Plugin Browser Styles */
.wp-allstars-plugin-browser { .wp-allstars-plugin-browser {
margin: 0 -16px; margin: 0 -8px;
padding: 0 8px;
} }
/* Plugin List Container */ /* Plugin List Container */
@ -8,6 +9,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0; margin: 0;
width: 100%;
} }
/* Filter Bar */ /* Filter Bar */
@ -259,18 +261,10 @@
z-index: 100; z-index: 100;
} }
.wp-allstars-loading-spinner { .wp-allstars-loading-overlay .spinner {
width: 50px; float: none;
height: 50px; visibility: visible;
border: 5px solid #f3f3f3; margin: 0;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} }
/* Theme Browser */ /* Theme Browser */
@ -357,18 +351,18 @@
/* Pro Buttons */ /* Pro Buttons */
.go-pro-button { .go-pro-button {
background: #ff8c00; background: #ff8c00 !important;
border-color: #ff7b00; border-color: #ff7b00 !important;
color: #fff; color: #fff !important;
box-shadow: 0 1px 0 #ff7b00; box-shadow: 0 1px 0 #ff7b00 !important;
text-shadow: 0 -1px 1px #ff7b00, 1px 0 1px #ff7b00, 0 1px 1px #ff7b00, -1px 0 1px #ff7b00; text-shadow: 0 -1px 1px #ff7b00, 1px 0 1px #ff7b00, 0 1px 1px #ff7b00, -1px 0 1px #ff7b00 !important;
} }
.go-pro-button:hover, .go-pro-button:hover,
.go-pro-button:focus { .go-pro-button:focus {
background: #ff9d1c; background: #ff9d1c !important;
border-color: #ff7b00; border-color: #ff7b00 !important;
color: #fff; color: #fff !important;
} }
/* More Details Link */ /* More Details Link */
@ -390,6 +384,23 @@
text-align: right; text-align: right;
} }
/* Settings Notifications */
.wp-setting-notification {
display: inline-block;
background: #72aee6;
color: #fff;
padding: 5px 10px;
border-radius: 3px;
margin-left: 10px;
font-size: 12px;
line-height: 1.2;
vertical-align: middle;
}
.wp-setting-notification.error {
background: #d63638;
}
/* Responsive Adjustments */ /* Responsive Adjustments */
@media only screen and (max-width: 1120px) { @media only screen and (max-width: 1120px) {
.plugin-card { .plugin-card {

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

@ -1,6 +1,6 @@
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
// Function to show notification // Function to show notification
function showNotification(message, element, isError = false) { function showNotification(message, $element, isError = false) {
// Remove any existing notifications // Remove any existing notifications
$('.wp-setting-notification').remove(); $('.wp-setting-notification').remove();
@ -8,8 +8,8 @@ jQuery(document).ready(function($) {
var $notification = $('<span class="wp-setting-notification' + (isError ? ' error' : '') + '">' + message + '</span>'); var $notification = $('<span class="wp-setting-notification' + (isError ? ' error' : '') + '">' + message + '</span>');
// If element is provided, show notification next to it // If element is provided, show notification next to it
if (element) { if ($element && $element.length) {
$(element).after($notification); $element.after($notification);
} else { } else {
// Fallback to header if no element provided // Fallback to header if no element provided
$('.wp-allstars-header h1').after($notification); $('.wp-allstars-header h1').after($notification);
@ -24,7 +24,7 @@ jQuery(document).ready(function($) {
} }
// Handle option updates // Handle option updates
function updateOption(option, value, element) { function updateOption(option, value) {
return $.ajax({ return $.ajax({
url: ajaxurl, url: ajaxurl,
type: 'POST', type: 'POST',
@ -32,7 +32,7 @@ jQuery(document).ready(function($) {
action: 'wp_allstars_update_option', action: 'wp_allstars_update_option',
option: option, option: option,
value: value, value: value,
_wpnonce: wpAllstars.nonce nonce: wpAllstars.nonce
} }
}).then(function(response) { }).then(function(response) {
if (!response.success) { if (!response.success) {
@ -61,13 +61,31 @@ jQuery(document).ready(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;
var $label = $input.closest('.wp-setting-left, .wp-allstars-toggle-left').find('label');
updateOption(option, value) updateOption(option, value)
.then(function() { .then(function() {
showNotification('Saved', $input.closest('.wp-setting-left, .wp-allstars-toggle-left')); showNotification('Saved', $label);
}) })
.catch(function() { .catch(function() {
showNotification('Error saving settings', $input.closest('.wp-setting-left, .wp-allstars-toggle-left'), true); showNotification('Error saving settings', $label, true);
});
});
// Handle text input changes
$('.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();
var $label = $input.closest('.wp-allstars-setting-row').find('label').first();
updateOption(option, value)
.then(function() {
showNotification('Saved', $label);
})
.catch(function(error) {
console.error('Error:', error);
showNotification('Error saving setting', $label, true);
}); });
}); });
@ -123,7 +141,7 @@ jQuery(document).ready(function($) {
// Function to load plugins // Function to load plugins
function loadPlugins(category) { function loadPlugins(category) {
var $container = $('#wpa-plugin-list'); var $container = $('#wpa-plugin-list');
var $loadingOverlay = $('<div class="wp-allstars-loading-overlay"><div class="wp-allstars-loading-spinner"></div></div>'); var $loadingOverlay = $('<div class="wp-allstars-loading-overlay"><span class="spinner is-active"></span></div>');
// Show loading overlay // Show loading overlay
$container.css('position', 'relative').append($loadingOverlay); $container.css('position', 'relative').append($loadingOverlay);
@ -169,7 +187,7 @@ jQuery(document).ready(function($) {
// Function to load themes // Function to load themes
function loadTheme() { function loadTheme() {
var $container = $('#wpa-theme-list'); var $container = $('#wpa-theme-list');
var $loadingOverlay = $('<div class="wp-allstars-loading-overlay"><div class="wp-allstars-loading-spinner"></div></div>'); var $loadingOverlay = $('<div class="wp-allstars-loading-overlay"><span class="spinner is-active"></span></div>');
// Show loading overlay // Show loading overlay
$container.css('position', 'relative').append($loadingOverlay); $container.css('position', 'relative').append($loadingOverlay);

6
admin/settings.php
View File

@ -627,7 +627,7 @@ function wp_allstars_settings_page() {
if ($("#wpa-plugin-list").length && $("#wpa-plugin-list").is(":empty")) { if ($("#wpa-plugin-list").length && $("#wpa-plugin-list").is(":empty")) {
var category = "' . esc_js($active_category) . '"; var category = "' . esc_js($active_category) . '";
var $container = $("#wpa-plugin-list"); var $container = $("#wpa-plugin-list");
var $loadingOverlay = $("<div class=\"wp-allstars-loading-overlay\"><div class=\"wp-allstars-loading-spinner\"></div></div>"); var $loadingOverlay = $("<div class=\"wp-allstars-loading-overlay\"><span class=\"spinner is-active\"></span></div>");
// Show loading overlay // Show loading overlay
$container.css("position", "relative").append($loadingOverlay); $container.css("position", "relative").append($loadingOverlay);
@ -676,7 +676,7 @@ function wp_allstars_settings_page() {
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
if ($("#wpa-theme-list").length && $("#wpa-theme-list").is(":empty")) { if ($("#wpa-theme-list").length && $("#wpa-theme-list").is(":empty")) {
var $container = $("#wpa-theme-list"); var $container = $("#wpa-theme-list");
var $loadingOverlay = $("<div class=\"wp-allstars-loading-overlay\"><div class=\"wp-allstars-loading-spinner\"></div></div>"); var $loadingOverlay = $("<div class=\"wp-allstars-loading-overlay\"><span class=\"spinner is-active\"></span></div>");
// Show loading overlay // Show loading overlay
$container.css("position", "relative").append($loadingOverlay); $container.css("position", "relative").append($loadingOverlay);
@ -832,7 +832,7 @@ function wp_allstars_settings_page() {
<?php elseif ($active_tab == 'theme'): ?> <?php elseif ($active_tab == 'theme'): ?>
<div class="tab-content" id="theme"> <div class="tab-content" id="theme">
<div class="wp-list-table-container"> <div class="wp-list-table-container">
<div class="wpa-loading-overlay"> <div class="wp-allstars-loading-overlay">
<span class="spinner is-active"></span> <span class="spinner is-active"></span>
</div> </div>
<div id="wpa-theme-list"></div> <div id="wpa-theme-list"></div>