Quill Bubble Theme Issue

[RalfBarkow]

Context of this issue is https://forum.dmx.systems/t/dmx-5-0-beta-2-released/37/3

at the moment you can upload and embed images via the richtext editor. This works in all HTML fields, e.g. in a Note topic.

In dm5-detail-panel, bubble theme of Quill, the toolbar is hidden behind the Note view if Text is only 1 line. The follwing image shows Devtools layout view after adding some lines to the Text.

A simple solution might be to add some bottom padding.

BTW: How could one change the Quill theme to Snow?

[jri]

This is a known issue, and to my knowledge there is no simple solution. See the discussion at https://git.dmx.systems/dmx-platform/dmx-platform/issues/218

The problem is that in DMX the Quill toolbar is part of the scrollable detail panel content, so outside the scroll area it is clipped.

Workaround: when the toolbar is clipped just scroll it into view.

BTW: How could one change the Quill theme to Snow?

In the context of DMX you can change the Quill theme (not tested) here: https://git.dmx.systems/dmx-platform/dmx-platform/blob/master/modules/dmx-webclient/src/main/js/store/webclient.js#L30
But you have to build DMX then (resp. run it in dev mode). Tell me if you need more info.

[RalfBarkow]

Thanks Jörg! Changed Quill Theme to Snow:

[jri]

Cool! Tell me if you need any further help.

[RalfBarkow]

Jörg, I think we might have to take a closer look at this again later.

If you Click Save:

you will see Write and Preview icons on the right.

Click Write icon:

and you get 2 * Snow ... :-(
But I would say, this is a minor issue compared to the advantages of changing to Swow theme.
We could fix Write and Preview later.

[RalfBarkow]

Unfortunately every click on Edit adds another Quill toolbar.

[RalfBarkow]

Like to share a statement of Jörg (and close this issue):

A basic UI concept of DMX is that the UI disappears as far as possible. This means that ideally the screen only displays content, no controls. Content is the reason why the user sits in front of the screen, controls are a necessary evil. Evil because the screen space is by far the most limited resource ever.
Therefore DMX uses the "Bubble" theme.

[jri]

@RalfBarkow thank you for the good translation and sharing that statement!

Regarding the clipped toolbar: I tend not to apply additional padding as it would create unwanted empty space when the toolbar is not visible.

Workaround: when the toolbar is clipped just scroll it into view.

Possibly here lies a solution: do that scrolling programmatically. That is every time the toolbar appears check if it fits viewport, and if not scroll the content area accordingly.

[RalfBarkow]

@jri Sounds good, but I'm afraid this exceeds my JS knowledge.
Found Element.scrollIntoView() @ https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Does that help?

[RalfBarkow]

• HTML DOM scrollIntoView Method
• Try it Yourself >> Tryit Editor v3.6

[jri]

OK, I'll work on that soon.
Thanks for the links!

[jri]

I did some research and tried various things, but no success. In order to continue I'd need support from Quill community (which unfortunately is not very active since a while). I've filed an issue: slab/quill#2859

[RalfBarkow]

@jri made a pen that demonstrates the use of vue-quill-minimum:
https://codepen.io/jri/pen/ZEYYNMZ

Codepen is great for experimenting. You can easily change code and try it out with the Run button. This should make it easy for you to switch from bubble to snow.