replaced android toolbar with new custom toolbar
This commit is contained in:
parent
2c9174af63
commit
c11da58c50
|
@ -8,9 +8,9 @@
|
||||||
view
|
view
|
||||||
scroll-view
|
scroll-view
|
||||||
text
|
text
|
||||||
text-input
|
text-input]]
|
||||||
toolbar-android]]
|
|
||||||
[reagent.core :as r]
|
[reagent.core :as r]
|
||||||
|
[syng-im.components.toolbar :refer [toolbar]]
|
||||||
[syng-im.components.discovery.discovery-popular :refer [discovery-popular]]
|
[syng-im.components.discovery.discovery-popular :refer [discovery-popular]]
|
||||||
[syng-im.components.discovery.discovery-recent :refer [discovery-recent]]
|
[syng-im.components.discovery.discovery-recent :refer [discovery-recent]]
|
||||||
[syng-im.resources :as res]
|
[syng-im.resources :as res]
|
||||||
|
@ -24,37 +24,8 @@
|
||||||
hashtags
|
hashtags
|
||||||
[])))
|
[])))
|
||||||
|
|
||||||
(defn discovery [{:keys [navigator]}]
|
(defn title-content [showSearch]
|
||||||
(let [showSearch (r/atom false)]
|
(if showSearch
|
||||||
(fn []
|
|
||||||
[view {:style {:flex 1
|
|
||||||
:backgroundColor "#eef2f5"}}
|
|
||||||
[toolbar-android {:titleColor "#4A5258"
|
|
||||||
:navIcon res/menu
|
|
||||||
:actions [{:title "Search"
|
|
||||||
:icon res/search
|
|
||||||
:show "always"}]
|
|
||||||
:style {:backgroundColor "#eef2f5"
|
|
||||||
:justifyContent "center"
|
|
||||||
:height 56
|
|
||||||
:elevation 0}
|
|
||||||
:onIconClicked (fn []
|
|
||||||
(let [number (rand-int 999)]
|
|
||||||
(do
|
|
||||||
(save-discoveries [{:name (str "Name " number)
|
|
||||||
:status (str "Status This is some longer status to get the second line " number)
|
|
||||||
:whisper-id (str number)
|
|
||||||
:photo ""
|
|
||||||
:location ""
|
|
||||||
:tags ["tag1" "tag2" "tag3"]
|
|
||||||
:last-updated (new js/Date)}])
|
|
||||||
(dispatch [:updated-discoveries]))))
|
|
||||||
;; temporary dispatch for testing
|
|
||||||
:onActionSelected (fn [index]
|
|
||||||
(if @showSearch
|
|
||||||
(reset! showSearch false)
|
|
||||||
(reset! showSearch true)))}
|
|
||||||
(if @showSearch
|
|
||||||
[text-input {:underlineColorAndroid "transparent"
|
[text-input {:underlineColorAndroid "transparent"
|
||||||
;:value (:search @search-input)
|
;:value (:search @search-input)
|
||||||
:style {:flex 1
|
:style {:flex 1
|
||||||
|
@ -65,9 +36,6 @@
|
||||||
:color "#9CBFC0"}
|
:color "#9CBFC0"}
|
||||||
:autoFocus true
|
:autoFocus true
|
||||||
:placeholder "Type your search tags here"
|
:placeholder "Type your search tags here"
|
||||||
:onChangeText (fn [new-text]
|
|
||||||
(let [old-text (:search @search-input)]
|
|
||||||
(log/debug (str new-text "-" old-text))))
|
|
||||||
:onSubmitEditing (fn [e]
|
:onSubmitEditing (fn [e]
|
||||||
(let [search (aget e "nativeEvent" "text")
|
(let [search (aget e "nativeEvent" "text")
|
||||||
hashtags (get-hashtags search)]
|
hashtags (get-hashtags search)]
|
||||||
|
@ -82,8 +50,41 @@
|
||||||
:alignSelf "center"
|
:alignSelf "center"
|
||||||
:textAlign "center"
|
:textAlign "center"
|
||||||
:fontFamily "sans-serif"
|
:fontFamily "sans-serif"
|
||||||
:fontSize 16}} "Discover"]])]
|
:fontSize 16}} "Discover"]]))
|
||||||
|
|
||||||
|
(defn create-fake-discovery []
|
||||||
|
(let [number (rand-int 999)]
|
||||||
|
(do
|
||||||
|
(save-discoveries [{:name (str "Name " number)
|
||||||
|
:status (str "Status This is some longer status to get the second line " number)
|
||||||
|
:whisper-id (str number)
|
||||||
|
:photo ""
|
||||||
|
:location ""
|
||||||
|
:tags ["tag1" "tag2" "tag3"]
|
||||||
|
:last-updated (new js/Date)}])
|
||||||
|
(dispatch [:updated-discoveries]))))
|
||||||
|
|
||||||
|
(defn discovery [{:keys [navigator]}]
|
||||||
|
(let [showSearch (r/atom false)]
|
||||||
|
(fn []
|
||||||
|
[view {:style {:flex 1
|
||||||
|
:backgroundColor "#eef2f5"}}
|
||||||
|
[toolbar {:style {:backgroundColor "#eef2f5"
|
||||||
|
:elevation 0}
|
||||||
|
:navigator navigator
|
||||||
|
:nav-action {:image {:source {:uri "icon_hamburger"}
|
||||||
|
:style {:width 16
|
||||||
|
:height 12}}
|
||||||
|
:handler create-fake-discovery}
|
||||||
|
:title "Add Participants"
|
||||||
|
:content (title-content @showSearch)
|
||||||
|
:action {:image {:source {:uri "icon_search"}
|
||||||
|
:style {:width 17
|
||||||
|
:height 17}}
|
||||||
|
:handler (fn []
|
||||||
|
(if @showSearch
|
||||||
|
(reset! showSearch false)
|
||||||
|
(reset! showSearch true)))}}]
|
||||||
[scroll-view {:style {}}
|
[scroll-view {:style {}}
|
||||||
[view {:style {:paddingLeft 30
|
[view {:style {:paddingLeft 30
|
||||||
:paddingTop 15
|
:paddingTop 15
|
||||||
|
|
|
@ -28,6 +28,7 @@
|
||||||
(let [discoveries (subscribe [:get-discoveries])
|
(let [discoveries (subscribe [:get-discoveries])
|
||||||
datasource (to-realm-datasource @discoveries)]
|
datasource (to-realm-datasource @discoveries)]
|
||||||
[list-view {:dataSource datasource
|
[list-view {:dataSource datasource
|
||||||
|
:enableEmptySections true
|
||||||
:renderRow render-row
|
:renderRow render-row
|
||||||
:renderSeparator render-separator
|
:renderSeparator render-separator
|
||||||
:style {:backgroundColor "white"
|
:style {:backgroundColor "white"
|
||||||
|
|
|
@ -0,0 +1,71 @@
|
||||||
|
(ns syng-im.components.discovery.discovery-tag
|
||||||
|
(:require
|
||||||
|
[re-frame.core :refer [subscribe]]
|
||||||
|
[syng-im.utils.logging :as log]
|
||||||
|
[syng-im.utils.listview :refer [to-realm-datasource
|
||||||
|
to-datasource]]
|
||||||
|
[syng-im.navigation :refer [nav-pop]]
|
||||||
|
[syng-im.components.react :refer [android?
|
||||||
|
view
|
||||||
|
text]]
|
||||||
|
[syng-im.components.realm :refer [list-view]]
|
||||||
|
[syng-im.components.toolbar :refer [toolbar]]
|
||||||
|
[reagent.core :as r]
|
||||||
|
[syng-im.components.discovery.discovery-popular-list-item :refer [discovery-popular-list-item]]
|
||||||
|
[syng-im.resources :as res]))
|
||||||
|
|
||||||
|
(defn render-row [row section-id row-id]
|
||||||
|
(log/debug "discovery-tag-row: " row section-id row-id)
|
||||||
|
(if row
|
||||||
|
(let [elem (discovery-popular-list-item row)]
|
||||||
|
elem)
|
||||||
|
(r/as-element [text "null"])
|
||||||
|
))
|
||||||
|
|
||||||
|
(defn render-separator [sectionID, rowID, adjacentRowHighlighted]
|
||||||
|
(let [elem (r/as-element [view {:style {:borderBottomWidth 1
|
||||||
|
:borderBottomColor "#eff2f3"}
|
||||||
|
:key rowID}])]
|
||||||
|
elem))
|
||||||
|
|
||||||
|
(defn title-content [tag]
|
||||||
|
[view {:style {:backgroundColor "#eef2f5"
|
||||||
|
:flexWrap :wrap
|
||||||
|
:borderRadius 5
|
||||||
|
:padding 4}}
|
||||||
|
[text {:style {:color "#7099e6"
|
||||||
|
:fontFamily "sans-serif-medium"
|
||||||
|
:fontSize 14
|
||||||
|
:paddingRight 5
|
||||||
|
:paddingBottom 2}}
|
||||||
|
(str " #" tag)]])
|
||||||
|
|
||||||
|
(defn discovery-tag [{:keys [tag navigator]}]
|
||||||
|
(let [tag (subscribe [:get-current-tag])
|
||||||
|
discoveries (subscribe [:get-discoveries-by-tag @tag 0])]
|
||||||
|
(log/debug "Got discoveries: " @discoveries)
|
||||||
|
(fn []
|
||||||
|
(let [items @discoveries
|
||||||
|
datasource (to-realm-datasource items)]
|
||||||
|
[view {:style {:flex 1
|
||||||
|
:backgroundColor "#eef2f5"}}
|
||||||
|
[toolbar {:navigator navigator
|
||||||
|
:nav-action {:image {:source {:uri "icon_back"}
|
||||||
|
:style {:width 8
|
||||||
|
:height 14}}
|
||||||
|
:handler (fn [] (nav-pop navigator))}
|
||||||
|
:title "Add Participants"
|
||||||
|
:content (title-content @tag)
|
||||||
|
:action {:image {:source {:uri "icon_search"}
|
||||||
|
:style {:width 17
|
||||||
|
:height 17}}
|
||||||
|
:handler (fn []
|
||||||
|
())}}]
|
||||||
|
|
||||||
|
[list-view {:dataSource datasource
|
||||||
|
:enableEmptySections true
|
||||||
|
:renderRow render-row
|
||||||
|
:renderSeparator render-separator
|
||||||
|
:style {:backgroundColor "white"
|
||||||
|
:paddingLeft 15}}]
|
||||||
|
]))))
|
|
@ -18,11 +18,12 @@
|
||||||
[reagent.core :as r]
|
[reagent.core :as r]
|
||||||
[syng-im.navigation :refer [nav-pop]]))
|
[syng-im.navigation :refer [nav-pop]]))
|
||||||
|
|
||||||
(defn toolbar [{:keys [navigator title nav-action action background-color]}]
|
(defn toolbar [{:keys [navigator title nav-action action background-color content style]}]
|
||||||
[view {:style {:flexDirection "row"
|
(let [style (merge {:flexDirection "row"
|
||||||
:backgroundColor (or background-color toolbar-background1)
|
:backgroundColor (or background-color toolbar-background1)
|
||||||
:height 56
|
:height 56
|
||||||
:elevation 2}}
|
:elevation 2} style)]
|
||||||
|
[view {:style style}
|
||||||
(if nav-action
|
(if nav-action
|
||||||
[touchable-highlight {:on-press (:handler nav-action)
|
[touchable-highlight {:on-press (:handler nav-action)
|
||||||
:underlay-color :transparent}
|
:underlay-color :transparent}
|
||||||
|
@ -41,6 +42,11 @@
|
||||||
:marginLeft 23
|
:marginLeft 23
|
||||||
:width 8
|
:width 8
|
||||||
:height 14}}]]])
|
:height 14}}]]])
|
||||||
|
(if content
|
||||||
|
[view {:style {:flex 1
|
||||||
|
:alignItems "center"
|
||||||
|
:justifyContent "center"}}
|
||||||
|
content]
|
||||||
[view {:style {:flex 1
|
[view {:style {:flex 1
|
||||||
:alignItems "center"
|
:alignItems "center"
|
||||||
:justifyContent "center"}}
|
:justifyContent "center"}}
|
||||||
|
@ -48,11 +54,11 @@
|
||||||
:color text1-color
|
:color text1-color
|
||||||
:fontSize 16
|
:fontSize 16
|
||||||
:fontFamily font}}
|
:fontFamily font}}
|
||||||
title]]
|
title]])
|
||||||
[touchable-highlight {:on-press (:handler action)
|
[touchable-highlight {:on-press (:handler action)
|
||||||
:underlay-color :transparent}
|
:underlay-color :transparent}
|
||||||
[view {:width 56
|
[view {:width 56
|
||||||
:height 56
|
:height 56
|
||||||
:alignItems "center"
|
:alignItems "center"
|
||||||
:justifyContent "center"}
|
:justifyContent "center"}
|
||||||
[image (:image action)]]]])
|
[image (:image action)]]]]))
|
||||||
|
|
Loading…
Reference in New Issue