Skip to content

Commit 227c695

Browse files
GaryJonesclaude
GaryJones
and
claude
committed
fix: improve admin UI layout and usability
- Change "Add more" to "Add another condition" - Remove boxed styling from Configuration section - Fix Select2 field heights to match native inputs - Fix Edit labels to use proper labels from provider config - Link labels to their corresponding form fields - Hide "Add another condition" button until first condition selected - Show Logical Operator only when 2+ conditions are set - Move Logical Operator field near Conditionals in Edit view 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent ad363f3 commit 227c695

File tree

4 files changed

+170
-55
lines changed

4 files changed

+170
-55
lines changed

‎acm-autocomplete.js‎

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
init: function() {
2222
this.bindEvents();
2323
this.initExistingFields();
24+
this.updateAddButtonVisibility();
2425
},
2526

2627
/**
@@ -32,13 +33,22 @@
3233
// Use event delegation for dynamically added conditional selects.
3334
$( document ).on( 'change', 'select[name="acm-conditionals[]"]', function() {
3435
self.handleConditionalChange( $( this ) );
36+
self.updateAddButtonVisibility();
3537
});
3638

3739
// Re-initialize when new conditional rows are added.
3840
$( document ).on( 'click', '.add-more-conditionals', function() {
3941
// Small delay to allow DOM to update.
4042
setTimeout( function() {
4143
self.initExistingFields();
44+
self.updateAddButtonVisibility();
45+
}, 100 );
46+
});
47+
48+
// Handle remove conditional click.
49+
$( document ).on( 'click', '.acm-remove-conditional', function() {
50+
setTimeout( function() {
51+
self.updateAddButtonVisibility();
4252
}, 100 );
4353
});
4454
},
@@ -52,8 +62,17 @@
5262
$( 'select[name="acm-conditionals[]"]' ).each( function() {
5363
var $select = $( this );
5464
var conditional = $select.val();
65+
var $argumentsContainer = $select.closest( '.conditional-single-field' ).find( '.conditional-arguments' );
5566

56-
if ( conditional && self.hasAutocomplete( conditional ) ) {
67+
// Hide arguments for empty selection or no-parameter conditionals.
68+
if ( ! conditional || self.hasNoParameters( conditional ) ) {
69+
$argumentsContainer.hide();
70+
return;
71+
}
72+
73+
// Show arguments and init autocomplete if applicable.
74+
$argumentsContainer.show();
75+
if ( self.hasAutocomplete( conditional ) ) {
5776
self.initAutocomplete( $select );
5877
}
5978
});
@@ -92,8 +111,8 @@
92111
// Reset the input value.
93112
$input.val( '' );
94113

95-
// Hide arguments container for conditionals that take no parameters.
96-
if ( conditional && this.hasNoParameters( conditional ) ) {
114+
// Hide arguments container when no conditional selected or for conditionals that take no parameters.
115+
if ( ! conditional || this.hasNoParameters( conditional ) ) {
97116
$argumentsContainer.hide();
98117
return;
99118
}
@@ -270,6 +289,31 @@
270289
];
271290

272291
return noParamConditionals.indexOf( conditional ) !== -1;
292+
},
293+
294+
/**
295+
* Update visibility of the "Add another condition" button.
296+
*
297+
* Shows the button only when at least one condition is selected.
298+
*/
299+
updateAddButtonVisibility: function() {
300+
var $form = $( '#add-adcode' );
301+
var $addButton = $form.find( '.form-add-more' );
302+
var hasSelectedCondition = false;
303+
304+
// Check if any conditional select has a value.
305+
$form.find( 'select[name="acm-conditionals[]"]' ).each( function() {
306+
if ( $( this ).val() ) {
307+
hasSelectedCondition = true;
308+
return false; // Break the loop.
309+
}
310+
});
311+
312+
if ( hasSelectedCondition ) {
313+
$addButton.addClass( 'visible' );
314+
} else {
315+
$addButton.removeClass( 'visible' );
316+
}
273317
}
274318
};
275319

