🧈 Transparent modal support 🧈 #15268

flexsurfer · 2023-03-06T10:22:09Z

on ios, on Android not relly :)

Screen.Recording.2023-03-06.at.11.19.27.mov

ilmotta · 2023-03-06T10:25:48Z

src/status_im2/contexts/activity_center/events.cljs

-                                                              :blur-type   :dark}}]}]})
+  [{:keys [db] :as cofx} {:keys [filter-type filter-status]}]
+  (rf/merge cofx
+            {:db (cond-> (dissoc db :popover/popover)


You can remove the dissoc call here

status-im-auto · 2023-03-06T10:27:01Z

Jenkins Builds

Click to see older builds (34)

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	`824a320`	#1	2023-03-06 10:27:00	~4 min	`tests`	📄`log`

✔️	`983914d`	#2	2023-03-06 10:31:36	~4 min	`tests`	📄`log`
✔️	`983914d`	#2	2023-03-06 10:35:17	~8 min	`android`	🤖`apk` 📲
✔️	`983914d`	#2	2023-03-06 10:35:27	~8 min	`android-e2e`	🤖`apk` 📲
✔️	`983914d`	#2	2023-03-06 10:36:11	~8 min	`ios`	📱`ipa` 📲

❌	`5041944`	#3	2023-03-06 12:06:50	~3 min	`tests`	📄`log`
✔️	`5041944`	#3	2023-03-06 12:11:23	~7 min	`android`	🤖`apk` 📲
✔️	`5041944`	#3	2023-03-06 12:11:27	~7 min	`android-e2e`	🤖`apk` 📲
✔️	`5041944`	#3	2023-03-06 12:11:47	~8 min	`ios`	📱`ipa` 📲

❌	`37c7294`	#4	2023-03-06 13:27:25	~3 min	`tests`	📄`log`
✔️	`37c7294`	#4	2023-03-06 13:30:57	~7 min	`ios`	📱`ipa` 📲
✔️	`37c7294`	#4	2023-03-06 13:31:25	~7 min	`android-e2e`	🤖`apk` 📲
✔️	`37c7294`	#4	2023-03-06 13:31:55	~8 min	`android`	🤖`apk` 📲

❌	`64de178`	#5	2023-03-06 14:07:36	~12 sec	`android`	📄`log`
❌	`64de178`	#5	2023-03-06 14:07:37	~13 sec	`ios`	📄`log`
❌	`64de178`	#5	2023-03-06 14:07:47	~23 sec	`android-e2e`	📄`log`
❌	`64de178`	#5	2023-03-06 14:07:54	~30 sec	`tests`	📄`log`

✔️	`f6602fa`	#6	2023-03-06 14:17:34	~4 min	`tests`	📄`log`
✔️	`f6602fa`	#6	2023-03-06 14:21:37	~8 min	`android`	🤖`apk` 📲
✔️	`f6602fa`	#6	2023-03-06 14:21:39	~8 min	`android-e2e`	🤖`apk` 📲
✔️	`f6602fa`	#6	2023-03-06 14:21:46	~8 min	`ios`	📱`ipa` 📲

❌	`23ae48f`	#8	2023-03-06 14:55:30	~3 min	`ios`	📄`log`
✔️	`23ae48f`	#8	2023-03-06 15:05:07	~13 min	`tests`	📄`log`
✔️	`23ae48f`	#8	2023-03-06 15:07:54	~15 min	`android-e2e`	🤖`apk` 📲
✔️	`23ae48f`	#8	2023-03-06 15:08:10	~16 min	`android`	🤖`apk` 📲

✔️	`4a2881a`	#9	2023-03-06 16:05:47	~4 min	`tests`	📄`log`
✔️	`4a2881a`	#9	2023-03-06 16:09:18	~7 min	`android`	🤖`apk` 📲
✔️	`4a2881a`	#9	2023-03-06 16:09:23	~7 min	`ios`	📱`ipa` 📲
✔️	`4a2881a`	#9	2023-03-06 16:09:32	~8 min	`android-e2e`	🤖`apk` 📲

❌	`3c0e4ff`	#10	2023-03-07 09:14:57	~2 min	`tests`	📄`log`
✔️	`3c0e4ff`	#10	2023-03-07 09:20:18	~7 min	`ios`	📱`ipa` 📲
✔️	`3c0e4ff`	#10	2023-03-07 09:20:33	~8 min	`android-e2e`	🤖`apk` 📲
✔️	`3c0e4ff`	#10	2023-03-07 09:20:46	~8 min	`android`	🤖`apk` 📲
✔️	`3c0e4ff`	#11	2023-03-07 09:22:27	~4 min	`tests`	📄`log`

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	`c066f79`	#12	2023-03-08 15:43:52	~4 min	`tests`	📄`log`
✔️	`c066f79`	#11	2023-03-08 15:47:33	~8 min	`android-e2e`	🤖`apk` 📲
✔️	`c066f79`	#11	2023-03-08 15:47:47	~8 min	`android`	🤖`apk` 📲
✔️	`c066f79`	#11	2023-03-08 15:48:01	~8 min	`ios`	📱`ipa` 📲

✔️	`980f3bf`	#13	2023-03-08 16:15:14	~4 min	`tests`	📄`log`
✔️	`980f3bf`	#12	2023-03-08 16:19:16	~8 min	`ios`	📱`ipa` 📲
✔️	`980f3bf`	#12	2023-03-08 16:19:36	~8 min	`android-e2e`	🤖`apk` 📲
✔️	`980f3bf`	#12	2023-03-08 16:19:54	~9 min	`android`	🤖`apk` 📲

ilmotta · 2023-03-06T10:33:29Z

Yeah, there's so much better in this PR that I'm using in my bread already 🧈 🧈

@flexsurfer, inset paddings are incorrect on Android.

ilmotta · 2023-03-06T10:35:50Z

After switching from white to dark mode and going back to the app, I see this blue screen of death.

ilmotta · 2023-03-06T10:39:11Z

Also after switching the theme, light to dark or vice-versa, the top bar text becomes unreadable.

top-bar-colors.webm

flexsurfer · 2023-03-06T10:42:26Z

thanks @ilmotta how do you switch theme? in the app or in the system?

flexsurfer · 2023-03-06T10:42:55Z

@ilmotta real device or emulator?

ilmotta · 2023-03-06T10:51:09Z

thanks @ilmotta how do you switch theme? in the app or in the system?

Always via the OS.

@ilmotta real device or emulator?

Emulator, but I can double-check a released apk. Will let you know soon

OmarBasem

Looks nice on iOS 👍
On Android, I am getting a black flicker on the background:

Screen_Recording_20230306-144155_Status.PR.mp4

Also, on Android, no notifications are rendered, as well as the empty view.
The top bar needs some padding. And please update the status bar style to light.

Lastly, I see some screen's background color is broken now, so maybe put back the wrapped-screens-style and customize it for the AC screen only. Would be good to run it through QA.

OmarBasem · 2023-03-06T10:42:54Z

src/status_im2/navigation/screens.cljs

+                 :modalPresentationStyle :overCurrentContext
+                 :layout                 {:componentBackgroundColor :transparent
+                                          :backgroundColor          :transparent}}


Hmm, I am wondering why it wasn't working..

OmarBasem · 2023-03-06T10:43:30Z

src/status_im2/navigation/view.cljs

@@ -39,8 +39,7 @@
 (defn wrapped-screen-style
  [screen-insets safe-insets]
  (merge
-   {:flex             1
-    :background-color (colors/theme-colors colors/white colors/neutral-100)}


Oh that's why

flexsurfer · 2023-03-06T10:55:53Z

yeah Android is a pita, hope will fix all issues, thanks for testing

ilmotta · 2023-03-06T11:08:29Z

yeah Android is a pita, hope will fix all issues, thanks for testing

You mean React Native is a pita ;) It should behave more similarly between platforms, but it doesn't.

@flexsurfer, tested with released apk, all issues are present as in the emulator.

flexsurfer · 2023-03-06T11:20:52Z

all issues are present as in the emulator.

That's bad news :( even a blue dead screen?

ilmotta · 2023-03-06T11:31:37Z

all issues are present as in the emulator.

That's bad news :( even a blue dead screen?

Unfortunately yes @flexsurfer, and it happens on the newest version of Android as well as on the emulator.

flexsurfer · 2023-03-06T12:04:51Z

ok @ilmotta hope it is fixed now, at least i can't replicate on the emulator anymore

ps i guess theme switch is not related to this PR, because i didn't make any related changes

flexsurfer · 2023-03-06T12:05:54Z

@OmarBasem pls take a look Android again when you have time, thanks

flexsurfer · 2023-03-06T12:06:22Z

@OmarBasem @ilmotta but please wait the latest build

flexsurfer · 2023-03-06T12:17:24Z

works perfect on my device and emulator, hope it will work for you as well @OmarBasem @ilmotta ready for testing

Parveshdhull · 2023-03-06T12:17:29Z

5041944 build, android (no theme changes)

flexsurfer · 2023-03-06T12:18:25Z

5041944 build, android (no theme changes)

oh thanks @Parveshdhull , yeah i removed color from the screen, i hate this theme changes, we should reload the app

flexsurfer · 2023-03-06T12:21:01Z

on android its very critical, we should set background color only once in the navigation settings, and never use background-color in nested views, i'll take a look how this can be fixed

Parveshdhull · 2023-03-06T12:25:35Z

ps i guess theme switch is not related to this PR, because i didn't make any related changes

Yes, looks like this status-bar issue with activity center open-close also exists in develop (only able to reproduce in dark theme)

ilmotta · 2023-03-07T13:27:49Z

@ilmotta yeah there is room for improving the screen content performance. But as far as the screen opening animation, it is much better now. Also, adding some custom layout animations would be nice of the AC screen.

About the animations, I did a try to use reanimated FlatList to do the layout animations. It should be trivial, but I faced a known bug in our current version of Reanimated and decided to park the implementation. I explained in the detail in this closed issue #14683 (comment). You might be able to find a solution though.

Please, feel free to reopen the issue if you want to try your luck on it @OmarBasem, but do take a look at my comment there and the branch I pushed.

flexsurfer · 2023-03-08T14:20:14Z

But the buttons (decline, accept, filter, also empty container) have a weird shadow.

known issue on Android Kureev/react-native-blur#511

ilmotta · 2023-03-08T14:41:07Z

But the buttons (decline, accept, filter, also empty container) have a weird shadow.

known issue on Android Kureev/react-native-blur#511

Yeah, I've faced this problem from day 1 when using react-native-blur. There are countless people reporting this kind of problem in their issues 😞

OmarBasem · 2023-03-08T14:43:47Z

But the buttons (decline, accept, filter, also empty container) have a weird shadow.

known issue on Android Kureev/react-native-blur#511

Hmm, why is it happening in the Modal Screen, but not the Modal component

ilmotta · 2023-03-08T14:48:59Z

But the buttons (decline, accept, filter, also empty container) have a weird shadow.

known issue on Android Kureev/react-native-blur#511

Hmm, why is it happening in the Modal Screen, but not the Modal component

There are many subtle conditions that make the "bleeding" happen @OmarBasem. For instance, I've experimented (or seen in status-mobile, can't remember now) views that are not affected by bleeding because of animations (probably due to the delay to appear on screen), but this is just one example.

flexsurfer · 2023-03-08T15:15:34Z

i had a different bug , and when i set overlayColor to transparent this effect was more visible, so probably it depends somehow on different parameters

flexsurfer · 2023-03-08T15:19:37Z

yes, so @OmarBasem i looked at your PR, and you have :background-color colors/neutral-80-opa-80 and color is darker and effect is not visible

flexsurfer · 2023-03-08T15:25:28Z

figma	backgorund	overlay

flexsurfer · 2023-03-08T15:26:17Z

so it only depends on color, brighter the blur color more visible bug effect

flexsurfer · 2023-03-08T15:27:12Z

:style       {:position :absolute :top 0 :left 0 :right 0 :bottom 0}
   :overlayColor colors/neutral-80-opa-80
   :blur-amount 20}

this combination look more like a figma, and bug is not so visible

OmarBasem · 2023-03-08T15:28:41Z

:style       {:position :absolute :top 0 :left 0 :right 0 :bottom 0}
   :overlayColor colors/neutral-80-opa-80
   :blur-amount 20}
