diff --git a/src/syng_im/components/chat/new_participants.cljs b/src/syng_im/components/chat/new_participants.cljs index 819d5cd434..b3e1b4e446 100644 --- a/src/syng_im/components/chat/new_participants.cljs +++ b/src/syng_im/components/chat/new_participants.cljs @@ -12,44 +12,20 @@ text1-color text2-color toolbar-background1]] + [syng-im.components.toolbar :refer [toolbar]] [syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.components.chats.new-participant-contact :refer [new-participant-contact]] [reagent.core :as r] [syng-im.navigation :refer [nav-pop]])) -(defn toolbar [navigator] - [view {:style {:flexDirection "row" - :backgroundColor toolbar-background1 - :height 56 - :elevation 2}} - [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}} - "Add Participants"]] - [touchable-highlight {:on-press (fn [] - (dispatch [:add-new-participants navigator])) - :underlay-color :transparent} - [view {:width 56 - :height 56} - [image {:source res/v ;; {:uri "icon_search"} - :style {:marginTop 19 - :marginHorizontal 18 - :width 20 - :height 18}}]]]]) +(defn new-participants-toolbar [navigator] + [toolbar {:navigator navigator + :title "Add Participants" + :action {:image {:source res/v ;; {:uri "icon_search"} + :style {:width 20 + :height 18}} + :handler (fn [] + (dispatch [:add-new-participants navigator]))}}]) (defn new-participants [{:keys [navigator]}] (let [contacts (subscribe [:all-new-contacts])] @@ -57,7 +33,7 @@ (let [contacts-ds (to-realm-datasource @contacts)] [view {:style {:flex 1 :backgroundColor "white"}} - [toolbar navigator] + [new-participants-toolbar navigator] [list-view {:dataSource contacts-ds :renderRow (fn [row section-id row-id] (r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator])) diff --git a/src/syng_im/components/chat/remove_participants.cljs b/src/syng_im/components/chat/remove_participants.cljs index cc3ec9710a..dded8733b8 100644 --- a/src/syng_im/components/chat/remove_participants.cljs +++ b/src/syng_im/components/chat/remove_participants.cljs @@ -12,44 +12,20 @@ text1-color text2-color toolbar-background1]] + [syng-im.components.toolbar :refer [toolbar]] [syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.components.chats.new-participant-contact :refer [new-participant-contact]] [reagent.core :as r] [syng-im.navigation :refer [nav-pop]])) -(defn toolbar [navigator] - [view {:style {:flexDirection "row" - :backgroundColor toolbar-background1 - :height 56 - :elevation 2}} - [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}} - "Remove Participants"]] - [touchable-highlight {:on-press (fn [] - ) - :underlay-color :transparent} - [view {:width 56 - :height 56} - [image {:source res/trash-icon ;; {:uri "icon_search"} - :style {:marginTop 13 - :marginHorizontal 17 - :width 22 - :height 30}}]]]]) +(defn remove-participants-toolbar [navigator] + [toolbar {:navigator navigator + :title "Remove Participants" + :action {:image {:source res/trash-icon ;; {:uri "icon_search"} + :style {:width 22 + :height 30}} + :handler (fn [] + (dispatch [:remove-selected-participants navigator]))}}]) (defn remove-participants [{:keys [navigator]}] (let [contacts (subscribe [:current-chat-contacts])] @@ -57,7 +33,7 @@ (let [contacts-ds (to-realm-datasource @contacts)] [view {:style {:flex 1 :backgroundColor "white"}} - [toolbar navigator] + [remove-participants-toolbar navigator] [list-view {:dataSource contacts-ds :renderRow (fn [row section-id row-id] (r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator])) diff --git a/src/syng_im/components/chats/chats_list.cljs b/src/syng_im/components/chats/chats_list.cljs index 0d885d4026..b41a54fbaa 100644 --- a/src/syng_im/components/chats/chats_list.cljs +++ b/src/syng_im/components/chats/chats_list.cljs @@ -21,42 +21,20 @@ color-black color-blue text1-color - text2-color - toolbar-background1]] + text2-color]] + [syng-im.components.toolbar :refer [toolbar]] [syng-im.components.icons.ionicons :refer [icon]])) -(defn toolbar [] - [view {:style {:flexDirection "row" - :backgroundColor toolbar-background1 - :height 56 - :elevation 2}} - [touchable-highlight {:on-press (fn [] - ) - :underlay-color :transparent} - [view {:width 56 - :height 56} - [image {:source {:uri "icon_hamburger"} - :style {:marginTop 22 - :marginLeft 20 - :width 16 - :height 12}}]]] - [view {:style {:flex 1 - :alignItems "center" - :justifyContent "center"}} - [text {:style {:marginTop -2.5 - :color text1-color - :fontSize 16 - :fontFamily font}} - "Chats"]] - [touchable-highlight {:on-press (fn [] - ) - :underlay-color :transparent} - [view {:width 56 - :height 56} - [image {:source {:uri "icon_search"} - :style {:margin 19.5 - :width 17 - :height 17}}]]]]) +(defn chats-list-toolbar [] + [toolbar {:nav-action {:image {:source {:uri "icon_hamburger"} + :style {:width 16 + :height 12}} + :handler (fn [])} + :title "Chats" + :action {:image {:source {:uri "icon_search"} + :style {:width 17 + :height 17}} + :handler (fn [])}}]) (defn chats-list [{:keys [navigator]}] (let [chats (subscribe [:get-chats])] @@ -66,7 +44,7 @@ datasource (to-realm-datasource chats)] [view {:style {:flex 1 :backgroundColor "white"}} - [toolbar] + [chats-list-toolbar] [list-view {:dataSource datasource :renderRow (fn [row section-id row-id] (r/as-element [chat-list-item row navigator])) diff --git a/src/syng_im/components/chats/new_group.cljs b/src/syng_im/components/chats/new_group.cljs index 9956460433..f2461b4d73 100644 --- a/src/syng_im/components/chats/new_group.cljs +++ b/src/syng_im/components/chats/new_group.cljs @@ -13,45 +13,21 @@ text1-color text2-color toolbar-background1]] + [syng-im.components.toolbar :refer [toolbar]] [syng-im.components.realm :refer [list-view]] [syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.components.chats.new-group-contact :refer [new-group-contact]] [reagent.core :as r] [syng-im.navigation :refer [nav-pop]])) -(defn toolbar [navigator group-name] - [view {:style {:flexDirection "row" - :backgroundColor toolbar-background1 - :height 56 - :elevation 2}} - [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}} - "New group chat"]] - [touchable-highlight {:on-press (fn [] - (dispatch [:create-new-group group-name navigator])) - :underlay-color :transparent} - [view {:width 56 - :height 56} - [image {:source res/v ;; {:uri "icon_search"} - :style {:marginTop 19 - :marginHorizontal 18 - :width 20 - :height 18}}]]]]) +(defn new-group-toolbar [navigator group-name] + [toolbar {:navigator navigator + :title "New group chat" + :action {:image {:source res/v ;; {:uri "icon_search"} + :style {:width 20 + :height 18}} + :handler (fn [] + (dispatch [:create-new-group group-name navigator]))}}]) (defn new-group [{:keys [navigator]}] (let [contacts (subscribe [:all-contacts]) @@ -61,7 +37,7 @@ [view {:style {:flex 1 :flexDirection "column" :backgroundColor color-white}} - [toolbar navigator @group-name] + [new-group-toolbar navigator @group-name] [view {:style {:marginHorizontal 16}} [text {:style {:marginTop 24 :marginBottom 16 diff --git a/src/syng_im/components/contact_list/contact_list.cljs b/src/syng_im/components/contact_list/contact_list.cljs index 91fd1919f4..06fd584f7c 100644 --- a/src/syng_im/components/contact_list/contact_list.cljs +++ b/src/syng_im/components/contact_list/contact_list.cljs @@ -15,6 +15,7 @@ text1-color text2-color toolbar-background2]] + [syng-im.components.toolbar :refer [toolbar]] [syng-im.navigation :refer [nav-pop]] [syng-im.resources :as res] [syng-im.utils.logging :as log])) @@ -28,38 +29,14 @@ (not= row1 row2))}) contacts)) -(defn toolbar [navigator] - [view {:style {:flexDirection "row" - :backgroundColor toolbar-background2 - :height 56 - :elevation 2}} - [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}} - "Contacts"]] - [touchable-highlight {:on-press (fn [] - ) - :underlay-color :transparent} - [view {:width 56 - :height 56} - [image {:source {:uri "icon_search"} - :style {:margin 19.5 - :width 17 - :height 17}}]]]]) +(defn contact-list-toolbar [navigator] + [toolbar {:navigator navigator + :title "Contacts" + :background-color toolbar-background2 + :action {:image {:source {:uri "icon_search"} + :style {:width 17 + :height 17}} + :handler (fn [])}}]) (defn contact-list [{:keys [navigator]}] (let [contacts (subscribe [:get-contacts])] @@ -67,7 +44,7 @@ (let [contacts-ds (get-data-source @contacts)] [view {:style {:flex 1 :backgroundColor "white"}} - [toolbar navigator] + [contact-list-toolbar navigator] (when contacts-ds [list-view {:dataSource contacts-ds :renderRow (partial render-row navigator) diff --git a/src/syng_im/components/toolbar.cljs b/src/syng_im/components/toolbar.cljs new file mode 100644 index 0000000000..94155f8a6f --- /dev/null +++ b/src/syng_im/components/toolbar.cljs @@ -0,0 +1,58 @@ +(ns syng-im.components.toolbar + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.resources :as res] + [syng-im.components.react :refer [view + text-input + text + image + touchable-highlight]] + [syng-im.components.styles :refer [font + title-font + color-white + color-purple + text1-color + text2-color + toolbar-background1]] + [syng-im.components.realm :refer [list-view]] + [syng-im.utils.listview :refer [to-realm-datasource]] + [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) + :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)]]]])