From 0202af8070b13666d845fcee8c54118c48ac97fb Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Tue, 31 Jan 2023 16:33:38 -0300 Subject: [PATCH] feat: style delivery states Signed-off-by: Brian Sztamfater --- .../images/icons2/12x12/delivered@2x.png | Bin 0 -> 473 bytes .../images/icons2/12x12/delivered@3x.png | Bin 0 -> 597 bytes resources/images/icons2/12x12/sent@2x.png | Bin 0 -> 423 bytes resources/images/icons2/12x12/sent@3x.png | Bin 0 -> 520 bytes .../screens/chat/styles/message/message.cljs | 14 ++- .../ui2/screens/chat/messages/message.cljs | 21 ++-- .../chat/messages/content/status/style.cljs | 11 ++ .../chat/messages/content/status/view.cljs | 22 +++- .../contexts/chat/messages/content/view.cljs | 114 +++++++++++------- .../contexts/chat/messages/drawers/view.cljs | 9 +- translations/en.json | 3 +- 11 files changed, 128 insertions(+), 66 deletions(-) create mode 100644 resources/images/icons2/12x12/delivered@2x.png create mode 100644 resources/images/icons2/12x12/delivered@3x.png create mode 100644 resources/images/icons2/12x12/sent@2x.png create mode 100644 resources/images/icons2/12x12/sent@3x.png create mode 100644 src/status_im2/contexts/chat/messages/content/status/style.cljs diff --git a/resources/images/icons2/12x12/delivered@2x.png b/resources/images/icons2/12x12/delivered@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..34b6f12fda5c04590846c6639a63bbe2fe8340e5 GIT binary patch literal 473 zcmV;~0Ve*5P)!J1{vRK2lNu(w30WK}v{(xWzN9*Rk<; zBm2a`PqO5F-hFTP&8z_$G$@1T$!_o*;}L2CPkk59Xzjhoo{6tzuy~hG0Ad0RJ#5j^ z#8)=(UO$HbG}8lyE%`Vy@d7F!I5xIvtzLD;#CYM{*qbuG(h0Q43CUOlXc~(b@X P00000NkvXXu0mjf`jE{j literal 0 HcmV?d00001 diff --git a/resources/images/icons2/12x12/delivered@3x.png b/resources/images/icons2/12x12/delivered@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..366b82938df66dd5d694cfe6e3a545760e9c241e GIT binary patch literal 597 zcmV-b0;>IqP){qbSIs0rda4O z?Q{m~hV-qP-`D?NXa4&iphSrhB@Pt+LvXPV2f;tUe|&9YjHWEP7k=TP<5){wPT_*s zU)S*wd1H??SXWq(Z)`c&)K{$0y;OAmWXA^W^}a zhMrUii0CK{PO6|-OzZ&mk*g9Fxdo6dMwwf>Ezg9LDF}}FkV0o5{z9}?43(*hV*=&skWMOPB6>@~$z%^Fh^*;L61-ncg=gwOt4^* zY10xHLOuv&$jkd@{{JOFLqipkMET|_dnQo>@-&U*87-1$)u~-z`l=oQF$AL{TQsXx zAbEN312nb^#)?uI=4%9w#MmJ{TIgHrJ+ZuqZh~dL?x+*k<|m}K%|WBG=1u|Az%>>2 zrB*sOo@XnXM1x-Jtc7EDvdyYY#D*%wdDfdhhJ)T1J17W9FOBW)1b6cy(>L|-D^zOr zv4=v)$xQij!`ff&W{t#>zC?hw9z$V6HLPi)L%j=DI8?wT0?Gc5??fC%w^wsiz&WM` zku5aY=X)iAG7%Pdy1%}RZ~!~MgD4EvvSo}lFfaJs=+exIvFli6!kAJ5;DK zP3)kgfa)i8(XkzW%}nM8z~k|FHUxev>iTEfhp;9voR4vv1Rp*e=I(8EkOfyxdggcjuFg)to@k_Wx($qn~1@EDoFA*ZZ-C^&Qz8m-M|&-egk;>^UehH*&%0000< KMNUMnLSTaFi`Lix literal 0 HcmV?d00001 diff --git a/src/status_im/ui/screens/chat/styles/message/message.cljs b/src/status_im/ui/screens/chat/styles/message/message.cljs index 2a5de95642..1352ad031e 100644 --- a/src/status_im/ui/screens/chat/styles/message/message.cljs +++ b/src/status_im/ui/screens/chat/styles/message/message.cljs @@ -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 diff --git a/src/status_im/ui2/screens/chat/messages/message.cljs b/src/status_im/ui2/screens/chat/messages/message.cljs index 60cf221a00..43b9e63df4 100644 --- a/src/status_im/ui2/screens/chat/messages/message.cljs +++ b/src/status_im/ui2/screens/chat/messages/message.cljs @@ -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]) diff --git a/src/status_im2/contexts/chat/messages/content/status/style.cljs b/src/status_im2/contexts/chat/messages/content/status/style.cljs new file mode 100644 index 0000000000..ce3e5f7077 --- /dev/null +++ b/src/status_im2/contexts/chat/messages/content/status/style.cljs @@ -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)}) diff --git a/src/status_im2/contexts/chat/messages/content/status/view.cljs b/src/status_im2/contexts/chat/messages/content/status/view.cljs index ba70189765..39f5bda3ab 100644 --- a/src/status_im2/contexts/chat/messages/content/status/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/status/view.cljs @@ -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))]]) diff --git a/src/status_im2/contexts/chat/messages/content/view.cljs b/src/status_im2/contexts/chat/messages/content/view.cljs index b88c420f93..7ccb982c69 100644 --- a/src/status_im2/contexts/chat/messages/content/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/view.cljs @@ -17,27 +17,31 @@ [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)) - quoted-message) - last-in-group? - pinned) - (let [display-name (first (rf/sub [:contacts/contact-two-names-by-identity from])) - 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])] + (if (or (and (seq (:response-to content)) + quoted-message) + last-in-group? + pinned) + (let [display-name (first (rf/sub [:contacts/contact-two-names-by-identity from])) + 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,46 +84,68 @@ {: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)) - 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 #() - :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} - (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} - [avatar message-data] - [rn/view {:margin-left 8 :flex 1} - [author message-data] - (case content-type + [: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 + :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 {: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 + {:style {:padding-horizontal 12 + :flex-direction :row}} + [avatar message-data] + [rn/view + {:style {:margin-left 8 + :flex 1}} + [author message-data] + (case content-type - constants/content-type-text [not-implemented/not-implemented - [content.text/text-content message-data context]] + constants/content-type-text [not-implemented/not-implemented + [content.text/text-content message-data context]] - constants/content-type-emoji [not-implemented/not-implemented - [old-message/emoji message-data]] + constants/content-type-emoji [not-implemented/not-implemented + [old-message/emoji message-data]] - constants/content-type-sticker [not-implemented/not-implemented - [old-message/sticker message-data]] + constants/content-type-sticker [not-implemented/not-implemented + [old-message/sticker message-data]] - constants/content-type-image [image/image-message 0 message-data context] + constants/content-type-image [image/image-message 0 message-data context] - constants/content-type-audio [not-implemented/not-implemented - [old-message/audio message-data]] + constants/content-type-audio [not-implemented/not-implemented + [old-message/audio message-data]] - constants/content-type-album [album/album-message message-data context] + constants/content-type-album [album/album-message message-data context] - [not-implemented/not-implemented [content.unknown/unknown-content message-data]]) - [status/status message-data]]]]])) + [not-implemented/not-implemented [content.unknown/unknown-content message-data]]) + (when @show-delivery-state? + [status/status outgoing-status])]]]])))]) (defn message-with-reactions [{:keys [pinned pinned-by mentioned in-pinned-view? content-type diff --git a/src/status_im2/contexts/chat/messages/drawers/view.cljs b/src/status_im2/contexts/chat/messages/drawers/view.cljs index f4ffb83d4e..1d5417dbd5 100644 --- a/src/status_im2/contexts/chat/messages/drawers/view.cljs +++ b/src/status_im2/contexts/chat/messages/drawers/view.cljs @@ -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}} diff --git a/translations/en.json b/translations/en.json index 1269938b74..d336a0b089 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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" }