Skip to content

Commit bde5a41

Browse files
arraypressarraypress
committed
Refactoring
1 parent 5bd219b commit bde5a41

2 files changed

Lines changed: 111 additions & 50 deletions

File tree

‎assets/css/setting-fields.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2528,4 +2528,55 @@ h4.setting-fields-heading-title {
25282528

25292529
.setting-fields-license-result--error .setting-fields-license-result-icon {
25302530
color: #d63638;
2531+
}
2532+
2533+
/* ==========================================================================
2534+
Header Actions (Reset, Export, Import)
2535+
========================================================================== */
2536+
2537+
.setting-fields-header__actions {
2538+
display: flex;
2539+
align-items: center;
2540+
gap: 8px;
2541+
margin-left: auto;
2542+
}
2543+
2544+
.setting-fields-header__actions .button {
2545+
display: inline-flex;
2546+
align-items: center;
2547+
gap: 4px;
2548+
white-space: nowrap;
2549+
}
2550+
2551+
.setting-fields-header__actions .button .dashicons {
2552+
font-size: 16px;
2553+
width: 16px;
2554+
height: 16px;
2555+
line-height: 16px;
2556+
}
2557+
2558+
.setting-fields-header__actions .setting-fields-import-wrap {
2559+
display: inline-flex;
2560+
}
2561+
2562+
/* Export/Import result toast — now positioned relative to the header */
2563+
.setting-fields-export-import-result {
2564+
position: fixed;
2565+
bottom: 20px;
2566+
right: 20px;
2567+
z-index: 100000;
2568+
display: flex;
2569+
align-items: center;
2570+
gap: 8px;
2571+
padding: 10px 16px;
2572+
background: #fff;
2573+
border: 1px solid #c3c4c7;
2574+
border-left: 4px solid #00a32a;
2575+
border-radius: 4px;
2576+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2577+
font-size: 13px;
2578+
}
2579+
2580+
.setting-fields-export-import-result--error {
2581+
border-left-color: #d63638;
25312582
}

‎src/SettingFields.php‎

Lines changed: 60 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -386,29 +386,51 @@ public function render_page(): void {
386386
?>
387387
</form>
388388

389-
<?php $this->render_export_import_ui(); ?>
389+
<?php if ( $this->config['export_import'] ) : ?>
390+
<div class="setting-fields-export-import-result" style="display: none;">
391+
<span class="dashicons setting-fields-export-import-icon"></span>
392+
<span class="setting-fields-export-import-message"></span>
393+
</div>
394+
<?php endif; ?>
390395
</div>
391396
<?php
392397
}
393398

394399
/**
395-
* Render footer action buttons (submit, reset, export/import).
400+
* Render footer action buttons (submit only).
401+
*
402+
* Reset and export/import actions are rendered in the header.
396403
*
397404
* @return void
398405
*/
399406
protected function render_footer_actions(): void {
400-
if ( ! $this->config['submit_button'] && ! $this->config['reset_button'] ) {
407+
if ( ! $this->config['submit_button'] ) {
401408
return;
402409
}
403410

404-
echo '<div class="setting-fields-footer-actions">';
411+
submit_button();
412+
}
405413

406-
if ( $this->config['submit_button'] ) {
407-
submit_button( null, 'primary', 'submit', false );
414+
/**
415+
* Render header action buttons (reset, export, import).
416+
*
417+
* Displayed in the header branding row, right-aligned.
418+
*
419+
* @param string $current_tab Current active tab.
420+
*
421+
* @return void
422+
*/
423+
protected function render_header_actions( string $current_tab ): void {
424+
$has_reset = $this->config['reset_button'];
425+
$has_export = $this->config['export_import'];
426+
427+
if ( ! $has_reset && ! $has_export ) {
428+
return;
408429
}
409430

410-
if ( $this->config['reset_button'] ) {
411-
$current_tab = $this->get_current_tab();
431+
echo '<div class="setting-fields-header__actions">';
432+
433+
if ( $has_reset ) {
412434
$reset_label = ! empty( $this->tabs )
413435
? sprintf( __( 'Reset %s', 'setting-fields' ), $this->tabs[ $current_tab ]['label'] ?? __( 'Tab', 'setting-fields' ) )
414436
: __( 'Reset to Defaults', 'setting-fields' );
@@ -422,51 +444,28 @@ class="button setting-fields-reset-btn"
422444
<?php
423445
}
424446

425-
echo '</div>';
426-
}
427-
428-
/**
429-
* Render the export/import UI below the form.
430-
*
431-
* Only rendered when 'export_import' is enabled.
432-
*
433-
* @return void
434-
*/
435-
protected function render_export_import_ui(): void {
436-
if ( ! $this->config['export_import'] ) {
437-
return;
438-
}
447+
if ( $has_export ) {
448+
?>
449+
<button type="button" class="button setting-fields-export-btn">
450+
<span class="dashicons dashicons-download"></span>
451+
<?php esc_html_e( 'Export Settings', 'setting-fields' ); ?>
452+
</button>
439453

440-
?>
441-
<div class="setting-fields-export-import">
442-
<h3><?php esc_html_e( 'Export / Import', 'setting-fields' ); ?></h3>
443-
<p class="description"><?php esc_html_e( 'Export your settings as a JSON file or import from a previously exported file.', 'setting-fields' ); ?></p>
444-
445-
<div class="setting-fields-export-import-actions">
446-
<button type="button" class="button setting-fields-export-btn">
447-
<span class="dashicons dashicons-download"></span>
448-
<?php esc_html_e( 'Export Settings', 'setting-fields' ); ?>
454+
<div class="setting-fields-import-wrap">
455+
<input type="file"
456+
accept=".json"
457+
class="setting-fields-import-file"
458+
id="<?php echo esc_attr( $this->id ); ?>_import_file"
459+
style="display:none;"/>
460+
<button type="button" class="button setting-fields-import-btn">
461+
<span class="dashicons dashicons-upload"></span>
462+
<?php esc_html_e( 'Import Settings', 'setting-fields' ); ?>
449463
</button>
450-
451-
<div class="setting-fields-import-wrap">
452-
<input type="file"
453-
accept=".json"
454-
class="setting-fields-import-file"
455-
id="<?php echo esc_attr( $this->id ); ?>_import_file"
456-
style="display:none;" />
457-
<button type="button" class="button setting-fields-import-btn">
458-
<span class="dashicons dashicons-upload"></span>
459-
<?php esc_html_e( 'Import Settings', 'setting-fields' ); ?>
460-
</button>
461-
</div>
462464
</div>
465+
<?php
466+
}
463467

464-
<div class="setting-fields-export-import-result" style="display: none;">
465-
<span class="dashicons setting-fields-export-import-icon"></span>
466-
<span class="setting-fields-export-import-message"></span>
467-
</div>
468-
</div>
469-
<?php
468+
echo '</div>';
470469
}
471470

472471
/**
@@ -510,6 +509,8 @@ protected function render_header( string $current_tab ): void {
510509
<?php if ( ! empty( $header_badge ) ) : ?>
511510
<?php self::render_header_badge( $header_badge ); ?>
512511
<?php endif; ?>
512+
513+
<?php $this->render_header_actions( $current_tab ); ?>
513514
</div>
514515
</div>
515516

@@ -687,6 +688,7 @@ protected function render_field_row( string $field_key, array $field ): void {
687688
$type = $field['type'] ?? 'text';
688689
if ( $type === 'hidden' ) {
689690
$this->render_field( $field_key, $field, $field_name, $field_id, $value );
691+
690692
return;
691693
}
692694

@@ -871,7 +873,15 @@ public function export_settings(): array {
871873
}
872874

873875
// Skip layout fields that have no stored data
874-
if ( in_array( $field['type'] ?? '', [ 'message', 'html', 'separator', 'heading', 'hidden', 'action_button', 'clipboard' ], true ) ) {
876+
if ( in_array( $field['type'] ?? '', [
877+
'message',
878+
'html',
879+
'separator',
880+
'heading',
881+
'hidden',
882+
'action_button',
883+
'clipboard'
884+
], true ) ) {
875885
continue;
876886
}
877887

0 commit comments

Comments
 (0)