← All changes | templates/elements/order-progress/variants/step-marker.php +38 -35 4.4.1 → 4.4.6 View file →

		@@ -35,30 +35,23 @@
35	35	$bubble_pad = 6;
36	36	$bubble_size = $icon_size + ( $bubble_pad * 2 );
37	37	$bubble_cell_size = max( 42, $bubble_size );
38	38	$bubble_row_height = max( $bubble_size, $bubble_cell_size );
39		-// First/last column inset scales with bubble width (mirror TSX getEdgeTrackPaddingPx).
40		-$edge_track_padding_px = max( 8, (int) round( 8 + ( $bubble_cell_size - 44 ) * 0.5 ) );
	39	+$small_dot_px = 14;
	40	+$ring_outer_px = 24;
	41	+$inner_dot_px = 14;
	42	+// First/last column inset: align marker center with teardrop bubble center (mirror getStepMarkerEdgeTrackPaddingPx).
	43	+$edge_track_padding_px = max( 0, (int) round( $bubble_cell_size / 2 - $ring_outer_px / 2 ) );
41	44	// Connector bar: at least 1px (parent already clamps connector_height to 1–10).
42	45	$bar_height = max( 1, (int) $connector_height );
43	46	$dot_ring_size = 3;
44		-$small_dot_px = 14;
45		-$ring_outer_px = 24;
46		-$inner_dot_px = 14;
47	47
48		-// Ring border: blend connector active color toward white (fallback #C4B0E8).
49		-$yaymail_connector_hex = ltrim( (string) $connector_active_color, '#' );
50		-$yaymail_ring_border = '#C4B0E8';
51		-if ( 6 === strlen( $yaymail_connector_hex ) && ctype_xdigit( $yaymail_connector_hex ) ) {
52		- $r0 = hexdec( substr( $yaymail_connector_hex, 0, 2 ) );
53		- $g0 = hexdec( substr( $yaymail_connector_hex, 2, 2 ) );
54		- $b0 = hexdec( substr( $yaymail_connector_hex, 4, 2 ) );
55		- $amt = 0.55;
56		- $mix = static function ( $c ) use ( $amt ) {
57		- return (int) round( $c + ( 255 - $c ) * $amt );
58		- };
59		- $yaymail_ring_border = sprintf( '#%02x%02x%02x', $mix( $r0 ), $mix( $g0 ), $mix( $b0 ) );
60		-}
	48	+$current_step_for_accent = isset( $display_steps[ $active_index ] ) ? $display_steps[ $active_index ] : [];
	49	+$current_step_accent = OrderProgressVariantHelpers::resolve_step_marker_accent_color(
	50	+ is_array( $current_step_for_accent ) ? $current_step_for_accent : [],
	51	+ $connector_active_color
	52	+);
	53	+$yaymail_ring_border = OrderProgressVariantHelpers::blend_hex_with_white( $current_step_accent, 0.55 );
61	54
62	55	$yaymail_step_marker_presets = OrderProgressVariantHelpers::get_step_marker_presets();
63	56
64	57	$preset_key = min( 5, max( 1, $step_count ) );
		@@ -87,13 +80,12 @@
87	80	$is_current_step = $index === $active_index;
88	81
89	82	$cell_align = isset( $yaymail_step_edge_aligns[ $index ] ) ? $yaymail_step_edge_aligns[ $index ] : 'center';
90	83
91		- $image_active_url = is_array( $step ) ? (string) ( $step['image_active_url'] ?? '' ) : '';
92		- $image_inactive_url = is_array( $step ) ? (string) ( $step['image_inactive_url'] ?? '' ) : '';
	84	+ $image_url = $is_current_step && is_array( $step )
	85	+ ? OrderProgressVariantHelpers::get_step_image_url( $step )
	86	+ : '';
