FEATURE: Reduced stylesheet for backend modules #2874
Conversation
|
@skurfuerst this worked easier than expected as @markusguenther already did some work for Neos 5.1. |
Sebobo
force-pushed
the
feature/reduced-stylesheet
branch
from
ee44f95
to
bca9351
Compare
|
That looks awesome <3 :) |
|
We should also think about providing the css variables from the Neos UI here and use them. |
Sebobo
force-pushed
the
feature/reduced-stylesheet
branch
from
bca9351
to
43a1d2a
Compare
Sebobo
changed the title
|
So this is now working. It's not a very awesome solution but it helps. With Neos 6 we could throw the old stuff away and only keep the "NeosLite" variant. I targeted it now for master as it's a feature, but we can discuss if we target 4.3 to make the backend modules work better as a bugfix. |
|
Instead of the resource path to the stylesheet I could also use a flag. Then it might be easier when deprecating the option. |
|
Can't say if it is viable for 4.3 as I don't know how "breaky" this could be. But I'd at least like to get it into 5.2. |
|
@skurfuerst do you still need this for the ACL package? If not I would target 5.2. @albe we will not have real breakiness as it would be a new config option and all old modules use the old stylesheet. I can start using the new one in 5.2 for our own modules. Then we already see if it worked out correctly. |
|
@Sebobo thanks for pushing this forward. For the ACL package I have a workaround, but if I could get rid of that it would of course be nice. IMHO the risk of breakage for 4.3 is almost 0, so I would be fine with 4.3 as Target as well. What do you think? :) |
|
Ok, I will make some more changes and retarget. And another PR to adapt modules for 5.2 Fun fact: I found a discussion from 4 years ago about this issue in Slack :D |
|
awesome @Sebobo :) Thanks for pushing this further!! |
|
@Sebobo are you still up to retargeting this and creating another PR for 5.2? |
|
@albe I won't be able to do both I think. Because the code of 4.x is a bit different in those places which I need to change. Therefore I would now try to finish this one up and get it merged because I need it for the Media UI. |
|
Suggestion: I'll merge this this evening and branch off 5.2, then you can fix up anything left to clean this up in the next two weeks until release :) |
|
🏃 |
Sebobo
force-pushed
the
feature/reduced-stylesheet
branch
from
43a1d2a
to
42b3dc6
Compare
With this change you can tell Neos to load a reduced
stylesheet for your backend module that will provide the necessary styles and resets for backend modules that use Neos styles but had issues with the old „Full“ styles and resets. This stylesheet is also only about 50% of the old one.
You can switch to the reduced stylesheet in your configuration like this:
```
Neos:
Neos:
modules:
user: # Or any other module group
submodules:
myModule:
mainStylesheet: Lite
```
With this change you can tell Neos to load a minimal
stylesheet for your backend module that will provide only the necessary styles and resets for the top bar, module navigation and footer bar.
You can switch to the minimal stylesheet in your configuration like this:
```
Neos:
Neos:
modules:
user: # Or any other module group
submodules:
myModule:
mainStylesheet: Minimal
```
Sebobo
force-pushed
the
feature/reduced-stylesheet
branch
from
42b3dc6
to
5b88578
Compare
|
@albe READY! |
|
That wasn't supposed to give you some stress 😅 Thanks a lot! |
They got lost in the style split for 5.2 in neos#2874
The old stylesheets from pre-react times override a lot of basic styles for backend modules.
This makes it hard to implement custom styles there or use our react ui components.
With this change it's possible to configure a "Lite" and a "Minimal" variant of the Neos backend stylesheet via the module configuration.
The old "Main" stylesheet variant is kept for compatibility reasons.
The "Lite" stylesheet should be used with almost all modules and will also be used for the core modules. It also provides all relevant Neos CSS variables and is about 50% smaller than the old one.
The "Minimal" stylesheet should be used for modules that bring their own styles. For example modules that use the Neos react-components library. It also provides all relevant Neos CSS variables and is about 70% smaller than the old one.
Example: