Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix small UI problems with the compose reply screen #8959

Merged
merged 1 commit into from
Oct 2, 2019

Conversation

alexjg
Copy link
Contributor

@alexjg alexjg commented Sep 9, 2019

Fixes #7781

Summary

Implements the small design tweaks in the linked issue

status: ready

I've attached a screenshot of this running on a Pixel 2. I haven't tested on an iDevice.

Screenshot (10 Sep 2019 00_24_36)

@alexjg alexjg requested a review from a team as a code owner September 9, 2019 23:31
@auto-assign auto-assign bot removed the request for review from a team September 9, 2019 23:31
@status-github-bot
Copy link

Hey @alexjg, and thank you so much for making your first pull request in status-react! ❤️ Please help us make your experience better by filling out this brief questionnaire https://goo.gl/forms/uWqNcVpVz7OIopXg2

@status-github-bot
Copy link

Pull Request Checklist

  • Have you updated the documentation, if impacted (e.g. docs.status.im)?

@status-im-auto
Copy link
Member

status-im-auto commented Sep 9, 2019

Jenkins Builds

Click to see older builds (49)
Commit #️⃣ Finished (UTC) Duration Platform Result
2746b0d #1 2019-09-09 23:41:01 ~8 min ios 📄log
2746b0d #1 2019-09-09 23:45:39 ~13 min android-e2e 📄log
2746b0d #1 2019-09-09 23:48:41 ~16 min android 📄log
3fe56e4 #2 2019-09-10 23:15:31 ~9 min ios 📄log
3fe56e4 #2 2019-09-10 23:20:27 ~14 min android-e2e 📄log
3fe56e4 #2 2019-09-10 23:24:09 ~17 min android 📄log
88f971f #3 2019-09-13 11:06:57 ~9 min ios 📄log
88f971f #3 2019-09-13 11:11:17 ~14 min android-e2e 📄log
88f971f #3 2019-09-13 11:11:30 ~14 min android 📄log
✔️ 07fd799 #4 2019-09-13 15:01:59 ~9 min ios 📦ipa 📲
✔️ 07fd799 #4 2019-09-13 15:04:14 ~11 min android 📦apk 📲
✔️ 07fd799 #4 2019-09-13 15:05:36 ~13 min android-e2e 📦apk 📲
✔️ 07fd799 #1 2019-09-15 22:11:43 ~10 min ios 📦ipa 📲
✔️ 07fd799 #1 2019-09-15 22:12:18 ~11 min android 📦apk 📲
✔️ 07fd799 #1 2019-09-15 22:12:56 ~11 min android-e2e 📦apk 📲
07fd799 #1 2019-09-17 06:54:22 ~3 min windows 📄log
07fd799 #1 2019-09-17 06:56:46 ~5 min macos 📄log
07fd799 #1 2019-09-17 06:57:34 ~6 min linux 📄log
d93edcf #2 2019-09-28 12:08:00 ~38 sec android 📄log
d93edcf #2 2019-09-28 12:08:01 ~35 sec ios 📄log
d93edcf #2 2019-09-28 12:08:04 ~36 sec linux 📄log
d93edcf #2 2019-09-28 12:08:07 ~36 sec macos 📄log
d93edcf #2 2019-09-28 12:08:10 ~36 sec windows 📄log
✔️ d93edcf #2 2019-09-28 12:19:10 ~11 min android-e2e 📦apk 📲
aa7ce81 #3 2019-09-29 10:05:53 ~31 sec android 📄log
aa7ce81 #3 2019-09-29 10:05:58 ~32 sec ios 📄log
aa7ce81 #3 2019-09-29 10:06:00 ~31 sec linux 📄log
aa7ce81 #3 2019-09-29 10:06:05 ~32 sec macos 📄log
aa7ce81 #3 2019-09-29 10:06:07 ~32 sec windows 📄log
aa7ce81 #4 2019-09-29 10:06:07 ~32 sec android 📄log
aa7ce81 #4 2019-09-29 10:16:20 ~10 min android-e2e 📄log
ee8e780 #4 2019-09-29 14:56:15 ~8 min macos 📄log
✔️ ee8e780 #4 2019-09-29 14:58:42 ~11 min ios 📦ipa 📲
✔️ ee8e780 #4 2019-09-29 15:01:00 ~13 min windows 📦exe
✔️ ee8e780 #4 2019-09-29 15:01:37 ~14 min linux 📦App
✔️ ee8e780 #5 2019-09-29 15:02:44 ~15 min android 📦apk 📲
✔️ ee8e780 #5 2019-09-29 15:03:38 ~16 min android-e2e 📦apk 📲
✔️ 4a2a2db #5 2019-09-30 09:56:40 ~11 min ios 📦ipa 📲
✔️ 4a2a2db #5 2019-09-30 10:01:07 ~15 min macos 📦dmg
✔️ 4a2a2db #6 2019-09-30 10:06:38 ~21 min android-e2e 📦apk 📲
✔️ 4a2a2db #6 2019-09-30 10:08:55 ~23 min android 📦apk 📲
✔️ 4a2a2db #5 2019-09-30 10:09:42 ~23 min windows 📦exe
✔️ 4a2a2db #5 2019-09-30 10:09:48 ~24 min linux 📦App
✔️ dccdccd #6 2019-09-30 12:39:09 ~9 min ios 📦ipa 📲
dccdccd #7 2019-09-30 12:42:25 ~12 min android-e2e 📄log
✔️ dccdccd #6 2019-09-30 12:43:26 ~13 min macos 📦dmg
✔️ dccdccd #6 2019-09-30 12:43:38 ~13 min linux 📦App
dccdccd #7 2019-09-30 12:43:40 ~13 min android 📄log
✔️ dccdccd #6 2019-09-30 12:47:27 ~17 min windows 📦exe
Commit #️⃣ Finished (UTC) Duration Platform Result
bdc6152 #7 2019-10-01 21:04:36 ~2 min windows 📄log
bdc6152 #7 2019-10-01 21:04:37 ~3 min macos 📄log
bdc6152 #7 2019-10-01 21:04:47 ~3 min linux 📄log
✔️ bdc6152 #7 2019-10-01 21:11:49 ~10 min ios 📦ipa 📲
bdc6152 #8 2019-10-01 21:15:10 ~13 min android 📄log
✔️ bdc6152 #8 2019-10-01 21:16:16 ~14 min android-e2e 📦apk 📲
✔️ bdc6152 #9 2019-10-02 07:41:38 ~12 min android 📦apk 📲
✔️ 8ba3920 #8 2019-10-02 11:32:04 ~11 min ios 📦ipa 📲
✔️ 8ba3920 #9 2019-10-02 11:32:56 ~12 min android-e2e 📦apk 📲
✔️ 8ba3920 #10 2019-10-02 11:33:48 ~13 min android 📦apk 📲
✔️ 8ba3920 #8 2019-10-02 11:34:10 ~13 min macos 📦dmg
✔️ 8ba3920 #8 2019-10-02 11:34:13 ~13 min linux 📦App
✔️ 8ba3920 #8 2019-10-02 11:35:34 ~14 min windows 📦exe

@errorists
Copy link
Contributor

errorists commented Sep 10, 2019

thanks @alexjg
I'll take a more thorough look once the iOS build is ready, in the meantime judging by the attached screenshot the only issues I could find were:

• The reply icon is displayed at incorrect size (I'm guessing 20), it should be 16 by 16
• The close icon is using the incorrect asset, this is the right one. Not a huge difference, I wouldn't blame anyone for not spotting it :)
• Can we change the colour of the border at the top of the reply/chat toolbar to Light Grey, similar to how we use it elsewhere in the app?

Screenshot 2019-09-10 at 10 15 29

@alexjg
Copy link
Contributor Author

alexjg commented Sep 10, 2019

@errorists That asset looks like it's not been added to the app (that is, I can't see a close-circle asset). I can't seem to go the the master component from Figma (getting a 404). Where should I get the asset and are there any conventions I should be aware of when adding it to the iOS and Android projects?

@errorists
Copy link
Contributor

it's cool, I've exported it here. As far as I can tell, we use PNGs, at 1x,2x,3x densities and tint it to get the correct colour. Alternatively, you can try and sample the close icon located under the Browser tab. It might be that it's made with a circular grey view and 'X' icon added on top, not sure, best to ask @flexsurfer

Screenshot 2019-09-10 at 16 08 04