‎acm.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,22 @@ tr:hover .row-actions {
160160

161161
.acm-global-options {
162162
clear: both;
163+
margin-bottom: 20px;
164+
}
165+
166+
.acm-global-options .acm-config-form p {
167+
display: flex;
168+
align-items: center;
169+
gap: 10px;
170+
margin: 0;
171+
}
172+
173+
.acm-global-options .acm-config-form label {
174+
font-weight: 600;
175+
}
176+
177+
.acm-global-options .acm-config-form .button {
178+
margin-left: 10px;
163179
}
164180

165181
.acm-global-options input[type="text"] {
@@ -171,3 +187,55 @@ tr:hover .row-actions {
171187
float: left;
172188
width: 125px;
173189
}
190+
191+
/* Ensure conditional row has consistent height even when arguments hidden */
192+
#add-adcode .conditional-single-field {
193+
min-height: 36px;
194+
margin-bottom: 8px;
195+
}
196+
197+
/* Select2 styling for conditional autocomplete */
198+
#add-adcode .conditional-arguments .select2-container {
199+
width: 100% !important;
200+
}
201+
202+
#add-adcode .conditional-arguments .select2-container--default .select2-selection--single {
203+
height: 30px;
204+
border-color: #8c8f94;
205+
border-radius: 4px;
206+
}
207+
208+
#add-adcode .conditional-arguments .select2-container--default .select2-selection--single .select2-selection__rendered {
209+
line-height: 28px;
210+
padding-left: 8px;
211+
}
212+
213+
#add-adcode .conditional-arguments .select2-container--default .select2-selection--single .select2-selection__arrow {
214+
height: 28px;
215+
}
216+
217+
/* Inline edit Select2 styling */
218+
.inline-edit-col .conditional-arguments .select2-container {
219+
width: 70% !important;
220+
margin-bottom: 5px;
221+
}
222+
223+
/* Hide Add button initially until first condition is selected */
224+
#add-adcode .form-add-more {
225+
display: none;
226+
}
227+
228+
#add-adcode .form-add-more.visible {
229+
display: block;
230+
}
231+
232+
/* Operator field styling in inline edit */
233+
.inline-edit-col .acm-operator-field {
234+
clear: both;
235+
margin-top: 10px;
236+
padding-top: 10px;
237+
}
238+
239+
.inline-edit-col .acm-operator-field .acm-section-label {
240+
margin-bottom: 5px;
241+
}

