Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reply component in chat input & quoted messages redesign #13706

Merged
merged 1 commit into from
Aug 3, 2022
Merged

Reply component in chat input & quoted messages redesign #13706

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added resources/images/icons/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/status_im/ui/screens/chat/components/edit.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
[rn/view {:style {:flex-direction :row}}
[rn/view {}
[icons/icon :tiny-icons/tiny-edit {:container-style {:margin-top 5}}]]
[rn/view {:style (styles/reply-content)}
[rn/view {:style (styles/reply-content-old)}
[quo/text {:weight :medium
:number-of-lines 1}
(i18n/label :t/editing-message)]]
Expand Down
91 changes: 83 additions & 8 deletions src/status_im/ui/screens/chat/components/reply.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,19 @@
[status-im.ethereum.stateofus :as stateofus]
[status-im.ui.screens.chat.components.style :as styles]
[re-frame.core :as re-frame]
[clojure.string :as string]))
[clojure.string :as string]
[quo2.foundations.colors :as quo2.colors :refer [theme-colors]]
[quo2.components.button :as quo2.button]
[quo2.components.text :as quo2.text]
[status-im.ui.screens.chat.photos :as photos]
[status-im.constants :as constants]))

(def ^:private reply-symbol "↪ ")

(defn input-focus [text-input-ref]
(some-> ^js (quo.react/current-ref text-input-ref) .focus))

(defn format-author [contact-name]
(defn format-author-old [contact-name]
(let [author (if (or (= (aget contact-name 0) "@")
;; in case of replies
(= (aget contact-name 1) "@"))
Expand All @@ -25,10 +30,24 @@
contact-name)]
(i18n/label :replying-to {:author author})))

(defn format-reply-author [from username current-public-key]
(defn format-author [contact-name]
(let [author (if (or (= (aget contact-name 0) "@")
;; in case of replies
(= (aget contact-name 1) "@"))
(or (stateofus/username contact-name)
(subs contact-name 0 81))
contact-name)]
author))

(defn format-reply-author-old [from username current-public-key]
(or (and (= from current-public-key)
(str reply-symbol (i18n/label :t/You)))
(str reply-symbol (format-author username))))
(str reply-symbol (format-author-old username))))

(defn format-reply-author [from username current-public-key]
(or (and (= from current-public-key)
(i18n/label :t/You))
(format-author username)))

(defn get-quoted-text-with-mentions [parsed-text]
(string/join
Expand All @@ -47,21 +66,62 @@
literal))
parsed-text)))

(defn reply-message [{:keys [from]}]
(defn reply-message-old [{:keys [from]}]
(let [contact-name @(re-frame/subscribe [:contacts/contact-name-by-identity from])
current-public-key @(re-frame/subscribe [:multiaccount/public-key])]
[rn/view {:style {:flex-direction :row}}
[rn/view {:style (styles/reply-content)}
[rn/view {:style (styles/reply-content-old)}
[quo/text {:weight :medium
:number-of-lines 1
:style {:line-height 18}}
(format-reply-author from contact-name current-public-key)]]
(format-reply-author-old from contact-name current-public-key)]]
[rn/view
[pressable/pressable {:on-press #(re-frame/dispatch [:chat.ui/cancel-message-reply])
:accessibility-label :cancel-message-reply}
[icons/icon :main-icons/close-circle {:container-style (styles/close-button)
:color (:icon-02 @quo.colors/theme)}]]]]))

