mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve collection search filter expansion

Browse source 
- Speed up transition to 0.2s
- Focus once the transition is fully done
- The actual input field is hidden and the button is displayed 50 milliseconds
after the field starts shrinking to not have the magnifying glass
appear to the right of the input field right before the input is
hidden.
This commit is contained in:
abaevbog 2023-12-23 14:35:23 -08:00 committed by Dan Stillman
parent d021433979
commit 133fb3ad23
2 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
chrome/content/zotero/zoteroPane.js
View file

@ -1016,23 +1016,29 @@ var ZoteroPane = new function()
let collectionSearchButton = document.getElementById("zotero-tb-collections-search");
if (!collectionSearchField.value.length && collectionSearchField.classList.contains("visible")) {
collectionSearchField.classList.remove("visible");
collectionSearchButton.style.display = '';
collectionSearchField.setAttribute("disabled", true);
setTimeout(() => {
collectionSearchButton.style.display = '';
collectionSearchField.style.visibility = 'hidden';
}, 50);
}
}
this.initCollectionTreeSearch = function () {
let collectionSearchField = document.getElementById("zotero-collections-search");
let collectionSearchButton = document.getElementById("zotero-tb-collections-search");
collectionSearchField.style.visibility = 'hidden';
collectionSearchField.addEventListener("blur", ZoteroPane.hideCollectionSearch);
collectionSearchButton.addEventListener("click", (_) => {
if (!collectionSearchField.classList.contains("visible")) {
collectionSearchButton.style.display = 'none';
collectionSearchField.classList.add("visible");
collectionSearchField.style.visibility = 'visible';
collectionSearchField.classList.add("visible", "expanding");
// Enable and focus the field only after it was revealed to prevent the cursor
// from changing between 'text' and 'pointer' back and forth as the input field expands
setTimeout(() => {
collectionSearchField.removeAttribute("disabled");
collectionSearchField.classList.remove("expanding");
collectionSearchField.focus();
}, 250);
return;

10
scss/components/_toolbar.scss
View file

@ -86,18 +86,18 @@
#zotero-collections-search {
max-width: 0;
transition: max-width 0.5s ease;
transition: max-width 0.2s ease;
padding: 0px 6px 0px 0px;
margin: 0;
appearance: none;
visibility: hidden;
}
#zotero-collections-search.visible {
max-width: 180px;
visibility: visible;
/* Avoids flickering between pointer and text cursor during transition */
cursor: text;
}
#zotero-collections-search.expanding {
padding-right: 35px;
}
/* Hide collection search on pane collapse, otherwise it still shows when focused */