LineEdit: add clear and show-password icons

[dfaure]

cc #4518

ChangeLog: LineEdits now show a clear icon (when not empty)

My initial attempt was to implement it in lineedit-base.slint, but that's the component that scrolls horizontally when the text is long, and we certainly don't want the icon to scroll with the text, so it has to be done outside (or we need another layer of indirection, some outer component in lineedit-base).

Currently only implemented for Fluent and Material.

For fluent, I got the icon from https://fluenticons.co/outlined/

For material, I got the icon from Material Design Icons but surprisingly it doesn't have the circle around it like in Material 3 Design Kit

For cosmic, I'm confused, is it really this? https://github.com/pop-os/cosmic-icons/blob/0b2aed444daa52c65effbb8e71a8a19b0f2e4cb9/extra/scalable/actions/edit-clear.svg#L1

Hints welcome about where to look for cupertino icons too.

[tronical]

Nice! I'll let @FloVanGH chime in next week (when he's back).

The CI failures were caused by the Mise-action trying to download version of mise that's either not released yet to perhaps yanked. I've fixed that in master, so a rebase of this PR will fix that.

[FloVanGH]

Good work, I really like it.

For material, I got the icon from Material Design Icons but surprisingly it doesn't have the circle around it like in Material 3 Design Kit

For material I have used the ones from this source https://github.com/marella/material-design-icons/tree/main/svg#readme. You can use it also for the cupertino style because there is no free version of the apple ones.

For cosmic, I'm confused, is it really this? https://github.com/pop-os/cosmic-icons/blob/0b2aed444daa52c65effbb8e71a8a19b0f2e4cb9/extra/scalable/actions/edit-clear.svg#L1

Agree, this doesn't look like the right icon. Maybe this is the right one https://github.com/pop-os/cosmic-icons/blob/master/freedesktop/scalable/actions/edit-clear-symbolic.svg.

Could you also add the documentation of show-password to https://github.com/slint-ui/slint/blob/master/docs/astro/src/content/docs/reference/keyboard-input/textinput.mdx.

How we should handle the clear / password icons at the qt style @ogoffart?

But it's ok to also add this for the missing styles later in follow up PRs.

[tronical]

Here's an idea for what could be a simplification of this show password feature:

In the LineEdit we have this two-way binding:

    in property <InputType> input-type <=> base.input-type;

What if, instead, we would do something like this:

    in property <InputType> input-type;

   ...
   base := LineEditBase {
       input-type: internal-show-password ? InputType.text : root.input-type;
   }

That way no additional API in TextInput is needed and the input field acts as intended as if it was a plain text edit.

[dfaure]

Good idea. I did something similar, but without a second property for show-password, now the only property is the one in the Icon component. Let me know what you think.

[tronical]

Looks good. One minor detail I noticed is that the assignment to base.input-type = will break the existing binding, i.e. if for some reason the user decides to change the input-type on the fly, it won't work after the user clicked on the show password icon once.

[dfaure]

Right, I thought of that, but I cannot think of a UI where the type of lineedit would magically change on the fly after letting the user play with it...

However you're right, your version didn't have that problem, at the expense of a second property stored in LineEditBase for the same thing as the one stored in the Icon. Do you prefer that I change it to do that?

[tronical]

I don't have a strong opinion here, so I'm fine either way :)

[dfaure]

How we should handle the clear / password icons at the qt style @ogoffart?

I started to look into that, and using QLineEdit::setClearButtonEnabled does not work (it's a child widget, which we don't paint), so instead I think we should request the icon from the Qt style and convert it to a slint Image. That conversion code is a bit tricky; didn't get it to work yet, but I'm happy to keep trying when I have time again in a few days.

For the password icon there's no such thing in Qt so I would just use the same code and icon as in the material style for instance.

[dfaure]

For material I have used the ones from this source https://github.com/marella/material-design-icons/tree/main/svg#readme. You can use it also for the cupertino style because there is no free version of the apple ones.

Good to know, thanks.
Note that the clear icon from there doesn't have the circle around it either.

For cosmic, I'm confused, is it really this? https://github.com/pop-os/cosmic-icons/blob/0b2aed444daa52c65effbb8e71a8a19b0f2e4cb9/extra/scalable/actions/edit-clear.svg#L1

Agree, this doesn't look like the right icon. Maybe this is the right one https://github.com/pop-os/cosmic-icons/blob/master/freedesktop/scalable/actions/edit-clear-symbolic.svg.

OK. Looks like it comes from the freedesktop icon theme anyway (based on filename and appearance).

But it's ok to also add this for the missing styles later in follow up PRs.

I added cosmic and cupertino because the code is very similar, but yeah, let's do Qt separately, it looks much more involved.

[dfaure]

Followup commit for the Qt style: #8984