Skip to content

Enhancement: Make filter section collapsible to improve popup layout … #388

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

Closed
ugupta17k wants to merge 1 commit into from
Closed

Enhancement: Make filter section collapsible to improve popup layout … #388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,10 @@
- Rich text formatting with clickable links
- Copy report to clipboard with proper formatting

1.1 **Collapsible Advanced Filters**
- Filter checkboxes such as "include only issues", "include only PRs", etc. are now hidden inside an expandable section
- Keeps the popup compact by default and improves visual clarity

2. **Advanced Repository Filtering**
* Select specific repositories to include in your report for a more focused summary.
* Easily search and manage your repository list directly within the popup.
Expand Down
5 changes: 5 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 @@ -117,9 +117,14 @@
"showCommitsTooltip": {
"message": "Github Token required, add it in the settings."
},
"advancedFiltersLabel": {
"message": "Advanced Filters",
"description": "Label for the collapsible advanced filters section."
},
"onlyIssuesLabel": {
"message": "Include only issues in the report"
},

"onlyIssuesTooltip": {
"message": "If checked, the report will only include issues created or assigned to the user."
},
Expand Down
144 changes: 73 additions & 71 deletions src/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,77 +199,79 @@ <h3 id="scrumHelperHeading" class="text-3xl font-semibold cursor-pointer">Scrum
</div>
</div>

<div style="margin-bottom: 1rem;">
<br />
<input type="checkbox" id="showOpenLabel" class="form-checkbox text-blue-600">

<label id="checkboxLabel" for="showOpenLabel" class="font-medium text-sm"
style="margin-left: 4px;" data-i18n="showOpenClosedLabel">Show
PRs Labels</label>

</div>
<div class="my-4">
<div class="flex items-center">
<input type="checkbox" id="onlyIssues" class="form-checkbox text-blue-600">
<label for="onlyIssues" class="font-medium text-sm flex items-center"
style="margin-left: 4px;" data-i18n="onlyIssuesLabel">
Include only issues in the report
</label>
<span class="tooltip-container">
<i class="fa fa-question-circle question-icon"></i>
<span class="tooltip-bubble" data-i18n="onlyIssuesTooltip">
If checked, the report will only include issues created or assigned to the user.
</span>
</span>
</div>
</div>

<div class="my-4">
<div class="flex items-center">
<input type="checkbox" id="onlyPRs" class="form-checkbox text-blue-600">
<label for="onlyPRs" class="font-medium text-sm flex items-center" style="margin-left: 4px;"
data-i18n="onlyPRsLabel">
Include only PRs in the report
</label>
<span class="tooltip-container">
<i class="fa fa-question-circle question-icon"></i>
<span class="tooltip-bubble" data-i18n="onlyPRsTooltip">
If checked, the report will only include PRs created by you.
</span>
</span>
</div>
</div>

<div class="my-4">
<div class="flex items-center">
<input type="checkbox" id="onlyRevPRs" class="form-checkbox text-blue-600">
<label for="onlyRevPRs" class="font-medium text-sm flex items-center"
style="margin-left: 4px;" data-i18n="onlyRevPRsLabel">
Include only Reviewed PRs in the report
</label>
<span class="tooltip-container">
<i class="fa fa-question-circle question-icon"></i>
<span class="tooltip-bubble" data-i18n="onlyPRsTooltip">
If checked, the report will only include PRs reviewed by you.
</span>
</span>
</div>
</div>

<div class="my-4 githubOnlySection">
<div class="flex items-center">
<input type="checkbox" id="showCommits" checked class="form-checkbox text-blue-600 ">

<label id="showCommitsLabel" for="showCommits"
class="font-medium text-sm flex items-center pl-5 ml-4" style="margin-left: 4px;"
data-i18n="showCommitsLabel">Show commits on open PRs/ draft PRs</label><span
class="tooltip-container">
<i class="fa fa-question-circle question-icon"></i>
<span class="tooltip-bubble" data-i18n="showCommitsTooltip">
Github Token required, add it in the settings.
</span>
</span>

