stay on correct settings tab after reload
This commit is contained in:
Binary file not shown.
Binary file not shown.
@@ -331,9 +331,11 @@ def init_routes(main_bp):
|
||||
return redirect(url_for('main.dashboard'))
|
||||
|
||||
site_settings = SiteSettings.get_settings()
|
||||
active_tab = request.args.get('tab', 'colors')
|
||||
return render_template('settings/settings.html',
|
||||
primary_color=site_settings.primary_color,
|
||||
secondary_color=site_settings.secondary_color)
|
||||
secondary_color=site_settings.secondary_color,
|
||||
active_tab=active_tab)
|
||||
|
||||
@main_bp.route('/settings/colors', methods=['POST'])
|
||||
@login_required
|
||||
|
||||
@@ -2,6 +2,45 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const primaryColorInput = document.getElementById('primaryColor');
|
||||
const secondaryColorInput = document.getElementById('secondaryColor');
|
||||
|
||||
// Tab persistence
|
||||
const settingsTabs = document.querySelectorAll('#settingsTabs button[data-bs-toggle="tab"]');
|
||||
const tabContent = document.querySelectorAll('.tab-pane');
|
||||
|
||||
// Function to activate a specific tab
|
||||
function activateTab(tabId) {
|
||||
// Remove active class from all tabs and content
|
||||
settingsTabs.forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
tab.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
tabContent.forEach(content => {
|
||||
content.classList.remove('show', 'active');
|
||||
});
|
||||
|
||||
// Activate the selected tab
|
||||
const selectedTab = document.querySelector(`#${tabId}-tab`);
|
||||
const selectedContent = document.getElementById(tabId);
|
||||
if (selectedTab && selectedContent) {
|
||||
selectedTab.classList.add('active');
|
||||
selectedTab.setAttribute('aria-selected', 'true');
|
||||
selectedContent.classList.add('show', 'active');
|
||||
// Save to localStorage
|
||||
localStorage.setItem('settingsActiveTab', tabId);
|
||||
}
|
||||
}
|
||||
|
||||
// Add click event listeners to tabs
|
||||
settingsTabs.forEach(tab => {
|
||||
tab.addEventListener('click', (e) => {
|
||||
const tabId = e.target.getAttribute('data-bs-target').substring(1);
|
||||
activateTab(tabId);
|
||||
});
|
||||
});
|
||||
|
||||
// Restore active tab from localStorage or URL hash
|
||||
const savedTab = localStorage.getItem('settingsActiveTab') || window.location.hash.substring(1) || 'colors';
|
||||
activateTab(savedTab);
|
||||
|
||||
// Color manipulation functions
|
||||
function hexToRgb(hex) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
|
||||
@@ -23,21 +23,20 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-white">
|
||||
<ul class="nav nav-tabs card-header-tabs" id="settingsTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="colors-tab" data-bs-toggle="tab" data-bs-target="#colors" type="button" role="tab" aria-controls="colors" aria-selected="true">
|
||||
<button class="nav-link {% if active_tab == 'colors' %}active{% endif %}" id="colors-tab" data-bs-toggle="tab" data-bs-target="#colors" type="button" role="tab" aria-controls="colors" aria-selected="{{ 'true' if active_tab == 'colors' else 'false' }}">
|
||||
<i class="fas fa-palette me-2"></i>Theme Colors
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="false">
|
||||
<button class="nav-link {% if active_tab == 'general' %}active{% endif %}" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="{{ 'true' if active_tab == 'general' else 'false' }}">
|
||||
<i class="fas fa-sliders me-2"></i>General
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="security-tab" data-bs-toggle="tab" data-bs-target="#security" type="button" role="tab" aria-controls="security" aria-selected="false">
|
||||
<button class="nav-link {% if active_tab == 'security' %}active{% endif %}" id="security-tab" data-bs-toggle="tab" data-bs-target="#security" type="button" role="tab" aria-controls="security" aria-selected="{{ 'true' if active_tab == 'security' else 'false' }}">
|
||||
<i class="fas fa-shield-alt me-2"></i>Security
|
||||
</button>
|
||||
</li>
|
||||
@@ -46,17 +45,17 @@
|
||||
<div class="card-body">
|
||||
<div class="tab-content" id="settingsTabsContent">
|
||||
<!-- Colors Tab -->
|
||||
<div class="tab-pane fade show active" id="colors" role="tabpanel" aria-labelledby="colors-tab">
|
||||
<div class="tab-pane fade {% if active_tab == 'colors' %}show active{% endif %}" id="colors" role="tabpanel" aria-labelledby="colors-tab">
|
||||
{{ colors_tab(primary_color, secondary_color, csrf_token) }}
|
||||
</div>
|
||||
|
||||
<!-- General Tab -->
|
||||
<div class="tab-pane fade" id="general" role="tabpanel" aria-labelledby="general-tab">
|
||||
<div class="tab-pane fade {% if active_tab == 'general' %}show active{% endif %}" id="general" role="tabpanel" aria-labelledby="general-tab">
|
||||
{{ general_tab() }}
|
||||
</div>
|
||||
|
||||
<!-- Security Tab -->
|
||||
<div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="security-tab">
|
||||
<div class="tab-pane fade {% if active_tab == 'security' %}show active{% endif %}" id="security" role="tabpanel" aria-labelledby="security-tab">
|
||||
{{ security_tab() }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -64,7 +63,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ reset_colors_modal(csrf_token) }}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user