status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-14 10:46:21 +00:00
Code Issues Projects Releases Wiki Activity

another attempt

Browse Source
This commit is contained in:
Roman Volosovskyi 2016-06-20 01:20:48 +03:00
parent 7459b63251
commit 5e7df10c76
12 changed files with 171 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,9 +48,7 @@
(register-handler :start-cancel-command (register-handler :start-cancel-command
(u/side-effect! (u/side-effect!
(fn [db _] (fn [db _]
(if (commands/get-chat-command-to-msg-id db) (dispatch [:animate-cancel-command]))))
(dispatch [:animate-cancel-command])
(dispatch [:cancel-command])))))
(defn animate-set-chat-command-content [db _] (defn animate-set-chat-command-content [db _]
(when (commands/get-chat-command-to-msg-id db) (when (commands/get-chat-command-to-msg-id db)
@ -78,7 +76,9 @@
command-info {:command command command-info {:command command
:content content :content content
:handler (:handler command)}] :handler (:handler command)}]
(commands/stage-command db command-info)))) (-> db
(assoc-in [:chats current-chat-id :command-input :command] nil)
(commands/stage-command command-info)))))
(register-handler :set-message-input [] (register-handler :set-message-input []
(fn [db [_ input]] (fn [db [_ input]]

65
src/status_im/chat/handlers/animation.cljs
View File

@ -15,20 +15,12 @@
([name middleware handler] ([name middleware handler]
(register-handler name [(path :animations) middleware] handler))) (register-handler name [(path :animations) middleware] handler)))
(animation-handler :finish-animate-cancel-command
(fn [db _]
(assoc db :commands-input-is-switching? false)))
(animation-handler :animate-cancel-command (animation-handler :animate-cancel-command
(fn [db _] (fn [db _]
(if-not (:commands-input-is-switching? db) (assoc db
(assoc db :command? false
:commands-input-is-switching? true :to-response-height zero-height
:message-input-buttons-scale 1 :messages-offset 0)))
:message-input-offset 0
:to-response-height zero-height
:messages-offset 0)
db)))
(animation-handler :finish-animate-response-resize (animation-handler :finish-animate-response-resize
(fn [db _] (fn [db _]
@ -58,18 +50,12 @@
(defn update-response-height [db] (defn update-response-height [db]
(assoc-in db [:animations :to-response-height] (get-response-height db))) (assoc-in db [:animations :to-response-height] (get-response-height db)))
(animation-handler :finish-show-response
(fn [db _]
(assoc db :commands-input-is-switching? false)))
(register-handler :animate-show-response (register-handler :animate-show-response
(after #(dispatch [:animate-response-resize])) (after #(dispatch [:animate-response-resize]))
(fn [db _] (fn [db _]
(-> db (-> db
(assoc-in [:animations :commands-input-is-switching?] true)
(assoc-in [:animations :response-height-current] zero-height) (assoc-in [:animations :response-height-current] zero-height)
(assoc-in [:animations :message-input-buttons-scale] 0.1) (assoc-in [:animations :command?] true)
(assoc-in [:animations :message-input-offset] -40)
(assoc-in [:animations :messages-offset] request-info-height) (assoc-in [:animations :messages-offset] request-info-height)
(update-response-height)))) (update-response-height))))
@ -91,21 +77,26 @@
:response-resize? false)))) :response-resize? false))))
(register-handler :fix-response-height (register-handler :fix-response-height
(fn [db _] (fn [db [_ dy vy current]]
(if (and (commands/get-chat-command-to-msg-id db) (let [max-height (get-in db [:animations :response-height-max])
(not (get-in db [:animations :commands-input-is-switching?]))) ;; todo magic value
(let [current (get-in db [:animations :response-height-current]) middle 270
normal-height response-height-normal moving-down? (pos? vy)
command (commands/get-chat-command db) moving-up? (not moving-down?)
text (commands/get-chat-command-content db) under-middle-position? (<= current middle)
suggestions (get-content-suggestions command text) over-middle-position? (not under-middle-position?)
max-height (get-in db [:animations :response-height-max]) min-height (+ zero-height request-info-height)
delta (/ normal-height 2) new-fixed (cond (and under-middle-position? moving-down?)
new-fixed (cond min-height
(or (<= current (+ zero-height delta))
(empty? suggestions)) (+ zero-height request-info-height) (and under-middle-position? moving-up?)
(<= current (+ zero-height normal-height delta)) (get-response-height db) middle
:else max-height)]
(dispatch [:animate-response-resize]) (and over-middle-position? moving-down?)
(assoc-in db [:animations :to-response-height] new-fixed)) middle
db)))
(and over-middle-position? moving-up?)
max-height)]
(-> db
(assoc-in [:animations :to-response-height] new-fixed)
(update-in [:animations :response-height-changed] inc)))))

