Color/hint placeholders when editing an entry

[Kasonnara]

Summary

GUI improvements on the placeholders

1. Add colours to recognized placeholders, allowing to ensure we have written a correct placeholder and help ) reading the full sequence.
2. Hint the user when he starts typing { with something like a dropdown suggesting frequent placeholders that match what he has already typed.
3. Hint when a valid reference placeholder links to nothing or to an empty field.
4. For the REF placeholder, a helper to select another entry to avoid the necessity to copy the target's uuid manually, and show what valid REF placeholders link to using a tooltip or by making them clickable.
5. Provide a small button at the end of any text area containing placeholders to previsualize the result.
6. To the drop down that suggests frequently used usernames, add buttons to link to the selected username instead of simply copying it.

Examples

Some example in context with random colors

And the button to generate reference instead of copying usernames:

Context

I think placeholders are a really powerful feature, especially the {REF:...} that allow linking entries that depeend on the same thing. But I often found them hard to write and hard to read when the sequence becomes longer.

Note

I know Qt, so if you want I can work on a PR for that.

[droidmonkey]

I like this idea

[xvallspl]

@Kasonnara Is that offer to write a PR still up? It would be appreciated!

[Kasonnara]

Yeah I have started something but was quite buzy last month with some urgent matters. As far as I know we finally solved those issues since this week, so I can reallocate time to the PR.

[stefan123t]

I really like the idea of syntax-coloring / command-completion for Reference fields. I just have logged #6782 before being able to find all these issues with the is:issue {REF: search term. @Kasonnara you may want to look into the feature request for some additional ideas on command completion / reference field copy in a right-click menu.

[foss1l]

Hi guys, I'm interested in getting this done too.

As Kasonnara has had no activity since his last message here, and the ticket is still open and prioritized, I've started a draft to get this feature done.

It's still too early to share any code, but I'd love to get your feedback on what I've got so far. So below are 2 screenshots (for dark & light themes) showing the following additions:

Checklist Item	Description	Status
1.	Added placeholder syntax colours	:heavy_check_mark:
2.	Added an early draft of what the popup suggestions dropdown could look like (this type of popup is modeless -- it does not steal focus while you're typing)	:clock1: Just started
3.	Added hint (in red) when a valid reference placeholder links to nothing or to an empty field	:heavy_check_mark:

The colours can be changed obviously but I found that these are working well for both dark and light themes.

Examples without bold font for placeholders:

Cheers!

[foss1l]

And this is when the URL field is empty.

Please ignore the cloned "Title" field for now, that's just me working on it.

[droidmonkey]

Damn great start! This would blend nicely with the other entry reference picker eventually.

[stefan123t]

Hi @foss1l that looks near perfect. I especially like the distinction between filled (green) and unfilled (red) reference fields. That meets all my expectations! Many thanks and thumbs up!

One note as I have been working on some accessibility reviews at work, there should be visible distinction too (i.e. filled or known fields could be underlined to signal a „Link“ metaphor, while broken / unfilled could habe curly or dotted underlines or be slanted / italics to show something odd). The URL / REF field notation also has some blue to signify general syntax detected which is conveyed by bold too. That should transport the same meaning for a colorblind person. For blind persons using screenreaders you can add non-visible class textual content which is read e.g. by a screenreader on Webpages. Though I dunno if that is possible in UI frameworks like Qt too ?

[phoerious]

The colours also need to be adjusted, it's almost unreadable.

[foss1l]

Cool thanks for the feedback, appreciated!

@stefan123t thanks I didn't think about the accessiblity part. I see that Qt does support some accessiblity features but I'm not too sure to what extent yet as I've never used it. Will give it a try, it'll be interesting!

@phoerious no problem, I'll see what I can do. In the meantime feel free to suggest a color set. I have the same set for both themes (light & dark) for now, but that can be adjusted per theme if it looks better of course.

I'll keep you posted.

[stefan123t]

@foss1l for the colors you may want to check a WCAG color contrast safe palette, which probably will give you safe colors which are discernible for people with low vision. There are also some viewers to show you a webpage in colors distorted like some color blind people would see them. It is an experience to setup your colors in html and view it through their "eyes" / filter. Anyway heads up this looks really promising!

[foss1l]

Awesome thanks @stefan123t, I will check it out, very interesting!

It's taking me some time to get the auto completion to work well (to suggest <FIELD> and <SEARCH_IN> in {REF:} placeholders for example -- see point 4), but I'm getting there. As soon as I'm done with the auto completion dropdown, I will try to come up with good color themes.

@stefan123t I have limited options to display HTML -- HTML is used instead of text to display colors (but Qt doesn't support many CSS styles) -- so curly or dotted underlines for example are not supported. Regardless I think you're right that the feedback should be improved for accessibility, so this is what I have now (didn't change the colours though):

Would love to get your feedback on this again!

If ever we decide that a custom QTextEdit (to display HTML) is not enough, I can create a custom field input, similar to the Tags list edit field, which should allow painting the widget with more options.

Cheers!

[droidmonkey]

To be a little blunt, this has made good progress but is quickly hitting the "too much effort to be worth it" phase. I do recommend scaling this back significantly. Couple thoughts:

1. Colored text elements in general are ugly and the meaning is quickly lost above two colors.
2. I only care about validity of the reference / placeholder. It should turn RED when invalid and when I hover over the field it should tell me what's wrong in the tooltip. It should NOT be colored otherwise.
3. A reference builder UI/UX is more valuable than a drop down selector. Most users don't use this feature and don't care.

[foss1l]

No problem @droidmonkey, that's exactly why I gave another feedback, just to be sure we're on the right track. Honesty is always appreciated!

I will use RED only, and dumb it down to simple auto-completion without suggesting anything for {REF} placeholder if that sounds good to you?

[droidmonkey]

Yes that works great for initial implementation. If it makes sense to expand to more options later we can, but the main point is to know when your reference/ placeholder is not valid. Upon further thought, it would probably be useful to see placeholders and references as bold when they are valid, but not colored. This would do two things: differentiate them from normal text and confirm to the user that we recognize the placeholder and confirm it is valid.