Skip to content

Commit

Permalink
Add system warnings, delivery notifications, general unread messages
Browse files Browse the repository at this point in the history 
badge
  • Loading branch information
Vitaliy Vlasov committed Aug 1, 2018
1 parent 6d2161c commit 12a1db2
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 51 deletions.
20 changes: 12 additions & 8 deletions src/status_im/ui/components/connectivity/styles.cljs
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down
1 change: 1 addition & 0 deletions src/status_im/ui/components/connectivity/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]))

Expand Down
40 changes: 26 additions & 14 deletions src/status_im/ui/components/desktop/tabs.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,40 +14,52 @@
[{: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
:icon-active :icons/wallet-active}}
{: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 #(do
(re-frame/dispatch [:navigate-to :home])
(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])]]))
63 changes: 35 additions & 28 deletions src/status_im/ui/screens/desktop/main/chat/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@
[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]
[status-im.constants :as constants]
[status-im.utils.identicon :as identicon]
[status-im.utils.datetime :as time]
[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]
Expand All @@ -20,33 +22,35 @@

(views/defview toolbar-chat-view []
(views/letsubs [{:keys [chat-id public-key public? group-chat color]} [:get-current-chat]
{:keys [pending? whisper-identity photo-path]} [:get-current-chat-contact]
current-chat-name [:get-current-chat-name]]
[react/view {:style styles/toolbar-chat-view}
[react/view {:style {:flex-direction :row
:align-items :center}}
{:keys [pending? whisper-identity photo-path]} [:get-current-chat-contact]
current-chat-name [:get-current-chat-name]]
[react/view
[react/view {:style styles/toolbar-chat-view}
[react/view {:style {:flex-direction :row
:align-items :center}}

[react/view {:style styles/img-container}
(if public?
[react/view {:style (styles/topic-image color)}
[react/text {:style styles/topic-text}
(string/capitalize (first current-chat-name))]]
[react/image {:style styles/photo-style-toolbar
:source {:uri photo-path}}])]
[react/view {:style styles/img-container}
(if public?
[react/view {:style (styles/topic-image color)}
[react/text {:style styles/topic-text}
(string/capitalize (first current-chat-name))]]
[react/image {:style styles/photo-style-toolbar
:source {:uri photo-path}}])]

[react/view
[react/text {:style styles/toolbar-chat-name} current-chat-name]
(when pending?
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:add-contact whisper-identity])}
[react/view {:style styles/add-contact}
[react/text {:style styles/add-contact-text}
(i18n/label :t/add-to-contacts)]]])]
(when (and (not group-chat) (not public?))
[react/text {:style {:position :absolute
:right 20}
:on-press #(re-frame/dispatch [:navigate-to :chat-profile])}
(i18n/label :t/view-profile)])]]))
[react/view
[react/text {:style styles/toolbar-chat-name} current-chat-name]
(when pending?
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:add-contact whisper-identity])}
[react/view {:style styles/add-contact}
[react/text {:style styles/add-contact-text}
(i18n/label :t/add-to-contacts)]]])]
(when (and (not group-chat) (not public?))
[react/text {:style {:position :absolute
:right 20}
:on-press #(re-frame/dispatch [:navigate-to :chat-profile])}
(i18n/label :t/view-profile)])]]
[connectivity/error-view {:top 2}]]))

(views/defview message-author-name [{:keys [outgoing from] :as message}]
(views/letsubs [current-account [:get-current-account]
Expand Down Expand Up @@ -119,9 +123,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)
Expand Down
21 changes: 20 additions & 1 deletion src/status_im/ui/screens/main_tabs/styles.cljs
View file
Original file line number Diff line number Diff line change
@@ -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]]))

Expand All @@ -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
Expand All @@ -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)})

0 comments on commit 12a1db2

Please sign in to comment.