From a2a209bc1b3e92bd7a5e9c15441fe61bc692f284 Mon Sep 17 00:00:00 2001 From: xecdev Date: Fri, 14 Mar 2025 05:45:22 +0430 Subject: [PATCH 1/2] Improves the unlocked content indicator styling --- assets/css/paywall-styles.css | 25 +++++++++++++---------- assets/js/paybutton-admin.js | 19 ++++++++++++++++++ includes/class-paybutton-admin.php | 14 +++++++++++++ includes/class-paybutton-public.php | 8 ++++++-- templates/admin/paywall-settings.php | 30 ++++++++++++++++++++++++++++ 5 files changed, 83 insertions(+), 13 deletions(-) create mode 100644 assets/js/paybutton-admin.js diff --git a/assets/css/paywall-styles.css b/assets/css/paywall-styles.css index 5ce92b4..2d2b292 100644 --- a/assets/css/paywall-styles.css +++ b/assets/css/paywall-styles.css @@ -1,16 +1,19 @@ .unlocked-indicator { margin: 20px 0; + display: flex; + align-items: center; + justify-content: center; text-align: center; -} -.unlocked-indicator hr { - border: none; - border-top: 1px solid #ccc; - margin: 10px auto; - width: 80%; -} -.unlocked-indicator p { - margin: 5px 0; + background-color: var(--pb-unlocked-bg, #007bff); + color: var(--pb-unlocked-text, #ffffff); + padding: 8px; + font-family: sans-serif; font-weight: bold; - font-size: 0.80em; - color: #555; + font-size: 1.2em; + border-radius: 5px; + box-sizing: border-box; } + +.unlocked-indicator p { + margin: 0; +} \ No newline at end of file diff --git a/assets/js/paybutton-admin.js b/assets/js/paybutton-admin.js new file mode 100644 index 0000000..8fc62a9 --- /dev/null +++ b/assets/js/paybutton-admin.js @@ -0,0 +1,19 @@ +jQuery(document).ready(function($) { + // The existing "Unlocked Content Indicator" checkbox + var unlockedCheckbox = $('input[name="paybutton_scroll_to_unlocked"]'); + // The that has our color pickers + var colorFields = $('#unlockedIndicatorColors'); + + function toggleColorFields() { + if (unlockedCheckbox.is(':checked')) { + colorFields.show(); + } else { + colorFields.hide(); + } + } + + // On page load + toggleColorFields(); + // On checkbox change + unlockedCheckbox.on('change', toggleColorFields); +}); \ No newline at end of file diff --git a/includes/class-paybutton-admin.php b/includes/class-paybutton-admin.php index e7eb4c6..5025627 100644 --- a/includes/class-paybutton-admin.php +++ b/includes/class-paybutton-admin.php @@ -88,6 +88,15 @@ public function enqueue_admin_scripts( $hook_suffix ) { '1.0' ); + // Enqueue paybutton-admin.js on every admin pages + wp_enqueue_script( + 'paybutton-admin-js', + PAYBUTTON_PLUGIN_URL . 'assets/js/paybutton-admin.js', + array('jquery'), + '1.0', + true + ); + if ( $hook_suffix === 'paybutton_page_paybutton-paywall' ) { wp_enqueue_style( 'wp-color-picker' ); wp_enqueue_script( 'wp-color-picker' ); @@ -193,6 +202,8 @@ private function save_settings() { $color_secondary = sanitize_hex_color( $_POST['paybutton_color_secondary'] ); $color_tertiary = sanitize_hex_color( $_POST['paybutton_color_tertiary'] ); $hide_comments = isset( $_POST['paybutton_hide_comments_until_unlocked'] ) ? '1' : '0'; + $unlocked_indicator_bg_color = sanitize_hex_color( $_POST['unlocked_indicator_bg_color'] ); + $unlocked_indicator_text_color = sanitize_hex_color( $_POST['unlocked_indicator_text_color'] ); if ( $unit === 'XEC' && $raw_price < 5.5 ) { $raw_price = 5.5; @@ -217,6 +228,9 @@ private function save_settings() { // New unlocked content indicator option: update_option( 'paybutton_scroll_to_unlocked', isset( $_POST['paybutton_scroll_to_unlocked'] ) ? '1' : '0' ); + // Default to #007bff for background, #ffffff for text + update_option('unlocked_indicator_bg_color', $unlocked_indicator_bg_color ?: '#007bff'); + update_option('unlocked_indicator_text_color', $unlocked_indicator_text_color ?: '#ffffff'); // Save the blacklist if ( isset( $_POST['paybutton_blacklist'] ) ) { diff --git a/includes/class-paybutton-public.php b/includes/class-paybutton-public.php index c22b2b5..b7212da 100644 --- a/includes/class-paybutton-public.php +++ b/includes/class-paybutton-public.php @@ -41,6 +41,10 @@ public function enqueue_public_assets() { // Enqueue our new paywall styles wp_enqueue_style( 'paywall-styles', PAYBUTTON_PLUGIN_URL . 'assets/css/paywall-styles.css', array(), '1.0' ); + // Read the admin-chosen colors for the unlocked content indicator from options + $indicator_bg_color = get_option('unlocked_indicator_bg_color', '#007bff'); + $indicator_text_color = get_option('unlocked_indicator_text_color', '#ffffff'); + // Add inline CSS variables. $custom_css = " :root { @@ -50,6 +54,8 @@ public function enqueue_public_assets() { --profile-button-text-color: " . esc_attr( get_option('paybutton_profile_button_text_color', '#000') ) . "; --logout-button-bg-color: " . esc_attr( get_option('paybutton_logout_button_bg_color', '#d9534f') ) . "; --logout-button-text-color: " . esc_attr( get_option('paybutton_logout_button_text_color', '#fff') ) . "; + --pb-unlocked-bg: {$indicator_bg_color}; + --pb-unlocked-text: {$indicator_text_color}; } "; wp_add_inline_style( 'paybutton-sticky-header', $custom_css ); @@ -164,9 +170,7 @@ public function paybutton_paywall_shortcode( $atts, $content = null ) { $indicator = ''; if ( get_option('paybutton_scroll_to_unlocked', '0') === '1' ) { $indicator = '
-

Unlocked Content Below

-
'; } return $indicator . do_shortcode( $content ); diff --git a/templates/admin/paywall-settings.php b/templates/admin/paywall-settings.php index ca79f4d..d95b535 100644 --- a/templates/admin/paywall-settings.php +++ b/templates/admin/paywall-settings.php @@ -75,6 +75,36 @@ + + + + + + + + +

Controls the background color of the indicator.

+ + + + + + + + + +

Controls the text color of the indicator.

+ + +

Sticky Header Settings

From 2d9f2538db95ecd1a458a8c80b5b4a81cc61bea3 Mon Sep 17 00:00:00 2001 From: xecdev Date: Sat, 15 Mar 2025 05:18:33 +0430 Subject: [PATCH 2/2] Rebased branch commit