(defn reply-message [{:keys [from identicon content-type contentType parsed-text content]} in-chat-input?]
(let [contact-name @(re-frame/subscribe [:contacts/contact-name-by-identity from])
current-public-key @(re-frame/subscribe [:multiaccount/public-key])
content-type (or content-type contentType)]
[rn/view {:style {:flex-direction :row :height 24}}
[rn/view {:style (styles/reply-content)}
[icons/icon :main-icons/connector {:color (theme-colors quo2.colors/neutral-40 quo2.colors/neutral-60)
:container-style {:position :absolute :left 10 :bottom -4 :width 16 :height 16}}]
[rn/view {:style {:position :absolute :left 34 :right 54 :top 3 :flex-direction :row :align-items :center}}
[photos/member-photo from identicon 16]
[quo2.text/text {:weight :semi-bold
:size :paragraph-2
:number-of-lines 1
:style {:margin-left 4}}
(format-reply-author from contact-name current-public-key)]
[quo2.text/text {:number-of-lines 1
:size :label
:weight :regular
:style (merge {:ellipsize-mode :tail
:text-transform :none
:margin-left 4
:margin-top 2}
(when (or (= constants/content-type-image content-type)
(= constants/content-type-sticker content-type)
(= constants/content-type-audio content-type))
{:color (theme-colors quo2.colors/neutral-50 quo2.colors/neutral-40)}))}
(case (or content-type contentType)
constants/content-type-image "Image"
constants/content-type-sticker "Sticker"
constants/content-type-audio "Audio"
(get-quoted-text-with-mentions (or parsed-text (:parsed-text content))))]]]
(when in-chat-input?
[quo2.button/button {:width 24
:size 24
:type :outline
:accessibility-label :reply-cancel-button
:on-press #(re-frame/dispatch [:chat.ui/cancel-message-reply])}
[icons/icon :main-icons/close {:width 16
:height 16
:color (theme-colors quo2.colors/black quo2.colors/neutral-40)}]])]))

(defn send-image [images]
[rn/view {:style (styles/reply-container-image)}
[rn/scroll-view {:horizontal true
Expand All @@ -86,12 +146,27 @@
(when reply
(js/setTimeout #(input-focus text-input-ref) 250))))

(defn reply-message-wrapper-old [reply]
[rn/view {:style {:padding-horizontal 15
:border-top-width 1
:border-top-color (:ui-01 @quo.colors/theme)
:padding-vertical 8}}
[reply-message-old reply]])

(defn reply-message-wrapper [reply]
[rn/view {:style {:padding-horizontal 15
:border-top-width 1
:border-top-color (:ui-01 @quo.colors/theme)
:padding-vertical 8}}
[reply-message reply]])
[reply-message reply true]])

(defn reply-message-auto-focus-wrapper-old [text-input-ref]
(let [had-reply (atom nil)]
(fn []
(let [reply @(re-frame/subscribe [:chats/reply-message])]
(focus-input-on-reply reply had-reply text-input-ref)
(when reply
[reply-message-wrapper-old reply])))))

(defn reply-message-auto-focus-wrapper [text-input-ref]
(let [had-reply (atom nil)]
Expand Down
7 changes: 6 additions & 1 deletion src/status_im/ui/screens/chat/components/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,11 +87,16 @@
(defn reply-container []
{:flex-direction :row})

(defn reply-content []
(defn reply-content-old []
{:padding-vertical 6
:padding-horizontal 10
:flex 1})

(defn reply-content []
{:padding-horizontal 10
:flex 1
:flex-direction :row})

(defn contact-request-content []
{:flex 1
:flex-direction :row
Expand Down
153 changes: 66 additions & 87 deletions src/status_im/ui/screens/chat/message/message.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,27 +87,9 @@
timestamp-str]])))

(defview quoted-message
[_ {:keys [from parsed-text image]} current-public-key public? pinned]
(letsubs [contact-name [:contacts/contact-name-by-identity from]]
[react/view {:style (style/quoted-message-container)}
[react/view {:style style/quoted-message-author-container}
[chat.utils/format-reply-author
from
contact-name
current-public-key
(partial style/quoted-message-author (not pinned))
false]]
(if (and image
;; Disabling images for public-chats
(not public?))
[fast-image/fast-image {:style {:width 56
:height 56
:background-color :black
:border-radius 4}
:source {:uri image}}]
[react/text {:style (style/quoted-message-text)
:number-of-lines 5}
(components.reply/get-quoted-text-with-mentions parsed-text)])]))
[_ reply]
[react/view {:style (style/quoted-message-container)}
[components.reply/reply-message reply false]])

(defn render-inline [message-text content-type acc {:keys [type literal destination]}]
(case type
Expand Down Expand Up @@ -312,37 +294,40 @@
identicon
from in-popover? timestamp-str]
:as message} content {:keys [modal close-modal]}]
[react/view {:style (style/message-wrapper message)
:pointer-events :box-none
:accessibility-label :chat-item}
[react/view {:style (style/message-body)
:pointer-events :box-none}
[react/view (style/message-author-userpic)
(when last-in-group?
[react/touchable-highlight {:on-press #(do (when modal (close-modal))
(re-frame/dispatch [:chat.ui/show-profile from]))}
[photos/member-photo from identicon]])]
[react/view {:style (style/message-author-wrapper)}
(when last-in-group?
[react/view {:style {:flex-direction :row :align-items :center}}
[react/touchable-opacity {:style style/message-author-touchable
:disabled in-popover?
:on-press #(do (when modal (close-modal))
(re-frame/dispatch [:chat.ui/show-profile from]))}
[message-author-name from {:modal modal}]]
[react/text
{:style (merge
{:padding-left 5
:margin-top 2}
(style/message-timestamp-text))
:accessibility-label :message-timestamp}
timestamp-str]])
(let [response-to (:response-to (:content message))]
[react/view {:style (style/message-wrapper message)
:pointer-events :box-none
:accessibility-label :chat-item}
(when (and (seq response-to) (:quoted-message message))
[quoted-message response-to (:quoted-message message)])
[react/view {:style (style/message-body)
:pointer-events :box-none}
[react/view (style/message-author-userpic)
(when (or (and (seq response-to) (:quoted-message message)) last-in-group?)
[react/touchable-highlight {:on-press #(do (when modal (close-modal))
(re-frame/dispatch [:chat.ui/show-profile from]))}
[photos/member-photo from identicon]])]
[react/view {:style (style/message-author-wrapper)}
(when (or (and (seq response-to) (:quoted-message message)) last-in-group?)
[react/view {:style {:flex-direction :row :align-items :center}}
[react/touchable-opacity {:style style/message-author-touchable
:disabled in-popover?
:on-press #(do (when modal (close-modal))
(re-frame/dispatch [:chat.ui/show-profile from]))}
[message-author-name from {:modal modal}]]
[react/text
{:style (merge
{:padding-left 5
:margin-top 2}
(style/message-timestamp-text))
:accessibility-label :message-timestamp}
timestamp-str]])
;;MESSAGE CONTENT
content
[link-preview/link-preview-wrapper (:links (:content message)) false false]]]
content
[link-preview/link-preview-wrapper (:links (:content message)) false false]]]
; delivery status
[react/view (style/delivery-status)
[message-delivery-status message]]])
[react/view (style/delivery-status)
[message-delivery-status message]]]))