93	87
94		- $image_url = OrderProgressVariantHelpers::resolve_step_image_url( $is_step_active, $image_active_url, $image_inactive_url );
95		-
96	88	$raw_image_bg_color = is_array( $step ) ? (string) ( $step['image_bg_color'] ?? '' ) : '';
97	89	$image_bg_color = $raw_image_bg_color ? $raw_image_bg_color : ( $is_step_active ? $connector_active_color : $connector_inactive_color );
98	90
99	91	$teardrop_style = TemplateHelpers::get_style(
		@@ -164,13 +156,27 @@
164	156	">
165	157	<tbody>
166	158	<tr>
167	159	<td width="<?php echo esc_attr( (string) $bubble_cell_size ); ?>" height="<?php echo esc_attr( (string) $bubble_cell_size ); ?>" align="center" valign="middle" style="<?php echo esc_attr( $teardrop_style ); ?>">
168		- <img src="<?php echo esc_url( $image_url ); ?>" alt="" width="<?php echo esc_attr( (string) $icon_size ); ?>" height="<?php echo esc_attr( (string) $icon_size ); ?>" style="display:block;margin:0 auto;border:0;outline:none;text-decoration:none;width:<?php echo esc_attr( (string) $icon_size ); ?>px;height:<?php echo esc_attr( (string) $icon_size ); ?>px;"/>
	160	+ <img src="<?php echo esc_url( $image_url ); ?>" alt="" width="<?php echo esc_attr( (string) $icon_size ); ?>" height="<?php echo esc_attr( (string) $icon_size ); ?>" style="display:block;margin:0 auto;border:0;outline:none;text-decoration:none;width:<?php echo esc_attr( (string) $icon_size ); ?>px;height:<?php echo esc_attr( (string) $icon_size ); ?>px;object-fit:contain;"/>
169	161	</td>
170	162	</tr>
171	163	<tr>
172		- <td>
	164	+ <td width="<?php echo esc_attr( (string) $bubble_cell_size ); ?>" align="center" style="
	165	+ <?php
	166	+ echo esc_attr(
	167	+ TemplateHelpers::get_style(
	168	+ [
	169	+ 'width' => $bubble_cell_size . 'px',
	170	+ 'padding' => '0',
	171	+ 'text-align' => 'center',
	172	+ 'line-height' => '0',
	173	+ 'font-size' => '0',
	174	+ ]
	175	+ )
	176	+ );
	177	+ ?>
	178	+ ">
173	179	<div style="<?php echo esc_attr( $icon_pointer_style ); ?>">&nbsp;</div>
174	180	</td>
175	181	</tr>
176	182	</tbody>
		@@ -288,9 +294,12 @@
288	294	?>
289	295	">
290	296	<?php if ( $is_current_step ) : ?>
291	297	<?php
292		- $inner_dot_margin_top = (int) ( ( $ring_outer_px - $inner_dot_px ) / 2 - $dot_ring_size ) + 3;
	298	+ $inner_dot_margin_top = max(
	299	+ 0,
	300	+ (int) floor( ( $ring_outer_px - ( 2 * $dot_ring_size ) - $inner_dot_px ) / 2 )
	301	+ );
293	302	$ring_outer_div_style = TemplateHelpers::get_style(
294	303	[
295	304	'width' => $ring_outer_px . 'px',
296	305	'height' => $ring_outer_px . 'px',
		@@ -305,10 +314,10 @@
305	314	[
306	315	'width' => $inner_dot_px . 'px',
307	316	'height' => $inner_dot_px . 'px',
308	317	'border-radius' => ( (int) ( $inner_dot_px ) ) . 'px',
309		- 'background' => $connector_active_color,
310		- 'margin' => $inner_dot_margin_top . 'px auto 0',
	318	+ 'background' => $current_step_accent,
	319	+ 'margin' => $inner_dot_margin_top + 3 . 'px auto 0',
311	320	'font-size' => '0',
312	321	'line-height' => '0',
313	322	]
314	323	);
		@@ -388,17 +397,11 @@
388	397	$is_step_active = $index <= $active_index;
389	398
390	399	$title = is_array( $step ) ? (string) ( $step['title'] ?? $step['label'] ?? '' ) : '';
391	400
392		- $step_label_color = is_array( $step ) ? (string) ( $step['label_color'] ?? '' ) : '';
393		- $step_label_active_color = is_array( $step ) ? (string) ( $step['label_active_color'] ?? '' ) : '';
394		- $step_label_inactive_color = is_array( $step ) ? (string) ( $step['label_inactive_color'] ?? '' ) : '';
395		-
396		- $label_color = OrderProgressVariantHelpers::resolve_filled_bar_label_color(
397		- $step_label_color,
	401	+ $label_color = OrderProgressVariantHelpers::get_step_label_color(
	402	+ is_array( $step ) ? $step : [],
398	403	$is_step_active,
399		- $step_label_active_color,
400		- $step_label_inactive_color,
401	404	$legacy_label_active_color,
402	405	$legacy_label_inactive_color
403	406	);
404	407