@flexsurfer
Copy link
Member

@alexjg
Copy link
Contributor Author

alexjg commented Sep 10, 2019

Thanks for that, I've implemented it in a similar manner. I've also fixed the top border and the reply icon size. Let me know if anything else needs doing.

Screenshot_20190910-235754

@errorists
Copy link
Contributor

looks good @alexjg !
@flexsurfer is there anything we can do to 'unstuck' the iOS build so it's ready to test?

@flexsurfer
Copy link
Member

@alexjg could you please rebase onto develop and squash commits, thanks

@alexjg
Copy link
Contributor Author

alexjg commented Sep 13, 2019

Done

@yenda
Copy link
Contributor

yenda commented Sep 13, 2019

@alexjg linter is complaining about your recent changes, you can use lein cljfmt fix to fix it.

@alexjg
Copy link
Contributor Author

alexjg commented Sep 13, 2019

@alexjg linter is complaining about your recent changes, you can use lein cljfmt fix to fix it.

Done

@statustestbot
Copy link

96% of end-end tests have passed

Total executed tests: 46
Failed tests: 2
Passed tests: 44

Failed tests (2)

Click to expand
1. test_text_message_1_1_chat

Device 1: Tap on NextButton
Device 1: Tap on MaybeLaterButton

Device 1: 'MaybeLaterButton' is not found on the screen

Device sessions

2. test_long_press_to_delete_public_chat

Device 1: Looking for a message by text: 'test message'
Device 1: Wait for ChatElementByText

Chat history is shown

Device sessions

Passed tests (44)

Click to expand
1. test_block_user_from_public_chat
Device sessions

2. test_filters_from_daap
Device sessions

3. test_copy_and_paste_messages
Device sessions

4. test_send_transaction_from_daap
Device sessions

5. test_deploy_contract_from_daap
Device sessions

6. test_open_transaction_on_etherscan
Device sessions

7. test_public_chat_messaging
Device sessions

8. test_long_press_to_delete_1_1_chat
Device sessions

9. test_password_in_logcat_sign_in
Device sessions

10. test_add_to_contacts
Device sessions

11. test_sign_typed_message
Device sessions

12. test_unread_messages_counter_1_1_chat
Device sessions

13. test_ens_in_public_chat
Device sessions

14. test_logcat_send_transaction_from_daap
Device sessions

15. test_send_message_in_group_chat
Device sessions

16. test_logcat_send_transaction_from_wallet
Device sessions

17. test_send_token_with_7_decimals
Device sessions

18. test_offline_messaging_1_1_chat
Device sessions

19. test_modify_transaction_fee_values
Device sessions

20. test_send_eth_from_wallet_to_address
Device sessions

21. test_add_account_to_multiaccount_instance
Device sessions

22. test_manage_assets
Device sessions

23. test_send_emoji
Device sessions

24. test_search_chat_on_home
Device sessions

25. test_logcat_recovering_account
Device sessions

26. test_can_add_existing_ens
Device sessions

27. test_messaging_in_different_networks
Device sessions

28. test_logcat_sign_message_from_daap
Device sessions

29. test_switch_users_and_add_new_account
Device sessions

30. test_send_stt_from_wallet
Device sessions

31. test_login_with_new_account
Device sessions

32. test_start_chat_with_ens
Device sessions

33. test_add_contact_from_public_chat
Device sessions

34. test_send_two_transactions_one_after_another_in_dapp
Device sessions

35. test_password_in_logcat_creating_account
Device sessions

