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

feat: style delivery states 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2023-01-31 16:33:38 -03:00
parent 0472140f02
commit 0202af8070
No known key found for this signature in database
GPG Key ID: 59EB921E0706B48F
11 changed files with 128 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons2/12x12/delivered@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 473 B

BIN
resources/images/icons2/12x12/delivered@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 597 B

BIN
resources/images/icons2/12x12/sent@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 423 B

BIN
resources/images/icons2/12x12/sent@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 520 B

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

@ -3,7 +3,8 @@
[quo2.foundations.colors :as quo2.colors]
[status-im2.constants :as constants]
[status-im.ui.components.react :as react]
[status-im.ui.screens.chat.styles.photos :as photos]))
[status-im.ui.screens.chat.styles.photos :as photos]
[quo2.foundations.typography :as typography]))
(defn style-message-text
[]
@ -311,6 +312,17 @@
assoc
:text-decoration-line :line-through)))
(defn edited-style
[]
(cond->
(update (default-text-style)
:style
assoc
:color (quo2.colors/theme-colors quo2.colors/neutral-40 quo2.colors/neutral-50)
:font-size 13
:line-height 18.2
:letter-spacing (typography/tracking 13))))
(def code-block-background "#2E386B")
(defn inline-code-style

21
src/status_im/ui2/screens/chat/messages/message.cljs
View File

@ -88,11 +88,14 @@
"#"
literal])
"edited"
(conj acc [rn/text (style/edited-style) (str " (" (i18n/label :t/edited) ")")])
(conj acc literal)))
;; TEXT
(defn render-block
[{:keys [content content-type in-popover?]} acc
[{:keys [content content-type edited-at in-popover?]} acc
{:keys [type ^js literal children]}]
(case type
@ -101,7 +104,10 @@
(reduce
(fn [acc e] (render-inline (:text content) content-type acc e))
[rn/text (style/text-style content-type in-popover?)]
children))
(conj
children
(when edited-at
{:type "edited"}))))
"blockquote"
(conj acc
@ -123,17 +129,6 @@
[:<>]
(:parsed-text content)))
(defn message-status
[{:keys [outgoing-status edited-at]}]
(when (or edited-at outgoing-status)
[rn/view {:flex-direction :row}
[rn/text {:style (style/message-status-text)}
(str "["
(if edited-at
"edited"
(or outgoing-status ""))
" DEBUG]")]]))
(defn quoted-message
[{:keys [message-id chat-id]} reply pin?]
(let [{:keys [deleted? deleted-for-me?]} (get @(re-frame/subscribe [:chats/chat-messages chat-id])

11
src/status_im2/contexts/chat/messages/content/status/style.cljs Normal file
View File

@ -0,0 +1,11 @@
(ns status-im2.contexts.chat.messages.content.status.style
(:require [quo2.foundations.colors :as colors]))
(def status-container
{:flex-direction :row
:align-items :center})
(defn message-status-text
[]
{:margin-left 4
:color (colors/theme-colors colors/neutral-40 colors/neutral-50)})

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

@ -1,6 +1,22 @@
(ns status-im2.contexts.chat.messages.content.status.view
(:require [status-im.ui2.screens.chat.messages.message :as old-message]))
(:require [react-native.core :as rn]
[quo2.foundations.colors :as colors]
[utils.i18n :as i18n]
[status-im2.contexts.chat.messages.content.status.style :as style]
[quo2.core :as quo]))
(defn status
[message-data]
[old-message/message-status message-data])
[outgoing-status]
[rn/view {:style style/status-container}
[quo/icon
(if (= outgoing-status :delivered)
:i/delivered
:i/sent)
{:size 12
:color (colors/theme-colors colors/neutral-40 colors/neutral-50)}]
[quo/text
{:size :label
:style (style/message-status-text)}
(if (= outgoing-status :delivered)
(i18n/label :t/delivered)
(i18n/label :t/sent))]])

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

@ -17,13 +17,14 @@
[utils.re-frame :as rf]
[status-im.ui2.screens.chat.messages.message :as old-message]
[status-im2.common.not-implemented :as not-implemented]
[utils.datetime :as datetime]))
[utils.datetime :as datetime]
[reagent.core :as reagent]))
(def delivery-state-showing-time-ms 3000)
(defn avatar
[{:keys [content last-in-group? pinned quoted-message from]}]
[rn/touchable-without-feedback {:on-press #(rf/dispatch [:chat.ui/show-profile from])}
[rn/view {:padding-top 2 :width 32}
(when (or (and (seq (:response-to content))
(if (or (and (seq (:response-to content))
quoted-message)
last-in-group?
pinned)
@ -31,13 +32,16 @@
contact (rf/sub [:contacts/contact-by-address from])
photo-path (when-not (empty? (:images contact)) (rf/sub [:chats/photo-path from]))
online? (rf/sub [:visibility-status-updates/online? from])]
[rn/touchable-without-feedback {:on-press #(rf/dispatch [:chat.ui/show-profile from])}
[rn/view {:padding-top 2 :width 32}
[quo/user-avatar
{:full-name display-name
:profile-picture photo-path
:status-indicator? true
:online? online?
:size :small
:ring? false}]))]])
:ring? false}]]])
[rn/view {:padding-top 2 :width 32}]))
(defn author
[{:keys [response-to
@ -80,25 +84,46 @@
{:content (drawers/reactions-and-actions message-data context)}]))
(defn user-message-content
[{:keys [content-type quoted-message content] :as message-data}
[{:keys [content-type quoted-message content outgoing outgoing-status] :as message-data}
{:keys [chat-id] :as context}]
(let [context (assoc context :on-long-press #(message-on-long-press message-data context))
[:f>
(let [show-delivery-state? (reagent/atom false)]
(fn []
(let [first-image (first (:album message-data))
outgoing-status (if (= content-type constants/content-type-album)
(:outgoing-status first-image)
outgoing-status)
outgoing (if (= content-type constants/content-type-album)
(:outgoing first-image)
outgoing)
context (assoc context :on-long-press #(message-on-long-press message-data context))
response-to (:response-to content)]
[rn/touchable-highlight
{:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90)
:style {:border-radius 16}
:on-press #()
:style {:border-radius 16
:opacity (if (and outgoing (= outgoing-status :sending)) 0.5 1)}
:on-press (fn []
(when (and outgoing
(not (= outgoing-status :sending))
(not @show-delivery-state?))
(reset! show-delivery-state? true)
(js/setTimeout #(reset! show-delivery-state? false)
delivery-state-showing-time-ms)))
:on-long-press (fn []
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:bottom-sheet/show-sheet
{:content (drawers/reactions-and-actions message-data
context)}]))}
[rn/view {:padding-vertical 8}
[rn/view {:style {:padding-vertical 8}}
(when (and (seq response-to) quoted-message)
[old-message/quoted-message {:message-id response-to :chat-id chat-id} quoted-message])
[rn/view {:padding-horizontal 12 :flex-direction :row}
[rn/view
{:style {:padding-horizontal 12
:flex-direction :row}}
[avatar message-data]
[rn/view {:margin-left 8 :flex 1}
[rn/view
{:style {:margin-left 8
:flex 1}}
[author message-data]
(case content-type
@ -119,7 +144,8 @@
constants/content-type-album [album/album-message message-data context]
[not-implemented/not-implemented [content.unknown/unknown-content message-data]])
[status/status message-data]]]]]))
(when @show-delivery-state?
[status/status outgoing-status])]]]])))])
(defn message-with-reactions
[{:keys [pinned pinned-by mentioned in-pinned-view? content-type

9
src/status_im2/contexts/chat/messages/drawers/view.cljs
View File

@ -19,7 +19,7 @@
(rf/dispatch [:pin-message/send-pin-message (assoc message-data :pinned (not pinned))]))))
(defn get-actions
[{:keys [outgoing content pinned] :as message-data}
[{:keys [outgoing content pinned outgoing-status] :as message-data}
{:keys [edit-enabled show-input? can-delete-message-for-everyone? community? message-pin-enabled]}]
(concat
(when (and outgoing edit-enabled)
@ -28,7 +28,7 @@
:label (i18n/label :t/edit-message)
:icon :i/edit
:id :edit}])
(when show-input?
(when (and show-input? (not= outgoing-status :sending))
[{:type :main
:on-press #(rf/dispatch [:chat.ui/reply-to-message message-data])
:label (i18n/label :t/message-reply)
@ -117,7 +117,7 @@
icon]])))]))
(defn reactions-and-actions
[{:keys [message-id] :as message-data} {:keys [chat-id] :as context}]
[{:keys [message-id outgoing-status] :as message-data} {:keys [chat-id] :as context}]
(fn []
(let [actions (get-actions message-data context)
main-actions (filter #(= (:type %) :main) actions)
@ -125,7 +125,8 @@
admin-actions (filter #(= (:type %) :admin) actions)]
[:<>
;; REACTIONS
[reactions {:chat-id chat-id :message-id message-id}]
(when (not= outgoing-status :sending)
[reactions {:chat-id chat-id :message-id message-id}])
;; MAIN ACTIONS
[rn/view {:style {:padding-horizontal 8}}

3
translations/en.json
View File

@ -1959,5 +1959,6 @@
"you-have-no-contacts": "You have no contacts",
"my-albums": "My albums",
"images": "images",
"only-6-images": "You can only add 6 images to your message"
"only-6-images": "You can only add 6 images to your message",
"delivered": "Delivered"
}