From ed0c16b33bfd31f2e7b6b74b6042a62330992483 Mon Sep 17 00:00:00 2001 From: William Mruzek Date: Tue, 29 Oct 2019 20:49:10 -0500 Subject: [PATCH] Increase number on 'unread' messages indicator to +99 Signed-off-by: yenda --- src/status_im/ui/components/badge.cljs | 12 ++++++++++-- src/status_im/ui/components/tabbar/core.cljs | 7 +++++-- src/status_im/ui/components/tabbar/styles.cljs | 5 +++++ src/status_im/ui/screens/home/views/inner_item.cljs | 5 ++--- translations/en.json | 1 + 5 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/status_im/ui/components/badge.cljs b/src/status_im/ui/components/badge.cljs index c8987c9794..6f848add44 100644 --- a/src/status_im/ui/components/badge.cljs +++ b/src/status_im/ui/components/badge.cljs @@ -1,6 +1,7 @@ (ns status-im.ui.components.badge (:require [status-im.ui.components.react :as react] - [status-im.ui.components.colors :as colors])) + [status-im.ui.components.colors :as colors] + [status-im.i18n :as i18n])) (defn badge [label & [small?]] [react/view (merge @@ -10,4 +11,11 @@ {:background-color colors/blue :justify-content :center :align-items :center}) - [react/text {:style {:typography :caption :color colors/white}} label]]) \ No newline at end of file + [react/text {:style {:typography :caption :color colors/white}} label]]) + +(defn message-counter [value & [small?]] + [badge + (if (> value 99) + (i18n/label :t/counter-99-plus) + value) + small?]) diff --git a/src/status_im/ui/components/tabbar/core.cljs b/src/status_im/ui/components/tabbar/core.cljs index 705c802037..903d94971a 100644 --- a/src/status_im/ui/components/tabbar/core.cljs +++ b/src/status_im/ui/components/tabbar/core.cljs @@ -7,6 +7,7 @@ [status-im.utils.platform :as platform] [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.common.common :as components.common] + [status-im.ui.components.badge :as badge] [status-im.i18n :as i18n] [re-frame.core :as re-frame])) @@ -67,8 +68,10 @@ {:style tabs.styles/icon-container} [vector-icons/icon icon (tabs.styles/icon active?)] (when (pos? (if count @count 0)) - [react/view tabs.styles/counter - [components.common/counter @count]])] + [react/view {:style (if (= nav-stack :chat-stack) + tabs.styles/message-counter + tabs.styles/counter)} + [badge/message-counter @count true]])] (when-not platform/desktop? [react/view {:style tabs.styles/tab-title-container} [react/text {:style (tabs.styles/new-tab-title active?)} diff --git a/src/status_im/ui/components/tabbar/styles.cljs b/src/status_im/ui/components/tabbar/styles.cljs index 91fc40cfcd..e37fca6778 100644 --- a/src/status_im/ui/components/tabbar/styles.cljs +++ b/src/status_im/ui/components/tabbar/styles.cljs @@ -46,6 +46,11 @@ :top 0 :position :absolute}) +(def message-counter + {:right -10 + :top 0 + :position :absolute}) + (def touchable-container {:flex 1 :height tabs-height}) diff --git a/src/status_im/ui/screens/home/views/inner_item.cljs b/src/status_im/ui/screens/home/views/inner_item.cljs index d4d6869467..196b658be1 100644 --- a/src/status_im/ui/screens/home/views/inner_item.cljs +++ b/src/status_im/ui/screens/home/views/inner_item.cljs @@ -8,6 +8,7 @@ [status-im.ui.components.chat-icon.screen :as chat-icon.screen] [status-im.ui.components.common.common :as components.common] [status-im.ui.components.list-item.views :as list-item] + [status-im.ui.components.badge :as badge] [status-im.ui.components.react :as react] [status-im.ui.screens.home.styles :as styles] [status-im.utils.contenthash :as contenthash] @@ -64,9 +65,7 @@ (defview unviewed-indicator [chat-id] (letsubs [unviewed-messages-count [:chats/unviewed-messages-count chat-id]] (when (pos? unviewed-messages-count) - [components.common/counter {:size 22 - :accessibility-label :unread-messages-count-text} - unviewed-messages-count]))) + [badge/message-counter unviewed-messages-count]))) (defn home-list-item [[_ home-item]] (let [{:keys diff --git a/translations/en.json b/translations/en.json index abf2b0d2a1..79a5e3977c 100644 --- a/translations/en.json +++ b/translations/en.json @@ -172,6 +172,7 @@ "copy-transaction-hash": "Copy transaction ID", "cost-fee": "Cost/Fee", "counter-9-plus": "9+", + "counter-99-plus": "99+", "create": "Create", "create-a-pin": "Create a 6-digit passcode", "create-group-chat": "Create group chat",