WYSIWYG editor icons not displaying

[jhdrn]

The icons for the WYSIWYG editor is not showing up. Trumbowyg tries to load it's icons from /OrchardCore.Resources/Scripts//ui/icons.svg which results in a 404 Not found. When the double slash in the path is replaced with a single slash, the file is served correctly.

This seems to be an issue with Trumbowyg and I created a pull request Alex-D/Trumbowyg#701 with a fix.

In the meantime I guess the SVG path could be set manually according to the docs: https://alex-d.github.io/Trumbowyg/documentation/#svg-icons.

[jhdrn]

The Trumbowyg pull request was accepted so I guess we'll have to wait for a new release and update the dependency.

[agriffard]

I tested and even if the path is //ui/icons.svg, this is working for me.

[jtkech]

I could repro.

While in dev mode we still serve static files from physical locations, otherwise we use a custom file provider, so i could repro by starting the app from the command line.

I think it is easy to fix, just replace // with /, just need to do be sure if it's normal to allow this but seems to be allowed by the physical file provider, or maybe at a lower lever by the file system.

No time right now, i will search on this this night and then fix it.

[sebastienros]

In the same topic, the visibility toggle for the connection string is broken since a recent update of BS.

[agriffard]

The connection string visibility toggle works for me on the setup or the tenant creation in admin.

[jtkech]

The visibility toggle also works for me when doing a setup in debug mode or through the command line.

[sebastienros]

CAn you share a screenshot of this toggle? It was ugly on my machine. Maybe I need to refresh the css files, but I can't start OC anymore ;/

[jtkech]

• Before toggling

• After toggling

[sebastienros]

Sure it works, but it was more beautiful. And the icon gave some UI hint about the state.

[jtkech]

Ah okay, i don't remember well how it was.
First i don't see any network issue.
Need to think about this.

[sebastienros]

Here it is : https://www.youtube.com/watch?v=HeDjv3blBjQ&feature=youtu.be&list=PL1rZQsJPBU2StolNg0aqvQswETPcYnNKL&t=2026

[jtkech]

Ah okay

gave some UI hint about the state

You mean not the same icon if showed or hidden

Before installing node modules and run gulp tasks, did you try to update static files by running gulp?

[jtkech]

What i see is that we replaced tether.js with popper.js. Need to see what they do

[jtkech]

Too lazy to install things to use gulp, maybe tomorrow.
But maybe we need the help of @agriffard if he has time.

That said, i saw this on the bootstrap repo where they say

We've dropped .input-group-addon and .input-group-btn for two new classes, .input-group-prepend and .input-group-append

And the toggle button use the input-group-addon class. So, maybe just use one of the 2 new classes .input-group-prepend or .input-group-append.

[jtkech]

@sebastienros

• Changed the class with input-group-append and used a <button> with the fa icon.

• Didn't find where the fa icon was swithched to show the state, maybe through bootstrap.

• So, in the script at the end of the setup Index.cshtml (no need to use gulp) i just switched the fa icon class at the same place we swith the input type attribute between password and text.