From 6e20f11ed8788fa4e62e6da12d497a0f7471d9a4 Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Thu, 23 Jun 2016 15:47:58 +0300 Subject: [PATCH] adapt animation Former-commit-id: 831132ccef8f9280f0f2601f540894d2469723ba --- src/status_im/chat/constants.cljs | 6 +++ src/status_im/chat/handlers.cljs | 17 +++---- src/status_im/chat/handlers/animation.cljs | 49 +++++++++---------- src/status_im/chat/screen.cljs | 1 - src/status_im/chat/styles/message_input.cljs | 5 +- src/status_im/chat/styles/response.cljs | 6 +-- src/status_im/chat/subs.cljs | 8 +-- .../chat/views/content_suggestions.cljs | 34 ------------- src/status_im/chat/views/plain_message.cljs | 22 +++++---- src/status_im/chat/views/response.cljs | 4 +- .../chat/views/response_suggestions.cljs | 32 +----------- src/status_im/commands/handlers/jail.cljs | 6 ++- src/status_im/commands/handlers/loading.cljs | 3 -- src/status_im/commands/utils.cljs | 2 +- src/status_im/components/jail.cljs | 2 +- src/status_im/handlers.cljs | 1 + 16 files changed, 66 insertions(+), 132 deletions(-) create mode 100644 src/status_im/chat/constants.cljs delete mode 100644 src/status_im/chat/views/content_suggestions.cljs diff --git a/src/status_im/chat/constants.cljs b/src/status_im/chat/constants.cljs new file mode 100644 index 0000000000..e9d95a4ed9 --- /dev/null +++ b/src/status_im/chat/constants.cljs @@ -0,0 +1,6 @@ +(ns status-im.chat.constants) + +(def input-height 56) +(def request-info-height 61) +(def response-height-normal 211) +(def minimum-suggestion-height (+ input-height request-info-height)) diff --git a/src/status_im/chat/handlers.cljs b/src/status_im/chat/handlers.cljs index 451a4f32ec..c1627a957e 100644 --- a/src/status_im/chat/handlers.cljs +++ b/src/status_im/chat/handlers.cljs @@ -3,7 +3,6 @@ [status-im.models.commands :as commands] [clojure.string :as str] [status-im.components.styles :refer [default-chat-color]] - [status-im.chat.styles.response :refer [request-info-height response-height-normal]] [status-im.chat.suggestions :as suggestions] [status-im.protocol.api :as api] [status-im.models.messages :as messages] @@ -20,9 +19,7 @@ [status-im.utils.phone-number :refer [format-phone-number]] [status-im.utils.datetime :as time] [status-im.components.jail :as j] - [status-im.commands.utils :refer [generate-hiccup]] - [status-im.chat.handlers.animation :refer [update-response-height - get-response-height]])) + [status-im.commands.utils :refer [generate-hiccup]])) (register-handler :set-show-actions (fn [db [_ show-actions]] @@ -74,16 +71,12 @@ (fn [{:keys [current-chat-id] :as db} [_ content]] (as-> db db (commands/set-chat-command-content db content) - (assoc-in db [:chats current-chat-id :input-text] nil) - (if (commands/get-chat-command-to-msg-id db) - (update-response-height db) - db)))) + (assoc-in db [:chats current-chat-id :input-text] nil)))) (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] :as db} _] (let [commands (get-in db [:chats current-chat-id :commands]) @@ -123,7 +116,8 @@ (register-handler :set-response-chat-command [(after invoke-suggestions-handler!) (after #(dispatch [:command-edit-mode])) - (after #(dispatch [:animate-show-response]))] + ;(after #(dispatch [:animate-show-response])) + ] (fn [db [_ to-msg-id command-key]] (commands/set-response-chat-command db to-msg-id command-key))) @@ -304,7 +298,8 @@ (register-handler :set-chat-command [(after #(dispatch [:command-edit-mode])) - (after #(dispatch [:animate-show-response]))] + ;(after #(dispatch [:animate-show-response])) + ] (fn [db [_ command-key]] (commands/set-chat-command db command-key))) diff --git a/src/status_im/chat/handlers/animation.cljs b/src/status_im/chat/handlers/animation.cljs index 994a32e85f..2bd08c7a3b 100644 --- a/src/status_im/chat/handlers/animation.cljs +++ b/src/status_im/chat/handlers/animation.cljs @@ -1,14 +1,15 @@ (ns status-im.chat.handlers.animation - (:require [re-frame.core :refer [register-handler after dispatch]] + (:require [re-frame.core :refer [register-handler after dispatch debug]] [re-frame.middleware :refer [path]] [status-im.models.commands :as commands] [status-im.handlers.content-suggestions :refer [get-content-suggestions]] - [status-im.chat.styles.message-input :refer [input-height]] - [status-im.chat.styles.response :refer [request-info-height response-height-normal]] + [status-im.chat.constants :refer [input-height request-info-height + response-height-normal minimum-suggestion-height]] [status-im.chat.styles.response-suggestions :as response-suggestions-styles] [status-im.constants :refer [response-input-hiding-duration]])) -(def zero-height input-height) +;; todo magic value +(def middle-height 270) (defn animation-handler ([name handler] (animation-handler name nil handler)) @@ -19,25 +20,21 @@ (after #(dispatch [:text-edit-mode])) (fn [db _] (assoc db - :to-response-height zero-height + :to-response-height input-height :messages-offset 0))) -(defn get-response-height [db] - (let [command (commands/get-chat-command db) - text (commands/get-chat-command-content db) - suggestions (get-content-suggestions command text) - suggestions-height (reduce + 0 (map #(if (:header %) - response-suggestions-styles/header-height - response-suggestions-styles/suggestion-height) - suggestions))] - (+ zero-height +(defn get-response-height + [{:keys [current-chat-id] :as db}] + (let [suggestions (get-in db [:suggestions current-chat-id]) + suggestions-height (if suggestions middle-height 0)] + (+ input-height (min response-height-normal (+ suggestions-height request-info-height))))) (defn update-response-height [db] (assoc-in db [:animations :to-response-height] (get-response-height db))) (register-handler :animate-show-response - (after #(dispatch [:command-edit-mode])) + [(after #(dispatch [:command-edit-mode]))] (fn [db _] (-> db (assoc-in [:animations :messages-offset] request-info-height) @@ -54,26 +51,28 @@ db)))) (register-handler :fix-response-height - (fn [db [_ vy current]] + (fn [{:keys [current-chat-id] :as db} [_ vy current]] (let [max-height (get-in db [:animations :response-height-max]) - ;; todo magic value - middle 270 moving-down? (pos? vy) moving-up? (not moving-down?) - under-middle-position? (<= current middle) + under-middle-position? (<= current middle-height) over-middle-position? (not under-middle-position?) - min-height (+ zero-height request-info-height) - new-fixed (cond (and under-middle-position? moving-down?) - min-height + suggestions (get-in db [:suggestions current-chat-id]) + new-fixed (cond (not suggestions) + minimum-suggestion-height (and under-middle-position? moving-up?) - middle + middle-height (and over-middle-position? moving-down?) - middle + middle-height (and over-middle-position? moving-up?) - max-height)] + max-height + + (and under-middle-position? + moving-down?) + minimum-suggestion-height)] (-> db (assoc-in [:animations :to-response-height] new-fixed) (update-in [:animations :response-height-changed] inc))))) diff --git a/src/status_im/chat/screen.cljs b/src/status_im/chat/screen.cljs index 4927858f1e..f9394aeb5a 100644 --- a/src/status_im/chat/screen.cljs +++ b/src/status_im/chat/screen.cljs @@ -18,7 +18,6 @@ [status-im.components.invertible-scroll-view :refer [invertible-scroll-view]] [status-im.components.toolbar :refer [toolbar]] [status-im.chat.views.message :refer [chat-message]] - [status-im.chat.views.content-suggestions :refer [content-suggestions-view]] [status-im.chat.views.suggestions :refer [suggestions-view]] [status-im.chat.views.response :refer [response-view]] [status-im.chat.views.new-message :refer [chat-message-new]] diff --git a/src/status_im/chat/styles/message_input.cljs b/src/status_im/chat/styles/message_input.cljs index ccde0a7994..e999f749a9 100644 --- a/src/status_im/chat/styles/message_input.cljs +++ b/src/status_im/chat/styles/message_input.cljs @@ -1,8 +1,7 @@ (ns status-im.chat.styles.message-input (:require [status-im.components.styles :refer [color-white - color-blue]])) - -(def input-height 56) + color-blue]] + [status-im.chat.constants :refer [input-height]])) (def message-input-container {:flex 1 diff --git a/src/status_im/chat/styles/response.cljs b/src/status_im/chat/styles/response.cljs index 918bd28eec..8963f8a1fe 100644 --- a/src/status_im/chat/styles/response.cljs +++ b/src/status_im/chat/styles/response.cljs @@ -6,10 +6,8 @@ text2-color chat-background color-black]] - [status-im.chat.styles.message-input :refer [input-height]])) - -(def response-height-normal 211) -(def request-info-height 61) + [status-im.chat.constants :refer [input-height request-info-height + response-height-normal]])) (def drag-container {:height 16 diff --git a/src/status_im/chat/subs.cljs b/src/status_im/chat/subs.cljs index 36da63fe4f..20bcf239ce 100644 --- a/src/status_im/chat/subs.cljs +++ b/src/status_im/chat/subs.cljs @@ -1,15 +1,15 @@ (ns status-im.chat.subs (:require-macros [reagent.ratom :refer [reaction]]) - (:require [re-frame.core :refer [register-sub dispatch subscribe]] + (:require [re-frame.core :refer [register-sub dispatch subscribe path]] [status-im.db :as db] - ;todo handlers in subs?... [status-im.chat.suggestions :refer [get-suggestions typing-command?]] [status-im.models.commands :as commands] [status-im.constants :refer [response-suggesstion-resize-duration]] [status-im.handlers.content-suggestions :refer [get-content-suggestions]] [status-im.chat.views.plain-message :as plain-message] - [status-im.chat.views.command :as command])) + [status-im.chat.views.command :as command] + [status-im.chat.constants :as c])) (register-sub :chat-properties (fn [db [_ properties]] @@ -123,7 +123,7 @@ (reaction (get-in @db [:suggestions (:current-chat-id @db)])))) (register-sub :command? - (fn [db ] + (fn [db] (->> (get-in @db [:edit-mode (:current-chat-id @db)]) (= :command) (reaction)))) diff --git a/src/status_im/chat/views/content_suggestions.cljs b/src/status_im/chat/views/content_suggestions.cljs deleted file mode 100644 index d2eb8b63b4..0000000000 --- a/src/status_im/chat/views/content_suggestions.cljs +++ /dev/null @@ -1,34 +0,0 @@ -(ns status-im.chat.views.content-suggestions - (:require-macros [status-im.utils.views :refer [defview]]) - (:require [re-frame.core :refer [subscribe dispatch]] - [status-im.components.react :refer [view - icon - text - touchable-highlight - list-view - list-item]] - [status-im.chat.styles.content-suggestions :as st] - [status-im.utils.listview :refer [to-datasource]])) - -(defn set-command-content [content] - (dispatch [:set-chat-command-content content])) - -(defn suggestion-list-item [{:keys [value description]}] - [touchable-highlight {:onPress #(set-command-content value)} - [view st/suggestion-container - [view st/suggestion-sub-container - [text {:style st/value-text} value] - [text {:style st/description-text} description]]]]) - -(defn render-row [row _ _] - (list-item [suggestion-list-item row])) - -(defview content-suggestions-view [] - [suggestions [:get-content-suggestions]] - (when (seq suggestions) - [view st/container - [touchable-highlight {:style st/drag-down-touchable - ;; TODO hide suggestions? - :onPress (fn [])} - [view [icon :drag_down st/drag-down-icon]]] - suggestions])) diff --git a/src/status_im/chat/views/plain_message.cljs b/src/status_im/chat/views/plain_message.cljs index 69829dae14..f9abe83f25 100644 --- a/src/status_im/chat/views/plain_message.cljs +++ b/src/status_im/chat/views/plain_message.cljs @@ -24,15 +24,16 @@ (defn button-animation-logic [{:keys [command? val]}] (fn [_] (let [to-scale (if @command? 0 1)] - (anim/start (anim/spring val {:toValue to-scale}))))) + (anim/start (anim/spring val {:toValue to-scale + :tension 30}))))) (defn list-container [min] (fn [{:keys [command? width]}] (let [n-width (if @command? min 56) - delay (if @command? 100 0)] + delay (if @command? 100 0)] (anim/start (anim/timing width {:toValue n-width :duration response-input-hiding-duration - :delay delay}))))) + :delay delay}))))) (defn commands-button [] (let [command? (subscribe [:command?]) @@ -62,19 +63,20 @@ (fn [_] (let [to-scale (if @command? 0 1)] (when-not @command? (anim/set-value width 56)) - (anim/start (anim/spring val {:toValue to-scale}) + (anim/start (anim/spring val {:toValue to-scale + :tension 30}) (fn [e] (when (and @command? (.-finished e)) (anim/set-value width 0.1))))))) (defn smile-button [] - (let [command? (subscribe [:command?]) - buttons-scale (anim/create-value (if @command? 1 0)) + (let [command? (subscribe [:command?]) + buttons-scale (anim/create-value (if @command? 1 0)) container-width (anim/create-value (if @command? 0.1 56)) - context {:command? command? - :val buttons-scale - :width container-width} - on-update (smile-animation-logic context)] + context {:command? command? + :val buttons-scale + :width container-width} + on-update (smile-animation-logic context)] (r/create-class {:component-did-mount on-update diff --git a/src/status_im/chat/views/response.cljs b/src/status_im/chat/views/response.cljs index faec7629fe..a079ef805a 100644 --- a/src/status_im/chat/views/response.cljs +++ b/src/status_im/chat/views/response.cljs @@ -13,7 +13,6 @@ [status-im.components.drag-drop :as drag] [status-im.chat.views.response-suggestions :refer [response-suggestions-view]] [status-im.chat.styles.response :as st] - [status-im.chat.styles.message-input :refer [input-height]] [status-im.components.animation :as anim] [status-im.components.react :as react])) @@ -112,5 +111,4 @@ (let [response-height (anim/create-value 0)] [container response-height [request-info response-height] - [response-suggestions-view] - [view st/input-placeholder]])) + [response-suggestions-view]])) diff --git a/src/status_im/chat/views/response_suggestions.cljs b/src/status_im/chat/views/response_suggestions.cljs index bffe80175b..3c6f9b549d 100644 --- a/src/status_im/chat/views/response_suggestions.cljs +++ b/src/status_im/chat/views/response_suggestions.cljs @@ -1,35 +1,7 @@ (ns status-im.chat.views.response-suggestions (:require-macros [status-im.utils.views :refer [defview]]) - (:require [re-frame.core :refer [subscribe dispatch]] - [status-im.components.react :refer [view - icon - text - touchable-highlight - list-view - list-item]] - [status-im.chat.styles.response-suggestions :as st] - [status-im.utils.listview :refer [to-datasource]])) - -(defn set-command-content [content] - (dispatch [:set-chat-command-content content])) - -(defn header-list-item [{:keys [header]}] - [view st/header-container - [text {:style st/header-text} header]]) - -(defn suggestion-list-item [{:keys [value description]}] - [touchable-highlight {:onPress #(set-command-content value)} - [view st/suggestion-container - [view st/suggestion-sub-container - [text {:style st/value-text} value] - [text {:style st/description-text} description]]]]) - -(defn render-row [row _ _] - (list-item (if (:header row) - [header-list-item row] - [suggestion-list-item row]))) + (:require [re-frame.core :refer [subscribe dispatch]])) (defview response-suggestions-view [] [suggestions [:get-content-suggestions]] - (when (seq suggestions) - suggestions)) + (when (seq suggestions) suggestions)) diff --git a/src/status_im/commands/handlers/jail.cljs b/src/status_im/commands/handlers/jail.cljs index 2e45635869..07a041b01d 100644 --- a/src/status_im/commands/handlers/jail.cljs +++ b/src/status_im/commands/handlers/jail.cljs @@ -50,7 +50,7 @@ (defn command-preview [db [chat-id response-json]] (if-let [response (json->cljs response-json)] - (let [path [:chats chat-id :staged-commands] + (let [path [:chats chat-id :staged-commands] commands-cnt (count (get-in db path))] ;; todo (dec commands-cnt) looks like hack have to find better way to ;; do this @@ -63,6 +63,8 @@ (reg-handler ::render-command render-command) (reg-handler :command-handler! (u/side-effect! command-nadler!)) -(reg-handler :suggestions-handler suggestions-handler) +(reg-handler :suggestions-handler + (after #(dispatch [:animate-show-response])) + suggestions-handler) (reg-handler :suggestions-event! (u/side-effect! suggestions-events-handler!)) (reg-handler :command-preview command-preview) diff --git a/src/status_im/commands/handlers/loading.cljs b/src/status_im/commands/handlers/loading.cljs index 3f8ce95762..66ee37977d 100644 --- a/src/status_im/commands/handlers/loading.cljs +++ b/src/status_im/commands/handlers/loading.cljs @@ -55,9 +55,6 @@ ;; todo check #_(= (get-hash-by-identity db identity) (get-hash-by-file file))] - (println :hash - (get-hash-by-identity db identity) - (get-hash-by-file file)) (assoc db ::valid-hash valid?))) (defn add-commands diff --git a/src/status_im/commands/utils.cljs b/src/status_im/commands/utils.cljs index bf4639f5dc..1c07a5fe8e 100644 --- a/src/status_im/commands/utils.cljs +++ b/src/status_im/commands/utils.cljs @@ -45,4 +45,4 @@ (defn reg-handler ([name handler] (reg-handler name nil handler)) ([name middleware handler] - (register-handler name [debug trim-v middleware] handler))) + (register-handler name [#_debug trim-v middleware] handler))) diff --git a/src/status_im/components/jail.cljs b/src/status_im/components/jail.cljs index d58cf9e2c1..7efc67c13b 100644 --- a/src/status_im/components/jail.cljs +++ b/src/status_im/components/jail.cljs @@ -122,5 +122,5 @@ var status = { (.stringify js/JSON (clj->js data))) (defn call [chat-id path params callback] - (println :call chat-id (cljs->json path) (cljs->json params)) + ;(println :call chat-id (cljs->json path) (cljs->json params)) (.call jail chat-id (cljs->json path) (cljs->json params) callback)) diff --git a/src/status_im/handlers.cljs b/src/status_im/handlers.cljs index 6540a30948..f229403e07 100644 --- a/src/status_im/handlers.cljs +++ b/src/status_im/handlers.cljs @@ -9,6 +9,7 @@ [status-im.utils.crypt :refer [gen-random-bytes]] [status-im.utils.handlers :as u] status-im.chat.handlers + status-im.chat.handlers.animation status-im.group-settings.handlers status-im.navigation.handlers status-im.contacts.handlers