status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Input text and buttons animation 

Former-commit-id: 572fc0e554
This commit is contained in:
virvar 2016-06-01 14:09:25 +03:00
parent 516ad56a4e
commit 1b67a37877
6 changed files with 158 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/status_im/chat/handlers.cljs
View File

@ -49,23 +49,28 @@
(assoc-in [:chats current-chat-id :command-input] {}) (assoc-in [:chats current-chat-id :command-input] {})
(update-in [:chats current-chat-id :input-text] safe-trim)))) (update-in [:chats current-chat-id :input-text] safe-trim))))
(defn animate-cancel-command! [db] (defn animate-cancel-command! [{{:keys [response-suggestions-height
(let [height-anim-value (get-in db [:animations :response-suggestions-height]) message-input-buttons-scale
to-value 1] message-input-offset]} :animations}]
(anim/add-listener height-anim-value (let [height-to-value 1]
(anim/add-listener response-suggestions-height
(fn [val] (fn [val]
(when (<= (- to-value delta) (anim/value val) (+ to-value delta)) (when (<= (- height-to-value delta) (anim/value val) (+ height-to-value delta))
(anim/remove-all-listeners height-anim-value) (anim/remove-all-listeners response-suggestions-height)
(dispatch [:cancel-command])))) (dispatch [:cancel-command]))))
(anim/start (anim/spring height-anim-value {:toValue to-value (anim/start (anim/spring response-suggestions-height {:toValue height-to-value
:speed 10 :velocity 1
:bounciness 1})))) :tension 1
:friction 5}))
(anim/start (anim/timing message-input-buttons-scale {:toValue 1
:duration response-input-hiding-duration}))
(anim/start (anim/timing message-input-offset {:toValue 0
:duration response-input-hiding-duration}))))
(register-handler :start-cancel-command (register-handler :start-cancel-command
(after animate-cancel-command!) (after animate-cancel-command!)
(fn [db _] (fn [db _]
(let [current-chat-id (:current-chat-id db) (let [hiding? (get-in db [:animations :response-input-is-hiding?])]
hiding? (get-in db [:animations :response-input-is-hiding?])]
(if-not hiding? (if-not hiding?
(assoc-in db [:animations :response-input-is-hiding?] true) (assoc-in db [:animations :response-input-is-hiding?] true)
db)))) db))))
@ -85,8 +90,8 @@
anim-value (get-in db [:animations :response-suggestions-height])] anim-value (get-in db [:animations :response-suggestions-height])]
(anim/start (anim/start
(anim/spring anim-value {:toValue height (anim/spring anim-value {:toValue height
:speed 10 :speed 1
:bounciness 10}))))) :bounciness 0.2})))))
(register-handler :set-chat-command-content (register-handler :set-chat-command-content
(after update-response-suggestions-height!) (after update-response-suggestions-height!)
@ -109,10 +114,33 @@
:handler (:handler command)}] :handler (:handler command)}]
(commands/stage-command db command-info)))) (commands/stage-command db command-info))))
(register-handler :finish-show-response!
(fn [db _]
(assoc-in db [:animations :commands-input-is-switching?] false)))
(defn animate-show-response! [{{scale-anim-value :message-input-buttons-scale
offset-anim-value :message-input-offset} :animations}]
(let [to-value 0.1
delta 0.02]
(anim/add-listener scale-anim-value
(fn [val]
(when (<= (- to-value delta) (anim/value val) (+ to-value delta))
(anim/remove-all-listeners scale-anim-value)
(dispatch [:finish-show-response!]))))
(anim/start (anim/timing scale-anim-value {:toValue to-value
:duration response-input-hiding-duration}))
(anim/start (anim/timing offset-anim-value {:toValue -40
:duration response-input-hiding-duration}))))
(defn set-reponse-chat-command [db [_ to-msg-id command-key]]
(-> db
(commands/set-response-chat-command to-msg-id command-key)
(assoc-in [:animations :commands-input-is-switching?] true)))
(register-handler :set-response-chat-command (register-handler :set-response-chat-command
(after update-response-suggestions-height!) (-> set-reponse-chat-command
(fn [db [_ to-msg-id command-key]] ((after animate-show-response!))
(commands/set-response-chat-command db to-msg-id command-key))) ((after update-response-suggestions-height!))))
(defn update-text (defn update-text
[db [_ text]] [db [_ text]]

14
src/status_im/chat/styles/plain_input.cljs
View File

@ -12,12 +12,20 @@
:height 56 :height 56
:backgroundColor color-white}) :backgroundColor color-white})
(def switch-commands-touchable (def message-input-button-touchable
{:width 56 {:width 56
:height 56 :height 56
:alignItems :center :alignItems :center
:justifyContent :center}) :justifyContent :center})
(defn message-input-button [scale]
{:transform [{:scale scale}]})
(defn message-input-container [offset]
{:flex 1
:transform [{:translateX offset}]
:marginRight offset})
(def list-icon (def list-icon
{:width 13 {:width 13
:height 12}) :height 12})
@ -35,9 +43,7 @@
:color text2-color}) :color text2-color})
(def smile-icon (def smile-icon
{:marginTop 18 {:width 20
:marginRight 18
:width 20
:height 20}) :height 20})
(def send-icon (def send-icon

3
src/status_im/chat/styles/response.cljs
View File

@ -82,7 +82,8 @@
(def command-input (def command-input
{:flex 1 {:flex 1
:marginLeft 16 :marginLeft 56
:marginRight 16
:marginTop -2 :marginTop -2
:padding 0 :padding 0
:fontSize 14 :fontSize 14

122
src/status_im/chat/views/plain_input.cljs
View File

@ -2,6 +2,7 @@
(:require-macros [status-im.utils.views :refer [defview]]) (:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]] (:require [re-frame.core :refer [subscribe dispatch]]
[status-im.components.react :refer [view [status-im.components.react :refer [view
animated-view
icon icon
touchable-highlight touchable-highlight
text-input text-input
@ -31,67 +32,92 @@
(when (message-valid? staged-commands message) (when (message-valid? staged-commands message)
(send dismiss-keyboard))) (send dismiss-keyboard)))
(defn plain-message-input-view [{:keys [input-options validator]}] (defview commands-button [animation?]
(let [input-message (subscribe [:get-chat-input-text]) [typing-command? [:typing-command?]
command (subscribe [:get-chat-command]) buttons-scale [:get-in [:animations :message-input-buttons-scale]]]
to-msg-id (subscribe [:get-chat-command-to-msg-id]) [touchable-highlight {:disabled animation?
input-command (subscribe [:get-chat-command-content]) :on-press #(dispatch [:switch-command-suggestions])
staged-commands (subscribe [:get-chat-staged-commands]) :style st/message-input-button-touchable}
typing-command? (subscribe [:typing-command?])] [animated-view {:style (st/message-input-button buttons-scale)}
(fn [{:keys [input-options validator]}] (if typing-command?
(let [dismiss-keyboard (not (or command @typing-command?)) [icon :close-gray st/close-icon]
command @command [icon :list st/list-icon])]])
response? (and command @to-msg-id)]
(defview smile-button [animation?]
[buttons-scale [:get-in [:animations :message-input-buttons-scale]]]
[touchable-highlight {:disabled animation?
:on-press #(dispatch [:switch-command-suggestions])
:style st/message-input-button-touchable}
[animated-view {:style (st/message-input-button buttons-scale)}
[icon :smile st/smile-icon]]])
(defview message-input-container [input]
[message-input-offset [:get-in [:animations :message-input-offset]]]
[animated-view {:style (st/message-input-container message-input-offset)}
input])
(defview plain-message-input-view [{:keys [input-options validator]}]
[input-message [:get-chat-input-text]
command [:get-chat-command]
to-msg-id [:get-chat-command-to-msg-id]
input-command [:get-chat-command-content]
staged-commands [:get-chat-staged-commands]
typing-command? [:typing-command?]
response-input-is-hiding? [:get-in [:animations :response-input-is-hiding?]]
commands-button-is-switching? [:get-in [:animations :commands-input-is-switching?]]]
(let [dismiss-keyboard (not (or command typing-command?))
response? (and command to-msg-id)
message-input? (or (not command) response-input-is-hiding? commands-button-is-switching?)
animation? (or response-input-is-hiding? commands-button-is-switching?)]
[view st/input-container [view st/input-container
(cond (cond
response? [response/request-view] response? [response/request-view]
command [content-suggestions-view] command [content-suggestions-view]
:else [suggestions-view]) :else [suggestions-view])
[view st/input-view [view st/input-view
(if command (if message-input?
(when-not response? [commands-button animation?]
[command/command-icon command response?]) (when (and command (not response?))
[touchable-highlight {:on-press #(dispatch [:switch-command-suggestions]) [command/command-icon command response?]))
:style st/switch-commands-touchable} [message-input-container
[view nil
(if @typing-command?
[icon :close-gray st/close-icon]
[icon :list st/list-icon])]])
[text-input (merge {:style (cond [text-input (merge {:style (cond
message-input? st/message-input
response? st-response/command-input response? st-response/command-input
command st-command/command-input command st-command/command-input)
:else st/message-input)
:autoFocus false :autoFocus false
:blurOnSubmit dismiss-keyboard :blurOnSubmit dismiss-keyboard
:onChangeText (fn [text] :onChangeText (fn [text]
((if command ((if message-input?
command/set-input-message set-input-message
set-input-message) command/set-input-message)
text)) text))
:onSubmitEditing (fn [] :editable (not animation?)
(if command :onSubmitEditing #(if message-input?
(command/try-send @input-command validator) (try-send staged-commands
(try-send @staged-commands input-message
@input-message dismiss-keyboard)
dismiss-keyboard)))} (command/try-send input-command validator))}
input-options) input-options)
(if command (if message-input?
@input-command input-message
@input-message)] input-command)]]
;; TODO emoticons: not implemented ;; TODO emoticons: not implemented
(when (not command) (when message-input?
[icon :smile st/smile-icon]) [smile-button animation?])
(if command (if message-input?
(if (command/valid? @input-command validator) (when (message-valid? staged-commands input-message)
[touchable-highlight {:on-press command/send-command} [touchable-highlight {:disabled animation?
[view st/send-container [icon :send st/send-icon]]] :on-press #(try-send staged-commands
(when-not response? input-message
[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
dismiss-keyboard)} dismiss-keyboard)}
[view st/send-container [view st/send-container
[icon :send st/send-icon]]]))]])))) [icon :send st/send-icon]]])
(if (command/valid? input-command validator)
[touchable-highlight {:disabled animation?
:on-press command/send-command}
[view st/send-container [icon :send st/send-icon]]]
(when-not response?
[touchable-highlight {:disabled animation?
:on-press command/cancel-command-input}
[view st-command/cancel-container
[icon :close-gray st-command/cancel-icon]]])))]]))

2
src/status_im/constants.cljs
View File

@ -13,5 +13,5 @@
(def max-chat-name-length 20) (def max-chat-name-length 20)
(def response-input-hiding-duration 200) (def response-input-hiding-duration 300)
(def response-suggesstion-resize-duration 100) (def response-suggesstion-resize-duration 100)

3
src/status_im/db.cljs
View File

@ -33,6 +33,9 @@
:current-tag nil :current-tag nil
:disable-group-creation false :disable-group-creation false
:animations {;; mutable data :animations {;; mutable data
:message-input-offset (anim/create-value 0)
:message-input-buttons-scale (anim/create-value 1)
:commands-input-is-switching? false
:response-suggestions-height (anim/create-value 0) :response-suggestions-height (anim/create-value 0)
:response-input-is-hiding? false}}) :response-input-is-hiding? false}})