Merge pull request #75 from status-im/feature/tabs

Feature/tabs

Former-commit-id: e9af469ebb

.re-natal

@@ -14,7 +14,8 @@
     "react-native-vector-icons/Ionicons",
     "react-native-circle-checkbox",
     "react-native-randombytes",
-    "dismissKeyboard"
+    "dismissKeyboard",
+    "react-native-linear-gradient"
   ],
   "imageDirs": [
     "images"

README.md

@@ -30,7 +30,7 @@ A Clojure library designed to ... well, that part is up to you.
     adb reverse tcp:8081 tcp:8081
     adb reverse tcp:3449 tcp:3449
     react-native run-android
-
+(re-frame.core/dispatch [:set-signed-up true]) 
 
 ## License
 

android/app/build.gradle

@@ -128,6 +128,7 @@ dependencies {
     compile "com.facebook.react:react-native:+"  // From node_modules
     compile project(':react-native-contacts')
     compile project(':react-native-i18n')
+    compile project(':react-native-linear-gradient')
 //    compile(name:'geth', ext:'aar')
     compile(group: 'status-im', name: 'android-geth', version: '1.4.0-201604110816-a97a114', ext: 'aar')
 

android/app/src/main/java/com/statusim/MainActivity.java

@@ -10,6 +10,7 @@ import android.os.Bundle;
 import android.os.Environment;
 import com.github.ethereum.go_ethereum.cmd.Geth;
 import com.bitgo.randombytes.RandomBytesPackage;
+import com.BV.LinearGradient.LinearGradientPackage;
 
 import java.util.Arrays;
 import java.util.List;
@@ -78,7 +79,8 @@ public class MainActivity extends ReactActivity {
                 new VectorIconsPackage(),
                 new ReactNativeContacts(),
                 new ReactNativeI18n(),
-                new RandomBytesPackage()
+                new RandomBytesPackage(),
+                new LinearGradientPackage()
         );
     }
 }

android/settings.gradle

@@ -14,3 +14,5 @@ include ':realm'
 project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android')
 include ':randombytes'
 project(':randombytes').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-randombytes/app')
+include ':react-native-linear-gradient'
+project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')

env/dev/env/android/main.cljs

@@ -10,7 +10,7 @@
 (def root-el (r/as-element [reloader]))
 
 (figwheel/watch-and-reload
- :websocket-url "ws://localhost:3449/figwheel-ws"
+ :websocket-url "ws://10.0.3.2:3449/figwheel-ws"
  :heads-up-display false
  :jsload-callback #(swap! cnt inc))
 

package.json

@@ -14,6 +14,7 @@
     "react-native-contacts": "^0.2.4",
     "react-native-i18n": "0.0.8",
     "react-native-invertible-scroll-view": "^1.0.0",
+    "react-native-linear-gradient": "^1.5.7",
     "react-native-loading-spinner-overlay": "0.0.8",
     "react-native-randombytes": "^2.0.0",
     "react-native-vector-icons": "^1.3.4",

src/status_im/chats_list/screen.cljs

@@ -14,10 +14,10 @@
             [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]))
 
-
 (defn chats-list-toolbar []
   [toolbar {:nav-action {:image   {:source {:uri :icon_hamburger}
                                    :style  st/hamburger-icon}
@@ -37,7 +37,9 @@
                     :renderRow  (fn [row _ _]
                                   (list-item [chat-list-item row]))
                     :style      st/list-container}]
-        [action-button {:buttonColor color-blue}
+        [action-button {:buttonColor color-blue
+                        :offsetY     72
+                        :offsetX     16}
          [action-button-item
           {:title       "New Chat"
            :buttonColor :#9b59b6
@@ -49,4 +51,5 @@
            :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,7 +6,8 @@
                                                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})
@@ -134,7 +135,8 @@
    :backgroundColor :white})
 
 (def list-container
-  {:backgroundColor :white})
+  {:backgroundColor :white
+   :marginBottom    tab-height})
 
 (def create-icon
   {:fontSize 20

src/status_im/components/main_tabs.cljs

@@ -0,0 +1,30 @@
+(ns status-im.components.main-tabs
+  (: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]]
+            [status-im.components.tabs.tabs :refer [tabs]]
+            [status-im.utils.logging :as log]))
+
+(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}]}])

src/status_im/components/react.cljs

@@ -39,6 +39,15 @@
   [image {:source {:uri (keyword (str "icon_" (name n)))}
           :style  style}])
 
+;(def react-linear-gradient (.-default (js/require "react-native-linear-gradient")))
+;(def linear-gradient (r/adapt-react-class react-linear-gradient))
+
+(set! js/window.LinearGradient (js/require "react-native-linear-gradient"))
+(defn linear-gradient [props]
+  (js/React.createElement js/LinearGradient
+                          (clj->js (merge {:inverted true} props))))
+
+
 (def platform (.. js/React -Platform -OS))
 
 (def android? (= platform "android"))

