From ffaa85f133696bd686e9a88eb924ff87adedeb97 Mon Sep 17 00:00:00 2001 From: Vitaliy Vlasov Date: Fri, 20 Jul 2018 13:16:49 +0300 Subject: [PATCH] Add system warnings, delivery notifications, general unread messages badge --- .../ui/components/connectivity/styles.cljs | 20 ++++++---- .../ui/components/connectivity/view.cljs | 1 + src/status_im/ui/components/desktop/tabs.cljs | 38 +++++++++++++------ .../ui/screens/desktop/main/chat/views.cljs | 14 +++++-- .../ui/screens/main_tabs/styles.cljs | 21 +++++++++- 5 files changed, 69 insertions(+), 25 deletions(-) diff --git a/src/status_im/ui/components/connectivity/styles.cljs b/src/status_im/ui/components/connectivity/styles.cljs index 2bab1359ca..a447877940 100644 --- a/src/status_im/ui/components/connectivity/styles.cljs +++ b/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} - :opacity opacity - :width window-width - :top (+ (+ 56 top) (if pending? 35 0)) - :position :absolute - :background-color colors/gray-notifications - :height 35}) + (cond-> + {:opacity opacity + :background-color colors/gray-notifications + :height 35} + (not platform/desktop?) + (assoc + :ios {:z-index 0} + :width window-width + :top (+ (+ 56 top) (if pending? 35 0)) + :position :absolute))) (def text {:text-align :center diff --git a/src/status_im/ui/components/connectivity/view.cljs b/src/status_im/ui/components/connectivity/view.cljs index 079c8fcf45..01694018ea 100644 --- a/src/status_im/ui/components/connectivity/view.cljs +++ b/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])) diff --git a/src/status_im/ui/components/desktop/tabs.cljs b/src/status_im/ui/components/desktop/tabs.cljs index 4c5020f5c7..475d4acce7 100644 --- a/src/status_im/ui/components/desktop/tabs.cljs +++ b/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?] - [react/touchable-highlight {:style (merge tabs.styles/tab-container {:flex 1}) - :disabled active? - :on-press #(re-frame/dispatch [:show-desktop-tab view-id])} - [react/view - [content active?]]]) +(views/defview tab [index content view-id active? count-subscription] + (views/letsubs [cnt [count-subscription]] + [react/touchable-highlight {:style (merge tabs.styles/tab-container {:flex 1}) + :disabled active? + :on-press #(do + (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] - ^{:key index} [tab index content view-id (= current-tab view-id)])]])) + (for [[index {:keys [content view-id count-subscription]}] tabs-list-indexed] + ^{:key index} [tab index content view-id (= current-tab view-id) count-subscription])]])) diff --git a/src/status_im/ui/screens/desktop/main/chat/views.cljs b/src/status_im/ui/screens/desktop/main/chat/views.cljs index 4734eef175..1f18082205 100644 --- a/src/status_im/ui/screens/desktop/main/chat/views.cljs +++ b/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)) - [message-with-name-and-avatar text message] - [text-only-message text message]))})))) + [react/view + (if (and group-chat (not outgoing)) + [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) diff --git a/src/status_im/ui/screens/main_tabs/styles.cljs b/src/status_im/ui/screens/main_tabs/styles.cljs index ac76855d93..6fc53d75e8 100644 --- a/src/status_im/ui/screens/main_tabs/styles.cljs +++ b/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}) \ No newline at end of file + {: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)}) +