[Feature]: Better style button icons on "From Text" page

[afbagwell]

Feature description

I know these have gone through a few iterations, but so far this is the worst of them. The current icons are completely indecipherable. Even after using them heavily, I'm only remembering what they do based on position -- and sometimes I even screw that up.

Right now from left to right, here's my initial impression:

• book (?)
• man doing something
• Internet
• luggage (? - honestly no idea)
• lock safe (?)

Can they be replaced by something from the Bootstrap library or another UI icon library with a cleaner look and more obvious meanings? They also need a hover text on them to describe their function.

Version Platform Description

4a3ab4e

[vladmandic]

icons are not even icons, right now they are limited to whats available as unicode characters.
new ui will have actual icons when its released. in the meantime, i don't plan to spend time tweaking unicode characters.

[afbagwell]

Good to know! Thanks!

[brknsoul]

i don't plan to spend time tweaking unicode characters

I'm just wondering why they were changed in the first place. ;-)

[mariodian]

At least title="description" for each button would be nice (I can make a PR) so that you get an info on mouse over.

[vladmandic]

@mariodian hints were disabled due to error in parsing for couple of days, they are back on as of yesterday.

[mariodian]

Got it! Although, I don't see those because I'm using the kitchen-theme :(

[vladmandic]

@mariodian you should see new hints that i've published yesterday regardless of the theme. if you don't, that's pretty bad.

[mariodian]

I see it in the code in browser console but don't see it on the page itself. Also I do see hint related stuff in console.log:

[vladmandic]

375 hints were correctly set and type 2 means that it should show as box in the top right corner on the screen which appears on mouse over.

[mariodian]

It can't be visible because .tooltip-show doesn't rewrite display: none defined in .tooltip:

.tooltip {
    display: none;
}
.tooltip-show {
    opacity: 1;
}

Since it's hidden with display: none, it needs to be displayed with display: block (or you can hide it with opacity: 0 instead)

[mariodian]

After a bit of investigating, canvas-zoom plugin for whatever reason sets display: none for .tooltip which messes with your code.

[vladmandic]

amazing...why? :(

[mariodian]

They do have their own tooltip but its class is .tooltip--extension anyway so perhaps it's an old code that they don't use anymore?

Do you want me to open an issue with them or would you do it?

[vladmandic]

you can do it - why not?

[mariodian]

The issue is fixed now!

[afbagwell]

I'm running into an issue with the tooltip box being invisible and blocking clicking whatever button it's hovering over. Attached some pictures to show. This has been aggravating because I often am not completely scrolled to the top of my browser, and I click the generate button and when my attention comes back I realize nothing happened.

[vladmandic]

You can change tooltip display mode in settings.

[vladmandic]

further work is tracked under ui redesign, individual improvements in this area are not expected otherwise.