Improved chat message tapping area

Signed-off-by: Vitaliy Vlasov <siphiuel@gmail.com>
This commit is contained in:
Julien Eluard 2019-06-19 17:17:24 +02:00 committed by Vitaliy Vlasov
parent 3973ebd607
commit 797d8037e0
No known key found for this signature in database
GPG Key ID: A7D57C347F2B2964
2 changed files with 20 additions and 15 deletions

View File

@ -227,14 +227,15 @@
[react/view (style/group-message-wrapper message) [react/view (style/group-message-wrapper message)
[react/view (style/message-body message) [react/view (style/message-body message)
(when display-photo? (when display-photo?
[react/view style/message-author [react/view (style/message-author outgoing)
(when last-in-group? (when last-in-group?
[react/touchable-highlight {:on-press #(when-not modal? (re-frame/dispatch [:chat.ui/show-profile from]))} [react/touchable-highlight {:on-press #(when-not modal? (re-frame/dispatch [:chat.ui/show-profile from]))}
[react/view [react/view
[photos/member-photo from]]])]) [photos/member-photo from]]])])
[react/view (style/group-message-view outgoing message-type) [react/view (style/group-message-view outgoing message-type display-photo?)
(when display-username? (when display-username?
[message-author-name from username]) [react/touchable-opacity {:on-press #(re-frame/dispatch [:chat.ui/show-profile from])}
[message-author-name from username]])
[react/view {:style (style/timestamp-content-wrapper outgoing message-type)} [react/view {:style (style/timestamp-content-wrapper outgoing message-type)}
content]]] content]]]
[react/view (style/delivery-status outgoing) [react/view (style/delivery-status outgoing)

View File

@ -22,15 +22,13 @@
{:padding-bottom 16})) {:padding-bottom 16}))
(defn message-body (defn message-body
[{:keys [outgoing display-photo?] :as message}] [{:keys [outgoing] :as message}]
(let [align (if outgoing :flex-end :flex-start) (let [align (if outgoing :flex-end :flex-start)
direction (if outgoing :row-reverse :row)] direction (if outgoing :row-reverse :row)]
(merge {:flex-direction direction {:flex-direction direction
:padding-top (message-padding-top message) :padding-top (message-padding-top message)
:align-self align :align-self align
:align-items align} :align-items align}))
(when display-photo?
{:padding-left 8}))))
(def message-timestamp (def message-timestamp
{:font-size 10 {:font-size 10
@ -76,14 +74,15 @@
{:flex-direction (if outgoing :row-reverse :row)}) {:flex-direction (if outgoing :row-reverse :row)})
(defn group-message-view (defn group-message-view
[outgoing message-type] [outgoing message-type display-photo?]
(let [align (if outgoing :flex-end :flex-start)] (let [align (if outgoing :flex-end :flex-start)]
(merge {:flex-direction :column (merge {:flex-direction :column
:max-width (if platform/desktop? 500 320) :max-width (if platform/desktop? 500 320)
:align-items align} :align-items align}
(if outgoing (if outgoing
{:margin-right 8} {:margin-right 8}
{:margin-left 8})))) (when-not display-photo?
{:margin-left 8})))))
(defn delivery-status [outgoing] (defn delivery-status [outgoing]
(if outgoing (if outgoing
@ -92,9 +91,14 @@
{:align-self :flex-start {:align-self :flex-start
:padding-left (if platform/desktop? 24 8)})) :padding-left (if platform/desktop? 24 8)}))
(def message-author (defn message-author [outgoing]
{:width photos/default-size (merge
:align-self :flex-end}) {:width (+ 16 photos/default-size) ;; 16 is for the padding
:align-self :flex-end}
(if outgoing
{:padding-left 8}
{:padding-horizontal 8
:padding-right 8})))
(def delivery-view (def delivery-view
{:flex-direction :row {:flex-direction :row