From 88d3e78454160ca1fe2f1cc089fced3dcc69386d Mon Sep 17 00:00:00 2001 From: Rob Culliton Date: Mon, 26 Nov 2018 15:41:29 -0500 Subject: [PATCH] change 9+ to actual count of unread messages unread-messages-count fn, based off Maciej's comment on #6749 adding test, some difficulty running the test suite locally via clj actually use the new functionality for displaying on desktop first pass at updated styling for unread count chat icons styling pass 2: finer attention to detail for the purple/blue icons a bit more padding bloat to accomodate for the number 1, which occurs frequently :) remove counter from "home" icon on desktop Signed-off-by: Vitaliy Vlasov --- src/status_im/ui/components/desktop/tabs.cljs | 11 +---------- .../ui/screens/desktop/main/tabs/home/styles.cljs | 11 +++++------ .../ui/screens/desktop/main/tabs/home/views.cljs | 14 ++++++-------- src/status_im/utils/utils.cljs | 12 ++++++++++++ test/cljs/status_im/test/utils/utils.cljs | 12 +++++++++++- 5 files changed, 35 insertions(+), 25 deletions(-) diff --git a/src/status_im/ui/components/desktop/tabs.cljs b/src/status_im/ui/components/desktop/tabs.cljs index e8a1517c9a..4585988483 100644 --- a/src/status_im/ui/components/desktop/tabs.cljs +++ b/src/status_im/ui/components/desktop/tabs.cljs @@ -26,13 +26,6 @@ :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? cnt] [react/view {:style tabs.styles/tab-container} @@ -41,9 +34,7 @@ [icons/icon icon {:style {:tint-color (if active? colors/blue colors/black)}}]]) [react/view [react/text {:style (tabs.styles/tab-title active?)} - title]] - (when (pos? cnt) - [counter cnt])])) + title]]])) (def tabs-list-indexed (map-indexed vector (map #(update % :content tab-content) tabs-list-data))) diff --git a/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs b/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs index cf8c8b3764..983c8f4fac 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs @@ -30,12 +30,11 @@ :margin-right 16}) (def unread-messages-icon - {:position :absolute - :width 22 - :height 22 - :border-radius 22 - :left 28 - :top 10 + {:padding-left 6 + :padding-right 6 + :margin-top 2 + :height 15 + :border-radius 8 :justify-content :center :align-items :center :background-color colors/blue}) diff --git a/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs b/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs index b2438ecf9e..26eeaf0129 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs @@ -27,9 +27,7 @@ {:keys [content] :as last-message} [:chats/last-message chat-id]] (let [name (or chat-name (gfycat/generate-gfy public-key)) - [unviewed-messages-label large?] (if (< 9 unviewed-messages-count) - ["9+" true] - [unviewed-messages-count false]) + [unviewed-messages-label large?] [(utils/unread-messages-count unviewed-messages-count) true] current? (= current-chat-id chat-id)] [react/view {:style (styles/chat-list-item current?)} [react/view {:style styles/img-container} @@ -38,10 +36,7 @@ [react/text {:style styles/topic-text} (string/capitalize (second name))]] [react/image {:style styles/chat-icon - :source {:uri photo-path}}]) - (when (pos? unviewed-messages-count) - [react/view {:style styles/unread-messages-icon} - [react/text {:style (styles/unread-messages-text large?)} unviewed-messages-label]])] + :source {:uri photo-path}}])] [react/view {:style styles/chat-name-last-msg-box} [react/view {:style styles/chat-name-box} (when (and group-chat (not public?)) @@ -60,7 +55,10 @@ (or (:text content) (i18n/label :no-messages-yet)))]] [react/view {:style styles/timestamp} - [chat-item/message-timestamp (:timestamp last-message)]]]))) + [chat-item/message-timestamp (:timestamp last-message)] + (when (pos? unviewed-messages-count) + [react/view {:style styles/unread-messages-icon} + [react/text {:style (styles/unread-messages-text large?)} unviewed-messages-label]])]]))) (defn chat-list-item [[chat-id {:keys [group-chat public?] :as chat}]] diff --git a/src/status_im/utils/utils.cljs b/src/status_im/utils/utils.cljs index 875298aa9d..d84d55b8a9 100644 --- a/src/status_im/utils/utils.cljs +++ b/src/status_im/utils/utils.cljs @@ -60,6 +60,18 @@ (defn set-timeout [cb ms] (.setTimeout rn-dependencies/background-timer cb ms)) +(defn unread-messages-count + "display actual # if less than 1K, round to the lowest thousand if between 1 and 10K, otherwise 10K+ for anything larger" + [messages-count] + (let [round-to-lowest-single-thousand #(-> % + (/ 1000) + (Math/floor) + (str "K+"))] + (cond + (< messages-count 1000) (str messages-count) + (<= 1000 messages-count 10000) (round-to-lowest-single-thousand messages-count) + (> messages-count 10000) "10K+"))) + ;; same as re-frame dispatch-later but using background timer for long ;; running timeouts (re-frame/reg-fx diff --git a/test/cljs/status_im/test/utils/utils.cljs b/test/cljs/status_im/test/utils/utils.cljs index 437ef7c671..16f7700266 100644 --- a/test/cljs/status_im/test/utils/utils.cljs +++ b/test/cljs/status_im/test/utils/utils.cljs @@ -1,6 +1,7 @@ (ns status-im.test.utils.utils (:require [cljs.test :refer-macros [deftest is]] - [status-im.utils.core :as u])) + [status-im.utils.core :as u] + [status-im.utils.utils :as uu])) (deftest truncate-str-test (is (= (u/truncate-str "Long string" 7) "Long...")) ; threshold is less then string length @@ -8,6 +9,15 @@ (is (= (u/truncate-str "Long string" 11) "Long string")) ; threshold is the same as string length (is (= (u/truncate-str "Long string" 20) "Long string"))) ; threshold is more then string length +(deftest unread-messages-count-test + (is (= (uu/unread-messages-count 2) "2")) + (is (= (uu/unread-messages-count 12) "12")) + (is (= (uu/unread-messages-count 400) "400")) + (is (= (uu/unread-messages-count 1220) "1K+")) + (is (= (uu/unread-messages-count 4353) "4K+")) + (is (= (uu/unread-messages-count 4999) "4K+")) + (is (= (uu/unread-messages-count 11000) "10K+"))) + (deftest clean-text-test (is (= (u/clean-text "Hello! \n\r") "Hello!") (= (u/clean-text "Hello!") "Hello!")))