Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stay on correct settings tab after reload

Browse Source
This commit is contained in:
Kobe
2025-05-26 10:39:39 +02:00
parent 86cc6bbff2
commit 506964c773
5 changed files with 74 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
__pycache__/models.cpython-313.pyc
View File

Binary file not shown.

BIN
routes/__pycache__/main.cpython-313.pyc
View File

Binary file not shown.

4
routes/main.py
View File

@@ -331,9 +331,11 @@ def init_routes(main_bp):
return redirect(url_for('main.dashboard')) return redirect(url_for('main.dashboard'))
site_settings = SiteSettings.get_settings() site_settings = SiteSettings.get_settings()
active_tab = request.args.get('tab', 'colors')
return render_template('settings/settings.html', return render_template('settings/settings.html',
primary_color=site_settings.primary_color, 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']) @main_bp.route('/settings/colors', methods=['POST'])
@login_required @login_required

39
static/js/settings.js
View File

@@ -2,6 +2,45 @@ document.addEventListener('DOMContentLoaded', function() {
const primaryColorInput = document.getElementById('primaryColor'); const primaryColorInput = document.getElementById('primaryColor');
const secondaryColorInput = document.getElementById('secondaryColor'); 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 // Color manipulation functions
function hexToRgb(hex) { function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

66
templates/settings/settings.html
View File

@@ -23,42 +23,40 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card shadow-sm"> <div class="card-header bg-white">
<div class="card-header bg-white"> <ul class="nav nav-tabs card-header-tabs" id="settingsTabs" role="tablist">
<ul class="nav nav-tabs card-header-tabs" id="settingsTabs" role="tablist"> <li class="nav-item" role="presentation">
<li class="nav-item" role="presentation"> <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' }}">
<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"> <i class="fas fa-palette me-2"></i>Theme Colors
<i class="fas fa-palette me-2"></i>Theme Colors </button>
</button> </li>
</li> <li class="nav-item" role="presentation">
<li class="nav-item" role="presentation"> <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' }}">
<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"> <i class="fas fa-sliders me-2"></i>General
<i class="fas fa-sliders me-2"></i>General </button>
</button> </li>
</li> <li class="nav-item" role="presentation">
<li class="nav-item" role="presentation"> <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' }}">
<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"> <i class="fas fa-shield-alt me-2"></i>Security
<i class="fas fa-shield-alt me-2"></i>Security </button>
</button> </li>
</li> </ul>
</ul> </div>
</div> <div class="card-body">
<div class="card-body"> <div class="tab-content" id="settingsTabsContent">
<div class="tab-content" id="settingsTabsContent"> <!-- Colors Tab -->
<!-- Colors Tab --> <div class="tab-pane fade {% if active_tab == 'colors' %}show active{% endif %}" id="colors" role="tabpanel" aria-labelledby="colors-tab">
<div class="tab-pane fade show active" id="colors" role="tabpanel" aria-labelledby="colors-tab"> {{ colors_tab(primary_color, secondary_color, csrf_token) }}
{{ colors_tab(primary_color, secondary_color, csrf_token) }} </div>
</div>
<!-- General Tab --> <!-- 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() }} {{ general_tab() }}
</div> </div>
<!-- Security Tab --> <!-- 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() }} {{ security_tab() }}
</div>
</div> </div>
</div> </div>
</div> </div>