[4.0] Rewrite searchtools CSS

[ciar4n]

This PR rewrites the CSS for searchtools. The current CSS is a bit of a mess and hugely excessive. Here we remove 300+ lines of SCSS. Style changes are minimal but in general, should look the same.

Apply this patch and run node build.js --compile-css for updating the changed SCSS. Check searchtools are displaying correctly.

[brianteeman]

Can you look at some of the changes I made here #28461

Obviously not the code but the results

[ciar4n]

Can you look at some of the changes I made here #28461
Obviously not the code but the results

Probably outside the scope of this PR. I can take look after this if you wish. Currently, I count 4 different types of downward chevrons in the J4 admin.

[brianteeman]

The reason for the suggestion is to make all the selects in the searchtools have a similar look

[ciar4n]

The reason for the suggestion is to make all the selects in the searchtools have a similar look

Your suggestion makes sense. I think all chevrons throughout the UI should look the same, so whatever that is, lets replicate everywhere,

[brianteeman]

Agreed. I tried with the chevrons, border-radius, focus etc but its a bit beyond me to do it as efficiently as you.

[infograf768]

Note: the xtd are also using searchtools in cassiopea.

[wilsonge]

Merging this as a start point. If you could review the chevrons to be consistent that would be excellent.

[ciar4n]

Note: the xtd are also using searchtools in cassiopea.

I create a separate PR for the frontend. Any idea why this is separate CSS?

[richard67]

@wilsonge Merging this has broken npm ci:

Error: Undefined variable: "$white".
        on line 34 of administrator/templates/atum/scss/system/searchtools/searchtools.scss
>>     background-color: $white;

   ----------------------^

Segmentation fault (core dumped)

The reason is that this PR here has removed the import for variables.scss from the top of the searcthools.scss file but still uses a variable $white.

@ciar4n Please advise so I can make PR, or please make PR yourself: Shall we add back the import of "../../variables" or shall we change the variable to a hard-coded value?

[Fedik]

Any idea why this is separate CSS?

@ciar4n you can find the pull #27416 and a reason somewhere in discussion there #27384 😉

[ciar4n]

Thx @Fedik 👍

[ciar4n]

@richard67 Replacing $white with white should be fine. That or add back in the variables import. I'll create a PR later if not fixed in the meantime (afk).

[ciar4n]

@richard67 PR.. #28619

[ciar4n]

Anyone have any idea how to display the 'searchtools' in the frontend?

[brianteeman]

when you are editing an article in the frontend click on one of the xtd-editor buttons eg menu link

[ciar4n]

Thanks 👍

[infograf768]

@ciar4n
See #28248 and follow-up PRs where I added searchtools

[ciar4n]

PR for frontend searchtools... #28622

[infograf768]

@ciar4n
Is this responsible for Menu Items manager

and the Clear button same colour as Filter Options when a filter is applied?

[infograf768]

It also gives same oddity when using the menus xtd

reverting the PR solves the issues.

[ciar4n]

Thx @infograf768. #28644 should resolve these issues.