Skip to Content
0 Votes

Changes for page Solr Search

Last modified by Сергей Коршунов on 2025/01/12 00:53
From version 2.1
edited by Сергей Коршунов
on 2022/03/08 17:00
Change comment: Install extension [org.xwiki.platform:xwiki-platform-search-solr-ui/14.1]
To version 5.1
edited by Сергей Коршунов
on 2024/03/26 17:51
Change comment: Install extension [org.xwiki.platform:xwiki-platform-search-solr-ui/16.2.0]

Summary

Details

dark-grey-disclosure-arrow-down.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.admins
Size
... ... @@ -1,1 +1,0 @@
1 -94 bytes
Content
dark-grey-disclosure-arrow-left.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.admins
Size
... ... @@ -1,1 +1,0 @@
1 -94 bytes
Content
light-grey-disclosure-arrow-down.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.admins
Size
... ... @@ -1,1 +1,0 @@
1 -94 bytes
Content
light-grey-disclosure-arrow-left.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.admins
Size
... ... @@ -1,1 +1,0 @@
1 -94 bytes
Content
XWiki.JavaScriptExtension[0]
Code
... ... @@ -37,14 +37,21 @@
37 37   }
38 38   };
39 39  
40 - var addFacetValueCheckbox = function() {
41 - var checkBox = $(document.createElement('input')).attr('type', 'checkbox');
40 + var addFacetValueCheckbox = function(index) {
41 + // Create an id unique to the facet value.
42 + let facetContainer = $(this).parents('.search-facet').first();
43 + $(this).attr('id', facetContainer.attr('data-name') + '-' + index.toString());
44 + // Initialize the checkbox.
45 + let checkBox = $(document.createElement('input')).attr('type', 'checkbox');
46 + checkBox.attr('aria-labelledby', $(this).attr('id'));
42 42   checkBox.prop('checked', $(this).hasClass('selected'));
43 43   // Add the 'checked' attribute so that it can be easily located with CSS.
44 44   checkBox.prop('checked') && checkBox.attr('checked', 'checked');
45 45   checkBox.on('click', this.click.bind(this));
46 - // Remove the 'selected' class because the selected state is marked using the check box.
47 - $(this).removeClass('selected').before(checkBox);
51 + // Remove the 'selected' class because the selected state is already marked using the check box.
52 + $(this).removeClass('selected')
53 + // Add the checkbox to the DOM
54 + $(this).before(checkBox)
48 48   };
49 49  
50 50   var enhanceSearchFacets = function() {
... ... @@ -61,8 +61,8 @@
61 61   updateExpandCollapseAllFacetsState(facetsContainer);
62 62  
63 63   // Expand/Collapse toggle for each facet.
64 - facetsContainer.find('.search-facet-header').on('click', function(event) {
65 - $(event.target).parent('.search-facet').toggleClass('expanded');
71 + facetsContainer.find('.facet-toggler').on('click', function(event) {
72 + $(event.target).parents('.search-facet').toggleClass('expanded');
66 66   updateExpandCollapseAllFacetsState(facetsContainer);
67 67   });
68 68  
XWiki.StyleSheetExtension[0]
Code
... ... @@ -222,7 +222,7 @@
222 222   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
223 223   /* Leave space for the bottom shadow. */
224 224   margin-bottom: 1em;
225 - border-radius: 4px;
225 + border-radius: 7px;
226 226  }
227 227  /* Colibri skin doesn't have the grid system. */
228 228  .skin-colibri .search-facets {
... ... @@ -287,11 +287,13 @@
287 287  }
288 288  
289 289  .search-facet-header {
290 - background: url("$doc.getAttachmentURL('dark-grey-disclosure-arrow-left.png')") no-repeat scroll 100% 50% transparent;
291 291   color: $theme.titleColor;
292 292   cursor: pointer;
293 293   line-height: 1.4em;
294 294   margin: 0 .2em;
294 + display: flex;
295 + justify-content: space-between;
296 + position: relative;
295 295  }
296 296  
297 297  .search-facet-header:after {
... ... @@ -301,10 +301,9 @@
301 301   content: "";
302 302   display: block;
303 303   height: 0;
304 - margin: 2.45em 0 0;
305 305   position: absolute;
306 306   right: 0;
307 - top: 0;
308 + bottom: 0;
308 308   width: 100%;
309 309  }
310 310  
... ... @@ -329,13 +329,37 @@
329 329  }
330 330  
331 331  .search-facet-body li {
333 + display: flex;
334 + flex-wrap: wrap;
332 332   padding: .1em .2em;
333 333  }
334 334  
335 -.search-facet.expanded .search-facet-header {
336 - background-image: url("$doc.getAttachmentURL('dark-grey-disclosure-arrow-down.png')");
338 +.search-facet .search-facet-header .facet-toggler, button.facet-value-toggler {
339 + background: transparent;
340 + transition: background-color .2s ease-in-out;
337 337  }
338 338  
343 +.search-facet .search-facet-header .facet-toggler:active, button.facet-value-toggler:active {
344 + box-shadow: unset;
345 +}
346 +
347 +.search-facet .search-facet-header .facet-toggler > span, button.facet-value-toggler > span,
348 +.search-facet .search-facet-header .facet-toggler > img, button.facet-value-toggler > img {
349 + transform: rotate(90deg);
350 +}
351 +
352 +.search-facet.expanded .search-facet-header .facet-toggler > span, .expanded > button.facet-value-toggler > span,
353 +.search-facet.expanded .search-facet-header .facet-toggler > img, .expanded > button.facet-value-toggler > img {
354 + transform: rotate(0deg);
355 +}
356 +
357 +@media not (prefers-reduced-motion) {
358 + .search-facet .search-facet-header .facet-toggler > span, button.facet-value-toggler > span,
359 + .search-facet .search-facet-header .facet-toggler > img, button.facet-value-toggler > img {
360 + transition: transform 0.2s ease;
361 + }
362 +}
363 +
339 339  .search-facet.expanded .search-facet-body {
340 340   display: block;
341 341  }
... ... @@ -353,7 +353,6 @@
353 353  }
354 354  
355 355  .search-facet-body input[type="checkbox"] {
356 - float: left;
357 357   margin: .2em 0;
358 358  }
359 359  
... ... @@ -367,6 +367,7 @@
367 367  }
368 368  
369 369  .search-facet-body .itemName,
394 +.search-facet-body .facet-value-toggler,
370 370  .search-facet-body .more {
371 371   /* Remove link styling */
372 372   color: $theme.textColor;
... ... @@ -384,8 +384,8 @@
384 384  }
385 385  
386 386  .search-facet-body .itemCount {
387 - float: right;
388 388   padding: .1em 0;
413 + margin-left: auto;
389 389  }
390 390  
391 391  @media (max-width: 768px) {