improve "show QR" screen

[adbenitez]

close #3358

[adbenitez]

this is how it looks, I am not sure about the UI, but making it too similar to what Signal has would probably look totally off/different from the rest of our UI elements, one thing that is noticeable is how bad/ugly the QR returned by core is, you can't scale it down too much because then the text/font "scan this to chat with X" will also be scaled down and too small, it would be better if it just returned the QR code and let the UI display the rest with proper text wrapping, etc. which is a problem in the current SVG and the reason why there is that ugly empty space at the bottom

cc @link2xt, @Hocuri, @r10s

[github-actions]

To test the changes in this pull request, install this apk:
📦 app-preview.apk

[link2xt]

This does not have a "copy link", but actually in the share menu there is a "copy" button so having a dedicated copy button probably does not make much sense.

[link2xt]

I have built it and tested it a bit (rebased on the current main so it does not remember the tab, #3363). This is already an improvement.

In the menu there is a "Deactivate QR Code" that closes the screen. Probably can be moved into the free space in the bottom of the screen now? And I think it should not close the screen, then there is also a chance to see that QR code is refreshed every time QR code is "deactivated".

[r10s]

Probably can be moved into the free space in the bottom of the screen now?

not sure, it is a less important function, also not really streamlined (name, dialog). it is not what is used by most ppl when it is about "getting in contact" it is more adding questions than helping

but actually in the share menu there is a "copy"

maybe that's good enough.

but i want to bring up a discussion that was started but not finished with @adbenitez some months ago: what about showing the invite link, at least the beginning? that would make things much clearer what to share, copy - and also how it can be used at the end. we've seen that at simplex, maybe others

[adbenitez]

but i want to bring up a discussion that was started but not finished with @adbenitez some months ago: what about showing the invite link, at least the beginning? that would make things much clearer what to share, copy - and also how it can be used at the end. we've seen that at simplex, maybe others

I sympathize with the idea but I can't come with any good UI/layout in my mind for this, and absolutely not without core first providing a clean basic QR without all the frames and text labels, so a first step could be that core adds a generic api that generates QR given string, that is needed anyways for generating proxy QRs and it could detect if it is a group or contact URL, and still put the avatar in the middle, but without frames etc

[r10s]

+1 for core generating clean QR codes. maybe that is easier as expected

• remove round border (but keep white border, this is needed for QR code to work)
• remove text below

an additional API can be done as well, but that is not needed to go forward on this issue.

still, adding a textfield with the invite code is quite independent from the QR code.

[adbenitez]

still, adding a textfield with the invite code is quite independent from the QR code.

yes, sorry I was thinking of the first idea we talk about putting the link together/inside with the QR somehow

there is some empty space now, oth maybe it is more useful than displaying half a link to put some explanation there like in the signal screenshots from the linked issue, we say people shouldn't share the links in social media etc. but we are not telling this to the users in that screen so that is why it is common to see people that think the QR is safe and that they are not exposing their email address with it (saw someone using gmail blurring the "scan this to chat with Foo (XXX@gmail.com" to hide address while sharing the QR in public without realizing the address is still inside the QR etc)

[r10s]

yeah, some text that frames the whole page:

this is your Invite Code
share it with friends or let them scan it.

the shorter the better :) the text could be followed by sth as:

(i think, btw, the button "LINK" is misleading, usually, this is an action - but what should the action "LINK" should be? i think, the button should get the "Share icon" and the text "SHARE")

[adbenitez]

(i think, btw, the button "LINK" is misleading, usually, this is an action - but what should the action "LINK" should be? i think, the button should get the "Share icon" and the text "SHARE")

@r10s this draft PR is not finished, the way it works in Signal when user clicks in "link" you get what is displayed in the second screenshot in #3358

we could do similarly and display a dialog showing the link maybe also some explanation text, and having a button then "share" and another "copy to clipboard"

[r10s]

i see, thanks for explanations. i find the wording "link" questionable on signal as well then, using a noun on one button and a verb on the next. i see that they want to keep it short, still.

but yes, i get the idea. the wording is not the most pressing question currently :)

[Hocuri]

I think we should have every button only once on the screen; in this PR,

• the "Share" button is present once in the upper right corner and once above/below the QR code (sometimes called "Link", but I prefer "Share" if this is what happens - if the user can choose whether to share or copy after clicking on the button, then "Link" is fine, as in Signal).
• the "Scan QR code" is present once as a tab and once below the QR code.

I think that this makes the UI more complex than necessary.

Also, I think we should be careful with making the QR code smaller because it may make it harder to scan it for people with bad cameras.

[adbenitez]

• the "Share" button is present once in the upper right corner and once above/below the QR code (sometimes called "Link", but I prefer "Share" if this is what happens - if the user can choose whether to share or copy after clicking on the button, then "Link" is fine, as in Signal).

I implemented the missing functionality, now when you click the "link" button you see this dialog similar to the dialog shown when clicking "link" button in Signal:

[link2xt]

"can view your username" does not make sense for Delta Chat, there are no "usernames".

[adbenitez]

"can view your username" does not make sense for Delta Chat, there are no "usernames".

I meant nick/display name, will rename to Display name and avatar maybe? they can also see your email address which is important but hard to say since we hide it from the user for chatmail

[link2xt]

Maybe "your profile" or something like this. Username is something that starts with @ and is sold at https://fragment.com/

[adbenitez]

I think that this makes the UI more complex than necessary.

I removed duplicated menu entries that are accessible now by the "link" button

[adbenitez]

Maybe "your profile"

great! did that

[github-actions]

To test the changes in this pull request, install this apk:
📦 app-preview.apk

[iequidoo]

And I think it should not close the screen, then there is also a chance to see that QR code is refreshed every time QR code is "deactivated".

Not sure, if you're in an environment where there are lots of unwanted cameras, you may want to deactivate the QR code, but not to show a new one to them. I think it's ok to keep it as is, it's not a frequent action anyway.