‎src/class-acm-wp-list-table.php‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -273,47 +273,51 @@ function column_id( $item ) {
273273
$output .= '<a href="#" class="acm-remove-conditional">Remove</a></div></div>';
274274
}
275275
}
276-
$output .= '</div><div class="form-field form-add-more"><a href="#" class="button button-secondary add-more-conditionals">' . __( 'Add more', 'ad-code-manager' ) . '</a></div>';
276+
$output .= '</div><div class="form-field form-add-more"><a href="#" class="button button-secondary add-more-conditionals">' . __( 'Add another condition', 'ad-code-manager' ) . '</a></div>';
277+
// Build the field for the logical operator (near conditionals)
278+
$condition_count = ! empty( $item['conditionals'] ) ? count( $item['conditionals'] ) : 0;
279+
$operator_style = $condition_count < 2 ? ' style="display:none;"' : '';
280+
$output .= '<div class="acm-operator-field"' . $operator_style . '>';
281+
$output .= '<h4 class="acm-section-label">' . __( 'Logical Operator', 'ad-code-manager' ) . '</h4>';
282+
$output .= '<select name="operator" id="acm-operator">';
283+
$operators = array(
284+
'OR' => __( 'OR', 'ad-code-manager' ),
285+
'AND' => __( 'AND', 'ad-code-manager' ),
286+
);
287+
foreach ( $operators as $key => $label ) {
288+
$output .= '<option value="' . esc_attr( $key ) . '" ' . selected( $item['operator'], $key, false ) . '>' . esc_html( $label ) . '</option>';
289+
}
290+
$output .= '</select>';
291+
$output .= '</div>';
277292
$output .= '</div>';
278293
// Build the fields for the normal columns
279294
$output .= '<div class="acm-column-fields">';
280295
$output .= '<h4 class="acm-section-label">' . __( 'URL Variables', 'ad-code-manager' ) . '</h4>';
281296
foreach ( (array) $item['url_vars'] as $slug => $value ) {
282297
$output .= '<div class="acm-section-single-field">';
283-
$column_id = 'acm-column[' . $slug . ']';
284-
$output .= '<label for="' . esc_attr( $column_id ) . '">' . esc_html( $slug ) . '</label>';
285-
// Support for select dropdowns
298+
$column_id = 'acm-column-' . $slug;
299+
// Get the proper label from provider's ad_code_args
286300
$ad_code_args = wp_filter_object_list( $ad_code_manager->current_provider->ad_code_args, array( 'key' => $slug ) );
287301
$ad_code_arg = array_shift( $ad_code_args );
302+
$field_label = isset( $ad_code_arg['label'] ) ? $ad_code_arg['label'] : ucwords( str_replace( '_', ' ', $slug ) );
303+
$output .= '<label for="' . esc_attr( $column_id ) . '">' . esc_html( $field_label ) . '</label>';
304+
// Support for select dropdowns
288305
if ( isset( $ad_code_arg['type'] ) && 'select' == $ad_code_arg['type'] ) {
289-
$output .= '<select name="' . esc_attr( $column_id ) . '">';
306+
$output .= '<select name="acm-column[' . esc_attr( $slug ) . ']" id="' . esc_attr( $column_id ) . '">';
290307
foreach ( $ad_code_arg['options'] as $key => $label ) {
291308
$output .= '<option value="' . esc_attr( $key ) . '" ' . selected( $value, $key, false ) . '>' . esc_attr( $label ) . '</option>';
292309
}
293310
$output .= '</select>';
294311
} else {
295-
$output .= '<input name="' . esc_attr( $column_id ) . '" id="' . esc_attr( $column_id ) . '" type="text" value="' . esc_attr( $value ) . '" size="20" aria-required="true">';
312+
$output .= '<input name="acm-column[' . esc_attr( $slug ) . ']" id="' . esc_attr( $column_id ) . '" type="text" value="' . esc_attr( $value ) . '" size="20" aria-required="true">';
296313
}
297314
$output .= '</div>';
298315
}
299316
$output .= '</div>';
300317
// Build the field for the priority
301318
$output .= '<div class="acm-priority-field">';
302319
$output .= '<h4 class="acm-section-label">' . __( 'Priority', 'ad-code-manager' ) . '</h4>';
303-
$output .= '<input type="text" name="priority" value="' . esc_attr( $item['priority'] ) . '" />';
304-
$output .= '</div>';
305-
// Build the field for the logical operator
306-
$output .= '<div class="acm-operator-field">';
307-
$output .= '<h4 class="acm-section-label">' . __( 'Logical Operator', 'ad-code-manager' ) . '</h4>';
308-
$output .= '<select name="operator">';
309-
$operators = array(
310-
'OR' => __( 'OR', 'ad-code-manager' ),
311-
'AND' => __( 'AND', 'ad-code-manager' ),
312-
);
313-
foreach ( $operators as $key => $label ) {
314-
$output .= '<option ' . selected( $item['operator'], $key ) . '>' . esc_attr( $label ) . '</option>';
315-
}
316-
$output .= '</select>';
320+
$output .= '<input type="text" name="priority" id="acm-priority" value="' . esc_attr( $item['priority'] ) . '" />';
317321
$output .= '</div>';
318322

