Skip to content

[Enhancement] Make filter section collapsible to improve popup layout #387

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gurusatsangi wants to merge 11 commits into
base: main
Choose a base branch
from
+55 −1
Open

[Enhancement] Make filter section collapsible to improve popup layout #387

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5f86739
feat: add collapsible Advanced Filters section in popup
gurusatsangi Feb 20, 2026
9fed466
refactor: align Advanced Filters styling with platform selector dropdown
gurusatsangi Feb 27, 2026
5304277
Update src/scripts/popup.js
gurusatsangi Mar 3, 2026
a7fd121
Update src/popup.html
gurusatsangi Mar 3, 2026
3dcdb4c
Update src/scripts/popup.js
gurusatsangi Mar 3, 2026
b6c108c
Update src/index.css
gurusatsangi Mar 3, 2026
6c510b9
Merge branch 'main' of https://github.com/fossasia/scrum_helper into …
gurusatsangi Mar 3, 2026
84c0798
resolve index.css after upstream sync
gurusatsangi Mar 3, 2026
370ebd0
resolve index.css after upstream sync
gurusatsangi Mar 3, 2026
b098170
resolved all mentioned comment
gurusatsangi Mar 3, 2026
d09d392
Update index.css
gurusatsangi Mar 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/_locales/en/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,5 +299,8 @@
},
"onlyRevPRsTooltip": {
"message": "If checked, the report will only include PRs reviewed by you."
},
"advanced_filters": {
"message": "Advanced Filters"
}
}
17 changes: 16 additions & 1 deletion src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -897,6 +897,21 @@ hr,
background-color: #3b82f6;
color: #fff;
}
.dark-mode #toggleAdvancedFilters {
background-color: #404040 !important;
border-color: #505050 !important;
color: #f3f4f6 !important;
}

.dark-mode #advancedFiltersArrow {
color: #d1d5db !important;
}
#advancedFiltersArrow {
transition: transform 0.2s ease-in-out;
}
.rotate-180 {
transform: rotate(180deg);
}

html.mode-sidepanel, body.mode-sidepanel {
width: 100%;
Expand All @@ -906,4 +921,4 @@ html.mode-sidepanel, body.mode-sidepanel {
html.mode-popup, body.mode-popup {
width: 360px;
min-width: 360px;
}
}
23 changes: 23 additions & 0 deletions src/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,25 @@ <h3 id="scrumHelperHeading" class="text-3xl font-semibold cursor-pointer">Scrum
</div>
</div>
</div>
<!-- Advanced Filters Wrapper -->
<div class="advanced-filters-container mt-2">

<div class="relative" >
<button type="button"
id="toggleAdvancedFilters"
aria-expanded="false"
aria-controls="advancedFiltersContent"
class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 pr-8 flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-500">

<span class="flex items-center"data-i18n="advanced_filters">
</span>

<i id="advancedFiltersArrow"
class="fa fa-chevron-down text-gray-500" aria-hidden="true">
</i>
</button>
Comment on lines +199 to +211
Copy link

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new toggle button lacks aria-expanded and aria-controls attributes. These are standard accessibility attributes for collapsible/disclosure widgets: aria-expanded should reflect the current open/closed state (toggled by the JS click handler alongside the class changes), and aria-controls should reference the ID of the controlled content (advancedFiltersContent). Without these, assistive technology users cannot determine the state of or relationship between the button and the collapsible content.

Copilot uses AI. Check for mistakes.
</div>
<div id="advancedFiltersContent" class="advanced-filters-content hidden">

<div style="margin-bottom: 1rem;">
<br />
Expand Down Expand Up @@ -266,6 +285,10 @@ <h3 id="scrumHelperHeading" class="text-3xl font-semibold cursor-pointer">Scrum

</div>
</div>

</div>
</div>


<div>
<div>
Expand Down
13 changes: 13 additions & 0 deletions src/scripts/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1290,6 +1290,19 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
}
// Advanced Filters Toggle
const toggleBtn = document.getElementById("toggleAdvancedFilters");
const content = document.getElementById("advancedFiltersContent");
const arrow = document.getElementById("advancedFiltersArrow");

if (toggleBtn && content && arrow) {
toggleBtn.addEventListener("click", function () {
const isHidden = content.classList.toggle("hidden");
arrow.classList.toggle("rotate-180");
toggleBtn.setAttribute("aria-expanded", !isHidden);
});
}

});

const cacheInput = document.getElementById('cacheInput');
Expand Down
Loading