(def image-max-width 260)
(def image-max-height 192)
Expand Down Expand Up @@ -449,7 +434,7 @@
(defn collapsible-text-message [_ _]
(let [collapsed? (reagent/atom false)
show-timestamp? (reagent/atom false)]
(fn [{:keys [content current-public-key public? pinned in-popover?] :as message} on-long-press modal]
(fn [{:keys [content in-popover?] :as message} on-long-press modal]
[react/touchable-highlight
(when-not modal
{:on-press (fn [_]
Expand All @@ -466,11 +451,8 @@
[message-timestamp message show-timestamp?]
[react/view {:style (style/message-view message)}
[react/view {:style (style/message-view-content)}
(let [response-to (:response-to content)]
[react/view
(when (and (seq response-to) (:quoted-message message))
[quoted-message response-to (:quoted-message message) current-public-key public? pinned])
[render-parsed-text-with-message-status message (:parsed-text content)]])]]]])))
[react/view
[render-parsed-text-with-message-status message (:parsed-text content)]]]]]])))

(defmethod ->message constants/content-type-text
[message {:keys [on-long-press modal] :as reaction-picker}]
Expand All @@ -494,39 +476,36 @@

(defmethod ->message constants/content-type-emoji []
(let [show-timestamp? (reagent/atom false)]
(fn [{:keys [content current-public-key outgoing public? pinned in-popover? message-pin-enabled] :as message}
(fn [{:keys [content pinned in-popover? message-pin-enabled] :as message}
{:keys [on-long-press modal]
:as reaction-picker}]
(let [response-to (:response-to content)]
[message-content-wrapper message
[react/touchable-highlight (when-not modal
{:disabled in-popover?
:on-press (fn []
(react/dismiss-keyboard!)
(reset! show-timestamp? true))
:delay-long-press 100
:on-long-press (fn []
(on-long-press
(concat
[{:on-press #(re-frame/dispatch [:chat.ui/reply-to-message message])
:id :reply
:label (i18n/label :t/message-reply)}
{:on-press #(react/copy-to-clipboard (get content :text))
:id :copy
:label (i18n/label :t/sharing-copy-to-clipboard)}]
(when message-pin-enabled [{:on-press #(pin-message message)
:label (if pinned (i18n/label :t/unpin) (i18n/label :t/pin))}]))))})
[react/view style/message-view-wrapper
[message-timestamp message show-timestamp?]
[react/view (style/message-view message)
[react/view {:style (style/message-view-content)}
[react/view {:style (style/style-message-text)}
(when (and (seq response-to) (:quoted-message message))
[quoted-message response-to (:quoted-message message) outgoing current-public-key public? pinned])
[react/text {:style (style/emoji-message message)}
(:text content)]]
[message-status message]]]]]
reaction-picker]))))
[message-content-wrapper message
[react/touchable-highlight (when-not modal
{:disabled in-popover?
:on-press (fn []
(react/dismiss-keyboard!)
(reset! show-timestamp? true))
:delay-long-press 100
:on-long-press (fn []
(on-long-press
(concat
[{:on-press #(re-frame/dispatch [:chat.ui/reply-to-message message])
:id :reply
:label (i18n/label :t/message-reply)}
{:on-press #(react/copy-to-clipboard (get content :text))
:id :copy
:label (i18n/label :t/sharing-copy-to-clipboard)}]
(when message-pin-enabled [{:on-press #(pin-message message)
:label (if pinned (i18n/label :t/unpin) (i18n/label :t/pin))}]))))})
[react/view style/message-view-wrapper
[message-timestamp message show-timestamp?]
[react/view (style/message-view message)
[react/view {:style (style/message-view-content)}
[react/view {:style (style/style-message-text)}
[react/text {:style (style/emoji-message message)}
(:text content)]]
[message-status message]]]]]
reaction-picker])))

