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

Refactor settings components to share consistent styles and layout

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 03:22:17 +00:00
parent 396fc31352
commit 81e464b0fb
2 changed files with 58 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
admin/css/wp-allstars-admin.css
View File

@ -135,33 +135,44 @@ input:checked + .wp-toggle-slider:before {
transform: translateX(16px); transform: translateX(16px);
} }
/* Simple Setting Row (No Panel) */ /* Base Setting Styles (Shared between simple and expandable) */
.wp-setting-row { .wp-setting-base {
display: flex;
align-items: center;
padding: 15px;
background: #fff; background: #fff;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 8px; border-radius: 8px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.wp-setting-row:hover { .wp-setting-base:hover {
border-color: #2271b1; border-color: #2271b1;
box-shadow: 0 2px 6px rgba(0,0,0,0.15); box-shadow: 0 2px 6px rgba(0,0,0,0.15);
} }
.wp-setting-content { .wp-setting-header {
flex-grow: 1; padding: 15px;
margin-left: 10px; position: relative;
} }
.wp-setting-title { .wp-setting-main {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 15px;
}
.wp-setting-left {
display: flex;
align-items: center;
gap: 10px;
}
.wp-setting-label {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #1d2327; color: #1d2327;
margin: 0;
line-height: 1.4; line-height: 1.4;
margin: 0;
cursor: default;
} }
.wp-setting-description { .wp-setting-description {
@ -171,23 +182,19 @@ input:checked + .wp-toggle-slider:before {
line-height: 1.6; line-height: 1.6;
} }
/* Expandable Panel Component */ /* Simple Setting Row (No Panel) */
.wp-allstars-toggle { .wp-setting-row {
background: #fff; composes: wp-setting-base;
border: 1px solid #ccc;
border-radius: 8px;
margin-bottom: 15px;
} }
.wp-allstars-toggle:hover { /* Expandable Panel Component */
border-color: #2271b1; .wp-allstars-toggle {
box-shadow: 0 2px 6px rgba(0,0,0,0.15); composes: wp-setting-base;
} }
.wp-allstars-toggle-header { .wp-allstars-toggle-header {
padding: 15px; composes: wp-setting-header;
cursor: pointer; cursor: pointer;
position: relative;
} }
.wp-allstars-toggle-header::after { .wp-allstars-toggle-header::after {
@ -208,29 +215,20 @@ input:checked + .wp-toggle-slider:before {
} }
.wp-allstars-toggle-main { .wp-allstars-toggle-main {
display: flex; composes: wp-setting-main;
align-items: center; padding-right: 40px; /* Extra space for chevron */
justify-content: space-between;
padding-right: 40px;
} }
.wp-allstars-toggle-left { .wp-allstars-toggle-left {
display: flex; composes: wp-setting-left;
align-items: center;
gap: 10px;
} }
.wp-allstars-toggle label { .wp-allstars-toggle label {
display: flex; composes: wp-setting-label;
align-items: center; }
gap: 10px;
margin: 0; .wp-allstars-toggle .description {
font-size: 16px; composes: wp-setting-description;
font-weight: 600;
color: #1d2327;
line-height: 1.4;
cursor: default;
pointer-events: none;
} }
.wp-allstars-expand-settings { .wp-allstars-expand-settings {
@ -246,13 +244,6 @@ input:checked + .wp-toggle-slider:before {
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
} }
.wp-allstars-toggle .description {
margin: 8px 0 0;
color: #50575e;
font-size: 14px;
line-height: 1.6;
}
.wp-allstars-setting-row { .wp-allstars-setting-row {
margin-bottom: 24px; margin-bottom: 24px;
} }

34
admin/settings.php
View File

@ -959,18 +959,26 @@ function wp_allstars_settings_page() {
<div class="wp-allstars-settings-grid"> <div class="wp-allstars-settings-grid">
<!-- Example of a simple toggle setting (no panel) --> <!-- Example of a simple toggle setting (no panel) -->
<div class="wp-setting-row"> <div class="wp-setting-row">
<div class="wp-toggle-switch"> <div class="wp-setting-header">
<input type="checkbox" <div class="wp-setting-main">
id="wp_allstars_simple_setting" <div class="wp-setting-left">
name="wp_allstars_simple_setting" <div class="wp-toggle-switch">
value="1" <input type="checkbox"
<?php checked(get_option('wp_allstars_simple_setting', false)); ?> id="wp_allstars_simple_setting"
/> name="wp_allstars_simple_setting"
<span class="wp-toggle-slider"></span> value="1"
</div> <?php checked(get_option('wp_allstars_simple_setting', false)); ?>
<div class="wp-setting-content"> />
<h4 class="wp-setting-title"><?php esc_html_e('Simple Toggle Setting', 'wp-allstars'); ?></h4> <span class="wp-toggle-slider"></span>
<p class="wp-setting-description"><?php esc_html_e('This is an example of a simple toggle setting without an expandable panel.', 'wp-allstars'); ?></p> </div>
<label for="wp_allstars_simple_setting" class="wp-setting-label">
<?php esc_html_e('Simple Toggle Setting', 'wp-allstars'); ?>
</label>
</div>
</div>
<p class="wp-setting-description">
<?php esc_html_e('This is an example of a simple toggle setting without an expandable panel.', 'wp-allstars'); ?>
</p>
</div> </div>
</div> </div>
</div> </div>
@ -997,7 +1005,7 @@ function wp_allstars_settings_page() {
</label> </label>
</div> </div>
</div> </div>
<p class="description"> <p class="wp-setting-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'); ?> <?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> </p>
</div> </div>