Fixed cluttered buttons in Theming Control Panel (Issue #212)

[rohnsha0]

as said in the issue #212

[mister-roboto]

@rohnsha0 thanks for creating this Pull Request and helping to improve Plone!

TL;DR: Finish pushing changes, pass all other checks, then paste a comment:

@jenkins-plone-org please run jobs

To ensure that these changes do not break other parts of Plone, the Plone test suite matrix needs to pass, but it takes 30-60 min. Other CI checks are usually much faster and the Plone Jenkins resources are limited, so when done pushing changes and all other checks pass either start all Jenkins PR jobs yourself, or simply add the comment above in this PR to start all the jobs automatically.

Happy hacking!

[rohnsha0]

@jenkins-plone-org please run jobs

[stevepiercy]

This PR does not resolve the issue. Please see this comment: https://github.com/plone/Products.CMFPlone/issues/3595#issuecomment-1219026687

[rohnsha0]

This PR does not resolve the issue. Please see this comment: plone/Products.CMFPlone#3595 (comment)

@stevepiercy changing the div class doesn't make any changing.... that just changes the top margin....

[rohnsha0]

LEFT: <div class="btn-group"> RIGHT: <div class="m-1">

[rohnsha0]

here's the inspector...

[rohnsha0]

After changes in this PR! @stevepiercy

[jensens]

Thanks for touching this! Idea: At the moment all are blue (primary). But by convention Upload should be green (it creates something). Test and help could be secondary. Also below buttons could be better. Deactivate could be red, clear cache yellow. All small size and a button group might look better too.

[rohnsha0]

@jensens okay... I'll try to perform changes as you suggested... But I had a question... Our PLONE control panel to date doesn't have many colors... Implementing each button with some colorful approach... would that look good?

[jensens]

@jensens okay... I'll try to perform changes as you suggested... But I had a question... Our PLONE control panel to date doesn't have many colors... Implementing each button with some colorful approach... would that look good?

We have green at least for creation, should be visible e.g. in users and groups.

[rohnsha0]

okay... Pushing soon...

[rohnsha0]

@jensens now?

[stevepiercy]

This PR does not resolve the issue. Please see this comment: plone/Products.CMFPlone#3595 (comment)

@stevepiercy changing the div class doesn't make any changing.... that just changes the top margin....

The original issue (https://github.com/plone/Products.CMFPlone/issues/3595) says:

The top 3 buttons have no paddings, the placement of the bottom buttons also needs some love.

You are focusing on the bottom buttons, and ignoring the top buttons. If you apply the change I suggested to the top buttons, it should be fine.

Your target should be to replicate the existing look and feel of the Plone 5.2 UI, which is called Classic UI in Plone 6.

Screen shot of Theming control panel on Plone 5.2 demo.

https://demo.plone.org/@@theming-controlpanel

@jensens where is the style guide for the Plone Classic UI? All those color changes to the buttons seems inconsistent to the entire Classic UI. IMO it also looks bad, like someone vomited a bag of Skittles on the buttons, and is distracting.

[rohnsha0]

I got your point @stevepiercy Implementing the suggested changes in a while!

[rohnsha0]

I too thought that v6b1's theming panel should have the same functionality as v5.2.9 But nevertheless I'll add the required buttons to v6 control panels

[stevepiercy]

Please do not add buttons, and limit changes to spacing the existing buttons, as the original issue notes.

If you would like to add functionality with new buttons, then that should be discussed either:

1. In a new and separate issue together with the Classic UI team.
2. In the Community Forum > Developer > User Interface category.
3. In Discord, #classic-ui channel.

This will save you a lot of potentially wasted effort.

[rohnsha0]

@stevepiercy I've added some buttons... and changed the button's appearance too...

[rohnsha0]

but if you say I'll limit the changes... and just push the changed appearance and your suggested div class into this PR the changed buttons look much closer to that of in v5.2.9

[rohnsha0]

@mauritsvanrees In my opinion, UPDATE, DEACTIVATE, CLEAR CACHE, DOWNLOAD in a single row would look much nicer... However, I can surely try as per your suggestion but all four buttons can be aligned in a single row... would be on more minimal side...

[mauritsvanrees]

If that fits, that would be fine too.

[rohnsha0]

If that fits, that would be fine too.

I hope this is good!

[rohnsha0]

[stevepiercy]

You did not implement the change as I directed in https://github.com/plone/Products.CMFPlone/issues/3595#issuecomment-1219026687. See line 100

[rohnsha0]

You did not implement the change as I directed in [plone/Products.CMFPlone#3595 (comment)

Actually @stevepiercy , I haven't pushed anything since our last convo... But were discussing changes in the buttons and alignment I will push in some time...

[rohnsha0]

@jenkins-plone-org please run jobs