saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-06-05 08:42:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve search UI and fix icon issues (#3192)

Browse Source 
# Description of Changes

Please provide a summary of the changes, including:

Searchbar was not compatible with new SVG icons and was monochrome.
Brought in line with design language and fixed bugs

![image](https://github.com/user-attachments/assets/2e9be7b1-3f5f-430a-8063-8163ad05d30c)


Closes #(issue_number)

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.

Co-authored-by: Reece Browne <reece@stirling.pdf>
This commit is contained in:
Reece Browne 2025-03-20 20:56:02 +13:00 committed by GitHub
parent 447d773da7
commit e13a1b8f06
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 33 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/main/resources/static/css/theme/componentes.css
View File

@ -877,6 +877,7 @@ textarea.form-control {
margin: 0 1%;
padding: 1.5rem 0;
border-radius: 1rem;
min-width: 20rem;
color: var(--md-sys-color-on-surface);
background-color: var(--md-sys-color-surface-container);
border: 1px solid var(--md-sys-color-surface-5);

59
src/main/resources/static/js/search.js
View File

@ -25,51 +25,56 @@ window.onload = function () {
window.navItemMaxWidth = maxWidth;
};
// Show search results as user types in search box
document.querySelector("#navbarSearchInput").addEventListener("input", function (e) {
var searchText = e.target.value.trim().toLowerCase(); // Trim whitespace and convert to lowercase
var items = document.querySelectorAll('a.dropdown-item[data-bs-tags]');
var searchText = e.target.value.trim().toLowerCase();
var items = document.querySelectorAll("a.dropdown-item[data-bs-tags]");
var resultsBox = document.querySelector("#searchResults");
// Clear any previous results
resultsBox.innerHTML = "";
if (searchText !== "") {
items.forEach(function (item) {
var titleElement = item.querySelector(".icon-text");
var iconElement = item.querySelector(".material-symbols-rounded, .icon");
var itemHref = item.getAttribute("href");
var tags = item.getAttribute("data-bs-tags") || ""; // If no tags, default to empty string
var addedResults = new Set();
items.forEach(function (item) {
var titleElement = item.querySelector(".icon-text");
var iconElement = item.querySelector(".material-symbols-rounded, .icon");
var itemHref = item.getAttribute("href");
var tags = item.getAttribute("data-bs-tags") || "";
if (titleElement && iconElement && itemHref !== "#") {
var title = titleElement.innerText;
var title = titleElement.innerText.trim();
if (
(title.toLowerCase().indexOf(searchText) !== -1 || tags.toLowerCase().indexOf(searchText) !== -1) &&
!resultsBox.querySelector(`a[href="${itemHref}"]`)
(title.toLowerCase().includes(searchText) || tags.toLowerCase().includes(searchText)) &&
!addedResults.has(itemHref)
) {
var result = document.createElement("a");
result.href = itemHref;
result.classList.add("dropdown-item");
var dropdownItem = document.createElement("div");
dropdownItem.className = "dropdown-item d-flex justify-content-between align-items-center";
var contentWrapper = document.createElement("div");
contentWrapper.className = "d-flex align-items-center flex-grow-1";
contentWrapper.style.textDecoration = "none";
contentWrapper.style.color = "inherit";
var originalContent = item.querySelector("div").cloneNode(true);
contentWrapper.appendChild(originalContent);
contentWrapper.onclick = function () {
window.location.href = itemHref;
};
var resultIcon = document.createElement("span");
resultIcon.classList.add("material-symbols-rounded");
resultIcon.textContent = iconElement.textContent;
result.appendChild(resultIcon);
var resultText = document.createElement("span");
resultText.textContent = title;
resultText.classList.add("icon-text");
result.appendChild(resultText);
resultsBox.appendChild(result);
dropdownItem.appendChild(contentWrapper);
resultsBox.appendChild(dropdownItem);
addedResults.add(itemHref);
}
}
});
}
// Set the width of the search results box to the maximum width
resultsBox.style.width = window.navItemMaxWidth + "px";
});
const searchDropdown = document.getElementById('searchDropdown');
const searchInput = document.getElementById('navbarSearchInput');
const dropdownMenu = searchDropdown.querySelector('.dropdown-menu');