From f17f57cc5ea5367c0a811cdd4a36fa70c1923616 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Tue, 8 Nov 2022 13:01:02 +0400 Subject: [PATCH] Messages home items (#14256) * feat: messages home items --- src/quo2/components/avatars/user_avatar.cljs | 7 +- ...act_request.cljs => received_cr_item.cljs} | 17 +-- .../components/notifications/info_count.cljs | 15 +++ src/status_im/subs/chat/chats.cljs | 2 +- src/status_im/subs/ens.cljs | 2 +- .../community_overview_redesign.cljs | 2 +- .../chat/components/contact_item/test.cljs | 3 + .../chat/components/contact_item/view.cljs | 51 +++++++ .../components/message_home_item/style.cljs | 35 +++++ .../components/message_home_item/test.cljs | 3 + .../components/message_home_item/view.cljs | 124 ++++++++++++++++++ src/status_im/ui2/screens/chat/home.cljs | 117 +++++++---------- .../ui2/screens/chat/messages/message.cljs | 1 - translations/en.json | 7 +- 14 files changed, 291 insertions(+), 95 deletions(-) rename src/quo2/components/list_items/{received_contact_request.cljs => received_cr_item.cljs} (89%) create mode 100644 src/quo2/components/notifications/info_count.cljs create mode 100644 src/status_im/ui2/screens/chat/components/contact_item/test.cljs create mode 100644 src/status_im/ui2/screens/chat/components/contact_item/view.cljs create mode 100644 src/status_im/ui2/screens/chat/components/message_home_item/style.cljs create mode 100644 src/status_im/ui2/screens/chat/components/message_home_item/test.cljs create mode 100644 src/status_im/ui2/screens/chat/components/message_home_item/view.cljs diff --git a/src/quo2/components/avatars/user_avatar.cljs b/src/quo2/components/avatars/user_avatar.cljs index 09024e18df..e3f7d24760 100644 --- a/src/quo2/components/avatars/user_avatar.cljs +++ b/src/quo2/components/avatars/user_avatar.cljs @@ -4,7 +4,8 @@ [quo2.foundations.colors :as colors] [quo2.components.icon :as icons] [clojure.string :refer [upper-case split blank?]] - [quo.theme :refer [dark?]])) + [quo.theme :refer [dark?]] + [status-im.ui.components.fast-image :as fast-image])) (def sizes {:big {:outer 80 :inner 72 @@ -131,8 +132,8 @@ :no-color true}]) (if profile-picture ;; display image - [rn/image {:style (container-styling inner-dimensions outer-dimensions) - :source profile-picture}] + [fast-image/fast-image {:source {:uri profile-picture} + :style (container-styling inner-dimensions outer-dimensions)}] ;; else display initials [container inner-dimensions outer-dimensions [text/text {:weight :semi-bold diff --git a/src/quo2/components/list_items/received_contact_request.cljs b/src/quo2/components/list_items/received_cr_item.cljs similarity index 89% rename from src/quo2/components/list_items/received_contact_request.cljs rename to src/quo2/components/list_items/received_cr_item.cljs index 19eecb4ae5..e58833028c 100644 --- a/src/quo2/components/list_items/received_contact_request.cljs +++ b/src/quo2/components/list_items/received_cr_item.cljs @@ -1,4 +1,4 @@ -(ns quo2.components.list-items.received-contact-request +(ns quo2.components.list-items.received-cr-item (:require [quo.react-native :as rn] [quo2.foundations.colors :as colors] [status-im.utils.handlers :refer [evt]] @@ -10,17 +10,9 @@ [status-im.i18n.i18n :as i18n] [quo2.components.notifications.notification-dot :refer [notification-dot]])) -(defn get-display-name [chat-id no-ens-name no-nickname] - (let [name (first ( count 0) + [rn/view {:style (merge {:width 16 + :height 16 + :position :absolute + :right 22 + :border-radius 6 + :background-color (colors/theme-colors colors/primary-50 colors/primary-60)} + style)} + [rn/text {:style (merge typography/font-medium typography/label {:color colors/white :text-align :center})} count]])) diff --git a/src/status_im/subs/chat/chats.cljs b/src/status_im/subs/chat/chats.cljs index 729e6467e7..bc391486dd 100644 --- a/src/status_im/subs/chat/chats.cljs +++ b/src/status_im/subs/chat/chats.cljs @@ -410,4 +410,4 @@ :<- [:chats/current-chat-id] :<- [:chat/inputs-with-mentions] (fn [[chat-id cursor]] - (get cursor chat-id))) \ No newline at end of file + (get cursor chat-id))) diff --git a/src/status_im/subs/ens.cljs b/src/status_im/subs/ens.cljs index 33f8279da4..bfd239ec7d 100644 --- a/src/status_im/subs/ens.cljs +++ b/src/status_im/subs/ens.cljs @@ -89,4 +89,4 @@ {:names names :multiaccount multiaccount :preferred-name preferred-name - :registrations registrations})) \ No newline at end of file + :registrations registrations})) diff --git a/src/status_im/ui/screens/communities/community_overview_redesign.cljs b/src/status_im/ui/screens/communities/community_overview_redesign.cljs index 9649394653..276d78057a 100644 --- a/src/status_im/ui/screens/communities/community_overview_redesign.cljs +++ b/src/status_im/ui/screens/communities/community_overview_redesign.cljs @@ -158,7 +158,7 @@ [channel-list-component]]]) (defn overview [] - (let [community-mock (evt]] + [quo2.foundations.typography :as typography] + [quo2.components.icon :as icons] + [quo2.foundations.colors :as colors] + [quo2.components.avatars.user-avatar :as user-avatar] + [quo.react-native :as rn] + [status-im.utils.utils :refer [get-shortened-address]] + [quo.platform :as platform] + [quo2.components.markdown.text :as text] + [status-im.ui2.screens.chat.components.message-home-item.style :as style])) + +(defn open-chat [chat-id] + (>evt [:dismiss-keyboard]) + (if platform/android? + (>evt [:chat.ui/navigate-to-chat-nav2 chat-id]) + (>evt [:chat.ui/navigate-to-chat chat-id])) + (>evt [:search/home-filter-changed nil]) + (>evt [:accept-all-activity-center-notifications-from-chat chat-id])) + +(defn contact-item [item] + (let [{:keys [public-key ens-verified added? images]} item + display-name (first (evt]] + [status-im.utils.datetime :as time] + [quo2.foundations.typography :as typography] + [quo2.components.notifications.info-count :refer [info-count]] + [quo2.components.icon :as icons] + [quo2.foundations.colors :as colors] + [quo2.components.avatars.user-avatar :as user-avatar] + [quo.react-native :as rn] + [status-im.ui.screens.chat.sheets :as sheets] + [quo.platform :as platform] + [quo2.components.markdown.text :as text] + [status-im.ui2.screens.chat.components.message-home-item.style :as style])) + +(def max-subheader-length 50) + +(defn truncate-literal [literal] + (when literal + (let [size (min max-subheader-length (.-length literal))] + {:components (.substring literal 0 size) + :length size}))) + +(defn add-parsed-to-subheader [acc {:keys [type destination literal children]}] + (let [result (case type + "paragraph" + (reduce + (fn [{:keys [_ length] :as acc-paragraph} parsed-child] + (if (>= length max-subheader-length) + (reduced acc-paragraph) + (add-parsed-to-subheader acc-paragraph parsed-child))) + {:components [rn/text] + :length 0} + children) + + "mention" + {:components [rn/text (= length max-subheader-length) + (reduced acc-text) + (add-parsed-to-subheader acc-text new-text-chunk))) + {:components [rn/text {:style (merge typography/paragraph-2 typography/font-regular + {:color (colors/theme-colors colors/neutral-50 colors/neutral-40) + :width "90%"}) + :number-of-lines 1 + :ellipsize-mode :tail + :accessibility-label :chat-message-text}] + :length 0} + parsed-text)] + (:components result))) + +(defn display-name-view [display-name contact timestamp] + [rn/view {:style {:flex-direction :row}} + [text/text {:weight :semi-bold + :size :paragraph-1} + display-name] + (if (:ens-verified contact) + [rn/view {:style {:margin-left 5 :margin-top 4}} + [icons/icon :main-icons2/verified {:no-color true + :size 12 + :color (colors/theme-colors colors/success-50 colors/success-60)}]] + (when (:added? contact) + [rn/view {:style {:margin-left 5 :margin-top 4}} + [icons/icon :main-icons2/contact {:no-color true + :size 12 + :color (colors/theme-colors colors/primary-50 colors/primary-60)}]])) + [text/text {:style (style/timestamp)} + (time/to-short-str timestamp)]]) + +(defn messages-home-item [item] + (let [{:keys [chat-id color group-chat last-message timestamp name unviewed-mentions-count unviewed-messages-count]} item + display-name (if-not group-chat (first (evt [:dismiss-keyboard]) + (if platform/android? + (>evt [:chat.ui/navigate-to-chat-nav2 chat-id]) + (>evt [:chat.ui/navigate-to-chat chat-id])) + (>evt [:search/home-filter-changed nil]) + (>evt [:accept-all-activity-center-notifications-from-chat chat-id])) + :on-long-press #(>evt [:bottom-sheet/show-sheet + {:content (fn [] [sheets/actions item])}])}) + (if group-chat + [rn/view {:style (style/group-chat-icon color)} + [icons/icon :main-icons2/group {:size 16 :color colors/white-opa-70}]] + [user-avatar/user-avatar {:full-name display-name + :profile-picture photo-path + :status-indicator? true + :online? true + :size :small + :ring? false}]) + + [rn/view {:style {:margin-left 8}} + [display-name-view display-name contact timestamp] + (if (string/blank? (get-in last-message [:content :parsed-text])) + [text/text {:size :paragraph-2 + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} + (get-in last-message [:content :text])] + [render-subheader (get-in last-message [:content :parsed-text])])] + (if (> unviewed-mentions-count 0) + [info-count unviewed-mentions-count {:top 16}] + (when (> unviewed-messages-count 0) + [rn/view {:style (style/count-container)}]))])) + + diff --git a/src/status_im/ui2/screens/chat/home.cljs b/src/status_im/ui2/screens/chat/home.cljs index 2172a2dfb6..8a4ecdc481 100644 --- a/src/status_im/ui2/screens/chat/home.cljs +++ b/src/status_im/ui2/screens/chat/home.cljs @@ -8,11 +8,8 @@ [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.screens.home.styles :as styles] - [status-im.ui2.screens.chat.actions :as actions] - [status-im.ui.screens.home.views.inner-item :refer [home-list-item]] [quo.design-system.colors :as quo.colors] [quo.core :as quo] - [quo.platform :as platform] [status-im.add-new.core :as new-chat] [status-im.ui.components.search-input.view :as search-input] [status-im.add-new.db :as db] @@ -34,11 +31,14 @@ [quo2.components.buttons.button :as quo2.button] [quo2.components.tabs.tabs :as quo2.tabs] [quo2.components.community.discover-card :as discover-card] - [status-im.multiaccounts.core :as multiaccounts] [status-im.ui.components.chat-icon.screen :as chat-icon] [quo2.components.icon :as quo2.icons] [quo.components.safe-area :as safe-area] - [quo2.components.list-items.received-contact-request :as received-contact-request]) + [quo2.components.notifications.info-count :refer [info-count]] + [quo2.components.list-items.received-cr-item :refer [received-cr-item]] + [status-im.ui2.screens.chat.components.message-home-item.view :refer [messages-home-item]] + [status-im.ui2.screens.chat.components.contact-item.view :refer [contact-item]] + [clojure.string :as str]) (:require-macros [status-im.utils.views :as views])) (defn home-tooltip-view [] @@ -66,7 +66,10 @@ [rn/text {:style (merge typography/font-regular typography/paragraph-2)} (i18n/label :t/blank-messages-text)]]) (defn welcome-blank-page [] - [rn/view {:style {:flex 1 :flex-direction :row :align-items :center :justify-content :center}} + [rn/view {:style {:flex 1 + :flex-direction :row + :align-items :center + :justify-content :center}} [react/i18n-text {:style styles/welcome-blank-text :key :welcome-blank-message}]]) (defonce search-active? (reagent/atom false)) @@ -117,43 +120,6 @@ (re-frame/dispatch [:set :public-group-topic nil]) (re-frame/dispatch [:search/home-filter-changed nil]))}])]))) -(defn render-fn [{:keys [chat-id chat-type] :as home-item}] - [home-list-item - home-item - {:on-press (fn [] - (re-frame/dispatch [:dismiss-keyboard]) - (if platform/android? - (re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id]) - (re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])) - (re-frame/dispatch [:search/home-filter-changed nil]) - (re-frame/dispatch [:accept-all-activity-center-notifications-from-chat chat-id])) - :on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet - {:content (fn [] - [actions/actions - chat-type - chat-id])}])}]) - -(defn- render-contact [{:keys [public-key] :as row}] - (let [[first-name second-name] (multiaccounts/contact-two-names row true) - row (assoc row :chat-id public-key)] - - [quo/list-item - {:title first-name - :subtitle second-name - :background-color colors/neutral-5 - :on-press (fn [] - (re-frame/dispatch [:dismiss-keyboard]) - (if platform/android? - (re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 public-key]) - (re-frame/dispatch [:chat.ui/navigate-to-chat public-key])) - (re-frame/dispatch [:search/home-filter-changed nil]) - (re-frame/dispatch [:accept-all-activity-center-notifications-from-chat public-key])) - ;:on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet TODO: new UI yet to be implemented - ; {:content (fn [] - ; [sheets/actions row])}]) - :icon [chat-icon/contact-icon-contacts-tab - (multiaccounts/displayed-photo row)]}])) - (defn chat-list-key-fn [item] (or (:chat-id item) (:public-key item) (:id item))) @@ -165,7 +131,7 @@ (defn prepare-items [current-active-tab items] (if (= current-active-tab :groups) (filter #(-> % :group-chat (= true)) items) - items)) + (filter #(-> % (contains? :chat-id)) items))) (defn prepare-contacts [contacts] (let [data (atom {})] @@ -183,14 +149,14 @@ (defn find-contact-requests [notifications] (let [received-requests (atom []) - has-unread (atom false)] + has-unread? (atom false)] (doseq [i (range (count notifications))] (doseq [j (range (count (:data (nth notifications i))))] (when (= 1 (get-in (nth (:data (nth notifications i)) j) [:message :contact-request-state])) (swap! received-requests conj (nth (:data (nth notifications i)) j))) (when (= false (get-in (nth (:data (nth notifications i)) j) [:read])) - (reset! has-unread true)))) - {:received-requests @received-requests :has-unread @has-unread})) + (reset! has-unread? true)))) + {:received-requests @received-requests :has-unread? @has-unread?})) (def selected-requests-tab (reagent/atom :received)) @@ -198,10 +164,10 @@ [:f> (fn [] (let [{window-height :height} (rn/use-window-dimensions) - safe-area (safe-area/use-safe-area) - notifications ( (count requests) 0) - [contact-requests (count requests)]) + [contact-requests requests]) [list/section-list {:key-fn :title :sticky-section-headers-enabled false :sections contacts :render-section-header-fn contacts-section-header - :render-fn render-contact}]]))])) + :render-fn contact-item}]]))])) (views/defview chats-list [] (views/letsubs [loading? [:chats/loading?]] @@ -340,12 +315,7 @@ :on-press #(do (re-frame/dispatch [:mark-all-activity-center-notifications-as-read]) (if config/new-activity-center-enabled? - (re-frame/dispatch [:show-popover {:view :activity-center - :style {:margin 0} - :disable-touchable-overlay? true - :blur-view? true - :blur-view-props {:blur-amount 20 - :blur-type :dark}}]) + (re-frame/dispatch [:navigate-to :activity-center]) (re-frame/dispatch [:navigate-to :notifications-center])))} [icons/icon :main-icons/notification2 {:color (colors/theme-colors colors/neutral-100 colors/white)}]] (when (pos? notif-count) @@ -409,3 +379,4 @@ [plus-button]] [chats-list] [tabbar/tabs-counts-subscriptions]])]) + diff --git a/src/status_im/ui2/screens/chat/messages/message.cljs b/src/status_im/ui2/screens/chat/messages/message.cljs index a1811c3e14..4d54255e4b 100644 --- a/src/status_im/ui2/screens/chat/messages/message.cljs +++ b/src/status_im/ui2/screens/chat/messages/message.cljs @@ -868,4 +868,3 @@ :align-items :center :background-color colors/neutral-80-opa-5}} [rn/text {:style (merge typography/label typography/font-medium {:color (colors/theme-colors colors/neutral-100 colors/white)})} pins-count]]]))) - diff --git a/translations/en.json b/translations/en.json index a5a8623a28..e2112215dc 100644 --- a/translations/en.json +++ b/translations/en.json @@ -405,7 +405,7 @@ "other": "S" }, "datetime-today": "today", - "datetime-yesterday": "yesterday", + "datetime-yesterday": "Yesterday", "decimals": "Decimals", "decline": "Decline", "decryption-failed-content": "An error occured decrypting your data. You might need to erase your old data and generate a new account. Tap “Apply” to erase or “Cancel” to try again", @@ -1832,12 +1832,13 @@ "blank-messages-text": "Your messages will be here", "groups": "Groups", "shell-placeholder-title": "Your apps will run here", + "no-pinned-messages-desc": "This chat doesn't have any pinned messages.", + "no-pinned-messages-community-desc": "This channel doesn't have any pinned messages.", "shell-placeholder-subtitle": "Open tabs of your communities, messages,\nwallet account and browser windows", "invite-friends-to-status": "Invite friends to status", "share-invite-link": "Share an invite link", "pending-requests": "Pending requests", "received": "Received", "sent": "Sent", - "no-pinned-messages-desc": "This chat doesn't have any pinned messages.", - "no-pinned-messages-community-desc": "This channel doesn't have any pinned messages." + "and": "and" }