diff --git a/images/icon_close_gray.png b/images/icon_close_gray.png new file mode 100644 index 0000000000..c0cca73335 Binary files /dev/null and b/images/icon_close_gray.png differ diff --git a/src/syng_im/components/chat/input/simple_command.cljs b/src/syng_im/components/chat/input/simple_command.cljs index 388bda61f6..9d86a6cb95 100644 --- a/src/syng_im/components/chat/input/simple_command.cljs +++ b/src/syng_im/components/chat/input/simple_command.cljs @@ -6,7 +6,11 @@ text text-input touchable-highlight]] - [syng-im.components.styles :refer [font]] + [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.utils.logging :as log] [syng-im.resources :as res] @@ -28,58 +32,62 @@ (fn [command input-options] (let [chat-id @chat-id-atom message @message-atom] - [view {:style {:flexDirection "row"}} - [view {:style {:flex 1 - :flexDirection "column" - :backgroundColor "white"}} - [view {:style {:flexDirection "column" - :margin 10 - :width 200 - :backgroundColor "#ebf0f4" - :borderRadius 10}} - [view {:style {:flexDirection "row"}} - [view {:style {:flexDirection "column" - :margin 10 - :backgroundColor (:color command) - :borderRadius 10}} - [text {:style {:marginTop -2 - :marginHorizontal 10 - :fontSize 14 - :fontFamily font - :color "white"}} - (:text command)]] - [touchable-highlight {:style {:marginTop 14 - :marginRight 16 - :position "absolute" - :top 3 - :right 20} - :onPress (fn [] + [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] + (send-command chat-id command message))} + input-options) + message] + (if (< 0 (count message)) + [touchable-highlight {:on-press (fn [] + (send-command chat-id command message))} + [view {:style {:marginTop 10 + :marginRight 10 + :width 36 + :height 36 + :borderRadius 50 + :backgroundColor color-blue}} + [image {:source res/icon-send + :style {:marginTop 10.5 + :marginLeft 12 + :width 15 + :height 15}}]]] + [touchable-highlight {:on-press (fn [] (cancel-command-input))} - [image {:source res/att - :style {:width 17 - :height 14}}]]] - [text-input (merge {:style {:flex 1 - :marginLeft 8 - :lineHeight 42 - :fontSize 14 - :fontFamily font - :color "black"} - :underlineColorAndroid "transparent" - :autoFocus true - :keyboardType "default" - :onChangeText (fn [new-text] - (set-input-message new-text)) - :onSubmitEditing (fn [e] - (send-command chat-id command message))} - input-options) - message]]] - [touchable-highlight {:style {:marginTop 14 - :marginRight 16 - :position "absolute" - :right 20 - :bottom 20} - :onPress (fn [] - (send-command chat-id command message))} - [image {:source res/att - :style {:width 34 - :height 28}}]]])))) + [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/resources.cljs b/src/syng_im/resources.cljs index 17c231bf56..3f1a20e77f 100644 --- a/src/syng_im/resources.cljs +++ b/src/syng_im/resources.cljs @@ -27,3 +27,4 @@ (def icon-hamburger (js/require "./images/icon_hamburger.png")) (def icon-search (js/require "./images/icon_search.png")) (def icon-send (js/require "./images/icon_send.png")) +(def icon-close-gray (js/require "./images/icon_close_gray.png"))