fixes #88

Former-commit-id: b1bc93b782

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]))))

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}]]]
+                 :style st/person-stalker-icon}]]]]])))
-        [main-tabs]]])))

src/status_im/chats_list/styles.cljs

@@ -6,8 +6,7 @@
                                                online-color
                                                text1-color
                                                text2-color
-                                               new-messages-count-color]]
+                                               new-messages-count-color]]))
-            [status-im.components.tabs.styles :refer [tab-height]]))
 
 (def contact-photo-container
   {:borderRadius 50})
@@ -135,8 +134,7 @@
    :backgroundColor :white})
 
 (def list-container
-  {:backgroundColor :white
+  {:backgroundColor :white})
-   :marginBottom    tab-height})
 
 (def create-icon
   {:fontSize 20

src/status_im/components/main_tabs.cljs

@@ -6,25 +6,41 @@
                                                 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
+   [view common-st/flex
-                           :chat-list 0
+    (doall (map #(tab-view view-id %1) tab-list))
-                           :discovery 1
+    [tabs {:selected-view-id view-id
-                           :contact-list 2
+           :tab-list         tab-list}]])
-                           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}]}])

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}})

src/status_im/components/tabs/styles.cljs

@@ -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})
+

src/status_im/components/tabs/tab.cljs

@@ -9,11 +9,12 @@
             [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}
+                        :onPress #(dispatch [:navigate-to
+                                             view-id])}
    [view {:style st/tab-container}
     [image {:source {:uri icon}
             :style  st/tab-icon}]
-      (when (= selected-index index)
+    (when (= selected-view-id view-id)
       [text {:style st/tab-title} title])]])

src/status_im/components/tabs/tabs.cljs

@@ -11,16 +11,16 @@
             [status-im.components.tabs.styles :as st]
             [status-im.components.tabs.tab :refer [tab]]))
 
-(defn create-tab [index data selected-index]
+(defn create-tab [index data selected-view-id]
   (let [data (merge data {:key              index
                           :index            index
-                          :selected-index selected-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}]
      [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))]]))

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}])
+                 :style               st/contacts-list}])])
-   [main-tabs]])

src/status_im/contacts/styles.cljs

@@ -3,8 +3,7 @@
                                                title-font
                                                text1-color
                                                color-white
-                                               online-color]]
+                                               online-color]]))
-            [status-im.components.tabs.styles :refer [tab-height]]))
 
 (def search-icon
   {:width  17
@@ -15,8 +14,7 @@
    :backgroundColor :white})
 
 (def contacts-list
-  {:backgroundColor :white
+  {:backgroundColor :white})
-   :marginBottom    tab-height})
 
 (def contact-photo-container
   {:borderRadius 50})

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]]
+    [discovery-recent]]])
-   [main-tabs]])

src/status_im/discovery/styles.cljs

@@ -8,8 +8,7 @@
                                                  separator-color
                                                  text1-color
                                                  text2-color
-                                                 toolbar-background1]]
+                                                 toolbar-background1]]))
-            [status-im.components.tabs.styles :refer [tab-height]]))
 
 ;; common
 
@@ -60,7 +59,7 @@
    :paddingBottom 15})
 
 (def scroll-view-container
-  {:marginBottom tab-height})
+  {})
 
 ;; discovery_popular.cljs