added tabs component
Adrian Tiberius
|
After Width: | Height: | Size: 401 B |
|
After Width: | Height: | Size: 746 B |
|
After Width: | Height: | Size: 891 B |
|
After Width: | Height: | Size: 307 B |
|
After Width: | Height: | Size: 525 B |
|
After Width: | Height: | Size: 617 B |
|
After Width: | Height: | Size: 442 B |
|
After Width: | Height: | Size: 994 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 613 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 893 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -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]]]))))
|
||||
|
|
|
|||
|
|
@ -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]]))))
|
||||
|
|
|
|||
|
|
@ -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]])))
|
||||
|
|
|
|||
|
|
@ -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"}]}])))
|
||||
|
|
@ -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})
|
||||
|
|
@ -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])]]))
|
||||
|
|
@ -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))]))))
|
||||