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

34
admin/settings.php
View File

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