5
src/status_im/chat/styles/message_input.cljs
View File

@ -4,10 +4,9 @@
(def input-height 56) (def input-height 56)
(defn message-input-container [offset] (def message-input-container
{:flex 1 {:flex 1
:transform [{:translateX offset}] :marginRight 0})
:marginRight offset})
(def input-container (def input-container
{:flexDirection :column}) {:flexDirection :column})

4
src/status_im/chat/styles/plain_message.cljs
View File

@ -2,8 +2,8 @@
(:require [status-im.components.styles :refer [font (:require [status-im.components.styles :refer [font
text2-color]])) text2-color]]))
(def message-input-button-touchable (defn message-input-button-touchable [w]
{:width 56 {:width w
:height 56 :height 56
:alignItems :center :alignItems :center
:justifyContent :center}) :justifyContent :center})

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

@ -87,7 +87,6 @@
(def command-input (def command-input
{:flex 1 {:flex 1
:marginLeft 56
:marginRight 16 :marginRight 16
:marginTop -2 :marginTop -2
:padding 0 :padding 0

6
src/status_im/chat/views/command.cljs
View File

@ -31,9 +31,7 @@
[view (st/command-text-container command) [view (st/command-text-container command)
[text {:style st/command-text} (:text command)]]) [text {:style st/command-text} (:text command)]])
(defview cancel-button [] (defn cancel-button []
[commands-input-is-switching? [:animations :commands-input-is-switching?]] [touchable-highlight {:on-press cancel-command-input}
[touchable-highlight {:disabled commands-input-is-switching?
:on-press cancel-command-input}
[view st/cancel-container [view st/cancel-container
[icon :close-gray st/cancel-icon]]]) [icon :close-gray st/cancel-icon]]])

108
src/status_im/chat/views/message_input.cljs
View File

@ -18,10 +18,8 @@
[status-im.chat.styles.response :as st-response] [status-im.chat.styles.response :as st-response]
[status-im.constants :refer [response-input-hiding-duration]])) [status-im.constants :refer [response-input-hiding-duration]]))
(defview send-button [{:keys [on-press accessibility-label]}] (defn send-button [{:keys [on-press accessibility-label]}]
[commands-input-is-switching? [:animations :commands-input-is-switching?]] [touchable-highlight {:on-press on-press
[touchable-highlight {:disabled commands-input-is-switching?
:on-press on-press
:accessibility-label accessibility-label} :accessibility-label accessibility-label}
[view st/send-container [view st/send-container
[icon :send st/send-icon]]]) [icon :send st/send-icon]]])
@ -36,61 +34,42 @@
(dispatch [:set-animation ::message-input-offset-current to-value]))))))) (dispatch [:set-animation ::message-input-offset-current to-value])))))))
(defn message-input-container [input] (defn message-input-container [input]
(let [to-message-input-offset (subscribe [:animations :message-input-offset]) [view st/message-input-container input])
cur-message-input-offset (subscribe [:animations ::message-input-offset-current])
message-input-offset (anim/create-value (or @cur-message-input-offset 0))
context {:to-value to-message-input-offset
:val message-input-offset}
on-update (animation-logic context)]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:reagent-render
(fn [input]
@to-message-input-offset
[animated-view {:style (st/message-input-container message-input-offset)}
input])})))
(defview message-input [input-options validator] (defview message-input [input-options validator]
[input-message [:get-chat-input-text] [input-message [:get-chat-input-text]
command [:get-chat-command] command [:get-chat-command]
to-msg-id [:get-chat-command-to-msg-id] to-msg-id [:get-chat-command-to-msg-id]
input-command [:get-chat-command-content] input-command [:get-chat-command-content]
staged-commands [:get-chat-staged-commands] staged-commands [:get-chat-staged-commands]
typing-command? [:typing-command?] typing-command? [:typing-command?]]
commands-input-is-switching? [:animations :commands-input-is-switching?]] (let [dismiss-keyboard (not (or command typing-command?))
(let [dismiss-keyboard (not (or command typing-command?)) response? (and command to-msg-id)
response? (and command to-msg-id) message-input? (not command)]
message-input? (or (not command) commands-input-is-switching?) [text-input (merge {:style (cond
animation? commands-input-is-switching?] message-input? st-message/message-input
[text-input (merge {:style (cond response? st-response/command-input
message-input? st-message/message-input command st-command/command-input)
response? st-response/command-input :ref (fn [input]
command st-command/command-input) (dispatch [:set-message-input input]))
:ref (fn [input] :autoFocus false
(dispatch [:set-message-input input])) :blurOnSubmit dismiss-keyboard
:autoFocus false :onChangeText (fn [text]
:blurOnSubmit dismiss-keyboard ((if message-input?
:onChangeText (fn [text] plain-message/set-input-message
(when-not animation? command/set-input-message)
((if message-input? text))
plain-message/set-input-message :onSubmitEditing #(if message-input?
command/set-input-message) (plain-message/try-send staged-commands
text))) input-message
:onSubmitEditing #(when-not animation? dismiss-keyboard)
(if message-input? (command/try-send input-command validator))}
(plain-message/try-send staged-commands (when command
input-message {:accessibility-label :command-input})
dismiss-keyboard) input-options)
(command/try-send input-command validator)))} (if message-input?
(when command input-message
{:accessibility-label :command-input}) input-command)]))
input-options)
(if message-input?
input-message
input-command)]))
(defview plain-message-input-view [{:keys [input-options validator]}] (defview plain-message-input-view [{:keys [input-options validator]}]
[input-message [:get-chat-input-text] [input-message [:get-chat-input-text]
@ -98,22 +77,17 @@
to-msg-id [:get-chat-command-to-msg-id] to-msg-id [:get-chat-command-to-msg-id]
input-command [:get-chat-command-content] input-command [:get-chat-command-content]
staged-commands [:get-chat-staged-commands] staged-commands [:get-chat-staged-commands]
typing-command? [:typing-command?] typing-command? [:typing-command?]]
commands-input-is-switching? [:animations :commands-input-is-switching?]]
(let [dismiss-keyboard (not (or command typing-command?)) (let [dismiss-keyboard (not (or command typing-command?))
response? (and command to-msg-id) response? (and command to-msg-id)
message-input? (or (not command) commands-input-is-switching?)] message-input? (not command)]
[view st/input-container [view st/input-container
[view st/input-view [view st/input-view
(if message-input? [plain-message/commands-button]
[plain-message/commands-button]
(when (and command (not response?))
[command/command-icon command response?]))
[message-input-container [message-input-container
[message-input input-options validator]] [message-input input-options validator]]
;; TODO emoticons: not implemented ;; TODO emoticons: not implemented
(when message-input? [plain-message/smile-button]
[plain-message/smile-button])
(if message-input? (if message-input?
(when (plain-message/message-valid? staged-commands input-message) (when (plain-message/message-valid? staged-commands input-message)
[send-button {:on-press #(plain-message/try-send staged-commands [send-button {:on-press #(plain-message/try-send staged-commands

100
src/status_im/chat/views/plain_message.cljs
View File

@ -33,39 +33,29 @@
(.clear message-input) (.clear message-input)
(.focus message-input))) (.focus message-input)))
(defn commands-button-animation-callback [message-input] (defn button-animation-logic [{:keys [command? val]}]
(fn [arg to-value]
(when (.-finished arg)
(dispatch [:set-animation ::message-input-buttons-scale-current to-value])
(when (<= to-value 0.1)
(dispatch [:finish-show-response])
(prepare-message-input @message-input)))))
(defn button-animation-logic [{:keys [to-value val callback]}]
(fn [_] (fn [_]
(let [to-scale @to-value (let [to-scale (if @command? 0 1)]
minimum 0.1 (anim/start (anim/spring val {:toValue to-scale})))))
scale (cond (< 1 to-scale) 1
(< to-scale minimum) minimum (defn list-container [min]
:else to-scale)] (fn [{:keys [command? width]}]
(anim/start (anim/timing val {:toValue scale (let [n-width (if @command? min 56)
:duration response-input-hiding-duration}) delay (if @command? 100 0)]
(when callback (anim/start (anim/timing width {:toValue n-width
(fn [arg] :duration response-input-hiding-duration
(callback arg to-scale))))))) :delay delay})))))
(defn commands-button [] (defn commands-button []
(let [typing-command? (subscribe [:typing-command?]) (let [command? (subscribe [:animations :command?])
message-input (subscribe [:get :message-input]) buttons-scale (anim/create-value (if @command? 1 0))
animation? (subscribe [:animations :commands-input-is-switching?]) container-width (anim/create-value (if @command? 20 56))
to-scale (subscribe [:animations :message-input-buttons-scale]) context {:command? command?
cur-scale (subscribe [:animations ::message-input-buttons-scale-current]) :val buttons-scale
buttons-scale (anim/create-value (or @cur-scale 1)) :width container-width}
anim-callback (commands-button-animation-callback message-input) on-update (fn [_]
context {:to-value to-scale ((button-animation-logic context))
:val buttons-scale ((list-container 20) context))]
:callback anim-callback}
on-update (button-animation-logic context)]
(r/create-class (r/create-class
{:component-did-mount {:component-did-mount
on-update on-update
@ -73,24 +63,30 @@
on-update on-update
:reagent-render :reagent-render
(fn [] (fn []
(let [typing-command? @typing-command?] [touchable-highlight {:on-press #(dispatch [:switch-command-suggestions])
@to-scale :disabled @command?}
[touchable-highlight {:disabled @animation? [animated-view {:style (st/message-input-button-touchable
:on-press #(dispatch [:switch-command-suggestions]) container-width)}
:style st/message-input-button-touchable} [animated-view {:style (st/message-input-button buttons-scale)}
[animated-view {:style (st/message-input-button buttons-scale)} [icon :list st/list-icon]]]])})))
(if typing-command?
[icon :close-gray st/close-icon] (defn smile-animation-logic [{:keys [command? val width]}]
[icon :list st/list-icon])]]))}))) (fn [_]
(let [to-scale (if @command? 0 1)]
(when-not @command? (anim/set-value width 56))
(anim/start (anim/spring val {:toValue to-scale})
(fn []
(when @command?
(anim/set-value width 0.1)))))))
(defn smile-button [] (defn smile-button []
(let [animation? (subscribe [:animations :commands-input-is-switching?]) (let [command? (subscribe [:animations :command?])
to-scale (subscribe [:animations :message-input-buttons-scale]) buttons-scale (anim/create-value (if @command? 1 0))
cur-scale (subscribe [:animations ::message-input-buttons-scale-current]) container-width (anim/create-value (if @command? 0.1 56))
buttons-scale (anim/create-value (or @cur-scale 1)) context {:command? command?
context {:to-value to-scale :val buttons-scale
:val buttons-scale} :width container-width}
on-update (button-animation-logic context)] on-update (smile-animation-logic context)]
(r/create-class (r/create-class
{:component-did-mount {:component-did-mount
on-update on-update
@ -98,11 +94,11 @@
on-update on-update
:reagent-render :reagent-render
(fn [] (fn []
@to-scale [touchable-highlight {:on-press (fn []
[touchable-highlight {:disabled @animation?
:on-press (fn []
;; TODO emoticons: not implemented ;; TODO emoticons: not implemented
) )
:style st/message-input-button-touchable} :disabled @command?}
[animated-view {:style (st/message-input-button buttons-scale)} [animated-view {:style (st/message-input-button-touchable
[icon :smile st/smile-icon]]])}))) container-width)}
[animated-view {:style (st/message-input-button buttons-scale)}
[icon :smile st/smile-icon]]]])})))

80
src/status_im/chat/views/response.cljs
View File

@ -14,7 +14,8 @@
[status-im.chat.views.response-suggestions :refer [response-suggestions-view]] [status-im.chat.views.response-suggestions :refer [response-suggestions-view]]
[status-im.chat.styles.response :as st] [status-im.chat.styles.response :as st]
[status-im.chat.styles.message-input :refer [input-height]] [status-im.chat.styles.message-input :refer [input-height]]
[status-im.components.animation :as anim])) [status-im.components.animation :as anim]
[status-im.components.react :as react]))
(defn drag-icon [] (defn drag-icon []
[view st/drag-container [view st/drag-container
@ -33,17 +34,25 @@
;; TODO stub data: request message info ;; TODO stub data: request message info
"By ???, MMM 1st at HH:mm"]]) "By ???, MMM 1st at HH:mm"]])
(defn create-response-pan-responder [] (defn create-response-pan-responder [response-height]
(drag/create-pan-responder (drag/create-pan-responder
{:on-move (fn [e gesture] {:on-move (fn [_ gesture]
(dispatch [:on-drag-response (.-dy gesture)])) (when (> (Math/abs (.-dy gesture)) 10)
:on-release (fn [e gesture] (let [to-value (- (:height (react/get-dimensions "window"))
(dispatch [:fix-response-height]))})) (.-moveY gesture))]
(anim/start
(anim/spring response-height {:toValue to-value})))))
:on-release (fn [_ gesture]
(when (> (Math/abs (.-dy gesture)) 10)
(dispatch [:fix-response-height
(.-dy gesture)
(.-vy gesture)
(.-_value response-height)])))}))
(defn request-info [] (defn request-info [response-height]
(let [pan-responder (create-response-pan-responder) (let [pan-responder (create-response-pan-responder response-height)
command (subscribe [:get-chat-command])] command (subscribe [:get-chat-command])]
(fn [] (fn [response-height]
[view (merge (drag/pan-handlers pan-responder) [view (merge (drag/pan-handlers pan-responder)
{:style (st/request-info (:color @command))}) {:style (st/request-info (:color @command))})
[drag-icon] [drag-icon]
@ -54,46 +63,33 @@
[view st/cancel-container [view st/cancel-container
[icon :close-white st/cancel-icon]]]]]))) [icon :close-white st/cancel-icon]]]]])))
(defn container-animation-logic [{:keys [animation? to-value current-value val]}] (defn container-animation-logic [{:keys [to-value val]}]
(fn [_] (fn [_]
(if @animation? (let [to-value @to-value]
(let [to-value @to-value] (anim/start (anim/spring val {:toValue to-value})))))
(anim/start (anim/spring val {:toValue to-value})
(fn [arg]
(when (.-finished arg)
(dispatch [:set-animation :response-height-current to-value])
(dispatch [:finish-animate-response-resize])
(when (= to-value input-height)
(dispatch [:finish-animate-cancel-command])
(dispatch [:cancel-command]))))))
(anim/set-value val @current-value))))
(defn container [& children] (defn container [response-height & children]
(let [commands-input-is-switching? (subscribe [:animations :commands-input-is-switching?]) (let [;; todo to-response-height, cur-response-height must be specific
response-resize? (subscribe [:animations :response-resize?]) ;; for each chat
to-response-height (subscribe [:animations :to-response-height]) to-response-height (subscribe [:animations :to-response-height])
cur-response-height (subscribe [:animations :response-height-current]) changed (subscribe [:animations :response-height-changed])
response-height (anim/create-value (or @cur-response-height 0)) context {:to-value to-response-height
context {:animation? (reaction (or @commands-input-is-switching? @response-resize?)) :val response-height}
:to-value to-response-height on-update (container-animation-logic context)]
:current-value cur-response-height
:val response-height}
on-update (container-animation-logic context)]
(r/create-class (r/create-class
{:component-did-mount {:component-did-mount
on-update on-update
:component-did-update :component-did-update
on-update on-update
:reagent-render :reagent-render
(fn [& children] (fn [response-height & children]
@to-response-height @to-response-height @changed
(into [animated-view {:style (st/response-view (if (or @commands-input-is-switching? @response-resize?) (into [animated-view {:style (st/response-view response-height)}]
response-height
(or @cur-response-height 0)))}]
children))}))) children))})))
(defn response-view [] (defn response-view []
[container (let [response-height (anim/create-value 0)]
[request-info] [container response-height
[response-suggestions-view] [request-info response-height]
[view st/input-placeholder]]) [response-suggestions-view]
[view st/input-placeholder]]))

3
src/status_im/components/animation.cljs
View File

@ -11,6 +11,9 @@
(defn spring [anim-value config] (defn spring [anim-value config]
(.spring animated anim-value (clj->js config))) (.spring animated anim-value (clj->js config)))
(defn decay [anim-value config]
(.decay animated anim-value (clj->js config)))
(defn anim-sequence [animations] (defn anim-sequence [animations]
(.sequence animated (clj->js animations))) (.sequence animated (clj->js animations)))

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 300) (def response-input-hiding-duration 100)
(def response-suggesstion-resize-duration 100) (def response-suggesstion-resize-duration 100)

7
src/status_im/db.cljs
View File

@ -37,13 +37,10 @@
:whisper-identity "" :whisper-identity ""
:phone-number ""} :phone-number ""}
:disable-group-creation false :disable-group-creation false
:animations {;; mutable data :animations {:to-response-height nil
:to-response-height nil
:response-height-current nil :response-height-current nil
:message-input-offset 0 :command? false
:message-input-buttons-scale 1
:messages-offset 0 :messages-offset 0
:commands-input-is-switching? false
:response-resize? false}}) :response-resize? false}})
(def protocol-initialized-path [:protocol-initialized]) (def protocol-initialized-path [:protocol-initialized])