Add system warnings, delivery notifications, general unread messages

badge

src/status_im/ui/components/connectivity/styles.cljs

@@ -1,15 +1,19 @@
 (ns status-im.ui.components.connectivity.styles
   (:require-macros [status-im.utils.styles :refer [defnstyle]])
-  (:require [status-im.ui.components.colors :as colors]))
+  (:require [status-im.ui.components.colors :as colors]
+            [status-im.utils.platform :as platform]))
 
 (defnstyle text-wrapper [top opacity window-width pending?]
-  {:ios              {:z-index 0}
+  (cond->
-   :opacity          opacity
+   {:opacity          opacity
-   :width            window-width
+    :background-color colors/gray-notifications
-   :top              (+ (+ 56 top) (if pending? 35 0))
+    :height           35}
-   :position         :absolute
+    (not platform/desktop?)
-   :background-color colors/gray-notifications
+    (assoc
-   :height           35})
+     :ios              {:z-index 0}
+     :width            window-width
+     :top              (+ (+ 56 top) (if pending? 35 0))
+     :position         :absolute)))
 
 (def text
   {:text-align :center

src/status_im/ui/components/connectivity/view.cljs

@@ -3,6 +3,7 @@
   (:require [re-frame.core :as re-frame]
             [reagent.core :as reagent]
             [status-im.ui.components.react :as react]
+            [taoensso.timbre :as log]
             [status-im.ui.components.connectivity.styles :as styles]
             [status-im.i18n :as i18n]))
 

src/status_im/ui/components/desktop/tabs.cljs

@@ -14,7 +14,8 @@
   [{:view-id :home
     :content {:title         "Home"
               :icon-inactive :icons/home
-              :icon-active   :icons/home-active}}
+              :icon-active   :icons/home-active}
+    :count-subscription  :get-chats-unread-messages-number}
    #_{:view-id :wallet
       :content {:title         "Wallet"
                 :icon-inactive :icons/wallet
@@ -22,30 +23,43 @@
    {:view-id :profile
     :content {:title         "Profile"
               :icon-inactive :icons/profile
-              :icon-active   :icons/profile-active}}])
+              :icon-active   :icons/profile-active}
+    :count-subscription  :get-profile-unread-messages-number}])
+
+(defn- counter [cnt]
+  (let [[unviewed-messages-label large?] (if (< 9 cnt)
+                                           ["9+" true]
+                                           [cnt false])]
+    [react/view {:style tabs.styles/unread-messages-icon}
+     [react/text {:style (tabs.styles/unread-messages-text large?)} unviewed-messages-label]]))
 
 (defn- tab-content [{:keys [title icon-active icon-inactive]}]
-  (fn [active?]
+  (fn [active? cnt]
     [react/view {:style tabs.styles/tab-container}
      (let [icon (if active? icon-active icon-inactive)]
        [react/view
         [icons/icon icon {:style {:tint-color (if active? colors/blue colors/gray-icon)}}]])
      [react/view
       [react/text {:style (tabs.styles/tab-title active?)}
-       title]]]))
+       title]]
+     (when (pos? cnt)
+       [counter cnt])]))
 
 (def tabs-list-indexed (map-indexed vector (map #(update % :content tab-content) tabs-list-data)))
 
-(defn tab [index content view-id active?]
+(views/defview tab [index content view-id active? count-subscription]
-  [react/touchable-highlight {:style    (merge tabs.styles/tab-container {:flex 1})
+  (views/letsubs [cnt [count-subscription]]
-                              :disabled active?
+    [react/touchable-highlight {:style    (merge tabs.styles/tab-container {:flex 1})
-                              :on-press #(re-frame/dispatch [:show-desktop-tab view-id])}
+                                :disabled active?
-   [react/view
+                                :on-press #(do
-    [content active?]]])
+                                             (re-frame/dispatch [:navigate-to :home])
+                                             (re-frame/dispatch [:show-desktop-tab view-id]))}
+     [react/view
+      [content active? (if (= view-id :home) cnt nil)]]]))
 
 (views/defview main-tabs []
   (views/letsubs [current-tab [:get-in [:desktop/desktop :tab-view-id]]]
     [react/view
      [react/view {:style tabs.styles/tabs-container}
-      (for [[index {:keys [content view-id]}] tabs-list-indexed]
+      (for [[index {:keys [content view-id count-subscription]}] tabs-list-indexed]
-        ^{:key index} [tab index content view-id (= current-tab view-id)])]]))
+        ^{:key index} [tab index content view-id (= current-tab view-id) count-subscription])]]))

