status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Feature/tabs

Former-commit-id: e9af469ebb
This commit is contained in:
Jarrad 2016-05-23 12:25:01 +02:00
parent 51c800c798 2e49994c86
commit 7c5c20ff70
34 changed files with 256 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.re-natal
View File

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

2
README.md
View File

@ -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

1
android/app/build.gradle
View File

@ -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')

4
android/app/src/main/java/com/statusim/MainActivity.java
View File

@ -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()
);
}
}

BIN
android/app/src/main/res/drawable-hdpi/icon_tab_chats.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 537 B

BIN
android/app/src/main/res/drawable-hdpi/icon_tab_contacts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 792 B

BIN
android/app/src/main/res/drawable-hdpi/icon_tab_discovery.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 891 B

BIN
android/app/src/main/res/drawable-mdpi/icon_tab_chats.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 295 B

BIN
android/app/src/main/res/drawable-mdpi/icon_tab_contacts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 504 B

BIN
android/app/src/main/res/drawable-mdpi/icon_tab_discovery.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 617 B

BIN
android/app/src/main/res/drawable-xhdpi/icon_tab_chats.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 435 B

BIN
android/app/src/main/res/drawable-xhdpi/icon_tab_contacts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 936 B

BIN
android/app/src/main/res/drawable-xhdpi/icon_tab_discovery.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
android/app/src/main/res/drawable-xxhdpi/icon_tab_chats.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 651 B

BIN
android/app/src/main/res/drawable-xxhdpi/icon_tab_contacts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
android/app/src/main/res/drawable-xxhdpi/icon_tab_discovery.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
android/app/src/main/res/drawable-xxxhdpi/icon_tab_chats.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 777 B

BIN
android/app/src/main/res/drawable-xxxhdpi/icon_tab_contacts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
android/app/src/main/res/drawable-xxxhdpi/icon_tab_discovery.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

4
android/settings.gradle
View File

@ -13,4 +13,6 @@ project(':react-native-vector-icons').projectDir = new File(rootProject.projectD
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')
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')

2
env/dev/env/android/main.cljs vendored
View File

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

1
package.json
View File

@ -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",

21
src/status_im/chats_list/screen.cljs
View File

@ -1,23 +1,23 @@
(ns status-im.chats-list.screen
(:require [re-frame.core :refer [subscribe dispatch]]
[status-im.components.react :refer [list-view
list-item
view
text
image
touchable-highlight]]
list-item
view
text
image
touchable-highlight]]
[status-im.utils.listview :refer [to-datasource]]
[reagent.core :as r]
[status-im.chats-list.views.chat-list-item :refer [chat-list-item]]
[status-im.components.action-button :refer [action-button
action-button-item]]
action-button-item]]
[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]]])))

6
src/status_im/chats_list/styles.cljs
View File

@ -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

30
src/status_im/components/main_tabs.cljs Normal file
View File

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

9
src/status_im/components/react.cljs
View File

@ -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"))

56
src/status_im/components/tabs/styles.cljs Normal file
View File

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

19
src/status_im/components/tabs/tab.cljs Normal file
View File

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

26
src/status_im/components/tabs/tabs.cljs Normal file
View File

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

12
src/status_im/contacts/screen.cljs
View File

@ -2,13 +2,14 @@
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view text
image
touchable-highlight
list-view
list-item]]
image
touchable-highlight
list-view
list-item]]
[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]])

6
src/status_im/contacts/styles.cljs
View File

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

14
src/status_im/discovery/screen.cljs
View File

@ -3,10 +3,11 @@
(:require
[re-frame.core :refer [dispatch subscribe]]
[status-im.components.react :refer [view
scroll-view
text
text-input]]
scroll-view
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]))
@ -22,7 +23,7 @@
:autoFocus true
:placeholder "Type your search tags here"
:onSubmitEditing (fn [e]
(let [search (aget e "nativeEvent" "text")
(let [search (aget e "nativeEvent" "text")
hashtags (get-hashtags search)]
(dispatch [:broadcast-status search hashtags])))}]
[view
@ -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]])

123
src/status_im/discovery/styles.cljs
View File