36. test_backup_recovery_phrase
Device sessions

37. test_offline_status
Device sessions

38. test_open_google_com_via_open_dapp
Device sessions

39. test_unread_messages_counter_public_chat
Device sessions

40. test_sign_message_from_daap
Device sessions

41. test_user_can_remove_profile_picture
Device sessions

42. test_share_contact_code_and_wallet_address
Device sessions

43. test_refresh_button_browsing_app_webview
Device sessions

44. test_backup_recovery_phrase_warning_from_wallet
Device sessions

@flexsurfer
Copy link
Member

@errorists ios ready to test

@yenda
Copy link
Contributor

yenda commented Sep 17, 2019

@flexsurfer @errorists wasn't it tested already? can we merge?

@errorists
Copy link
Contributor

In the testing I just did, the reply icon is not displayed at all. Other than that I couldn’t find any issues

@yenda
Copy link
Contributor

yenda commented Sep 28, 2019

Hey @alexjg are you still planning on finishing this PR?
I resolved the conflict for you, but I can't commit my suggestion to fix the underscore issue because it is on your repo. Once you accept it please squash everything into one commit and push

@alexjg
Copy link
Contributor Author

alexjg commented Sep 28, 2019

@yenda yep, I've been on holiday for the past few days, hence slow replies. I'll squash once I'm home tomorrow.

@alexjg
Copy link
Contributor Author

alexjg commented Sep 29, 2019

@yenda I've squashed and pushed.

One thing I've noticed is that the recent gfycat changes mean that the address of the account you're responding to appears rather than the gfycat of it. I'm not sure if this is a bug or not and it definitely seems unrelated to the functionality implemented here but I thought I would mention it.

Everything should be hunky dory for merge now.

@churik
Copy link
Member

churik commented Sep 30, 2019

@yenda can you review it again?
I'll check briefly after and we can merge

@yenda
Copy link
Contributor

yenda commented Sep 30, 2019

@churik the code looks fine but the result isn't great because of the reply bug. I tried to fix it quickly but it is not that easy. As @alexjg mentions it comes from the username/identicons changes

@churik
Copy link
Member

churik commented Sep 30, 2019

@yenda
In this case please just ping me here when I can test it again.

@statustestbot
Copy link

89% of end-end tests have passed

Total executed tests: 47
Failed tests: 5
Passed tests: 42

Failed tests (5)

Click to expand
1. test_send_transaction_from_daap

Device 1: Wait for OkButton
Device 1: Tap on OkButton

Balance is not changed during 360 seconds, funds were not received!

Device sessions

2. test_send_token_with_7_decimals

Device 1: Wait for OkButton
Device 1: Tap on OkButton

Transaction with amount 0.0480191 is not found in list of transactions, address is f184747445c3B85CEb147DfB136067CB93d95F1D

Device sessions

3. test_modify_transaction_fee_values

Device 1: Wait for OkButton
Device 1: Tap on OkButton

Transaction with amount 0.003092516 is not found in list of transactions, address is b92496fffd668c2de08694623303456aa98cdf33

Device sessions

4. test_send_eth_from_wallet_to_address

Device 1: Wait for OkButton
Device 1: Tap on OkButton

Transaction with amount 0.003091057 is not found in list of transactions, address is 9164f86170290ba3080e37d19d1953d3c5945913

Device sessions

5. test_send_stt_from_wallet

Device 1: Wait for OkButton
Device 1: Tap on OkButton

Transaction with amount 0.003092559 is not found in list of transactions, address is f184747445c3B85CEb147DfB136067CB93d95F1D

Device sessions

Passed tests (42)

Click to expand
1. test_block_user_from_public_chat
Device sessions

2. test_filters_from_daap
Device sessions

3. test_copy_and_paste_messages
Device sessions

4. test_deploy_contract_from_daap
Device sessions

5. test_open_transaction_on_etherscan
Device sessions

6. test_public_chat_messaging
Device sessions

7. test_long_press_to_delete_1_1_chat
Device sessions

