diff --git a/admin/css/wp-allstars-ui-enhancements.css b/admin/css/wp-allstars-ui-enhancements.css index dd120d4..9859fb2 100644 --- a/admin/css/wp-allstars-ui-enhancements.css +++ b/admin/css/wp-allstars-ui-enhancements.css @@ -198,6 +198,62 @@ /* * Enhanced Toggle Styles */ +/* Base toggle styles that apply even without enhanced UI */ +.wp-toggle-switch { + position: relative; + display: inline-block; + width: 40px; + height: 20px; + vertical-align: middle; + margin-right: 8px; +} + +.wp-toggle-switch input { + opacity: 0; + width: 0; + height: 0; + position: absolute; + z-index: 1; + cursor: pointer; +} + +.wp-toggle-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: .3s; + border-radius: 34px; +} + +.wp-toggle-slider:before { + position: absolute; + content: ""; + height: 16px; + width: 16px; + left: 2px; + bottom: 2px; + background-color: white; + transition: .3s; + border-radius: 50%; +} + +input:checked + .wp-toggle-slider { + background-color: #2271b1; +} + +input:focus + .wp-toggle-slider { + box-shadow: 0 0 1px #2271b1; +} + +input:checked + .wp-toggle-slider:before { + transform: translateX(20px); +} + +/* Enhanced UI specific toggle styles - only apply additional styling */ .wp-allstars-enhanced-ui .wp-toggle-switch { width: 46px; height: 24px; @@ -215,7 +271,6 @@ left: 3px; bottom: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); - transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); } .wp-allstars-enhanced-ui input:checked + .wp-toggle-slider { diff --git a/includes/class-wp-allstars-ui-enhancements.php b/includes/class-wp-allstars-ui-enhancements.php index ff9d80c..e660eb1 100644 --- a/includes/class-wp-allstars-ui-enhancements.php +++ b/includes/class-wp-allstars-ui-enhancements.php @@ -27,6 +27,9 @@ class WP_Allstars_UI_Enhancements { // Initialize UI components $this->init_components(); + + // Ensure toggle functionality works + add_action('admin_footer', array($this, 'ensure_toggle_functionality'), 99); } /** @@ -90,6 +93,139 @@ class WP_Allstars_UI_Enhancements { add_action('admin_footer', array($this, 'render_notification_template')); } + /** + * Ensure toggle switch functionality + * This adds JS to reinitialize toggle switch handlers after our enhanced UI is applied + */ + public function ensure_toggle_functionality() { + // Only on WP Allstars pages + if (!isset($_GET['page']) || strpos($_GET['page'], 'wp-allstars') === false) { + return; + } + + ?> + +