@ -1,14 +1,15 @@
(ns status-im.discovery.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]]
[status-im.components.tabs.styles :refer [tab-height]]))
;; common
@ -39,14 +40,14 @@
(def discovery-title
{:color "#000000de"
:alignSelf :center
:alignSelf :center
:textAlign :center
:fontFamily "sans-serif"
:fontSize 16})
(def discovery-toolbar
{:backgroundColor "#eef2f5"
:elevation 0})
:elevation 0})
(def discovery-subtitle
{:color "#8f838c93"
@ -58,6 +59,9 @@
:paddingTop 15
:paddingBottom 15})
(def scroll-view-container
{:marginBottom tab-height})
;; discovery_popular.cljs
(def carousel-page-style
@ -71,86 +75,86 @@
;; discovery_populat_list.cljs
(def tag-name
{:color "#7099e6"
:fontFamily "sans-serif-medium"
:fontSize 14
:paddingRight 5
:paddingBottom 2
:alignItems :center
{:color "#7099e6"
:fontFamily "sans-serif-medium"
:fontSize 14
:paddingRight 5
:paddingBottom 2
:alignItems :center
:justifyContent :center})
(def tag-name-container
{:flexDirection "column"
{:flexDirection "column"
:backgroundColor "#eef2f5"
:borderRadius 5
:padding 4})
:borderRadius 5
:padding 4})
(def tag-count
{:color "#838c93"
:fontFamily "sans-serif"
:fontSize 12
:paddingRight 5
:paddingBottom 2
:alignItems :center
{:color "#838c93"
:fontFamily "sans-serif"
:fontSize 12
:paddingRight 5
:paddingBottom 2
:alignItems :center
:justifyContent :center})
(def tag-count-container
{:flex 0.2
{:flex 0.2
:flexDirection "column"
:alignItems "flex-end"
:paddingTop 10
:paddingRight 9})
:alignItems "flex-end"
:paddingTop 10
:paddingRight 9})
(def popular-list-container
{:flex 1
{:flex 1
:backgroundColor :white
:paddingLeft 10
:paddingTop 16})
:paddingLeft 10
:paddingTop 16})
(def popular-list
{:backgroundColor :white
:paddingTop 13})
:paddingTop 13})
;; discover_popular_list_item.cjls
(def popular-list-item
{:flexDirection :row
:paddingTop 10
:paddingTop 10
:paddingBottom 10})
(def popular-list-item-status
{:color "black"
{:color "black"
:fontFamily "sans-serif"
:lineHeight 22
:fontSize 14})
:fontSize 14})
(def popular-list-item-name
{:color "black"
{:color "black"
:fontFamily "sans-serif-medium"
:fontSize 14
:fontSize 14
:lineHeight 24})
(def popular-list-item-name-container
{:flex 0.8
{:flex 0.8
:flexDirection "column"})
(def popular-list-item-avatar-container
{:flex 0.2
{:flex 0.2
:flexDirection "column"
:alignItems :center
:paddingTop 5})
:alignItems :center
:paddingTop 5})
(def popular-list-item-avatar
{:resizeMode "contain"
{:resizeMode "contain"
:borderRadius 150
:width 40
:height 40})
:width 40
:height 40})
;; discovery_recent
(def recent-list
{:backgroundColor :white
:paddingLeft 15})
:paddingLeft 15})
;; discovery_tag
@ -158,22 +162,27 @@
{:flex 1
:backgroundColor "#eef2f5"})
(def tag-title-container
{:flex 1
:alignItems "center"
:justifyContent "center"})
(def tag-title
{:color "#7099e6"
:fontFamily "sans-serif-medium"
:fontSize 14
:paddingRight 5
{:color "#7099e6"
:fontFamily "sans-serif-medium"
:fontSize 14
:paddingRight 5
:paddingBottom 2})
(def tag-title-container
(def tag-container
{:backgroundColor "#eef2f5"
:flexWrap :wrap
:borderRadius 5
:padding 4})
:flexWrap :wrap
:borderRadius 5
:padding 4})
(def icon-back
{:width 8
:height 14})
{:width 8
:height 14})
(def icon-search
{:width 17

5
src/status_im/discovery/tag.cljs
View File

@ -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 [])}}]