From ce53fec09cc103c64adc8c2f7bf4e5d1a55e8cd4 Mon Sep 17 00:00:00 2001 From: virvar Date: Thu, 5 May 2016 17:03:34 +0300 Subject: [PATCH 01/20] Add drawer Former-commit-id: 55dc64f6e62163c22486368d8ada6932fabcd86a --- src/syng_im/android/core.cljs | 4 +- .../components/chatmenu/chat_menu.cljs | 94 ++++++++++ src/syng_im/components/chatmenu/profile.cljs | 168 ++++++++++++++++++ src/syng_im/components/chats/chats_list.cljs | 58 +++--- src/syng_im/components/react.cljs | 2 + src/syng_im/components/styles.cljs | 1 + src/syng_im/handlers.cljs | 6 + 7 files changed, 307 insertions(+), 26 deletions(-) create mode 100644 src/syng_im/components/chatmenu/chat_menu.cljs create mode 100644 src/syng_im/components/chatmenu/profile.cljs 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) From 3c788b4d4b0e20ca9ab31ea3da0215797a82754b Mon Sep 17 00:00:00 2001 From: virvar Date: Fri, 6 May 2016 11:40:18 +0300 Subject: [PATCH 02/20] Fix drawer styles. Rename Former-commit-id: b76a3d4afdac739b0e98838d9a193d612ad8435b --- src/syng_im/android/core.cljs | 2 +- .../components/chatmenu/chat_menu.cljs | 94 ------------------- src/syng_im/components/chats/chats_list.cljs | 18 ++-- src/syng_im/components/drawer.cljs | 91 ++++++++++++++++++ .../components/{chatmenu => }/profile.cljs | 10 +- 5 files changed, 102 insertions(+), 113 deletions(-) delete mode 100644 src/syng_im/components/chatmenu/chat_menu.cljs create mode 100644 src/syng_im/components/drawer.cljs rename src/syng_im/components/{chatmenu => }/profile.cljs (97%) diff --git a/src/syng_im/android/core.cljs b/src/syng_im/android/core.cljs index 260e3d78e3..22c1ecdb51 100644 --- a/src/syng_im/android/core.cljs +++ b/src/syng_im/android/core.cljs @@ -13,7 +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.components.profile :refer [profile]] [syng-im.utils.logging :as log] [syng-im.utils.utils :refer [toast]] [syng-im.navigation :as nav] diff --git a/src/syng_im/components/chatmenu/chat_menu.cljs b/src/syng_im/components/chatmenu/chat_menu.cljs deleted file mode 100644 index f9fd0663a4..0000000000 --- a/src/syng_im/components/chatmenu/chat_menu.cljs +++ /dev/null @@ -1,94 +0,0 @@ -(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/chats/chats_list.cljs b/src/syng_im/components/chats/chats_list.cljs index a22a8a5f77..eaf055b981 100644 --- a/src/syng_im/components/chats/chats_list.cljs +++ b/src/syng_im/components/chats/chats_list.cljs @@ -5,7 +5,6 @@ text image touchable-highlight - drawer-layout-android navigator]] [syng-im.components.realm :refer [list-view]] [syng-im.utils.logging :as log] @@ -14,7 +13,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.drawer :refer [drawer-view open-drawer]] [syng-im.components.action-button :refer [action-button action-button-item]] [syng-im.components.styles :refer [font @@ -28,11 +27,10 @@ [syng-im.components.icons.ionicons :refer [icon]])) (defn chats-list-toolbar [] - [toolbar {:nav-action {:image {:source {:uri "icon_hamburger"} - :style {:width 16 - :height 12}} - :handler (fn [] - (.openDrawer js/React.DrawerLayoutAndroid.drawer))} + [toolbar {:nav-action {:image {:source {:uri "icon_hamburger"} + :style {:width 16 + :height 12}} + :handler open-drawer} :title "Chats" :action {:image {:source {:uri "icon_search"} :style {:width 17 @@ -45,11 +43,7 @@ (let [chats @chats _ (log/debug "chats=" chats) datasource (to-realm-datasource chats)] - [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))} + [drawer-view {:navigator navigator} [view {:style {:flex 1 :backgroundColor "white"}} [chats-list-toolbar] diff --git a/src/syng_im/components/drawer.cljs b/src/syng_im/components/drawer.cljs new file mode 100644 index 0000000000..4a54004f5a --- /dev/null +++ b/src/syng_im/components/drawer.cljs @@ -0,0 +1,91 @@ +(ns syng-im.components.drawer + (:require [clojure.string :as s] + [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [reagent.core :as r] + [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]])) + +(defonce drawer-atom (atom)) + +(defn open-drawer [] + (.openDrawer @drawer-atom)) + +(defn user-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 64 + :height 64}}]]) + +(defn menu-item [{:keys [name handler]}] + [touchable-opacity {:style {:height 48 + :paddingLeft 16 + :paddingTop 14} + :onPress handler} + [text {:style {:fontSize 14 + :fontFamily font + :lineHeight 21 + :color text1-color}} + name]]) + +(defn drawer-menu [navigator] + [view {:style {:flex 1 + :backgroundColor color-white + :flexDirection :column}} + [view {:style {:marginTop 40 + :alignItems :center + :justifyContent :center}} + [user-photo {}]] + [view {:style {:marginTop 20 + :alignItems :center}} + [text {:style {:marginTop -2.5 + :color text1-color + :fontSize 16}} + "Status"]] + [view {:style {:flex 1 + :marginTop 80 + :alignItems :stretch + :flexDirection :column}} + [menu-item {:name "Profile" + :handler (fn [] + (dispatch [:show-profile navigator]))}] + [menu-item {:name "Settings" + :handler (fn [])}] + [menu-item {:name "Invite friends" + :handler (fn [])}] + [menu-item {:name "FAQ" + :handler (fn [])}]] + [view {:style {:paddingVertical 36 + :alignItems :center}} + [touchable-opacity {} + [text {:style {:fontSize 14 + :fontFamily font + :lineHeight 21 + :color text3-color}} + "Switch users"]]]]) + +(defn drawer-view [{:keys [navigator]} items] + [drawer-layout-android {:drawerWidth 300 + :drawerPosition js/React.DrawerLayoutAndroid.positions.Left + :render-navigation-view #(r/as-element [drawer-menu navigator]) + :ref (fn [drawer] + (reset! drawer-atom drawer))} + items]) diff --git a/src/syng_im/components/chatmenu/profile.cljs b/src/syng_im/components/profile.cljs similarity index 97% rename from src/syng_im/components/chatmenu/profile.cljs rename to src/syng_im/components/profile.cljs index 16e91a32c7..f7434cd03a 100644 --- a/src/syng_im/components/chatmenu/profile.cljs +++ b/src/syng_im/components/profile.cljs @@ -1,4 +1,4 @@ -(ns syng-im.components.chatmenu.profile +(ns syng-im.components.profile (:require [clojure.string :as s] [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.components.react :refer [android? @@ -30,14 +30,12 @@ :width 66 :height 66}}]]) -(defn chats-list-toolbar [] - [toolbar {:title "Profile"}]) - -(defn profile [navigator] +(defn profile [{:keys [navigator]}] [view {:style {:flex 1 :backgroundColor "#FFF" :flexDirection "column"}} - [toolbar {:title "Profile"}] + [toolbar {:navigator navigator + :title "Profile"}] [view {:style {:flex .20 :alignItems "center" :justifyContent "center"}} From 088d20ebf0a9c58e95cc833852d6700ab7c9784e Mon Sep 17 00:00:00 2001 From: virvar Date: Fri, 6 May 2016 14:25:29 +0300 Subject: [PATCH 03/20] Fix profile styles Former-commit-id: 7ddd90e2dca147ea6f48f9508f964e482f489c0a --- .../drawable-hdpi/icon_more_vertical_blue.png | Bin 0 -> 162 bytes .../drawable-mdpi/icon_more_vertical_blue.png | Bin 0 -> 129 bytes .../icon_more_vertical_blue.png | Bin 0 -> 219 bytes .../icon_more_vertical_blue.png | Bin 0 -> 291 bytes .../icon_more_vertical_blue.png | Bin 0 -> 413 bytes src/syng_im/android/core.cljs | 9 +- src/syng_im/components/drawer.cljs | 7 +- src/syng_im/components/profile.cljs | 277 +++++++++--------- src/syng_im/components/react.cljs | 1 + src/syng_im/components/styles.cljs | 3 +- 10 files changed, 155 insertions(+), 142 deletions(-) create mode 100644 android/app/src/main/res/drawable-hdpi/icon_more_vertical_blue.png create mode 100644 android/app/src/main/res/drawable-mdpi/icon_more_vertical_blue.png create mode 100644 android/app/src/main/res/drawable-xhdpi/icon_more_vertical_blue.png create mode 100644 android/app/src/main/res/drawable-xxhdpi/icon_more_vertical_blue.png create mode 100644 android/app/src/main/res/drawable-xxxhdpi/icon_more_vertical_blue.png diff --git a/android/app/src/main/res/drawable-hdpi/icon_more_vertical_blue.png b/android/app/src/main/res/drawable-hdpi/icon_more_vertical_blue.png new file mode 100644 index 0000000000000000000000000000000000000000..f8bc4ec674dc612e4417a08098898b3080572aef GIT binary patch literal 162 zcmeAS@N?(olHy`uVBq!ia0vp^Y(Ol*0U~b-^ehHajKx9jP7LeL$-D$|Vmw_OLo`H_ zb0WUZfBU#y+?VISQjEnx?oJHr&dIz4a;AE^IEGjV zCZ{koZMvDCTKD(=&7(i&Ut~P;|NM{t4ARQgk>RU82)j*q^8UZQ{=fg{6<8*FfJ1y=>${StL$h6j6EU%D)FEb=+QbmNAP0(;_QhR(((GaS~jT5`k+ zdhn5dXj0w6{Du6tr_3CZ5J#!yj)O3 zymqCKo`bJ~t&X7rV~mtTQGn_HgND389Gg04ENMJ_A+Yd?fP!U&d$CN>hlff1&n#jT njUOEaas@pTw)82l>SJbz5D;G5IEzso=urkwS3j3^P64%P)Px$S4l)cR9Fe^m%B{^K@f&#R)~;CW)d1eq6h*c8lVCTi4ZDq1rQ-5LnU338W^<_5p$Om;m*RyAG zzqvIy!byx2BliU3lt5s3R%#ZLhpx0SYFm`!`R}jMFgIwexeb_PF`&sX(CsA5-NAk zn^)$-sthW)-|ay4Sx;_re_&J&%3LUOA(1F|FLU9q{9pJ47%f2}Y-CLE00000NkvXX Hu0mjfw;#3? literal 0 HcmV?d00001 diff --git a/src/syng_im/android/core.cljs b/src/syng_im/android/core.cljs index 22c1ecdb51..b7a1d2824e 100644 --- a/src/syng_im/android/core.cljs +++ b/src/syng_im/android/core.cljs @@ -57,7 +57,14 @@ :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}]) - :profile (r/as-element [profile {:navigator nav}]))) + ;; TODO pass profile + :profile (r/as-element [profile {:navigator nav} + {:name "Status" + :status (str "The brash businessman’s braggadocio " + "and public exchange with candidates " + "in the US presidential election") + :phone-number "+1 548 093 98 66" + :email "christonphe_t@gmail.com"}]))) (r/as-element [chat {:navigator nav}]))))}])))) (defn init [] diff --git a/src/syng_im/components/drawer.cljs b/src/syng_im/components/drawer.cljs index 4a54004f5a..d187a5fda1 100644 --- a/src/syng_im/components/drawer.cljs +++ b/src/syng_im/components/drawer.cljs @@ -26,6 +26,9 @@ (defn open-drawer [] (.openDrawer @drawer-atom)) +(defn close-drawer [] + (.closeDrawer @drawer-atom)) + (defn user-photo [{:keys [photo-path]}] [view {:borderRadius 50} [image {:source (if (s/blank? photo-path) @@ -39,7 +42,9 @@ [touchable-opacity {:style {:height 48 :paddingLeft 16 :paddingTop 14} - :onPress handler} + :onPress (fn [] + (close-drawer) + (handler))} [text {:style {:fontSize 14 :fontFamily font :lineHeight 21 diff --git a/src/syng_im/components/profile.cljs b/src/syng_im/components/profile.cljs index f7434cd03a..dccba1a523 100644 --- a/src/syng_im/components/profile.cljs +++ b/src/syng_im/components/profile.cljs @@ -6,161 +6,160 @@ text text-input image + scroll-view navigator - toolbar-android + touchable-highlight touchable-opacity]] [syng-im.resources :as res] [syng-im.components.styles :refer [font title-font color-white + color-blue + color-blue-transparent chat-background online-color selected-message-color + separator-color text1-color text2-color text3-color]] - [syng-im.components.toolbar :refer [toolbar]])) + [syng-im.navigation :refer [nav-pop]])) -(defn chat-photo [{:keys [photo-path]}] +(defn user-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}}]]) + :width 64 + :height 64}}]]) -(defn profile [{:keys [navigator]}] - [view {:style {:flex 1 - :backgroundColor "#FFF" - :flexDirection "column"}} - [toolbar {:navigator navigator - :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"]]]]]) +(defn user-online [{:keys [online]}] + (when online + [view {:position :absolute + :top 44 + :left 44 + :width 24 + :height 24 + :borderRadius 50 + :backgroundColor online-color + :borderWidth 2 + :borderColor color-white} + [view {:position :absolute + :top 8 + :left 5 + :width 4 + :height 4 + :borderRadius 50 + :backgroundColor color-white}] + [view {:position :absolute + :top 8 + :left 11 + :width 4 + :height 4 + :borderRadius 50 + :backgroundColor color-white}]])) + +(defn profile-property-view [{:keys [name value]}] + [view {:style {:height 85 + :paddingHorizontal 16}} + [view {:borderBottomWidth 1 + :borderBottomColor separator-color} + [text {:style {:marginTop 16 + :fontSize 14 + :fontFamily font + :color text2-color}} + name] + [text {:style {:marginTop 11 + :height 40 + :fontSize 16 + :fontFamily font + :color text1-color}} + value]]]) + +(defn profile [{:keys [navigator]} {:keys [name status phone-number email]}] + [scroll-view {:style {:flex 1 + :backgroundColor color-white + :flexDirection :column}} + [touchable-highlight {:style {:position :absolute} + :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 {:alignSelf :center + :alignItems :center + :width 249}} + [view {:marginTop 26} + [user-photo {}] + [user-online {:online true}]] + [text {:style {:marginTop 20 + :fontSize 18 + :fontFamily font + :color text1-color}} + name] + [text {:style {:marginTop 10 + :fontFamily font + :fontSize 14 + :lineHeight 20 + :textAlign :center + :color text2-color}} + status] + [view {:style {:marginTop 18 + :flexDirection :row}} + [touchable-highlight {:onPress (fn [] + ;; TODO not implemented + ) + :underlay-color :transparent} + [view {:style {:height 40 + :justifyContent :center + :backgroundColor color-blue + :paddingLeft 25 + :paddingRight 25 + :borderRadius 50}} + [text {:style {:marginTop -2.5 + :fontSize 14 + :fontFamily font + :color color-white}} + "Message"]]] + [touchable-highlight {:onPress (fn [] + ;; TODO not implemented + ) + :underlay-color :transparent} + [view {:style {:marginLeft 10 + :width 40 + :height 40 + :alignItems :center + :justifyContent :center + :backgroundColor color-blue-transparent + :padding 8 + :borderRadius 50}} + [image {:source {:uri "icon_more_vertical_blue"} + :style {:width 4 + :height 16}}]]]]] + [view {:style {:marginTop 20 + :alignItems :stretch + :flexDirection :column}} + [profile-property-view {:name "Username" + :value name}] + [profile-property-view {:name "Phone number" + :value phone-number}] + [profile-property-view {:name "Email" + :value email}] + [view {:style {:marginTop 50 + :marginBottom 43 + :alignItems :center}} + [touchable-opacity {} + [text {:style {:fontSize 14 + :fontFamily font + :lineHeight 21 + :color text2-color + ;; IOS: + :letterSpacing 0.5}} + "REPORT USER"]]]]]) diff --git a/src/syng_im/components/react.cljs b/src/syng_im/components/react.cljs index 3cceab6ea7..77ac3ce478 100644 --- a/src/syng_im/components/react.cljs +++ b/src/syng_im/components/react.cljs @@ -11,6 +11,7 @@ (def touchable-highlight (r/adapt-react-class (.-TouchableHighlight js/React))) (def toolbar-android (r/adapt-react-class (.-ToolbarAndroid js/React))) (def list-view (r/adapt-react-class (.-ListView js/React))) +(def scroll-view (r/adapt-react-class (.-ScrollView 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))) diff --git a/src/syng_im/components/styles.cljs b/src/syng_im/components/styles.cljs index 236de8cf66..1f02586a7f 100644 --- a/src/syng_im/components/styles.cljs +++ b/src/syng_im/components/styles.cljs @@ -5,6 +5,7 @@ (def title-font "sans-serif-medium") (def color-blue "#7099e6") +(def color-blue-transparent "#7099e632") (def color-black "#000000de") (def color-purple "#a187d5") (def color-gray "#838c93de") @@ -18,7 +19,7 @@ (def text2-color color-gray) (def text3-color color-blue) (def online-color color-blue) -(def new-messages-count-color "#7099e632") +(def new-messages-count-color color-blue-transparent) (def chat-background color-light-gray) (def selected-message-color "#E4E9ED") (def separator-color "#0000001f") From 21eaa78878a8574d7dcce03901389de2e320c511 Mon Sep 17 00:00:00 2001 From: virvar Date: Fri, 6 May 2016 14:37:57 +0300 Subject: [PATCH 04/20] Close drawer on 'switch users' click Former-commit-id: 9ec8f70cfeba9a8bd99991d90434432baa4d940d --- src/syng_im/components/drawer.cljs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/syng_im/components/drawer.cljs b/src/syng_im/components/drawer.cljs index d187a5fda1..28f942225e 100644 --- a/src/syng_im/components/drawer.cljs +++ b/src/syng_im/components/drawer.cljs @@ -80,7 +80,10 @@ :handler (fn [])}]] [view {:style {:paddingVertical 36 :alignItems :center}} - [touchable-opacity {} + [touchable-opacity {:onPress (fn [] + (close-drawer) + ;; TODO not implemented + )} [text {:style {:fontSize 14 :fontFamily font :lineHeight 21 From 34bd8bebe76c2571ea5c01c53227a61f10336228 Mon Sep 17 00:00:00 2001 From: virvar Date: Fri, 6 May 2016 17:12:24 +0300 Subject: [PATCH 05/20] Show contact profile from chat menu. Fix chat creation. Former-commit-id: e4e9bcfc1afcf5a067a63431226c1b9252fa5869 --- src/syng_im/android/core.cljs | 9 +- src/syng_im/components/chat.cljs | 10 +- .../components/contact_list/contact.cljs | 6 +- .../components/contact_list/contact_list.cljs | 2 +- src/syng_im/components/drawer.cljs | 11 +- src/syng_im/components/profile.cljs | 174 +++++++++--------- src/syng_im/db.cljs | 1 + src/syng_im/handlers.cljs | 15 +- src/syng_im/models/contacts.cljs | 9 + src/syng_im/subs.cljs | 9 +- 10 files changed, 136 insertions(+), 110 deletions(-) diff --git a/src/syng_im/android/core.cljs b/src/syng_im/android/core.cljs index b7a1d2824e..22c1ecdb51 100644 --- a/src/syng_im/android/core.cljs +++ b/src/syng_im/android/core.cljs @@ -57,14 +57,7 @@ :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}]) - ;; TODO pass profile - :profile (r/as-element [profile {:navigator nav} - {:name "Status" - :status (str "The brash businessman’s braggadocio " - "and public exchange with candidates " - "in the US presidential election") - :phone-number "+1 548 093 98 66" - :email "christonphe_t@gmail.com"}]))) + :profile (r/as-element [profile {:navigator nav}]))) (r/as-element [chat {:navigator nav}]))))}])))) (defn init [] diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index cffdf19a9b..15f1dec6da 100644 --- a/src/syng_im/components/chat.cljs +++ b/src/syng_im/components/chat.cljs @@ -128,8 +128,7 @@ subtitle])]]]) (defn actions-list-view [navigator chat] - (when-let [actions (when (and (:group-chat chat) - (:is-active chat)) + (when-let [actions (if (:group-chat chat) [{:title "Add Contact to chat" :icon "icon_menu_group" :icon-style {:width 25 @@ -151,7 +150,12 @@ :icon "icon_settings" :icon-style {:width 20 :height 13} - :handler (fn [] )}])] + :handler (fn [] )}] + [{:title "Profile" + :icon "icon_menu_group" + :icon-style {:width 25 + :height 19} + :handler #(dispatch [:show-profile navigator (:chat-id chat)])}])] [view {:style {:backgroundColor toolbar-background1 :elevation 2 :position "absolute" diff --git a/src/syng_im/components/contact_list/contact.cljs b/src/syng_im/components/contact_list/contact.cljs index 32f3f34d9c..beb8dcca88 100644 --- a/src/syng_im/components/contact_list/contact.cljs +++ b/src/syng_im/components/contact_list/contact.cljs @@ -1,11 +1,11 @@ (ns syng-im.components.contact-list.contact - (:require [syng-im.components.react :refer [view text image touchable-highlight]] + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [view text image touchable-highlight]] [syng-im.resources :as res] - [syng-im.navigation :as nav] [syng-im.components.contact-list.contact-inner :refer [contact-inner-view]])) (defn show-chat [navigator whisper-identity] - (nav/nav-push navigator {:view-id :chat})) + (dispatch [:show-chat whisper-identity navigator :push])) (defn contact-view [{:keys [navigator contact]}] (let [{:keys [whisper-identity]} contact] diff --git a/src/syng_im/components/contact_list/contact_list.cljs b/src/syng_im/components/contact_list/contact_list.cljs index 06fd584f7c..85a9cbff3f 100644 --- a/src/syng_im/components/contact_list/contact_list.cljs +++ b/src/syng_im/components/contact_list/contact_list.cljs @@ -43,7 +43,7 @@ (fn [] (let [contacts-ds (get-data-source @contacts)] [view {:style {:flex 1 - :backgroundColor "white"}} + :backgroundColor color-white}} [contact-list-toolbar navigator] (when contacts-ds [list-view {:dataSource contacts-ds diff --git a/src/syng_im/components/drawer.cljs b/src/syng_im/components/drawer.cljs index 28f942225e..b79c55e933 100644 --- a/src/syng_im/components/drawer.cljs +++ b/src/syng_im/components/drawer.cljs @@ -73,9 +73,16 @@ :handler (fn [] (dispatch [:show-profile navigator]))}] [menu-item {:name "Settings" - :handler (fn [])}] + :handler (fn [] + ;; TODO not implemented + )}] + [menu-item {:name "Contacts" + :handler (fn [] + (dispatch [:show-contacts navigator]))}] [menu-item {:name "Invite friends" - :handler (fn [])}] + :handler (fn [] + ;; TODO not implemented + )}] [menu-item {:name "FAQ" :handler (fn [])}]] [view {:style {:paddingVertical 36 diff --git a/src/syng_im/components/profile.cljs b/src/syng_im/components/profile.cljs index dccba1a523..052cb7b3b0 100644 --- a/src/syng_im/components/profile.cljs +++ b/src/syng_im/components/profile.cljs @@ -77,89 +77,91 @@ :color text1-color}} value]]]) -(defn profile [{:keys [navigator]} {:keys [name status phone-number email]}] - [scroll-view {:style {:flex 1 - :backgroundColor color-white - :flexDirection :column}} - [touchable-highlight {:style {:position :absolute} - :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 {:alignSelf :center - :alignItems :center - :width 249}} - [view {:marginTop 26} - [user-photo {}] - [user-online {:online true}]] - [text {:style {:marginTop 20 - :fontSize 18 - :fontFamily font - :color text1-color}} - name] - [text {:style {:marginTop 10 - :fontFamily font - :fontSize 14 - :lineHeight 20 - :textAlign :center - :color text2-color}} - status] - [view {:style {:marginTop 18 - :flexDirection :row}} - [touchable-highlight {:onPress (fn [] - ;; TODO not implemented - ) - :underlay-color :transparent} - [view {:style {:height 40 - :justifyContent :center - :backgroundColor color-blue - :paddingLeft 25 - :paddingRight 25 - :borderRadius 50}} - [text {:style {:marginTop -2.5 - :fontSize 14 - :fontFamily font - :color color-white}} - "Message"]]] - [touchable-highlight {:onPress (fn [] - ;; TODO not implemented - ) - :underlay-color :transparent} - [view {:style {:marginLeft 10 - :width 40 - :height 40 - :alignItems :center - :justifyContent :center - :backgroundColor color-blue-transparent - :padding 8 - :borderRadius 50}} - [image {:source {:uri "icon_more_vertical_blue"} - :style {:width 4 - :height 16}}]]]]] - [view {:style {:marginTop 20 - :alignItems :stretch - :flexDirection :column}} - [profile-property-view {:name "Username" - :value name}] - [profile-property-view {:name "Phone number" - :value phone-number}] - [profile-property-view {:name "Email" - :value email}] - [view {:style {:marginTop 50 - :marginBottom 43 - :alignItems :center}} - [touchable-opacity {} - [text {:style {:fontSize 14 - :fontFamily font - :lineHeight 21 - :color text2-color - ;; IOS: - :letterSpacing 0.5}} - "REPORT USER"]]]]]) +(defn profile [{:keys [navigator]}] + (let [contact (subscribe [:contact])] + (fn [{:keys [navigator]}] + [scroll-view {:style {:flex 1 + :backgroundColor color-white + :flexDirection :column}} + [touchable-highlight {:style {:position :absolute} + :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 {:alignSelf :center + :alignItems :center + :width 249}} + [view {:marginTop 26} + [user-photo {}] + [user-online {:online true}]] + [text {:style {:marginTop 20 + :fontSize 18 + :fontFamily font + :color text1-color}} + (:name @contact)] + [text {:style {:marginTop 10 + :fontFamily font + :fontSize 14 + :lineHeight 20 + :textAlign :center + :color text2-color}} + "!not implemented"] + [view {:style {:marginTop 18 + :flexDirection :row}} + [touchable-highlight {:onPress (fn [] + ;; TODO not implemented + ) + :underlay-color :transparent} + [view {:style {:height 40 + :justifyContent :center + :backgroundColor color-blue + :paddingLeft 25 + :paddingRight 25 + :borderRadius 50}} + [text {:style {:marginTop -2.5 + :fontSize 14 + :fontFamily font + :color color-white}} + "Message"]]] + [touchable-highlight {:onPress (fn [] + ;; TODO not implemented + ) + :underlay-color :transparent} + [view {:style {:marginLeft 10 + :width 40 + :height 40 + :alignItems :center + :justifyContent :center + :backgroundColor color-blue-transparent + :padding 8 + :borderRadius 50}} + [image {:source {:uri "icon_more_vertical_blue"} + :style {:width 4 + :height 16}}]]]]] + [view {:style {:marginTop 20 + :alignItems :stretch + :flexDirection :column}} + [profile-property-view {:name "Username" + :value (:name @contact)}] + [profile-property-view {:name "Phone number" + :value (:phone-number @contact)}] + [profile-property-view {:name "Email" + :value "!not implemented"}] + [view {:style {:marginTop 50 + :marginBottom 43 + :alignItems :center}} + [touchable-opacity {} + [text {:style {:fontSize 14 + :fontFamily font + :lineHeight 21 + :color text2-color + ;; IOS: + :letterSpacing 0.5}} + "REPORT USER"]]]]]))) diff --git a/src/syng_im/db.cljs b/src/syng_im/db.cljs index 7cfaae514f..21ba915bc2 100644 --- a/src/syng_im/db.cljs +++ b/src/syng_im/db.cljs @@ -21,6 +21,7 @@ (def protocol-initialized-path [:protocol-initialized]) (def identity-password-path [:identity-password]) +(def contact-identity-path [:contact-identity]) (def current-chat-id-path [:chat :current-chat-id]) (def updated-chats-signal-path [:chats-updated-signal]) (defn updated-chat-signal-path [chat-id] diff --git a/src/syng_im/handlers.cljs b/src/syng_im/handlers.cljs index b042ca1be6..50473165a6 100644 --- a/src/syng_im/handlers.cljs +++ b/src/syng_im/handlers.cljs @@ -382,18 +382,21 @@ (fn [db [_ value]] (contacts/load-syng-contacts db))) -;; -- Chats -------------------------------------------------------------- - (register-handler :show-profile - (fn [db [action navigator]] + (fn [db [action navigator identity]] (log/debug action) - (nav-push navigator {:view-id :profile}) - db)) + (let [db (contacts/set-contact-identity db identity)] + (dispatch [:navigate-to navigator {:view-id :profile} :push]) + db))) + +;; -- Chats -------------------------------------------------------------- (register-handler :show-chat (fn [db [action chat-id navigator nav-type]] (log/debug action "chat-id" chat-id) - (let [db (set-current-chat-id db chat-id)] + (let [db (-> db + (create-chat chat-id [chat-id] false) + (set-current-chat-id chat-id))] (dispatch [:navigate-to navigator {:view-id :chat} nav-type]) db))) diff --git a/src/syng_im/models/contacts.cljs b/src/syng_im/models/contacts.cljs index 53acb69cab..072a2ebe98 100644 --- a/src/syng_im/models/contacts.cljs +++ b/src/syng_im/models/contacts.cljs @@ -1,6 +1,7 @@ (ns syng-im.models.contacts (:require [cljs.core.async :as async :refer [chan put! !]] [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.db :as db] [syng-im.utils.utils :refer [log toast]] [syng-im.persistence.realm :as realm] [syng-im.persistence.realm :as r] @@ -108,6 +109,14 @@ (defn contact-by-identity [identity] (r/single-cljs (r/get-by-field :contacts :whisper-identity identity))) +;;;;;;;;;;;;;;;;;;;;---------------------------------------------- + +(defn set-contact-identity [db contact-id] + (assoc-in db db/contact-identity-path contact-id)) + +(defn contact-identity [db] + (get-in db db/contact-identity-path)) + (comment (r/write #(create-contact {:phone-number "0543072333" diff --git a/src/syng_im/subs.cljs b/src/syng_im/subs.cljs index 19b0ab404f..302f84b3a1 100644 --- a/src/syng_im/subs.cljs +++ b/src/syng_im/subs.cljs @@ -10,7 +10,9 @@ [syng-im.models.messages :refer [get-messages]] [syng-im.models.contacts :refer [contacts-list contacts-list-exclude - contacts-list-include]] + contacts-list-include + contact-identity + contact-by-identity]] [syng-im.models.commands :refer [get-commands get-chat-command get-chat-command-content @@ -125,6 +127,11 @@ (reaction (contacts-list)))) +(register-sub :contact + (fn [db _] + (let [identity (reaction (get-in @db db/contact-identity-path))] + (reaction (contact-by-identity @identity))))) + (register-sub :all-new-contacts (fn [db _] (let [current-chat-id (reaction (current-chat-id @db)) From 52ff320c23b4811ca71c408bca0e0b3558b67ca9 Mon Sep 17 00:00:00 2001 From: virvar Date: Mon, 9 May 2016 09:53:02 +0300 Subject: [PATCH 06/20] Profile and Drawer styles refactoring Former-commit-id: 547c9031be25150218b3153e3bfd47c32f6a4f50 --- src/syng_im/components/drawer.cljs | 58 ++------ src/syng_im/components/drawer_styles.cljs | 76 ++++++++++ src/syng_im/components/profile.cljs | 142 ++++--------------- src/syng_im/components/profile_styles.cljs | 154 +++++++++++++++++++++ 4 files changed, 272 insertions(+), 158 deletions(-) create mode 100644 src/syng_im/components/drawer_styles.cljs create mode 100644 src/syng_im/components/profile_styles.cljs diff --git a/src/syng_im/components/drawer.cljs b/src/syng_im/components/drawer.cljs index b79c55e933..19fc3b2ea7 100644 --- a/src/syng_im/components/drawer.cljs +++ b/src/syng_im/components/drawer.cljs @@ -11,15 +11,7 @@ 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]])) + [syng-im.components.drawer-styles :as st])) (defonce drawer-atom (atom)) @@ -30,45 +22,27 @@ (.closeDrawer @drawer-atom)) (defn user-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 64 - :height 64}}]]) + [image {:source (if (s/blank? photo-path) + res/user-no-photo + {:uri photo-path}) + :style st/user-photo}]) (defn menu-item [{:keys [name handler]}] - [touchable-opacity {:style {:height 48 - :paddingLeft 16 - :paddingTop 14} + [touchable-opacity {:style st/menu-item-touchable :onPress (fn [] (close-drawer) (handler))} - [text {:style {:fontSize 14 - :fontFamily font - :lineHeight 21 - :color text1-color}} + [text {:style st/menu-item-text} name]]) (defn drawer-menu [navigator] - [view {:style {:flex 1 - :backgroundColor color-white - :flexDirection :column}} - [view {:style {:marginTop 40 - :alignItems :center - :justifyContent :center}} + [view {:style st/drawer-menu} + [view {:style st/user-photo-container} [user-photo {}]] - [view {:style {:marginTop 20 - :alignItems :center}} - [text {:style {:marginTop -2.5 - :color text1-color - :fontSize 16}} + [view {:style st/name-container} + [text {:style st/name-text} "Status"]] - [view {:style {:flex 1 - :marginTop 80 - :alignItems :stretch - :flexDirection :column}} + [view {:style st/menu-items-container} [menu-item {:name "Profile" :handler (fn [] (dispatch [:show-profile navigator]))}] @@ -85,16 +59,12 @@ )}] [menu-item {:name "FAQ" :handler (fn [])}]] - [view {:style {:paddingVertical 36 - :alignItems :center}} + [view {:style st/switch-users-container} [touchable-opacity {:onPress (fn [] (close-drawer) ;; TODO not implemented )} - [text {:style {:fontSize 14 - :fontFamily font - :lineHeight 21 - :color text3-color}} + [text {:style st/switch-users-text} "Switch users"]]]]) (defn drawer-view [{:keys [navigator]} items] diff --git a/src/syng_im/components/drawer_styles.cljs b/src/syng_im/components/drawer_styles.cljs new file mode 100644 index 0000000000..0896732490 --- /dev/null +++ b/src/syng_im/components/drawer_styles.cljs @@ -0,0 +1,76 @@ +(ns syng-im.components.drawer-styles + (:require [syng-im.components.styles :refer [font + color-light-blue-transparent + color-white + color-black + color-blue + color-blue-transparent + selected-message-color + online-color + separator-color + text1-color + text2-color + text3-color]])) + +(def user-photo + {:borderRadius 50 + :width 64 + :height 64}) + +(def menu-item-touchable + {:height 48 + :paddingLeft 16 + :paddingTop 14}) + +(def menu-item-text + {:fontSize 14 + :fontFamily font + :lineHeight 21 + :color text1-color}) + +(def drawer-menu + {:flex 1 + :backgroundColor color-white + :flexDirection :column}) + +(def user-photo-container + {:marginTop 40 + :alignItems :center + :justifyContent :center}) + +(def name-container + {:marginTop 20 + :alignItems :center}) + +(def name-text + {:marginTop -2.5 + :color text1-color + :fontSize 16}) + +(def menu-items-container + {:flex 1 + :marginTop 80 + :alignItems :stretch + :flexDirection :column}) + +(def switch-users-container + {:paddingVertical 36 + :alignItems :center}) + +(def switch-users-text + {:fontSize 14 + :fontFamily font + :lineHeight 21 + :color text3-color}) + + +(comment drawer-menu [navigator] + [view {:style st/drawer-menu} + + [view {:style } + [touchable-opacity {:onPress (fn [] + (close-drawer) + ;; TODO not implemented + )} + [text {:style } + "Switch users"]]]]) diff --git a/src/syng_im/components/profile.cljs b/src/syng_im/components/profile.cljs index 052cb7b3b0..5711d694e2 100644 --- a/src/syng_im/components/profile.cljs +++ b/src/syng_im/components/profile.cljs @@ -11,157 +11,71 @@ touchable-highlight touchable-opacity]] [syng-im.resources :as res] - [syng-im.components.styles :refer [font - title-font - color-white - color-blue - color-blue-transparent - chat-background - online-color - selected-message-color - separator-color - text1-color - text2-color - text3-color]] + [syng-im.components.profile-styles :as st] [syng-im.navigation :refer [nav-pop]])) (defn user-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 64 - :height 64}}]]) + [image {:source (if (s/blank? photo-path) + res/user-no-photo + {:uri photo-path}) + :style st/user-photo}]) (defn user-online [{:keys [online]}] (when online - [view {:position :absolute - :top 44 - :left 44 - :width 24 - :height 24 - :borderRadius 50 - :backgroundColor online-color - :borderWidth 2 - :borderColor color-white} - [view {:position :absolute - :top 8 - :left 5 - :width 4 - :height 4 - :borderRadius 50 - :backgroundColor color-white}] - [view {:position :absolute - :top 8 - :left 11 - :width 4 - :height 4 - :borderRadius 50 - :backgroundColor color-white}]])) + [view st/user-online-container + [view st/user-online-dot-left] + [view st/user-online-dot-right]])) (defn profile-property-view [{:keys [name value]}] - [view {:style {:height 85 - :paddingHorizontal 16}} - [view {:borderBottomWidth 1 - :borderBottomColor separator-color} - [text {:style {:marginTop 16 - :fontSize 14 - :fontFamily font - :color text2-color}} + [view {:style st/profile-property-view-container} + [view {:style st/profile-property-view-sub-container} + [text {:style st/profile-property-view-label} name] - [text {:style {:marginTop 11 - :height 40 - :fontSize 16 - :fontFamily font - :color text1-color}} + [text {:style st/profile-property-view-value} value]]]) (defn profile [{:keys [navigator]}] (let [contact (subscribe [:contact])] (fn [{:keys [navigator]}] - [scroll-view {:style {:flex 1 - :backgroundColor color-white - :flexDirection :column}} - [touchable-highlight {:style {:position :absolute} + [scroll-view {:style st/profile} + [touchable-highlight {:style st/profile-back-button-touchable :on-press (fn [] (nav-pop navigator)) :underlay-color :transparent} - [view {:width 56 - :height 56} + [view st/profile-back-button-container [image {:source {:uri "icon_back"} - :style {:marginTop 21 - :marginLeft 23 - :width 8 - :height 14}}]]] - - [view {:style {:alignSelf :center - :alignItems :center - :width 249}} - [view {:marginTop 26} + :style st/profile-back-button-icon}]]] + [view {:style st/status-block} + [view {:style st/user-photo-container} [user-photo {}] [user-online {:online true}]] - [text {:style {:marginTop 20 - :fontSize 18 - :fontFamily font - :color text1-color}} + [text {:style st/user-name} (:name @contact)] - [text {:style {:marginTop 10 - :fontFamily font - :fontSize 14 - :lineHeight 20 - :textAlign :center - :color text2-color}} + [text {:style st/status} "!not implemented"] - [view {:style {:marginTop 18 - :flexDirection :row}} + [view {:style st/btns-container} [touchable-highlight {:onPress (fn [] ;; TODO not implemented ) :underlay-color :transparent} - [view {:style {:height 40 - :justifyContent :center - :backgroundColor color-blue - :paddingLeft 25 - :paddingRight 25 - :borderRadius 50}} - [text {:style {:marginTop -2.5 - :fontSize 14 - :fontFamily font - :color color-white}} + [view {:style st/message-btn} + [text {:style st/message-btn-text} "Message"]]] [touchable-highlight {:onPress (fn [] ;; TODO not implemented ) :underlay-color :transparent} - [view {:style {:marginLeft 10 - :width 40 - :height 40 - :alignItems :center - :justifyContent :center - :backgroundColor color-blue-transparent - :padding 8 - :borderRadius 50}} + [view {:style st/more-btn} [image {:source {:uri "icon_more_vertical_blue"} - :style {:width 4 - :height 16}}]]]]] - [view {:style {:marginTop 20 - :alignItems :stretch - :flexDirection :column}} + :style st/more-btn-image}]]]]] + [view {:style st/profile-properties-container} [profile-property-view {:name "Username" :value (:name @contact)}] [profile-property-view {:name "Phone number" :value (:phone-number @contact)}] [profile-property-view {:name "Email" :value "!not implemented"}] - [view {:style {:marginTop 50 - :marginBottom 43 - :alignItems :center}} + [view {:style st/report-user-container} [touchable-opacity {} - [text {:style {:fontSize 14 - :fontFamily font - :lineHeight 21 - :color text2-color - ;; IOS: - :letterSpacing 0.5}} + [text {:style st/report-user-text} "REPORT USER"]]]]]))) diff --git a/src/syng_im/components/profile_styles.cljs b/src/syng_im/components/profile_styles.cljs new file mode 100644 index 0000000000..11c58ccf04 --- /dev/null +++ b/src/syng_im/components/profile_styles.cljs @@ -0,0 +1,154 @@ +(ns syng-im.components.profile-styles + (:require [syng-im.components.styles :refer [font + color-light-blue-transparent + color-white + color-black + color-blue + color-blue-transparent + selected-message-color + online-color + separator-color + text1-color + text2-color]])) + +(def user-photo + {:borderRadius 50 + :width 64 + :height 64}) + +(def user-online-container + {:position :absolute + :top 44 + :left 44 + :width 24 + :height 24 + :borderRadius 50 + :backgroundColor online-color + :borderWidth 2 + :borderColor color-white}) + +(def user-online-dot + {:position :absolute + :top 8 + :left 5 + :width 4 + :height 4 + :borderRadius 50 + :backgroundColor color-white}) + +(def user-online-dot-left + (assoc user-online-dot :left 5)) + +(def user-online-dot-right + (assoc user-online-dot :left 11)) + +(def profile-property-view-container + {:height 85 + :paddingHorizontal 16}) + +(def profile-property-view-sub-container + {:borderBottomWidth 1 + :borderBottomColor separator-color}) + +(def profile-property-view-label + {:marginTop 16 + :fontSize 14 + :fontFamily font + :color text2-color}) + +(def profile-property-view-value + {:marginTop 11 + :height 40 + :fontSize 16 + :fontFamily font + :color text1-color}) + +(def profile + {:flex 1 + :backgroundColor color-white + :flexDirection :column}) + +(def profile-back-button-touchable + {:position :absolute}) + +(def profile-back-button-container + {:width 56 + :height 56}) + +(def profile-back-button-icon + {:marginTop 21 + :marginLeft 23 + :width 8 + :height 14}) + +(def status-block + {:alignSelf :center + :alignItems :center + :width 249}) + +(def user-photo-container + {:marginTop 26}) + +(def user-name + {:marginTop 20 + :fontSize 18 + :fontFamily font + :color text1-color}) + +(def status + {:marginTop 10 + :fontFamily font + :fontSize 14 + :lineHeight 20 + :textAlign :center + :color text2-color}) + +(def btns-container + {:marginTop 18 + :flexDirection :row}) + +(def message-btn + {:height 40 + :justifyContent :center + :backgroundColor color-blue + :paddingLeft 25 + :paddingRight 25 + :borderRadius 50}) + +(def message-btn-text + {:marginTop -2.5 + :fontSize 14 + :fontFamily font + :color color-white}) + +(def more-btn + {:marginLeft 10 + :width 40 + :height 40 + :alignItems :center + :justifyContent :center + :backgroundColor color-blue-transparent + :padding 8 + :borderRadius 50}) + +(def more-btn-image + {:width 4 + :height 16}) + +(def profile-properties-container + {:marginTop 20 + :alignItems :stretch + :flexDirection :column}) + +(def report-user-container + {:marginTop 50 + :marginBottom 43 + :alignItems :center}) + +(def report-user-text + {:fontSize 14 + :fontFamily font + :lineHeight 21 + :color text2-color + ;; IOS: + :letterSpacing 0.5}) From a077b29f9e2bf2043e37e88e55c2fe47ef78d973 Mon Sep 17 00:00:00 2001 From: virvar Date: Mon, 9 May 2016 10:25:15 +0300 Subject: [PATCH 07/20] 'Message' button on profile view Former-commit-id: 252452f5b0661af7d6715e13373844351633be41 --- src/syng_im/components/profile.cljs | 9 ++++++--- src/syng_im/models/contacts.cljs | 7 ++++++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/syng_im/components/profile.cljs b/src/syng_im/components/profile.cljs index 5711d694e2..de3661937d 100644 --- a/src/syng_im/components/profile.cljs +++ b/src/syng_im/components/profile.cljs @@ -34,6 +34,10 @@ [text {:style st/profile-property-view-value} value]]]) +(defn message-user [navigator identity] + (when identity + (dispatch [:show-chat identity navigator :push]))) + (defn profile [{:keys [navigator]}] (let [contact (subscribe [:contact])] (fn [{:keys [navigator]}] @@ -54,9 +58,8 @@ [text {:style st/status} "!not implemented"] [view {:style st/btns-container} - [touchable-highlight {:onPress (fn [] - ;; TODO not implemented - ) + [touchable-highlight {:onPress #(message-user navigator + (:whisper-identity @contact)) :underlay-color :transparent} [view {:style st/message-btn} [text {:style st/message-btn-text} diff --git a/src/syng_im/models/contacts.cljs b/src/syng_im/models/contacts.cljs index 072a2ebe98..3468cd7eab 100644 --- a/src/syng_im/models/contacts.cljs +++ b/src/syng_im/models/contacts.cljs @@ -107,7 +107,12 @@ (r/sorted :name :asc)))) (defn contact-by-identity [identity] - (r/single-cljs (r/get-by-field :contacts :whisper-identity identity))) + (if (= identity "console") + {:phone-number "" + :whisper-identity "console" + :name "Console" + :photo-path ""} + (r/single-cljs (r/get-by-field :contacts :whisper-identity identity)))) ;;;;;;;;;;;;;;;;;;;;---------------------------------------------- From 65210893febe649a6fcbc8df298bcf783fcfae50 Mon Sep 17 00:00:00 2001 From: virvar Date: Mon, 9 May 2016 12:26:42 +0300 Subject: [PATCH 08/20] Validate phone number Former-commit-id: 152626da18b1d062762d873d339688a7c4b15ad7 --- src/syng_im/components/chat/input/phone.cljs | 5 ++++- .../components/chat/input/simple_command.cljs | 14 ++++++++++---- src/syng_im/utils/phone_number.cljs | 6 ++++++ 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/syng_im/components/chat/input/phone.cljs b/src/syng_im/components/chat/input/phone.cljs index ed8c71db1e..5c35704c4e 100644 --- a/src/syng_im/components/chat/input/phone.cljs +++ b/src/syng_im/components/chat/input/phone.cljs @@ -2,8 +2,11 @@ (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.components.chat.input.simple-command :refer [simple-command-input-view]] + [syng-im.utils.phone-number :refer [valid-mobile-number?]] [syng-im.utils.utils :refer [log toast http-post]] [syng-im.utils.logging :as log])) (defn phone-input-view [command] - [simple-command-input-view command {:keyboardType "phone-pad"}]) + [simple-command-input-view command {:keyboardType "phone-pad"} + :validator (fn [message] + (valid-mobile-number? message))]) diff --git a/src/syng_im/components/chat/input/simple_command.cljs b/src/syng_im/components/chat/input/simple_command.cljs index f80c4ce73c..82c95f31c1 100644 --- a/src/syng_im/components/chat/input/simple_command.cljs +++ b/src/syng_im/components/chat/input/simple_command.cljs @@ -26,10 +26,15 @@ (dispatch [:stage-command chat-id command text]) (cancel-command-input)) -(defn simple-command-input-view [command input-options] +(defn valid? [message validator] + (if validator + (validator message) + (pos? (count message)))) + +(defn simple-command-input-view [command input-options & {:keys [validator]}] (let [chat-id-atom (subscribe [:get-current-chat-id]) message-atom (subscribe [:get-chat-command-content])] - (fn [command input-options] + (fn [command input-options & {:keys [validator]}] (let [chat-id @chat-id-atom message @message-atom] [view {:style {:flexDirection "row" @@ -63,10 +68,11 @@ :onChangeText (fn [new-text] (set-input-message new-text)) :onSubmitEditing (fn [e] - (send-command chat-id command message))} + (when (valid? message validator) + (send-command chat-id command message)))} input-options) message] - (if (pos? (count message)) + (if (valid? message validator) [touchable-highlight {:on-press (fn [] (send-command chat-id command message)) :underlay-color :transparent} diff --git a/src/syng_im/utils/phone_number.cljs b/src/syng_im/utils/phone_number.cljs index 6a7481faf4..0d5a960193 100644 --- a/src/syng_im/utils/phone_number.cljs +++ b/src/syng_im/utils/phone_number.cljs @@ -7,3 +7,9 @@ (defn format-phone-number [number] (str (.getNumber (js/PhoneNumber. number country-code "international")))) + +(defn valid-mobile-number? [number] + (when (string? number) + (let [number-obj (js/PhoneNumber. number country-code "international")] + (and (.isValid number-obj) + (.isMobile number-obj))))) From 59e61265721a6a914b93f90ef19ea0ad75cd8fb3 Mon Sep 17 00:00:00 2001 From: virvar Date: Mon, 9 May 2016 15:29:08 +0300 Subject: [PATCH 09/20] Show suggestions as hint for phone number format Former-commit-id: 6eeaab5c2803eafb04e74b2a9df1872db94a7735 --- .../main/res/drawable-hdpi/icon_drag_down.png | Bin 0 -> 366 bytes .../main/res/drawable-mdpi/icon_drag_down.png | Bin 0 -> 242 bytes .../res/drawable-xhdpi/icon_drag_down.png | Bin 0 -> 500 bytes .../res/drawable-xxhdpi/icon_drag_down.png | Bin 0 -> 775 bytes .../res/drawable-xxxhdpi/icon_drag_down.png | Bin 0 -> 960 bytes .../components/chat/content_suggestions.cljs | 52 +++++++ .../chat/content_suggestions_styles.cljs | 54 ++++++++ .../components/chat/input/simple_command.cljs | 127 +++++++++--------- src/syng_im/components/drawer_styles.cljs | 12 -- src/syng_im/handlers/content_suggestions.cljs | 22 +++ src/syng_im/subs.cljs | 9 +- 11 files changed, 201 insertions(+), 75 deletions(-) create mode 100644 android/app/src/main/res/drawable-hdpi/icon_drag_down.png create mode 100644 android/app/src/main/res/drawable-mdpi/icon_drag_down.png create mode 100644 android/app/src/main/res/drawable-xhdpi/icon_drag_down.png create mode 100644 android/app/src/main/res/drawable-xxhdpi/icon_drag_down.png create mode 100644 android/app/src/main/res/drawable-xxxhdpi/icon_drag_down.png create mode 100644 src/syng_im/components/chat/content_suggestions.cljs create mode 100644 src/syng_im/components/chat/content_suggestions_styles.cljs create mode 100644 src/syng_im/handlers/content_suggestions.cljs diff --git a/android/app/src/main/res/drawable-hdpi/icon_drag_down.png b/android/app/src/main/res/drawable-hdpi/icon_drag_down.png new file mode 100644 index 0000000000000000000000000000000000000000..7d0dfec989e2d7c3638f37a4221719e20238afd3 GIT binary patch literal 366 zcmV-!0g?WRP)Px$C`m*?R7eeD{0{^SGz3gEG#hO6s09Q=cr=IxK8RRAP5|Y#)f=}l+O1$l;0KTifmMn(p(1#jNIW4Lwq zKG?fAZ{K48VNMPX1}$|J23??KGEx#?IdtO5vlk4PfrehYd57Wqj~{U9TX*g;fXoyX z5oTZn6%|0huyxmdh6`7&!4)Ah1O@mRbT!q1mZ^hKnCyVBn1g(ZB~00QvcUFPCJJo&W#< M07*qoM6N<$g8E;IDF6Tf literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-mdpi/icon_drag_down.png b/android/app/src/main/res/drawable-mdpi/icon_drag_down.png new file mode 100644 index 0000000000000000000000000000000000000000..88182afaf352679dbadc2f0a94f296a93f1b0ca6 GIT binary patch literal 242 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|)_A%&hFAzD z|KVrh5n)i{`qH$uPwK#d158|*yE7m3_mm>Q~RhPg`g6 zn7_Z1eBo+HdO_)iMu`K54juaN_I7#O=jrR3HZsV|H}hRkuvK7d^mgzKZ}@R|xqm^k zW0gaL;55E_d;d3tD#ox+Xw2C#VF5z~S02NrL+<_#etQ|eT+`jKVcjyR3)xaUMMg8? p4reiJN^H5Yn6tC7@sR-o!>zL}KX~5w?gqM>!PC{xWt~$(696^eURnSE literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-xhdpi/icon_drag_down.png b/android/app/src/main/res/drawable-xhdpi/icon_drag_down.png new file mode 100644 index 0000000000000000000000000000000000000000..ca0f2b6f4e7b51c1c6325dc3b2838a5fe4099997 GIT binary patch literal 500 zcmVPx$u1Q2eR9FdP{0{^S0|=M~&~C8RqYfAifzc2c4S~TI0<6z z{T7Couir4pNJ%j0YN|76sjD)uv$MgJkVXIe`HSJ&&D#u@uis>N^6UkJxTpw2c%Tmh z4>uRsJVsb$wD0gShGVDBp;*Gg!pxwmq{yJFrOu$DD9^yeL|lyh`}dFG&i#iBm#^Jq zxP9+F!=FEYQOvb6Gh%SEwE~O5Lx7oy8ATC@1JZc?)*UeB;^bt|)=&jIMoK~)LoG<) z*^8H8ORwIz&G7B}cdTkaf=ozu!9xHPRO`3xVz>)*Ikvb$Hcd!SfI&}7gFy!vG9YjT z=+jHrZZN!i{{dMU2Ah$QkwF<4l7U`s@Ti450H*rGr_V$i2-8D|Ms~0OA1{h>3`?|%i`M}#!w4lRm^yM2Em01DSpcGc z{QL^R qEHKqHphq1r8UmvsFd6~_9s&U7TCX|?{d1@Q0000Px%!AV3xRA>e5Slvz&K@>jQT2b19NP!rvwPoqHXng}OxWL4C;R|@>oloSQSH6HZ zl86a0z5zwrErs$UCO`>7TNIl{=S(wXw%w)MJ=-A3OtR_h&YYj`eCM3mt@f7}v8SW#jA@ynXi`exILPHsQ@gY@7pmoJ~VC67E{}<3X+7fYm~YJAPO_ z>QZ@YXb9fCeg)y-+ZSsV0Qof&J}fR>EZR*pO@oII?n7?Qfb8rHghC;^ZLXg+n@uRJ zZvfif+W8K>KG9!3U*NWd0ZR%60*)mi_HzT3?OniY@$(lj^b}*pfMg;L2+qwwCsBTd zIc=6V0YSJOojzIs=&1yZjzr<)wB|}58eT1!{ECFbfa!(IOikF=%l=`NM;g~;Ugd%=y0ADthNivSbNM z=9r3)GPAB*w<`d`C>Gx)D?UsIvs~$`_=FC-U+iRtp5$ql>Z2K;uD$@s#{aMaE|#$U z6=7?4ukU){?KnQoozA3Z;HJlR>=}RzM$`+oMY{t?-rGJ9FVAavf3LYO0AwSgUh=HH zp0Sf1$1poNbF2^t@k-)502z#U2@3{;@?&4;0|nr#rw+<`zdJYx{x6RefU9OgF`yVA zMnI(yF@R)o#Q-^kLV6O6XaSW+o zd>iHMAM7Y%S9>8yBxIh@p~IKHXsWF9@#yJP%k#Ojqxku`rS?acT9>bjnYlyhm;f^; zcXH6mDO^+ASpq9LPA%T@!cuvA^&1)v9bIcs z#uh8QKy-lx^DR~pafS@m3|5VE4P}f+Sr;@fC}Vuf)MdON)}fH`MXU zn0F^uovhD3FB`f3Zgk$)m0#3n%$U`7c5Uv5pEU*-u5&N$)M#mMe(<&GRH^mlUp4y} zX14061ZPIX#Wu(2vCF=l{@~e-(hhg0LtA&c)Js&(_c^%wqxm7eIu&IxzJne%OwE65 z51ILe>#bdLsJ*|~VD`**XBJ(p^7nU|vXu)bpLB6p7|@{ZKmXvrgN-W-Gmo}z3)>;Z ztt=V%!e!Z99ecCw0wq#uX~rLl)2|o3aws;osrw>eGcW1ute6C5)qHlFvmV0!e*2Td z^Zm_x7HJ82cz7!$>|Br~_2%t+XD&wd!tK|u?GH6!NmRyZ*l4#<^=;%NDVI{Mhv7>aVRC zIs4ANEpyheVA-DE^RTdDqWN6A>8b}Z0=*v?9-DCQr2gwa`dl^#!x(Q)VyOE#RnE5N zzMFk`wMw`P1AkLfh|u|mC20$DJ{{bif5ccd_2LJEV^ddL*#GuSq$%UE2PHmd&!$HP zO^S_L`ErKQu_<>?u5WJstMjv~CCmSGwpv5{oA5L zXNJVNtylCfuF__-@#+%)66oZ9>)bp2dnvznuKjAW>{dm|Bln2KL2ugx4=j#Jk=OqA zsP*CXFSUkG4jiAR%p#HUl;Td`d%*!JFe^ zKFl?~zDw1P-#b5r;dp?T+NJ%RUMB(%EfHOC#LU|vi`9cn&KL35J;`^fZnXh(Ap?V_ LtDnm{r-UW|BPP3p literal 0 HcmV?d00001 diff --git a/src/syng_im/components/chat/content_suggestions.cljs b/src/syng_im/components/chat/content_suggestions.cljs new file mode 100644 index 0000000000..ce74fde464 --- /dev/null +++ b/src/syng_im/components/chat/content_suggestions.cljs @@ -0,0 +1,52 @@ +(ns syng-im.components.chat.content-suggestions + (:require-macros + [natal-shell.core :refer [with-error-view]]) + (:require [clojure.string :as cstr] + [reagent.core :as r] + [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [view + image + text + touchable-highlight + list-view + list-item]] + [syng-im.components.chat.content-suggestions-styles :as st] + [syng-im.utils.listview :refer [to-datasource]] + [syng-im.utils.utils :refer [log toast http-post]] + [syng-im.utils.logging :as log])) + +(defn set-command-content [content] + (dispatch [:set-chat-command-content content])) + +(defn suggestion-list-item [suggestion] + [touchable-highlight {:onPress (fn [] + (set-command-content (:value suggestion))) + :underlay-color :transparent} + [view (merge st/suggestion-container + (when (= (:description suggestion) "Number format 12") + {:backgroundColor "blue"})) + [view st/suggestion-sub-container + [text {:style st/value-text} + (:value suggestion)] + [text {:style st/description-text} + (:description suggestion)]]]]) + +(defn render-row [row section-id row-id] + (list-item [suggestion-list-item (js->clj row :keywordize-keys true)])) + +(defn content-suggestions-view [] + (let [suggestions-atom (subscribe [:get-content-suggestions])] + (fn [] + (let [suggestions @suggestions-atom] + (when (seq suggestions) + [view nil + [touchable-highlight {:style st/drag-down-touchable + :onPress (fn [] + ;; TODO hide suggestions? + ) + :underlay-color :transparent} + [image {:source {:uri "icon_drag_down"} + :style st/drag-down-icon}]] + [view (st/suggestions-container (count suggestions)) + [list-view {:dataSource (to-datasource suggestions) + :renderRow render-row}]]]))))) diff --git a/src/syng_im/components/chat/content_suggestions_styles.cljs b/src/syng_im/components/chat/content_suggestions_styles.cljs new file mode 100644 index 0000000000..a2da470caf --- /dev/null +++ b/src/syng_im/components/chat/content_suggestions_styles.cljs @@ -0,0 +1,54 @@ +(ns syng-im.components.chat.content-suggestions-styles + (:require [syng-im.components.styles :refer [font + color-light-blue-transparent + color-white + color-black + color-blue + color-blue-transparent + selected-message-color + online-color + separator-color + text1-color + text2-color + text3-color]])) + +(def suggestion-height 56) + +(def suggestion-container + {:flexDirection :column + :paddingLeft 16 + :backgroundColor color-white}) + +(def suggestion-sub-container + {:height suggestion-height + :borderBottomWidth 1 + :borderBottomColor separator-color}) + +(def value-text + {:marginTop 9 + :fontSize 14 + :fontFamily font + :color text1-color}) + +(def description-text + {:marginTop 1.5 + :fontSize 14 + :fontFamily font + :color text2-color}) + +(defn suggestions-container [suggestions-count] + {:flexDirection :row + :marginVertical 1 + :marginHorizontal 0 + :height (min 150 (* suggestion-height suggestions-count)) + :backgroundColor color-white + :borderRadius 5}) + +(def drag-down-touchable + {:height 22 + :alignItems :center + :justifyContent :center}) + +(def drag-down-icon + {:width 16 + :height 16}) diff --git a/src/syng_im/components/chat/input/simple_command.cljs b/src/syng_im/components/chat/input/simple_command.cljs index 82c95f31c1..23703867ee 100644 --- a/src/syng_im/components/chat/input/simple_command.cljs +++ b/src/syng_im/components/chat/input/simple_command.cljs @@ -6,6 +6,7 @@ text text-input touchable-highlight]] + [syng-im.components.chat.content-suggestions :refer [content-suggestions-view]] [syng-im.components.styles :refer [font color-white color-blue @@ -37,65 +38,67 @@ (fn [command input-options & {:keys [validator]}] (let [chat-id @chat-id-atom message @message-atom] - [view {:style {:flexDirection "row" - :height 56 - :backgroundColor color-white - :elevation 4}} - [view {:style {:flexDirection "column" - :marginTop 16 - :marginBottom 16 - :marginLeft 16 - :marginRight 0 - :backgroundColor (:color command) - :height 24 - :borderRadius 50}} - [text {:style {:marginTop 3 - :marginHorizontal 12 - :fontSize 12 - :fontFamily font - :color color-white}} - (:text command)]] - [text-input (merge {:underlineColorAndroid "transparent" - :style {:flex 1 - :marginLeft 8 - :marginTop 7 - :fontSize 14 - :fontFamily font - :color text1-color} - :autoFocus true - :placeholder "Type" - :placeholderTextColor text2-color - :onChangeText (fn [new-text] - (set-input-message new-text)) - :onSubmitEditing (fn [e] - (when (valid? message validator) - (send-command chat-id command message)))} - input-options) - message] - (if (valid? message validator) - [touchable-highlight {:on-press (fn [] - (send-command chat-id command message)) - :underlay-color :transparent} - [view {:style {:marginTop 10 - :marginRight 10 - :width 36 - :height 36 - :borderRadius 50 - :backgroundColor color-blue}} - [image {:source {:uri "icon_send"} - :style {:marginTop 10.5 - :marginLeft 12 - :width 15 - :height 15}}]]] - [touchable-highlight {:on-press (fn [] - (cancel-command-input)) - :underlay-color :transparent} - [view {:style {:marginTop 10 - :marginRight 10 - :width 36 - :height 36}} - [image {:source res/icon-close-gray - :style {:marginTop 10.5 - :marginLeft 12 - :width 12 - :height 12}}]]])])))) + [view {:style {:flexDirection "column"}} + [content-suggestions-view] + [view {:style {:flexDirection "row" + :height 56 + :backgroundColor color-white + :elevation 4}} + [view {:style {:flexDirection "column" + :marginTop 16 + :marginBottom 16 + :marginLeft 16 + :marginRight 0 + :backgroundColor (:color command) + :height 24 + :borderRadius 50}} + [text {:style {:marginTop 3 + :marginHorizontal 12 + :fontSize 12 + :fontFamily font + :color color-white}} + (:text command)]] + [text-input (merge {:underlineColorAndroid "transparent" + :style {:flex 1 + :marginLeft 8 + :marginTop 7 + :fontSize 14 + :fontFamily font + :color text1-color} + :autoFocus true + :placeholder "Type" + :placeholderTextColor text2-color + :onChangeText (fn [new-text] + (set-input-message new-text)) + :onSubmitEditing (fn [e] + (when (valid? message validator) + (send-command chat-id command message)))} + input-options) + message] + (if (valid? message validator) + [touchable-highlight {:on-press (fn [] + (send-command chat-id command message)) + :underlay-color :transparent} + [view {:style {:marginTop 10 + :marginRight 10 + :width 36 + :height 36 + :borderRadius 50 + :backgroundColor color-blue}} + [image {:source {:uri "icon_send"} + :style {:marginTop 10.5 + :marginLeft 12 + :width 15 + :height 15}}]]] + [touchable-highlight {:on-press (fn [] + (cancel-command-input)) + :underlay-color :transparent} + [view {:style {:marginTop 10 + :marginRight 10 + :width 36 + :height 36}} + [image {:source res/icon-close-gray + :style {:marginTop 10.5 + :marginLeft 12 + :width 12 + :height 12}}]]])]])))) diff --git a/src/syng_im/components/drawer_styles.cljs b/src/syng_im/components/drawer_styles.cljs index 0896732490..b6ee3c0808 100644 --- a/src/syng_im/components/drawer_styles.cljs +++ b/src/syng_im/components/drawer_styles.cljs @@ -62,15 +62,3 @@ :fontFamily font :lineHeight 21 :color text3-color}) - - -(comment drawer-menu [navigator] - [view {:style st/drawer-menu} - - [view {:style } - [touchable-opacity {:onPress (fn [] - (close-drawer) - ;; TODO not implemented - )} - [text {:style } - "Switch users"]]]]) diff --git a/src/syng_im/handlers/content_suggestions.cljs b/src/syng_im/handlers/content_suggestions.cljs new file mode 100644 index 0000000000..8906558ff2 --- /dev/null +++ b/src/syng_im/handlers/content_suggestions.cljs @@ -0,0 +1,22 @@ +(ns syng-im.handlers.content-suggestions + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.db :as db] + [syng-im.utils.logging :as log] + [clojure.string :as s])) + +(def suggestions + {:phone [{:value "89171111111" + :description "Number format 1"} + {:value "+79171111111" + :description "Number format 2"} + {:value "9171111111" + :description "Number format 3"}]}) + +(defn get-content-suggestions [db command text] + (or (when command + (when-let [command-suggestions ((:command command) suggestions)] + (filterv (fn [s] + (and (.startsWith (:value s) (or text "")) + (not= (:value s) text))) + command-suggestions))) + [])) diff --git a/src/syng_im/subs.cljs b/src/syng_im/subs.cljs index 302f84b3a1..6aa80ee279 100644 --- a/src/syng_im/subs.cljs +++ b/src/syng_im/subs.cljs @@ -19,7 +19,8 @@ get-chat-command-request parse-command-msg-content parse-command-request-msg-content]] - [syng-im.handlers.suggestions :refer [get-suggestions]])) + [syng-im.handlers.suggestions :refer [get-suggestions]] + [syng-im.handlers.content-suggestions :refer [get-content-suggestions]])) ;; -- Chat -------------------------------------------------------------- @@ -43,6 +44,12 @@ (reaction))] (reaction (get-suggestions @db @input-text))))) +(register-sub :get-content-suggestions + (fn [db _] + (let [command (reaction (get-chat-command @db)) + text (reaction (get-chat-command-content @db))] + (reaction (get-content-suggestions @db @command @text))))) + (register-sub :get-commands (fn [db _] (reaction (get-commands @db)))) From 26a2c5053ed2e8d576f2aa29aa56e4bdaedac2be Mon Sep 17 00:00:00 2001 From: virvar Date: Mon, 9 May 2016 15:41:51 +0300 Subject: [PATCH 10/20] Remove extra :style Former-commit-id: 509748888f51d2d3ba5db795f2e4b240690db3fb --- src/syng_im/components/drawer.cljs | 10 +++++----- src/syng_im/components/profile.cljs | 18 +++++++++--------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/syng_im/components/drawer.cljs b/src/syng_im/components/drawer.cljs index 19fc3b2ea7..e930d59f15 100644 --- a/src/syng_im/components/drawer.cljs +++ b/src/syng_im/components/drawer.cljs @@ -36,13 +36,13 @@ name]]) (defn drawer-menu [navigator] - [view {:style st/drawer-menu} - [view {:style st/user-photo-container} + [view st/drawer-menu + [view st/user-photo-container [user-photo {}]] - [view {:style st/name-container} + [view st/name-container [text {:style st/name-text} "Status"]] - [view {:style st/menu-items-container} + [view st/menu-items-container [menu-item {:name "Profile" :handler (fn [] (dispatch [:show-profile navigator]))}] @@ -59,7 +59,7 @@ )}] [menu-item {:name "FAQ" :handler (fn [])}]] - [view {:style st/switch-users-container} + [view st/switch-users-container [touchable-opacity {:onPress (fn [] (close-drawer) ;; TODO not implemented diff --git a/src/syng_im/components/profile.cljs b/src/syng_im/components/profile.cljs index de3661937d..d6fd8505e9 100644 --- a/src/syng_im/components/profile.cljs +++ b/src/syng_im/components/profile.cljs @@ -27,8 +27,8 @@ [view st/user-online-dot-right]])) (defn profile-property-view [{:keys [name value]}] - [view {:style st/profile-property-view-container} - [view {:style st/profile-property-view-sub-container} + [view st/profile-property-view-container + [view st/profile-property-view-sub-container [text {:style st/profile-property-view-label} name] [text {:style st/profile-property-view-value} @@ -49,36 +49,36 @@ [view st/profile-back-button-container [image {:source {:uri "icon_back"} :style st/profile-back-button-icon}]]] - [view {:style st/status-block} - [view {:style st/user-photo-container} + [view st/status-block + [view st/user-photo-container [user-photo {}] [user-online {:online true}]] [text {:style st/user-name} (:name @contact)] [text {:style st/status} "!not implemented"] - [view {:style st/btns-container} + [view st/btns-container [touchable-highlight {:onPress #(message-user navigator (:whisper-identity @contact)) :underlay-color :transparent} - [view {:style st/message-btn} + [view st/message-btn [text {:style st/message-btn-text} "Message"]]] [touchable-highlight {:onPress (fn [] ;; TODO not implemented ) :underlay-color :transparent} - [view {:style st/more-btn} + [view st/more-btn [image {:source {:uri "icon_more_vertical_blue"} :style st/more-btn-image}]]]]] - [view {:style st/profile-properties-container} + [view st/profile-properties-container [profile-property-view {:name "Username" :value (:name @contact)}] [profile-property-view {:name "Phone number" :value (:phone-number @contact)}] [profile-property-view {:name "Email" :value "!not implemented"}] - [view {:style st/report-user-container} + [view st/report-user-container [touchable-opacity {} [text {:style st/report-user-text} "REPORT USER"]]]]]))) From 9bd9847138f74fe47c2a399b7cc8a9b51556dae2 Mon Sep 17 00:00:00 2001 From: virvar Date: Mon, 9 May 2016 17:33:41 +0300 Subject: [PATCH 11/20] Fixes Former-commit-id: 4e7bdd47429ef39682ae57480113734b6342d93a --- src/syng_im/components/chat.cljs | 18 +++++++++--------- .../components/chat/input/simple_command.cljs | 16 +++++++++------- src/syng_im/handlers.cljs | 7 ++++--- 3 files changed, 22 insertions(+), 19 deletions(-) diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index f448744f0b..43dde33f03 100644 --- a/src/syng_im/components/chat.cljs +++ b/src/syng_im/components/chat.cljs @@ -214,9 +214,9 @@ subtitle])]]]) (defn actions-list-view [] - (let [{:keys [group-chat active]} - (subscribe [:chat-properties [:group-chat :name :contacts :active]])] - (when-let [actions (when (and @group-chat @active) + (let [{:keys [group-chat chat-id]} + (subscribe [:chat-properties [:group-chat :chat-id]])] + (when-let [actions (if @group-chat [{:title "Add Contact to chat" :icon :icon_menu_group :icon-style {:width 25 @@ -241,12 +241,12 @@ :icon :icon_settings :icon-style {:width 20 :height 13} - :handler (fn [])}] - [{:title "Profile" - :icon "icon_menu_group" - :icon-style {:width 25 - :height 19} - :handler #(dispatch [:show-profile navigator (:chat-id chat)])}])] + :handler (fn [])}] + [{:title "Profile" + :icon "icon_menu_group" + :icon-style {:width 25 + :height 19} + :handler #(dispatch [:show-profile @chat-id])}])] [view {:style {:backgroundColor toolbar-background1 :elevation 2 :position :absolute diff --git a/src/syng_im/components/chat/input/simple_command.cljs b/src/syng_im/components/chat/input/simple_command.cljs index 6858500ac9..3c8d5765ab 100644 --- a/src/syng_im/components/chat/input/simple_command.cljs +++ b/src/syng_im/components/chat/input/simple_command.cljs @@ -34,9 +34,9 @@ (let [message-atom (subscribe [:get-chat-command-content])] (fn [command input-options & {:keys [validator]}] (let [message @message-atom] - [view {:style {:flexDirection "column"}} + [view {:style {:flexDirection :column}} [content-suggestions-view] - [view {:style {:flexDirection "row" + [view {:style {:flexDirection :row :height 56 :backgroundColor color-white :elevation 4}} @@ -65,11 +65,13 @@ :placeholder "Type" :placeholderTextColor text2-color :onChangeText set-input-message - :onSubmitEditing send-command} - input-options) - message] - (if (valid? message validator) - [touchable-highlight + :onSubmitEditing (fn [] + (when (valid? message validator) + (send-command)))} + input-options) + message] + (if (valid? message validator) + [touchable-highlight {:on-press send-command :underlay-color :transparent} [view {:style {:marginTop 10 diff --git a/src/syng_im/handlers.cljs b/src/syng_im/handlers.cljs index 9d786c74cb..7c22147fbe 100644 --- a/src/syng_im/handlers.cljs +++ b/src/syng_im/handlers.cljs @@ -451,10 +451,10 @@ (contacts/load-syng-contacts db))) (register-handler :show-profile - (fn [db [action navigator identity]] + (fn [db [action identity]] (log/debug action) (let [db (contacts/set-contact-identity db identity)] - (dispatch [:navigate-to navigator {:view-id :profile} :push]) + (dispatch [:navigate-to :profile]) db))) ;; -- Chats -------------------------------------------------------------- @@ -465,7 +465,8 @@ (let [db (-> db (create-chat chat-id [chat-id] false) (set-current-chat-id chat-id))] - (dispatch [:navigate-to navigator {:view-id :chat} nav-type]) + ;; (dispatch [:navigate-to navigator {:view-id :chat} nav-type]) + (dispatch [:navigate-to :chat]) db))) (register-handler :init-console-chat From d0f7dc85390a1cfcbbb56171b879148d5891ec75 Mon Sep 17 00:00:00 2001 From: virvar Date: Tue, 10 May 2016 10:59:38 +0300 Subject: [PATCH 12/20] Fix navigation. Change image to icon. Former-commit-id: ee7de392749f9900202b9955156c300d96c1646b --- src/syng_im/components/chat.cljs | 2 +- src/syng_im/components/chats/chats_list.cljs | 2 +- src/syng_im/components/profile.cljs | 25 ++++++++------------ src/syng_im/components/toolbar.cljs | 5 ++-- src/syng_im/handlers.cljs | 4 ++-- 5 files changed, 16 insertions(+), 22 deletions(-) diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index 9b9ad18ae8..be4217e57e 100644 --- a/src/syng_im/components/chat.cljs +++ b/src/syng_im/components/chat.cljs @@ -125,7 +125,7 @@ :height 13} :handler (fn [])}] [{:title "Profile" - :icon "icon_menu_group" + :icon :menu_group :icon-style {:width 25 :height 19} :handler #(dispatch [:show-profile @chat-id])}])] diff --git a/src/syng_im/components/chats/chats_list.cljs b/src/syng_im/components/chats/chats_list.cljs index d62227e8c0..2b63d8d76f 100644 --- a/src/syng_im/components/chats/chats_list.cljs +++ b/src/syng_im/components/chats/chats_list.cljs @@ -64,7 +64,7 @@ [action-button-item {:title "New Group Chat" :buttonColor "#1abc9c" :onPress (fn [] - (dispatch [:show-group-new navigator]))} + (dispatch [:show-group-new]))} [icon {:name "person-stalker" :style {:fontSize 20 :height 22 diff --git a/src/syng_im/components/profile.cljs b/src/syng_im/components/profile.cljs index d6fd8505e9..e5dcfa2b61 100644 --- a/src/syng_im/components/profile.cljs +++ b/src/syng_im/components/profile.cljs @@ -6,13 +6,12 @@ text text-input image + icon scroll-view - navigator touchable-highlight touchable-opacity]] [syng-im.resources :as res] - [syng-im.components.profile-styles :as st] - [syng-im.navigation :refer [nav-pop]])) + [syng-im.components.profile-styles :as st])) (defn user-photo [{:keys [photo-path]}] [image {:source (if (s/blank? photo-path) @@ -34,21 +33,19 @@ [text {:style st/profile-property-view-value} value]]]) -(defn message-user [navigator identity] +(defn message-user [identity] (when identity - (dispatch [:show-chat identity navigator :push]))) + (dispatch [:show-chat identity nil :push]))) -(defn profile [{:keys [navigator]}] +(defn profile [] (let [contact (subscribe [:contact])] - (fn [{:keys [navigator]}] + (fn [] [scroll-view {:style st/profile} [touchable-highlight {:style st/profile-back-button-touchable - :on-press (fn [] - (nav-pop navigator)) + :on-press #(dispatch [:navigate-back]) :underlay-color :transparent} [view st/profile-back-button-container - [image {:source {:uri "icon_back"} - :style st/profile-back-button-icon}]]] + [icon :back st/profile-back-button-icon]]] [view st/status-block [view st/user-photo-container [user-photo {}] @@ -58,8 +55,7 @@ [text {:style st/status} "!not implemented"] [view st/btns-container - [touchable-highlight {:onPress #(message-user navigator - (:whisper-identity @contact)) + [touchable-highlight {:onPress #(message-user (:whisper-identity @contact)) :underlay-color :transparent} [view st/message-btn [text {:style st/message-btn-text} @@ -69,8 +65,7 @@ ) :underlay-color :transparent} [view st/more-btn - [image {:source {:uri "icon_more_vertical_blue"} - :style st/more-btn-image}]]]]] + [icon :more_vertical_blue st/more-btn-image]]]]] [view st/profile-properties-container [profile-property-view {:name "Username" :value (:name @contact)}] diff --git a/src/syng_im/components/toolbar.cljs b/src/syng_im/components/toolbar.cljs index ad34b23efe..6cfbb96af4 100644 --- a/src/syng_im/components/toolbar.cljs +++ b/src/syng_im/components/toolbar.cljs @@ -15,8 +15,7 @@ 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]])) + [reagent.core :as r])) (defn toolbar [{:keys [navigator title nav-action action background-color]}] [view {:style {:flexDirection "row" @@ -30,7 +29,7 @@ :alignItems "center" :justifyContent "center"} [image (:image nav-action)]]] - [touchable-highlight {:on-press #(nav-pop navigator)} + [touchable-highlight {:on-press #(dispatch [:navigate-back])} [view {:width 56 :height 56} [image {:source {:uri "icon_back"} diff --git a/src/syng_im/handlers.cljs b/src/syng_im/handlers.cljs index 5cf4db5609..5e8611f4be 100644 --- a/src/syng_im/handlers.cljs +++ b/src/syng_im/handlers.cljs @@ -561,9 +561,9 @@ db))) (register-handler :show-group-new - (fn [db [action navigator]] + (fn [db [action]] (log/debug action) - (nav-push navigator {:view-id :new-group}) + (dispatch [:navigate-to :new-group]) (clear-new-group db))) (register-handler :select-for-new-group From 4a5623285a78a236013cdc21cb9e02631875f6bf Mon Sep 17 00:00:00 2001 From: virvar Date: Tue, 10 May 2016 12:31:48 +0300 Subject: [PATCH 13/20] Set signed-up at init db Former-commit-id: 8324cf4109e1d77d3ee574ef6351e9f4df252d9b --- src/syng_im/handlers.cljs | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/syng_im/handlers.cljs b/src/syng_im/handlers.cljs index 5e8611f4be..9d6a299f56 100644 --- a/src/syng_im/handlers.cljs +++ b/src/syng_im/handlers.cljs @@ -2,6 +2,8 @@ (:require [re-frame.core :refer [register-handler after dispatch debug enrich]] [schema.core :as s :include-macros true] + [syng-im.persistence.simple-kv-store :as kv] + [syng-im.protocol.state.storage :as storage] [syng-im.db :as db :refer [app-db schema]] [syng-im.protocol.api :refer [init-protocol]] [syng-im.protocol.protocol-handler :refer [make-handler]] @@ -75,7 +77,9 @@ ;; -- Common -------------------------------------------------------------- (register-handler :initialize-db - (fn [_ _] app-db)) + (fn [_ _] + (assoc app-db + :signed-up (storage/get kv/kv-store :signed-up)))) (register-handler :set-loading (fn [db [_ value]] From 7ecce32a8651983b8c93ff49a305fd417b2b5c00 Mon Sep 17 00:00:00 2001 From: virvar Date: Tue, 10 May 2016 13:12:49 +0300 Subject: [PATCH 14/20] Start command input on button click Former-commit-id: 6bbd5bf92d63eee78492f3085ceace7db56e1636 --- src/syng_im/components/chat/plain_message_input.cljs | 3 ++- src/syng_im/handlers.cljs | 7 ++++++- src/syng_im/handlers/suggestions.cljs | 8 +++++++- src/syng_im/models/chat.cljs | 3 +++ 4 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/syng_im/components/chat/plain_message_input.cljs b/src/syng_im/components/chat/plain_message_input.cljs index f90fa057cc..ad02302aa4 100644 --- a/src/syng_im/components/chat/plain_message_input.cljs +++ b/src/syng_im/components/chat/plain_message_input.cljs @@ -27,7 +27,8 @@ [view st/input-container [suggestions-view] [view st/input-view - [icon :list st/list-icon] + [touchable-highlight {:on-press #(dispatch [:switch-command-suggestions])} + [view nil [icon :list st/list-icon]]] [text-input {:style st/message-input :autoFocus (pos? (count @staged-commands-atom)) :onChangeText set-input-message diff --git a/src/syng_im/handlers.cljs b/src/syng_im/handlers.cljs index 9d6a299f56..11bc7012b8 100644 --- a/src/syng_im/handlers.cljs +++ b/src/syng_im/handlers.cljs @@ -29,7 +29,8 @@ get-command-handler load-commands apply-staged-commands - check-suggestion]] + check-suggestion + switch-command-suggestions]] [syng-im.handlers.sign-up :as sign-up-service] [syng-im.models.chats :refer [chat-exists? create-chat @@ -487,6 +488,10 @@ (register-handler :set-chat-input-text ((enrich update-command) update-text)) +(register-handler :switch-command-suggestions + (fn [db [_]] + (switch-command-suggestions db))) + (register-handler :set-chat-command (fn [db [_ command-key]] ;; todo what is going on there?! diff --git a/src/syng_im/handlers/suggestions.cljs b/src/syng_im/handlers/suggestions.cljs index 8ce337b436..046589e8bb 100644 --- a/src/syng_im/handlers/suggestions.cljs +++ b/src/syng_im/handlers/suggestions.cljs @@ -1,7 +1,9 @@ (ns syng-im.handlers.suggestions (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.db :as db] - [syng-im.models.chat :refer [current-chat-id]] + [syng-im.models.chat :refer [current-chat-id + set-chat-input-text + get-chat-input-text]] [syng-im.models.commands :refer [commands suggestions get-commands @@ -62,3 +64,7 @@ [suggestion] (filter #(= suggestion-text' (:text %)) (get-commands db))] suggestion))) + +(defn switch-command-suggestions [db] + (let [text (get-chat-input-text db)] + (set-chat-input-text db (if (suggestion? text) nil "!")))) diff --git a/src/syng_im/models/chat.cljs b/src/syng_im/models/chat.cljs index 920442174b..763be721db 100644 --- a/src/syng_im/models/chat.cljs +++ b/src/syng_im/models/chat.cljs @@ -43,6 +43,9 @@ (defn set-chat-input-text [db text] (assoc-in db (db/chat-input-text-path (current-chat-id db)) text)) +(defn get-chat-input-text [db] + (get-in db (db/chat-input-text-path (current-chat-id db)))) + (comment (swap! re-frame.db/app-db (fn [db] From d285fcd6e00879b1d3f2bd747568d45bf52b2f3a Mon Sep 17 00:00:00 2001 From: virvar Date: Tue, 10 May 2016 16:12:45 +0300 Subject: [PATCH 15/20] Suggestions style. Add close commands button. Former-commit-id: 6f5dade40fa03ee6557d8ae3e396843bbe08fee4 --- .../res/drawable-hdpi/icon_close_gray.png | Bin 0 -> 347 bytes .../res/drawable-mdpi/icon_close_gray.png | Bin 0 -> 274 bytes .../res/drawable-xhdpi/icon_close_gray.png | Bin 0 -> 444 bytes .../res/drawable-xxhdpi/icon_close_gray.png | Bin 0 -> 624 bytes .../res/drawable-xxxhdpi/icon_close_gray.png | Bin 0 -> 892 bytes .../components/chat/content_suggestions.cljs | 10 +-- .../chat/content_suggestions_styles.cljs | 4 +- .../components/chat/input/input_styles.cljs | 8 -- src/syng_im/components/chat/input/money.cljs | 3 +- .../components/chat/input/simple_command.cljs | 4 +- .../components/chat/plain_message_input.cljs | 26 ++++-- .../chat/plain_message_input_styles.cljs | 19 +++-- src/syng_im/components/chat/suggestions.cljs | 32 +++++--- .../components/chat/suggestions_styles.cljs | 75 ++++++++++++------ src/syng_im/handlers/suggestions.cljs | 7 +- src/syng_im/subs.cljs | 7 +- 16 files changed, 122 insertions(+), 73 deletions(-) create mode 100644 android/app/src/main/res/drawable-hdpi/icon_close_gray.png create mode 100644 android/app/src/main/res/drawable-mdpi/icon_close_gray.png create mode 100644 android/app/src/main/res/drawable-xhdpi/icon_close_gray.png create mode 100644 android/app/src/main/res/drawable-xxhdpi/icon_close_gray.png create mode 100644 android/app/src/main/res/drawable-xxxhdpi/icon_close_gray.png diff --git a/android/app/src/main/res/drawable-hdpi/icon_close_gray.png b/android/app/src/main/res/drawable-hdpi/icon_close_gray.png new file mode 100644 index 0000000000000000000000000000000000000000..4342d2e4f00d4c020d637c738842f72c738882c8 GIT binary patch literal 347 zcmV-h0i^zkP)Px$6-h)vR5%f}lsyuHFc5{a4A<}q+{MBRFm_te$_z4M2@TpgUctL~p>YP)Px#%t=H+R45gVku46wKoEszwkaX&xd2E`0fzvOtHEK=1cw1j@SLKjsO>(7<2{Mnx+msc)+hp@723VdP+lnUJ$EQk?;pL8qW{p_Oq(xXN;mbPU!9jA<^sV5BuBf^qDVrM?r`c4;Y@Iq%O2SYwxE6*Mql Y-|X|O9pyIW`2YX_07*qoM6N<$g1J_5!TPx$c1c7*R7efAmN8PpKnz8tHKc`WP;moJK#?wmF8~8wI!GCqNs*x;Gh84A9R(-g z2HXT{#u58>M;?>x#Naig3 zeO&OB3viMP5<1@yz0H@aNnbu;cR;Is=DTCiKz_`XbDgQtM-q9)x-)1Z^xj`1ozQt z&2EYN$7QONNdqAAS$ceEXQ+IJp##(Ka6hOrA1RZjv<=>B071^g0!KV1`CqT>9>6u1 zy=G*2imX8j9)SngKCkC0;A+$s%Q!=E z%yk)mh3lF#@k2It8=;3GaG1o+-#xT&_+yg4G!x6Px%DoI2^R9Fek*gZ?bKo|$`yNl?SFCleN94sz6b+bjJehd|hRh-009JNx=Z{Q{< z4#usMZaV4c<{&r-83c<>ynov(*EDJFB>``_8cKLMZd{bZptHj_T}tT9 z(!%UXsZ{#KvAjyF)tY#Ge%%X6Smk5*A!Uuj-K~3ibb7u*g20mpri6Izd-%kL878*bbnd7#E&`UaO_ z&cuPxmL*C7LttT;z?d_6qSP?NgN5POgbAD%N)-bGEZos6I)SRcK9igS5LhM&`sXuJ zndTY-WrZ@uVEhq~Ey@Oy2r@<4V#b1WQRpA{IzYQ9{C1?il45U}NPt@PtkF06ZbF+V zDj4)l1)-A)3jLCbDhBaNAapcE>0q=#CMaEuHb@6$fi3Mx~WSbC4 zZE_5OY!U$?7t>q=kZA%L5#2V)*#(&dMh8#Y*Ue4w72@IP2$nFtVd9vG2(910db_W$^#2h2fz)B6KRl_guONHN?10000< KMNUMnLSTZ(Ul}F< literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_close_gray.png b/android/app/src/main/res/drawable-xxxhdpi/icon_close_gray.png new file mode 100644 index 0000000000000000000000000000000000000000..07b1e5d3dae2f04b85987e2ccb5a1b0aa527254e GIT binary patch literal 892 zcmV-?1B3jDP)Px&Hc3Q5RA>d&nmun5F&M`mI~{nDK*~bD12gaq$_OI}MixW|6qN;)iHe0PVklx^ z1d%l({RYsP?~o}Hl?n{xjQ>uZ+~w|KKj-Ii#Y4~W+w=R~*}hA2iq6x);rmCVvU^0T zPs*HJq04UvgC|p8-{o;Q{Mi3Rzh971w}{M?j2`drJ^KtMg+H$kkG|N72gomzn)J5l z{>$gP-N znPu15ZES9G5hPgfmKp3CTP1cIyC0o)DZzrr=3<$_?zT~Yvj-5|ol;^i1iF$)fd_Lz zVAB$*@Zh!EXfffYg_~FGn#lgrSAY~p34fA+N0gEP3ON#n%yq5=;L)e<4hx1w3Oo&z zrqH6J&2Y|=BK1>m(cREvhlhuFK2~Ku0FORv1<*iJLK;3wKuV$w_-KJtiMHTb0$u`( zFJ}JwHGzKIKB0AlF?|ZI0pHLcIcF0R=*JP}z+-H-06K9b&_0y>)#Acq+(rWEC?$~s zpClk5kqVzIkRl-gFCx%HLJA(SE1!i>!AV)xGo1El+oVrbjK+)D4|Xv8aGSE(am-ff z`{0PHK)ScHKY02*U(U@Z2{eWGkP;G&1ybRqBpL}w!AnT67cp*Nv2z|%#7z@VT61*k z$F3tcc1@eQV%8Pl+nGqfgZ1*8Lc0URaAt`v|AkO$A_rDBu>qz2Bz*5xH)6$B&(tb?s9PmQ?{ zNFAsSFs3{uwi8GhAOzgnjkEK2Fclj row :keywordize-keys true)])) @@ -31,8 +35,14 @@ (fn [] (let [suggestions @suggestions-atom] (when (seq suggestions) - [view (st/suggestions-container suggestions) - [list-view {:dataSource (to-datasource suggestions) - :enableEmptySections true - :renderRow render-row - :style {}}]]))))) + [view nil + [touchable-highlight {:style st/drag-down-touchable + :onPress (fn [] + ;; TODO hide suggestions? + )} + [view nil + [icon :drag_down st/drag-down-icon]]] + [view (st/suggestions-container (count suggestions)) + [list-view {:dataSource (to-datasource suggestions) + :enableEmptySections true + :renderRow render-row}]]]))))) diff --git a/src/syng_im/components/chat/suggestions_styles.cljs b/src/syng_im/components/chat/suggestions_styles.cljs index 80ae964e68..1e3a1fb352 100644 --- a/src/syng_im/components/chat/suggestions_styles.cljs +++ b/src/syng_im/components/chat/suggestions_styles.cljs @@ -1,44 +1,69 @@ (ns syng-im.components.chat.suggestions-styles - (:require [syng-im.components.styles :refer [font color-white]])) + (:require [syng-im.components.styles :refer [font + color-light-blue-transparent + color-white + color-black + color-blue + color-blue-transparent + selected-message-color + online-color + separator-color + text1-color + text2-color + text3-color]])) -(def suggestion-item-container - {:flexDirection :row - :marginVertical 1 - :marginHorizontal 0 - :height 40 - :backgroundColor color-white}) +(def suggestion-height 88) + +(def suggestion-container + {:flexDirection :column + :paddingLeft 16 + :backgroundColor color-white}) + +(def suggestion-sub-container + {:height suggestion-height + :borderBottomWidth 1 + :borderBottomColor separator-color}) (defn suggestion-background [{:keys [color]}] - {:flexDirection :column - :position :absolute - :top 10 - :left 60 + {:alignSelf :flex-start + :marginTop 10 + :height 24 :backgroundColor color - :borderRadius 10}) + :borderRadius 50}) (def suggestion-text - {:marginTop -2 - :marginHorizontal 10 - :fontSize 14 + {:marginTop 2.5 + :marginHorizontal 12 + :fontSize 12 :fontFamily font :color color-white}) -(def suggestion-description - {:flex 1 - :position :absolute - :top 7 - :left 190 - :lineHeight 18 +(def value-text + {:marginTop 6 :fontSize 14 :fontFamily font - :color :black}) + :color text1-color}) -(defn suggestions-container - [suggestions] +(def description-text + {:marginTop 2 + :fontSize 12 + :fontFamily font + :color text2-color}) + +(defn suggestions-container [suggestions-count] {:flexDirection :row :marginVertical 1 :marginHorizontal 0 - :height (min 105 (* 42 (count suggestions))) + :height (min 168 (* suggestion-height suggestions-count)) :backgroundColor color-white :borderRadius 5}) + +(def drag-down-touchable + {:height 22 + :alignItems :center + :justifyContent :center}) + +(def drag-down-icon + {:width 16 + :height 16}) diff --git a/src/syng_im/handlers/suggestions.cljs b/src/syng_im/handlers/suggestions.cljs index 046589e8bb..4b227940bb 100644 --- a/src/syng_im/handlers/suggestions.cljs +++ b/src/syng_im/handlers/suggestions.cljs @@ -65,6 +65,9 @@ (get-commands db))] suggestion))) -(defn switch-command-suggestions [db] +(defn typing-command? [db] (let [text (get-chat-input-text db)] - (set-chat-input-text db (if (suggestion? text) nil "!")))) + (suggestion? text))) + +(defn switch-command-suggestions [db] + (set-chat-input-text db (if (typing-command? db) nil "!"))) diff --git a/src/syng_im/subs.cljs b/src/syng_im/subs.cljs index 749795ede3..15ce2cbcc4 100644 --- a/src/syng_im/subs.cljs +++ b/src/syng_im/subs.cljs @@ -18,7 +18,8 @@ get-chat-command-content get-chat-command-request parse-command-request]] - [syng-im.handlers.suggestions :refer [get-suggestions]] + [syng-im.handlers.suggestions :refer [get-suggestions + typing-command?]] [syng-im.handlers.content-suggestions :refer [get-content-suggestions]])) ;; -- Chat -------------------------------------------------------------- @@ -40,6 +41,10 @@ (reaction))] (reaction (get-suggestions @db @input-text))))) +(register-sub :typing-command? + (fn [db _] + (reaction (typing-command? @db)))) + (register-sub :get-content-suggestions (fn [db _] (let [command (reaction (get-chat-command @db)) From 0d237b53d4b71982156e64ff6e3d3f38bf09b924 Mon Sep 17 00:00:00 2001 From: virvar Date: Wed, 11 May 2016 10:36:13 +0300 Subject: [PATCH 16/20] Fix back navigation. Add 'discovery' drawer item. Former-commit-id: c89f2820aa62d11a07b12a47db25734453c3842c --- src/syng_im/android/core.cljs | 2 +- src/syng_im/components/drawer.cljs | 3 +++ src/syng_im/db.cljs | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/syng_im/android/core.cljs b/src/syng_im/android/core.cljs index 3009ccd213..a2ecc6c3d5 100644 --- a/src/syng_im/android/core.cljs +++ b/src/syng_im/android/core.cljs @@ -30,7 +30,7 @@ ;; this listener and handle application's closing ;; in handlers (let [stack (subscribe [:navigation-stack])] - (when (< 1 (count stack)) + (when (< 1 (count @stack)) (dispatch [:navigate-back]) true)))] (add-event-listener "hardwareBackPress" new-listener))) diff --git a/src/syng_im/components/drawer.cljs b/src/syng_im/components/drawer.cljs index e930d59f15..c1f7b807f2 100644 --- a/src/syng_im/components/drawer.cljs +++ b/src/syng_im/components/drawer.cljs @@ -50,6 +50,9 @@ :handler (fn [] ;; TODO not implemented )}] + [menu-item {:name "Discovery" + :handler (fn [] + (dispatch [:navigate-to :discovery]))}] [menu-item {:name "Contacts" :handler (fn [] (dispatch [:show-contacts navigator]))}] diff --git a/src/syng_im/db.cljs b/src/syng_im/db.cljs index dfeacbd0c5..54280b7d11 100644 --- a/src/syng_im/db.cljs +++ b/src/syng_im/db.cljs @@ -4,7 +4,7 @@ ;; schema of app-db (def schema {:greeting s/Str}) -(def default-view :discovery) +(def default-view :chat-list) ;; initial state of app-db (def app-db {:greeting "Hello Clojure in iOS and Android!" From d4f666eff0a38e53f34b769db39d9fdbcd3a38d5 Mon Sep 17 00:00:00 2001 From: virvar Date: Wed, 11 May 2016 10:42:04 +0300 Subject: [PATCH 17/20] Microrefactoring Former-commit-id: 3264bbfac96ec9d398bbf31cc4d53066b0e5d627 --- src/syng_im/components/chat/input/phone.cljs | 3 +-- src/syng_im/components/profile.cljs | 11 ++++------- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/syng_im/components/chat/input/phone.cljs b/src/syng_im/components/chat/input/phone.cljs index 92f78ba88c..2ff0812b4a 100644 --- a/src/syng_im/components/chat/input/phone.cljs +++ b/src/syng_im/components/chat/input/phone.cljs @@ -6,5 +6,4 @@ (defn phone-input-view [command] [simple-command-input-view command {:keyboardType :phone-pad} - :validator (fn [message] - (valid-mobile-number? message))]) + :validator valid-mobile-number?]) diff --git a/src/syng_im/components/profile.cljs b/src/syng_im/components/profile.cljs index e5dcfa2b61..7ce6bea22d 100644 --- a/src/syng_im/components/profile.cljs +++ b/src/syng_im/components/profile.cljs @@ -41,9 +41,8 @@ (let [contact (subscribe [:contact])] (fn [] [scroll-view {:style st/profile} - [touchable-highlight {:style st/profile-back-button-touchable - :on-press #(dispatch [:navigate-back]) - :underlay-color :transparent} + [touchable-highlight {:style st/profile-back-button-touchable + :on-press #(dispatch [:navigate-back])} [view st/profile-back-button-container [icon :back st/profile-back-button-icon]]] [view st/status-block @@ -55,15 +54,13 @@ [text {:style st/status} "!not implemented"] [view st/btns-container - [touchable-highlight {:onPress #(message-user (:whisper-identity @contact)) - :underlay-color :transparent} + [touchable-highlight {:onPress #(message-user (:whisper-identity @contact))} [view st/message-btn [text {:style st/message-btn-text} "Message"]]] [touchable-highlight {:onPress (fn [] ;; TODO not implemented - ) - :underlay-color :transparent} + )} [view st/more-btn [icon :more_vertical_blue st/more-btn-image]]]]] [view st/profile-properties-container From 5a63f527d37f64a4920e791955fda45c9eb82b04 Mon Sep 17 00:00:00 2001 From: virvar Date: Wed, 11 May 2016 13:05:33 +0300 Subject: [PATCH 18/20] Add my profile view Former-commit-id: 3dfc4619244a0e54901d82f74b54232ee729373e --- .../src/main/res/drawable-hdpi/icon_dots.png | Bin 0 -> 181 bytes .../src/main/res/drawable-mdpi/icon_dots.png | Bin 0 -> 130 bytes .../src/main/res/drawable-xhdpi/icon_dots.png | Bin 0 -> 210 bytes .../main/res/drawable-xxhdpi/icon_dots.png | Bin 0 -> 301 bytes .../main/res/drawable-xxxhdpi/icon_dots.png | Bin 0 -> 437 bytes src/syng_im/android/core.cljs | 5 +- src/syng_im/components/drawer.cljs | 70 +++++++++--------- src/syng_im/components/profile.cljs | 39 +++++++++- src/syng_im/components/profile_styles.cljs | 20 ++++- src/syng_im/db.cljs | 9 ++- src/syng_im/handlers.cljs | 6 ++ src/syng_im/subs.cljs | 26 +++++-- 12 files changed, 124 insertions(+), 51 deletions(-) create mode 100644 android/app/src/main/res/drawable-hdpi/icon_dots.png create mode 100644 android/app/src/main/res/drawable-mdpi/icon_dots.png create mode 100644 android/app/src/main/res/drawable-xhdpi/icon_dots.png create mode 100644 android/app/src/main/res/drawable-xxhdpi/icon_dots.png create mode 100644 android/app/src/main/res/drawable-xxxhdpi/icon_dots.png diff --git a/android/app/src/main/res/drawable-hdpi/icon_dots.png b/android/app/src/main/res/drawable-hdpi/icon_dots.png new file mode 100644 index 0000000000000000000000000000000000000000..7f9961ec1b999f6bac7fb1d1a7609d572ea21053 GIT binary patch literal 181 zcmeAS@N?(olHy`uVBq!ia0vp^Y(Ol*0U~b-^ehHajKx9jP7LeL$-D$|@;zM~Lo`H_ zuUz9xt^WTxO89Vnn+2OdLP~_niFKjJ&zw4cxGhZ|*7^YczwmT;nOG->>bgM~BNtwa6NygdmCsWU2ITkj# cyU79!YF9m44bQs%1X|7D>FVdQ&MBb@0APe3GXGU99}`|9`#Y1O{d0$HHm?%#sF;QyEhaY;w>&G3mz5 d9_M3X3@rg_d^*h&YJlc2c)I$ztaD0e0sv>uDgyuj literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-xhdpi/icon_dots.png b/android/app/src/main/res/drawable-xhdpi/icon_dots.png new file mode 100644 index 0000000000000000000000000000000000000000..e4d3d40921fbfa5423efaf03c96ab1cff1910eb4 GIT binary patch literal 210 zcmeAS@N?(olHy`uVBq!ia0vp^96+qV!3HGtKUiJ>QjEnx?oJHr&dIz4a(X;n978Mw zlT#R&GDU4?{{R2KjBzHPf}Ma&LQ0BWb=C7r!fqQ>4&U$o|KFIy@ri9hl1 zQc8jV<0E~CJ*+RzCQLB@IK$6eb3wJ+<0KQkgqOJiPq-PL>@IF!UFozD=q?6NS3j3^ HP6B@#mMfc!dZpp16d7OlB!cngC!;Yopmx7wVtop z%lRbj&7>KN6t?;p@F#gCcQsrwO5}Php2);1Tc^qqIUy=R!|<#t$HVl-D@ILCp;4~s z{Oc?lBpJK9mzS^G!QkBa(Ox6SfyuzLL`sD{j5&lm#hGEFC-btpDaXW_RM@p64rlZo x7GLJD^P-HqLWA47FByHxBHtI6%4{r^VF(xaI#1k2j}ho)22WQ%mvv4FO#t}oZ6p8y literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_dots.png b/android/app/src/main/res/drawable-xxxhdpi/icon_dots.png new file mode 100644 index 0000000000000000000000000000000000000000..972f7be2fd0051ebd87c33337c4a07224afb7e96 GIT binary patch literal 437 zcmV;m0ZRUfP)Px$Z%IT!R9FdPWIzLQD*D=g8UCgGWBBI=l#+u=KVo8F+QrPkH0RNsi&v4gFv2+6 z+M#Uke_reR|DPcfD8>X6N2C8SGBQjTWY;RXdUf?LkQ~?mu;w4vw*O~fa6;37l?&9g zPmn{)6J!W8NChiD<3yn5aIC7a3o8Ej`&#JpyVu(oL4N-I|Ia0$I$X}iZUh6vKUPK- zJtk0qk)au6C|EBOG_-Nqf>#`*7vyYMRN+;OLsE`Ze`A;fGT;%0DDeW1m_R9vc=f0% zL3)`$$rC924^@gN-an9D=8x}QzUC7a69Z~7BT5@o5im(ldvfRULU160(l#i05^DfB zDFgL@)Ps}q>(|%*%1Jq_03}bLmjg;W8?6_B;V@b+KoY|!InW^hFV Date: Wed, 11 May 2016 13:53:38 +0300 Subject: [PATCH 19/20] Chat view toolbar refactoring Former-commit-id: 0e2cd2f653f6227178ac4295d4a0b51273d118ba --- 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)]]])])) From ad65b798b5bbc81c6eb71d1da7b2ea2c1e6b79f0 Mon Sep 17 00:00:00 2001 From: virvar Date: Wed, 11 May 2016 14:37:31 +0300 Subject: [PATCH 20/20] Profile menu item of chat view Former-commit-id: 249ea85201aa3557a20e4ca239fdd6e78f86ecdf --- src/syng_im/components/chat.cljs | 48 ++++++++++++++++++++++--- src/syng_im/components/chat_styles.cljs | 31 ++++++++++++++++ 2 files changed, 75 insertions(+), 4 deletions(-) diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index 7b5d595add..e11d48e727 100644 --- a/src/syng_im/components/chat.cljs +++ b/src/syng_im/components/chat.cljs @@ -81,20 +81,39 @@ [view nil]] items]) -(defn action-view [{:keys [icon-style handler title subtitle] +(defn action-view [{:keys [icon-style custom-icon handler title subtitle] icon-name :icon}] [touchable-highlight {:on-press (fn [] (dispatch [:set-show-actions false]) - (handler))} + (when handler + (handler)))} [view st/action-icon-row [view st/action-icon-view - [icon icon-name icon-style]] + (or custom-icon + [icon icon-name icon-style])] [view st/action-view [text {:style st/action-title} title] (when-let [subtitle subtitle] [text {:style st/action-subtitle} subtitle])]]]) +(defn menu-item-contact-photo [{:keys [photo-path]}] + [image {:source (if (s/blank? photo-path) + res/user-no-photo + {:uri photo-path}) + :style st/menu-item-profile-contact-photo}]) + +(defn menu-item-contact-online [{:keys [online]}] + (when online + [view st/menu-item-profile-online-view + [view st/menu-item-profile-online-dot-left] + [view st/menu-item-profile-online-dot-right]])) + +(defn menu-item-icon-profile [] + [view st/icon-view + [menu-item-contact-photo {}] + [menu-item-contact-online {:online true}]]) + (defn actions-list-view [] (let [{:keys [group-chat chat-id]} (subscribe [:chat-properties [:group-chat :chat-id]])] @@ -125,10 +144,31 @@ :height 13} :handler (fn [])}] [{:title "Profile" + :custom-icon [menu-item-icon-profile] :icon :menu_group :icon-style {:width 25 :height 19} - :handler #(dispatch [:show-profile @chat-id])}])] + :handler #(dispatch [:show-profile @chat-id])} + {:title "Search chat" + :subtitle "!not implemented" + :icon :search_gray_copy + :icon-style {:width 17 + :height 17} + :handler nil #_#(dispatch + [:show-remove-participants navigator])} + {:title "Notifications and sounds" + :subtitle "!not implemented" + :icon :muted + :icon-style {:width 18 + :height 21} + :handler nil #_#(dispatch [:leave-group-chat + navigator])} + {:title "Settings" + :subtitle "!not implemented" + :icon :settings + :icon-style {:width 20 + :height 13} + :handler (fn [])}])] [view st/actions-wrapper [view st/actions-separator] [view st/actions-view diff --git a/src/syng_im/components/chat_styles.cljs b/src/syng_im/components/chat_styles.cljs index f66e57ed89..43a7aeb373 100644 --- a/src/syng_im/components/chat_styles.cljs +++ b/src/syng_im/components/chat_styles.cljs @@ -167,3 +167,34 @@ (def overlay-highlight {:flex 1}) + +;;----- Menu item Profile ---------------- + +(def menu-item-profile-contact-photo + {:marginTop 13 + :marginLeft 16 + :borderRadius 50 + :width 24 + :height 24}) + +(def menu-item-profile-online-view + {:position :absolute + :top 26 + :left 29 + :width 15 + :height 15 + :borderRadius 50 + :backgroundColor online-color + :borderWidth 2 + :borderColor color-white}) + +(def menu-item-profile-online-dot + {:position :absolute + :top 4 + :width 3 + :height 3 + :borderRadius 50 + :backgroundColor color-white}) + +(def menu-item-profile-online-dot-left (merge menu-item-profile-online-dot {:left 1.7})) +(def menu-item-profile-online-dot-right (merge menu-item-profile-online-dot {:left 6.3}))