(defmethod ->message constants/content-type-sticker
[{:keys [content from outgoing in-popover?]
Expand Down
13 changes: 9 additions & 4 deletions src/status_im/ui/screens/chat/photos.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,15 @@
[memo-photo-rend photo-path size accessibility-label (colors/dark?)])

;; We optionally pass identicon for perfomance reason, so it does not have to be calculated for each message
(defn member-photo [pub-key identicon]
(let [path @(re-frame/subscribe [:chats/photo-path pub-key identicon])]
[photo path {:size style/default-size
:accessibility-label :member-photo}]))
(defn member-photo
([pub-key]
(member-photo pub-key nil))
([pub-key identicon]
(member-photo pub-key identicon style/default-size))
([pub-key identicon size]
(let [path @(re-frame/subscribe [:chats/photo-path pub-key identicon])]
[photo path {:size size
:accessibility-label :member-photo}])))

(defn account-photo [account]
(let [path (multiaccounts/displayed-photo account)]
Expand Down
9 changes: 3 additions & 6 deletions src/status_im/ui/screens/chat/styles/message/message.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,12 +209,9 @@
:text-align-vertical :center})

(defn quoted-message-container []
{:margin-bottom 6
:padding-bottom 6
:border-bottom-color colors/black-transparent
:border-bottom-width 2
:border-bottom-left-radius 2
:border-bottom-right-radius 2})
{:margin-bottom 6
:margin-top 5
:padding-horizontal 15})

(def quoted-message-author-container
{:flex-direction :row
Expand Down
Loading