mirror/TimeTracker
1
0
Fork 0
mirror of https://github.com/DRYTRIX/TimeTracker.git synced 2026-01-08 04:30:20 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix: chevron icon not toggling correctly in tasks filter

Browse Source 
Replace className assignment with classList methods for more reliable
icon state changes when collapsing/expanding filters. Affects both
task list and my tasks pages.
This commit is contained in:
Dries Peeters
2025-10-29 08:12:07 +01:00
parent 7d5961e91c
commit 1179a74723
2 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/templates/tasks/list.html
View File

@@ -303,14 +303,21 @@ function toggleFilterVisibility() {
const toggleIcon = document.getElementById('filterToggleIcon');
const toggleButton = document.getElementById('toggleFilters');
if (!filterBody || !toggleIcon || !toggleButton) return;
if (filterBody.classList.contains('filter-collapsed')) {
const isCollapsed = filterBody.classList.contains('filter-collapsed');
if (isCollapsed) {
// Show filters
filterBody.classList.remove('filter-collapsed');
toggleIcon.className = 'fas fa-chevron-up';
toggleIcon.classList.remove('fa-chevron-down');
toggleIcon.classList.add('fa-chevron-up');
toggleButton.title = '{{ _('Hide Filters') }}';
localStorage.setItem('taskListFiltersVisible', 'true');
} else {
// Hide filters
filterBody.classList.add('filter-collapsed');
toggleIcon.className = 'fas fa-chevron-down';
toggleIcon.classList.remove('fa-chevron-up');
toggleIcon.classList.add('fa-chevron-down');
toggleButton.title = '{{ _('Show Filters') }}';
localStorage.setItem('taskListFiltersVisible', 'false');
}
@@ -321,11 +328,19 @@ document.addEventListener('DOMContentLoaded', function() {
const toggleIcon = document.getElementById('filterToggleIcon');
const toggleButton = document.getElementById('toggleFilters');
if (!filterBody || !toggleIcon || !toggleButton) return;
const filtersVisible = localStorage.getItem('taskListFiltersVisible');
if (filtersVisible === 'false') {
filterBody.classList.add('filter-collapsed');
toggleIcon.className = 'fas fa-chevron-down';
toggleIcon.classList.remove('fa-chevron-up');
toggleIcon.classList.add('fa-chevron-down');
toggleButton.title = '{{ _('Show Filters') }}';
} else {
// Explicitly set the icon to chevron-up when filter is visible
filterBody.classList.remove('filter-collapsed');
toggleIcon.classList.remove('fa-chevron-down');
toggleIcon.classList.add('fa-chevron-up');
toggleButton.title = '{{ _('Hide Filters') }}';
}
setTimeout(() => { filterBody.classList.add('filter-toggle-transition'); }, 100);

19
app/templates/tasks/my_tasks.html
View File

@@ -585,16 +585,20 @@ function toggleFilterVisibility() {
const toggleIcon = document.getElementById('filterToggleIcon');
const toggleButton = document.getElementById('toggleFilters');
if (filterBody.classList.contains('filter-collapsed')) {
const isCollapsed = filterBody.classList.contains('filter-collapsed');
if (isCollapsed) {
// Show filters
filterBody.classList.remove('filter-collapsed');
toggleIcon.className = 'fas fa-chevron-up';
toggleIcon.classList.remove('fa-chevron-down');
toggleIcon.classList.add('fa-chevron-up');
toggleButton.title = '{{ _('Hide Filters') }}';
localStorage.setItem('myTaskFiltersVisible', 'true');
} else {
// Hide filters
filterBody.classList.add('filter-collapsed');
toggleIcon.className = 'fas fa-chevron-down';
toggleIcon.classList.remove('fa-chevron-up');
toggleIcon.classList.add('fa-chevron-down');
toggleButton.title = '{{ _('Show Filters') }}';
localStorage.setItem('myTaskFiltersVisible', 'false');
}
@@ -610,8 +614,15 @@ document.addEventListener('DOMContentLoaded', function() {
const filtersVisible = localStorage.getItem('myTaskFiltersVisible');
if (filtersVisible === 'false') {
filterBody.classList.add('filter-collapsed');
toggleIcon.className = 'fas fa-chevron-down';
toggleIcon.classList.remove('fa-chevron-up');
toggleIcon.classList.add('fa-chevron-down');
toggleButton.title = '{{ _('Show Filters') }}';
} else {
// Explicitly set the icon to chevron-up when filter is visible
filterBody.classList.remove('filter-collapsed');
toggleIcon.classList.remove('fa-chevron-down');
toggleIcon.classList.add('fa-chevron-up');
toggleButton.title = '{{ _('Hide Filters') }}';
}
// Add transition class after initial setup