From b5aeeaf2c4189b32d31ec77f159b19b5f3c1b94c Mon Sep 17 00:00:00 2001 From: marcusquinn <6428977+marcusquinn@users.noreply.github.com> Date: Tue, 8 Apr 2025 01:24:17 +0100 Subject: [PATCH] [WORK IN PROGRESS] Basic Admin UI Enhancements with toggle fixes --- admin/css/wp-allstars-admin.css | 116 ++++-- admin/includes/class-admin-manager.php | 1 + admin/includes/class-settings-manager.php | 27 ++ admin/js/wp-allstars-admin-colors.js | 74 ++++ admin/js/wp-allstars-admin.js | 423 +++----------------- debug.php | 34 ++ debug2.php | 30 ++ includes/class-wp-allstars-admin-colors.php | 169 ++++++++ 8 files changed, 466 insertions(+), 408 deletions(-) create mode 100644 admin/js/wp-allstars-admin-colors.js create mode 100644 debug.php create mode 100644 debug2.php create mode 100644 includes/class-wp-allstars-admin-colors.php diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css index f771523..19d16ea 100644 --- a/admin/css/wp-allstars-admin.css +++ b/admin/css/wp-allstars-admin.css @@ -109,25 +109,50 @@ } } -/* Base Toggle Switch Component */ +/* Setting notification */ +.wp-setting-notification { + display: inline-flex; + align-items: center; + margin-left: 10px; + background: #00a32a; + color: white; + padding: 3px 10px; + border-radius: 12px; + font-size: 12px; + font-weight: 500; + animation: fadeIn 0.3s ease-in-out; + height: 20px; + box-sizing: border-box; + position: relative; + transform: translateY(-3px); + white-space: nowrap; + min-width: 60px; + justify-content: center; +} + +.wp-setting-notification.error { + background: #d63638; +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +/* Toggle Switch */ .wp-toggle-switch { position: relative; display: inline-block; - width: 36px; + width: 40px; height: 20px; - flex-shrink: 0; - cursor: pointer; - pointer-events: all; - z-index: 2; + vertical-align: middle; + margin-right: 8px; } .wp-toggle-switch input { opacity: 0; width: 0; height: 0; - margin: 0; - padding: 0; - position: absolute; } .wp-toggle-slider { @@ -139,7 +164,7 @@ bottom: 0; background-color: #ccc; transition: .3s; - border-radius: 20px; + border-radius: 34px; } .wp-toggle-slider:before { @@ -152,15 +177,55 @@ background-color: white; transition: .3s; border-radius: 50%; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } 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(16px); + transform: translateX(20px); +} + +/* Settings layout */ +.wp-setting-row { + background: #fff; + border: 1px solid #e5e5e5; + box-shadow: 0 1px 1px rgba(0,0,0,.04); + padding: 20px; + margin-bottom: 20px; + border-radius: 3px; +} + +.wp-setting-header { + position: relative; +} + +.wp-setting-main { + display: flex; + justify-content: space-between; + align-items: center; +} + +.wp-setting-left { + display: flex; + align-items: center; +} + +.wp-setting-label { + font-weight: 600; + margin: 0; + font-size: 14px; +} + +.wp-setting-description { + margin: 10px 0 0; + color: #666; + font-size: 13px; } /* Tab Content Area - GLOBAL SETTINGS - All tab spacing should inherit from here */ @@ -717,28 +782,6 @@ input:checked + .wp-toggle-slider:before { } } -/* Settings Notification */ -.wp-setting-notification { - display: inline-flex; - align-items: center; - margin-left: 10px; - background: #00a32a; - color: white; - padding: 3px 10px; - border-radius: 12px; - font-size: 12px; - font-weight: 500; - animation: fadeIn 0.3s ease-in-out; - height: 20px; - box-sizing: border-box; - position: relative; - transform: translateY(-3px); -} - -.wp-setting-notification.error { - background: #d63638; -} - /* Add space for notification to prevent layout shifts */ .wp-setting-left label, .wp-allstars-toggle-left label, @@ -758,11 +801,6 @@ input:checked + .wp-toggle-slider:before { line-height: 1.4; } -@keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } -} - .wpa-loading-overlay { position: absolute; top: 0; diff --git a/admin/includes/class-admin-manager.php b/admin/includes/class-admin-manager.php index 164a301..3988807 100644 --- a/admin/includes/class-admin-manager.php +++ b/admin/includes/class-admin-manager.php @@ -109,6 +109,7 @@ class WP_Allstars_Admin_Manager { $allowed_options = array( 'wp_allstars_simple_setting', 'wp_allstars_auto_upload_images', + 'wp_allstars_admin_color_scheme', 'wp_allstars_max_width', 'wp_allstars_max_height', 'wp_allstars_exclude_urls', diff --git a/admin/includes/class-settings-manager.php b/admin/includes/class-settings-manager.php index e2170a3..e278f3f 100644 --- a/admin/includes/class-settings-manager.php +++ b/admin/includes/class-settings-manager.php @@ -29,6 +29,7 @@ class WP_Allstars_Settings_Manager { public static function register_settings() { // General settings register_setting('wp_allstars_settings', 'wp_allstars_simple_setting'); + register_setting('wp_allstars_settings', 'wp_allstars_admin_color_scheme'); // Advanced settings register_setting('wp_allstars_settings', 'wp_allstars_auto_upload_images'); @@ -71,6 +72,31 @@ class WP_Allstars_Settings_Manager { ?>
+ +
+' + response.data + '
Failed to load plugins. Please try again. Error: ' + error + '
"; + print_r($plugins); + echo ""; +} else { + echo "Function wp_allstars_get_free_plugins() is not defined