diff --git a/src/syng_im/components/chat/chat_message_styles.cljs b/src/syng_im/components/chat/chat_message_styles.cljs index 7386ba7b3d..c336fbb8d5 100644 --- a/src/syng_im/components/chat/chat_message_styles.cljs +++ b/src/syng_im/components/chat/chat_message_styles.cljs @@ -220,7 +220,7 @@ :top 4 :width 120 :height 2 - :backgroundColor "#EC7262"}) + :backgroundColor :#EC7262}) (def track-mark {:position :absolute @@ -228,7 +228,7 @@ :top 0 :width 2 :height 10 - :backgroundColor "#4A5258"}) + :backgroundColor :#4A5258}) (def track-duration-text {:position :absolute @@ -236,7 +236,7 @@ :top 11 :fontFamily font :fontSize 11 - :color "#4A5258" + :color :#4A5258 :letterSpacing 1 :lineHeight 15}) @@ -315,10 +315,10 @@ (def participants-container {:flex 1 - :backgroundColor "white"}) + :backgroundColor :white}) (def participants-list - {:backgroundColor "white"}) + {:backgroundColor :white}) (def new-participant-image {:width 20 diff --git a/src/syng_im/components/chat/input/confirmation_code.cljs b/src/syng_im/components/chat/input/confirmation_code.cljs index a1f1fca549..7ba41043d6 100644 --- a/src/syng_im/components/chat/input/confirmation_code.cljs +++ b/src/syng_im/components/chat/input/confirmation_code.cljs @@ -1,9 +1,7 @@ (ns syng-im.components.chat.input.confirmation-code (:require - [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.components.chat.input.simple-command :refer [simple-command-input-view]] - [syng-im.utils.utils :refer [log toast http-post]] - [syng-im.utils.logging :as log])) + [syng-im.components.chat.input.simple-command + :refer [simple-command-input-view]])) (defn confirmation-code-input-view [command] - [simple-command-input-view command {:keyboardType "numeric"}]) + [simple-command-input-view command {:keyboardType :numeric}]) diff --git a/src/syng_im/components/chat/input/input_styles.cljs b/src/syng_im/components/chat/input/input_styles.cljs new file mode 100644 index 0000000000..c5debbcafd --- /dev/null +++ b/src/syng_im/components/chat/input/input_styles.cljs @@ -0,0 +1,120 @@ +(ns syng-im.components.chat.input.input-styles + (:require [syng-im.components.styles :refer [font + color-white + color-blue + text1-color + text2-color + chat-background + color-black]])) + +(def money-input + {:flex 1 + :marginLeft 8 + :lineHeight 42 + :fontSize 32 + :fontFamily font + :color :black}) + +(def command-input-container + {:flexDirection :row + :height 56 + :backgroundColor color-white + :elevation 4}) + +(defn command-text-container + [{:keys [color]}] + {:flexDirection :column + :marginTop 16 + :marginBottom 16 + :marginLeft 16 + :marginRight 0 + :backgroundColor color + :height 24 + :borderRadius 50}) + +(def command-text + {:marginTop 3 + :marginHorizontal 12 + :fontSize 12 + :fontFamily font + :color color-white}) + +(def command-input + {:flex 1 + :marginLeft 8 + :marginTop 7 + :fontSize 14 + :fontFamily font + :color text1-color}) + +(def send-container + {:marginTop 10 + :marginRight 10 + :width 36 + :height 36 + :borderRadius 50 + :backgroundColor color-blue}) + +(def send-icon + {:marginTop 10.5 + :marginLeft 12 + :width 15 + :height 15}) + +(def cancel-container + {:marginTop 10 + :marginRight 10 + :width 36 + :height 36}) + +(def cancel-icon + {:marginTop 10.5 + :marginLeft 12 + :width 12 + :height 12}) + +(def staged-command-container + {:flex 1 + :alignItems :flex-start + :flexDirection :column + :backgroundColor color-white}) + +(def staged-command-background + {:flexDirection :column + :margin 16 + :padding 12 + :backgroundColor chat-background + :borderRadius 14}) + +(def staged-command-info-container + {:flexDirection :row}) + +(defn staged-command-text-container + [{:keys [color]}] + {:backgroundColor color + :height 24 + :borderRadius 50 + :marginRight 32 + :paddingTop 3 + :paddingHorizontal 12}) + +(def staged-command-text + {:fontSize 12 + :fontFamily font + :color color-white}) + +(def staged-command-cancel + {:position :absolute + :top 7 + :right 4}) + +(def staged-command-cancel-icon + {:width 10 + :height 10}) + +(def staged-command-content + {:marginTop 5 + :marginHorizontal 0 + :fontSize 14 + :fontFamily font + :color color-black}) diff --git a/src/syng_im/components/chat/input/money.cljs b/src/syng_im/components/chat/input/money.cljs index eb879188cb..be53c5dbc2 100644 --- a/src/syng_im/components/chat/input/money.cljs +++ b/src/syng_im/components/chat/input/money.cljs @@ -1,16 +1,10 @@ (ns syng-im.components.chat.input.money (:require - [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.components.styles :refer [font]] - [syng-im.components.chat.input.simple-command :refer [simple-command-input-view]] - [syng-im.utils.utils :refer [log toast http-post]] - [syng-im.utils.logging :as log])) + [syng-im.components.chat.input.simple-command + :refer [simple-command-input-view]] + [syng-im.components.chat.input.input-styles :as st])) (defn money-input-view [command] - [simple-command-input-view command {:keyboardType "numeric" - :style {:flex 1 - :marginLeft 8 - :lineHeight 42 - :fontSize 32 - :fontFamily font - :color "black"}}]) + [simple-command-input-view command + {:keyboardType :numeric + :style st/money-input}]) diff --git a/src/syng_im/components/chat/input/password.cljs b/src/syng_im/components/chat/input/password.cljs index e27c5f8112..8385fa2c1c 100644 --- a/src/syng_im/components/chat/input/password.cljs +++ b/src/syng_im/components/chat/input/password.cljs @@ -1,9 +1,7 @@ (ns syng-im.components.chat.input.password (:require - [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.components.chat.input.simple-command :refer [simple-command-input-view]] - [syng-im.utils.utils :refer [log toast http-post]] - [syng-im.utils.logging :as log])) + [syng-im.components.chat.input.simple-command + :refer [simple-command-input-view]])) (defn password-input-view [command] [simple-command-input-view command {:secureTextEntry true}]) diff --git a/src/syng_im/components/chat/input/phone.cljs b/src/syng_im/components/chat/input/phone.cljs index ed8c71db1e..267178e382 100644 --- a/src/syng_im/components/chat/input/phone.cljs +++ b/src/syng_im/components/chat/input/phone.cljs @@ -1,9 +1,7 @@ (ns syng-im.components.chat.input.phone (:require - [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.components.chat.input.simple-command :refer [simple-command-input-view]] - [syng-im.utils.utils :refer [log toast http-post]] - [syng-im.utils.logging :as log])) + [syng-im.components.chat.input.simple-command + :refer [simple-command-input-view]])) (defn phone-input-view [command] - [simple-command-input-view command {:keyboardType "phone-pad"}]) + [simple-command-input-view command {:keyboardType :phone-pad}]) diff --git a/src/syng_im/components/chat/input/simple_command.cljs b/src/syng_im/components/chat/input/simple_command.cljs index d94d82bffc..53982f762a 100644 --- a/src/syng_im/components/chat/input/simple_command.cljs +++ b/src/syng_im/components/chat/input/simple_command.cljs @@ -1,18 +1,13 @@ (ns syng-im.components.chat.input.simple-command (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.components.react :refer [android? - view + [syng-im.components.react :refer [view image + icon text text-input touchable-highlight]] - [syng-im.components.styles :refer [font - color-white - color-blue - text1-color - text2-color]] - [syng-im.utils.utils :refer [log toast http-post]] - [syng-im.resources :as res])) + [syng-im.resources :as res] + [syng-im.components.chat.input.input-styles :as st])) (defn cancel-command-input [] (dispatch [:cancel-command])) @@ -28,59 +23,19 @@ (let [message-atom (subscribe [:get-chat-command-content])] (fn [command input-options] (let [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 set-input-message - :onSubmitEditing send-command} + [view st/command-input-container + [view (st/command-text-container command) + [text {:style st/command-text} (:text command)]] + [text-input (merge {:style st/command-input + :autoFocus true + :onChangeText set-input-message + :onSubmitEditing send-command} input-options) message] (if (pos? (count message)) - [touchable-highlight - {:on-press send-command} - [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 send-command} + [view st/send-container [icon :send st/send-icon]]] [touchable-highlight {:on-press cancel-command-input} - [view {:style {:marginTop 10 - :marginRight 10 - :width 36 - :height 36}} + [view st/cancel-container [image {:source res/icon-close-gray - :style {:marginTop 10.5 - :marginLeft 12 - :width 12 - :height 12}}]]])])))) + :style st/cancel-icon}]]])])))) diff --git a/src/syng_im/components/chat/input/simple_command_staged.cljs b/src/syng_im/components/chat/input/simple_command_staged.cljs index 3e8d8ad959..a2e0b571ee 100644 --- a/src/syng_im/components/chat/input/simple_command_staged.cljs +++ b/src/syng_im/components/chat/input/simple_command_staged.cljs @@ -1,61 +1,28 @@ (ns syng-im.components.chat.input.simple-command-staged - (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.components.react :refer [android? - view + (:require [re-frame.core :refer [subscribe dispatch]] + [syng-im.components.react :refer [view image text - text-input touchable-highlight]] - [syng-im.components.styles :refer [font - color-black - color-white - chat-background]] - [syng-im.utils.utils :refer [log toast http-post]] - [syng-im.utils.logging :as log] [syng-im.resources :as res] - [reagent.core :as r])) + [syng-im.components.chat.input.input-styles :as st])) (defn cancel-command-input [staged-command] (dispatch [:unstage-command staged-command])) (defn simple-command-staged-view [staged-command] - (let [chat-id-atom (subscribe [:get-current-chat-id])] - (fn [staged-command] - (let [chat-id @chat-id-atom - command (:command staged-command)] - [view {:style {:flex 1 - :alignItems "flex-start" - :flexDirection "column" - :backgroundColor color-white}} - [view {:style {:flexDirection "column" - :margin 16 - :padding 12 - :backgroundColor chat-background - :borderRadius 14}} - [view {:style {:flexDirection "row"}} - [view {:style {:backgroundColor (:color command) - :height 24 - :borderRadius 50 - :marginRight 32 - :paddingTop 3 - :paddingHorizontal 12}} - [text {:style {:fontSize 12 - :fontFamily font - :color color-white}} - (:text command)]] - [touchable-highlight {:style {:position "absolute" - :top 7 - :right 4} - :onPress #(cancel-command-input staged-command)} - [image {:source res/icon-close-gray - :style {:width 10 - :height 10}}]]] - [text {:style {:marginTop 5 - :marginHorizontal 0 - :fontSize 14 - :fontFamily font - :color color-black}} - ;; TODO isn't smart - (if (= (:command command) :keypair-password) - "******" - (:content staged-command))]]])))) + (let [command (:command staged-command)] + [view st/staged-command-container + [view st/staged-command-background + [view st/staged-command-info-container + [view (st/staged-command-text-container command) + [text {:style st/staged-command-text} (:text command)]] + [touchable-highlight {:style st/staged-command-cancel + :onPress #(cancel-command-input staged-command)} + [image {:source res/icon-close-gray + :style st/staged-command-cancel-icon}]]] + [text {:style st/staged-command-content} + ;; TODO isn't smart + (if (= (:command command) :keypair-password) + "******" + (:content staged-command))]]])) diff --git a/src/syng_im/components/chat/plain_message_input.cljs b/src/syng_im/components/chat/plain_message_input.cljs index 143dc79daf..f90fa057cc 100644 --- a/src/syng_im/components/chat/plain_message_input.cljs +++ b/src/syng_im/components/chat/plain_message_input.cljs @@ -30,7 +30,6 @@ [icon :list st/list-icon] [text-input {:style st/message-input :autoFocus (pos? (count @staged-commands-atom)) - :placeholder "Type" :onChangeText set-input-message :onSubmitEditing #(send @chat input-message)} input-message] diff --git a/src/syng_im/components/chat/suggestions_styles.cljs b/src/syng_im/components/chat/suggestions_styles.cljs index acd754b6e0..80ae964e68 100644 --- a/src/syng_im/components/chat/suggestions_styles.cljs +++ b/src/syng_im/components/chat/suggestions_styles.cljs @@ -2,7 +2,7 @@ (:require [syng-im.components.styles :refer [font color-white]])) (def suggestion-item-container - {:flexDirection "row" + {:flexDirection :row :marginVertical 1 :marginHorizontal 0 :height 40 @@ -10,15 +10,15 @@ (defn suggestion-background [{:keys [color]}] - {:flexDirection "column" - :position "absolute" + {:flexDirection :column + :position :absolute :top 10 :left 60 :backgroundColor color :borderRadius 10}) (def suggestion-text - {:marginTop -2 + {:marginTop -2 :marginHorizontal 10 :fontSize 14 :fontFamily font @@ -26,17 +26,17 @@ (def suggestion-description {:flex 1 - :position "absolute" + :position :absolute :top 7 :left 190 :lineHeight 18 :fontSize 14 :fontFamily font - :color "black"}) + :color :black}) (defn suggestions-container [suggestions] - {:flexDirection "row" + {:flexDirection :row :marginVertical 1 :marginHorizontal 0 :height (min 105 (* 42 (count suggestions))) diff --git a/src/syng_im/components/react.cljs b/src/syng_im/components/react.cljs index 7903b4d0ae..81e65cc804 100644 --- a/src/syng_im/components/react.cljs +++ b/src/syng_im/components/react.cljs @@ -20,7 +20,8 @@ (defn text-input [props text] [text-input-class (merge {:underlineColorAndroid :transparent - :placeholderTextColor st/text2-color} + :placeholderTextColor st/text2-color + :placeholder "Type"} props) text])