marcus/wpa-superstar-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix accordion toggle functionality and reposition chevron icon

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 01:27:49 +00:00
parent c9adb5c70d
commit f17a80c078
1 changed files with 46 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
admin/settings.php
View File

@ -659,25 +659,27 @@ function wp_allstars_settings_page() {
<div class="wp-allstars-settings-content"> <div class="wp-allstars-settings-content">
<div class="wp-allstars-toggle"> <div class="wp-allstars-toggle">
<div class="wp-allstars-toggle-header"> <div class="wp-allstars-toggle-header">
<label for="wp_allstars_auto_upload_images"> <div class="wp-allstars-toggle-main">
<div class="wp-toggle-switch"> <label for="wp_allstars_auto_upload_images">
<input type="checkbox" <div class="wp-toggle-switch">
id="wp_allstars_auto_upload_images" <input type="checkbox"
name="wp_allstars_auto_upload_images" id="wp_allstars_auto_upload_images"
value="1" name="wp_allstars_auto_upload_images"
<?php checked(get_option('wp_allstars_auto_upload_images', false)); ?> value="1"
/> <?php checked(get_option('wp_allstars_auto_upload_images', false)); ?>
<span class="wp-toggle-slider"></span> />
</div> <span class="wp-toggle-slider"></span>
<?php esc_html_e('Enable Auto Upload Images', 'wp-allstars'); ?> </div>
</label> <?php esc_html_e('Enable Auto Upload Images', 'wp-allstars'); ?>
<button type="button" class="wp-allstars-expand-settings" aria-expanded="false"> </label>
<span class="dashicons dashicons-arrow-down-alt2"></span> <button type="button" class="wp-allstars-expand-settings" aria-expanded="false">
</button> <span class="dashicons dashicons-arrow-down-alt2"></span>
</button>
</div>
<p class="description">
<?php esc_html_e('Import images that have external URLs into your Media Library when saving. Consider disabling during large data imports with many external image URLs.', 'wp-allstars'); ?>
</p>
</div> </div>
<p class="description">
<?php esc_html_e('Import images that have external URLs into your Media Library when saving. Consider disabling during large data imports with many external image URLs.', 'wp-allstars'); ?>
</p>
<div class="wp-allstars-toggle-settings" style="display: none;"> <div class="wp-allstars-toggle-settings" style="display: none;">
<div class="wp-allstars-setting-row"> <div class="wp-allstars-setting-row">
<label for="wp_max_width"><?php esc_html_e('Max Width', 'wp-allstars'); ?></label> <label for="wp_max_width"><?php esc_html_e('Max Width', 'wp-allstars'); ?></label>
@ -738,12 +740,32 @@ function wp_allstars_settings_page() {
</div> </div>
</div> </div>
<style>
.wp-allstars-toggle-main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.wp-allstars-expand-settings {
background: none;
border: none;
padding: 4px;
cursor: pointer;
color: #2271b1;
}
.wp-allstars-expand-settings:hover {
color: #135e96;
}
.wp-allstars-expand-settings:focus {
outline: 1px solid #2271b1;
box-shadow: none;
}
</style>
<script> <script>
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
$('.wp-allstars-expand-settings').on('click', function(e) { $('.wp-allstars-expand-settings').on('click', function() {
e.preventDefault();
e.stopPropagation();
var $button = $(this); var $button = $(this);
var $settings = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings'); var $settings = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
var isExpanded = $button.attr('aria-expanded') === 'true'; var isExpanded = $button.attr('aria-expanded') === 'true';
@ -753,8 +775,8 @@ function wp_allstars_settings_page() {
// Toggle icon // Toggle icon
$button.find('.dashicons') $button.find('.dashicons')
.toggleClass('dashicons-arrow-down-alt2', isExpanded) .removeClass(isExpanded ? 'dashicons-arrow-up-alt2' : 'dashicons-arrow-down-alt2')
.toggleClass('dashicons-arrow-up-alt2', !isExpanded); .addClass(isExpanded ? 'dashicons-arrow-down-alt2' : 'dashicons-arrow-up-alt2');
// Toggle settings panel with animation // Toggle settings panel with animation
$settings.slideToggle(200); $settings.slideToggle(200);