CMS5 - TinyMCE has oversized icons

[emteknetnz]

Should be a fairly basic frontend fix that would help aesthetics a lot

CMS5

CMS4

[emteknetnz]

@purplespider thanks for your feedback on https://forum.silverstripe.org/t/announcing-silverstripe-cms-recipe-5-0-0-beta1/6410 - I've raised this new issue to resolve how TinyMCE looks.

Regarding the tooltips - they seem to work at my end, though in CMS 5 there's a delay of around a second of mouse over before they show, whereas in CMS 4 they were instant.

[purplespider]

Thanks Steve! Although, just to clarify, I wasn't really expecting any improvements from the Silverstripe side, but if there are easy tweaks that could be made, then great. The comments were more directed at TinyMCE, as it looks the same on their site.

Yeh, the old TinyMCE utilised a tooltip library, for nicer, instant tooltips, but this appears absent from the newer version, which just seems to rely on the browser displaying the basic title attribute tooltips. But again, this is on TinyMCE, not Silverstripe.

[maxime-rainville]

I ran the new HTML Editor look past our internal UX team. Their gut appraisal:

IMO I don't think this is an issue. The difference is very slight and I doubt anyone would notice. My suggestion would be to leave it vanilla and look again if we end up refreshing the UI :)

With that feedback in mind, I'm comfortable shipping CMS 5 as-is. This is the kind of things that could be fixed in a minor release.

[purplespider]

Thanks for raising it, Max. I agree it's not a massive issue, just me being picky! Will see if I can encourage change from the TinyMCE side. I'm happy for this issue to be closed.

[lekoala]

for those who find this ugly as well the simple fix is this

.tox button.tox-tbtn {
    margin: 0px 3px;
}

.tox div.tox-toolbar {
    transform: scale(0.85);
    transform-origin: 0 50%;
}

[purplespider]

Thanks @lekoala, that certainly helps quite a bit.

Before:

After:

I did raise this issue with TinyMCE, and had some correspondence from the icon designer: https://github.com/tinymce/tinymce/issues/8478

Not expecting any changes, though. The link icon is apparently an SVG bug, and I was advised there is a much nicer icon pack, but it's not free and only suitable for retina screens. 😞