From ea3bbd75360511347da676da18a099177218355c Mon Sep 17 00:00:00 2001 From: virvar Date: Thu, 31 Mar 2016 16:44:16 +0300 Subject: [PATCH] Phone input Former-commit-id: 079c262bec537593575192d0f954950fc0abc88f --- syng-im/src/syng_im/components/chat.cljs | 4 +- .../components/{ => chat}/chat_message.cljs | 2 +- .../components/chat/chat_message_new.cljs | 91 +++++++++++++++++++ .../syng_im/components/chat/phone_input.cljs | 75 +++++++++++++++ .../plain_message_input.cljs} | 40 ++------ 5 files changed, 175 insertions(+), 37 deletions(-) rename syng-im/src/syng_im/components/{ => chat}/chat_message.cljs (99%) create mode 100644 syng-im/src/syng_im/components/chat/chat_message_new.cljs create mode 100644 syng-im/src/syng_im/components/chat/phone_input.cljs rename syng-im/src/syng_im/components/{chat_message_new.cljs => chat/plain_message_input.cljs} (61%) diff --git a/syng-im/src/syng_im/components/chat.cljs b/syng-im/src/syng_im/components/chat.cljs index 9008ef1e1e..dab189630a 100644 --- a/syng-im/src/syng_im/components/chat.cljs +++ b/syng-im/src/syng_im/components/chat.cljs @@ -14,8 +14,8 @@ [syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.components.invertible-scroll-view :refer [invertible-scroll-view]] [reagent.core :as r] - [syng-im.components.chat-message :refer [chat-message]] - [syng-im.components.chat-message-new :refer [chat-message-new]])) + [syng-im.components.chat.chat-message :refer [chat-message]] + [syng-im.components.chat.chat-message-new :refer [chat-message-new]])) (defn chat [{:keys [navigator]}] diff --git a/syng-im/src/syng_im/components/chat_message.cljs b/syng-im/src/syng_im/components/chat/chat_message.cljs similarity index 99% rename from syng-im/src/syng_im/components/chat_message.cljs rename to syng-im/src/syng_im/components/chat/chat_message.cljs index e767e96df2..96fcb8cb16 100644 --- a/syng-im/src/syng_im/components/chat_message.cljs +++ b/syng-im/src/syng_im/components/chat/chat_message.cljs @@ -1,4 +1,4 @@ -(ns syng-im.components.chat-message +(ns syng-im.components.chat.chat-message (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.components.react :refer [android? view diff --git a/syng-im/src/syng_im/components/chat/chat_message_new.cljs b/syng-im/src/syng_im/components/chat/chat_message_new.cljs new file mode 100644 index 0000000000..a540c6e871 --- /dev/null +++ b/syng-im/src/syng_im/components/chat/chat_message_new.cljs @@ -0,0 +1,91 @@ +(ns syng-im.components.chat.chat-message-new + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [android? + view + image + text + text-input + touchable-highlight]] + [syng-im.components.chat.plain-message-input :refer [plain-message-input-view]] + [syng-im.components.chat.phone-input :refer [phone-input-view]] + [syng-im.utils.utils :refer [log toast http-post]] + [syng-im.utils.logging :as log] + [syng-im.resources :as res] + [reagent.core :as r])) + +(defn cancel-command-input [] + (dispatch [:set-input-command nil])) + +(defn default-command-input-view [] + (let [message-atom (r/atom nil) + chat-id (subscribe [:get-current-chat-id])] + (fn [] + (let [message @message-atom] + [view {:style {:flexDirection "row"}} + [view {:style {:flexDirection "column" + :backgroundColor "white"}} + [view {:style {:flexDirection "column" + :margin 10 + :width 200 + :backgroundColor "#E5F5F6" + :borderRadius 10}} + [view {:style {:flexDirection "row"}} + [view {:style {:flexDirection "column" + :margin 10 + :width 120 + :backgroundColor "blue" + :borderRadius 10}} + [text {:style {:marginVertical 3 + :marginHorizontal 10 + :fontSize 14 + :fontFamily "Avenir-Roman" + :color "white"}} + "!"]] + [touchable-highlight {:style {:marginTop 14 + :marginRight 16 + :position "absolute" + :top 3 + :right 20} + :onPress (fn [] + (cancel-command-input))} + [image {:source res/att + :style {:width 17 + :height 14}}]]] + [text-input {:style {:flex 1 + :marginLeft 8 + :lineHeight 42 + :fontSize 14 + :fontFamily "Avenir-Roman" + :color "#9CBFC0"} + :underlineColorAndroid "transparent" + :autoFocus true + :value message + :onChangeText (fn [new-text] + ) + :onSubmitEditing (fn [e] + )}]]] + [touchable-highlight {:style {:marginTop 14 + :marginRight 16 + :position "absolute" + :right 20 + :bottom 20} + :onPress (fn [] + (cancel-command-input))} + [image {:source res/att + :style {:width 34 + :height 28}}]]])))) + +(defn special-input-view [command] + (case command + :phone [phone-input-view] + [default-command-input-view])) + +(defn chat-message-new [] + (let [input-command-atom (subscribe [:get-input-command])] + (fn [] + (let [input-command @input-command-atom] + [view ;; TODO temp to show input above react-native warning + {:style {:marginBottom 50}} + (if input-command + [special-input-view input-command] + [plain-message-input-view])])))) diff --git a/syng-im/src/syng_im/components/chat/phone_input.cljs b/syng-im/src/syng_im/components/chat/phone_input.cljs new file mode 100644 index 0000000000..21fa32a9f6 --- /dev/null +++ b/syng-im/src/syng_im/components/chat/phone_input.cljs @@ -0,0 +1,75 @@ +(ns syng-im.components.chat.phone-input + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [android? + view + image + text + text-input + touchable-highlight]] + [syng-im.utils.utils :refer [log toast http-post]] + [syng-im.utils.logging :as log] + [syng-im.resources :as res] + [reagent.core :as r])) + +(defn cancel-command-input [] + (dispatch [:set-input-command nil])) + +(defn phone-input-view [] + (let [message-atom (r/atom nil) + chat-id (subscribe [:get-current-chat-id])] + (fn [] + (let [message @message-atom] + [view {:style {:flexDirection "row"}} + [view {:style {:flexDirection "column" + :backgroundColor "white"}} + [view {:style {:flexDirection "column" + :margin 10 + :width 200 + :backgroundColor "#E5F5F6" + :borderRadius 10}} + [view {:style {:flexDirection "row"}} + [view {:style {:flexDirection "column" + :margin 10 + :width 120 + :backgroundColor "blue" + :borderRadius 10}} + [text {:style {:marginVertical 3 + :marginHorizontal 10 + :fontSize 14 + :fontFamily "Avenir-Roman" + :color "white"}} + "!phone"]] + [touchable-highlight {:style {:marginTop 14 + :marginRight 16 + :position "absolute" + :top 3 + :right 20} + :onPress (fn [] + (cancel-command-input))} + [image {:source res/att + :style {:width 17 + :height 14}}]]] + [text-input {:style {:flex 1 + :marginLeft 8 + :lineHeight 42 + :fontSize 14 + :fontFamily "Avenir-Roman" + :color "#9CBFC0"} + :underlineColorAndroid "transparent" + :autoFocus true + :keyboardType "phone-pad" + :value message + :onChangeText (fn [new-text] + ) + :onSubmitEditing (fn [e] + )}]]] + [touchable-highlight {:style {:marginTop 14 + :marginRight 16 + :position "absolute" + :right 20 + :bottom 20} + :onPress (fn [] + (cancel-command-input))} + [image {:source res/att + :style {:width 34 + :height 28}}]]])))) diff --git a/syng-im/src/syng_im/components/chat_message_new.cljs b/syng-im/src/syng_im/components/chat/plain_message_input.cljs similarity index 61% rename from syng-im/src/syng_im/components/chat_message_new.cljs rename to syng-im/src/syng_im/components/chat/plain_message_input.cljs index 996458066a..bc5daa4b09 100644 --- a/syng-im/src/syng_im/components/chat_message_new.cljs +++ b/syng-im/src/syng_im/components/chat/plain_message_input.cljs @@ -1,4 +1,4 @@ -(ns syng-im.components.chat-message-new +(ns syng-im.components.chat.plain-message-input (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.components.react :refer [android? view @@ -10,11 +10,13 @@ [syng-im.resources :as res] [reagent.core :as r])) -(defn message-input [] +(defn plain-message-input-view [] (let [text (r/atom nil) chat-id (subscribe [:get-current-chat-id])] + (dispatch [:generate-suggestions @text]) (fn [] [view {:style {:flexDirection "column"}} + [suggestions-view] [view {:style {:flexDirection "row" :margin 10 :height 40 @@ -32,7 +34,7 @@ :fontSize 14 :fontFamily "Avenir-Roman" :color "#9CBFC0"} - :autoFocus true + :autoFocus false :placeholder "Enter your message here" :value @text :onChangeText (fn [new-text] @@ -51,34 +53,4 @@ :style {:marginTop 14 :marginRight 16 :width 17 - :height 14}}]] - [suggestions-view]]))) - -(defn special-input [command] - (case command - :phone [text-input {:underlineColorAndroid "#9CBFC0" - :style {:flex 1 - :marginLeft 18 - :lineHeight 42 - :fontSize 14 - :fontFamily "Avenir-Roman" - :color "#9CBFC0"} - :autoFocus true - :placeholder "Phone input"}] - [text-input {:underlineColorAndroid "#9CBFC0" - :style {:flex 1 - :marginLeft 18 - :lineHeight 42 - :fontSize 14 - :fontFamily "Avenir-Roman" - :color "#9CBFC0"} - :autoFocus true - :placeholder "Command input"}])) - -(defn chat-message-new [] - (let [input-command-atom (subscribe [:get-input-command])] - (fn [] - (let [input-command @input-command-atom] - (if input-command - [special-input input-command] - [message-input]))))) + :height 14}}]]])))