From 56dbb77ee5089441482f3d099ba9c119eb88daf7 Mon Sep 17 00:00:00 2001 From: Ibrahem Khalil Date: Thu, 1 Jun 2023 11:21:33 +0400 Subject: [PATCH] [15660] Show who sent message reaction (#15677) --- .../images/icons2/20x20/add-reaction@2x.png | Bin 1011 -> 1045 bytes .../images/icons2/20x20/add-reaction@3x.png | Bin 1485 -> 1447 bytes src/quo2/components/reactions/reaction.cljs | 5 +- src/quo2/components/tabs/tabs.cljs | 10 +- src/status_im/chat/models/reactions.cljs | 42 +++++++- src/status_im/profile/core.cljs | 5 +- .../common/bottom_sheet/styles.cljs | 6 +- src/status_im2/common/bottom_sheet/view.cljs | 25 +++-- .../chat/messages/content/reactions/view.cljs | 90 +++++++++++++----- .../contexts/chat/messages/content/view.cljs | 76 ++++++++------- .../contexts/chat/messages/drawers/style.cljs | 24 +++++ .../contexts/chat/messages/drawers/view.cljs | 67 ++++++++++++- src/status_im2/subs/root.cljs | 1 + 13 files changed, 271 insertions(+), 80 deletions(-) create mode 100644 src/status_im2/contexts/chat/messages/drawers/style.cljs diff --git a/resources/images/icons2/20x20/add-reaction@2x.png b/resources/images/icons2/20x20/add-reaction@2x.png index 936fef266066b81f4731b082563f4546bc15959e..207c3b4e251fe7722c44f0a1deff3007f49a4104 100644 GIT binary patch delta 973 zcmV;;12X*c2bBnrR)4BVL_t(|0qs~pPTN2fed9Qbs#293)I9-|6}u+t0ccM^B51`9 zvu{Q#B17;>zw5vG-**6B{s(%C)Nl-4>PVYJfM5B-X z*;nVIiy2{J2CUn=HW8=@$N?$cESa!`qzQ;Cq(CAK7VS@#iGH1``O#Z>K|-1y(4ew2 zcthk2>cd+6;%rxSvexY#k|EBOi~{v*==#OhAd}0$V}aI?82wel1QSj%2gD*cBu7hX z`EO(`Of&OFEPsMQaspoID234{#Z-dp_Fe@6&CN>Ax498Kh(#k%r}nY_L(_>Q$V&_K zt6ZlI;2xz~*5QWmVT{-JHTzXe_Pc?MBInn8HQWJ0HOP*brm(_w)?WIPK^DfJ#Ucip z8(@ptn@B>CPYEbTOu`P35|i%8x4Gf6%4V3m3SDB_wSRe4wvU_-P23S82x39i8n{D5 zZ4$N-KDJVwrD>tH!3}aRJ@nO+yp`ouHa9gE&}y)Uo`rh?EkOaJgL?uk!AyXloCrjN z;3%5?Wmr3(MAU9!3Zmp_3I4^u070o8xMuIQdN5mAWa|h41sVG$^;xrbTDo=)eCa1y zj_XvltAD25B;0w;-u+D${9O1RUjy%qjA4_bW+p&ojiTrFpv4aaR%v>Ju_Wh2CqbnO zjL?l3C6s@1CODc0z1wBwyNUc{^Qrq3J=Sqa@pMNJE<}gnZ*mcTTykO1@f(0L7W*Qdr-} zcrXjofuE`6XgAg|CnSk8Gf|B{F28k_mJ3g4o_Tt-mX=@R=jHbcqyVQ7q&3@rlC?vp z5`UTf#mbAxSN($8m4-m^aKC(l8Ss8VA-k@>xt(KC*H* vNy#e@hWm`1{xrvZD+GhMtqaUYJb3&Edi`w_js4o>00000NkvXXu0mjfDlOAR delta 939 zcmV;c162H#2=fP!R)2^|L_t(|0qt0AQrj>PeM&-`luk$g3ru=~<_3flG(7?21ke+Z zoB%ih^agN(h7%M{kW3-JtLczphS=(^B^M_nJN`%u!|-OD$kuB8yjrbx1-#&yLtsge zve~@Hz2x=^R+Lhs5te|$1c{I&LY)9&o7A)bE$37#dN!y)oPSN!)d>osh5~5Fjomx= zJtARAX@^uuxZ^`#q6BhTuujt`Fg>PbJNB5Ygi8%E2%r@|Agf6M-Sz?Hsq3Cg*IT*9 z{olAvpSMMF1D9N83mS4hD{Mx@NO3<&G2s+TKqi6@DBL(+e?~vMbaj{jeQBQp`-pou5uo6{t?gL)|LW8L{n2jFi3>4tClRQe za~4B2$0xeooA0O1oWCB1B+DUY$>47hz~nqN?z!HfZDuY~B1K{x3=j;g8uFvrR4Go9 z^F!gb02fS@JC1i;V^?Lf73G*T{u~KNj6*hA7=Lo{Ltk+;Au>n-%TH`MunLTld@8~l zxqeL6-Jzy>joODr@=nkc9}IC(o>= zbxu8{Ue(_!DAymNwIMrl`KL5 zYJZ4(!S(6_Nt?W?*)bm@J=0)Vf}d`lit7R$Z>|h|nsLH5a~yhzI>!H9ka6 zlsX@@M0qQ0Cmg?B@K#sH%4wlMT$W%QJS6?T&3vlisn&81FkkTO@dv7+ZN$&V(`^6% N002ovPDHLkV1jDQy1oDa diff --git a/resources/images/icons2/20x20/add-reaction@3x.png b/resources/images/icons2/20x20/add-reaction@3x.png index 71d0bf4946ea2c85940a9a87909d9577c3fd703e..4ed6e3db3591bd854aa08fc8975dfb7008540384 100644 GIT binary patch delta 1378 zcmV-o1)ciM3#SW^R)0K6L_t(|0qt7LZrer_J*1?STR{B-^$V;NU8JkfUS${kfu+_h zvMaSLn#435qf0Y8qjnnQ3+(Q?X(I2uXba~Hs!w2mY=VfK+$&Pjh&%3|S)jf{5DKP^2bIbBO0_tY?GHrTeUh4Tgynhz!(BFEZJS4JXUc zCfv4vYmiVliWPUuK$f9Bq$}_pSuydPed#`RQ2?T)XMZ6gayVnbORuVX366UsgOBgsY@zSguv+!Q}=N5W+Z zj9pBp)>z3ULYZ&?VaJA%gMzV2F2mu@a5(f8MvE zq)_T%T7Lpsvp1PNloU#YjnF`h;T5@GEgGtGSklaD)^JmiNVpyDQ6*)C()KPR(P-6B zBke3E|7my+umOu#dfs*qJzUAK9I;=^x}o#5z$vVX1My4bjW!lyyfeTjtmAyw%zAxX?- zmDBZC;RapQc^RX!y`&f6`$)20nIm7d`HIM2Q{A0a_x)g>xU_2g9K9F+e1!xg4(X`E zNu^XlL*aTzUXdnyH;K^F``B&7*BCR688nj`DXsujMuqD3kcXrd9Y09Am|mnyEza9F znSb>E+-pAVae24Jg#rfkCLRI46?=q7t|XOpR$BooZXRYHR*zggOTlxNNiTR#iz+;$ zb65N^!_ds!v&aM5O$wp%d`AiesJMB+b*#urx`#;jI0~qv%(&;n$YHW4g$!F8tKV@U zln6(geQAD#h9U{v)Aae8NOV@aYewg~JAd#s!ldS-$=hf+B$T6vvPFzua!=Rm!NIZ* zs5GaQo8Ats0=kaCDE|C*`W*CBqmIfxt!T(dghw9CJ~R*!>mxJb-c#cR6rrrNqTcLF zMOKpWDgxizr)|vG5cZy`J0vuvr8u7X2fS*pA*MS9*JaFyc^qg!i*US`S%lE~dVhp9 zf$NgR3C~?!JEFaLsG`EgK{hgW6iqA?3nG>zPKL+OLF}Xc{P5fF z_6PsozA41t^;7rx0ZpItSn)5vyU+fDCbS7N{=0p1d++`}t*=vQ$F5vzi1&OBIfBUs z0zJ7bidZ^Gfm8u;hL0f+uefzQJAbrKbDPtgWe_LJ`6Dkgq*P=|Tbd@d%;kBIL_{ZT zI3^Mn3sNd@w}atcmWXBMJgqQosp1%mBpcRYQ$1%ypq#o^^mo0sG k88#t7e2Xo%*rHVU4EdA`=}xVK)Bpeg07*qoM6N<$f|n+!*#H0l delta 1417 zcmV;41$O$U3(X6VR)1niL_t(|0qt79Q`|-r{#K_mBG^QeG?@u_s4sf@dH9G$yd{sJ@ut}Wsigiq4uJ?Y>i`9QmO(hZuqZ-(J^rPb=w z{&??w`+yl{m|=z*L12ooZN~`^IO#eQrt5jGiz%T}!c6cBf`3g3w5Y2UK-#146dqmc z0meHCLS!ncVWAapYigh5%&?an= zGePurv$e8a2eJ(9DQzI!ky(%F&6W4z02N?hdhS5%xqsahR_?nuZL+lN@W6vgJy^JN zXslMXyAlbB5bF;AyjnFB31_0A+LC1y66O#vtwnJVj~b)UEcF2=T_&Z%#RGt<8Ooz@ zgaraS+rX%mXO)L`v=ly&5gr%Xgh_O>QDbNmrm&;dgbOz<36s`ra9fTLDG}z~osLyj zD0Wu1+Z>=!yzPAQ&W@k~?yHZ!(?ruPirxxGxPJ+_*#^QvLFeq)Un4x_*qNlC!^E@| zzjTD~Z2;5(OdA#&Aa% zt>DO5#J~RpaUe)&dw@#2G`+x4u2HL~4XcZnYZ*R9A%wCYEcWg~Y~s&#;_>}d@~vzw}F zS+VppUGVZic4>5V1PLwIGOtt$MW>=Ha9<*)jq9qXT71*hm@PFFX z-AA;82lB1A)1DWfBF@`CzDC9P`ovOr5gOXscmtXUe9voI_BD0Bp6Yyk&a&OUe^H72 zvtU2nl!$)M*2-VWUjGG6XcJ}x{>6LKdh$%9#660NHk#Ixi@^W%9wmawQiRsYRr87E zF2=xEgc*;m@4NIOJjy=|YsLB_Ykv`a|KAgofI*hQZ|OSDA0c!2GseV3X-mVTmVBOv za2t@@|BZPZ!;S?-W&8Q(GTBEk*Csi!9D9TrzVG=9)^~q~h~}yIB6Z28m)&Ywi>*29 zTR|gUXeasOnbzYM4Qug`+U_DVbK)iQ#~hl!OnN+9T4EYGA-j1Snd&A!&VQuqC*)JR zwD$SWPSg|Qc@!td+?R_f+ht`Ll$vYFfjq^%91^xr4!Udx%S<+{B)OF2nGKqP9B8yK z9^wqXDvo3;O&?B1JlaT9jpFoSB1yZu*{NOn@LfoBt!#og5p?}2CWy~4!wfUj3jYK8 XU`0jx|Aq4a0000> (transforms/js->clj response) + (map <-rpc) + (group-by :emoji-id))) + +(rf/defn save-emoji-reaction-details + {:events [:chat/save-emoji-reaction-details]} + [{:keys [db]} message-reactions long-pressed-emoji] + {:db (assoc db + :chat/reactions-authors + {:reaction-authors-list message-reactions + :selected-reaction long-pressed-emoji})}) + +(rf/defn clear-emoji-reaction-details + {:events [:chat/clear-emoji-reaction-author-details]} + [{:keys [db]} message-reactions] + {:db (update db dissoc :chat/reactions-authors)}) + +(rf/defn emoji-reactions-by-message-id + {:events [:chat.ui/emoji-reactions-by-message-id]} + [{:keys [db]} {:keys [message-id long-pressed-emoji]}] + {:json-rpc/call [{:method "wakuext_emojiReactionsByChatIDMessageID" + :params [(:current-chat-id db) message-id] + :js-response true + :on-error #(log/error "failed to fetch emoji reaction by message-id: " + {:message-id message-id :error %}) + :on-success #(rf/dispatch [:chat/save-emoji-reaction-details + (format-response %) long-pressed-emoji])}]}) diff --git a/src/status_im/profile/core.cljs b/src/status_im/profile/core.cljs index 37e4fa2587..902b0d3a88 100644 --- a/src/status_im/profile/core.cljs +++ b/src/status_im/profile/core.cljs @@ -89,8 +89,9 @@ {:events [:chat.ui/show-profile]} [{:keys [db]} identity ens-name] (let [my-public-key (get-in db [:multiaccount :public-key])] - (when (not= my-public-key identity) + (if (not= my-public-key identity) {:db (-> db (assoc :contacts/identity identity) (assoc :contacts/ens-name ens-name)) - :dispatch [:contacts/build-contact identity ens-name true]}))) + :dispatch [:contacts/build-contact identity ens-name true]} + {:dispatch [:navigate-to :my-profile]}))) diff --git a/src/status_im2/common/bottom_sheet/styles.cljs b/src/status_im2/common/bottom_sheet/styles.cljs index d22e5d72ba..917415b7fe 100644 --- a/src/status_im2/common/bottom_sheet/styles.cljs +++ b/src/status_im2/common/bottom_sheet/styles.cljs @@ -13,7 +13,7 @@ :margin-vertical 8}) (defn sheet - [{:keys [top bottom]} window-height override-theme shell?] + [{:keys [top bottom]} window-height override-theme padding-bottom-override shell?] {:position :absolute :max-height (- window-height top 20) :z-index 1 @@ -22,9 +22,9 @@ :right 0 :border-top-left-radius 20 :border-top-right-radius 20 - :overflow :hidden + :overflow (when shell? :hidden) :flex 1 - :padding-bottom (max 20 bottom) + :padding-bottom (or padding-bottom-override (max 20 bottom)) :background-color (if shell? :transparent (colors/theme-colors colors/white colors/neutral-90 override-theme))}) diff --git a/src/status_im2/common/bottom_sheet/view.cljs b/src/status_im2/common/bottom_sheet/view.cljs index e791a408ae..08dce17aec 100644 --- a/src/status_im2/common/bottom_sheet/view.cljs +++ b/src/status_im2/common/bottom_sheet/view.cljs @@ -13,7 +13,9 @@ (def timing-options #js {:duration duration}) (defn hide - [translate-y bg-opacity window-height] + [translate-y bg-opacity window-height on-close] + (when (fn? on-close) + (on-close)) ;; it will be better to use animation callback, but it doesn't work ;; so we have to use timeout, also we add 50ms for safety (js/setTimeout #(rf/dispatch [:bottom-sheet-hidden]) (+ duration 50)) @@ -29,7 +31,7 @@ (def gesture-values (atom {})) (defn get-sheet-gesture - [translate-y bg-opacity window-height] + [translate-y bg-opacity window-height on-close] (-> (gesture/gesture-pan) (gesture/on-start (fn [_] @@ -47,17 +49,22 @@ (fn [_] (if (< (:dy @gesture-values) 0) (show translate-y bg-opacity) - (hide translate-y bg-opacity window-height)))))) + (hide translate-y bg-opacity window-height on-close)))))) (defn view - [{:keys [hide? insets]} {:keys [content override-theme selected-item shell?]}] + [{:keys [hide? insets]} + {:keys [content override-theme selected-item padding-bottom-override on-close shell?]}] (let [{window-height :height} (rn/get-window) bg-opacity (reanimated/use-shared-value 0) translate-y (reanimated/use-shared-value window-height) - sheet-gesture (get-sheet-gesture translate-y bg-opacity window-height)] - (rn/use-effect #(if hide? (hide translate-y bg-opacity window-height) (show translate-y bg-opacity)) - [hide?]) - (hooks/use-back-handler #(do (rf/dispatch [:hide-bottom-sheet]) true)) + sheet-gesture (get-sheet-gesture translate-y bg-opacity window-height on-close)] + (rn/use-effect + #(if hide? (hide translate-y bg-opacity window-height on-close) (show translate-y bg-opacity)) + [hide?]) + (hooks/use-back-handler #(do (when (fn? on-close) + (on-close)) + (rf/dispatch [:hide-bottom-sheet]) + true)) [rn/view {:flex 1} ;; backdrop [rn/touchable-without-feedback {:on-press #(rf/dispatch [:hide-bottom-sheet])} @@ -70,7 +77,7 @@ [reanimated/view {:style (reanimated/apply-animations-to-style {:transform [{:translateY translate-y}]} - (styles/sheet insets window-height override-theme shell?))} + (styles/sheet insets window-height override-theme padding-bottom-override shell?))} (when shell? [blur/ios-view diff --git a/src/status_im2/contexts/chat/messages/content/reactions/view.cljs b/src/status_im2/contexts/chat/messages/content/reactions/view.cljs index 6e69265492..288fc301fd 100644 --- a/src/status_im2/contexts/chat/messages/content/reactions/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/reactions/view.cljs @@ -5,31 +5,69 @@ [utils.re-frame :as rf] [status-im2.contexts.chat.messages.drawers.view :as drawers])) +(defn- on-press + [own message-id emoji-id emoji-reaction-id] + (if own + (rf/dispatch [:models.reactions/send-emoji-reaction-retraction + {:message-id message-id + :emoji-id emoji-id + :emoji-reaction-id emoji-reaction-id}]) + (rf/dispatch [:models.reactions/send-emoji-reaction + {:message-id message-id + :emoji-id emoji-id}]))) + +(defn- on-long-press + [message-id emoji-id] + (rf/dispatch [:chat.ui/emoji-reactions-by-message-id + {:message-id message-id + :long-pressed-emoji emoji-id}])) + +(defn show-authors-sheet + [user-message-content reactions] + (rf/dispatch [:dismiss-keyboard]) + (rf/dispatch + [:show-bottom-sheet + {:on-close (fn [] + (rf/dispatch + [:chat/clear-emoji-reaction-author-details])) + :content (fn [] + [drawers/reaction-authors + (map :emoji-id reactions)]) + :selected-item (fn [] + user-message-content) + :padding-bottom-override 0}])) + (defn message-reactions-row - [chat-id message-id] + [{:keys [message-id chat-id]} user-message-content] (let [reactions (rf/sub [:chats/message-reactions message-id chat-id])] - (when (seq reactions) - [rn/view {:margin-left 52 :margin-bottom 12 :flex-direction :row} - (for [{:keys [own emoji-id quantity emoji-reaction-id] :as emoji-reaction} reactions] - ^{:key (str emoji-reaction)} - [rn/view {:style {:margin-right 6}} - [quo/reaction - {:emoji (get constants/reactions emoji-id) - :neutral? own - :clicks quantity - :on-press (if own - #(rf/dispatch [:models.reactions/send-emoji-reaction-retraction - {:message-id message-id - :emoji-id emoji-id - :emoji-reaction-id emoji-reaction-id}]) - #(rf/dispatch [:models.reactions/send-emoji-reaction - {:message-id message-id - :emoji-id emoji-id}])) - :accessibility-label (str "emoji-reaction-" emoji-id)}]]) - [quo/add-reaction - {:on-press (fn [] - (rf/dispatch [:dismiss-keyboard]) - (rf/dispatch - [:show-bottom-sheet - {:content (fn [] [drawers/reactions - {:chat-id chat-id :message-id message-id}])}]))}]]))) + [:<> + (when (seq reactions) + [rn/view + {:style {:margin-left 52 + :margin-bottom 12 + :flex-direction :row}} + (for [{:keys [own emoji-id quantity emoji-reaction-id] + :as emoji-reaction} reactions] + ^{:key emoji-reaction} + [rn/view {:style {:margin-right 6}} + [quo/reaction + {:emoji (get constants/reactions emoji-id) + :neutral? own + :clicks quantity + :on-press #(on-press own message-id emoji-id emoji-reaction-id) + :on-long-press (fn [] + (on-long-press message-id + emoji-id) + (show-authors-sheet user-message-content + reactions)) + :accessibility-label (str "emoji-reaction-" emoji-id)}]]) + [quo/add-reaction + {:on-press (fn [] + (rf/dispatch [:dismiss-keyboard]) + (rf/dispatch + [:show-bottom-sheet + {:content (fn [] [drawers/reactions + {:chat-id chat-id + :message-id message-id}]) + :selected-item (fn [] + user-message-content)}]))}]])])) diff --git a/src/status_im2/contexts/chat/messages/content/view.cljs b/src/status_im2/contexts/chat/messages/content/view.cljs index a35eaca3af..dca6787d40 100644 --- a/src/status_im2/contexts/chat/messages/content/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/view.cljs @@ -23,16 +23,18 @@ [status-im2.common.not-implemented :as not-implemented] [utils.datetime :as datetime] [reagent.core :as reagent] - [utils.address :as address])) + [utils.address :as address] + [react-native.gesture :as gesture])) (def delivery-state-showing-time-ms 3000) (defn avatar-container - [{:keys [content last-in-group? pinned-by quoted-message from]}] + [{:keys [content last-in-group? pinned-by quoted-message from]} message-reaction-view?] (if (or (and (seq (:response-to content)) quoted-message) last-in-group? - pinned-by) + pinned-by + message-reaction-view?) [avatar/avatar from :small] [rn/view {:padding-top 2 :width 32}])) @@ -43,8 +45,9 @@ pinned-by quoted-message from - timestamp]}] - (when (or (and (seq response-to) quoted-message) last-in-group? pinned-by) + timestamp]} + message-reaction-view?] + (when (or (and (seq response-to) quoted-message) last-in-group? pinned-by message-reaction-view?) (let [[primary-name secondary-name] (rf/sub [:contacts/contact-two-names-by-identity from]) {:keys [ens-verified added?]} (rf/sub [:contacts/contact-by-address from])] [quo/author @@ -82,7 +85,8 @@ (let [show-delivery-state? (reagent/atom false)] (fn [{:keys [content-type quoted-message content outgoing outgoing-status] :as message-data} context - keyboard-shown] + keyboard-shown + message-reaction-view?] (let [first-image (first (:album message-data)) outgoing-status (if (= content-type constants/content-type-album) (:outgoing-status first-image) @@ -91,7 +95,8 @@ (:outgoing first-image) outgoing) context (assoc context :on-long-press #(on-long-press message-data context)) - response-to (:response-to content)] + response-to (:response-to content) + height (rf/sub [:dimensions/window-height])] [rn/touchable-highlight {:accessibility-label (if (and outgoing (= outgoing-status :sending)) :message-sending @@ -115,37 +120,41 @@ [rn/view {:style {:padding-horizontal 12 :flex-direction :row}} - [avatar-container message-data] - [rn/view - {:style {:margin-left 8 - :flex 1}} - [author message-data] - (case content-type + [avatar-container message-data message-reaction-view?] + (into + (if message-reaction-view? + [gesture/scroll-view] + [rn/view]) + [{:style {:margin-left 8 + :flex 1 + :max-height (when message-reaction-view? (* 0.4 height))}} + [author message-data message-reaction-view?] + (case content-type - constants/content-type-text [content.text/text-content message-data] + constants/content-type-text [content.text/text-content message-data context] - constants/content-type-emoji - [not-implemented/not-implemented [old-message/emoji message-data]] + constants/content-type-emoji + [not-implemented/not-implemented [old-message/emoji message-data]] - constants/content-type-sticker - [not-implemented/not-implemented [old-message/sticker message-data]] + constants/content-type-sticker + [not-implemented/not-implemented [old-message/sticker message-data]] - constants/content-type-audio - [audio/audio-message message-data context] + constants/content-type-audio + [audio/audio-message message-data context] - constants/content-type-image - [image/image-message 0 message-data on-long-press] + constants/content-type-image + [image/image-message 0 message-data context on-long-press] - constants/content-type-album - [album/album-message message-data context on-long-press] + constants/content-type-album + [album/album-message message-data context on-long-press] - [not-implemented/not-implemented [content.unknown/unknown-content message-data]]) - (when @show-delivery-state? - [status/status outgoing-status])]]]])))) + [not-implemented/not-implemented [content.unknown/unknown-content message-data]]) + (when @show-delivery-state? + [status/status outgoing-status])])]]])))) (defn message-with-reactions - [{:keys [pinned-by mentioned in-pinned-view? content-type last-in-group? message-id] :as message-data} - {:keys [chat-id] :as context} + [{:keys [pinned-by mentioned in-pinned-view? content-type last-in-group?] :as message-data} + context keyboard-shown] [rn/view {:style (style/message-container in-pinned-view? pinned-by mentioned last-in-group?) @@ -153,9 +162,10 @@ (when pinned-by [pin/pinned-by-view pinned-by]) (if (#{constants/content-type-system-text constants/content-type-community - constants/content-type-system-pinned-message - constants/content-type-contact-request} + constants/content-type-contact-request + constants/content-type-system-pinned-message} content-type) [system-message-content message-data] - [user-message-content message-data context keyboard-shown]) - [reactions/message-reactions-row chat-id message-id]]) + [user-message-content message-data context keyboard-shown false]) + [reactions/message-reactions-row message-data + [user-message-content message-data context keyboard-shown true]]]) diff --git a/src/status_im2/contexts/chat/messages/drawers/style.cljs b/src/status_im2/contexts/chat/messages/drawers/style.cljs new file mode 100644 index 0000000000..a48b6abe60 --- /dev/null +++ b/src/status_im2/contexts/chat/messages/drawers/style.cljs @@ -0,0 +1,24 @@ +(ns status-im2.contexts.chat.messages.drawers.style + (:require [quo2.foundations.colors :as colors])) + +(def tab + {:flex-direction :row + :align-items :center + :justify-content :center}) + +(def tab-icon {:margin-right 4}) + +(defn tab-count + [active?] + {:color (if (or active? (colors/dark?)) colors/white colors/neutral-100)}) + +(def tabs-container + {:flex 1 + :align-self :stretch + :padding-left 20 + :padding-right 8 + :margin-bottom 12}) + +(def authors-list + {:height 320 + :flex 1}) diff --git a/src/status_im2/contexts/chat/messages/drawers/view.cljs b/src/status_im2/contexts/chat/messages/drawers/view.cljs index e0a51eef93..45f725ecb1 100644 --- a/src/status_im2/contexts/chat/messages/drawers/view.cljs +++ b/src/status_im2/contexts/chat/messages/drawers/view.cljs @@ -6,7 +6,72 @@ [status-im2.common.not-implemented :as not-implemented] [status-im2.constants :as constants] [utils.i18n :as i18n] - [utils.re-frame :as rf])) + [utils.re-frame :as rf] + [reagent.core :as reagent] + [status-im2.common.contact-list-item.view :as contact-list-item] + [status-im2.contexts.chat.messages.drawers.style :as style] + [react-native.gesture :as gesture])) + +(defn contact-list-item-fn + [{:keys [from compressed-key]}] + (let [[primary-name secondary-name] (rf/sub [:contacts/contact-two-names-by-identity + from]) + {:keys [ens-verified added?]} (rf/sub [:contacts/contact-by-address from])] + ^{:key compressed-key} + [contact-list-item/contact-list-item + {:on-press #(rf/dispatch [:chat.ui/show-profile from])} + {:primary-name primary-name + :secondary-name secondary-name + :public-key from + :compressed-key compressed-key + :ens-verified ens-verified + :added? added?}])) + +(defn get-tabs-data + [reaction-authors selected-tab reactions-order] + (map (fn [reaction-type-int] + (let [author-details (get reaction-authors reaction-type-int)] + {:id reaction-type-int + :accessibility-label (keyword (str "authors-for-reaction-" reaction-type-int)) + :label [rn/view {:style style/tab} + [quo/icon + (get constants/reactions reaction-type-int) + {:no-color true + :container-style style/tab-icon}] + [quo/text + {:weight :medium + :size :paragraph-1 + :style (style/tab-count (= selected-tab + reaction-type-int))} + (count author-details)]]})) + reactions-order)) + +(defn reaction-authors-comp + [selected-tab reaction-authors reactions-order] + [:<> + [rn/view style/tabs-container + [quo/tabs + {:size 32 + :scrollable? true + :in-scroll-view? true + :on-change #(reset! selected-tab %) + :default-active @selected-tab + :data (get-tabs-data reaction-authors @selected-tab reactions-order)}]] + [gesture/flat-list + {:data (for [contact (get reaction-authors @selected-tab)] + contact) + :render-fn contact-list-item-fn + :key-fn :from + :style style/authors-list}]]) + +(defn reaction-authors + [reactions-order] + (let [{:keys [reaction-authors-list + selected-reaction]} (rf/sub [:chat/reactions-authors]) + selected-tab (reagent/atom (or selected-reaction + (first (keys reaction-authors-list))))] + (fn [] + [reaction-authors-comp selected-tab reaction-authors-list reactions-order]))) (defn pin-message [{:keys [chat-id pinned pinned-by] :as message-data}] diff --git a/src/status_im2/subs/root.cljs b/src/status_im2/subs/root.cljs index d496bf2441..07bca624fb 100644 --- a/src/status_im2/subs/root.cljs +++ b/src/status_im2/subs/root.cljs @@ -120,6 +120,7 @@ (reg-root-key-sub :chat/inputs-with-mentions :chat/inputs-with-mentions) (reg-root-key-sub :chats-home-list :chats-home-list) (reg-root-key-sub :chats/recording? :chats/recording?) +(reg-root-key-sub :chat/reactions-authors :chat/reactions-authors) ;;lightbox (reg-root-key-sub :lightbox/exit-signal :lightbox/exit-signal)