diff --git a/src/status_im/android/core.cljs b/src/status_im/android/core.cljs index 6a699f3388..f79098ed24 100644 --- a/src/status_im/android/core.cljs +++ b/src/status_im/android/core.cljs @@ -6,6 +6,7 @@ [status-im.handlers] [status-im.subs] [status-im.components.react :refer [navigator app-registry]] + [status-im.components.main-tabs :refer [main-tabs]] [status-im.contacts.screen :refer [contact-list]] [status-im.discovery.screen :refer [discovery]] [status-im.discovery.tag :refer [discovery-tag]] @@ -36,15 +37,15 @@ view-id (subscribe [:get :view-id])] (fn [] (case (if @signed-up @view-id :chat) - :discovery [discovery] + :discovery [main-tabs] :discovery-tag [discovery-tag] :add-participants [new-participants] :remove-participants [remove-participants] - :chat-list [chats-list] + :chat-list [main-tabs] :new-group [new-group] :group-settings [group-settings] :chat-name-edit [chat-name-edit] - :contact-list [contact-list] + :contact-list [main-tabs] :chat [chat] :profile [profile] :my-profile [my-profile])))) diff --git a/src/status_im/chats_list/screen.cljs b/src/status_im/chats_list/screen.cljs index 32a7ce6ab2..b849cf6089 100644 --- a/src/status_im/chats_list/screen.cljs +++ b/src/status_im/chats_list/screen.cljs @@ -14,7 +14,6 @@ [status-im.components.drawer.view :refer [drawer-view open-drawer]] [status-im.components.styles :refer [color-blue]] [status-im.components.toolbar :refer [toolbar]] - [status-im.components.main-tabs :refer [main-tabs]] [status-im.components.icons.ionicons :refer [icon]] [status-im.chats-list.styles :as st])) @@ -38,7 +37,7 @@ (list-item [chat-list-item row])) :style st/list-container}] [action-button {:buttonColor color-blue - :offsetY 72 + :offsetY 16 :offsetX 16} [action-button-item {:title "New Chat" @@ -51,5 +50,4 @@ :buttonColor :#1abc9c :onPress #(dispatch [:show-group-new])} [icon {:name :person-stalker - :style st/person-stalker-icon}]]] - [main-tabs]]]))) + :style st/person-stalker-icon}]]]]]))) diff --git a/src/status_im/chats_list/styles.cljs b/src/status_im/chats_list/styles.cljs index 592a882d3e..645db00014 100644 --- a/src/status_im/chats_list/styles.cljs +++ b/src/status_im/chats_list/styles.cljs @@ -6,8 +6,7 @@ online-color text1-color text2-color - new-messages-count-color]] - [status-im.components.tabs.styles :refer [tab-height]])) + new-messages-count-color]])) (def contact-photo-container {:borderRadius 50}) @@ -135,8 +134,7 @@ :backgroundColor :white}) (def list-container - {:backgroundColor :white - :marginBottom tab-height}) + {:backgroundColor :white}) (def create-icon {:fontSize 20 diff --git a/src/status_im/components/main_tabs.cljs b/src/status_im/components/main_tabs.cljs index 5b8751b39d..b25ade7f4b 100644 --- a/src/status_im/components/main_tabs.cljs +++ b/src/status_im/components/main_tabs.cljs @@ -2,29 +2,45 @@ (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [status-im.components.react :refer [view - text-input - text - image - touchable-highlight]] + text-input + text + image + touchable-highlight]] + [status-im.chats-list.screen :refer [chats-list]] + [status-im.discovery.screen :refer [discovery]] + [status-im.contacts.screen :refer [contact-list]] [status-im.components.tabs.tabs :refer [tabs]] + [status-im.components.tabs.styles :as st] + [status-im.components.styles :as common-st] [status-im.utils.logging :as log])) +(def tab-list + [{:view-id :chat-list + :title "Chats" + :screen chats-list + :icon :icon_tab_chats} + {:view-id :discovery + :title "Discover" + :screen discovery + :icon :icon_tab_discovery} + {:view-id :contact-list + :title "Contacts" + :screen contact-list + :icon :icon_tab_contacts}]) + +(defn show-view? [current-view view-id] + (let [key-map {:key view-id}] + (if (= current-view view-id) + (merge st/show-tab key-map) + (merge st/hide-tab key-map)))) + +(defn tab-view [current-view {:keys [view-id screen]}] + [view (show-view? current-view view-id) + [screen]]) + (defview main-tabs [] [view-id [:get :view-id]] - [tabs {:selected-index (case view-id - :chat-list 0 - :discovery 1 - :contact-list 2 - 0) - :tab-list [{:handler #(dispatch [:navigate-to - :chat-list]) - :title "Chats" - :icon :icon_tab_chats} - {:handler #(dispatch [:navigate-to - :discovery]) - :title "Discover" - :icon :icon_tab_discovery} - {:handler #(dispatch [:navigate-to - :contact-list]) - :title "Contacts" - :icon :icon_tab_contacts}]}]) + [view common-st/flex + (doall (map #(tab-view view-id %1) tab-list)) + [tabs {:selected-view-id view-id + :tab-list tab-list}]]) diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 421224dc92..c53df0ce4a 100644 --- a/src/status_im/components/styles.cljs +++ b/src/status_im/components/styles.cljs @@ -26,3 +26,6 @@ (def separator-color "#0000001f") (def toolbar-background1 color-white) (def toolbar-background2 color-light-gray) + +(def flex + {:style {:flex 1}}) diff --git a/src/status_im/components/tabs/styles.cljs b/src/status_im/components/tabs/styles.cljs index 2c25c2417b..f3571cf3c8 100644 --- a/src/status_im/components/tabs/styles.cljs +++ b/src/status_im/components/tabs/styles.cljs @@ -1,23 +1,23 @@ (ns status-im.components.tabs.styles (:require [status-im.components.styles :refer [font - title-font - color-white - chat-background - online-color - selected-message-color - separator-color - text1-color - text2-color - toolbar-background1]])) + title-font + color-white + chat-background + online-color + selected-message-color + separator-color + text1-color + text2-color + toolbar-background1]])) (def tab-height 56) (def tabs - {:flex 1 - :position :absolute - :bottom 0 - :right 0 - :left 0 + {:flex 1 + :position :absolute + :bottom 0 + :right 0 + :left 0 }) (def top-gradient @@ -29,8 +29,8 @@ :height tab-height :opacity 1 :backgroundColor :white - :justifyContent :center - :alignItems :center}) + :justifyContent :center + :alignItems :center}) (def tab {:flex 1 @@ -54,3 +54,17 @@ :justifyContent :center :alignItems :center}) +(def show-tab + {:flex 1 + :pointerEvents :auto + :position :absolute + :top 0 + :left 0 + :right 0 + :bottom tab-height}) + +(def hide-tab + {:opacity 0 + :pointerEvents :none + :overflow :hidden}) + diff --git a/src/status_im/components/tabs/tab.cljs b/src/status_im/components/tabs/tab.cljs index 4205549a5a..e2f56af6b5 100644 --- a/src/status_im/components/tabs/tab.cljs +++ b/src/status_im/components/tabs/tab.cljs @@ -2,18 +2,19 @@ (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [status-im.components.react :refer [view - text-input - text - image - touchable-highlight]] + text-input + text + image + touchable-highlight]] [reagent.core :as r] [status-im.components.tabs.styles :as st])) -(defview tab [{:keys [handler title icon selected-index index]}] +(defview tab [{:keys [view-id title icon selected-view-id]}] [touchable-highlight {:style st/tab - :onPress handler} - [view {:style st/tab-container} - [image {:source {:uri icon} - :style st/tab-icon}] - (when (= selected-index index) - [text {:style st/tab-title} title])]]) + :onPress #(dispatch [:navigate-to + view-id])} + [view {:style st/tab-container} + [image {:source {:uri icon} + :style st/tab-icon}] + (when (= selected-view-id view-id) + [text {:style st/tab-title} title])]]) diff --git a/src/status_im/components/tabs/tabs.cljs b/src/status_im/components/tabs/tabs.cljs index 23450c80be..bd12614f3f 100644 --- a/src/status_im/components/tabs/tabs.cljs +++ b/src/status_im/components/tabs/tabs.cljs @@ -2,25 +2,25 @@ (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [status-im.components.react :refer [view - text-input - text - image - touchable-highlight - linear-gradient]] + text-input + text + image + touchable-highlight + linear-gradient]] [reagent.core :as r] [status-im.components.tabs.styles :as st] [status-im.components.tabs.tab :refer [tab]])) -(defn create-tab [index data selected-index] - (let [data (merge data {:key index - :index index - :selected-index selected-index})] +(defn create-tab [index data selected-view-id] + (let [data (merge data {:key index + :index index + :selected-view-id selected-view-id})] [tab data])) -(defview tabs [{:keys [style tab-list selected-index]}] +(defview tabs [{:keys [style tab-list selected-view-id]}] (let [style (merge st/tabs style)] [view {:style style} - [linear-gradient {:colors [ "rgba(24, 52, 76, 0.01)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"] - :style st/top-gradient}] + [linear-gradient {:colors ["rgba(24, 52, 76, 0.01)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"] + :style st/top-gradient}] [view st/tabs-container - (doall (map-indexed #(create-tab %1 %2 selected-index) tab-list))]])) + (doall (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))]])) diff --git a/src/status_im/contacts/screen.cljs b/src/status_im/contacts/screen.cljs index 11d75bdc2a..3ed6af93bf 100644 --- a/src/status_im/contacts/screen.cljs +++ b/src/status_im/contacts/screen.cljs @@ -9,7 +9,6 @@ [status-im.contacts.views.contact :refer [contact-view]] [status-im.components.styles :refer [toolbar-background2]] [status-im.components.toolbar :refer [toolbar]] - [status-im.components.main-tabs :refer [main-tabs]] [status-im.contacts.styles :as st] [status-im.utils.listview :as lw])) @@ -33,5 +32,4 @@ [list-view {:dataSource (lw/to-datasource contacts) :enableEmptySections true :renderRow render-row - :style st/contacts-list}]) - [main-tabs]]) + :style st/contacts-list}])]) diff --git a/src/status_im/contacts/styles.cljs b/src/status_im/contacts/styles.cljs index 7455363d38..4cbec2cdff 100644 --- a/src/status_im/contacts/styles.cljs +++ b/src/status_im/contacts/styles.cljs @@ -3,8 +3,7 @@ title-font text1-color color-white - online-color]] - [status-im.components.tabs.styles :refer [tab-height]])) + online-color]])) (def search-icon {:width 17 @@ -15,8 +14,7 @@ :backgroundColor :white}) (def contacts-list - {:backgroundColor :white - :marginBottom tab-height}) + {:backgroundColor :white}) (def contact-photo-container {:borderRadius 50}) diff --git a/src/status_im/discovery/screen.cljs b/src/status_im/discovery/screen.cljs index ab2c80e314..fc06443fa7 100644 --- a/src/status_im/discovery/screen.cljs +++ b/src/status_im/discovery/screen.cljs @@ -7,7 +7,6 @@ text text-input]] [status-im.components.toolbar :refer [toolbar]] - [status-im.components.main-tabs :refer [main-tabs]] [status-im.discovery.views.popular :refer [popular]] [status-im.discovery.views.recent :refer [discovery-recent]] [status-im.discovery.styles :as st])) @@ -50,5 +49,4 @@ [popular] [view st/section-spacing [text {:style st/discovery-subtitle} "Recent"]] - [discovery-recent]] - [main-tabs]]) + [discovery-recent]]]) diff --git a/src/status_im/discovery/styles.cljs b/src/status_im/discovery/styles.cljs index 979cd287a0..dd998b352d 100644 --- a/src/status_im/discovery/styles.cljs +++ b/src/status_im/discovery/styles.cljs @@ -8,8 +8,7 @@ separator-color text1-color text2-color - toolbar-background1]] - [status-im.components.tabs.styles :refer [tab-height]])) + toolbar-background1]])) ;; common @@ -60,7 +59,7 @@ :paddingBottom 15}) (def scroll-view-container - {:marginBottom tab-height}) + {}) ;; discovery_popular.cljs