Missing padding between Save/Cancel buttons

[zopyx]

There are various places in the UI where Save and Cancel buttons have no visual separation. Here: schema editor Plone 6.0.0b1 ![Uploading Bildschirmfoto 2022-08-09 um 20.45.38.png…]()

[davisagli]

@zopyx image also missing here. You have to wait for the uploading to finish before you submit the issue.

[zopyx]

Stupid Github

[jensens]

still valid

[rohnsha0]

@zopyx can you please specify the areas where it still appears?

[jensens]

• login as manager at at https://classic.demo.plone.org
• go to https://classic.demo.plone.org/dexterity-types/File/@@fields
• click on one of the settings buttons
• modal opens
• the problem as described above is visible in the modal lower right corner

Button colors are wrong in the whole schema editor:

• everything with Add .... should be green.
• everything with Save or Edit should be blue

[rohnsha0]

Got it... Working on it

[rohnsha0]

I am clueless about where the code for this form are?! or the layout in general?! it would be a great help!

[jensens]

I think it should be in here https://github.com/plone/plone.schemaeditor

[stevepiercy]

As far as colors, I see in the _root.scss the following.

  --bs-primary: #007bb1;
  --bs-secondary: #6c757d;
  --bs-success: #198754;

And here's the relevant markup.

<button type="submit" id="form-buttons-save" name="form.buttons.save" class="btn btn-secondary submit-widget button-field" value="Save">Save</button><button type="submit" id="form-buttons-cancel" name="form.buttons.cancel" class="btn btn-secondary submit-widget button-field" value="Cancel">Cancel</button>

Note that they both have the btn-secondary class. Changing the former to btn-primary yields the desired color.

For the spacing, it appears that if you insert any whitespace, then it looks fine.

However I don't think that plone.schemaeditor is the correct repo, as it appears to apply for fields and not buttons, according to this search.

https://github.com/search?q=repo%3Aplone%2Fplone.schemaeditor%20save&type=code.

Maybe this search is helpful?

https://github.com/search?q=org%3Aplone+%22form.buttons.save%22+language%3Axml&type=code

[rohnsha0]

I think adding mb-1 class to div will do the job...

earlier:- https://github.com/plone/plone.app.mosaic/blob/e0494cc6272a69cf53b00dbb22593bbb6c14d2d2/src/plone/app/mosaic/browser/templates/layouts-editor.pt#L128-L139

suggested change:-

          <div class="formControls mb-1">
            <button class="btn btn-primary"
                    name="form.buttons.Save"
                    type="submit"
                    i18n:translate=""
                    >Save</button>
            <button class="btn btn-secondary"
                    name="form.buttons.Cancel"
                    type="submit"
                    i18n:translate=""
            >Cancel</button>
          </div>

[stevepiercy]

@rohnsha0 try it out. I couldn't verify that this is the correct file because the class attribute does not match: https://github.com/plone/plone.app.mosaic/blob/e0494cc6272a69cf53b00dbb22593bbb6c14d2d2/src/plone/app/mosaic/browser/templates/layouts-editor.pt#L129.

[petschki]

First things first: this has nothing to do with mosaic 😉

Regarding coloring of the "primary" button: this got fixed in Plone 6.1 (see https://github.com/plone/plone.app.z3cform/blob/master/plone/app/z3cform/widgets/submit.py#L11) for the "save" and "add" form actions. If you have custom actions, you need to add the CSS class "btn-primary" for your submit widget on your own (either in the template or in updateWidgets method)

Regarding margin: me-1 (https://getbootstrap.com/docs/5.3/utilities/spacing/#margin-and-padding)

[stevepiercy]

@petschki if us old farts don't know where to find the source code, that's a documentation problem. We were able to narrow it down to "not Volto, and probably something in Classic UI". 😝 That said, we do have Contribute to Plone > Contribute to Plone 6 core > Edit packages.

I will change the second sentence to "If you do not know, you can open an issue in the Plone GitHub repository for Products.CMFPlone or ask in the Plone Community Forum. You can also try searching for various strings in the code at the GitHub organization level."

But is there anything more specific that we can add? For example, "For user interface issues with Classic UI, the repositories to check for source code include plone.app.z3cform, , ." This is institutional knowledge that I want to get into the docs.

We could also list the package names that comprise Classic UI for both Plone 6.0 and 6.1. I know there's a huge push to separate them for Plone 7. Thank you!

[petschki]

We agreed on reporting issues to CMFPlone when someone doesn't exactly know where things go wrong in Classic-UI. And yes, we're working successively on separating Classic-UI only code from the core packages. For Plone 6.x the list of packages with Classic-UI code would be too long. It could be interesting for the documentation link above, that the coredev buildout uses the collective.recipe.omelette buildout-part which symlinks all used python eggs in the folder parts/packages as a folderish structure. so you can try to search inside these folders.

But this issue here goes beyond searching for HTML snippets inside packages, because it needs knowledge about how forms are generated in Plone with z3c.form and how Plone does customizations to form widgets with plone.app.z3cform. And there's already documentation about this in https://6.docs.plone.org/backend/widgets.html and https://6.docs.plone.org/classic-ui/forms.html

So to fix this issue, plone.schemaeditor has to update its action widget rendering to add the needed css classes like plone.app.z3cform does.

[stevepiercy]

PR added for docs: https://github.com/plone/documentation/pull/1776