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

Fix android text overflow 

Fixes #11575

Move the overflow handler to separate view

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
This commit is contained in:
Gheorghe Pinzaru 2020-12-24 13:14:51 +03:00
parent 52823d7f59
commit 8948dcb736
No known key found for this signature in database
GPG Key ID: C9A094959935A952
2 changed files with 68 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,7 +38,7 @@
{:align-self :flex-end {:align-self :flex-end
:position :absolute :position :absolute
:bottom 9 ; 6 Bubble bottom, 3 message baseline :bottom 9 ; 6 Bubble bottom, 3 message baseline
(if (:rtl? content) :left :right) 12 (if (:rtl? content) :left :right) 0
:flex-direction :row :flex-direction :row
:align-items :flex-end}) :align-items :flex-end})
(when (and outgoing justify-timestamp?) (when (and outgoing justify-timestamp?)
@ -348,7 +348,7 @@
[react/view {:accessibility-label :chat-item} [react/view {:accessibility-label :chat-item}
[react/view (style/system-message-body message) [react/view (style/system-message-body message)
[react/view (style/message-view message) [react/view (style/message-view message)
[react/view [react/view (style/message-view-content)
[render-parsed-text message (:parsed-text content)]]]]]) [render-parsed-text message (:parsed-text content)]]]]])
(def message-height-px 200) (def message-height-px 200)
@ -367,6 +367,10 @@
(let [collapsed? (reagent/atom false) (let [collapsed? (reagent/atom false)
collapsible? (reagent/atom false)] collapsible? (reagent/atom false)]
(fn [{:keys [content outgoing current-public-key public?] :as message} on-long-press modal] (fn [{:keys [content outgoing current-public-key public?] :as message} on-long-press modal]
(let [max-height (when-not (or outgoing modal)
(if @collapsible?
(if @collapsed? message-height-px nil)
message-height-px))]
[react/touchable-highlight [react/touchable-highlight
(when-not modal (when-not modal
{:on-press (fn [_] {:on-press (fn [_]
@ -376,11 +380,9 @@
(do (reset! collapsed? false) (do (reset! collapsed? false)
(js/setTimeout #(on-long-press-fn on-long-press message content) 200)) (js/setTimeout #(on-long-press-fn on-long-press message content) 200))
(on-long-press-fn on-long-press message content)))}) (on-long-press-fn on-long-press message content)))})
[react/view (assoc (style/message-view message) [react/view {:style (style/message-view message)}
:max-height (when-not (or outgoing modal) [react/view {:style (style/message-view-content)
(if @collapsible? :max-height max-height}
(if @collapsed? message-height-px nil)
message-height-px)))
(let [response-to (:response-to content)] (let [response-to (:response-to content)]
[react/view {:on-layout [react/view {:on-layout
#(when (and (> (.-nativeEvent.layout.height ^js %) max-message-height-px) #(when (and (> (.-nativeEvent.layout.height ^js %) max-message-height-px)
@ -410,7 +412,7 @@
:style {:align-self :center :margin 5}} :style {:align-self :center :margin 5}}
[react/view (style/collapse-button) [react/view (style/collapse-button)
[vector-icons/icon :main-icons/dropdown-up [vector-icons/icon :main-icons/dropdown-up
{:color colors/white}]]]))]]))) {:color colors/white}]]]))]]]))))
(defmethod ->message constants/content-type-text (defmethod ->message constants/content-type-text
[message {:keys [on-long-press modal] :as reaction-picker}] [message {:keys [on-long-press modal] :as reaction-picker}]
@ -447,12 +449,13 @@
{:on-press #(react/copy-to-clipboard (get content :text)) {:on-press #(react/copy-to-clipboard (get content :text))
:label (i18n/label :t/sharing-copy-to-clipboard)}]))}) :label (i18n/label :t/sharing-copy-to-clipboard)}]))})
[react/view (style/message-view message) [react/view (style/message-view message)
[react/view {:style (style/message-view-content)}
[react/view {:style (style/style-message-text outgoing)} [react/view {:style (style/style-message-text outgoing)}
(when (and (seq response-to) (:quoted-message message)) (when (and (seq response-to) (:quoted-message message))
[quoted-message response-to (:quoted-message message) outgoing current-public-key public?]) [quoted-message response-to (:quoted-message message) outgoing current-public-key public?])
[react/text {:style (style/emoji-message message)} [react/text {:style (style/emoji-message message)}
(:text content)]] (:text content)]]
[message-timestamp message]]] [message-timestamp message]]]]
reaction-picker])) reaction-picker]))
(defmethod ->message constants/content-type-sticker (defmethod ->message constants/content-type-sticker
@ -498,7 +501,8 @@
{:on-long-press {:on-long-press
(fn [] (on-long-press []))}) (fn [] (on-long-press []))})
[react/view {:style (style/message-view message) :accessibility-label :audio-message} [react/view {:style (style/message-view message) :accessibility-label :audio-message}
[message.audio/message-content message [message-timestamp message false]]]] [react/view {:style (style/message-view-content)}
[message.audio/message-content message [message-timestamp message false]]]]]
reaction-picker]) reaction-picker])
(defmethod ->message :default [message] (defmethod ->message :default [message]

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

@ -122,7 +122,7 @@
:border-top-right-radius 16 :border-top-right-radius 16
:border-bottom-right-radius 16 :border-bottom-right-radius 16
:border-bottom-left-radius 16 :border-bottom-left-radius 16
:padding-vertical 6 :padding-top 6
:padding-horizontal 12 :padding-horizontal 12
:border-radius 8 :border-radius 8
:margin-top (if (and last-in-group? :margin-top (if (and last-in-group?
@ -142,6 +142,10 @@
(when (= content-type constants/content-type-emoji) (when (= content-type constants/content-type-emoji)
{:flex-direction :row}))) {:flex-direction :row})))
(defn message-view-content []
{:padding-bottom 6
:overflow :hidden})
(def status-container (def status-container
{:padding-horizontal 5}) {:padding-horizontal 5})