<div class="mb-4">
<!-- advanced filters button -->
<button id="advancedFiltersToggle" class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-500">
<span data-i18n="advancedFiltersLabel">Advanced Filters</span>
<i id="advancedFiltersIcon" class="fa fa-chevron-down text-gray-500"></i>
</button>
<div id="advancedFiltersContainer" class="hidden mt-2">
<div style="margin-bottom: 1rem;">
<br />
<input type="checkbox" id="showOpenLabel" class="form-checkbox text-blue-600">
<label id="checkboxLabel" for="showOpenLabel" class="font-medium text-sm"
style="margin-left: 4px;" data-i18n="showOpenClosedLabel">Show
PRs Labels</label>
</div>
<div class="my-4">
<div class="flex items-center">
<input type="checkbox" id="onlyIssues" class="form-checkbox text-blue-600">
<label for="onlyIssues" class="font-medium text-sm flex items-center"
style="margin-left: 4px;" data-i18n="onlyIssuesLabel">
Include only issues in the report
</label>
<span class="tooltip-container">
<i class="fa fa-question-circle question-icon"></i>
<span class="tooltip-bubble" data-i18n="onlyIssuesTooltip">
If checked, the report will only include issues created or assigned to the user.
</span>
</span>
</div>
</div>
<div class="my-4">
<div class="flex items-center">
<input type="checkbox" id="onlyPRs" class="form-checkbox text-blue-600">
<label for="onlyPRs" class="font-medium text-sm flex items-center" style="margin-left: 4px;"
data-i18n="onlyPRsLabel">
Include only PRs in the report
</label>
<span class="tooltip-container">
<i class="fa fa-question-circle question-icon"></i>
<span class="tooltip-bubble" data-i18n="onlyPRsTooltip">
If checked, the report will only include PRs created by you.
</span>
</span>
</div>
</div>
<div class="my-4">
<div class="flex items-center">
<input type="checkbox" id="onlyRevPRs" class="form-checkbox text-blue-600">
<label for="onlyRevPRs" class="font-medium text-sm flex items-center"
style="margin-left: 4px;" data-i18n="onlyRevPRsLabel">
Include only Reviewed PRs in the report
</label>
<span class="tooltip-container">
<i class="fa fa-question-circle question-icon"></i>
<span class="tooltip-bubble" data-i18n="onlyPRsTooltip">
If checked, the report will only include PRs reviewed by you.
</span>
</span>
</div>
</div>
<div class="my-4 githubOnlySection">
<div class="flex items-center">
<input type="checkbox" id="showCommits" checked class="form-checkbox text-blue-600 ">
<label id="showCommitsLabel" for="showCommits"
class="font-medium text-sm flex items-center pl-5 ml-4" style="margin-left: 4px;"
data-i18n="showCommitsLabel">Show commits on open PRs/ draft PRs</label><span
class="tooltip-container">
<i class="fa fa-question-circle question-icon"></i>
<span class="tooltip-bubble" data-i18n="showCommitsTooltip">
Github Token required, add it in the settings.
</span>
</span>
</div>
</div>
</div>
</div>

Expand Down
23 changes: 23 additions & 0 deletions src/scripts/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,28 @@ document.addEventListener('DOMContentLoaded', () => {

githubTokenInput.addEventListener('input', checkTokenForFilter);

// advanced filters toggle behaviour
if (advancedFiltersToggle && advancedFiltersContainer && advancedFiltersIcon) {
advancedFiltersToggle.addEventListener('click', () => {
const isCurrentlyOpen = !advancedFiltersContainer.classList.contains('hidden');
if (isCurrentlyOpen) {
advancedFiltersContainer.classList.add('hidden');
advancedFiltersIcon.classList.replace('fa-chevron-up', 'fa-chevron-down');
} else {
advancedFiltersContainer.classList.remove('hidden');
advancedFiltersIcon.classList.replace('fa-chevron-down', 'fa-chevron-up');
}
chrome?.storage.local.set({ advancedFiltersOpen: !isCurrentlyOpen });
});

// restore state from storage
chrome?.storage.local.get(['advancedFiltersOpen'], (result) => {
if (result.advancedFiltersOpen) {
advancedFiltersContainer.classList.remove('hidden');
advancedFiltersIcon.classList.replace('fa-chevron-down', 'fa-chevron-up');
}
});
}
darkModeToggle.addEventListener('click', function () {
body.classList.toggle('dark-mode');
const isDarkMode = body.classList.contains('dark-mode');
Expand Down Expand Up @@ -203,6 +225,7 @@ document.addEventListener('DOMContentLoaded', () => {
'toggleTokenVisibility',
'useRepoFilter',
'repoSearch',
'advancedFiltersToggle',
'platformDropdownBtn',
];

Expand Down