It would be nice to have the option of a 'clear search' button/icon in the OPAC search box so users could quickly clear out text they have input instead of having to put their cursor in the search box and backspace or highlight the text and delete it. This is a common feature of many search boxes, such as in Chrome and Firefox. The clear search feature (typically and 'x' or an 'x' in a circle) would only display when the search box contains text that could be cleared. I added a mockup of what I'm referring to.
Created attachment 150602 [details] Search box with clear search feature
Created attachment 169443 [details] [review] Bug 33668: Added clear button to global js To test: 1. Apply the patch and perform a yarn build. 2. Navigate to the OPAC. * Verify the presence of an X icon on the far right of the search box. 3. Perform the following steps: * Type a search term (e.g., "Books") into the search box. * Before clicking the search button or pressing 'Enter', click on the X icon. * Note that the text ("Books") should be cleared from the search box. * Repeat the above step, but this time complete the search. * Verify that the search term remains in the search box. Clicking the X icon now should clear the text. 4. Confirm that searched terms persist in the Search history even after clearing a search. * Terms cleared without completing a search should not appear in the history. 5. Sign off and have a great day!
Created attachment 169444 [details] [review] Bug 33668: Add css for the clear button
Created attachment 169445 [details] [review] Bug 33668: Added clear button to global js Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl>
Created attachment 169446 [details] [review] Bug 33668: Add css for the clear button Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl>
Created attachment 169525 [details] [review] Bug 33668: Added clear button to global js Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr>
Created attachment 169526 [details] [review] Bug 33668: Add css for the clear button Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr>
Thank you Laura, this is a much-welcomed improvement to the OPAC search box! I have made some observations while reading your code, and will submit some follow-up patches. Since a picture is worth a thousand words, I will also upload some browser screenshots that show my suggested improvements. Hopefully these will be for the better! ;-)
Hmmm, I just noticed that after Roman's sign off your test plan is missing from the commit message. I'll try to re-attach my own sign off with the test plan included...
Created attachment 169527 [details] [review] Bug 33668: Added clear button to global js To test: 1. Apply the patch and perform a yarn build. 2. Navigate to the OPAC. * Verify the presence of an X icon on the far right of the search box. 3. Perform the following steps: * Type a search term (e.g., "Books") into the search box. * Before clicking the search button or pressing 'Enter', click on the X icon. * Note that the text ("Books") should be cleared from the search box. * Repeat the above step, but this time complete the search. * Verify that the search term remains in the search box. Clicking the X icon now should clear the text. 4. Confirm that searched terms persist in the Search history even after clearing a search. * Terms cleared without completing a search should not appear in the history. 5. Sign off and have a great day! Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr>
Created attachment 169528 [details] Suggested improvements screenshot 1 (zoomed in) This is a screenshot of the improvements I'm suggesting, taken in Firefox. It is meant to be viewed from top to bottom, as it progressively displays the various improvements to the 'Clear search' button.
Created attachment 169529 [details] Suggested improvements screenshot 2 (mobile device) Yet another screenshot, this time while previewing the suggested changes on a simulated mobile device (again, using Firefox).
Created attachment 169530 [details] Suggested improvements screenshot 3 (wide viewport) Last screenshot in this series, showing how the suggested improvements will look in a wide viewport.
Created attachment 169531 [details] [review] Bug 33668: (follow-up) Tidy up the code Added spaces around the argument to translateY() as per the rest of the code. Fixed indentation. Removed a stray space before closing parenthesis.
Created attachment 169532 [details] [review] Bug 33668: (follow-up) Adjust Font Awesome icon classes Removed the fa-sharp class as it's only available with the Font Awesome Pro icon set. Removed fa-regular in favour of fa-solid, as the latter is used exclusively in the Koha codebase.
Created attachment 169533 [details] [review] Bug 33668: (follow-up) Improve the appearance of the 'Clear search' button Changed fa-circle-xmark to fa-square-xmark to match the appearance of the adjacent search button which is square in very wide viewports and rectangular in narrower ones. Increased the size of the 'Clear search' button to 2rem. Improved the vertical & horizontal alignment to be as pixel-perfect as possible. Used the same background colour as the Search button. Increased padding to alleviate the problem of search keywords getting hidden behind the 'Clear search' button. Test plan: 1) Apply the patch and run `yarn build`. 2) In the OPAC, type some text in the search box, and use the 'X' icon to clear it. 3) Try to resize your browser window to different sizes, and observe that the 'X' icon adjusts itself correctly.
Created attachment 169534 [details] [review] Bug 33668: (follow-up) Modify the JS logic behind the 'Clear search' button In the existing code, the 'Clear search' button would hide itself after clearing anything typed at the search <input>. This patch adjusts the JavaScript logic so that when the page first loads and the search <input> is empty, the 'Clear search' button will not be displayed at all. The 'X' (Clear search) button will only appear once the user has typed something in the search <input> area. Test plan: 1) Apply the patch. 2) Do a hard refresh (CTRL+F5) on the OPAC main page to reload all JS assets. 3) Notice that the 'Clear search' button is not displayed. 4) Try to search for something -> the button appears! 5) Use the 'X' button to clear your search -> the search terms are cleared and the 'X' button hides itself!
(In reply to Andreas Roussos from comment #17) > ... > This patch adjusts the JavaScript logic so that when the > page first loads and the search <input> is empty, the > 'Clear search' button will not be displayed at all. > > The 'X' (Clear search) button will only appear once the > user has typed something in the search <input> area. > ... > Test plan: > > 1) Apply the patch. > 2) Do a hard refresh (CTRL+F5) on the OPAC main page to > reload all JS assets. > 3) Notice that the 'Clear search' button is not displayed. > 4) Try to search for something -> the button appears! > 5) Use the 'X' button to clear your search -> the search > terms are cleared and the 'X' button hides itself! I can't confirm p. 4. Button appears only when typeing but is not displayed after performing search (at screen with search results). It again appears when click in search box, but it is one more click to show button and clear. I also tested patch without last commit - works as described.
(In reply to Roman Dolny from comment #18) > (In reply to Andreas Roussos from comment #17) > > ... > > This patch adjusts the JavaScript logic so that when the > > page first loads and the search <input> is empty, the > > 'Clear search' button will not be displayed at all. > > > > The 'X' (Clear search) button will only appear once the > > user has typed something in the search <input> area. > > ... > > Test plan: > > > > 1) Apply the patch. > > 2) Do a hard refresh (CTRL+F5) on the OPAC main page to > > reload all JS assets. > > 3) Notice that the 'Clear search' button is not displayed. > > 4) Try to search for something -> the button appears! > > 5) Use the 'X' button to clear your search -> the search > > terms are cleared and the 'X' button hides itself! > > I can't confirm p. 4. Button appears only when typeing but is not displayed > after performing search (at screen with search results). It again appears > when click in search box, but it is one more click to show button and clear. > > I also tested patch without last commit - works as described. Thank you for testing this, Roman -- you're absolutely right! I will amend my patch and adjust the test plan to account for what you discovered.
Created attachment 169716 [details] [review] Bug 33668: (follow-up) Modify the JS logic behind the 'Clear search' button When the OPAC main page first loads and the search <input> is empty, the 'X' (Clear search) button is displayed anyway. This can potentially cause some UX confusion involving the presence of an 'X' button inside an otherwise empty search box. This patch fixes that in a way that doesn't affect the display of the 'X' button after performing an actual search. Test plan: 1) Without this patch applied, visit the OPAC main page. Notice that even though there's nothing in the search box yet, the 'Clear search' button is displayed anyway. 2) Apply this patch / reload all JavaScript assets (CTRL+F5). 3) Notice that the 'Clear search' button is no longer visible when the search box is empty. 4) Type something in the search box: notice that the 'X' button appears. 5) Use the 'X' button to clear your search: the search terms are cleared and the 'X' button hides itself. 6) Perform an actual search and in the results page notice that the 'X' button remains visible.
Created attachment 169717 [details] [review] Bug 33668: (follow-up) Ensure the clear button is added to the DOM only once Every time the OPAC search dropdown menu is used to select a specific search type (by keyword/Title/Author/ISBN/etc.), the 'Clear search' button HTML code is re-added to the DOM. This has the side effect of multiple presses of the 'X' button being required in order to hide it. Test plan: 1) Without this patch applied, use the dropdown menu adjacent to the OPAC search box to select a specific search type. Make, for example, 3 changes in a row (because you can't make up your mind). 2) Type something in the search box: notice that the 'X' button appears. Now click on the 'X' button: notice that it doesn't go away immediately, but requires as many clicks as the number of times you selected a search type in step 1. 3) Apply the patch and perform a hard refresh (CTRL+F5) on the OPAC main page to reload all JavaScript assets. 4) Repeat steps 1 and 2 -- this time the 'X' button should hide itself immediately when you first click on it.
The last follow-up patch has been amended and its Test plan modified to account for the issue spotted by Roman. I've also found out that in the initial patch the clear button HTML code was being added to the DOM upon *every* call to the setPlaceholder() JS function, thus causing it to misbehave if you selected a different search type from the dropdown menu. A follow-up with a separate test plan has been added to take care of this issue.
Created attachment 169755 [details] [review] Bug 33668: Add css for the clear button Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr> Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl>
Created attachment 169756 [details] [review] Bug 33668: Added clear button to global js To test: 1. Apply the patch and perform a yarn build. 2. Navigate to the OPAC. * Verify the presence of an X icon on the far right of the search box. 3. Perform the following steps: * Type a search term (e.g., "Books") into the search box. * Before clicking the search button or pressing 'Enter', click on the X icon. * Note that the text ("Books") should be cleared from the search box. * Repeat the above step, but this time complete the search. * Verify that the search term remains in the search box. Clicking the X icon now should clear the text. 4. Confirm that searched terms persist in the Search history even after clearing a search. * Terms cleared without completing a search should not appear in the history. 5. Sign off and have a great day! Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr> Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl>
Created attachment 169757 [details] [review] Bug 33668: (follow-up) Tidy up the code Added spaces around the argument to translateY() as per the rest of the code. Fixed indentation. Removed a stray space before closing parenthesis. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl>
Created attachment 169758 [details] [review] Bug 33668: (follow-up) Adjust Font Awesome icon classes Removed the fa-sharp class as it's only available with the Font Awesome Pro icon set. Removed fa-regular in favour of fa-solid, as the latter is used exclusively in the Koha codebase. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl>
Created attachment 169759 [details] [review] Bug 33668: (follow-up) Improve the appearance of the 'Clear search' button Changed fa-circle-xmark to fa-square-xmark to match the appearance of the adjacent search button which is square in very wide viewports and rectangular in narrower ones. Increased the size of the 'Clear search' button to 2rem. Improved the vertical & horizontal alignment to be as pixel-perfect as possible. Used the same background colour as the Search button. Increased padding to alleviate the problem of search keywords getting hidden behind the 'Clear search' button. Test plan: 1) Apply the patch and run `yarn build`. 2) In the OPAC, type some text in the search box, and use the 'X' icon to clear it. 3) Try to resize your browser window to different sizes, and observe that the 'X' icon adjusts itself correctly. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl>
Created attachment 169760 [details] [review] Bug 33668: (follow-up) Modify the JS logic behind the 'Clear search' button When the OPAC main page first loads and the search <input> is empty, the 'X' (Clear search) button is displayed anyway. This can potentially cause some UX confusion involving the presence of an 'X' button inside an otherwise empty search box. This patch fixes that in a way that doesn't affect the display of the 'X' button after performing an actual search. Test plan: 1) Without this patch applied, visit the OPAC main page. Notice that even though there's nothing in the search box yet, the 'Clear search' button is displayed anyway. 2) Apply this patch / reload all JavaScript assets (CTRL+F5). 3) Notice that the 'Clear search' button is no longer visible when the search box is empty. 4) Type something in the search box: notice that the 'X' button appears. 5) Use the 'X' button to clear your search: the search terms are cleared and the 'X' button hides itself. 6) Perform an actual search and in the results page notice that the 'X' button remains visible. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl>
Created attachment 169761 [details] [review] Bug 33668: (follow-up) Ensure the clear button is added to the DOM only once Every time the OPAC search dropdown menu is used to select a specific search type (by keyword/Title/Author/ISBN/etc.), the 'Clear search' button HTML code is re-added to the DOM. This has the side effect of multiple presses of the 'X' button being required in order to hide it. Test plan: 1) Without this patch applied, use the dropdown menu adjacent to the OPAC search box to select a specific search type. Make, for example, 3 changes in a row (because you can't make up your mind). 2) Type something in the search box: notice that the 'X' button appears. Now click on the 'X' button: notice that it doesn't go away immediately, but requires as many clicks as the number of times you selected a search type in step 1. 3) Apply the patch and perform a hard refresh (CTRL+F5) on the OPAC main page to reload all JavaScript assets. 4) Repeat steps 1 and 2 -- this time the 'X' button should hide itself immediately when you first click on it. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl>
Tiny merge conflict in opac.scss needs to be resolved.