src/status_im/components/tabs/styles.cljs

@@ -0,0 +1,56 @@
+(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]]))
+
+(def tab-height 56)
+
+(def tabs
+  {:flex 1
+   :position       :absolute
+   :bottom         0
+   :right          0
+   :left           0
+   })
+
+(def top-gradient
+  {:flexDirection :row
+   :height        3})
+
+(def tabs-container
+  {:flexDirection   :row
+   :height          tab-height
+   :opacity         1
+   :backgroundColor :white
+   :justifyContent :center
+   :alignItems     :center})
+
+(def tab
+  {:flex           1
+   :height         tab-height
+   :justifyContent :center
+   :alignItems     :center})
+
+(def tab-title
+  {:fontFamily "sans-serif"
+   :fontSize   14
+   :color      "#6e93d8"})
+
+(def tab-icon
+  {:width        24
+   :height       24
+   :marginBottom 1})
+
+(def tab-container
+  {:flex           1
+   :height         tab-height
+   :justifyContent :center
+   :alignItems     :center})
+

src/status_im/components/tabs/tab.cljs

@@ -0,0 +1,19 @@
+(ns status-im.components.tabs.tab
+  (: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]]
+            [reagent.core :as r]
+            [status-im.components.tabs.styles :as st]))
+
+(defview tab [{:keys [handler title icon selected-index index]}]
+  [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])]])

src/status_im/components/tabs/tabs.cljs

@@ -0,0 +1,26 @@
+(ns status-im.components.tabs.tabs
+  (: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]]
+            [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})]
+    [tab data]))
+
+(defview tabs [{:keys [style tab-list selected-index]}]
+  (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))]]))

src/status_im/contacts/screen.cljs

@@ -9,6 +9,7 @@
             [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]))
 
@@ -32,4 +33,5 @@
      [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,7 +3,8 @@
                                                title-font
                                                text1-color
                                                color-white
-                                               online-color]]))
+                                               online-color]]
+            [status-im.components.tabs.styles :refer [tab-height]]))
 
 (def search-icon
   {:width  17
@@ -14,7 +15,8 @@
    :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,6 +7,7 @@
                                         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]))
@@ -43,10 +44,11 @@
      :action         {:image   {:source {:uri :icon_search}
                                 :style  st/search-icon}
                       :handler #(toogle-search show-search)}}]
-   [scroll-view {:style {}}
+   [scroll-view st/scroll-view-container
     [view st/section-spacing
      [text {:style st/discovery-subtitle} "Popular tags"]]
     [popular]
     [view st/section-spacing
      [text {:style st/discovery-subtitle} "Recent"]]
-    [discovery-recent]]])
+    [discovery-recent]]
+   [main-tabs]])

src/status_im/discovery/styles.cljs

@@ -8,7 +8,8 @@
                                                  separator-color
                                                  text1-color
                                                  text2-color
-                                               toolbar-background1]]))
+                                                 toolbar-background1]]
+            [status-im.components.tabs.styles :refer [tab-height]]))
 
 ;; common
 
@@ -58,6 +59,9 @@
    :paddingTop    15
    :paddingBottom 15})
 
+(def scroll-view-container
+  {:marginBottom tab-height})
+
 ;; discovery_popular.cljs
 
 (def carousel-page-style
@@ -158,6 +162,11 @@
   {:flex            1
    :backgroundColor "#eef2f5"})
 
+(def tag-title-container
+  {:flex           1
+   :alignItems     "center"
+   :justifyContent "center"})
+
 (def tag-title
   {:color         "#7099e6"
    :fontFamily    "sans-serif-medium"
@@ -165,7 +174,7 @@
    :paddingRight  5
    :paddingBottom 2})
 
-(def tag-title-container
+(def tag-container
   {:backgroundColor "#eef2f5"
    :flexWrap        :wrap
    :borderRadius    5

src/status_im/discovery/tag.cljs

@@ -17,7 +17,8 @@
 
 (defn title-content [tag]
   [view st/tag-title-container
-   [text {:style st/tag-title} (str " #" tag)]])
+   [view {:style st/tag-container}
+    [text {:style st/tag-title} (str " #" tag)]]])
 
 (defn discovery-tag []
   (let [tag         (subscribe [:get :current-tag])
@@ -31,7 +32,7 @@
                                           :style  st/icon-back}
                                 :handler #(dispatch [:navigate-back])}
                    :title      "Add Participants"
-                   :content    (title-content @tag)
+                   :custom-content    (title-content @tag)
                    :action     {:image   {:source {:uri :icon_search}
                                           :style  st/icon-search}
                                 :handler (fn [])}}]