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

fixes #88 

Former-commit-id: b1bc93b782
This commit is contained in:
Adrian Tiberius 2016-05-23 15:13:52 +03:00
parent 7c5c20ff70
commit 56c1248a6d
12 changed files with 109 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/status_im/android/core.cljs
View File

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

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

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

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

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

58
src/status_im/components/main_tabs.cljs
View File

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

3
src/status_im/components/styles.cljs
View File

@ -26,3 +26,6 @@
(def separator-color "#0000001f")
(def toolbar-background1 color-white)
(def toolbar-background2 color-light-gray)
(def flex
{:style {:flex 1}})

46
src/status_im/components/tabs/styles.cljs
View File

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

23
src/status_im/components/tabs/tab.cljs
View File

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

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

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

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

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

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

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

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

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

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

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