From 0e2cd2f653f6227178ac4295d4a0b51273d118ba Mon Sep 17 00:00:00 2001 From: virvar Date: Wed, 11 May 2016 13:53:38 +0300 Subject: [PATCH] Chat view toolbar refactoring --- src/syng_im/components/chat.cljs | 72 ++++++++++--------- .../components/discovery/discovery.cljs | 25 +++---- src/syng_im/components/discovery/styles.cljs | 7 +- src/syng_im/components/toolbar.cljs | 62 ++++++++-------- 4 files changed, 90 insertions(+), 76 deletions(-) diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index 1644bc8b6f..7b5d595add 100644 --- a/src/syng_im/components/chat.cljs +++ b/src/syng_im/components/chat.cljs @@ -7,7 +7,6 @@ icon navigator touchable-highlight - toolbar-android list-view list-item android?]] @@ -18,6 +17,7 @@ [syng-im.utils.listview :refer [to-datasource to-datasource2]] [syng-im.components.invertible-scroll-view :refer [invertible-scroll-view]] + [syng-im.components.toolbar :refer [toolbar]] [syng-im.components.chat.chat-message :refer [chat-message]] [syng-im.components.chat.chat-message-new :refer [chat-message-new]])) @@ -139,40 +139,48 @@ [overlay {:on-click-outside #(dispatch [:set-show-actions false])} [actions-list-view]]) -(defn toolbar [] +(defn toolbar-content [] (let [{:keys [group-chat name contacts]} (subscribe [:chat-properties [:group-chat :name :contacts]]) show-actions (subscribe [:show-actions])] (fn [] - [view st/toolbar-view - (when (not @show-actions) - [touchable-highlight {:on-press #(dispatch [:navigate-back])} - [view st/icon-view - [icon :back st/back-icon]]]) - [view (st/chat-name-view @show-actions) - [text {:style st/chat-name-text} - (or @name "Chat name")] - (if @group-chat - [view {:flexDirection :row} - [icon :group st/group-icon] - [text {:style st/members} - (let [cnt (count @contacts)] - (str cnt - (if (< 1 cnt) - " members" - " member") - ", " cnt " active"))]] - [text {:style st/last-activity} "Active a minute ago"])] - (if @show-actions - [touchable-highlight - {:on-press #(dispatch [:set-show-actions false])} - [view st/icon-view - [icon :up st/up-icon]]] - [touchable-highlight - {:on-press #(dispatch [:set-show-actions true])} - [view st/icon-view - [chat-photo {}] - [contact-online {:online true}]]])]))) + [view (st/chat-name-view @show-actions) + [text {:style st/chat-name-text} + (or @name "Chat name")] + (if @group-chat + [view {:flexDirection :row} + [icon :group st/group-icon] + [text {:style st/members} + (let [cnt (count @contacts)] + (str cnt + (if (< 1 cnt) + " members" + " member") + ", " cnt " active"))]] + [text {:style st/last-activity} "Active a minute ago"])]))) + +(defn toolbar-action [] + (let [show-actions (subscribe [:show-actions])] + (fn [] + (if @show-actions + [touchable-highlight + {:on-press #(dispatch [:set-show-actions false])} + [view st/icon-view + [icon :up st/up-icon]]] + [touchable-highlight + {:on-press #(dispatch [:set-show-actions true])} + [view st/icon-view + [chat-photo {}] + [contact-online {:online true}]]])))) + +(defn chat-toolbar [] + (let [{:keys [group-chat name contacts]} + (subscribe [:chat-properties [:group-chat :name :contacts]]) + show-actions (subscribe [:show-actions])] + (fn [] + [toolbar {:hide-nav? @show-actions + :custom-content [toolbar-content] + :custom-action [toolbar-action]}]))) (defn messages-view [group-chat] (let [messages (subscribe [:chat :messages]) @@ -191,7 +199,7 @@ show-actions-atom (subscribe [:show-actions])] (fn [] [view st/chat-view - [toolbar] + [chat-toolbar] [messages-view @group-chat] (when @group-chat [typing-all]) (when is-active [chat-message-new]) diff --git a/src/syng_im/components/discovery/discovery.cljs b/src/syng_im/components/discovery/discovery.cljs index 8536715102..c4a4bb0782 100644 --- a/src/syng_im/components/discovery/discovery.cljs +++ b/src/syng_im/components/discovery/discovery.cljs @@ -26,17 +26,18 @@ []))) (defn title-content [showSearch] - (if showSearch - [text-input {:underlineColorAndroid "transparent" - :style st/discovery-search-input - :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 - [text {:style st/discovery-title} "Discover"]])) + [view st/discovery-toolbar-content + (if showSearch + [text-input {:underlineColorAndroid "transparent" + :style st/discovery-search-input + :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 + [text {:style st/discovery-title} "Discover"]])]) (defn create-fake-discovery [] (let [number (rand-int 999)] @@ -62,7 +63,7 @@ :height 12}} :handler create-fake-discovery} :title "Add Participants" - :content (title-content @showSearch) + :custom-content [title-content @showSearch] :action {:image {:source {:uri "icon_search"} :style {:width 17 :height 17}} diff --git a/src/syng_im/components/discovery/styles.cljs b/src/syng_im/components/discovery/styles.cljs index 9c988558f9..0044f86c94 100644 --- a/src/syng_im/components/discovery/styles.cljs +++ b/src/syng_im/components/discovery/styles.cljs @@ -24,6 +24,11 @@ ;; discovery.cljs +(def discovery-toolbar-content + {:flex 1 + :alignItems :center + :justifyContent :center}) + (def discovery-search-input {:flex 1 :marginLeft 18 @@ -172,4 +177,4 @@ (def icon-search {:width 17 - :height 17}) \ No newline at end of file + :height 17}) diff --git a/src/syng_im/components/toolbar.cljs b/src/syng_im/components/toolbar.cljs index 2b5608f078..f66ddf5735 100644 --- a/src/syng_im/components/toolbar.cljs +++ b/src/syng_im/components/toolbar.cljs @@ -17,44 +17,44 @@ [syng-im.utils.listview :refer [to-realm-datasource]] [reagent.core :as r])) -(defn toolbar [{:keys [navigator title nav-action action background-color content style]}] +(defn toolbar [{:keys [navigator title nav-action hide-nav? action custom-action + background-color custom-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)} + (when (not hide-nav?) + (if nav-action + [touchable-highlight {:on-press (:handler nav-action)} + [view {:width 56 + :height 56 + :alignItems "center" + :justifyContent "center"} + [image (:image nav-action)]]] + [touchable-highlight {:on-press #(dispatch [:navigate-back])} + [view {:width 56 + :height 56} + [image {:source {:uri "icon_back"} + :style {:marginTop 21 + :marginLeft 23 + :width 8 + :height 14}}]]])) + (or custom-content + [view {:style {:flex 1 + :alignItems "center" + :justifyContent "center"}} + [text {:style {:marginTop -2.5 + :color text1-color + :fontSize 16 + :fontFamily font}} + title]]) + custom-action + (when action + [touchable-highlight {:on-press (:handler action)} [view {:width 56 :height 56 :alignItems "center" :justifyContent "center"} - [image (:image nav-action)]]] - [touchable-highlight {:on-press #(dispatch [:navigate-back])} - [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)} - [view {:width 56 - :height 56 - :alignItems "center" - :justifyContent "center"} - [image (:image action)]]]])) + [image (:image action)]]])]))