this combination look more like a figma, and bug is not so visible

Cool! Make sure the blur effect is still visible tho

flexsurfer · 2023-03-08T15:35:36Z

:style       {:position :absolute :top 0 :left 0 :right 0 :bottom 0}
   :overlayColor colors/neutral-80-opa-80
   :blur-amount 20}
this combination look more like a figma, and bug is not so visible
Cool! Make sure the blur effect is still visible tho

it looks pretty similar to figma, slightly visible

flexsurfer · 2023-03-08T15:38:19Z

thanks @VladimrLitvinenko could you pls try latest build when its ready

status-im-auto · 2023-03-08T16:23:32Z

89% of end-end tests have passed

Total executed tests: 28
Failed tests: 3
Passed tests: 25

IDs of failed tests: 702855,702894,702838

Failed tests (3)

Click to expand

Rerun failed tests

Class TestCommunityMultipleDeviceMerged:

1. test_community_contact_block_unblock_offline, id: 702894
Device 1: Find `ChatElementByText` by `xpath`: `//[starts-with(@text,'I should not be in chat')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']` Device 1: Find `MemberPhoto` by `xpath`: `//[starts-with(@text,'I should not be in chat')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']//[@content-desc='user-avatar']` critical/test_public_chat_browsing.py:561: in test_community_contact_block_unblock_offline chat_element.member_photo.click() ../views/base_element.py:90: in click self.find_element().click() ../views/base_element.py:79: in find_element raise NoSuchElementException( Device 1: MemberPhoto by xpath: `//[starts-with(@text,'I should not be in chat')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']//*[@content-desc='user-avatar']` is not found on the screen Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot
2. test_community_message_send_check_timestamps_sender_username, id: 702838
Device 2: Verifying that 'hello' is under today Device 2: Looking for a message by text: hello critical/test_public_chat_browsing.py:410: in test_community_message_send_check_timestamps_sender_username channel.verify_message_is_under_today_text(message, self.errors) ../views/chat_view.py:889: in verify_message_is_under_today_text message_element.wait_for_visibility_of_element() ../views/base_element.py:134: in wait_for_visibility_of_element raise TimeoutException( Device 2: ChatElementByText by xpath:`//[starts-with(@text,'hello')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']` is not found on the screen after wait_for_visibility_of_element [[blocked by 14797]]* Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_edit_message, id: 702855
Device 1: Find `Text` by `xpath`: `//[starts-with(@text,'AFTER')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']` Device 1: Tap on found: Text `critical/chats/test_1_1_public_chats.py:1214: in test_1_1_chat_edit_message self.errors.verify_no_errors() base_test_case.py:183: in verify_no_errors pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))])) Edited message is shown for receiver with status but it should be "Edited"` [[blocked by 15166]]* Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot

Passed tests (25)

Click to expand

Class TestCommunityOneDeviceMerged:

1. test_community_navigate_to_channel_when_relaunch, id: 702846
Device sessions Device 1: Steps, video, logs
2. test_community_copy_and_paste_message_in_chat_input, id: 702742
Device sessions Device 1: Steps, video, logs

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_text_message_delete_push_disappear, id: 702733
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_1_1_chat_message_reaction, id: 702730
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
5. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
6. test_1_1_chat_pin_messages, id: 702731
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
7. test_1_1_chat_push_emoji, id: 702813
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
8. test_1_1_chat_delete_via_long_press_relogin, id: 702784
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestActivityCenterMultipleDevicePR:

1. test_activity_center_decline_contact_request, id: 702850
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_activity_center_mentions_in_community_jump_to, id: 702851
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_activity_center_cancel_outgoing_contact_request_no_pn, id: 702871
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestCommunityMultipleDeviceMerged:

1. test_community_emoji_send_copy_paste_reply, id: 702840
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_community_leave, id: 702845
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_community_unread_messages_badge, id: 702841
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
5. test_community_message_delete, id: 702839
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
6. test_community_message_edit, id: 702843
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestDeeplinkOneDeviceNewUI:

1. test_public_chat_open_using_deep_link, id: 702776
Device sessions Device 1: Steps, video, logs
2. test_deep_link_with_invalid_user_public_key_own_profile_key, id: 702774
Device sessions Device 1: Steps, video, logs
3. test_deep_link_open_user_profile, id: 702775
Device sessions Device 1: Steps, video, logs

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_pin_messages, id: 702732
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs
2. test_group_chat_join_send_text_messages_push, id: 702807
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs
3. test_group_chat_offline_pn, id: 702808
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs

VolodLytvynenko · 2023-03-09T09:18:44Z

hi @flexsurfer. Thank you for the fixes. PR is tested and ready to be merged.

flexsurfer requested review from ilmotta, Parveshdhull and OmarBasem March 6, 2023 10:22

flexsurfer self-assigned this Mar 6, 2023

flexsurfer mentioned this pull request Mar 6, 2023

feat: activity centre animations #15262

Closed

Parveshdhull approved these changes Mar 6, 2023

View reviewed changes

ilmotta reviewed Mar 6, 2023

View reviewed changes

flexsurfer changed the title ~~🧈🧈🧈 Transparent modal support 🧈🧈🧈~~ 🧈 Transparent modal support 🧈 Mar 6, 2023

OmarBasem reviewed Mar 6, 2023

View reviewed changes

OmarBasem mentioned this pull request Mar 6, 2023

Migrate Activity Centre away from Popover component #15261

Closed

transparent modal support

f0168fe

fixes

c066f79

flexsurfer force-pushed the feature/transparent-modal-support branch from 3c0e4ff to c066f79 Compare March 8, 2023 15:37

flexsurfer removed the Tested - Issues label Mar 8, 2023

review

980f3bf

OmarBasem approved these changes Mar 8, 2023

View reviewed changes

VolodLytvynenko added Tested - OK and removed request-manual-qa labels Mar 9, 2023

flexsurfer merged commit 8121257 into develop Mar 9, 2023

flexsurfer deleted the feature/transparent-modal-support branch March 9, 2023 09:37

🧈 Transparent modal support 🧈 #15268

🧈 Transparent modal support 🧈 #15268

Conversation

flexsurfer commented Mar 6, 2023 • edited Loading

ilmotta Mar 6, 2023

Choose a reason for hiding this comment

flexsurfer Mar 6, 2023

Choose a reason for hiding this comment

status-im-auto commented Mar 6, 2023 • edited Loading

Jenkins Builds

ilmotta commented Mar 6, 2023

ilmotta commented Mar 6, 2023

ilmotta commented Mar 6, 2023 • edited Loading

flexsurfer commented Mar 6, 2023

flexsurfer commented Mar 6, 2023

ilmotta commented Mar 6, 2023

OmarBasem left a comment

Choose a reason for hiding this comment

OmarBasem Mar 6, 2023

Choose a reason for hiding this comment

OmarBasem Mar 6, 2023

Choose a reason for hiding this comment

flexsurfer commented Mar 6, 2023

ilmotta commented Mar 6, 2023

flexsurfer commented Mar 6, 2023

ilmotta commented Mar 6, 2023

flexsurfer commented Mar 6, 2023

flexsurfer commented Mar 6, 2023

flexsurfer commented Mar 6, 2023

flexsurfer commented Mar 6, 2023

Parveshdhull commented Mar 6, 2023

flexsurfer commented Mar 6, 2023 • edited Loading

flexsurfer commented Mar 6, 2023

Parveshdhull commented Mar 6, 2023 • edited Loading

ilmotta commented Mar 7, 2023

flexsurfer commented Mar 8, 2023

ilmotta commented Mar 8, 2023

OmarBasem commented Mar 8, 2023

ilmotta commented Mar 8, 2023

flexsurfer commented Mar 8, 2023

flexsurfer commented Mar 8, 2023

flexsurfer commented Mar 8, 2023 • edited Loading

flexsurfer commented Mar 8, 2023

flexsurfer commented Mar 8, 2023

OmarBasem commented Mar 8, 2023

flexsurfer commented Mar 8, 2023

flexsurfer commented Mar 8, 2023

status-im-auto commented Mar 8, 2023

89% of end-end tests have passed

Failed tests (3)

Class TestCommunityMultipleDeviceMerged:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Passed tests (25)

Class TestCommunityOneDeviceMerged:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Class TestActivityCenterMultipleDevicePR:

Class TestCommunityMultipleDeviceMerged:

Class TestDeeplinkOneDeviceNewUI:

Class TestGroupChatMultipleDeviceMergedNewUI:

VolodLytvynenko commented Mar 9, 2023

flexsurfer commented Mar 6, 2023 •

edited

Loading

status-im-auto commented Mar 6, 2023 •

edited

Loading

ilmotta commented Mar 6, 2023 •

edited

Loading

flexsurfer commented Mar 6, 2023 •

edited

Loading

Parveshdhull commented Mar 6, 2023 •

edited

Loading

flexsurfer commented Mar 8, 2023 •

edited

Loading