Merge pull request #5318 from status-im/fix/system-warnings-notifications
Add system warnings, delivery notifications, general unread messages
This commit is contained in:
commit
ca2e7795d3
|
@ -3,6 +3,7 @@
|
|||
(:require [status-im.ui.components.styles :as styles]
|
||||
[status-im.chat.styles.photos :as photos]
|
||||
[status-im.ui.components.colors :as colors]
|
||||
[status-im.utils.platform :as platform]
|
||||
[status-im.constants :as constants]))
|
||||
|
||||
(defstyle style-message-text
|
||||
|
@ -95,9 +96,9 @@
|
|||
(defn delivery-status [outgoing]
|
||||
(if outgoing
|
||||
{:align-self :flex-end
|
||||
:padding-right 8}
|
||||
:padding-right (if platform/desktop? 24 8)}
|
||||
{:align-self :flex-start
|
||||
:padding-left 8}))
|
||||
:padding-left (if platform/desktop? 24 8)}))
|
||||
|
||||
(def message-author
|
||||
{:width photos/default-size
|
||||
|
|
|
@ -281,9 +281,12 @@
|
|||
:message-id message-id}])))}
|
||||
[react/view style/not-sent-view
|
||||
[react/text {:style style/not-sent-text}
|
||||
(i18n/message-status-label :not-sent)]
|
||||
(i18n/message-status-label (if platform/desktop?
|
||||
:not-sent-without-tap
|
||||
:not-sent))]
|
||||
(when-not platform/desktop?
|
||||
[react/view style/not-sent-icon
|
||||
[vector-icons/icon :icons/warning {:color colors/red}]]]])
|
||||
[vector-icons/icon :icons/warning {:color colors/red}]])]])
|
||||
|
||||
(defview command-status [{{:keys [network]} :params}]
|
||||
(letsubs [current-network [:network-name]]
|
||||
|
|
|
@ -1,15 +1,23 @@
|
|||
(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
|
||||
(cond->
|
||||
{:opacity opacity
|
||||
:background-color colors/gray-notifications
|
||||
:height 35})
|
||||
:height 35
|
||||
:position :absolute}
|
||||
platform/desktop?
|
||||
(assoc
|
||||
:left 0
|
||||
:right 0)
|
||||
(not platform/desktop?)
|
||||
(assoc
|
||||
:ios {:z-index 0}
|
||||
:width window-width
|
||||
:top (+ (+ 56 top) (if pending? 35 0)))))
|
||||
|
||||
(def text
|
||||
{:text-align :center
|
||||
|
|
|
@ -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,41 @@
|
|||
{: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]
|
||||
(views/letsubs [cnt [count-subscription]]
|
||||
[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?]]])
|
||||
[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])]]))
|
||||
|
|
|
@ -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]
|
||||
|
@ -45,12 +47,17 @@
|
|||
public?
|
||||
[react/text {:style styles/public-chat-text}
|
||||
(i18n/label :t/public-chat)])]]
|
||||
#_[react/view
|
||||
[react/popup-menu
|
||||
[react/popup-menu-trigger {:text "Popup test"}]
|
||||
[react/popup-menu-options
|
||||
[react/popup-menu-option {:text "First"}]
|
||||
[react/popup-menu-option {:text "Second"}]]]]
|
||||
[react/view
|
||||
(when (and (not group-chat) (not public?))
|
||||
[react/text {:style (styles/profile-actions-text colors/black)
|
||||
:on-press #(re-frame/dispatch [:show-profile-desktop whisper-identity])}
|
||||
(i18n/label :t/view-profile)])
|
||||
|
||||
[react/text {:style (styles/profile-actions-text colors/black)
|
||||
:on-press #(re-frame/dispatch [:chat.ui/clear-history-pressed])}
|
||||
(i18n/label :t/clear-history)]
|
||||
|
@ -133,25 +140,29 @@
|
|||
:reagent-render
|
||||
(fn []
|
||||
^{:key (str "message" message-id)}
|
||||
[react/view
|
||||
(if (and group-chat (not outgoing))
|
||||
[message-with-name-and-avatar text message]
|
||||
[text-only-message text message]))}))))
|
||||
[text-only-message text message])
|
||||
[react/view {:style (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)
|
||||
(views/letsubs [messages [:get-current-chat-messages-stream]
|
||||
current-public-key [:get-current-public-key]]
|
||||
(let [chat-id* (atom nil)
|
||||
scroll-ref (atom nil)
|
||||
scroll-timer (atom nil)
|
||||
scroll-height (atom nil)]
|
||||
(let [_ (when (or (not @chat-id*) (not= @chat-id* chat-id))
|
||||
scroll-height (atom nil)
|
||||
_ (when (or (not @chat-id*) (not= @chat-id* chat-id))
|
||||
(reset! chat-id* chat-id)
|
||||
(js/setTimeout #(when scroll-ref (.scrollToEnd @scroll-ref)) 400))
|
||||
messages (re-frame/subscribe [:get-current-chat-messages-stream])
|
||||
current-public-key (re-frame/subscribe [:get-current-public-key])]
|
||||
#_(js/setTimeout #(when @scroll-ref (.scrollToEnd @scroll-ref)) 400))]
|
||||
[react/view {:style styles/messages-view}
|
||||
[react/scroll-view {:scrollEventThrottle 16
|
||||
:headerHeight styles/messages-list-vertical-padding
|
||||
:footerWidth styles/messages-list-vertical-padding
|
||||
:enableArrayScrollingOptimization true
|
||||
:inverted true
|
||||
:on-scroll (fn [e]
|
||||
(let [ne (.-nativeEvent e)
|
||||
y (.-y (.-contentOffset ne))]
|
||||
|
@ -159,13 +170,15 @@
|
|||
(when @scroll-timer (js/clearTimeout @scroll-timer))
|
||||
(reset! scroll-timer (js/setTimeout #(re-frame/dispatch [:load-more-messages]) 300)))
|
||||
(reset! scroll-height (+ y (.-height (.-layoutMeasurement ne))))))
|
||||
:on-content-size-change #(.scrollToEnd @scroll-ref)
|
||||
:ref #(reset! scroll-ref %)}
|
||||
[react/view
|
||||
(doall
|
||||
(for [[index {:keys [from content message-id type value] :as message-obj}] (map-indexed vector (reverse @messages))]
|
||||
^{:key (or message-id (str type value))}
|
||||
[message content (= from @current-public-key) (assoc message-obj :group-chat group-chat)]))]]])))
|
||||
(for [[index {:keys [from content message-id type value] :as message-obj}] (map-indexed vector messages)]
|
||||
^{:key message-obj}
|
||||
[message content (= from current-public-key)
|
||||
(assoc message-obj :group-chat group-chat
|
||||
:current-public-key current-public-key)]))]]
|
||||
[connectivity/error-view]])))
|
||||
|
||||
(views/defview chat-text-input []
|
||||
(views/letsubs [inp-ref (atom nil)]
|
||||
|
|
|
@ -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
|
||||
|
@ -40,3 +43,19 @@
|
|||
|
||||
(def counter
|
||||
{: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)})
|
||||
|
||||
|
|
Loading…
Reference in New Issue