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 #96 from status-im/bug/#88 

fixes #88

Former-commit-id: 01016390d8
This commit is contained in:
Jarrad 2016-05-24 11:06:23 +02:00
parent bc1f9dcedd 6ab889152c
commit 0031c9d077
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.handlers]
[status-im.subs] [status-im.subs]
[status-im.components.react :refer [navigator app-registry]] [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.contacts.screen :refer [contact-list]]
[status-im.discovery.screen :refer [discovery]] [status-im.discovery.screen :refer [discovery]]
[status-im.discovery.tag :refer [discovery-tag]] [status-im.discovery.tag :refer [discovery-tag]]
@ -35,14 +36,14 @@
view-id (subscribe [:get :view-id])] view-id (subscribe [:get :view-id])]
(fn [] (fn []
(case (if @signed-up @view-id :chat) (case (if @signed-up @view-id :chat)
:discovery [discovery] :discovery [main-tabs]
:discovery-tag [discovery-tag] :discovery-tag [discovery-tag]
:add-participants [new-participants] :add-participants [new-participants]
:remove-participants [remove-participants] :remove-participants [remove-participants]
:chat-list [chats-list] :chat-list [main-tabs]
:new-group [new-group] :new-group [new-group]
:group-settings [group-settings] :group-settings [group-settings]
:contact-list [contact-list] :contact-list [main-tabs]
:chat [chat] :chat [chat]
:profile [profile] :profile [profile]
:my-profile [my-profile])))) :my-profile [my-profile]))))

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

@ -15,7 +15,6 @@
[status-im.components.styles :refer [color-blue [status-im.components.styles :refer [color-blue
toolbar-background2]] toolbar-background2]]
[status-im.components.toolbar :refer [toolbar]] [status-im.components.toolbar :refer [toolbar]]
[status-im.components.main-tabs :refer [main-tabs]]
[status-im.components.icons.ionicons :refer [icon]] [status-im.components.icons.ionicons :refer [icon]]
[status-im.chats-list.styles :as st])) [status-im.chats-list.styles :as st]))
@ -41,7 +40,7 @@
(list-item [chat-list-item row])) (list-item [chat-list-item row]))
:style st/list-container}] :style st/list-container}]
[action-button {:buttonColor color-blue [action-button {:buttonColor color-blue
:offsetY 72 :offsetY 16
:offsetX 16} :offsetX 16}
[action-button-item [action-button-item
{:title "New Chat" {:title "New Chat"
@ -54,5 +53,4 @@
:buttonColor :#1abc9c :buttonColor :#1abc9c
:onPress #(dispatch [:show-group-new])} :onPress #(dispatch [:show-group-new])}
[icon {:name :person-stalker [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,8 +6,7 @@
online-color online-color
text1-color text1-color
text2-color text2-color
new-messages-count-color]] new-messages-count-color]]))
[status-im.components.tabs.styles :refer [tab-height]]))
(def chat-container (def chat-container
{:flexDirection :row {:flexDirection :row
@ -103,8 +102,7 @@
:backgroundColor :white}) :backgroundColor :white})
(def list-container (def list-container
{:backgroundColor :white {:backgroundColor :white})
:marginBottom tab-height})
(def create-icon (def create-icon
{:fontSize 20 {: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-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view [status-im.components.react :refer [view
text-input text-input
text text
image image
touchable-highlight]] 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.tabs :refer [tabs]]
[status-im.components.tabs.styles :as st]
[status-im.components.styles :as common-st]
[status-im.utils.logging :as log])) [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 [] (defview main-tabs []
[view-id [:get :view-id]] [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}]}])

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

@ -27,3 +27,6 @@
(def toolbar-background1 color-white) (def toolbar-background1 color-white)
(def toolbar-background2 color-light-gray) (def toolbar-background2 color-light-gray)
(def default-chat-color color-purple) (def default-chat-color color-purple)
(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 (ns status-im.components.tabs.styles
(:require [status-im.components.styles :refer [font (:require [status-im.components.styles :refer [font
title-font title-font
color-white color-white
chat-background chat-background
online-color online-color
selected-message-color selected-message-color
separator-color separator-color
text1-color text1-color
text2-color text2-color
toolbar-background1]])) toolbar-background1]]))
(def tab-height 56) (def tab-height 56)
(def tabs (def tabs
{:flex 1 {:flex 1
:position :absolute :position :absolute
:bottom 0 :bottom 0
:right 0 :right 0
:left 0 :left 0
}) })
(def top-gradient (def top-gradient
@ -29,8 +29,8 @@
:height tab-height :height tab-height
:opacity 1 :opacity 1
:backgroundColor :white :backgroundColor :white
:justifyContent :center :justifyContent :center
:alignItems :center}) :alignItems :center})
(def tab (def tab
{:flex 1 {:flex 1
@ -54,3 +54,17 @@
:justifyContent :center :justifyContent :center
:alignItems :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-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view [status-im.components.react :refer [view
text-input text-input
text text
image image
touchable-highlight]] touchable-highlight]]
[reagent.core :as r] [reagent.core :as r]
[status-im.components.tabs.styles :as st])) [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 [touchable-highlight {:style st/tab
:onPress handler} :onPress #(dispatch [:navigate-to
[view {:style st/tab-container} view-id])}
[image {:source {:uri icon} [view {:style st/tab-container}
:style st/tab-icon}] [image {:source {:uri icon}
(when (= selected-index index) :style st/tab-icon}]
[text {:style st/tab-title} title])]]) (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-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view [status-im.components.react :refer [view
text-input text-input
text text
image image
touchable-highlight touchable-highlight
linear-gradient]] linear-gradient]]
[reagent.core :as r] [reagent.core :as r]
[status-im.components.tabs.styles :as st] [status-im.components.tabs.styles :as st]
[status-im.components.tabs.tab :refer [tab]])) [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 (let [data (merge data {:key index
:index index :index index
:selected-index selected-index})] :selected-view-id selected-view-id})]
[tab data])) [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)] (let [style (merge st/tabs style)]
[view {:style 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)"] [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}] :style st/top-gradient}]
[view st/tabs-container [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.contacts.views.contact :refer [contact-view]]
[status-im.components.styles :refer [toolbar-background2]] [status-im.components.styles :refer [toolbar-background2]]
[status-im.components.toolbar :refer [toolbar]] [status-im.components.toolbar :refer [toolbar]]
[status-im.components.main-tabs :refer [main-tabs]]
[status-im.contacts.styles :as st] [status-im.contacts.styles :as st]
[status-im.utils.listview :as lw])) [status-im.utils.listview :as lw]))
@ -33,5 +32,4 @@
[list-view {:dataSource (lw/to-datasource contacts) [list-view {:dataSource (lw/to-datasource contacts)
:enableEmptySections true :enableEmptySections true
:renderRow render-row :renderRow render-row
:style st/contacts-list}]) :style st/contacts-list}])])
[main-tabs]])

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

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

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

@ -7,7 +7,6 @@
text text
text-input]] text-input]]
[status-im.components.toolbar :refer [toolbar]] [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.popular :refer [popular]]
[status-im.discovery.views.recent :refer [discovery-recent]] [status-im.discovery.views.recent :refer [discovery-recent]]
[status-im.discovery.styles :as st])) [status-im.discovery.styles :as st]))
@ -50,5 +49,4 @@
[popular] [popular]
[view st/section-spacing [view st/section-spacing
[text {:style st/discovery-subtitle} "Recent"]] [text {:style st/discovery-subtitle} "Recent"]]
[discovery-recent]] [discovery-recent]]])
[main-tabs]])

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

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