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

Updated styles and layouts for messages (#16188) 

* Messages style

* More styling

* Chat layout

* Formatting fix

* Fixes

* Updates

* Fix

* Styles for pinned messages

* Style fixes

* Style fixes
This commit is contained in:
Alexander 2023-06-22 11:47:30 +02:00 committed by GitHub
parent 88bb84bb3e
commit 1953137068
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 228 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo2/components/dividers/date.cljs
View File

@ -7,7 +7,7 @@
(defn date (defn date
[value] [value]
[rn/view [rn/view
{:margin-vertical 8 {:margin-vertical 12
:padding-right 20 :padding-right 20
:padding-left 60} :padding-left 60}
[text/text [text/text

5
src/quo2/components/messages/author/style.cljs
View File

@ -2,10 +2,9 @@
(:require [quo2.foundations.colors :as colors])) (:require [quo2.foundations.colors :as colors]))
(def container (def container
{:flex 1 {:flex-wrap :wrap
:flex-wrap :wrap
:flex-direction :row :flex-direction :row
:align-items :center}) :align-items :baseline})
(def middle-dot-nickname (def middle-dot-nickname
{:color colors/neutral-50 {:color colors/neutral-50

13
src/quo2/components/messages/author/view.cljs
View File

@ -9,9 +9,8 @@
(def middle-dot "·") (def middle-dot "·")
(defn author (defn author
[{:keys [primary-name secondary-name short-chat-key time-str contact? verified? untrustworthy?]}] [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?]}]
[rn/view {:style style/container} [rn/view {:style (merge style/container style)}
[:<>
[text/text [text/text
{:weight :semi-bold {:weight :semi-bold
:size :paragraph-2 :size :paragraph-2
@ -30,7 +29,7 @@
:size :paragraph-2 :size :paragraph-2
:number-of-lines 1 :number-of-lines 1
:style {:color (colors/theme-colors colors/neutral-60 colors/neutral-40)}} :style {:color (colors/theme-colors colors/neutral-60 colors/neutral-40)}}
secondary-name]])] secondary-name]])
(when contact? (when contact?
[icons/icon :main-icons2/contact [icons/icon :main-icons2/contact
{:size 12 {:size 12
@ -50,21 +49,21 @@
(when (and (not verified?) short-chat-key) (when (and (not verified?) short-chat-key)
[text/text [text/text
{:monospace true {:monospace true
:size :paragraph-2 :size :label
:number-of-lines 1 :number-of-lines 1
:style style/chat-key-text} :style style/chat-key-text}
short-chat-key]) short-chat-key])
(when (and (not verified?) time-str) (when (and (not verified?) time-str)
[text/text [text/text
{:monospace true {:monospace true
:size :paragraph-2 :size :label
:number-of-lines 1 :number-of-lines 1
:style style/middle-dot-chat-key} :style style/middle-dot-chat-key}
middle-dot]) middle-dot])
(when time-str (when time-str
[text/text [text/text
{:monospace true {:monospace true
:size :paragraph-2 :size :label
:accessibility-label :message-timestamp :accessibility-label :message-timestamp
:number-of-lines 1 :number-of-lines 1
:style (style/time-text verified?)} :style (style/time-text verified?)}

91
src/quo2/components/messages/system_message.cljs
View File

@ -2,11 +2,11 @@
(:require [quo2.components.avatars.icon-avatar :as icon-avatar] (:require [quo2.components.avatars.icon-avatar :as icon-avatar]
[quo2.components.avatars.user-avatar.view :as user-avatar] [quo2.components.avatars.user-avatar.view :as user-avatar]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.components.messages.author.view :as author]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.theme :as theme] [quo2.theme :as theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]))
[utils.string :as utils]))
(def themes-landed (def themes-landed
{:pinned colors/primary-50-opa-5 {:pinned colors/primary-50-opa-5
@ -33,7 +33,7 @@
(defn sm-timestamp (defn sm-timestamp
[timestamp-str] [timestamp-str]
[rn/view {:margin-left 6} [rn/view {:margin-left 8}
[text/text [text/text
{:size :label {:size :label
:style {:color (get-color :time) :style {:color (get-color :time)
@ -61,32 +61,34 @@
:profile-picture image :profile-picture image
:ring? false}]]) :ring? false}]])
(defmulti sm-render :type) (defmulti system-message-content :type)
(defmethod sm-render :deleted (defmethod system-message-content :deleted
[{:keys [label timestamp-str labels child]}] [{:keys [label timestamp-str labels child]}]
[rn/view [rn/view
{:align-items :center {:flex-direction :row
:justify-content :space-between
:flex 1 :flex 1
:flex-direction :row} :align-items :center}
[rn/view
{:align-items :center
:flex-direction :row}
[sm-icon [sm-icon
{:icon :main-icons/delete {:icon :main-icons/delete
:color :danger :color :danger
:opacity 5}] :opacity 5}]
[rn/view
{:align-items :baseline
:flex-direction :row
:flex 1
:flex-wrap :wrap}
(if child (if child
child child
[text/text [text/text
{:size :paragraph-2 {:size :paragraph-2
:style {:color (get-color :text) :style {:color (get-color :text)}}
:margin-right 5}} (or (get labels label)
(or (get labels label) label (:message-deleted labels))]) label
(:message-deleted labels))])
[sm-timestamp timestamp-str]]]) [sm-timestamp timestamp-str]]])
(defmethod sm-render :added (defmethod system-message-content :added
[{:keys [state mentions timestamp-str labels]}] [{:keys [state mentions timestamp-str labels]}]
[rn/view [rn/view
{:align-items :center {:align-items :center
@ -113,8 +115,8 @@
(:name (second mentions))] (:name (second mentions))]
[sm-timestamp timestamp-str]]) [sm-timestamp timestamp-str]])
(defmethod sm-render :pinned (defmethod system-message-content :pinned
[{:keys [state pinned-by content timestamp-str labels]}] [{:keys [state pinned-by child timestamp-str labels]}]
[rn/view [rn/view
{:flex-direction :row {:flex-direction :row
:flex 1 :flex 1
@ -128,49 +130,20 @@
:flex 1} :flex 1}
[rn/view [rn/view
{:align-items :baseline {:align-items :baseline
:flex-direction :row} :flex-direction :row
[text/text :flex 1
{:size :paragraph-2 :flex-wrap :wrap}
:weight :semi-bold [author/author
:style {:color (get-color :text)}} {:primary-name pinned-by
(utils/truncate-str pinned-by 18)] :style {:margin-right 4}}]
[rn/view [rn/view
{:margin-left 4
:margin-right 2}
[text/text [text/text
{:size :paragraph-2 {:size :paragraph-2
:style {:color (get-color :text)}} :style {:color (get-color :text)}}
(:pinned-a-message labels)]] (:pinned-a-message labels)]]
[sm-timestamp timestamp-str]] [sm-timestamp timestamp-str]]
[rn/view {:flex-direction :row} (when child
[rn/view child)]])
{:flex-direction :row
:margin-right 4}
[sm-user-avatar (:image (:mentions content))]
[text/text
{:weight :semi-bold
:size :label}
(:name (:mentions content))]]
(when (seq (:text content))
[rn/view
{:margin-right 20
:flex-direction :row
:flex 1}
[text/text
{:size :label
:style {:color (get-color :text)}
:number-of-lines 1
:ellipsize-mode :tail}
(:text content)]])
[rn/view
{:justify-content :flex-end
:flex-direction :row
:min-width 10}
(when (seq (:info content))
[text/text
{:size :label
:style {:color (get-color :time)}}
(utils/truncate-str (:info content) 24)])]]]])
(defn- f-system-message (defn- f-system-message
[{:keys [type style non-pressable? animate-landing? labels on-long-press] :as message}] [{:keys [type style non-pressable? animate-landing? labels on-long-press] :as message}]
@ -189,15 +162,13 @@
:on-long-press on-long-press :on-long-press on-long-press
:style (reanimated/apply-animations-to-style :style (reanimated/apply-animations-to-style
{:background-color sv-color} {:background-color sv-color}
(merge (merge {:flex-direction :row
{:flex-direction :row
:flex 1 :flex 1
:border-radius 16 :padding-vertical 8
:padding-vertical 9 :padding-horizontal 12
:padding-horizontal 11
:background-color sv-color} :background-color sv-color}
style))} style))}
[sm-render message labels]])) [system-message-content message labels]]))
(defn system-message (defn system-message
[message] [message]

4
src/status_im2/contexts/chat/composer/reply/style.cljs
View File

@ -18,7 +18,8 @@
[pin?] [pin?]
(merge {:flex-direction :row (merge {:flex-direction :row
:flex 1 :flex 1
:align-items :center} :align-items :center
:margin-top 2}
(when-not pin? (when-not pin?
{:left 22 {:left 22
:margin-right 22}))) :margin-right 22})))
@ -33,7 +34,6 @@
(def message-text (def message-text
{:text-transform :none {:text-transform :none
:margin-left 4 :margin-left 4
:margin-top 2
:flex-shrink 1}) :flex-shrink 1})
(def gradient (def gradient

2
src/status_im2/contexts/chat/composer/reply/view.cljs
View File

@ -73,7 +73,7 @@
:size :xxxs}] :size :xxxs}]
[quo/text [quo/text
{:weight :semi-bold {:weight :semi-bold
:size :paragraph-2 :size :label
:number-of-lines 1 :number-of-lines 1
:style style/message-author-text} :style style/message-author-text}
(format-reply-author from contact-name current-public-key)]])) (format-reply-author from contact-name current-public-key)]]))

3
src/status_im2/contexts/chat/menus/pinned_messages/view.cljs
View File

@ -14,10 +14,9 @@
(defn message-render-fn (defn message-render-fn
[{:keys [deleted? deleted-for-me?] :as message} _ _ context] [{:keys [deleted? deleted-for-me?] :as message} _ _ context]
;; TODO (flexsurfer) probably we don't want reactions here
(if (or deleted? deleted-for-me?) (if (or deleted? deleted-for-me?)
[content.deleted/deleted-message message context] [content.deleted/deleted-message message context]
[message/message-with-reactions message context (atom false)])) [message/message message context (atom false)]))
(defn pinned-messages (defn pinned-messages
[chat-id] [chat-id]

2
src/status_im2/contexts/chat/messages/content/album/view.cljs
View File

@ -31,7 +31,7 @@
portrait? (and (= images-count rectangular-style-count) (= album-style :portrait))] portrait? (and (= images-count rectangular-style-count) (= album-style :portrait))]
(if (and albumize? (> images-count 1)) (if (and albumize? (> images-count 1))
[:<> [:<>
[rn/view {:style {:margin-bottom 10}} [text/text-content first-image]] [rn/view {:style {:margin-bottom 4}} [text/text-content first-image]]
[rn/view [rn/view
{:style (style/album-container portrait?) {:style (style/album-container portrait?)
:accessible true :accessible true

15
src/status_im2/contexts/chat/messages/content/deleted/view.cljs
View File

@ -7,21 +7,20 @@
(defn user-xxx-deleted-this-message (defn user-xxx-deleted-this-message
[{:keys [display-name profile-picture]}] [{:keys [display-name profile-picture]}]
[:<>
[rn/view [rn/view
{:style {:flex-direction :row {:style {:margin-right 4
:align-items :center :align-self :center}}
:flex 1
:flex-wrap :wrap}}
[rn/view {:style {:margin-right 4}}
[quo/user-avatar [quo/user-avatar
{:full-name display-name {:full-name display-name
:profile-picture profile-picture :profile-picture profile-picture
:status-indicator? false :status-indicator? false
:size :xxxs}]] :size :xxxs}]]
[quo/author {:primary-name display-name}] [quo/author
{:primary-name display-name
:style {:margin-right 4}}]
[quo/text [quo/text
{:style {:margin-left 4} {:size :paragraph-2
:size :paragraph-2
:number-of-lines 1} :number-of-lines 1}
(i18n/label :t/deleted-this-message)]]) (i18n/label :t/deleted-this-message)]])

4
src/status_im2/contexts/chat/messages/content/image/view.cljs
View File

@ -22,10 +22,10 @@
image-local-url (http/replace-port (:image content) (rf/sub [:mediaserver/port]))] image-local-url (http/replace-port (:image content) (rf/sub [:mediaserver/port]))]
[:<> [:<>
(when (= index 0) (when (= index 0)
[rn/view {:style {:margin-bottom 10}} [text/text-content message]]) [text/text-content message])
[rn/touchable-opacity [rn/touchable-opacity
{:active-opacity 1 {:active-opacity 1
:style {:margin-top (when (pos? index) 10)} :style {:margin-top 4}
:on-long-press on-long-press :on-long-press on-long-press
:on-press #(rf/dispatch [:chat.ui/navigate-to-lightbox :on-press #(rf/dispatch [:chat.ui/navigate-to-lightbox
message-id message-id

24
src/status_im2/contexts/chat/messages/content/pin/style.cljs
View File

@ -1,24 +1,23 @@
(ns status-im2.contexts.chat.messages.content.pin.style (ns status-im2.contexts.chat.messages.content.pin.style
(:require [quo2.foundations.colors :as colors])) (:require [quo2.foundations.colors :as colors]))
(def system-message-default-size 36) (def system-message-default-size 34)
(def system-message-margin-right 8) (def system-message-margin-right 8)
(def pin-indicator-container (def pin-indicator-container
{:margin-top 4 {:padding-left 42
:margin-left 54 :margin-bottom 2
:justify-content :center :align-items :center
:align-self :flex-start
:align-items :flex-start
:flex-direction :row}) :flex-direction :row})
(def pin-author-text (def pin-author-text
{:color colors/primary-50 {:color colors/primary-50
:bottom 2}) :margin-left 2})
(defn pinned-message-text (defn pinned-message-text
[] []
{:color (colors/theme-colors colors/neutral-100 colors/white)}) {:color (colors/theme-colors colors/neutral-100 colors/white)
:margin-left 4})
(def system-message-container (def system-message-container
{:flex-direction :row :margin-vertical 8}) {:flex-direction :row :margin-vertical 8})
@ -26,15 +25,16 @@
(def system-message-inner-container (def system-message-inner-container
{:width system-message-default-size {:width system-message-default-size
:height system-message-default-size :height system-message-default-size
:margin-right system-message-margin-right
:border-radius system-message-default-size :border-radius system-message-default-size
:margin-right system-message-margin-right
:justify-content :center :justify-content :center
:align-items :center :align-items :center
:background-color colors/primary-50-opa-10}) :background-color colors/primary-50-opa-10})
(def system-message-author-container (def system-message-author-container
{:flex-direction :row :align-items :center}) {:flex-direction :row
:align-items :baseline})
(def system-message-timestamp-container (def system-message-timestamp-container
{:padding-left 5 {:padding-left 8
:margin-top 2}) :color colors/neutral-50})

52
src/status_im2/contexts/chat/messages/content/pin/view.cljs
View File

@ -5,53 +5,33 @@
[quo2.core :as quo] [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[utils.re-frame :as rf] [utils.re-frame :as rf]
[utils.i18n :as i18n] [utils.i18n :as i18n]))
[status-im2.contexts.chat.messages.content.legacy-view :as old-message]
[status-im.ui.screens.chat.styles.message.message :as old-style]))
(defn pinned-by-view (defn pinned-by-view
[pinned-by] [pinned-by]
(let [{:keys [public-key]} (rf/sub [:multiaccount/contact]) (let [{:keys [public-key]} (rf/sub [:multiaccount/contact])
contact-names (rf/sub [:contacts/contact-two-names-by-identity pinned-by]) contact-names (rf/sub [:contacts/contact-two-names-by-identity pinned-by])
author-name (if (= pinned-by public-key) (i18n/label :t/You) (first contact-names))] author-name (if (= pinned-by public-key)
(i18n/label :t/You)
(first contact-names))]
[rn/view [rn/view
{:style style/pin-indicator-container {:style style/pin-indicator-container
:accessibility-label :pinned-by} :accessibility-label :pinned-by}
[quo/icon :i/pin {:color colors/primary-50 :size 16}] [quo/icon :i/pin
{:color colors/primary-50
:size 16}]
[quo/text [quo/text
{:size :label {:size :label
:weight :medium :weight :medium
:style style/pin-author-text} :style style/pin-author-text}
author-name]])) author-name]]))
(defn system-message (defn pinned-message
[{:keys [from in-popover? quoted-message timestamp-str chat-id] :as message}] [{:keys [from quoted-message timestamp-str]}]
[rn/touchable-opacity (let [display-name (first (rf/sub [:contacts/contact-two-names-by-identity from]))]
{:on-press (fn [] [quo/system-message
(rf/dispatch [:dismiss-keyboard]) {:type :pinned
(rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id])) :pinned-by display-name
:active-opacity 1 :child [reply/quoted-message quoted-message false true]
:style (merge style/system-message-container :timestamp-str timestamp-str
(old-style/message-wrapper message))} :labels {:pinned-a-message (i18n/label :t/pinned-a-message)}}]))
[rn/view
{:style style/system-message-inner-container
:accessibility-label :content-type-pin-icon}
[quo/icon :i/pin {:color colors/primary-50 :size 16}]]
[rn/view
[rn/view {:style style/system-message-author-container}
[rn/touchable-opacity
{:style old-style/message-author-touchable
:disabled in-popover?
:on-press #(rf/dispatch [:chat.ui/show-profile from])}
[old-message/message-author-name from {} 20]]
[quo/text
{:size :label
:style (style/pinned-message-text)}
(str " " (i18n/label :t/pinned-a-message))]
[rn/text
{:style (merge
style/system-message-timestamp-container
(old-style/message-timestamp-text))
:accessibility-label :message-timestamp}
timestamp-str]]
[reply/quoted-message quoted-message false true]]])

4
src/status_im2/contexts/chat/messages/content/reactions/view.cljs
View File

@ -43,8 +43,8 @@
[rn/scroll-view [rn/scroll-view
{:shows-horizontal-scroll-indicator false {:shows-horizontal-scroll-indicator false
:horizontal true :horizontal true
:style {:margin-left 52 :style {:margin-left 44
:margin-bottom 12 :margin-top 8
:flex-direction :row}} :flex-direction :row}}
(for [{:keys [own emoji-id quantity emoji-reaction-id] (for [{:keys [own emoji-id quantity emoji-reaction-id]
:as emoji-reaction} reactions] :as emoji-reaction} reactions]

18
src/status_im2/contexts/chat/messages/content/style.cljs
View File

@ -2,10 +2,14 @@
(:require [quo2.foundations.colors :as colors])) (:require [quo2.foundations.colors :as colors]))
(defn message-container (defn message-container
[in-pinned-view? pinned-by mentioned last-in-group?] ([]
(merge (when (and (not in-pinned-view?) (or mentioned pinned-by)) (message-container false nil nil false))
{:background-color colors/primary-50-opa-5 ([in-pinned-view? pinned-by mentioned last-in-group?]
:margin-bottom 4}) (cond-> {:border-radius 16
(when (or mentioned pinned-by last-in-group?) :margin-horizontal 8}
{:margin-top 8})
{:border-radius 16})) (and (not in-pinned-view?) (or mentioned pinned-by))
(assoc :background-color colors/primary-50-opa-5 :margin-bottom 4)
(or mentioned pinned-by last-in-group?)
(assoc :margin-top 8))))

14
src/status_im2/contexts/chat/messages/content/text/style.cljs
View File

@ -1,22 +1,14 @@
(ns status-im2.contexts.chat.messages.content.text.style (ns status-im2.contexts.chat.messages.content.text.style
(:require [quo2.foundations.colors :as colors])) (:require [quo2.foundations.colors :as colors]))
(def spacing-between-blocks 10) (def spacing-between-blocks 0)
(def parsed-text-block
{:margin-top -4})
(def paragraph
{:margin-top spacing-between-blocks})
(def block (def block
{:margin-top spacing-between-blocks {:border-radius 6
:border-radius 6
:padding-horizontal 3}) :padding-horizontal 3})
(def quote (def quote
{:margin-top spacing-between-blocks {:border-left-width 1
:border-left-width 1
:padding-left 10 :padding-left 10
:border-left-color colors/neutral-40}) :border-left-color colors/neutral-40})

14
src/status_im2/contexts/chat/messages/content/text/view.cljs
View File

@ -79,21 +79,19 @@
(case (keyword type) (case (keyword type)
:paragraph :paragraph
(conj blocks (conj blocks
[rn/view {:style style/paragraph}
(reduce (reduce
(fn [acc e] (fn [acc e]
(render-inline acc e chat-id)) (render-inline acc e chat-id))
[quo/text] [quo/text {:size :paragraph-1}]
children)]) children))
:edited-block :edited-block
(conj blocks (conj blocks
[rn/view {:style style/paragraph}
(reduce (reduce
(fn [acc e] (fn [acc e]
(render-inline acc e chat-id)) (render-inline acc e chat-id))
[quo/text] [quo/text {:size :paragraph-1}]
children)]) children))
:blockquote :blockquote
(conj blocks (conj blocks
@ -124,7 +122,7 @@
(defn render-parsed-text (defn render-parsed-text
[{:keys [content chat-id edited-at]}] [{:keys [content chat-id edited-at]}]
^{:key (:parsed-text content)} ^{:key (:parsed-text content)}
[rn/view {:style style/parsed-text-block} [rn/view
(reduce (fn [acc e] (reduce (fn [acc e]
(render-block acc e chat-id)) (render-block acc e chat-id))
[:<>] [:<>]
@ -134,6 +132,6 @@
(defn text-content (defn text-content
[message-data] [message-data]
[rn/view [:<>
[render-parsed-text message-data] [render-parsed-text message-data]
[link-preview/view message-data]]) [link-preview/view message-data]])

110
src/status_im2/contexts/chat/messages/content/view.cljs
View File

@ -6,6 +6,7 @@
[status-im2.contexts.chat.messages.content.style :as style] [status-im2.contexts.chat.messages.content.style :as style]
[status-im2.contexts.chat.messages.content.pin.view :as pin] [status-im2.contexts.chat.messages.content.pin.view :as pin]
[status-im2.constants :as constants] [status-im2.constants :as constants]
[status-im2.contexts.chat.messages.content.deleted.view :as content.deleted]
[status-im2.contexts.chat.messages.content.unknown.view :as content.unknown] [status-im2.contexts.chat.messages.content.unknown.view :as content.unknown]
[status-im2.contexts.chat.messages.content.text.view :as content.text] [status-im2.contexts.chat.messages.content.text.view :as content.text]
[status-im2.contexts.chat.messages.drawers.view :as drawers] [status-im2.contexts.chat.messages.drawers.view :as drawers]
@ -29,12 +30,12 @@
(def delivery-state-showing-time-ms 3000) (def delivery-state-showing-time-ms 3000)
(defn avatar-container (defn avatar-container
[{:keys [content last-in-group? pinned-by quoted-message from]} message-reaction-view?] [{:keys [content last-in-group? pinned-by quoted-message from]} show-reactions?]
(if (or (and (seq (:response-to content)) (if (or (and (seq (:response-to content))
quoted-message) quoted-message)
last-in-group? last-in-group?
pinned-by pinned-by
message-reaction-view?) (not show-reactions?))
[avatar/avatar from :small] [avatar/avatar from :small]
[rn/view {:padding-top 2 :width 32}])) [rn/view {:padding-top 2 :width 32}]))
@ -46,8 +47,8 @@
quoted-message quoted-message
from from
timestamp]} timestamp]}
message-reaction-view?] show-reactions?]
(when (or (and (seq response-to) quoted-message) last-in-group? pinned-by message-reaction-view?) (when (or (and (seq response-to) quoted-message) last-in-group? pinned-by (not show-reactions?))
(let [[primary-name secondary-name] (rf/sub [:contacts/contact-two-names-by-identity from]) (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])] {:keys [ens-verified added?]} (rf/sub [:contacts/contact-by-address from])]
[quo/author [quo/author
@ -61,17 +62,21 @@
(defn system-message-content (defn system-message-content
[{:keys [content-type quoted-message] :as message-data}] [{:keys [content-type quoted-message] :as message-data}]
(if quoted-message (if quoted-message
[pin/system-message message-data] [pin/pinned-message message-data]
(case content-type (condp = content-type
constants/content-type-system-text [system.text/text-content message-data] constants/content-type-system-text
[system.text/text-content message-data]
constants/content-type-system-pinned-message [system.text/text-content message-data] constants/content-type-system-pinned-message
[system.text/text-content message-data]
constants/content-type-community [not-implemented/not-implemented constants/content-type-community
[not-implemented/not-implemented
[old-message/community message-data]] [old-message/community message-data]]
constants/content-type-contact-request [not-implemented/not-implemented constants/content-type-contact-request
[not-implemented/not-implemented
[old-message/system-contact-request message-data]]))) [old-message/system-contact-request message-data]])))
(declare on-long-press) (declare on-long-press)
@ -79,20 +84,23 @@
(defn user-message-content (defn user-message-content
[] []
(let [show-delivery-state? (reagent/atom false)] (let [show-delivery-state? (reagent/atom false)]
(fn [{:keys [content-type quoted-message content outgoing outgoing-status] :as message-data} (fn [{:keys [message-data context keyboard-shown? show-reactions?]}]
context (let [{:keys [content-type quoted-message content
keyboard-shown? outgoing outgoing-status pinned-by]} message-data
message-reaction-view?] first-image (first (:album message-data))
(let [first-image (first (:album message-data)) outgoing-status (if (= content-type
outgoing-status (if (= content-type constants/content-type-album) constants/content-type-album)
(:outgoing-status first-image) (:outgoing-status first-image)
outgoing-status) outgoing-status)
outgoing (if (= content-type constants/content-type-album) outgoing (if (= content-type
constants/content-type-album)
(:outgoing first-image) (:outgoing first-image)
outgoing) outgoing)
context (assoc context context (assoc context
:on-long-press :on-long-press
#(on-long-press message-data context keyboard-shown?)) #(on-long-press message-data
context
keyboard-shown?))
response-to (:response-to content) response-to (:response-to content)
height (rf/sub [:dimensions/window-height])] height (rf/sub [:dimensions/window-height])]
[rn/touchable-highlight [rn/touchable-highlight
@ -101,6 +109,7 @@
:message-sent) :message-sent)
:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90) :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90)
:style {:border-radius 16 :style {:border-radius 16
:padding 8
:opacity (if (and outgoing (= outgoing-status :sending)) 0.5 1)} :opacity (if (and outgoing (= outgoing-status :sending)) 0.5 1)}
:on-press (fn [] :on-press (fn []
(if (and platform/ios? keyboard-shown?) (if (and platform/ios? keyboard-shown?)
@ -112,24 +121,28 @@
(js/setTimeout #(reset! show-delivery-state? false) (js/setTimeout #(reset! show-delivery-state? false)
delivery-state-showing-time-ms)))) delivery-state-showing-time-ms))))
:on-long-press #(on-long-press message-data context keyboard-shown?)} :on-long-press #(on-long-press message-data context keyboard-shown?)}
[rn/view {:style {:padding-vertical 4}} [:<>
(when pinned-by
[pin/pinned-by-view pinned-by])
(when (and (seq response-to) quoted-message) (when (and (seq response-to) quoted-message)
[reply/quoted-message quoted-message]) [reply/quoted-message quoted-message])
[rn/view [rn/view
{:style {:padding-horizontal 12 {:style {:padding-horizontal 4
:flex-direction :row}} :flex-direction :row}}
[avatar-container message-data message-reaction-view?] [avatar-container message-data show-reactions?]
(into (into
(if message-reaction-view? (if show-reactions?
[gesture/scroll-view] [rn/view]
[rn/view]) [gesture/scroll-view])
[{:style {:margin-left 8 [{:style {:margin-left 8
:flex 1 :flex 1
:max-height (when message-reaction-view? (* 0.4 height))}} :max-height (when-not show-reactions?
[author message-data message-reaction-view?] (* 0.4 height))}}
[author message-data show-reactions?]
(case content-type (case content-type
constants/content-type-text [content.text/text-content message-data context] constants/content-type-text
[content.text/text-content message-data context]
constants/content-type-emoji constants/content-type-emoji
[not-implemented/not-implemented [old-message/emoji message-data]] [not-implemented/not-implemented [old-message/emoji message-data]]
@ -146,34 +159,49 @@
constants/content-type-album constants/content-type-album
[album/album-message message-data context on-long-press] [album/album-message message-data context on-long-press]
[not-implemented/not-implemented [content.unknown/unknown-content message-data]]) [not-implemented/not-implemented
[content.unknown/unknown-content message-data]])
(when @show-delivery-state? (when @show-delivery-state?
[status/status outgoing-status])])]]])))) [status/status outgoing-status])])]
(when show-reactions?
[reactions/message-reactions-row message-data
[rn/view {:pointer-events :none}
[user-message-content
{:message-data message-data
:context context
:keyboard-shown? keyboard-shown?
:show-reactions? false}]]])]]))))
(defn on-long-press (defn on-long-press
[message-data context keyboard-shown] [message-data context keyboard-shown?]
(rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:show-bottom-sheet (rf/dispatch [:show-bottom-sheet
{:content (drawers/reactions-and-actions message-data context) {:content (drawers/reactions-and-actions message-data context)
:selected-item (fn [] :selected-item (fn []
[rn/view {:pointer-events :none} [rn/view {:pointer-events :none}
[user-message-content message-data context keyboard-shown true]])}])) [user-message-content
{:message-data message-data
:context context
:keyboard-shown? keyboard-shown?
:show-reactions? true}]])}]))
(defn message-with-reactions (defn message
[{:keys [pinned-by mentioned in-pinned-view? content-type last-in-group?] :as message-data} [{:keys [pinned-by mentioned in-pinned-view? content-type last-in-group? deleted? deleted-for-me?]
context :as message-data} context keyboard-shown?]
keyboard-shown] (if (or deleted? deleted-for-me?)
[rn/view {:style (style/message-container)}
[content.deleted/deleted-message message-data context]]
[rn/view [rn/view
{:style (style/message-container in-pinned-view? pinned-by mentioned last-in-group?) {:style (style/message-container in-pinned-view? pinned-by mentioned last-in-group?)
:accessibility-label :chat-item} :accessibility-label :chat-item}
(when pinned-by
[pin/pinned-by-view pinned-by])
(if (#{constants/content-type-system-text constants/content-type-community (if (#{constants/content-type-system-text constants/content-type-community
constants/content-type-contact-request constants/content-type-contact-request
constants/content-type-system-pinned-message} constants/content-type-system-pinned-message}
content-type) content-type)
[system-message-content message-data] [system-message-content message-data]
[user-message-content message-data context keyboard-shown false]) [user-message-content
[reactions/message-reactions-row message-data {:message-data message-data
[rn/view {:pointer-events :none} :context context
[user-message-content message-data context keyboard-shown true]]]]) :keyboard-shown? keyboard-shown?
:show-reactions? true}])]))

12
src/status_im2/contexts/chat/messages/list/view.cljs
View File

@ -11,9 +11,7 @@
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[status-im.ui.screens.chat.group :as chat.group] [status-im.ui.screens.chat.group :as chat.group]
[status-im.ui.screens.chat.message.gap :as message.gap] [status-im.ui.screens.chat.message.gap :as message.gap]
[status-im2.common.not-implemented :as not-implemented]
[status-im2.constants :as constants] [status-im2.constants :as constants]
[status-im2.contexts.chat.messages.content.deleted.view :as content.deleted]
[status-im2.contexts.chat.messages.content.view :as message] [status-im2.contexts.chat.messages.content.view :as message]
[status-im2.contexts.chat.messages.list.state :as state] [status-im2.contexts.chat.messages.list.state :as state]
[status-im2.contexts.chat.messages.list.style :as style] [status-im2.contexts.chat.messages.list.style :as style]
@ -234,7 +232,7 @@
(reset! messages-view-header-height (+ height y)))) (reset! messages-view-header-height (+ height y))))
(defn render-fn (defn render-fn
[{:keys [type value deleted? deleted-for-me? content-type] :as message-data} _ _ [{:keys [type value content-type] :as message-data} _ _
{:keys [context keyboard-shown?]}] {:keys [context keyboard-shown?]}]
;;TODO temporary hide mutual-state-updates https://github.com/status-im/status-mobile/issues/16254 ;;TODO temporary hide mutual-state-updates https://github.com/status-im/status-mobile/issues/16254
(when (not= content-type constants/content-type-system-mutual-state-update) (when (not= content-type constants/content-type-system-mutual-state-update)
@ -243,12 +241,8 @@
(if (= type :datemark) (if (= type :datemark)
[quo/divider-date value] [quo/divider-date value]
(if (= content-type constants/content-type-gap) (if (= content-type constants/content-type-gap)
[not-implemented/not-implemented [message.gap/gap message-data]
[message.gap/gap message-data]] [message/message message-data context keyboard-shown?]))]))
[rn/view {:padding-horizontal 8}
(if (or deleted? deleted-for-me?)
[content.deleted/deleted-message message-data context]
[message/message-with-reactions message-data context keyboard-shown?])]))]))
(defn scroll-handler (defn scroll-handler
[event scroll-y] [event scroll-y]