diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css index 04a62e7..18a3907 100644 --- a/admin/css/wp-allstars-admin.css +++ b/admin/css/wp-allstars-admin.css @@ -733,6 +733,9 @@ input:checked + .wp-toggle-slider:before { box-sizing: border-box; position: relative; transform: translateY(-3px); + white-space: nowrap; + min-width: 60px; + justify-content: center; } .wp-setting-notification.error { @@ -744,18 +747,80 @@ input:checked + .wp-toggle-slider:before { .wp-allstars-toggle-left label, .wp-allstars-setting-row label { position: relative; - padding-right: 20px; + padding-right: 80px; /* Increased padding to accommodate notification */ display: inline-block; + min-width: 200px; /* Ensure minimum width for labels */ } -.wp-setting-left label .wp-setting-notification, -.wp-allstars-toggle-left label .wp-setting-notification, -.wp-allstars-setting-row label .wp-setting-notification { - position: absolute; - right: -60px; - top: -5px; - transform: translateY(0); - line-height: 1.4; +/* Ensure toggle switches don't wrap with notifications */ +.wp-allstars-toggle-left { + display: flex; + align-items: center; + flex-wrap: nowrap; + gap: 10px; +} + +.wp-allstars-toggle-left label { + flex: 1; + margin: 0; + padding-right: 80px; +} + +/* Role Checkboxes */ +.wp-allstars-role-checkboxes { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 10px; + margin-top: 10px; +} + +.wp-allstars-role-checkbox { + display: flex; + align-items: center; + gap: 8px; + padding: 8px; + background: #f8f9fa; + border: 1px solid #ddd; + border-radius: 4px; + cursor: pointer; + transition: all 0.2s ease; +} + +.wp-allstars-role-checkbox:hover { + background: #f0f0f1; + border-color: #2271b1; +} + +.wp-allstars-role-checkbox input[type="checkbox"] { + margin: 0; +} + +.wp-allstars-role-checkbox span { + font-size: 13px; + color: #50575e; +} + +/* Responsive adjustments for role checkboxes */ +@media screen and (max-width: 782px) { + .wp-allstars-role-checkboxes { + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 8px; + } + + .wp-allstars-role-checkbox { + padding: 6px; + } + + .wp-allstars-role-checkbox span { + font-size: 12px; + } + + /* Adjust label padding on mobile */ + .wp-setting-left label, + .wp-allstars-toggle-left label, + .wp-allstars-setting-row label { + padding-right: 70px; + } } @keyframes fadeIn { @@ -1573,54 +1638,4 @@ body.wp-admin .button.pricing-button:hover, flex-direction: column !important; position: relative !important; box-sizing: border-box !important; -} - -/* Role Checkboxes */ -.wp-allstars-role-checkboxes { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 10px; - margin-top: 10px; -} - -.wp-allstars-role-checkbox { - display: flex; - align-items: center; - gap: 8px; - padding: 8px; - background: #f8f9fa; - border: 1px solid #ddd; - border-radius: 4px; - cursor: pointer; - transition: all 0.2s ease; -} - -.wp-allstars-role-checkbox:hover { - background: #f0f0f1; - border-color: #2271b1; -} - -.wp-allstars-role-checkbox input[type="checkbox"] { - margin: 0; -} - -.wp-allstars-role-checkbox span { - font-size: 13px; - color: #50575e; -} - -/* Responsive adjustments for role checkboxes */ -@media screen and (max-width: 782px) { - .wp-allstars-role-checkboxes { - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - gap: 8px; - } - - .wp-allstars-role-checkbox { - padding: 6px; - } - - .wp-allstars-role-checkbox span { - font-size: 12px; - } } \ No newline at end of file diff --git a/admin/includes/class-access-manager.php b/admin/includes/class-access-manager.php index ff2c681..98bf2e1 100644 --- a/admin/includes/class-access-manager.php +++ b/admin/includes/class-access-manager.php @@ -23,6 +23,9 @@ class WP_Allstars_Access_Manager { // Add hooks for admin bar and dashboard access control add_action('init', array(__CLASS__, 'setup_access_control')); + + // Add AJAX handlers + add_action('wp_ajax_wp_allstars_update_access_setting', array(__CLASS__, 'handle_access_setting_update')); } /** @@ -49,6 +52,157 @@ class WP_Allstars_Access_Manager { array(), WP_ALLSTARS_VERSION ); + + // Add inline JS for handling settings updates + $access_js = ' + jQuery(document).ready(function($) { + // Handle main toggle switches + $("#wp_allstars_hide_admin_bar, #wp_allstars_restrict_dashboard").on("change", function() { + var $this = $(this); + var setting = $this.attr("id"); + var value = $this.is(":checked"); + + $.ajax({ + url: ajaxurl, + type: "POST", + data: { + action: "wp_allstars_update_access_setting", + setting: setting, + value: value, + nonce: "' . wp_create_nonce('wp-allstars-nonce') . '" + }, + success: function(response) { + if (response.success) { + showSavedNotification($this); + } else { + showErrorNotification($this); + } + }, + error: function() { + showErrorNotification($this); + } + }); + }); + + // Handle role checkbox changes + $(".wp-allstars-role-checkbox input").on("change", function() { + var $this = $(this); + var $container = $this.closest(".wp-allstars-role-checkboxes"); + var setting = $container.find("input").first().attr("name"); + var selectedRoles = []; + + $container.find("input:checked").each(function() { + selectedRoles.push($(this).val()); + }); + + $.ajax({ + url: ajaxurl, + type: "POST", + data: { + action: "wp_allstars_update_access_setting", + setting: setting, + value: selectedRoles, + nonce: "' . wp_create_nonce('wp-allstars-nonce') . '" + }, + success: function(response) { + if (response.success) { + showSavedNotification($this); + } else { + showErrorNotification($this); + } + }, + error: function() { + showErrorNotification($this); + } + }); + }); + + function showSavedNotification($element) { + var $label = $element.closest(".wp-allstars-toggle-left").find("label"); + var $notification = $label.find(".wp-setting-notification"); + + if ($notification.length === 0) { + $notification = $("").addClass("wp-setting-notification"); + $label.append($notification); + } + + $notification.text("Saved").removeClass("error").addClass("success"); + + setTimeout(function() { + $notification.fadeOut(300, function() { + $(this).remove(); + }); + }, 2000); + } + + function showErrorNotification($element) { + var $label = $element.closest(".wp-allstars-toggle-left").find("label"); + var $notification = $label.find(".wp-setting-notification"); + + if ($notification.length === 0) { + $notification = $("").addClass("wp-setting-notification"); + $label.append($notification); + } + + $notification.text("Error Saving").removeClass("success").addClass("error"); + + setTimeout(function() { + $notification.fadeOut(300, function() { + $(this).remove(); + }); + }, 2000); + } + }); + '; + + wp_add_inline_script('wp-allstars-admin', $access_js); + } + + /** + * Handle AJAX updates for access settings + */ + public static function handle_access_setting_update() { + // Verify nonce + if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wp-allstars-nonce')) { + wp_send_json_error('Invalid nonce'); + } + + // Check user capabilities + if (!current_user_can('manage_options')) { + wp_send_json_error('Insufficient permissions'); + } + + // Get and validate setting + $setting = isset($_POST['setting']) ? sanitize_text_field($_POST['setting']) : ''; + $value = isset($_POST['value']) ? $_POST['value'] : ''; + + if (empty($setting)) { + wp_send_json_error('Invalid setting'); + } + + // Handle different setting types + switch ($setting) { + case 'wp_allstars_hide_admin_bar': + update_option('wp_allstars_hide_admin_bar_roles', $value ? array('guest', 'subscriber', 'customer') : array()); + break; + + case 'wp_allstars_restrict_dashboard': + update_option('wp_allstars_restrict_dashboard_roles', $value ? array('guest', 'subscriber', 'customer') : array()); + break; + + case 'wp_allstars_hide_admin_bar_roles': + case 'wp_allstars_restrict_dashboard_roles': + if (is_array($value)) { + $value = array_map('sanitize_text_field', $value); + update_option($setting, $value); + } + break; + + default: + wp_send_json_error('Invalid setting name'); + } + + wp_send_json_success(); } /**