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

Fix response suggestions: 

Fix scrolling messages when response view is shown.
Empty suggestions can't be fully opened.
Fix UI delays after animation.
Code improvements.
This commit is contained in:
virvar 2016-06-06 15:05:35 +03:00
parent 161be555b5
commit a7e694cb46
7 changed files with 95 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,11 +48,11 @@
(update-in [:chats current-chat-id :input-text] safe-trim))))
(register-handler :start-cancel-command
(u/side-effect!
(fn [db _]
(if (commands/get-chat-command-to-msg-id db)
(dispatch [:animate-cancel-command])
(dispatch [:cancel-command #(dispatch [:cancel-command])]))
db))
(dispatch [:cancel-command])))))
(register-handler :set-chat-command-content
(fn [{:keys [current-chat-id] :as db} [_ content]]
@ -79,8 +79,8 @@
(commands/stage-command db command-info))))
(register-handler :set-response-chat-command
(after #(dispatch [:animate-show-response]))
(fn [db [_ to-msg-id command-key]]
(dispatch [:animate-show-response])
(commands/set-response-chat-command db to-msg-id command-key)))
(defn update-text

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

@ -1,5 +1,6 @@
(ns status-im.chat.handlers.animation
(:require [re-frame.core :refer [register-handler after dispatch]]
[re-frame.middleware :refer [path]]
[status-im.models.commands :as commands]
[status-im.handlers.content-suggestions :refer [get-content-suggestions]]
[status-im.chat.styles.plain-input :refer [input-height]]
@ -14,16 +15,16 @@
(assoc-in db [:animations :commands-input-is-switching?] false)))
(register-handler :animate-cancel-command
(path :animations)
(fn [db _]
(let [hiding? (get-in db [:animations :commands-input-is-switching?])]
(if-not hiding?
(-> db
(assoc-in [:animations :commands-input-is-switching?] true)
(assoc-in [:animations :message-input-buttons-scale] 1)
(assoc-in [:animations :message-input-offset] 0)
(assoc-in [:animations :to-response-height] zero-height)
(assoc-in [:animations :messages-offset] 0))
db))))
(if-not (:commands-input-is-switching? db)
(assoc db
:commands-input-is-switching? true
:message-input-buttons-scale 1
:message-input-offset 0
:to-response-height zero-height
:messages-offset 0)
db)))
(register-handler :finish-animate-response-resize
(fn [db _]
@ -71,22 +72,39 @@
(register-handler :set-response-max-height
(fn [db [_ height]]
(assoc-in db [:animations :response-height-max] height)))
(let [prev-height (get-in db [:animations :response-height-max])]
(if (not= height prev-height)
(let [db (assoc-in db [:animations :response-height-max] height)]
(if (= prev-height (get-in db [:animations :to-response-height]))
(-> db
(assoc-in [:animations :to-response-height] height)
(assoc-in [:animations :response-height-current] height))
db))
db))))
(register-handler :on-drag-response
(fn [db [_ dy]]
(let [fixed (get-in db [:animations :to-response-height])]
(assoc-in db [:animations :response-height-current] (- fixed dy)))))
(-> db
(assoc-in [:animations :response-height-current] (- fixed dy))
(assoc-in [:animations :response-resize?] false)))))
(register-handler :fix-response-height
(fn [db _]
(if (and (commands/get-chat-command-to-msg-id db)
(not (get-in db [:animations :commands-input-is-switching?])))
(let [current (get-in db [:animations :response-height-current])
normal-height response-height-normal
command (commands/get-chat-command db)
text (commands/get-chat-command-content db)
suggestions (get-content-suggestions command text)
max-height (get-in db [:animations :response-height-max])
delta (/ normal-height 2)
new-fixed (cond
(<= current (+ zero-height delta)) (+ zero-height request-info-height)
(or (<= current (+ zero-height delta))
(empty? suggestions)) (+ zero-height request-info-height)
(<= current (+ zero-height normal-height delta)) (get-response-height db)
:else max-height)]
(dispatch [:animate-response-resize])
(assoc-in db [:animations :to-response-height] new-fixed))))
(assoc-in db [:animations :to-response-height] new-fixed))
db)))

5
src/status_im/chat/screen.cljs
View File

