Chat status design

src/syng_im/components/chat.cljs

@@ -20,6 +20,7 @@
             [syng-im.utils.logging :as log]
             [syng-im.navigation :refer [nav-pop]]
             [syng-im.resources :as res]
+            [syng-im.constants :refer [content-type-status]]
             [syng-im.utils.listview :refer [to-realm-datasource]]
             [syng-im.components.invertible-scroll-view :refer [invertible-scroll-view]]
             [reagent.core :as r]
@@ -146,6 +147,21 @@
     (fn []
       (let [msgs                @messages
                                         ;_                 (log/debug "messages=" msgs)
+            ;; temp to show first status
+            msgs-clj (assoc (js->clj msgs) "-1"
+                            {:msg-id "-1"
+                             :content (str "The brash businessman’s braggadocio "
+                                           "and public exchange with candidates "
+                                           "in the US presidential election")
+                             :delivery-status "seen"
+                             :from "Status"
+                             :chat-id "-"
+                             :content-type content-type-status
+                             :timestamp 1
+                             :outgoing false
+                             :to nil})
+            msgs (clj->js msgs-clj)
+            ;; end temp
             datasource          (to-realm-datasource msgs)
             contacts            (:contacts @chat)
             contact-by-identity (contacts-by-identity contacts)]

src/syng_im/components/chat/chat_message.cljs

@@ -14,6 +14,7 @@
                                                color-black
                                                color-blue
                                                selected-message-color
+                                               online-color
                                                text1-color
                                                text2-color]]
             [syng-im.models.commands :refer [parse-command-msg-content
@@ -22,6 +23,7 @@
             [syng-im.navigation :refer [nav-pop]]
             [syng-im.resources :as res]
             [syng-im.constants :refer [text-content-type
+                                       content-type-status
                                        content-type-command
                                        content-type-command-request]]))
 
@@ -39,6 +41,64 @@
                   :textAlign      "center"}}
     date]])
 
+(defn contact-photo [{:keys [photo-path]}]
+  [view {:borderRadius 50}
+   [image {:source (if (s/blank? photo-path)
+                     res/user-no-photo
+                     {:uri photo-path})
+           :style  {:borderRadius 50
+                    :width        64
+                    :height       64}}]])
+
+(defn contact-online [{:keys [online]}]
+  (when online
+    [view {:position        "absolute"
+           :top             44
+           :left            44
+           :width           24
+           :height          24
+           :borderRadius    50
+           :backgroundColor online-color
+           :borderWidth     2
+           :borderColor     color-white}
+     [view {:position        "absolute"
+            :top             8
+            :left            5
+            :width           4
+            :height          4
+            :borderRadius    50
+            :backgroundColor color-white}]
+     [view {:position        "absolute"
+            :top             8
+            :left            11
+            :width           4
+            :height          4
+            :borderRadius    50
+            :backgroundColor color-white}]]))
+
+
+(defn message-content-status [from content]
+  [view {:style {:flex         1
+                 :marginBottom 20
+                 :alignSelf    "center"
+                 :alignItems   "center"
+                 :width        249}}
+   [view {:style {:marginTop 20}}
+    [contact-photo {}]
+    [contact-online {:online true}]]
+   [text {:style {:marginTop 20
+                  :fontSize   18
+                  :fontFamily font
+                  :color text1-color}}
+    from]
+   [text {:style {:marginTop  10
+                  :fontFamily font
+                  :fontSize   14
+                  :lineHeight 20
+                  :textAlign  "center"
+                  :color      text2-color}}
+    content]])
+
 (defn message-content-audio [{:keys [content-type content-type]}]
   [view {:style {:flexDirection "row"
                  :alignItems    "center"}}
@@ -164,7 +224,8 @@
                       :fontFamily font}}
         "Justas"])
      (cond
-       (= content-type text-content-type)
+       (or (= content-type text-content-type)
+           (= content-type content-type-status))
        [text {:style (merge {:marginTop (if (and group-chat (not outgoing))
                                           4
                                           0)
@@ -266,7 +327,7 @@
      (when (and outgoing delivery-status)
        [message-delivery-status {:delivery-status delivery-status}])]))
 
-(defn chat-message [{:keys [msg-id content content-type outgoing delivery-status date new-day text-color background-color group-chat selected] :as msg}]
+(defn chat-message [{:keys [msg-id from content content-type outgoing delivery-status date new-day text-color background-color group-chat selected] :as msg}]
   [view {}
    (when new-day
      [message-date {:date date}])
@@ -279,6 +340,9 @@
                      :delivery-status  (keyword delivery-status)
                      :group-chat       group-chat
                      :selected         selected}]
+     [view {}
+      (when (= content-type content-type-status)
+        [message-content-status from content])
       (if (and group-chat (not outgoing))
         [incoming-group-message-body msg-data]
-       [message-body msg-data]))])
+        [message-body msg-data])])])

src/syng_im/constants.cljs

@@ -8,6 +8,7 @@
 (def text-content-type "text/plain")
 (def content-type-command "command")
 (def content-type-command-request "command-request")
+(def content-type-status "status")
 (def group-chat-colors [{:background "#AB7967", :text "#FFFFFF"}
                         {:background "#B48EAD", :text "#FFFFFF"}
                         {:background "#8FA1B3", :text "#FFFFFF"}