From c11da58c50f0363be7c3200a76f12a44009a6f0a Mon Sep 17 00:00:00 2001 From: Adrian Tiberius Date: Thu, 5 May 2016 18:04:17 +0300 Subject: [PATCH] replaced android toolbar with new custom toolbar --- .../components/discovery/discovery.cljs | 115 +++++++++--------- .../discovery/discovery_recent.cljs | 1 + .../components/discovery/discovery_tag.cljs | 71 +++++++++++ src/syng_im/components/toolbar.cljs | 72 ++++++----- 4 files changed, 169 insertions(+), 90 deletions(-) create mode 100644 src/syng_im/components/discovery/discovery_tag.cljs diff --git a/src/syng_im/components/discovery/discovery.cljs b/src/syng_im/components/discovery/discovery.cljs index f9b9b1340e..7d57cb0a02 100644 --- a/src/syng_im/components/discovery/discovery.cljs +++ b/src/syng_im/components/discovery/discovery.cljs @@ -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 diff --git a/src/syng_im/components/discovery/discovery_recent.cljs b/src/syng_im/components/discovery/discovery_recent.cljs index a7b1fb0566..d9a48ebb56 100644 --- a/src/syng_im/components/discovery/discovery_recent.cljs +++ b/src/syng_im/components/discovery/discovery_recent.cljs @@ -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" diff --git a/src/syng_im/components/discovery/discovery_tag.cljs b/src/syng_im/components/discovery/discovery_tag.cljs new file mode 100644 index 0000000000..956a06cb6d --- /dev/null +++ b/src/syng_im/components/discovery/discovery_tag.cljs @@ -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}}] + ])))) \ No newline at end of file diff --git a/src/syng_im/components/toolbar.cljs b/src/syng_im/components/toolbar.cljs index 94155f8a6f..84768c5084 100644 --- a/src/syng_im/components/toolbar.cljs +++ b/src/syng_im/components/toolbar.cljs @@ -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)]]]]))