From 7c3c3d80086acf86cb851371af676090b696e566 Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Thu, 7 Jul 2016 19:09:16 +0300 Subject: [PATCH 1/4] validation handlers & views --- resources/commands.js | 18 +- resources/status.js | 9 +- src/status_im/android/core.cljs | 4 +- src/status_im/chat/handlers.cljs | 103 +--------- src/status_im/chat/handlers/animation.cljs | 2 +- src/status_im/chat/handlers/commands.cljs | 186 ++++++++++++++++++ .../chat/styles/command_validation.cljs | 1 + src/status_im/chat/subs.cljs | 10 + src/status_im/chat/views/command.cljs | 3 +- .../chat/views/command_validation.cljs | 30 +++ src/status_im/chat/views/message_input.cljs | 14 +- src/status_im/chat/views/new_message.cljs | 3 +- src/status_im/models/commands.cljs | 8 +- src/status_im/utils/handlers.cljs | 2 +- 14 files changed, 268 insertions(+), 125 deletions(-) create mode 100644 src/status_im/chat/handlers/commands.cljs create mode 100644 src/status_im/chat/styles/command_validation.cljs create mode 100644 src/status_im/chat/views/command_validation.cljs diff --git a/resources/commands.js b/resources/commands.js index 1191fdd311..7c317eae6e 100644 --- a/resources/commands.js +++ b/resources/commands.js @@ -3,7 +3,7 @@ status.command({ description: "Send location", color: "#9a5dcf", preview: function (params) { - var text = status.components.text( + var text = status.components.text( { style: { marginTop: 5, @@ -138,6 +138,12 @@ status.response({ name: "phone", description: "Send phone number", color: "#5fc48d", + validator: function (params) { + return { + validationHandler: "phone", + parameters: [params.value] + }; + }, params: [{ name: "phone", type: status.types.PHONE, @@ -156,6 +162,16 @@ status.command({ name: "help", description: "Help", color: "#7099e6", + /* Validator example + validator: function (params) { + if (params.value != "3") { + var error = status.components.view( + {backgroundColor: "red"}, + [status.components.text({}, "ooops :(")] + ); + return {errors: [error]} + } + },*/ params: [{ name: "query", type: status.types.TEXT diff --git a/resources/status.js b/resources/status.js index 2eec9a3d44..b9d73021c4 100644 --- a/resources/status.js +++ b/resources/status.js @@ -22,6 +22,7 @@ Command.prototype.create = function (com) { this.name = com.name; this.description = com.description; this.handler = com.handler; + this.validator = com.validator; this.color = com.color; this.icon = com.icon; this.params = com.params || []; @@ -83,13 +84,13 @@ function scrollView(options, elements) { } var status = { - command: function (n, d, h) { + command: function (h) { var command = new Command(); - return command.create(n, d, h); + return command.create(h); }, - response: function (n, d, h) { + response: function (h) { var response = new Response(); - return response.create(n, d, h); + return response.create(h); }, types: { TEXT: 'text', diff --git a/src/status_im/android/core.cljs b/src/status_im/android/core.cljs index f205c1e497..9288405b76 100644 --- a/src/status_im/android/core.cljs +++ b/src/status_im/android/core.cljs @@ -54,11 +54,11 @@ "keyboardDidShow" (fn [e] (let [h (.. e -endCoordinates -height)] - (when-not (= h keyboard-height) + (when-not (= h @keyboard-height) (dispatch [:set :keyboard-height h]))))) (.addListener device-event-emitter "keyboardDidHide" - (when-not (= 0 keyboard-height) + (when-not (= 0 @keyboard-height) #(dispatch [:set :keyboard-height 0])))) :render (fn [] diff --git a/src/status_im/chat/handlers.cljs b/src/status_im/chat/handlers.cljs index 97df9c4281..09290db99e 100644 --- a/src/status_im/chat/handlers.cljs +++ b/src/status_im/chat/handlers.cljs @@ -21,10 +21,10 @@ [status-im.utils.phone-number :refer [format-phone-number]] [status-im.utils.datetime :as time] [status-im.components.react :refer [geth]] - [status-im.utils.logging :as log] [status-im.components.jail :as j] [status-im.utils.types :refer [json->clj]] - [status-im.commands.utils :refer [generate-hiccup]])) + [status-im.commands.utils :refer [generate-hiccup]] + status-im.chat.handlers.commands)) (register-handler :set-show-actions (fn [db [_ show-actions]] @@ -53,81 +53,15 @@ (assoc-in [:chats current-chat-id :command-input] {}) (update-in [:chats current-chat-id :input-text] safe-trim)))) -(defn invoke-suggestions-handler! - [{:keys [current-chat-id canceled-command] :as db} _] - (when-not canceled-command - (let [{:keys [command content]} (get-in db [:chats current-chat-id :command-input]) - {:keys [name type]} command - path [(if (= :command type) :commands :responses) - name - :params - 0 - :suggestions] - params {:value content}] - (j/call current-chat-id - path - params - #(dispatch [:suggestions-handler {:command command - :content content - :chat-id current-chat-id} %]))))) - (register-handler :start-cancel-command (u/side-effect! (fn [db _] (dispatch [:animate-cancel-command])))) -(def command-prefix "c ") - -(defn cancel-command! - [{:keys [canceled-command]}] - (when canceled-command - (dispatch [:start-cancel-command]))) - -(register-handler :set-chat-command-content - [(after invoke-suggestions-handler!) - (after cancel-command!)] - (fn [{:keys [current-chat-id] :as db} [_ content]] - (let [starts-as-command? (str/starts-with? content command-prefix) - path [:chats current-chat-id :command-input :command :type] - command? (= :command (get-in db path))] - (as-> db db - (commands/set-chat-command-content db content) - (assoc-in db [:chats current-chat-id :input-text] nil) - (assoc db :canceled-command (and command? (not starts-as-command?))))))) - (defn update-input-text [{:keys [current-chat-id] :as db} text] (assoc-in db [:chats current-chat-id :input-text] text)) -(defn invoke-command-preview! - [{:keys [current-chat-id staged-command]} _] - (let [{:keys [command content]} staged-command - {:keys [name type]} command - path [(if (= :command type) :commands :responses) - name - :preview] - params {:value content}] - (j/call current-chat-id - path - params - #(dispatch [:command-preview current-chat-id %])))) - -(register-handler :stage-command - (after invoke-command-preview!) - (fn [{:keys [current-chat-id] :as db} _] - (let [db (update-input-text db nil) - {:keys [command content to-msg-id]} - (get-in db [:chats current-chat-id :command-input]) - content' (if (= :command (:type command)) - (subs content 2) - content) - command-info {:command command - :content content' - :to-message to-msg-id}] - (-> db - (commands/stage-command command-info) - (assoc :staged-command command-info))))) - (register-handler :set-message-input [] (fn [db [_ input]] (assoc db :message-input input))) @@ -138,15 +72,6 @@ (when-let [message-input (:message-input db)] (.blur message-input))))) -(register-handler :set-response-chat-command - [(after invoke-suggestions-handler!) - (after #(dispatch [:command-edit-mode])) - (after #(dispatch [:set-chat-input-text ""]))] - (fn [db [_ to-msg-id command-key]] - (-> db - (commands/set-response-chat-command to-msg-id command-key) - (assoc :canceled-command false)))) - (defn update-text [{:keys [current-chat-id] :as db} [_ text]] (let [suggestions (get-in db [:command-suggestions current-chat-id])] @@ -322,13 +247,6 @@ params #(dispatch [:command-handler! com %]))))) -(defn handle-commands - [{:keys [new-commands]}] - (doseq [{{content :content} :content - handler :handler} new-commands] - (when handler - (handler content)))) - (register-handler :send-chat-msg (-> prepare-message ((enrich prepare-staged-commans)) @@ -341,21 +259,7 @@ ((after save-commands-to-realm!)) ((after dispatch-responded-requests!)) ;; todo maybe it is better to track if it was handled or not - ((after invoke-commands-handlers!)) - ((after handle-commands)))) - -(register-handler :unstage-command - (fn [db [_ staged-command]] - (commands/unstage-command db staged-command))) - -(register-handler :set-chat-command - [(after invoke-suggestions-handler!) - (after #(dispatch [:command-edit-mode]))] - (fn [{:keys [current-chat-id] :as db} [_ command-key]] - (-> db - (commands/set-chat-command command-key) - (assoc-in [:chats current-chat-id :command-input :content] "c ") - (assoc :disable-input true)))) + ((after invoke-commands-handlers!)))) (register-handler :init-console-chat (fn [db [_]] @@ -552,6 +456,7 @@ (assoc-in db [:edit-mode current-chat-id] mode))) (register-handler :command-edit-mode + (after #(dispatch [:clear-validation-errors])) (edit-mode-handler :command)) (register-handler :text-edit-mode diff --git a/src/status_im/chat/handlers/animation.cljs b/src/status_im/chat/handlers/animation.cljs index c14a22b22d..fde8a8e457 100644 --- a/src/status_im/chat/handlers/animation.cljs +++ b/src/status_im/chat/handlers/animation.cljs @@ -47,7 +47,7 @@ input-height))) (register-handler :animate-show-response - [(after #(dispatch [:command-edit-mode]))] + ;[(after #(dispatch [:command-edit-mode]))] (fn [{:keys [current-chat-id] :as db}] (let [suggestions? (seq (get-in db [:suggestions current-chat-id])) height (if suggestions? diff --git a/src/status_im/chat/handlers/commands.cljs b/src/status_im/chat/handlers/commands.cljs new file mode 100644 index 0000000000..64f5128a9e --- /dev/null +++ b/src/status_im/chat/handlers/commands.cljs @@ -0,0 +1,186 @@ +(ns status-im.chat.handlers.commands + (:require [re-frame.core :refer [enrich after dispatch]] + [status-im.utils.handlers :refer [register-handler] :as u] + [status-im.components.jail :as j] + [status-im.models.commands :as commands] + [clojure.string :as str] + [status-im.commands.utils :as cu] + [status-im.utils.phone-number :as pn])) + +(def command-prefix "c ") + +(defn invoke-suggestions-handler! + [{:keys [current-chat-id canceled-command] :as db} _] + (when-not canceled-command + (let [{:keys [command content]} (get-in db [:chats current-chat-id :command-input]) + {:keys [name type]} command + path [(if (= :command type) :commands :responses) + name + :params + 0 + :suggestions] + params {:value content}] + (j/call current-chat-id + path + params + #(dispatch [:suggestions-handler {:command command + :content content + :chat-id current-chat-id} %]))))) + +(defn cancel-command! + [{:keys [canceled-command]}] + (when canceled-command + (dispatch [:start-cancel-command]))) + +(register-handler :set-chat-command-content + [(after invoke-suggestions-handler!) + (after cancel-command!) + (after #(dispatch [:clear-validation-errors]))] + (fn [{:keys [current-chat-id] :as db} [_ content]] + (let [starts-as-command? (str/starts-with? content command-prefix) + path [:chats current-chat-id :command-input :command :type] + command? (= :command (get-in db path))] + (as-> db db + (commands/set-chat-command-content db content) + (assoc-in db [:chats current-chat-id :input-text] nil) + (assoc db :canceled-command (and command? (not starts-as-command?))))))) + +(defn invoke-command-preview! + [{:keys [staged-command]} [_ chat-id]] + (let [{:keys [command content]} staged-command + {:keys [name type]} command + path [(if (= :command type) :commands :responses) + name + :preview] + params {:value content}] + (j/call chat-id + path + params + #(dispatch [:command-preview chat-id %])))) + +(defn content-by-command + [{:keys [type]} content] + (if (= :command type) + (subs content 2) + content)) + +(defn command-input + ([{:keys [current-chat-id] :as db}] + (command-input db current-chat-id)) + ([db chat-id] + (get-in db [:chats chat-id :command-input]))) + + +(register-handler ::validate! + (u/side-effect! + (fn [_ [_ {:keys [chat-id]} {:keys [error result]}]] + ;; todo handle error + (when-not error + (let [{:keys [errors validationHandler parameters]} result] + (cond errors + (dispatch [::add-validation-errors chat-id errors]) + + validationHandler + (dispatch [::validation-handler! + chat-id + validationHandler + parameters]) + + :else (dispatch [::finish-command-staging chat-id]))))))) + +(defn start-validate! [db] + (let [{:keys [content command chat-id] :as data} (::command db) + {:keys [name type]} command + path [(if (= :command type) :commands :responses) + name + :validator] + params {:value content}] + (j/call chat-id + path + params + #(dispatch [::validate! data %])))) + +(register-handler :stage-command + (after start-validate!) + (fn [{:keys [current-chat-id] :as db}] + (let [{:keys [command content]} (command-input db) + content' (content-by-command command content)] + (-> db + (assoc ::command {:content content' + :command command + :chat-id current-chat-id}) + (assoc-in [:disable-staging current-chat-id] true))))) + +(register-handler ::finish-command-staging + [(after #(dispatch [:start-cancel-command])) + (after invoke-command-preview!)] + (fn [db [_ chat-id]] + (let [db (assoc-in db [:chats chat-id :input-text] nil) + {:keys [command content to-msg-id]} (command-input db) + content' (content-by-command command content) + command-info {:command command + :content content' + :to-message to-msg-id}] + (-> db + (commands/stage-command command-info) + (assoc :staged-command command-info) + (assoc-in [:disable-staging chat-id] true))))) + +(register-handler :unstage-command + (fn [db [_ staged-command]] + (commands/unstage-command db staged-command))) + +(defn set-chat-command + [{:keys [current-chat-id] :as db} [_ command-key]] + (-> db + (commands/set-chat-command command-key) + (assoc-in [:chats current-chat-id :command-input :content] command-prefix) + (assoc :disable-input true))) + +(register-handler :set-chat-command + [(after invoke-suggestions-handler!) + (after #(dispatch [:command-edit-mode]))] + set-chat-command) + +(defn set-response-command [db [_ to-msg-id command-key]] + (-> db + (commands/set-response-chat-command to-msg-id command-key) + (assoc :canceled-command false))) + +(register-handler :set-response-chat-command + [(after invoke-suggestions-handler!) + (after #(dispatch [:command-edit-mode])) + (after #(dispatch [:set-chat-input-text ""]))] + set-response-command) + +(register-handler ::add-validation-errors + (fn [db [_ chat-id errors]] + (assoc-in db [:custom-validation-errors chat-id] + (map cu/generate-hiccup errors)))) + +(register-handler :clear-validation-errors + (fn [db] + (dissoc db :validation-errors :custom-validation-errors))) + +(def validation-handlers + {:phone (fn [chat-id [number]] + (if (pn/valid-mobile-number? number) + (dispatch [::finish-command-staging chat-id]) + (dispatch [::set-validation-error + chat-id + {:title "Phobe number" + :description "Wrong phone number"}])))}) + +(defn validator [name] + (validation-handlers (keyword name))) + +(register-handler ::validation-handler! + (u/side-effect! + (fn [_ [_ chat-id name params]] + (when-let [handler (validator name)] + (handler chat-id params))))) + + +(register-handler ::set-validation-error + (fn [db [_ chat-id error]] + (assoc-in db [:validation-errors chat-id] [error]))) diff --git a/src/status_im/chat/styles/command_validation.cljs b/src/status_im/chat/styles/command_validation.cljs new file mode 100644 index 0000000000..b38e8cc820 --- /dev/null +++ b/src/status_im/chat/styles/command_validation.cljs @@ -0,0 +1 @@ +(ns status-im.chat.styles.command-validation) diff --git a/src/status_im/chat/subs.cljs b/src/status_im/chat/subs.cljs index ae90e45bc0..634d2c8bf4 100644 --- a/src/status_im/chat/subs.cljs +++ b/src/status_im/chat/subs.cljs @@ -172,3 +172,13 @@ (fn [_ [_ message-id]] (let [requests (subscribe [:get-requests])] (reaction (not (some #(= message-id (:message-id %)) @requests)))))) + +(register-sub :validation-errors + (fn [db] + (let [current-chat-id (subscribe [:get-current-chat-id])] + (reaction (get-in @db [:validation-errors @current-chat-id]))))) + +(register-sub :custom-validation-errors + (fn [db] + (let [current-chat-id (subscribe [:get-current-chat-id])] + (reaction (get-in @db [:custom-validation-errors @current-chat-id]))))) diff --git a/src/status_im/chat/views/command.cljs b/src/status_im/chat/views/command.cljs index 49f5135b7e..3264e5d597 100644 --- a/src/status_im/chat/views/command.cljs +++ b/src/status_im/chat/views/command.cljs @@ -15,8 +15,7 @@ (dispatch [:set-chat-command-content message])) (defn send-command [] - (dispatch [:stage-command]) - (cancel-command-input)) + (dispatch [:stage-command])) (defn valid? [message validator] (if validator diff --git a/src/status_im/chat/views/command_validation.cljs b/src/status_im/chat/views/command_validation.cljs new file mode 100644 index 0000000000..4294e61ce2 --- /dev/null +++ b/src/status_im/chat/views/command_validation.cljs @@ -0,0 +1,30 @@ +(ns status-im.chat.views.command-validation + (:require-macros [status-im.utils.views :refer [defview]]) + (:require [status-im.components.react :as c] + [status-im.chat.styles.command-validation :as st] + [status-im.utils.listview :as lw])) + +(defn error [{:keys [title description]}] + (c/list-item + [c/view + [c/text title] + [c/text description]])) + +(defn errors-list [errors] + [c/list-view {:renderRow error + :keyboardShouldPersistTaps true + :dataSource (lw/to-datasource errors)}]) + +(defview errors [] + [errors [:validation-errors] + custom-errors [:custom-validation-errors] + command? [:command?]] + (when (and command? + (or (seq errors) + (seq custom-errors))) + [c/scroll-view {:background-color :red} + (cond (seq custom-errors) + (vec (concat [c/view] custom-errors)) + + (seq errors) + [errors-list errors])])) diff --git a/src/status_im/chat/views/message_input.cljs b/src/status_im/chat/views/message_input.cljs index c96b36f22e..e45349b28f 100644 --- a/src/status_im/chat/views/message_input.cljs +++ b/src/status_im/chat/views/message_input.cljs @@ -2,6 +2,7 @@ (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [subscribe]] [status-im.components.react :refer [view + text animated-view icon touchable-highlight @@ -10,7 +11,8 @@ [status-im.chat.views.command :as command] [status-im.chat.styles.message-input :as st] [status-im.chat.styles.plain-message :as st-message] - [status-im.chat.styles.response :as st-response])) + [status-im.chat.styles.response :as st-response] + [status-im.chat.views.command-validation :as cv])) (defn send-button [{:keys [on-press accessibility-label]}] [touchable-highlight {:on-press on-press @@ -48,20 +50,20 @@ input-options) (if command? input-command input-message)]) -(defview plain-message-input-view [{:keys [input-options validator]}] +(defview plain-message-input-view [{:keys [input-options]}] [command? [:command?] {:keys [type] :as command} [:get-chat-command] input-command [:get-chat-command-content] - valid-plain-message? [:valid-plain-message?] - valid-command? [:valid-command? validator]] + valid-plain-message? [:valid-plain-message?]] [view st/input-container + [cv/errors] [view st/input-view [plain-message/commands-button] [message-input-container - [message-input input-options validator]] + [message-input input-options]] ;; TODO emoticons: not implemented [plain-message/smile-button] - (when (if command? valid-command? valid-plain-message?) + (when (or command? valid-plain-message?) (let [on-press (if command? command/send-command plain-message/send)] diff --git a/src/status_im/chat/views/new_message.cljs b/src/status_im/chat/views/new_message.cljs index 54bb81f2d7..84576ef5a3 100644 --- a/src/status_im/chat/views/new_message.cljs +++ b/src/status_im/chat/views/new_message.cljs @@ -18,8 +18,7 @@ (defn get-options [{:keys [type placeholder]} command-type] (let [options (case (keyword type) - :phone {:input-options {:keyboardType :phone-pad} - :validator valid-mobile-number?} + :phone {:input-options {:keyboardType :phone-pad}} :password {:input-options {:secureTextEntry true}} :number {:input-options {:keyboardType :numeric}} ;; todo maybe nil is fine for now :) diff --git a/src/status_im/models/commands.cljs b/src/status_im/models/commands.cljs index 1ebb70dccb..d7380a04c4 100644 --- a/src/status_im/models/commands.cljs +++ b/src/status_im/models/commands.cljs @@ -1,11 +1,5 @@ (ns status-im.models.commands - (:require [clojure.string :refer [join split]] - [clojure.walk :refer [stringify-keys keywordize-keys]] - [re-frame.core :refer [subscribe dispatch]] - [status-im.db :as db] - [status-im.components.animation :as anim] - [status-im.components.styles :refer [color-blue color-dark-mint]] - [status-im.i18n :refer [label]])) + (:require [status-im.db :as db])) (defn get-commands [{:keys [current-chat-id] :as db}] (or (get-in db [:chats current-chat-id :commands]) {})) diff --git a/src/status_im/utils/handlers.cljs b/src/status_im/utils/handlers.cljs index 083196375e..4d2777e335 100644 --- a/src/status_im/utils/handlers.cljs +++ b/src/status_im/utils/handlers.cljs @@ -11,4 +11,4 @@ (defn register-handler ([name handler] (register-handler name nil handler)) ([name middleware handler] - (re-core/register-handler name [#_debug middleware] handler))) + (re-core/register-handler name [debug middleware] handler))) From 4e5838391c21832046894d06f7dcca1939434ba5 Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Fri, 8 Jul 2016 11:30:42 +0300 Subject: [PATCH 2/4] validation messages styles --- src/status_im/chat/handlers/commands.cljs | 7 +++--- .../chat/styles/command_validation.cljs | 17 ++++++++++++- .../chat/views/command_validation.cljs | 25 ++++++++++--------- src/status_im/chat/views/message_input.cljs | 2 +- src/status_im/components/react.cljs | 6 ++++- src/status_im/translations/en.cljs | 2 ++ 6 files changed, 41 insertions(+), 18 deletions(-) diff --git a/src/status_im/chat/handlers/commands.cljs b/src/status_im/chat/handlers/commands.cljs index 64f5128a9e..5c0caf390f 100644 --- a/src/status_im/chat/handlers/commands.cljs +++ b/src/status_im/chat/handlers/commands.cljs @@ -5,7 +5,8 @@ [status-im.models.commands :as commands] [clojure.string :as str] [status-im.commands.utils :as cu] - [status-im.utils.phone-number :as pn])) + [status-im.utils.phone-number :as pn] + [status-im.i18n :as i18n])) (def command-prefix "c ") @@ -168,8 +169,8 @@ (dispatch [::finish-command-staging chat-id]) (dispatch [::set-validation-error chat-id - {:title "Phobe number" - :description "Wrong phone number"}])))}) + {:title (i18n/label :t/phone-number) + :description (i18n/label :t/invalid-phone)}])))}) (defn validator [name] (validation-handlers (keyword name))) diff --git a/src/status_im/chat/styles/command_validation.cljs b/src/status_im/chat/styles/command_validation.cljs index b38e8cc820..fc4f75b999 100644 --- a/src/status_im/chat/styles/command_validation.cljs +++ b/src/status_im/chat/styles/command_validation.cljs @@ -1 +1,16 @@ -(ns status-im.chat.styles.command-validation) +(ns status-im.chat.styles.command-validation + (:require [status-im.components.styles :as st])) + +(def messages-container + {:background-color :red + :height 61 + :padding-left 16 + :padding-top 14}) + +(def title + {:color :white + :font-size 12 + :font-family st/font}) + +(def description + (assoc title :opacity 0.69)) diff --git a/src/status_im/chat/views/command_validation.cljs b/src/status_im/chat/views/command_validation.cljs index 4294e61ce2..1c36b91ceb 100644 --- a/src/status_im/chat/views/command_validation.cljs +++ b/src/status_im/chat/views/command_validation.cljs @@ -4,27 +4,28 @@ [status-im.chat.styles.command-validation :as st] [status-im.utils.listview :as lw])) -(defn error [{:keys [title description]}] +(defn message [{:keys [title description]}] (c/list-item [c/view - [c/text title] - [c/text description]])) + [c/text st/title title] + [c/text st/description description]])) -(defn errors-list [errors] - [c/list-view {:renderRow error +(defn messages-list [errors] + [c/list-view {:renderRow message :keyboardShouldPersistTaps true - :dataSource (lw/to-datasource errors)}]) + :dataSource (lw/to-datasource errors) + :style st/messages-container}]) -(defview errors [] - [errors [:validation-errors] +(defview validation-messages [] + [validation-messages [:validation-errors] custom-errors [:custom-validation-errors] command? [:command?]] (when (and command? - (or (seq errors) + (or (seq validation-messages) (seq custom-errors))) - [c/scroll-view {:background-color :red} + [c/scroll-view (cond (seq custom-errors) (vec (concat [c/view] custom-errors)) - (seq errors) - [errors-list errors])])) + (seq validation-messages) + [messages-list validation-messages])])) diff --git a/src/status_im/chat/views/message_input.cljs b/src/status_im/chat/views/message_input.cljs index e45349b28f..87f08c5ad2 100644 --- a/src/status_im/chat/views/message_input.cljs +++ b/src/status_im/chat/views/message_input.cljs @@ -56,7 +56,7 @@ input-command [:get-chat-command-content] valid-plain-message? [:valid-plain-message?]] [view st/input-container - [cv/errors] + [cv/validation-messages] [view st/input-view [plain-message/commands-button] [message-input-container diff --git a/src/status_im/components/react.cljs b/src/status_im/components/react.cljs index f180f463c2..ff9f87ef6a 100644 --- a/src/status_im/components/react.cljs +++ b/src/status_im/components/react.cljs @@ -17,7 +17,11 @@ (def app-registry (get-react-property "AppRegistry")) (def navigator (get-class "Navigator")) -(def text (get-class "Text")) +(def text-class (get-class "Text")) +(defn text + ([s] [text-class s]) + ([{:keys [style] :as opts} s] + [text-class (if style opts {:style opts}) s])) (def view (get-class "View")) (def image (get-class "Image")) (def touchable-highlight-class (get-class "TouchableHighlight")) diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index c667275426..e86d4fbc9b 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -136,4 +136,6 @@ ;users :add-account "Add account" + ;validation + :invalid-phone "Invalid phone number" }) From 3718541b8c0844d76e2fc12944ef494e9cef9c1f Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Fri, 8 Jul 2016 12:26:46 +0300 Subject: [PATCH 3/4] validation errors position --- src/status_im/chat/handlers/animation.cljs | 14 ++++++++++---- src/status_im/chat/handlers/commands.cljs | 1 + src/status_im/chat/styles/command_validation.cljs | 5 +++-- src/status_im/chat/views/command_validation.cljs | 15 +++++++-------- src/status_im/chat/views/message_input.cljs | 4 +--- src/status_im/chat/views/response.cljs | 7 ++++--- src/status_im/utils/handlers.cljs | 2 +- 7 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/status_im/chat/handlers/animation.cljs b/src/status_im/chat/handlers/animation.cljs index fde8a8e457..1bb6913651 100644 --- a/src/status_im/chat/handlers/animation.cljs +++ b/src/status_im/chat/handlers/animation.cljs @@ -41,10 +41,16 @@ (defn get-minimum-height [{:keys [current-chat-id] :as db}] (let [path [:chats current-chat-id :command-input :command :type] - type (get-in db path)] - (if (= :response type) - minimum-suggestion-height - input-height))) + type (get-in db path) + errors (get-in db [:validation-errors current-chat-id]) + custom-errors (get-in db [:custom-validation-errors current-chat-id]) + validation-height (if (or (seq errors) (seq custom-errors)) + request-info-height + 0)] + (+ validation-height + (if (= :response type) + minimum-suggestion-height + input-height)))) (register-handler :animate-show-response ;[(after #(dispatch [:command-edit-mode]))] diff --git a/src/status_im/chat/handlers/commands.cljs b/src/status_im/chat/handlers/commands.cljs index 5c0caf390f..f1ca4f1945 100644 --- a/src/status_im/chat/handlers/commands.cljs +++ b/src/status_im/chat/handlers/commands.cljs @@ -183,5 +183,6 @@ (register-handler ::set-validation-error + (after #(dispatch [:fix-response-height])) (fn [db [_ chat-id error]] (assoc-in db [:validation-errors chat-id] [error]))) diff --git a/src/status_im/chat/styles/command_validation.cljs b/src/status_im/chat/styles/command_validation.cljs index fc4f75b999..2ffb23cc84 100644 --- a/src/status_im/chat/styles/command_validation.cljs +++ b/src/status_im/chat/styles/command_validation.cljs @@ -1,9 +1,10 @@ (ns status-im.chat.styles.command-validation - (:require [status-im.components.styles :as st])) + (:require [status-im.components.styles :as st] + [status-im.chat.constants :as constants])) (def messages-container {:background-color :red - :height 61 + :height constants/request-info-height :padding-left 16 :padding-top 14}) diff --git a/src/status_im/chat/views/command_validation.cljs b/src/status_im/chat/views/command_validation.cljs index 1c36b91ceb..6d7a705bd5 100644 --- a/src/status_im/chat/views/command_validation.cljs +++ b/src/status_im/chat/views/command_validation.cljs @@ -20,12 +20,11 @@ [validation-messages [:validation-errors] custom-errors [:custom-validation-errors] command? [:command?]] - (when (and command? - (or (seq validation-messages) - (seq custom-errors))) - [c/scroll-view - (cond (seq custom-errors) - (vec (concat [c/view] custom-errors)) + [c/view + (cond (seq custom-errors) + (vec (concat [c/view] custom-errors)) - (seq validation-messages) - [messages-list validation-messages])])) + (seq validation-messages) + [messages-list validation-messages] + + :else nil)]) diff --git a/src/status_im/chat/views/message_input.cljs b/src/status_im/chat/views/message_input.cljs index 87f08c5ad2..81ea2dd4a7 100644 --- a/src/status_im/chat/views/message_input.cljs +++ b/src/status_im/chat/views/message_input.cljs @@ -11,8 +11,7 @@ [status-im.chat.views.command :as command] [status-im.chat.styles.message-input :as st] [status-im.chat.styles.plain-message :as st-message] - [status-im.chat.styles.response :as st-response] - [status-im.chat.views.command-validation :as cv])) + [status-im.chat.styles.response :as st-response])) (defn send-button [{:keys [on-press accessibility-label]}] [touchable-highlight {:on-press on-press @@ -56,7 +55,6 @@ input-command [:get-chat-command-content] valid-plain-message? [:valid-plain-message?]] [view st/input-container - [cv/validation-messages] [view st/input-view [plain-message/commands-button] [message-input-container diff --git a/src/status_im/chat/views/response.cljs b/src/status_im/chat/views/response.cljs index a0d8e876bc..6e016f5e00 100644 --- a/src/status_im/chat/views/response.cljs +++ b/src/status_im/chat/views/response.cljs @@ -15,7 +15,8 @@ [status-im.chat.styles.dragdown :as ddst] [status-im.components.animation :as anim] [status-im.chat.suggestions-responder :as resp] - [status-im.chat.constants :as c])) + [status-im.chat.constants :as c] + [status-im.chat.views.command-validation :as cv])) (defn drag-icon [] [view st/drag-container @@ -83,8 +84,7 @@ (defview placeholder [] [suggestions [:get-content-suggestions]] - (when (seq suggestions) - [view st/input-placeholder])) + [view st/input-placeholder]) (defview response-suggestions-view [] [suggestions [:get-content-suggestions]] @@ -95,4 +95,5 @@ [container response-height [request-info response-height] [response-suggestions-view] + [cv/validation-messages] [placeholder]])) diff --git a/src/status_im/utils/handlers.cljs b/src/status_im/utils/handlers.cljs index 4d2777e335..083196375e 100644 --- a/src/status_im/utils/handlers.cljs +++ b/src/status_im/utils/handlers.cljs @@ -11,4 +11,4 @@ (defn register-handler ([name handler] (register-handler name nil handler)) ([name middleware handler] - (re-core/register-handler name [debug middleware] handler))) + (re-core/register-handler name [#_debug middleware] handler))) From 65772e3438230aef52466e9bf596dc5943e2cac3 Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Fri, 8 Jul 2016 18:30:16 +0300 Subject: [PATCH 4/4] separate animations values for different chats --- src/status_im/chat/handlers/animation.cljs | 30 ++++++++++++---------- src/status_im/chat/subs.cljs | 12 +++++++++ src/status_im/chat/views/response.cljs | 4 +-- src/status_im/chat/views/suggestions.cljs | 2 +- src/status_im/db.cljs | 3 +-- 5 files changed, 33 insertions(+), 18 deletions(-) diff --git a/src/status_im/chat/handlers/animation.cljs b/src/status_im/chat/handlers/animation.cljs index 1bb6913651..0a92615c7d 100644 --- a/src/status_im/chat/handlers/animation.cljs +++ b/src/status_im/chat/handlers/animation.cljs @@ -3,6 +3,7 @@ [status-im.utils.handlers :refer [register-handler]] [status-im.handlers.content-suggestions :refer [get-content-suggestions]] [status-im.chat.constants :refer [input-height request-info-height + suggestions-header-height minimum-command-suggestions-height response-height-normal minimum-suggestion-height]] [status-im.constants :refer [response-input-hiding-duration]])) @@ -15,27 +16,28 @@ ([name middleware handler] (register-handler name [(path :animations) middleware] handler))) -(animation-handler :animate-cancel-command +(register-handler :animate-cancel-command (after #(dispatch [:text-edit-mode])) - (fn [db _] - (assoc db :to-response-height input-height))) + (fn [{:keys [current-chat-id] :as db} _] + (assoc-in db [:animations :to-response-height current-chat-id] input-height))) (def response-height (+ input-height response-height-normal)) -(defn update-response-height [db] - (assoc-in db [:animations :to-response-height] response-height)) +(defn update-response-height + [{:keys [current-chat-id] :as db}] + (assoc-in db [:animations :to-response-height current-chat-id] response-height)) (register-handler :animate-command-suggestions - (fn [{:keys [current-chat-id] :as db} _] - (let [suggestions? (seq (get-in db [:command-suggestions current-chat-id])) - current (get-in db [:animations :command-suggestions-height]) + (fn [{chat-id :current-chat-id :as db} _] + (let [suggestions? (seq (get-in db [:command-suggestions chat-id])) + current (get-in db [:animations :command-suggestions-height chat-id]) height (if suggestions? middle-height input-height) changed? (if (and suggestions? (not (nil? current)) (not= input-height current)) identity inc)] (-> db - (update :animations assoc :command-suggestions-height height) + (assoc-in [:animations :command-suggestions-height chat-id] height) (update-in [:animations :commands-height-changed] changed?))))) (defn get-minimum-height @@ -50,7 +52,9 @@ (+ validation-height (if (= :response type) minimum-suggestion-height - input-height)))) + (if (zero? validation-height) + input-height + (+ input-height suggestions-header-height)))))) (register-handler :animate-show-response ;[(after #(dispatch [:command-edit-mode]))] @@ -59,7 +63,7 @@ height (if suggestions? middle-height (get-minimum-height db))] - (assoc-in db [:animations :to-response-height] height)))) + (assoc-in db [:animations :to-response-height current-chat-id] height)))) (defn fix-height [height-key height-signal-key suggestions-key minimum] @@ -70,7 +74,7 @@ under-middle-position? (<= current middle-height) over-middle-position? (not under-middle-position?) suggestions (get-in db [suggestions-key current-chat-id]) - old-fixed (get-in db [:animations height-key]) + old-fixed (get-in db [:animations height-key current-chat-id]) new-fixed (cond (not suggestions) (minimum db) @@ -95,7 +99,7 @@ (and under-middle-position? moving-down?) (minimum db))] (-> db - (assoc-in [:animations height-key] new-fixed) + (assoc-in [:animations height-key current-chat-id] new-fixed) (update-in [:animations height-signal-key] inc))))) (defn commands-min-height diff --git a/src/status_im/chat/subs.cljs b/src/status_im/chat/subs.cljs index c1a8d722b3..edef877e45 100644 --- a/src/status_im/chat/subs.cljs +++ b/src/status_im/chat/subs.cljs @@ -186,3 +186,15 @@ (register-sub :unviewed-messages-count (fn [db [_ chat-id]] (reaction (get-in @db [:unviewed-messages chat-id :count])))) + +(register-sub :command-suggestions-height + (fn [db] + (let [chat-id (subscribe [:get-current-chat-id])] + (reaction + (get-in @db [:animations :command-suggestions-height @chat-id]))))) + +(register-sub :response-height + (fn [db] + (let [chat-id (subscribe [:get-current-chat-id])] + (reaction + (get-in @db [:animations :to-response-height @chat-id]))))) diff --git a/src/status_im/chat/views/response.cljs b/src/status_im/chat/views/response.cljs index 6e016f5e00..1e7d9d7d3d 100644 --- a/src/status_im/chat/views/response.cljs +++ b/src/status_im/chat/views/response.cljs @@ -59,14 +59,14 @@ [icon :drag_down ddst/drag-down-icon]])))) (defn container-animation-logic [{:keys [to-value val]}] - (let [to-value @to-value] + (when-let [to-value @to-value] (when-not (= to-value (.-_value val)) (anim/start (anim/spring val {:toValue to-value}))))) (defn container [response-height & children] (let [;; todo to-response-height, cur-response-height must be specific ;; for each chat - to-response-height (subscribe [:animations :to-response-height]) + to-response-height (subscribe [:response-height]) changed (subscribe [:animations :response-height-changed]) context {:to-value to-response-height :val response-height} diff --git a/src/status_im/chat/views/suggestions.cljs b/src/status_im/chat/views/suggestions.cljs index 909641d829..5a97ed7e3d 100644 --- a/src/status_im/chat/views/suggestions.cljs +++ b/src/status_im/chat/views/suggestions.cljs @@ -104,7 +104,7 @@ (defn container [h & elements] (let [;; todo to-response-height, cur-response-height must be specific ;; for each chat - to-response-height (subscribe [:animations :command-suggestions-height]) + to-response-height (subscribe [:command-suggestions-height]) changed (subscribe [:animations :commands-height-changed]) context {:to-value to-response-height :val h} diff --git a/src/status_im/db.cljs b/src/status_im/db.cljs index 9d1cc6fa5d..503ca17a99 100644 --- a/src/status_im/db.cljs +++ b/src/status_im/db.cljs @@ -38,8 +38,7 @@ :whisper-identity "" :phone-number ""} :disable-group-creation false - :animations {:to-response-height 0.1 - ;; todo clear this + :animations {;; todo clear this :tabs-bar-value (anim/create-value 0)}}) (def protocol-initialized-path [:protocol-initialized])