@ -260,7 +260,10 @@
show-actions-atom [:show-actions]
command [:get-chat-command]
to-msg-id [:get-chat-command-to-msg-id]]
[view st/chat-view
[view {:style st/chat-view
:onLayout (fn [event]
(let [height (.. event -nativeEvent -layout -height)]
(dispatch [:set-response-max-height height])))}
[chat-toolbar]
[messages-container
[messages-view group-chat]]

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

@ -51,21 +51,15 @@
:opacity 0.69
:color color-white})
(def container
(defn response-view [height]
{:flexDirection :column
:justifyContent :flex-end
:position :absolute
:left 0
:right 0
:top 0
:bottom 0
:backgroundColor :transparent
:elevation 2})
(defn response-view [height]
{:flexDirection :column
:height height
:backgroundColor color-white})
:backgroundColor color-white
:elevation 2})
(def input-placeholder
{:height input-height})

3
src/status_im/chat/views/new_message.cljs
View File

@ -18,6 +18,7 @@
(defn show-input [command]
[plain-message-input-view
(when command
(case (:command command)
:phone {:input-options {:keyboardType :phone-pad}
:validator valid-mobile-number?}
@ -25,7 +26,7 @@
:confirmation-code {:input-options {:keyboardType :numeric}}
:money {:input-options {:keyboardType :numeric}}
:request {:input-options {:keyboardType :numeric}}
nil)])
(throw (js/Error. "Uknown command type"))))])
(defn chat-message-new []
(let [command-atom (subscribe [:get-chat-command])

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

@ -33,18 +33,28 @@
;; TODO stub data: request message info
"By ???, MMM 1st at HH:mm"]])
(defview request-info []
[command [:get-chat-command]]
[view (st/request-info (:color command))
(defn create-response-pan-responder []
(drag/create-pan-responder
{:on-move (fn [e gesture]
(dispatch [:on-drag-response (.-dy gesture)]))
:on-release (fn [e gesture]
(dispatch [:fix-response-height]))}))
(defn request-info []
(let [pan-responder (create-response-pan-responder)
command (subscribe [:get-chat-command])]
(fn []
[view (merge (drag/pan-handlers pan-responder)
{:style (st/request-info (:color @command))})
[drag-icon]
[view st/inner-container
[command-icon nil]
[info-container command]
[info-container @command]
[touchable-highlight {:on-press #(dispatch [:start-cancel-command])}
[view st/cancel-container
[icon :close-white st/cancel-icon]]]]])
[icon :close-white st/cancel-icon]]]]])))
(defn inner-container-animation-logic [{:keys [animation? to-value current-value val]}]
(defn container-animation-logic [{:keys [animation? to-value current-value val]}]
(fn [_]
(if @animation?
(let [to-value @to-value]
@ -58,16 +68,8 @@
(dispatch [:cancel-command]))))))
(anim/set-value val @current-value))))
(defn create-response-pan-responder []
(drag/create-pan-responder
{:on-move (fn [e gesture]
(dispatch [:on-drag-response (.-dy gesture)]))
:on-release (fn [e gesture]
(dispatch [:fix-response-height]))}))
(defn inner-container [content]
(let [pan-responder (create-response-pan-responder)
commands-input-is-switching? (subscribe [:get-in [:animations :commands-input-is-switching?]])
(defn container [& children]
(let [commands-input-is-switching? (subscribe [:get-in [:animations :commands-input-is-switching?]])
response-resize? (subscribe [:get-in [:animations :response-resize?]])
to-response-height (subscribe [:get-in [:animations :to-response-height]])
cur-response-height (subscribe [:get-in [:animations :response-height-current]])
@ -76,28 +78,22 @@
:to-value to-response-height
:current-value cur-response-height
:val response-height}
on-update (inner-container-animation-logic context)]
on-update (container-animation-logic context)]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:reagent-render
(fn [content]
(fn [& children]
@to-response-height
[animated-view (merge (drag/pan-handlers pan-responder)
{:style (st/response-view (if (or @commands-input-is-switching? @response-resize?)
(into [animated-view {:style (st/response-view (if (or @commands-input-is-switching? @response-resize?)
response-height
(or @cur-response-height 0)))})
content])})))
(or @cur-response-height 0)))}]
children))})))
(defn response-view []
[view {:style st/container
:onLayout (fn [event]
(let [height (.. event -nativeEvent -layout -height)]
(dispatch [:set-response-max-height height])))}
[inner-container
[view
[container
[request-info]
[response-suggestions-view]
[view st/input-placeholder]]]])
[view st/input-placeholder]])

2
src/status_im/new_group/screen.cljs
View File

@ -33,7 +33,7 @@
(defview group-name-input []
[group-name [:get :new-chat-name]
validation-messages [:new-chat-name-validation-messages]]
[view nil
[view
[text-input
{:underlineColorAndroid color-purple
:style st/group-name-input