diff --git a/android/app/src/main/res/drawable-hdpi/icon_close_white.png b/android/app/src/main/res/drawable-hdpi/icon_close_white.png new file mode 100644 index 0000000000..79f55e700a Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_close_white.png differ diff --git a/android/app/src/main/res/drawable-hdpi/icon_dollar_green.png b/android/app/src/main/res/drawable-hdpi/icon_dollar_green.png new file mode 100644 index 0000000000..32cf51e421 Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_dollar_green.png differ diff --git a/android/app/src/main/res/drawable-hdpi/icon_drag_white.png b/android/app/src/main/res/drawable-hdpi/icon_drag_white.png new file mode 100644 index 0000000000..0e00adb5c1 Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_drag_white.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_close_white.png b/android/app/src/main/res/drawable-mdpi/icon_close_white.png new file mode 100644 index 0000000000..956a2c04fb Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_close_white.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_dollar_green.png b/android/app/src/main/res/drawable-mdpi/icon_dollar_green.png new file mode 100644 index 0000000000..fc6f77f756 Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_dollar_green.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_drag_white.png b/android/app/src/main/res/drawable-mdpi/icon_drag_white.png new file mode 100644 index 0000000000..ee4865dc43 Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_drag_white.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_close_white.png b/android/app/src/main/res/drawable-xhdpi/icon_close_white.png new file mode 100644 index 0000000000..5c8005f904 Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_close_white.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_dollar_green.png b/android/app/src/main/res/drawable-xhdpi/icon_dollar_green.png new file mode 100644 index 0000000000..cdea0d4af4 Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_dollar_green.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_drag_white.png b/android/app/src/main/res/drawable-xhdpi/icon_drag_white.png new file mode 100644 index 0000000000..9d42716db7 Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_drag_white.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_close_white.png b/android/app/src/main/res/drawable-xxhdpi/icon_close_white.png new file mode 100644 index 0000000000..32e84becb6 Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_close_white.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_dollar_green.png b/android/app/src/main/res/drawable-xxhdpi/icon_dollar_green.png new file mode 100644 index 0000000000..dac30955fe Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_dollar_green.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_drag_white.png b/android/app/src/main/res/drawable-xxhdpi/icon_drag_white.png new file mode 100644 index 0000000000..ac17612846 Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_drag_white.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_close_white.png b/android/app/src/main/res/drawable-xxxhdpi/icon_close_white.png new file mode 100644 index 0000000000..68dbc7fb36 Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_close_white.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_dollar_green.png b/android/app/src/main/res/drawable-xxxhdpi/icon_dollar_green.png new file mode 100644 index 0000000000..1f3c1c57d1 Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_dollar_green.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_drag_white.png b/android/app/src/main/res/drawable-xxxhdpi/icon_drag_white.png new file mode 100644 index 0000000000..dced659cf4 Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_drag_white.png differ diff --git a/src/status_im/chat/handlers.cljs b/src/status_im/chat/handlers.cljs index 5b8a8bc030..a12722e161 100644 --- a/src/status_im/chat/handlers.cljs +++ b/src/status_im/chat/handlers.cljs @@ -70,7 +70,7 @@ (update-input-text db text)) (defn update-command [db [_ text]] - (if (not (commands/get-chat-command db)) + (if-not (commands/get-chat-command db) (let [{:keys [command]} (suggestions/check-suggestion db text)] (if command (commands/set-chat-command db command) diff --git a/src/status_im/chat/styles/response.cljs b/src/status_im/chat/styles/response.cljs new file mode 100644 index 0000000000..2e969ae0ef --- /dev/null +++ b/src/status_im/chat/styles/response.cljs @@ -0,0 +1,78 @@ +(ns status-im.chat.styles.response + (:require [status-im.components.styles :refer [font + color-white + color-blue + text1-color + text2-color + chat-background + color-black]])) + +(def drag-touchable + {:height 16 + :alignItems :center}) + +(def drag-down-icon + {:width 16 + :height 16 + :opacity 0.4}) + +(def command-icon-container + {:marginTop 1 + :marginLeft 12 + :width 32 + :height 32 + :alignItems :center + :justifyContent :center + :borderRadius 50 + :backgroundColor color-white}) + +(def command-icon + {:width 9 + :height 15}) + +(def info-container + {:flex 1 + :marginLeft 12}) + +(def command-name + {:marginTop 0 + :fontSize 12 + :fontFamily font + :color color-white}) + +(def message-info + {:marginTop 1 + :fontSize 12 + :fontFamily font + :opacity 0.69 + :color color-white}) + +(defn request-info [color] + {:flexDirection :column + :height 61 + :backgroundColor color}) + +(def inner-container + {:flexDirection :row + :height 45}) + +(def cancel-container + {:marginTop 2.5 + :marginRight 16 + :width 24 + :height 24}) + +(def cancel-icon + {:marginTop 6 + :marginLeft 6 + :width 12 + :height 12}) + +(def command-input + {:flex 1 + :marginLeft 16 + :marginTop -2 + :padding 0 + :fontSize 14 + :fontFamily font + :color text1-color}) diff --git a/src/status_im/chat/subs.cljs b/src/status_im/chat/subs.cljs index d5df5f5716..f29c3527a2 100644 --- a/src/status_im/chat/subs.cljs +++ b/src/status_im/chat/subs.cljs @@ -70,6 +70,10 @@ (fn [db _] (reaction (commands/get-chat-command-content @db)))) +(register-sub :get-chat-command-to-msg-id + (fn [db _] + (reaction (commands/get-chat-command-to-msg-id @db)))) + (register-sub :chat-command-request (fn [db _] (reaction (commands/get-chat-command-request @db)))) diff --git a/src/status_im/chat/views/new_message.cljs b/src/status_im/chat/views/new_message.cljs index 73e5466344..3f2ec8792a 100644 --- a/src/status_im/chat/views/new_message.cljs +++ b/src/status_im/chat/views/new_message.cljs @@ -18,15 +18,14 @@ (defn show-input [command] [plain-message-input-view - (merge {:command command} - (case (:command command) - :phone {:input-options {:keyboardType :phone-pad} - :validator valid-mobile-number?} - :keypair-password {:input-options {:secureTextEntry true}} - :confirmation-code {:input-options {:keyboardType :numeric}} - :money {:input-options {:keyboardType :numeric}} - :request {:input-options {:keyboardType :numeric}} - nil))]) + (case (:command command) + :phone {:input-options {:keyboardType :phone-pad} + :validator valid-mobile-number?} + :keypair-password {:input-options {:secureTextEntry true}} + :confirmation-code {:input-options {:keyboardType :numeric}} + :money {:input-options {:keyboardType :numeric}} + :request {:input-options {:keyboardType :numeric}} + nil)]) (defn chat-message-new [] (let [command-atom (subscribe [:get-chat-command]) diff --git a/src/status_im/chat/views/plain_input.cljs b/src/status_im/chat/views/plain_input.cljs index 7ff822da85..c67a54de56 100644 --- a/src/status_im/chat/views/plain_input.cljs +++ b/src/status_im/chat/views/plain_input.cljs @@ -9,8 +9,10 @@ [status-im.chat.views.suggestions :refer [suggestions-view]] [status-im.chat.views.content-suggestions :refer [content-suggestions-view]] [status-im.chat.views.command :as command] + [status-im.chat.views.response :as response] [status-im.chat.styles.plain-input :as st] - [status-im.chat.styles.input :as st-command])) + [status-im.chat.styles.input :as st-command] + [status-im.chat.styles.response :as st-response])) (defn set-input-message [message] (dispatch [:set-chat-input-text message])) @@ -29,27 +31,36 @@ (when (message-valid? staged-commands message) (send dismiss-keyboard))) -(defn plain-message-input-view [{:keys [command input-options validator]}] +(defn plain-message-input-view [{:keys [input-options validator]}] (let [input-message (subscribe [:get-chat-input-text]) + command (subscribe [:get-chat-command]) + to-msg-id (subscribe [:get-chat-command-to-msg-id]) input-command (subscribe [:get-chat-command-content]) staged-commands (subscribe [:get-chat-staged-commands]) typing-command? (subscribe [:typing-command?])] - (fn [{:keys [command input-options validator]}] - (let [dismiss-keyboard (not (or command @typing-command?))] + (fn [{:keys [input-options validator]}] + (let [dismiss-keyboard (not (or command @typing-command?)) + command @command + response? (and command @to-msg-id)] [view st/input-container + (if response? [response/request-info command]) (if command [content-suggestions-view] [suggestions-view]) [view st/input-view (if command - [command/command-icon command] + (when-not response? + [command/command-icon command response?]) [touchable-highlight {:on-press #(dispatch [:switch-command-suggestions]) :style st/switch-commands-touchable} [view nil (if @typing-command? [icon :close-gray st/close-icon] [icon :list st/list-icon])]]) - [text-input (merge {:style (if command st-command/command-input st/message-input) ;; st-command/command-input + [text-input (merge {:style (cond + response? st-response/command-input + command st-command/command-input + :else st/message-input) :autoFocus false :blurOnSubmit dismiss-keyboard :onChangeText (fn [text] @@ -74,9 +85,10 @@ (if (command/valid? @input-command validator) [touchable-highlight {:on-press command/send-command} [view st/send-container [icon :send st/send-icon]]] - [touchable-highlight {:on-press command/cancel-command-input} - [view st-command/cancel-container - [icon :close-gray st-command/cancel-icon]]]) + (when-not response? + [touchable-highlight {:on-press command/cancel-command-input} + [view st-command/cancel-container + [icon :close-gray st-command/cancel-icon]]])) (when (message-valid? @staged-commands @input-message) [touchable-highlight {:on-press #(try-send @staged-commands @input-message diff --git a/src/status_im/chat/views/response.cljs b/src/status_im/chat/views/response.cljs new file mode 100644 index 0000000000..47781928b9 --- /dev/null +++ b/src/status_im/chat/views/response.cljs @@ -0,0 +1,41 @@ +(ns status-im.chat.views.response + (:require [re-frame.core :refer [subscribe dispatch]] + [status-im.components.react :refer [view + icon + image + text + text-input + touchable-highlight]] + [status-im.chat.views.command :as command] + [status-im.chat.styles.response :as st])) + +(defn drag-touchable [] + [touchable-highlight {:style st/drag-touchable + :onPress (fn [] + ;; TODO drag up/down + )} + [view nil + [icon :drag-white st/drag-down-icon]]]) + +(defn command-icon [] + [view st/command-icon-container + ;; TODO stub data: command icon + [icon :dollar-green st/command-icon]]) + +(defn info-container [command] + [view st/info-container + [text {:style st/command-name} + (:description command)] + [text {:style st/message-info} + ;; TODO stub data: request message info + "By ???, MMM 1st at HH:mm"]]) + +(defn request-info [command] + [view (st/request-info (:color command)) + [drag-touchable] + [view st/inner-container + [command-icon nil] + [info-container command] + [touchable-highlight {:on-press command/cancel-command-input} + [view st/cancel-container + [icon :close-white st/cancel-icon]]]]])