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

fix: Improve access control settings UI and functionality - Add AJAX saving for toggle switches and role checkboxes - Fix notification styling and layout issues - Shorten error message to 'Error Saving' - Add proper spacing for notifications to prevent layout shifts - Ensure labels have minimum width to prevent wrapping - Add success/error notifications for all setting changes

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-25 13:21:10 +00:00
parent 57398ea7b4
commit 00134f8ffc
2 changed files with 228 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
admin/css/wp-allstars-admin.css
View File

@ -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;
}
}

154
admin/includes/class-access-manager.php
View File

@ -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 = $("<span>").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 = $("<span>").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();
}
/**