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

Improve tabs bar animation 

Former-commit-id: 8622859c3a
This commit is contained in:
virvar 2016-06-16 12:44:56 +03:00
parent b9e3e213a1
commit 8bb880429a
5 changed files with 58 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/status_im/chats_list/screen.cljs
View File

@ -4,6 +4,7 @@
[status-im.components.react :refer [list-view
list-item
view
animated-view
text
image
touchable-highlight]]
@ -38,7 +39,9 @@
(defn chats-list []
(let [chats (subscribe [:get :chats])
chat-scrolled? (subscribe [:get :chats-scrolled?])
chats-scrolled? (subscribe [:get :chats-scrolled?])
animation? (subscribe [:animations :tabs-bar-animation?])
tabs-bar-value (subscribe [:animations :tabs-bar-value])
container-height (r/atom 0)
content-height (r/atom 0)]
(dispatch [:set :chats-scrolled? false])
@ -53,7 +56,7 @@
;;; if "maximazing" chat list will make scroll to 0,
;;; then disable maximazing
:onLayout (fn [event]
(when-not @chat-scrolled?
(when-not @chats-scrolled?
(let [height (.. event -nativeEvent -layout -height)]
(reset! container-height height))))
:onContentSizeChange (fn [width height]
@ -62,19 +65,22 @@
(let [offset (.. e -nativeEvent -contentOffset -y)
min-content-height (+ @container-height tabs-height)
scrolled? (and (< 0 offset) (< min-content-height @content-height))]
(dispatch [:set :chats-scrolled? scrolled?])))}]
[action-button {:buttonColor color-blue
:offsetY 16
:offsetX 16}
[action-button-item
{:title (label :t/new-chat)
:buttonColor :#9b59b6
:onPress #(dispatch [:navigate-to :contact-list])}
[icon {:name :android-create
:style st/create-icon}]]
[action-button-item
{:title (label :t/new-group-chat)
:buttonColor :#1abc9c
:onPress #(dispatch [:show-group-new])}
[icon {:name :person-stalker
:style st/person-stalker-icon}]]]]])))
(dispatch [:set :chats-scrolled? scrolled?])
(dispatch [:set-animation :tabs-bar-animation? true])))}]
[animated-view {:style (st/action-buttons-container @animation? (or @tabs-bar-value 0))
:pointerEvents :box-none}
[action-button {:buttonColor color-blue
:offsetY 16
:offsetX 16}
[action-button-item
{:title (label :t/new-chat)
:buttonColor :#9b59b6
:onPress #(dispatch [:navigate-to :contact-list])}
[icon {:name :android-create
:style st/create-icon}]]
[action-button-item
{:title (label :t/new-group-chat)
:buttonColor :#1abc9c
:onPress #(dispatch [:show-group-new])}
[icon {:name :person-stalker
:style st/person-stalker-icon}]]]]]])))

11
src/status_im/chats_list/styles.cljs
View File

@ -6,7 +6,8 @@
online-color
text1-color
text2-color
new-messages-count-color]]))
new-messages-count-color]]
[status-im.components.tabs.styles :refer [tabs-height]]))
(def chat-container
{:flexDirection :row
@ -113,3 +114,11 @@
{:fontSize 20
:height 22
:color :white})
(defn action-buttons-container [animation? offset-y]
{:position :absolute
:left 0
:right 0
:top 0
:bottom 0
:transform [{:translateY (if animation? offset-y 1)}]})

6
src/status_im/components/tabs/styles.cljs
View File

@ -13,10 +13,12 @@
(def tabs-height 59)
(def tab-height 56)
(defn tabs-container [offset-y]
(defn tabs-container [hidden? animation? offset-y]
{:height tabs-height
:backgroundColor color-white
:marginBottom offset-y})
:marginBottom (if (or hidden? animation?)
(- tabs-height) 0)
:transform [{:translateY (if animation? offset-y 1)}]})
(def top-gradient
{:flexDirection :row

30
src/status_im/components/tabs/tabs.cljs
View File

@ -20,21 +20,27 @@
[tab data]))
(defn animation-logic [{:keys [hidden? val]}]
(fn [_]
(let [to-value (if @hidden? (- st/tab-height) 0)]
(anim/start
(anim/timing val {:toValue to-value
:duration 300})
(fn [e]
(when-not (.-finished e)
nil))))))
(let [was-hidden? (atom (not @hidden?))]
(fn [_]
(when (not= @was-hidden? @hidden?)
(let [to-value (if @hidden? 0 (- st/tabs-height))]
(swap! was-hidden? not)
(anim/start
(anim/timing val {:toValue to-value
:duration 300})
(fn [e]
;; if to-value was changed, then new animation has started
(when (= to-value (if @hidden? 0 (- st/tabs-height)))
(dispatch [:set-animation :tabs-bar-animation? false])))))))))
(defn tabs-container [& children]
(let [chats-scrolled? (subscribe [:get :chats-scrolled?])
anim-value (anim/create-value 0)
context {:hidden? chats-scrolled?
:val anim-value}
animation? (subscribe [:animations :tabs-bar-animation?])
tabs-bar-value (subscribe [:animations :tabs-bar-value])
context {:hidden? chats-scrolled?
:val @tabs-bar-value}
on-update (animation-logic context)]
(anim/set-value @tabs-bar-value 0)
(r/create-class
{:component-did-mount
on-update
@ -43,7 +49,7 @@
:reagent-render
(fn [& children]
@chats-scrolled?
(into [animated-view {:style (st/tabs-container anim-value)
(into [animated-view {:style (st/tabs-container @chats-scrolled? @animation? @tabs-bar-value)
:pointerEvents (if @chats-scrolled? :none :auto)}]
children))})))

3
src/status_im/db.cljs
View File

@ -44,7 +44,8 @@
:message-input-buttons-scale 1
:messages-offset 0
:commands-input-is-switching? false
:response-resize? false}})
:response-resize? false
:tabs-bar-value (anim/create-value 0)}})
(def protocol-initialized-path [:protocol-initialized])
(defn chat-input-text-path [chat-id]