8. test_password_in_logcat_sign_in
Device sessions

9. test_text_message_1_1_chat
Device sessions

10. test_add_to_contacts
Device sessions

11. test_sign_typed_message
Device sessions

12. test_unread_messages_counter_1_1_chat
Device sessions

13. test_ens_in_public_chat
Device sessions

14. test_logcat_send_transaction_from_daap
Device sessions

15. test_send_message_in_group_chat
Device sessions

16. test_logcat_send_transaction_from_wallet
Device sessions

17. test_offline_messaging_1_1_chat
Device sessions

18. test_add_account_to_multiaccount_instance
Device sessions

19. test_manage_assets
Device sessions

20. test_long_press_to_delete_public_chat
Device sessions

21. test_send_emoji
Device sessions

22. test_search_chat_on_home
Device sessions

23. test_logcat_recovering_account
Device sessions

24. test_can_add_existing_ens
Device sessions

25. test_messaging_in_different_networks
Device sessions

26. test_logcat_backup_recovery_phrase
Device sessions

27. test_logcat_sign_message_from_daap
Device sessions

28. test_switch_users_and_add_new_account
Device sessions

29. test_login_with_new_account
Device sessions

30. test_start_chat_with_ens
Device sessions

31. test_add_contact_from_public_chat
Device sessions

32. test_send_two_transactions_one_after_another_in_dapp
Device sessions

33. test_password_in_logcat_creating_account
Device sessions

34. test_backup_recovery_phrase
Device sessions

35. test_offline_status
Device sessions

36. test_open_google_com_via_open_dapp
Device sessions

37. test_unread_messages_counter_public_chat
Device sessions

38. test_sign_message_from_daap
Device sessions

39. test_user_can_remove_profile_picture
Device sessions

40. test_share_contact_code_and_wallet_address
Device sessions

41. test_refresh_button_browsing_app_webview
Device sessions

42. test_backup_recovery_phrase_warning_from_wallet
Device sessions

@alexjg
Copy link
Contributor Author

alexjg commented Sep 30, 2019

Is there anything I can do to move this forward? Or is it a case of waiting for a fix for the identicons issue which is being worked on elsewhere? I'm happy to have a look at the identicons issue myself if no one is doing so already.

@yenda
Copy link
Contributor

yenda commented Sep 30, 2019

@alexjg can you include this small change in your PR https://github.com/status-im/status-react/pull/9076/files ? It is not the right fix because the alias will show as a username but at least it won't show a public key instead of the name

@alexjg
Copy link
Contributor Author

alexjg commented Sep 30, 2019

@yenda done

:else
[react/text {:style {:color colors/gray :font-size 12 :font-weight "400"}}
from]))
(let [additional-styles (style false)]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorry one last thing are you sure this is actually necessary? what is this argument for? I can't find anywhere where it is true, I'm wondering if we couldn't remove the whole chosen? param in these styles fns

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it doesn't seem like it's used anywhere but I wasn't completely confident of that (given my inexperience with the codebase) so I made the smallest change I could. It certainly does seem like we could remove the chosen? parameter, want me to go ahead and do that?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

@yenda yenda Oct 2, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm out this week ill let @flexsurfer decide

@alexjg
Copy link
Contributor Author

alexjg commented Oct 1, 2019

@yenda is there anything remaining to be done to get this merged? I'm keen to get it done as the gitcoin bounty attached to it expires in 2 days.

@alexjg
Copy link
Contributor Author

alexjg commented Oct 1, 2019

I've rebased from develop and the indenticon issue looks to be solved.

@churik
Copy link
Member

churik commented Oct 2, 2019

Tested on IOS 11.4.1. and Android 8 (LG V20):

  • reply screen with long messages
  • custom user pictures
  • different types of chats

From my POV can be merged.
@flexsurfer can you review it please or we need to wait @yenda approve anyway?

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
No open projects
Archived in project
Development

Successfully merging this pull request may close these issues.

Fixes to UI for composing a reply
7 participants