src/status_im/ui/screens/desktop/main/chat/views.cljs

@@ -4,6 +4,7 @@
             [status-im.ui.components.icons.vector-icons :as icons]
             [clojure.string :as string]
             [status-im.chat.styles.message.message :as message.style]
+            [status-im.chat.views.message.message :as message]
             [status-im.utils.gfycat.core :as gfycat.core]
             [taoensso.timbre :as log]
             [status-im.utils.gfycat.core :as gfycat]
@@ -12,6 +13,7 @@
             [status-im.utils.datetime :as time]
             [status-im.utils.utils :as utils]
             [status-im.ui.components.react :as react]
+            [status-im.ui.components.connectivity.view :as connectivity]
             [status-im.ui.components.colors :as colors]
             [status-im.chat.views.message.datemark :as message.datemark]
             [status-im.ui.screens.desktop.main.tabs.profile.views :as profile.views]
@@ -56,7 +58,8 @@
        (i18n/label :t/clear-history)]
       [react/text {:style (styles/profile-actions-text colors/black)
                    :on-press #(re-frame/dispatch [:chat.ui/delete-chat-pressed chat-id])}
-       (i18n/label :t/delete-chat)]]]))
+       (i18n/label :t/delete-chat)]]]
+    [connectivity/error-view {:top 2}]))
 
 (views/defview message-author-name [{:keys [outgoing from] :as message}]
   (views/letsubs [current-account [:get-current-account]
@@ -133,9 +136,12 @@
         :reagent-render
         (fn []
           ^{:key (str "message" message-id)}
-          (if (and group-chat (not outgoing))
+          [react/view
-            [message-with-name-and-avatar text message]
+           (if (and group-chat (not outgoing))
-            [text-only-message text message]))}))))
+             [message-with-name-and-avatar text message]
+             [text-only-message text message])
+           [react/view (message.style/delivery-status outgoing)
+            [message/message-delivery-status message]]])}))))
 
 (views/defview messages-view [{:keys [chat-id group-chat]}]
   (views/letsubs [chat-id* (atom nil)

src/status_im/ui/screens/main_tabs/styles.cljs

@@ -1,5 +1,6 @@
 (ns status-im.ui.screens.main-tabs.styles
   (:require [status-im.ui.components.styles :as styles]
+            [status-im.ui.components.colors :as colors]
             [status-im.utils.platform :as platform])
   (:require-macros [status-im.utils.styles :refer [defnstyle]]))
 
@@ -26,6 +27,8 @@
 (defnstyle tab-title [active?]
   {:ios        {:font-size 11}
    :android    {:font-size 12}
+   :desktop    {:font-size 12
+                :font-weight (if active? "600" :normal)}
    :text-align :center
    :color      (if active?
                  styles/color-blue4
@@ -39,4 +42,20 @@
    :top      4})
 
 (def counter
-  {:margin-left 18})
+  {:margin-left 18})
+
+(def unread-messages-icon
+  {:position         :absolute
+   :width            20
+   :height           20
+   :border-radius    20
+   :left             18
+   :top              10
+   :justify-content  :center
+   :align-items      :center
+   :background-color colors/blue})
+
+(defn unread-messages-text [large?]
+  {:color     colors/white
+   :font-size (if large? 10 10.9)})
+