Add Workflow tab to settings page: - Add workflow tab to navigation - Add workflow settings section - Add toggle switch styles

This commit is contained in:
Marcus Quinn
2025-03-15 02:11:08 +00:00
parent d60a2891f2
commit 73015b7a1a
2 changed files with 89 additions and 3 deletions

View File

@ -218,3 +218,77 @@
float: none;
margin: 0;
}
.wpa-superstar-workflow-toggle {
margin: 20px 0;
padding: 15px;
background: #fff;
border: 1px solid #ccd0d4;
border-radius: 4px;
}
.wpa-superstar-workflow-toggle label {
display: flex;
align-items: center;
font-weight: 600;
margin-bottom: 10px;
}
.wpa-superstar-workflow-toggle .description {
color: #666;
margin-left: 52px;
margin-top: 5px;
}
/* Toggle switch styles */
.switch {
position: relative;
display: inline-block;
width: 42px;
height: 22px;
margin-right: 10px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2271b1;
}
input:checked + .slider:before {
transform: translateX(20px);
}
/* Active tab styles */
.nav-tab-active {
background: #fff;
border-bottom: 1px solid #fff;
}

View File

@ -484,10 +484,13 @@ function wpa_superstar_settings_page() {
<div class="wpa-settings-container">
<div class="wpa-superstar-nav">
<h2 class="nav-tab-wrapper">
<h2 class="nav-tab-wrapper">
<a href="?page=wpa-superstar&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>">
<?php esc_html_e('General', 'wpa-superstar'); ?>
</a>
<a href="?page=wpa-superstar&tab=workflow" class="nav-tab <?php echo $active_tab == 'workflow' ? 'nav-tab-active' : ''; ?>">
<?php esc_html_e('Workflow', 'wpa-superstar'); ?>
</a>
<a href="?page=wpa-superstar&tab=advanced" class="nav-tab <?php echo $active_tab == 'advanced' ? 'nav-tab-active' : ''; ?>">
<?php esc_html_e('Advanced', 'wpa-superstar'); ?>
</a>
@ -497,11 +500,20 @@ function wpa_superstar_settings_page() {
<a href="?page=wpa-superstar&tab=theme" class="nav-tab <?php echo $active_tab == 'theme' ? 'nav-tab-active' : ''; ?>">
<?php esc_html_e('Theme', 'wpa-superstar'); ?>
</a>
</h2>
</h2>
</div>
<div class="wpa-settings-content">
<?php if ($active_tab == 'theme'): ?>
<?php if ($active_tab == 'workflow'): ?>
<form action="options.php" method="post">
<?php
settings_fields('wpa_superstar_workflow');
do_settings_sections('wpa_superstar_workflow');
submit_button();
?>
</form>
<?php elseif ($active_tab == 'theme'): ?>
<div class="wp-list-table-container">
<div class="wpa-loading-overlay">
<span class="spinner is-active"></span>