diff --git a/src/status_im/ui/screens/desktop/main/chat/styles.cljs b/src/status_im/ui/screens/desktop/main/chat/styles.cljs index 3b195c1dec..15a240925f 100644 --- a/src/status_im/ui/screens/desktop/main/chat/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/chat/styles.cljs @@ -132,6 +132,9 @@ (def message-text {:font-size 14}) +(def message-container + {:flex-direction :column}) + (def message-wrapper {:flex-direction :row :flex-wrap :wrap}) @@ -208,3 +211,51 @@ {:margin-bottom 4 :font-size 14 :color colors/black}) + +(def reply-wrapper + {:flex-direction :column-reverse}) + +(def reply-photo-style + {:width 40 + :height 40 + :margin-right 5}) + +(def reply-container + {:flex-direction :row + :align-items :flex-start + :border-width 1 + :border-radius 10 + :border-color colors/gray-light + :margin 10}) + +(def reply-content-container + {:flex-direction :column + :padding-bottom 10}) + +(def reply-content-author + {:margin-top 5 + :color colors/gray + :font-size 12 + :padding-bottom 3}) + +(def reply-content-message + {:padding-left 7 + :margin-right 50 + :max-height 140 + :overflow :scroll}) + +(def reply-close-highlight + {:position :absolute + :z-index 5 + :top 3 + :right 8 + :height 26}) + +(def reply-close-icon + {:border-radius 12 + :background-color colors/gray + :tint-color colors/white}) + +(defn reply-icon [outgoing] + {:tint-color (if outgoing colors/wild-blue-yonder colors/gray)}) + diff --git a/src/status_im/ui/screens/desktop/main/chat/views.cljs b/src/status_im/ui/screens/desktop/main/chat/views.cljs index d809934b7d..377524a6fb 100644 --- a/src/status_im/ui/screens/desktop/main/chat/views.cljs +++ b/src/status_im/ui/screens/desktop/main/chat/views.cljs @@ -5,7 +5,6 @@ [clojure.string :as string] [status-im.ui.screens.chat.styles.message.message :as message.style] [status-im.ui.screens.chat.message.message :as message] - [status-im.utils.gfycat.core :as gfycat.core] [taoensso.timbre :as log] [reagent.core :as reagent] [status-im.ui.screens.chat.utils :as chat-utils] @@ -91,17 +90,32 @@ photo-path)} :style styles/photo-style}]]))) -(views/defview message-with-timestamp [text {:keys [timestamp outgoing] :as message} style] +(views/defview quoted-message [{:keys [from text]} outgoing current-public-key] + (views/letsubs [username [:get-contact-name-by-identity from]] + [react/view {:style (message.style/quoted-message-container outgoing)} + [react/view {:style message.style/quoted-message-author-container} + [icons/icon :icons/reply {:style (styles/reply-icon outgoing)}] + [react/text {:style (message.style/quoted-message-author outgoing)} + (chat-utils/format-reply-author from username current-public-key)]] + [react/text {:style (message.style/quoted-message-text outgoing) + :number-of-lines 5} + text]])) + +(views/defview message-with-timestamp [text {:keys [message-id timestamp outgoing content current-public-key] :as message} style] [react/view {:style style} - [react/view {:style styles/message-wrapper} - [react/text {:style (styles/message-text message) - :selectable true - :selection-color (if outgoing colors/white colors/hawkes-blue)} - text] - [react/text {:style (styles/message-timestamp-placeholder)} - (time/timestamp->time timestamp)] - [react/text {:style (styles/message-timestamp)} - (time/timestamp->time timestamp)]]]) + [react/touchable-highlight {:on-press #(re-frame/dispatch [:chat.ui/reply-to-message message-id])} + [react/view {:style styles/message-container} + (when (:response-to content) + [quoted-message (:response-to content) outgoing current-public-key]) + [react/view {:style styles/message-wrapper} + [react/text {:style (styles/message-text message) + :selectable true + :selection-color (if outgoing colors/white colors/hawkes-blue)} + text] + [react/text {:style (styles/message-timestamp-placeholder)} + (time/timestamp->time timestamp)] + [react/text {:style (styles/message-timestamp)} + (time/timestamp->time timestamp)]]]]]) (views/defview text-only-message [text message] [react/view {:style (styles/message-row message)} @@ -212,6 +226,35 @@ [react/view {:style (styles/send-icon empty?)} [icons/icon :icons/arrow-left {:style (styles/send-icon-arrow empty?)}]]]))) +(views/defview reply-message [from message-text] + (views/letsubs [username [:get-contact-name-by-identity from] + current-public-key [:get-current-public-key]] + [react/view {:style styles/reply-content-container} + [react/text {:style styles/reply-content-author} + (chat-utils/format-reply-author from username current-public-key)] + [react/text {:style styles/reply-content-message} message-text]])) + +(views/defview reply-member-photo [from] + (letsubs [photo-path [:get-photo-path from]] + [react/image {:source {:uri (if (string/blank? photo-path) + (identicon/identicon from) + photo-path)} + :style styles/reply-photo-style}])) + +(views/defview reply-message-view [] + (views/letsubs [{:keys [content from] :as message} [:get-reply-message]] + (when message + [react/view {:style styles/reply-wrapper} + [react/view {:style styles/reply-container} + [reply-member-photo from] + [reply-message from (:text content)]] + [react/touchable-highlight + {:style styles/reply-close-highlight + :on-press #(re-frame/dispatch [:chat.ui/cancel-message-reply]) + :accessibility-label :cancel-message-reply} + [react/view {} + [icons/icon :icons/close {:style styles/reply-close-icon}]]]]))) + (views/defview chat-text-input [chat-id input-text] (views/letsubs [inp-ref (atom nil)] {:component-will-update @@ -253,6 +296,7 @@ [react/view {:style styles/chat-view} [toolbar-chat-view current-chat] [messages-view current-chat] + [reply-message-view] [chat-text-input chat-id input-text]])) (views/defview chat-profile []