319323
$output .= '</div>';
@@ -387,9 +391,9 @@ function inline_edit() {
387391
<div class="acm-float-left">
388392
<div class="acm-column-fields"></div>
389393
<div class="acm-priority-field"></div>
390-
<div class="acm-operator-field"></div>
391394
</div>
392395
<div class="acm-conditional-fields"></div>
396+
<div class="acm-operator-field"></div>
393397
<div class="clear"></div>
394398
</div></fieldset>
395399
<p class="inline-edit-save submit">

‎views/ad-code-manager.tpl.php‎

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -41,39 +41,15 @@
4141
}
4242
?>
4343
<p><?php esc_html_e( 'Refer to help section for more information.', 'ad-code-manager' ); ?></p>
44-
</div>
45-
46-
<div class="wrap nosubsub">
47-
<div id="col-container">
48-
49-
<div id="col-right">
50-
<div class="col-wrap">
51-
<form action="" method="post" name="updateadcodes" id="updateadcodes">
52-
<?php
53-
wp_nonce_field( 'acm-bulk-action', 'bulk-action-nonce' );
54-
$this->wp_list_table->prepare_items();
55-
$this->wp_list_table->display();
56-
?>
57-
</form>
58-
59-
</div>
60-
</div><!-- /col-right -->
61-
62-
<div id="col-left">
63-
<div class="col-wrap">
64-
65-
66-
<div class="form-wrap">
6744
<?php
6845
// Only show the provider selector if one hasn't been specified at the code level.
6946
if ( ! apply_filters( 'acm_provider_slug', false ) ) :
7047
?>
7148
<div class="acm-global-options">
7249
<h2><?php esc_html_e( 'Configuration', 'ad-code-manager' ); ?></h2>
73-
<div class="form-wrap">
74-
<form action="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>" method="post" name="updatesettings" id="updatesettings">
75-
<div id="provider-field" class="form-field form-required">
76-
<label for="provider"><?php esc_html_e( 'Select a provider:', 'ad-code-manager' ); ?></label>
50+
<form action="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>" method="post" name="updatesettings" id="updatesettings" class="acm-config-form">
51+
<p>
52+
<label for="provider"><?php esc_html_e( 'Provider:', 'ad-code-manager' ); ?></label>
7753
<select name="provider" id="provider">
7854
<?php
7955
$current_provider = $this->get_option( 'provider' );
@@ -83,7 +59,6 @@
8359
<option value="<?php echo esc_attr( $slug ); ?>" <?php selected( $slug, $current_provider ); ?>><?php echo esc_html( $label ); ?></option>
8460
<?php endforeach; ?>
8561
</select>
86-
</div>
8762
<?php
8863
/**
8964
* Fires after the provider select field in the ACM options form.
@@ -98,11 +73,35 @@
9873
<input type="hidden" name="action" value="acm_admin_action" />
9974
<input type="hidden" name="method" value="update_options" />
10075
<?php wp_nonce_field( 'acm-admin-action', 'nonce' ); ?>
101-
<?php submit_button( __( 'Save Options', 'ad-code-manager' ) ); ?>
76+
<?php submit_button( __( 'Save Options', 'ad-code-manager' ), 'primary', 'submit', false ); ?>
77+
</p>
10278
</form>
103-
</div>
10479
</div>
10580
<?php endif; ?>
81+
</div>
82+
83+
<div class="wrap nosubsub">
84+
<div id="col-container">
85+
86+
<div id="col-right">
87+
<div class="col-wrap">
88+
<h2><?php esc_html_e( 'Existing Ad Codes', 'ad-code-manager' ); ?></h2>
89+
<form action="" method="post" name="updateadcodes" id="updateadcodes">
90+
<?php
91+
wp_nonce_field( 'acm-bulk-action', 'bulk-action-nonce' );
92+
$this->wp_list_table->prepare_items();
93+
$this->wp_list_table->display();
94+
?>
95+
</form>
96+
97+
</div>
98+
</div><!-- /col-right -->
99+
100+
<div id="col-left">
101+
<div class="col-wrap">
102+
103+
104+
<div class="form-wrap">
106105
<h2><?php esc_html_e( 'Add New Ad Code', 'ad-code-manager' ); ?></h2>
107106
<form id="add-adcode" method="POST" action="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>" class="validate">
108107
<input type="hidden" name="action" value="acm_admin_action" />
@@ -164,7 +163,7 @@
164163
</div>
165164
</div>
166165
<div class="form-field form-add-more">
167-
<a href="#" class="button button-secondary add-more-conditionals"><?php esc_html_e( 'Add more', 'ad-code-manager' ); ?></a>
166+
<a href="#" class="button button-secondary add-more-conditionals"><?php esc_html_e( 'Add another condition', 'ad-code-manager' ); ?></a>
168167
</div>
169168
</div>
170169
<p class="clear"></p>

0 commit comments

Comments
 (0)