diff --git a/src/syng_im/android/core.cljs b/src/syng_im/android/core.cljs index d417df1007..260e3d78e3 100644 --- a/src/syng_im/android/core.cljs +++ b/src/syng_im/android/core.cljs @@ -13,6 +13,7 @@ [syng-im.components.chats.new-group :refer [new-group]] [syng-im.components.chat.new-participants :refer [new-participants]] [syng-im.components.chat.remove-participants :refer [remove-participants]] + [syng-im.components.chatmenu.profile :refer [profile]] [syng-im.utils.logging :as log] [syng-im.utils.utils :refer [toast]] [syng-im.navigation :as nav] @@ -55,7 +56,8 @@ :chat-list (r/as-element [chats-list {:navigator nav}]) :new-group (r/as-element [new-group {:navigator nav}]) :contact-list (r/as-element [contact-list {:navigator nav}]) - :chat (r/as-element [chat {:navigator nav}]))) + :chat (r/as-element [chat {:navigator nav}]) + :profile (r/as-element [profile {:navigator nav}]))) (r/as-element [chat {:navigator nav}]))))}])))) (defn init [] diff --git a/src/syng_im/components/chatmenu/chat_menu.cljs b/src/syng_im/components/chatmenu/chat_menu.cljs new file mode 100644 index 0000000000..f9fd0663a4 --- /dev/null +++ b/src/syng_im/components/chatmenu/chat_menu.cljs @@ -0,0 +1,94 @@ +(ns syng-im.components.chatmenu.chat_menu + (:require [clojure.string :as s] + [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [android? + view + text + image + navigator + toolbar-android + drawer-layout-android + touchable-opacity]] + [syng-im.resources :as res] + [syng-im.components.styles :refer [font + title-font + color-white + chat-background + online-color + selected-message-color + text1-color + text2-color + text3-color]])) + +(defn chat-photo [{:keys [photo-path]}] + [view {:borderRadius 50} + [image {:source (if (s/blank? photo-path) + res/user-no-photo + {:uri photo-path}) + :style {:borderRadius 50 + :width 66 + :height 66}}]]) + +(defn chat-menu [navigator] + [view {:style {:flex 1 + :backgroundColor "#FFF" + :flexDirection "column"}} + [view {:style {:flex .25 + :alignItems "center" + :justifyContent "center"}} + [chat-photo {}]] + [view {:style {:flex .15 + :alignItems "center"}} + [text {:style {:marginTop -2.5 + :color text1-color + :fontSize 18}} + "Status"]] + [view {:style {:flex .50 + :alignItems "flex-start" + :flexDirection "column" + :paddingTop 10}} + [view {:style {:height 40 + :justifyContent "center" + :padding 10 + :paddingLeft 20}} + [touchable-opacity + [text {:style {:marginTop -2.5 + :color text1-color + :fontSize 14} + :onPress (fn [] + (dispatch [:show-profile navigator]))} + "Profile"]]] + [view {:style {:height 40 + :justifyContent "center" + :padding 10 + :paddingLeft 20}} + [touchable-opacity + [text {:style {:marginTop -2.5 + :color text1-color + :fontSize 14}} + "Settings"]]] + [view {:style {:height 40 + :justifyContent "center" + :padding 10 + :paddingLeft 20}} + [touchable-opacity + [text {:style {:marginTop -2.5 + :color text1-color + :fontSize 14}} + "Invite friends"]]] + [view {:style {:height 40 + :justifyContent "center" + :padding 10 + :paddingLeft 20}} + [touchable-opacity + [text {:style {:marginTop -2.5 + :color text1-color + :fontSize 14}} + "FAQ"]]]] + [view {:style {:flex .10 + :alignItems "center"}} + [touchable-opacity + [text {:style {:marginTop -2.5 + :color text3-color + :fontSize 14}} + "Switch User"]]]]) diff --git a/src/syng_im/components/chatmenu/profile.cljs b/src/syng_im/components/chatmenu/profile.cljs new file mode 100644 index 0000000000..16e91a32c7 --- /dev/null +++ b/src/syng_im/components/chatmenu/profile.cljs @@ -0,0 +1,168 @@ +(ns syng-im.components.chatmenu.profile + (:require [clojure.string :as s] + [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [android? + view + text + text-input + image + navigator + toolbar-android + touchable-opacity]] + [syng-im.resources :as res] + [syng-im.components.styles :refer [font + title-font + color-white + chat-background + online-color + selected-message-color + text1-color + text2-color + text3-color]] + [syng-im.components.toolbar :refer [toolbar]])) + +(defn chat-photo [{:keys [photo-path]}] + [view {:borderRadius 50} + [image {:source (if (s/blank? photo-path) + res/user-no-photo + {:uri photo-path}) + :style {:borderRadius 50 + :width 66 + :height 66}}]]) + +(defn chats-list-toolbar [] + [toolbar {:title "Profile"}]) + +(defn profile [navigator] + [view {:style {:flex 1 + :backgroundColor "#FFF" + :flexDirection "column"}} + [toolbar {:title "Profile"}] + [view {:style {:flex .20 + :alignItems "center" + :justifyContent "center"}} + [chat-photo {}]] + [view {:style {:flex .07 + :alignItems "center"}} + [text {:style {:marginTop -2.5 + :color text1-color + :fontSize 18}} + "Status"]] + [view {:style {:flex .13 + :alignItems "center" + :marginRight 48 + :marginLeft 48}} + [text {:style {:marginTop -2.5 + :color text1-color + :alignItems "center" + :textAlign "center" + :fontSize 14}} + (str "The brash businessman’s braggadocio " + "and public exchange with candidates " + "in the US presidential election")]] + [view {:style {:flex .12 + :flexDirection "row" + :alignItems "center" + :justifyContent "center"}} + [view {:style {:height 37 + :justifyContent "center" + :backgroundColor "#7099E6" + :padding 8 + :paddingLeft 20 + :paddingRight 20 + :marginRight 20 + :borderRadius 20}} + [touchable-opacity + [text {:style {:marginTop -2.5 + :color "white" + :fontSize 14}} + "Message"]]] + [view {:style {:width 38 + :height 37 + :alignItems "center" + :backgroundColor "#E3EBFA" + :padding 8 + :borderRadius 19}} + [touchable-opacity + [text {:style {:marginTop -2.5 + :color text3-color + :fontSize 22}} + "˅"]]]] + [view {:style {:flex .55 + :alignItems "flex-start" + :flexDirection "column" + :paddingTop 10}} + [view {:style {:height 55 + :justifyContent "center" + :marginLeft 20 + :borderBottomWidth 1 + :borderBottomColor "#ddd"}} + [touchable-opacity + [text {:style {:marginTop -2.5 + :color text2-color + :fontSize 14}} + "Email"]] + [view {:style {:height 30 + :borderBottomWidth 0 + :marginLeft -5}} + [text-input + {:style {:height 40 + :fontSize 15 + :paddingBottom 15 + :paddingLeft 5} + :value "christonphe_t@gmail.com"}]]] + [view {:style {:height 55 + :justifyContent "center" + :marginLeft 20 + :borderBottomWidth 1 + :borderBottomColor "#ddd" + :marginTop 5}} + [touchable-opacity + [text {:style {:marginTop -2.5 + :color text2-color + :fontSize 14}} + "Username"]] + [view {:style {:height 30 + :borderBottomWidth 0 + :marginLeft -5}} + [text-input {:style {:height 40 + :fontSize 15 + :paddingBottom 15 + :paddingLeft 5}} + "christophe_t"]]] + [view {:style {:height 55 + :justifyContent "center" + :marginLeft 20 + :borderBottomWidth 1 + :borderBottomColor "#ddd" + :marginTop 5}} + [touchable-opacity + [text {:style {:marginTop -2.5 + :color text2-color + :fontSize 14}} + "URL"]] + [view {:style {:height 30 + :borderBottomWidth 0 + :marginLeft -5}} + [text-input {:style {:height 40 + :fontSize 15 + :paddingBottom 15 + :paddingLeft 5}} + "http://instagram.com/etherium-wallet"]]] + [view {:style {:height 55 + :justifyContent "center" + :marginLeft 20 + :marginTop 5}} + [touchable-opacity + [text {:style {:marginTop -2.5 + :color text2-color + :fontSize 14}} + "Phone"]] + [view {:style {:height 30 + :borderBottomWidth 0 + :marginLeft -5}} + [text-input {:style {:height 40 + :fontSize 15 + :paddingBottom 15 + :paddingLeft 5}} + "+1 548 093 98 66"]]]]]) diff --git a/src/syng_im/components/chats/chats_list.cljs b/src/syng_im/components/chats/chats_list.cljs index b41a54fbaa..a22a8a5f77 100644 --- a/src/syng_im/components/chats/chats_list.cljs +++ b/src/syng_im/components/chats/chats_list.cljs @@ -5,6 +5,7 @@ text image touchable-highlight + drawer-layout-android navigator]] [syng-im.components.realm :refer [list-view]] [syng-im.utils.logging :as log] @@ -13,6 +14,7 @@ [syng-im.utils.listview :refer [to-realm-datasource]] [reagent.core :as r] [syng-im.components.chats.chat-list-item :refer [chat-list-item]] + [syng-im.components.chatmenu.chat_menu :refer [chat-menu]] [syng-im.components.action-button :refer [action-button action-button-item]] [syng-im.components.styles :refer [font @@ -29,7 +31,8 @@ [toolbar {:nav-action {:image {:source {:uri "icon_hamburger"} :style {:width 16 :height 12}} - :handler (fn [])} + :handler (fn [] + (.openDrawer js/React.DrawerLayoutAndroid.drawer))} :title "Chats" :action {:image {:source {:uri "icon_search"} :style {:width 17 @@ -42,27 +45,32 @@ (let [chats @chats _ (log/debug "chats=" chats) datasource (to-realm-datasource chats)] - [view {:style {:flex 1 - :backgroundColor "white"}} - [chats-list-toolbar] - [list-view {:dataSource datasource - :renderRow (fn [row section-id row-id] - (r/as-element [chat-list-item row navigator])) - :style {:backgroundColor "white"}}] - [action-button {:buttonColor color-blue} - [action-button-item {:title "New Chat" - :buttonColor "#9b59b6" - :onPress (fn [] - (dispatch [:show-contacts navigator]))} - [icon {:name "android-create" - :style {:fontSize 20 - :height 22 - :color "white"}}]] - [action-button-item {:title "New Group Chat" - :buttonColor "#1abc9c" - :onPress (fn [] - (dispatch [:show-group-new navigator]))} - [icon {:name "person-stalker" - :style {:fontSize 20 - :height 22 - :color "white"}}]]]])))) + [drawer-layout-android {:drawerWidth 300 + :drawerPosition js/React.DrawerLayoutAndroid.positions.Left + :render-navigation-view #(r/as-element [chat-menu navigator]) + :ref (fn [drawer] + (set! js/React.DrawerLayoutAndroid.drawer drawer))} + [view {:style {:flex 1 + :backgroundColor "white"}} + [chats-list-toolbar] + [list-view {:dataSource datasource + :renderRow (fn [row section-id row-id] + (r/as-element [chat-list-item row navigator])) + :style {:backgroundColor "white"}}] + [action-button {:buttonColor color-blue} + [action-button-item {:title "New Chat" + :buttonColor "#9b59b6" + :onPress (fn [] + (dispatch [:show-contacts navigator]))} + [icon {:name "android-create" + :style {:fontSize 20 + :height 22 + :color "white"}}]] + [action-button-item {:title "New Group Chat" + :buttonColor "#1abc9c" + :onPress (fn [] + (dispatch [:show-group-new navigator]))} + [icon {:name "person-stalker" + :style {:fontSize 20 + :height 22 + :color "white"}}]]]]])))) diff --git a/src/syng_im/components/react.cljs b/src/syng_im/components/react.cljs index b3b047b0b8..3cceab6ea7 100644 --- a/src/syng_im/components/react.cljs +++ b/src/syng_im/components/react.cljs @@ -12,6 +12,8 @@ (def toolbar-android (r/adapt-react-class (.-ToolbarAndroid js/React))) (def list-view (r/adapt-react-class (.-ListView js/React))) (def text-input (r/adapt-react-class (.-TextInput js/React))) +(def drawer-layout-android (r/adapt-react-class (.-DrawerLayoutAndroid js/React))) +(def touchable-opacity (r/adapt-react-class (.-TouchableOpacity js/React))) (def platform (.. js/React -Platform -OS)) diff --git a/src/syng_im/components/styles.cljs b/src/syng_im/components/styles.cljs index 5f55404a35..236de8cf66 100644 --- a/src/syng_im/components/styles.cljs +++ b/src/syng_im/components/styles.cljs @@ -16,6 +16,7 @@ (def text1-color color-black) (def text2-color color-gray) +(def text3-color color-blue) (def online-color color-blue) (def new-messages-count-color "#7099e632") (def chat-background color-light-gray) diff --git a/src/syng_im/handlers.cljs b/src/syng_im/handlers.cljs index fd43a4528c..b042ca1be6 100644 --- a/src/syng_im/handlers.cljs +++ b/src/syng_im/handlers.cljs @@ -384,6 +384,12 @@ ;; -- Chats -------------------------------------------------------------- +(register-handler :show-profile + (fn [db [action navigator]] + (log/debug action) + (nav-push navigator {:view-id :profile}) + db)) + (register-handler :show-chat (fn [db [action chat-id navigator nav-type]] (log/debug action "chat-id" chat-id)