Replybox richtext placeholder with modified behavior

[deeplow]

The commit is fully functional. I just have some questions regarding tests.

Description

Tweaks reply box according to #594:

• placeholder It should be removed as soon as soon as textbox is active.
• added formatting to placeholder: "Compose a reply to [source name]" (with color)

Fixes #594

Test Plan

1. Login to client
2. Check the reply box has text Compose a message to [source name]
3. Click on text box and verify placeholder is cleared
4. Click outside text box and verify that the placeholder comes back
5. Log out and check appropriate behavior (placeholder with other text)

Checklist

If these changes modify code paths involving cryptography, the opening of files in VMs or network (via the RPC service) traffic, Qubes testing in the staging environment is required. For fine tuning of the graphical user interface, testing in any environment in Qubes is required. Please check as applicable:

• I have tested these changes in the appropriate Qubes environment
• I do not have an appropriate Qubes OS workstation set up (the reviewer will need to test these changes)
• These changes should not need testing in Qubes

Comments

The implementation uses a QLabel to act as a fake placeholder. Another alternative was to use the QTextEdit.setPlaceholderText(), given the constraints that:

• Reply box should not accept rich text (Reply box accepts rich text input #539) -> making it a PlainTextEdit solves it
• QTextEdit.setPlaceholderText() does NOT allow html as input
• QTextEdit.setText() allows for html but for some reason it does not work if we wanted to set it as a "placeholder" (meaning that we cannot setText as soon as the text box is created)

[sssoleileraaa]

This is looking great. I followed the test plan and it works as advertised. Looks like tests still need to be added, I would suggest looking at this test for reference on how to trigger a mocked event (for you it'll be for focus).

Since you're adding rich text formatting, it would make sense to also update the text for offline mode to include the blue and bold "Sign in" text as you see here: https://app.zeplin.io/project/5c807ea562f734bd2756b243/screen/5cd3b87518e9f734ae0218bb

The design of offline mode is still being discussed and reviewed and being tracked here so it would be sufficient for now to update the text so that:

• "You need to log in to send replies." -> "Sign in to compose or send a reply."
• "to compose or send a reply." is 18px, Montserrat-Regular, rgba(42, 49, 157, 0.6)
• "Sign in" is Montserrat-Bold, 18px, #2a319d, with letter-spacing 0.25px

[deeplow]

Since you're adding rich text formatting, it would make sense to also update the text for offline mode to include the blue and bold "Sign in" text

This has been added now, but with a few problems: (the greyed out background is not part of the commit)

problems:

• letter-spacing 0.25px not implemented: property does not exist in Qt css and also would require another label (in total two labels side-by-side) so that we ca apply the css property individually to each chunk of text
• Click on "Sign in" feature not implemented - this would probably require also two labels.

Having two labels (one for "Sign in" and the other one for the rest) will probably have problems with the localization because one needs to start where the other one ends.

I think these two problems are issues on their own and should be left for another PR @creviera

---

I'll finish the tests later

[sssoleileraaa]

letter-spacing 0.25px not implemented: property does not exist in Qt css and also would require another label (in total two labels side-by-side) so that we ca apply the css property individually to each chunk of text

See comment on how to do this here: #503 (comment) (you'll need to use setLetterSpacing which you can see an example of in various widgets in widgets.py)

I think these two problems are issues on their own and should be left for another PR @creviera

Sounds good to me. Could you please add followup issues?

[sssoleileraaa]

There is a bug in the code that I just came across where after you send a reply and click outside of the ReplyBox, the Compose a reply message no longer appears, even when you click on another source in the source list and then return back to the original source. The ReplyBox remains blank.

To get the default text to show up again you have to click into the reply box and then click out of it again.

[deeplow]

There is a bug in the code that I just came across where after you send a reply and click outside of the ReplyBox, the Compose a reply message no longer appears, even when you click on another source in the source list and then return back to the original source. The ReplyBox remains blank.

To get the default text to show up again you have to click into the reply box and then click out of it again.

Yeah, you're right. I had not thought of that. I'll add a fix shortly

[deeplow]

Cross-posting as it might be relevant here: UX pilot of offline mode is finished #593 (comment)

[sssoleileraaa]

Cross-posting as it might be relevant here: UX pilot of offline mode is finished #593 (comment)

If you decide to resolve this issue in this PR, just remember to add a "resolves [issue #]" comment

[sssoleileraaa]

There is a bug in the code that I just came across where after you send a reply and click outside of the ReplyBox, the Compose a reply message no longer appears, even when you click on another source in the source list and then return back to the original source. The ReplyBox remains blank.

To get the default text to show up again you have to click into the reply box and then click out of it again.

I made a fix for this, and added a regression test to make sure setText is called when we send a reply so that we will see the "Compose a reply" placeholder again.

I also updated the tests like I suggested in the PR comment since it was a small change.

This is ready for a review from someone other than me since I made some changes.