diff --git a/src/status_im/chat/styles/message/message.cljs b/src/status_im/chat/styles/message/message.cljs index 1b76db9f67..c1163d2784 100644 --- a/src/status_im/chat/styles/message/message.cljs +++ b/src/status_im/chat/styles/message/message.cljs @@ -61,6 +61,12 @@ (assoc (message-timestamp false) :color styles/color-white)) +(def message-expand-button + {:color colors/gray + :font-size 12 + :opacity 0.7 + :margin-bottom 1}) + (def selected-message {:margin-top 18 :margin-left 40 @@ -125,9 +131,10 @@ {:padding-top 4}) (defn text-message - [{:keys [outgoing group-chat incoming-group]}] + [{:keys [incoming-group]} collapsed?] (merge style-message-text - {:margin-top (if incoming-group 4 0)})) + {:margin-top (if incoming-group 4 0) + :margin-bottom (if collapsed? 2 0)})) (defnstyle emoji-message [{:keys [incoming-group]}] diff --git a/src/status_im/chat/views/message/message.cljs b/src/status_im/chat/views/message/message.cljs index 1827049d80..a049c3ee7d 100644 --- a/src/status_im/chat/views/message/message.cljs +++ b/src/status_im/chat/views/message/message.cljs @@ -178,13 +178,42 @@ (def cached-parse-text (memoize parse-text)) +(def ^:private ^:const number-of-lines 20) +(def ^:private ^:const number-of-chars 600) + +(defn- should-collapse? [text group-chat?] + (and group-chat? + (or (<= number-of-chars (count text)) + (<= number-of-lines (count (re-seq #"\n" text)))))) + +(defn- expand-button [collapsed? on-press] + [react/text {:style style/message-expand-button + :on-press on-press} + (i18n/label (if @collapsed? :show-more :show-less))]) + (defn text-message - [{:keys [content timestamp-str] :as message}] + [{:keys [content timestamp-str group-chat] :as message}] [message-view message - (let [parsed-text (cached-parse-text content :browse-link-from-message)] - [react/text {:style (style/text-message message)} - parsed-text - [react/text {:style style/message-timestamp-placeholder} (timestamp-with-padding timestamp-str)]]) + (let [parsed-text (cached-parse-text content :browse-link-from-message) + ref (reagent/atom nil) + collapsible? (should-collapse? content group-chat) + collapsed? (reagent/atom collapsible?) + on-press (when collapsible? + #(do + (.setNativeProps @ref + (clj->js {:numberOfLines + (when-not @collapsed? + number-of-lines)})) + (reset! collapsed? (not @collapsed?))))] + [react/view + [react/text {:style (style/text-message message collapsible?) + :number-of-lines (when collapsible? number-of-lines) + :ref (partial reset! ref) + :on-press on-press} + parsed-text + [react/text {:style style/message-timestamp-placeholder} (timestamp-with-padding timestamp-str)]] + (when collapsible? + [expand-button collapsed? on-press])]) {:justify-timestamp? true}]) (defn emoji-message diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index a0c98e159d..d7cf3668c6 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -243,6 +243,8 @@ :empty-chat-description "There are no messages \nin this chat yet" :empty-chat-description-console "Look under the hood! Console is a javascript runtime environment that exposes the whole web3 API. Type \"web3.\" to get started." :counter-99-plus "99+" + :show-more "Show more" + :show-less "Show less" ;;discover :discover "Discover"