XWIKI-22676: Implement UI improvements to the Search page #4314
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Shown the text that was sr-only before in the top search bar. * Moved the search result controls in their own containers before the column layout for facets * Switched the order of the sort/show elements in the DOM to fit what's shown in the new design * Changed the name of the macros updated, to reflect the fact that they should not be considered API.
WIP TBD: * Move the options back out of the form? They might not be necessary since so far we need to build the query "by hand" with the hidden inputs. * Make the filters a select * Add a highlight on facet item counts * XML escape the content of the new HTML macro :))
WIP * Updated the default style for form-controls to remove their shadows. * Changed the default order of the filters in the config to better match the redesign * Made the sort type a select. * Added the styles so that the new DOM looks somewhat close to the redesign. * Updated a bit the default value of the date sort option to match better the redesign. TBD: * Clean up the useless styles * Add a highlight on facet item counts (and other smaller design changes)
WIP * Fixed the boolean problems with desc/asc being upside down in some situations * Added a small comment to prevent regression by clarifying expectations from this other part of the script. TBD: * Clean up the useless styles * Add a highlight on facet item counts (and other smaller design changes)
* Cleared up a bit the styles * Fixed a bug in the template * Added back list semantics to the options TBD: trigger form validation on the sort fields.
* Updated the pagination velocimacros along with their styles TODO: Make sure it's not breaking any other use of the velocimacro... Somehow a very similar macro is defined in livetables, but it doesn't seem to intersect at all??
* Finished implementing focusKeeping on facet clicks.
* Replaced the custom macro with a standard one. Note that the result is the same even if we need one less parameter (the standard macro builds the second parameter itself)
* Replaced the "Expand highlight" anchor with a link (better fitting semantics). * Simplified the default translation values for common field types, following the design * Updated the presentation of field types
* Removed a now useless workaround for IE8 * Removed colibri specific styles (now useless because we don't want colibri styles in XS) * Replaced a hard coded icon with a standard iconTheme call.
* Updated the javascript. Still need to find a way to have the page update when changing the sort order.
* Fixed the interactivity of the sort inputs * Changed the facet related translations to use the "filter" wording instead * Fixed a small regression on empty itemName classes.
* Used an arrow instead of a caret for the order of fields * Made the highlight-expand buttons use the default button style instead of primary button one (less bulky in the UI) * Updated translation for the options and sortby to better fit our current translation guidelines and improve maintanibility on the long term. * Fixed the name of all the "togglers" I added previously in the facet UI to "toggles" (`toggler` is not a word ^^') * Removed the box around the whole facet UI. * Moved the pagination number to the right of the UI like in the redesign * Updated the design of the facet column (WIP)
* Updated the design of the facet column (WIP)
* Added animation when expanding facets * Updated the looks of the facet actions links
* Added animation when expanding facets * Updated the looks of the facet actions links
* Updated translation values to improve consistency
* Updated translation values to improve naming consistency
* Removed a hardcoded font-size from the pagination control buttons. The icons in those are now sized more similarly to the numbers they are next to.
* Replaced the `:after {content:}` from the HighlightAll buttons with an actual icon. The icon is not exactly the same as the character, but it makes it more consistent with other UIs (this character is only used in one other place in XS, the extension styles).
* Removed unwanted change
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Jira URL
https://jira.xwiki.org/browse/XWIKI-22676
Changes
Description
Clarifications
paginationpublic velocimacro. This velocimacro is used in a couple places in XS (among which is the SolrSearch page). The quality of this pagination velocimacro was not up to par with current day XWiki (both code quality and how it'd look), so I figured it'd be okay to have some "breaking" changes on it. The DOM changes are minimal and the biggest changes are on the CSS side. Given how hard-coded the styles were, I doubt may customizations tried to mess with it.Screenshots & Video
Video demo of the updated UI. I tried to highlight all the possible uses of the UI. Did not show responsiveness here.
2025-06-23.17-48-58.mp4
Executed Tests
Tested UI responsiveness as well as all kinds of form actions that trigger a new search query (see screen recording above).
Successfully built:
mvn clean install -f xwiki-platform-core/xwiki-platform-search/xwiki-platform-search-solr/xwiki-platform-search-solr-ui/ -Pquality,integration-testsmvn clean install -f xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates -PqualityExpected merging strategy