status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Integrate reactions to messages in the new UI 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2022-07-18 15:48:42 -03:00
parent c4da42b4d2
commit 6794273dbf
No known key found for this signature in database
GPG Key ID: 59EB921E0706B48F
14 changed files with 187 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/quo2/components/reactions/react.cljs → src/quo2/components/reactions/reaction.cljs
View File

@ -1,4 +1,4 @@
(ns quo2.components.reactions.react
(ns quo2.components.reactions.reaction
(:require [quo2.components.markdown.text :as quo2-text]
[quo.react-native :as rn]
[quo.theme :as theme]
@ -9,26 +9,29 @@
{:flex-direction :row
:justify-content :center
:align-items :center
:padding-vertical 3
:padding-horizontal 8
:border-radius 8})
:border-radius 8
:height 24})
(defn open-reactions-menu
[{:keys [on-press]}]
(let [dark? (theme/dark?)]
[rn/touchable-opacity {:on-press on-press
:style (merge reaction-styling
{:margin-top 25
{:padding-horizontal 9
:border-width 1
:margin-top 5
:border-color (if dark?
colors/white-opa-5
colors/neutral-80)})}
colors/neutral-70
colors/neutral-30)})}
[icons/icon :main-icons/add-reaction20
{:color (if dark?
{:width 20
:height 20
:color (if dark?
colors/white
colors/black)}]]))
(defn render-react
(defn reaction
"Add your emoji as a param here"
[{:keys [emoji clicks neutral? on-press]}]
(let [dark? (theme/dark?)

8
src/quo2/screens/reactions/react.cljs
View File

@ -2,8 +2,8 @@
(:require [quo.react-native :as rn]
[quo.previews.preview :as preview]
[reagent.core :as reagent]
[quo2.components.reactions.react :as quo2]
[quo2.foundations.colors :as colors]))
[quo2.foundations.colors :as colors]
[quo2.components.reactions.reaction :as quo2.reaction]))
(def descriptor [{:label "Count"
:key :clicks
@ -33,8 +33,8 @@
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/render-react @state]
[quo2/open-reactions-menu @state]]])))
[quo2.reaction/reaction @state]
[quo2.reaction/open-reactions-menu @state]]])))
(defn preview-react []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

7
src/status_im/constants.cljs
View File

@ -42,6 +42,13 @@
(def request-to-join-pending-state 1)
(def reactions-old {emoji-reaction-love (:love resources/reactions-old)
emoji-reaction-thumbs-up (:thumbs-up resources/reactions-old)
emoji-reaction-thumbs-down (:thumbs-down resources/reactions-old)
emoji-reaction-laugh (:laugh resources/reactions-old)
emoji-reaction-sad (:sad resources/reactions-old)
emoji-reaction-angry (:angry resources/reactions-old)})
(def reactions {emoji-reaction-love (:love resources/reactions)
emoji-reaction-thumbs-up (:thumbs-up resources/reactions)
emoji-reaction-thumbs-down (:thumbs-down resources/reactions)

10
src/status_im/react_native/resources.cljs
View File

@ -80,10 +80,18 @@
(get (swap! loaded-images assoc k
(get mock-images k)) k)))
(def reactions
(def reactions-old
{:love (js/require "../resources/images/reactions/love.png")
:angry (js/require "../resources/images/reactions/angry.png")
:sad (js/require "../resources/images/reactions/sad.png")
:laugh (js/require "../resources/images/reactions/laugh.png")
:thumbs-up (js/require "../resources/images/reactions/thumbs-up.png")
:thumbs-down (js/require "../resources/images/reactions/thumbs-down.png")})
(def reactions
{:love :main-icons/love16
:angry :main-icons/angry16
:sad :main-icons/sad16
:laugh :main-icons/laugh16
:thumbs-up :main-icons/thumbs-up16
:thumbs-down :main-icons/thumbs-down16})

8
src/status_im/ui/screens/chat/message/message.cljs
View File

@ -629,15 +629,13 @@
[message-content-wrapper message
[unknown-content-type message]])
(defn chat-message [{:keys [display-photo? pinned pinned-by] :as message} space-keeper]
(defn chat-message [{:keys [display-photo? pinned pinned-by] :as message}]
[:<>
[reactions/with-reaction-picker
{:message message
:reactions @(re-frame/subscribe [:chats/message-reactions (:message-id message) (:chat-id message)])
:picker-on-open (fn []
(space-keeper true))
:picker-on-close (fn []
(space-keeper false))
:picker-on-open (fn [])
:picker-on-close (fn [])
:send-emoji (fn [{:keys [emoji-id]}]
(re-frame/dispatch [::models.reactions/send-emoji-reaction
{:message-id (:message-id message)

2
src/status_im/ui/screens/chat/message/message_old.cljs
View File

@ -15,7 +15,7 @@
[status-im.ui.screens.chat.styles.message.message-old :as style]
[status-im.ui.screens.chat.utils :as chat.utils]
[status-im.utils.security :as security]
[status-im.ui.screens.chat.message.reactions :as reactions]
[status-im.ui.screens.chat.message.reactions-old :as reactions]
[status-im.ui.screens.chat.image.preview.views :as preview]
[quo.core :as quo]
[status-im.utils.config :as config]

2
src/status_im/ui/screens/chat/message/reactions.cljs
View File

@ -69,7 +69,7 @@
(and outgoing (= outgoing-status :sent)))
(reset! actions act)
(get-picker-position ref on-open)))}]
[reaction-row/message-reactions message reactions timeline]]
[reaction-row/message-reactions message reactions timeline #(on-emoji-press %) on-open]]
(when @visible
[rn/modal {:on-request-close on-close
:on-show (fn []

95
src/status_im/ui/screens/chat/message/reactions_old.cljs Normal file
View File

@ -0,0 +1,95 @@
(ns status-im.ui.screens.chat.message.reactions-old
(:require [status-im.ui.screens.chat.message.reactions-picker :as reaction-picker]
[status-im.ui.screens.chat.message.reactions-row-old :as reaction-row]
[reagent.core :as reagent]
[quo.react-native :as rn]
[quo.react :as react]
[quo.animated :as animated]))
(defn measure-in-window [ref cb]
(.measureInWindow ^js ref cb))
(defn get-picker-position [^js ref cb]
(some-> ref
react/current-ref
(measure-in-window
(fn [x y width height]
(cb {:top y
:left x
:width width
:height height})))))
(defn- extract-id [reactions id]
(->> reactions
(filter (fn [{:keys [emoji-id]}] (= emoji-id id)))
first
:emoji-reaction-id))
(defn with-reaction-picker []
(let [ref (react/create-ref)
animated-state (animated/value 0)
spring-animation (animated/with-spring-transition
animated-state
(:jump animated/springs))
animation (animated/with-timing-transition
animated-state
{:duration reaction-picker/animation-duration
:easing (:ease-in-out animated/easings)})
visible (reagent/atom false)
actions (reagent/atom nil)
position (reagent/atom {})]
(fn [{:keys [message reactions outgoing outgoing-status render send-emoji retract-emoji picker-on-open
picker-on-close timeline]}]
(let [own-reactions (reduce (fn [acc {:keys [emoji-id own]}]
(if own (conj acc emoji-id) acc))
[] reactions)
on-emoji-press (fn [emoji-id]
(let [active ((set own-reactions) emoji-id)]
(if active
(retract-emoji {:emoji-id emoji-id
:emoji-reaction-id (extract-id reactions emoji-id)})
(send-emoji {:emoji-id emoji-id}))))
on-close (fn []
(animated/set-value animated-state 0)
(js/setTimeout
(fn []
(reset! actions nil)
(reset! visible false)
(picker-on-close))))
on-open (fn [pos]
(picker-on-open)
(reset! position pos)
(reset! visible true))]
[:<>
[rn/view {:ref ref
:collapsable false}
[render message {:modal false
:on-long-press (fn [act]
(when (or (not outgoing)
(and outgoing (= outgoing-status :sent)))
(reset! actions act)
(get-picker-position ref on-open)))}]
[reaction-row/message-reactions message reactions timeline]]
(when @visible
[rn/modal {:on-request-close on-close
:on-show (fn []
(js/requestAnimationFrame
#(animated/set-value animated-state 1)))
:transparent true}
[reaction-picker/modal {:outgoing (:outgoing message)
:display-photo (:display-photo? message)
:animation animation
:spring spring-animation
:top (:top @position)
:message-height (:height @position)
:on-close on-close
:actions @actions
:own-reactions own-reactions
:timeline timeline
:send-emoji (fn [emoji]
(on-close)
(js/setTimeout #(on-emoji-press emoji)
reaction-picker/animation-duration))}
[render message {:modal true
:on-long-press #()
:close-modal on-close}]]])]))))

2
src/status_im/ui/screens/chat/message/reactions_picker.cljs
View File

@ -33,7 +33,7 @@
[rn/view {:style (styles/container-style {:outgoing outgoing :timeline timeline})}
[rn/view {:style (styles/reactions-picker-row)}
(doall
(for [[id resource] constants/reactions
(for [[id resource] constants/reactions-old
:let [active (own-reactions id)]]
^{:key id}
[rn/touchable-opacity {:accessibility-label (str "pick-emoji-" id)

29
src/status_im/ui/screens/chat/message/reactions_row.cljs
View File

@ -2,22 +2,21 @@
(:require [status-im.constants :as constants]
[status-im.ui.screens.chat.message.styles :as styles]
[quo.react-native :as rn]
[quo.core :as quo]))
[quo2.components.reactions.reaction :as quo2.reaction]))
(defn reaction [{:keys [outgoing]} {:keys [own emoji-id quantity]} timeline]
[rn/view {:style (styles/reaction-style {:outgoing (and outgoing (not timeline))
:own own})}
[rn/image {:source (get constants/reactions emoji-id)
:style {:width 16
:height 16
:margin-right 4}}]
[quo/text {:accessibility-label (str "emoji-" emoji-id "-is-own-" own)
:style (styles/reaction-quantity-style {:own own})}
quantity]])
(def default-reaction-margin-top 5)
(defn message-reactions [message reactions timeline]
(def text-reaction-margin-top -3)
(defn message-reactions [{:keys [content-type]} reactions timeline on-emoji-press on-open]
(when (seq reactions)
[rn/view {:style (styles/reactions-row message timeline)}
(for [emoji-reaction reactions]
[rn/view {:style (styles/reactions-row timeline (if (= content-type constants/content-type-text) text-reaction-margin-top default-reaction-margin-top))}
(for [{:keys [own emoji-id quantity] :as emoji-reaction} reactions]
^{:key (str emoji-reaction)}
[reaction message emoji-reaction timeline])]))
[rn/view {:style {:margin-right 6 :margin-top 5}}
[quo2.reaction/reaction {:emoji (get constants/reactions emoji-id)
:neutral? own
:clicks quantity
:on-press #(on-emoji-press emoji-id)}]])
;; on-press won't work until we integrate Message Context Drawer
[quo2.reaction/open-reactions-menu {:on-press on-open}]]))

23
src/status_im/ui/screens/chat/message/reactions_row_old.cljs Normal file
View File

@ -0,0 +1,23 @@
(ns status-im.ui.screens.chat.message.reactions-row-old
(:require [status-im.constants :as constants]
[status-im.ui.screens.chat.message.styles :as styles]
[quo.react-native :as rn]
[quo.core :as quo]))
(defn reaction [{:keys [outgoing]} {:keys [own emoji-id quantity]} timeline]
[rn/view {:style (styles/reaction-style {:outgoing (and outgoing (not timeline))
:own own})}
[rn/image {:source (get constants/reactions-old emoji-id)
:style {:width 16
:height 16
:margin-right 4}}]
[quo/text {:accessibility-label (str "emoji-" emoji-id "-is-own-" own)
:style (styles/reaction-quantity-style {:own own})}
quantity]])
(defn message-reactions [message reactions timeline]
(when (seq reactions)
[rn/view {:style (styles/reactions-row-old message timeline)}
(for [emoji-reaction reactions]
^{:key (str emoji-reaction)}
[reaction message emoji-reaction timeline])]))

21
src/status_im/ui/screens/chat/message/styles.cljs
View File

@ -74,7 +74,12 @@
colors/white
(:text-01 @colors/theme))})
(defn reactions-row [{:keys [outgoing display-photo?]} timeline]
(def screen-width
(-> "window"
react/get-dimensions
:width))
(defn reactions-row-old [{:keys [outgoing display-photo?]} timeline]
(merge {:flex-direction :row
:padding-right 8}
(if (and outgoing (not timeline))
@ -84,6 +89,15 @@
{:padding-left (+ 30 photos/default-size (when timeline 8))}
{:padding-left 30})))
(defn reactions-row [timeline margin-top]
{:flex-direction :row
:padding-right 8
:justify-content :flex-start
:margin-top margin-top
:flex-wrap :wrap
:max-width (- screen-width (+ 30 photos/default-size (when timeline 8)))
:margin-left (+ 30 photos/default-size (when timeline 8))})
(defn reaction-button [active]
(merge {:width 40
:height 40
@ -124,11 +138,6 @@
:background-color colors/white
:margin-vertical 4})
(def screen-width
(-> "window"
react/get-dimensions
:width))
(defn scale-dimensions
"Scale a given height and width to be maximum percentage allowed of the screen width"
[{:keys [height width] :as dimensions}]

7
src/status_im/ui/screens/chat/views.cljs
View File

@ -320,7 +320,7 @@
(defn render-fn [{:keys [outgoing type] :as message}
idx
_
{:keys [group-chat public? community? current-public-key space-keeper
{:keys [group-chat public? community? current-public-key
chat-id show-input? message-pin-enabled edit-enabled in-pinned-view?]}]
[react/view {:style (when (and platform/android? (not in-pinned-view?)) {:scaleY -1})}
(if (= type :datemark)
@ -337,8 +337,7 @@
:current-public-key current-public-key
:show-input? show-input?
:message-pin-enabled message-pin-enabled
:edit-enabled edit-enabled)
space-keeper]))])
:edit-enabled edit-enabled)]))])
(def list-key-fn #(or (:message-id %) (:value %)))
(def list-ref #(reset! messages-list-ref %))
@ -428,7 +427,6 @@
bottom-space
pan-responder
mutual-contact-requests-enabled?
space-keeper
show-input?]}]
(let [{:keys [group-chat chat-type chat-id public? community-id admins]} chat
@ -456,7 +454,6 @@
:public? public?
:community-id community-id
:admins admins
:space-keeper space-keeper
:show-input? show-input?
:edit-enabled true
:in-pinned-view? false})

2
src/status_im/ui/screens/status/views.cljs
View File

@ -15,7 +15,7 @@
[status-im.ui.screens.chat.image.preview.views :as preview]
[status-im.ui.screens.chat.photos :as photos]
[status-im.ui.components.tabs :as tabs]
[status-im.ui.screens.chat.message.reactions :as reactions]
[status-im.ui.screens.chat.message.reactions-old :as reactions]
[status-im.chat.models.reactions :as models.reactions]
[status-im.ui.screens.chat.components.reply :as components.reply]
[status-im.ui.screens.chat.message.link-preview :as link-preview]