diff --git a/src/status_im/chat/styles/message/message.cljs b/src/status_im/chat/styles/message/message.cljs index e66d32de37..22cc211b5b 100644 --- a/src/status_im/chat/styles/message/message.cljs +++ b/src/status_im/chat/styles/message/message.cljs @@ -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 diff --git a/src/status_im/chat/views/message/message.cljs b/src/status_im/chat/views/message/message.cljs index f722a3b482..9f97879299 100644 --- a/src/status_im/chat/views/message/message.cljs +++ b/src/status_im/chat/views/message/message.cljs @@ -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)] - [react/view style/not-sent-icon - [vector-icons/icon :icons/warning {:color colors/red}]]]]) + (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}]])]]) (defview command-status [{{:keys [network]} :params}] (letsubs [current-network [:network-name]] diff --git a/src/status_im/ui/components/connectivity/styles.cljs b/src/status_im/ui/components/connectivity/styles.cljs index 2bab1359ca..8d0563fe38 100644 --- a/src/status_im/ui/components/connectivity/styles.cljs +++ b/src/status_im/ui/components/connectivity/styles.cljs @@ -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 - :background-color colors/gray-notifications - :height 35}) + (cond-> + {:opacity opacity + :background-color colors/gray-notifications + :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 diff --git a/src/status_im/ui/components/desktop/tabs.cljs b/src/status_im/ui/components/desktop/tabs.cljs index 4c5020f5c7..056800bba0 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,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?] - [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 #(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..a558d6520f 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] @@ -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)} - (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 {: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) - scroll-ref (atom nil) - scroll-timer (atom nil) - scroll-height (atom nil)] - (let [_ (when (or (not @chat-id*) (not= @chat-id* chat-id)) + (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) + _ (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)] 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)}) +