replaced android toolbar with new custom toolbar
This commit is contained in:
Adrian Tiberius
parent
2c9174af63
commit
c11da58c50
|
|
@ -8,9 +8,9 @@
|
|||
view
|
||||
scroll-view
|
||||
text
|
||||
text-input
|
||||
toolbar-android]]
|
||||
text-input]]
|
||||
[reagent.core :as r]
|
||||
[syng-im.components.toolbar :refer [toolbar]]
|
||||
[syng-im.components.discovery.discovery-popular :refer [discovery-popular]]
|
||||
[syng-im.components.discovery.discovery-recent :refer [discovery-recent]]
|
||||
[syng-im.resources :as res]
|
||||
|
|
@ -24,66 +24,67 @@
|
|||
hashtags
|
||||
[])))
|
||||
|
||||
(defn title-content [showSearch]
|
||||
(if showSearch
|
||||
[text-input {:underlineColorAndroid "transparent"
|
||||
;:value (:search @search-input)
|
||||
:style {:flex 1
|
||||
:marginLeft 18
|
||||
:lineHeight 42
|
||||
:fontSize 14
|
||||
:fontFamily "Avenir-Roman"
|
||||
:color "#9CBFC0"}
|
||||
:autoFocus true
|
||||
:placeholder "Type your search tags here"
|
||||
:onSubmitEditing (fn [e]
|
||||
(let [search (aget e "nativeEvent" "text")
|
||||
hashtags (get-hashtags search)]
|
||||
(dispatch [:broadcast-status search hashtags])))}]
|
||||
[view {:style {;:flex 1
|
||||
;:flexDirection "row"
|
||||
;:justifyContent "center"
|
||||
;:alignSelf "stretch"
|
||||
;:alignItems "center"
|
||||
}}
|
||||
[text {:style {:color "#000000de"
|
||||
:alignSelf "center"
|
||||
:textAlign "center"
|
||||
:fontFamily "sans-serif"
|
||||
: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-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"
|
||||
;:value (:search @search-input)
|
||||
:style {:flex 1
|
||||
:marginLeft 18
|
||||
:lineHeight 42
|
||||
:fontSize 14
|
||||
:fontFamily "Avenir-Roman"
|
||||
:color "#9CBFC0"}
|
||||
:autoFocus true
|
||||
: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]
|
||||
(let [search (aget e "nativeEvent" "text")
|
||||
hashtags (get-hashtags search)]
|
||||
(dispatch [:broadcast-status search hashtags])))}]
|
||||
[view {:style {;:flex 1
|
||||
;:flexDirection "row"
|
||||
;:justifyContent "center"
|
||||
;:alignSelf "stretch"
|
||||
;:alignItems "center"
|
||||
}}
|
||||
[text {:style {:color "#000000de"
|
||||
:alignSelf "center"
|
||||
:textAlign "center"
|
||||
:fontFamily "sans-serif"
|
||||
:fontSize 16}} "Discover"]])]
|
||||
|
||||
[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 {}}
|
||||
[view {:style {:paddingLeft 30
|
||||
:paddingTop 15
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
(let [discoveries (subscribe [:get-discoveries])
|
||||
datasource (to-realm-datasource @discoveries)]
|
||||
[list-view {:dataSource datasource
|
||||
:enableEmptySections true
|
||||
:renderRow render-row
|
||||
:renderSeparator render-separator
|
||||
: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,41 +18,47 @@
|
|||
[reagent.core :as r]
|
||||
[syng-im.navigation :refer [nav-pop]]))
|
||||
|
||||
(defn toolbar [{:keys [navigator title nav-action action background-color]}]
|
||||
[view {:style {:flexDirection "row"
|
||||
:backgroundColor (or background-color toolbar-background1)
|
||||
:height 56
|
||||
:elevation 2}}
|
||||
(if nav-action
|
||||
[touchable-highlight {:on-press (:handler nav-action)
|
||||
(defn toolbar [{:keys [navigator title nav-action action background-color content style]}]
|
||||
(let [style (merge {:flexDirection "row"
|
||||
:backgroundColor (or background-color toolbar-background1)
|
||||
:height 56
|
||||
:elevation 2} style)]
|
||||
[view {:style style}
|
||||
(if nav-action
|
||||
[touchable-highlight {:on-press (:handler nav-action)
|
||||
:underlay-color :transparent}
|
||||
[view {:width 56
|
||||
:height 56
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}
|
||||
[image (:image nav-action)]]]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(nav-pop navigator))
|
||||
:underlay-color :transparent}
|
||||
[view {:width 56
|
||||
:height 56}
|
||||
[image {:source {:uri "icon_back"}
|
||||
:style {:marginTop 21
|
||||
:marginLeft 23
|
||||
:width 8
|
||||
:height 14}}]]])
|
||||
(if content
|
||||
[view {:style {:flex 1
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}}
|
||||
content]
|
||||
[view {:style {:flex 1
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}}
|
||||
[text {:style {:marginTop -2.5
|
||||
:color text1-color
|
||||
:fontSize 16
|
||||
:fontFamily font}}
|
||||
title]])
|
||||
[touchable-highlight {:on-press (:handler action)
|
||||
:underlay-color :transparent}
|
||||
[view {:width 56
|
||||
:height 56
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}
|
||||
[image (:image nav-action)]]]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(nav-pop navigator))
|
||||
:underlay-color :transparent}
|
||||
[view {:width 56
|
||||
:height 56}
|
||||
[image {:source {:uri "icon_back"}
|
||||
:style {:marginTop 21
|
||||
:marginLeft 23
|
||||
:width 8
|
||||
:height 14}}]]])
|
||||
[view {:style {:flex 1
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}}
|
||||
[text {:style {:marginTop -2.5
|
||||
:color text1-color
|
||||
:fontSize 16
|
||||
:fontFamily font}}
|
||||
title]]
|
||||
[touchable-highlight {:on-press (:handler action)
|
||||
:underlay-color :transparent}
|
||||
[view {:width 56
|
||||
:height 56
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}
|
||||
[image (:image action)]]]])
|
||||
[image (:image action)]]]]))
|
||||
|
|
|
|||
Loading…
Reference in New Issue