From 3b9c7387146d1280bd25b032fa6bddb89e057e36 Mon Sep 17 00:00:00 2001 From: virvar Date: Wed, 4 May 2016 14:35:35 +0300 Subject: [PATCH] Custom toolbar for group chat views Former-commit-id: cadf1b2a0b57e5d1dd83aa336f98d0c90cd8b48b --- src/syng_im/components/chat.cljs | 6 +- src/syng_im/components/chat/chat_message.cljs | 3 +- .../components/chat/new_participants.cljs | 62 +++++++++++----- .../components/chat/remove_participants.cljs | 62 +++++++++++----- src/syng_im/components/chats/new_group.cljs | 71 +++++++++++-------- 5 files changed, 134 insertions(+), 70 deletions(-) diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index f83ad7898f..cffdf19a9b 100644 --- a/src/syng_im/components/chat.cljs +++ b/src/syng_im/components/chat.cljs @@ -1,13 +1,11 @@ (ns syng-im.components.chat (:require [clojure.string :as s] [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.components.react :refer [android? - view + [syng-im.components.react :refer [view text image navigator - touchable-highlight - toolbar-android]] + touchable-highlight]] [syng-im.components.realm :refer [list-view]] [syng-im.components.styles :refer [font title-font diff --git a/src/syng_im/components/chat/chat_message.cljs b/src/syng_im/components/chat/chat_message.cljs index 01f1e6a2ca..1127525b45 100644 --- a/src/syng_im/components/chat/chat_message.cljs +++ b/src/syng_im/components/chat/chat_message.cljs @@ -6,8 +6,7 @@ text image touchable-highlight - navigator - toolbar-android]] + navigator]] [syng-im.components.styles :refer [font color-light-blue-transparent color-white diff --git a/src/syng_im/components/chat/new_participants.cljs b/src/syng_im/components/chat/new_participants.cljs index dedff2578a..819d5cd434 100644 --- a/src/syng_im/components/chat/new_participants.cljs +++ b/src/syng_im/components/chat/new_participants.cljs @@ -1,35 +1,63 @@ (ns syng-im.components.chat.new-participants (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.resources :as res] - [syng-im.components.react :refer [view toolbar-android android? text-input]] + [syng-im.components.react :refer [view android? text-input text image + touchable-highlight]] [syng-im.components.realm :refer [list-view]] + [syng-im.components.styles :refer [font + title-font + color-white + color-black + color-blue + text1-color + text2-color + toolbar-background1]] [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 [{:keys [navigator]}] (let [contacts (subscribe [:all-new-contacts])] (fn [] (let [contacts-ds (to-realm-datasource @contacts)] [view {:style {:flex 1 :backgroundColor "white"}} - (when android? - ;; TODO add IOS version - [toolbar-android {:logo res/logo-icon - :title "Add Participants" - :titleColor "#4A5258" - :style {:backgroundColor "white" - :height 56 - :elevation 2} - :actions [{:title "Add" - :icon res/v - :show "always"}] - :onActionSelected (fn [position] - (dispatch [:add-new-participants navigator])) - :navIcon res/nav-back-icon - :onIconClicked (fn [] - (nav-pop navigator))}]) + [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 1620ac3757..cc3ec9710a 100644 --- a/src/syng_im/components/chat/remove_participants.cljs +++ b/src/syng_im/components/chat/remove_participants.cljs @@ -1,35 +1,63 @@ (ns syng-im.components.chat.remove-participants (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.resources :as res] - [syng-im.components.react :refer [view toolbar-android android? text-input]] + [syng-im.components.react :refer [view text-input text image + touchable-highlight]] [syng-im.components.realm :refer [list-view]] + [syng-im.components.styles :refer [font + title-font + color-white + color-black + color-blue + text1-color + text2-color + toolbar-background1]] [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 [{:keys [navigator]}] (let [contacts (subscribe [:current-chat-contacts])] (fn [] (let [contacts-ds (to-realm-datasource @contacts)] [view {:style {:flex 1 :backgroundColor "white"}} - (when android? - ;; TODO add IOS version - [toolbar-android {:logo res/logo-icon - :title "Remove Participants" - :titleColor "#4A5258" - :style {:backgroundColor "white" - :height 56 - :elevation 2} - :actions [{:title "Remove" - :icon res/trash-icon - :show "always"}] - :onActionSelected (fn [position] - (dispatch [:remove-selected-participants navigator])) - :navIcon res/nav-back-icon - :onIconClicked (fn [] - (nav-pop navigator))}]) + [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/new_group.cljs b/src/syng_im/components/chats/new_group.cljs index 0e33f82c5b..9956460433 100644 --- a/src/syng_im/components/chats/new_group.cljs +++ b/src/syng_im/components/chats/new_group.cljs @@ -2,55 +2,66 @@ (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.resources :as res] [syng-im.components.react :refer [view - toolbar-android - android? text-input text image touchable-highlight]] [syng-im.components.styles :refer [font + title-font + color-white + color-purple text1-color text2-color - color-white - color-purple]] + toolbar-background1]] [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 [{:keys [navigator]}] (let [contacts (subscribe [:all-contacts]) - group-name (atom nil)] - (fn [] + group-name (r/atom nil)] + (fn [{:keys [navigator]}] (let [contacts-ds (to-realm-datasource @contacts)] [view {:style {:flex 1 :flexDirection "column" :backgroundColor color-white}} - (when android? - ;; TODO add IOS version - [toolbar-android {:navIcon {:uri "icon_back"} - :style {:backgroundColor color-white - :height 56 - :elevation 2} - :onIconClicked (fn [] - (nav-pop navigator)) - :actions [{:title "Create" - ;; :icon res/icon-ok - :show "always" - :showWithText true}] - :onActionSelected (fn [position] - (dispatch [:create-new-group @group-name navigator]))} - [view {:style {:flex 1 - :alignItems "center" - :justifyContent "center" - :marginRight 112 - :backgroundColor "transparent"}} - [text {:style {:marginTop -2.5 - :color text1-color - :fontSize 16 - :fontFamily font}} - "New group chat"]]]) + [toolbar navigator @group-name] [view {:style {:marginHorizontal 16}} [text {:style {:marginTop 24 :marginBottom 16