From 8701f3545d2ccd1671d197ba62b4b9103120c08d Mon Sep 17 00:00:00 2001 From: flexsurfer Date: Thu, 24 Aug 2023 14:30:47 +0200 Subject: [PATCH] [#16864] Design review: messages home (#17050) --------- Co-authored-by: Yevheniia Berdnyk Co-authored-by: Churikova Tetiana --- .../components/messages/author/style.cljs | 22 ++++---- src/quo2/components/messages/author/view.cljs | 35 +++++++----- .../chat/home/chat_list_item/style.cljs | 11 +--- .../chat/home/chat_list_item/view.cljs | 54 ++++++------------- .../contexts/quo_preview/messages/author.cljs | 5 +- .../components/switcher_cards/view.cljs | 3 +- .../critical/test_public_chat_browsing.py | 13 +++-- test/appium/views/home_view.py | 10 ++-- 8 files changed, 68 insertions(+), 85 deletions(-) diff --git a/src/quo2/components/messages/author/style.cljs b/src/quo2/components/messages/author/style.cljs index b334c149f0..b9fc5cbf36 100644 --- a/src/quo2/components/messages/author/style.cljs +++ b/src/quo2/components/messages/author/style.cljs @@ -6,22 +6,26 @@ :flex-direction :row :align-items :center}) -(def middle-dot-nickname - {:color colors/neutral-50 +(defn middle-dot-nickname + [] + {:color (colors/theme-colors colors/neutral-40 colors/neutral-50) :margin-horizontal 4}) -(def chat-key-text - {:color colors/neutral-50 +(defn chat-key-text + [] + {:color (colors/theme-colors colors/neutral-40 colors/neutral-50) :margin-left 8}) -(def middle-dot-chat-key - {:color colors/neutral-50 +(defn middle-dot-chat-key + [] + {:color (colors/theme-colors colors/neutral-40 colors/neutral-50) :margin-left 4}) (def icon-container {:margin-left 4}) (defn time-text - [ens?] - {:color colors/neutral-50 - :margin-left (if ens? 8 4)}) + [verified?] + {:color (colors/theme-colors colors/neutral-40 colors/neutral-50) + :padding-top 1 + :margin-left (if verified? 8 4)}) diff --git a/src/quo2/components/messages/author/view.cljs b/src/quo2/components/messages/author/view.cljs index 0abc042a76..135e28edf2 100644 --- a/src/quo2/components/messages/author/view.cljs +++ b/src/quo2/components/messages/author/view.cljs @@ -9,26 +9,33 @@ (def middle-dot "ยท") (defn author - [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?]}] + [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy? + muted? size] + :or {size 13}}] [rn/view {:style (merge style/container style)} [text/text - {:weight :semi-bold - :size :paragraph-2 - :number-of-lines 1 - :style {:color (colors/theme-colors colors/neutral-100 colors/white)}} + {:weight :semi-bold + :size (if (= size 15) :paragraph-1 :paragraph-2) + :number-of-lines 1 + :accessibility-label :author-primary-name + :style {:color (if muted? + colors/neutral-50 + (colors/theme-colors colors/neutral-100 colors/white))}} primary-name] (when (not (string/blank? secondary-name)) [:<> [text/text - {:size :paragraph-2 + {:size :label :number-of-lines 1 - :style style/middle-dot-nickname} + :style (style/middle-dot-nickname)} middle-dot] [text/text - {:weight :medium - :size :paragraph-2 - :number-of-lines 1 - :style {:color (colors/theme-colors colors/neutral-60 colors/neutral-40)}} + {:weight :medium + :size :label + :number-of-lines 1 + :accessibility-label :author-secondary-name + :style {:padding-top 1 + :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} secondary-name]]) (when contact? [icons/icon :main-icons2/contact @@ -51,14 +58,14 @@ {:monospace true :size :label :number-of-lines 1 - :style style/chat-key-text} + :style (style/chat-key-text)} short-chat-key]) - (when (and (not verified?) time-str) + (when (and (not verified?) time-str short-chat-key) [text/text {:monospace true :size :label :number-of-lines 1 - :style style/middle-dot-chat-key} + :style (style/middle-dot-chat-key)} middle-dot]) (when time-str [text/text diff --git a/src/status_im2/contexts/chat/home/chat_list_item/style.cljs b/src/status_im2/contexts/chat/home/chat_list_item/style.cljs index 3985cab9aa..10ecd75dfe 100644 --- a/src/status_im2/contexts/chat/home/chat_list_item/style.cljs +++ b/src/status_im2/contexts/chat/home/chat_list_item/style.cljs @@ -3,22 +3,13 @@ (defn container [] - {:margin-top 8 - :margin-horizontal 8 + {:margin-horizontal 8 :padding-vertical 8 :padding-horizontal 12 :border-radius 12 :flex-direction :row :align-items :center}) -(defn timestamp - [muted?] - {:color (if muted? - colors/neutral-50 - (colors/theme-colors colors/neutral-50 colors/neutral-40)) - :margin-top 3 - :margin-left 8}) - (def chat-data-container {:flex 1 :margin-left 8 diff --git a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs index bb9671afd7..3636da13c5 100644 --- a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs +++ b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs @@ -167,36 +167,6 @@ :accessibility-label :chat-message-text} preview-text])) - -(defn verified-or-contact-icon - [{:keys [ens-verified added?]}] - (if ens-verified - [rn/view {:style {:margin-left 5 :margin-top 4}} - [quo/icon :i/verified - {:no-color true - :size 12 - :color (colors/theme-colors colors/success-50 colors/success-60)}]] - (when added? - [rn/view {:style {:margin-left 5 :margin-top 4}} - [quo/icon :i/contact - {:no-color true - :size 12 - :color (colors/theme-colors colors/primary-50 colors/primary-60)}]]))) - -(defn name-view - [display-name contact timestamp muted?] - [rn/view {:style {:flex-direction :row}} - [quo/text - {:weight :semi-bold - :accessibility-label :chat-name-text - :style {:color (when muted? colors/neutral-50)}} - display-name] - [verified-or-contact-icon contact] - [quo/text - {:size :label - :style (style/timestamp muted?)} - (datetime/to-short-str timestamp)]]) - (defn avatar-view [{:keys [contact chat-id full-name color muted?]}] (if contact ; `contact` is passed when it's not a group chat @@ -244,13 +214,14 @@ unviewed-messages-count])])) (defn chat-list-item - [{:keys [chat-id group-chat color name timestamp last-message muted] + [{:keys [chat-id group-chat color name last-message timestamp muted] :as item}] - (let [display-name (if group-chat - name - (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))) - contact (when-not group-chat - (rf/sub [:contacts/contact-by-address chat-id]))] + (let [[primary-name secondary-name] + (if group-chat + [name ""] + (rf/sub [:contacts/contact-two-names-by-identity chat-id])) + {:keys [ens-verified added?] :as contact} (when-not group-chat + (rf/sub [:contacts/contact-by-address chat-id]))] [rn/touchable-opacity {:style (style/container) :on-press (open-chat chat-id) @@ -259,10 +230,17 @@ [avatar-view {:contact contact :chat-id chat-id - :full-name display-name + :full-name primary-name :color color :muted? muted}] [rn/view {:style style/chat-data-container} - [name-view display-name contact timestamp muted] + [quo/author + {:primary-name primary-name + :secondary-name secondary-name + :size 15 + :verified? ens-verified + :contact? added? + :muted? muted + :time-str (datetime/to-short-str timestamp)}] [last-message-preview group-chat last-message muted]] [notification item]])) diff --git a/src/status_im2/contexts/quo_preview/messages/author.cljs b/src/status_im2/contexts/quo_preview/messages/author.cljs index 84c9c65d44..28f8b9d637 100644 --- a/src/status_im2/contexts/quo_preview/messages/author.cljs +++ b/src/status_im2/contexts/quo_preview/messages/author.cljs @@ -4,8 +4,7 @@ [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] - [status-im2.contexts.quo-preview.preview :as preview] - [utils.address :as address])) + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor [{:label "Primary name" @@ -36,8 +35,6 @@ [] (let [state (reagent/atom {:primary-name "Alisher Yakupov" :seconadary-name "" - :short-chat-key (address/get-shortened-compressed-key - "zQ3ssgRy5TtB47MMiMKMKaGyaawkCgMqqbrnAUYrZJ1sgt5N") :time-str "09:30" :contact? false :verified? false diff --git a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs index 05b1b00e71..f335244e6f 100644 --- a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs @@ -101,8 +101,7 @@ [rn/view {:style style/notification-container} (if (= notification-indicator :counter) [quo/counter - {:outline false - :customization-color customization-color} + {:customization-color customization-color} counter-label] [rn/view {:style (style/unread-dot customization-color)}])]) diff --git a/test/appium/tests/critical/test_public_chat_browsing.py b/test/appium/tests/critical/test_public_chat_browsing.py index 3a0afeb78d..eb86d37f8b 100644 --- a/test/appium/tests/critical/test_public_chat_browsing.py +++ b/test/appium/tests/critical/test_public_chat_browsing.py @@ -398,7 +398,7 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase): expected_time.strftime('%H:%M'), "today" if current_time.hour < 23 else "tomorrow" ) - self.home.get_chat(self.community_name).long_press_element() + self.home.get_chat(self.community_name, community=True).long_press_element() if not self.home.element_by_text(expected_text).is_element_displayed(): self.errors.append("Text '%s' is not shown for muted community" % expected_text) self.home.click_system_back_button() @@ -429,7 +429,6 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase): if not self.home.element_by_text(expected_text).is_element_displayed(): self.errors.append("Text '%s' is not shown for a muted community channel" % expected_text) self.home.click_system_back_button() - self.home.navigate_back_to_home_view() self.home.communities_tab.click() self.home.get_chat(self.community_name, community=True).long_press_element() @@ -913,8 +912,8 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase): self.errors.append("Messages from blocked user is not cleared in public chat ") self.chat_1.navigate_back_to_home_view() self.home_1.chats_tab.click() - if self.home_1.element_by_text(self.username_2).is_element_displayed(): - self.errors.append("1-1 chat from blocked user is not removed!") + if not self.home_1.element_by_translation_id( "no-messages").is_element_displayed(): + self.errors.append("1-1 chat from blocked user is not removed and messages home is not empty!") self.chat_1.toggle_airplane_mode() # workaround for app closed after airplane mode @@ -929,7 +928,10 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase): self.chat_1.just_fyi('Check that new messages from blocked user are not delivered') self.chat_1.toggle_airplane_mode() - self.home_1.jump_to_card_by_text('# %s' % self.channel_name) + # self.home_1.jump_to_card_by_text('# %s' % self.channel_name) + self.home_1.communities_tab.click() + self.home_1.get_chat(self.community_name, community=True).click() + self.home_1.get_chat(self.channel_name, community_channel=True).click() for message in message_to_disappear, message_blocked: if self.chat_1.chat_element_by_text(message).is_element_displayed(30): self.errors.append( @@ -977,6 +979,7 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase): if unblocked: self.home_2.just_fyi("Check message in 1-1 chat after unblock") + self.home_2.chats_tab.click() self.home_2.get_chat(self.username_1).click() self.chat_2.send_message(message_unblocked) try: diff --git a/test/appium/views/home_view.py b/test/appium/views/home_view.py index 831df0955c..54cfed156f 100644 --- a/test/appium/views/home_view.py +++ b/test/appium/views/home_view.py @@ -33,14 +33,18 @@ class ChatElement(SilentButton): self.username = username_part self.community = community self.community_channel = community_channel - if self.community_channel is True: + if self.community_channel: super().__init__( driver, xpath="//*[@content-desc='chat-name-text']//*[starts-with(@text,'# %s')]/../.." % username_part) - else: + elif community: super().__init__( driver, xpath="//*[@content-desc='chat-name-text'][starts-with(@text,'%s')]/.." % username_part) + else: + super().__init__( + driver, + xpath="//*[@content-desc='author-primary-name'][starts-with(@text,'%s')]/.." % username_part) def navigate(self): if self.community: @@ -523,7 +527,7 @@ class HomeView(BaseView): def mute_chat_long_press(self, chat_name, mute_period="mute-till-unmute", community=False, community_channel=False): self.driver.info("Muting chat with %s" % chat_name) - self.get_chat(username=chat_name, community_channel=community_channel).long_press_element() + self.get_chat(username=chat_name, community=community, community_channel=community_channel).long_press_element() if community: self.mute_community_button.click() elif community_channel: