status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-13 18:25:45 +00:00
Code Issues Projects Releases Wiki Activity

added tabs component

Browse Source
This commit is contained in:
Adrian Tiberius 2016-05-12 22:47:32 +03:00
parent 8c386f2175
commit 1fd3f86e23
22 changed files with 146 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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: 401 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: 746 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: 307 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: 525 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: 442 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: 994 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: 613 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.4 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: 893 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.8 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

20
src/syng_im/components/chats/chats_list.cljs
View File

@ -7,6 +7,7 @@
touchable-highlight
navigator]]
[syng-im.components.realm :refer [list-view]]
[syng-im.components.main-tabs :refer [main-tabs]]
[syng-im.utils.logging :as log]
[syng-im.navigation :refer [nav-pop]]
[syng-im.resources :as res]
@ -28,13 +29,13 @@
(defn chats-list-toolbar []
[toolbar {:nav-action {:image {:source {:uri "icon_hamburger"}
:style {:width 16
:height 12}}
:style {:width 16
:height 12}}
:handler open-drawer}
:title "Chats"
:action {:image {:source {:uri "icon_search"}
:style {:width 17
:height 17}}
:action {:image {:source {:uri "icon_search"}
:style {:width 17
:height 17}}
:handler (fn [])}}])
(defn chats-list [{:keys [navigator]}]
@ -48,11 +49,13 @@
:backgroundColor "white"}}
[chats-list-toolbar]
[list-view {:dataSource datasource
:enableEmptySections true
:enableEmptySections true
:renderRow (fn [row section-id row-id]
(r/as-element [chat-list-item row navigator]))
:style {:backgroundColor "white"}}]
[action-button {:buttonColor color-blue}
[action-button {:buttonColor color-blue
:offsetY 72
:offsetX 16}
[action-button-item {:title "New Chat"
:buttonColor "#9b59b6"
:onPress #(dispatch [:navigate-to
@ -68,4 +71,5 @@
[icon {:name "person-stalker"
:style {:fontSize 20
:height 22
:color "white"}}]]]]]))))
:color "white"}}]]]
[main-tabs]]]))))

4
src/syng_im/components/contact_list/contact_list.cljs
View File

@ -7,6 +7,7 @@
navigator list-view
list-item]]
[syng-im.components.contact-list.contact :refer [contact-view]]
[syng-im.components.main-tabs :refer [main-tabs]]
[syng-im.components.styles :refer [font
title-font
color-white
@ -49,4 +50,5 @@
[list-view {:dataSource contacts-ds
:enableEmptySections true
:renderRow (partial render-row navigator)
:style {:backgroundColor "white"}}])]))))
:style {:backgroundColor "white"}}])
[main-tabs]]))))

21
src/syng_im/components/discovery/discovery.cljs
View File

@ -11,10 +11,10 @@
text-input]]
[reagent.core :as r]
[syng-im.components.toolbar :refer [toolbar]]
[syng-im.components.main-tabs :refer [main-tabs]]
[syng-im.components.discovery.discovery-popular :refer [discovery-popular]]
[syng-im.components.discovery.discovery-recent :refer [discovery-recent]]
[syng-im.components.discovery.styles :as st]
[syng-im.persistence.realm :as realm]))
[syng-im.components.discovery.styles :as st]))
(def search-input (atom {:search "x"}))
@ -55,11 +55,11 @@
(fn []
[view {:style {:flex 1
:backgroundColor "#eef2f5"}}
[toolbar {:style st/discovery-toolbar
:navigator navigator
:nav-action {:image {:source {:uri "icon_hamburger"}
:style {:width 16
:height 12}}
[toolbar {:style st/discovery-toolbar
:navigator navigator
:nav-action {:image {:source {:uri "icon_hamburger"}
:style {:width 16
:height 12}}
:handler create-fake-discovery}
:title "Add Participants"
:custom-content [title-content @showSearch]
@ -76,8 +76,5 @@
[discovery-popular navigator]
[view {:style st/section-spacing}
[text {:style st/discovery-subtitle} "Recent"]]
[discovery-recent]]])))
(comment
(def page-width (aget (natal-shell.dimensions/get "window") "width"))
(def page-height (aget (natal-shell.dimensions/get "window") "height"))
)
[discovery-recent]]
[main-tabs]])))

30
src/syng_im/components/main-tabs.cljs Normal file
View File

@ -0,0 +1,30 @@
(ns syng-im.components.main-tabs
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view
text-input
text
image
touchable-highlight]]
[syng-im.components.tabs.tabs :refer [tabs]]
[syng-im.utils.logging :as log]))
(defn main-tabs []
(let [view-id (subscribe [:view-id])]
(fn []
[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"}]}])))

49
src/syng_im/components/tabs/styles.cljs Normal file
View File

@ -0,0 +1,49 @@
(ns syng-im.components.tabs.styles
(:require [syng-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
{:flexDirection :row
:position :absolute
:bottom 0
:right 0
:left 0,
:height tab-height
:opacity 1
:backgroundColor :white
:justifyContent :center
:alignItems :center
:borderTopColor "#1c18354c"
:borderTopWidth 1})
(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 2})
(def tab-container
{:flex 1
:height tab-height
:justifyContent :center
:alignItems :center})

20
src/syng_im/components/tabs/tab.cljs Normal file
View File

@ -0,0 +1,20 @@
(ns syng-im.components.tabs.tab
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view
text-input
text
image
touchable-highlight]]
[reagent.core :as r]
[syng-im.components.tabs.styles :as st]))
(defn tab [{:keys [handler title icon selected-index index]}]
(fn [{:keys [handler title icon selected-index index]}]
[touchable-highlight {:style st/tab
:onPress #(do (reset! selected-index index)
(handler))}
[view {:style st/tab-container}
[image {:source {:uri icon}
:style st/tab-icon}]
(when (= @selected-index index)
[text {:style st/tab-title} title])]]))

23
src/syng_im/components/tabs/tabs.cljs Normal file
View File

@ -0,0 +1,23 @@
(ns syng-im.components.tabs.tabs
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view
text-input
text
image
touchable-highlight]]
[reagent.core :as r]
[syng-im.components.tabs.styles :as st]
[syng-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]))
(defn tabs [{:keys [style tab-list selected-index]}]
(let [selected-index (r/atom selected-index)]
(fn [{:keys [style tab-list]}]
(let [style (merge st/tabs style)]
[view {:style style}
(doall (map-indexed #(create-tab %1 %2 selected-index) tab-list))]))))