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

2025-03-16 04:54:00 +00:00
parent 3429700e2b
commit fd5ac94d03
3 changed files with 62 additions and 33 deletions
--- a/admin/css/wp-allstars-plugins.css
+++ b/admin/css/wp-allstars-plugins.css
@ -1,6 +1,7 @@
 /* Plugin Browser Styles */
 .wp-allstars-plugin-browser {
-    margin: 0 -16px;
+    margin: 0 -8px;
+    padding: 0 8px;
 }

 /* Plugin List Container */
@ -8,6 +9,7 @@
    display: flex;
    flex-wrap: wrap;
    margin: 0;
+    width: 100%;
 }

 /* Filter Bar */
@ -259,18 +261,10 @@
    z-index: 100;
 }

-.wp-allstars-loading-spinner {
-    width: 50px;
-    height: 50px;
-    border: 5px solid #f3f3f3;
-    border-top: 5px solid #3498db;
-    border-radius: 50%;
-    animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+.wp-allstars-loading-overlay .spinner {
+    float: none;
+    visibility: visible;
+    margin: 0;
 }

 /* Theme Browser */
@ -357,18 +351,18 @@

 /* Pro Buttons */
 .go-pro-button {
-    background: #ff8c00;
-    border-color: #ff7b00;
-    color: #fff;
-    box-shadow: 0 1px 0 #ff7b00;
-    text-shadow: 0 -1px 1px #ff7b00, 1px 0 1px #ff7b00, 0 1px 1px #ff7b00, -1px 0 1px #ff7b00;
+    background: #ff8c00 !important;
+    border-color: #ff7b00 !important;
+    color: #fff !important;
+    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 !important;
 }

 .go-pro-button:hover,
 .go-pro-button:focus {
-    background: #ff9d1c;
-    border-color: #ff7b00;
-    color: #fff;
+    background: #ff9d1c !important;
+    border-color: #ff7b00 !important;
+    color: #fff !important;
 }

 /* More Details Link */
@ -390,6 +384,23 @@
    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 */
@media only screen and (max-width: 1120px) {
    .plugin-card {
--- a/admin/js/wp-allstars-admin.js
+++ b/admin/js/wp-allstars-admin.js
@ -1,6 +1,6 @@
 jQuery(document).ready(function($) {
    // Function to show notification
-    function showNotification(message, element, isError = false) {
+    function showNotification(message, $element, isError = false) {
        // Remove any existing notifications
        $('.wp-setting-notification').remove();
        
@ -8,8 +8,8 @@ jQuery(document).ready(function($) {
        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);
+        if ($element && $element.length) {
+            $element.after($notification);
        } else {
            // Fallback to header if no element provided
            $('.wp-allstars-header h1').after($notification);
@ -24,7 +24,7 @@ jQuery(document).ready(function($) {
    }

    // Handle option updates
-    function updateOption(option, value, element) {
+    function updateOption(option, value) {
        return $.ajax({
            url: ajaxurl,
            type: 'POST',
@ -32,7 +32,7 @@ jQuery(document).ready(function($) {
                action: 'wp_allstars_update_option',
                option: option,
                value: value,
-                _wpnonce: wpAllstars.nonce
+                nonce: wpAllstars.nonce
            }
        }).then(function(response) {
            if (!response.success) {
@ -61,13 +61,31 @@ 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, .wp-allstars-toggle-left').find('label');
        
        updateOption(option, value)
            .then(function() {
-                showNotification('Saved', $input.closest('.wp-setting-left, .wp-allstars-toggle-left'));
+                showNotification('Saved', $label);
            })
            .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 loadPlugins(category) {
        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
        $container.css('position', 'relative').append($loadingOverlay);
@ -169,7 +187,7 @@ jQuery(document).ready(function($) {
    // Function to load themes
    function loadTheme() {
        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
        $container.css('position', 'relative').append($loadingOverlay);
--- a/admin/settings.php
+++ b/admin/settings.php
@ -627,7 +627,7 @@ function wp_allstars_settings_page() {
                if ($("#wpa-plugin-list").length && $("#wpa-plugin-list").is(":empty")) {
                    var category = "' . esc_js($active_category) . '";
                    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
                    $container.css("position", "relative").append($loadingOverlay);
@ -676,7 +676,7 @@ function wp_allstars_settings_page() {
            jQuery(document).ready(function($) {
                if ($("#wpa-theme-list").length && $("#wpa-theme-list").is(":empty")) {
                    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
                    $container.css("position", "relative").append($loadingOverlay);
@ -832,7 +832,7 @@ function wp_allstars_settings_page() {
                <?php elseif ($active_tab == 'theme'): ?>
                    <div class="tab-content" id="theme">
                        <div class="wp-list-table-container">
-                            <div class="wpa-loading-overlay">
+                            <div class="wp-allstars-loading-overlay">
                                <span class="spinner is-active"></span>
                            </div>
                            <div id="wpa-theme-list"></div>