feat: style delivery states

Signed-off-by: Brian Sztamfater <brian@status.im>

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

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])

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)})

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]
+  [outgoing-status]
-  [old-message/message-status message-data])
+  [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))]])

src/status_im2/contexts/chat/messages/content/view.cljs

@@ -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])}
+  (if (or (and (seq (:response-to content))
-   [rn/view {:padding-top 2 :width 32}
-    (when (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}
+           :style          {:border-radius 16
-      :on-press       #()
+                            :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

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}}

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"
 }