Include hide/show text in detail toggle and reverse carets

This commit is contained in:
Justin Palmer 2023-11-14 21:16:52 +01:00
parent 7a91703438
commit 373af383de
No known key found for this signature in database
GPG Key ID: ACAB7C35AA2577AF
3 changed files with 14 additions and 10 deletions

View File

@ -8504,28 +8504,32 @@ table.bar_chart {
display: block;
text-decoration: none;
vertical-align: middle;
margin-top: -3px;
margin-top: -7px;
position: relative;
top: 3px;
top: 5px;
.toggle-text {
text-decoration: underline;
&.hide {
display: none;
}
}
.toggle-indicator {
font-family: dashicons;
font-size: 1.2em;
line-height: 1;
line-height: 1.6;
vertical-align: middle;
}
&[aria-expanded="true"] {
&[aria-expanded="false"] {
.toggle-indicator::before {
content: "\f140";
}
}
&[aria-expanded="false"] {
&[aria-expanded="true"] {
.toggle-indicator::before {
content: "\f142";
}

View File

@ -16,17 +16,16 @@ jQuery( document ).ready( ( $ ) => {
e.preventDefault();
$container.fadeToggle( 250 );
$this.find( '.toggle-text' ).toggle();
if ( $container.hasClass( 'closed' ) ) {
$container.removeClass( 'closed' );
$container.fadeIn( 250 );
$this.attr( 'aria-expanded', 'true' );
toggle = 'opened';
} else {
$container.addClass( 'closed' );
$container.fadeOut( 250 );
$this.attr( 'aria-expanded', 'false' );
toggle = 'closed';
}
$container.toggleClass( 'closed' );
window.wcTracks.recordEvent( 'order_source_attribution_details_toggle', {
order_id: window.woocommerce_admin_meta_boxes.order_id,

View File

@ -38,7 +38,8 @@ defined( 'ABSPATH' ) || exit;
<?php if ( $has_more_details ) : ?>
<a href="" class="woocommerce-order-source-attribution-details-toggle" aria-expanded="false">
<span class="toggle-text"><?php esc_html_e( 'Details', 'woocommerce' ); ?></span>
<span class="toggle-text show"><?php esc_html_e( 'Show details', 'woocommerce' ); ?></span>
<span class="toggle-text hide" aria-hidden="true"><?php esc_html_e( 'Hide details', 'woocommerce' ); ?></span>
<span class="toggle-indicator" aria-hidden="true"></span>
</a>
<?php endif; ?>