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

adapt animation

This commit is contained in:
Roman Volosovskyi 2016-06-23 15:47:58 +03:00
parent dd3eb3c0eb
commit 831132ccef
16 changed files with 66 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/status_im/chat/constants.cljs Normal file
View File

@ -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))

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

@ -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)))

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

@ -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)))))

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

@ -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]]

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

@ -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

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

@ -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

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

@ -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))))

34
src/status_im/chat/views/content_suggestions.cljs
View File

@ -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]))

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

@ -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

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

@ -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]]))

32
src/status_im/chat/views/response_suggestions.cljs
View File

@ -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))

6
src/status_im/commands/handlers/jail.cljs
View File

@ -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)

3
src/status_im/commands/handlers/loading.cljs
View File

@ -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

2
src/status_im/commands/utils.cljs
View File

@ -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)))

2
src/status_im/components/jail.cljs
View File

@ -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))

1
src/status_im/handlers.cljs
View File

@ -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