status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.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 [status-im.components.react :refer [list-view
list-item list-item
view view
animated-view
text text
image image
touchable-highlight]] touchable-highlight]]
@ -38,7 +39,9 @@
(defn chats-list [] (defn chats-list []
(let [chats (subscribe [:get :chats]) (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) container-height (r/atom 0)
content-height (r/atom 0)] content-height (r/atom 0)]
(dispatch [:set :chats-scrolled? false]) (dispatch [:set :chats-scrolled? false])
@ -53,7 +56,7 @@
;;; if "maximazing" chat list will make scroll to 0, ;;; if "maximazing" chat list will make scroll to 0,
;;; then disable maximazing ;;; then disable maximazing
:onLayout (fn [event] :onLayout (fn [event]
(when-not @chat-scrolled? (when-not @chats-scrolled?
(let [height (.. event -nativeEvent -layout -height)] (let [height (.. event -nativeEvent -layout -height)]
(reset! container-height height)))) (reset! container-height height))))
:onContentSizeChange (fn [width height] :onContentSizeChange (fn [width height]
@ -62,19 +65,22 @@
(let [offset (.. e -nativeEvent -contentOffset -y) (let [offset (.. e -nativeEvent -contentOffset -y)
min-content-height (+ @container-height tabs-height) min-content-height (+ @container-height tabs-height)
scrolled? (and (< 0 offset) (< min-content-height @content-height))] scrolled? (and (< 0 offset) (< min-content-height @content-height))]
(dispatch [:set :chats-scrolled? scrolled?])))}] (dispatch [:set :chats-scrolled? scrolled?])
[action-button {:buttonColor color-blue (dispatch [:set-animation :tabs-bar-animation? true])))}]
:offsetY 16 [animated-view {:style (st/action-buttons-container @animation? (or @tabs-bar-value 0))
:offsetX 16} :pointerEvents :box-none}
[action-button-item [action-button {:buttonColor color-blue
{:title (label :t/new-chat) :offsetY 16
:buttonColor :#9b59b6 :offsetX 16}
:onPress #(dispatch [:navigate-to :contact-list])} [action-button-item
[icon {:name :android-create {:title (label :t/new-chat)
:style st/create-icon}]] :buttonColor :#9b59b6
[action-button-item :onPress #(dispatch [:navigate-to :contact-list])}
{:title (label :t/new-group-chat) [icon {:name :android-create
:buttonColor :#1abc9c :style st/create-icon}]]
:onPress #(dispatch [:show-group-new])} [action-button-item
[icon {:name :person-stalker {:title (label :t/new-group-chat)
:style st/person-stalker-icon}]]]]]))) :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 online-color
text1-color text1-color
text2-color text2-color
new-messages-count-color]])) new-messages-count-color]]
[status-im.components.tabs.styles :refer [tabs-height]]))
(def chat-container (def chat-container
{:flexDirection :row {:flexDirection :row
@ -113,3 +114,11 @@
{:fontSize 20 {:fontSize 20
:height 22 :height 22
:color :white}) :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 tabs-height 59)
(def tab-height 56) (def tab-height 56)
(defn tabs-container [offset-y] (defn tabs-container [hidden? animation? offset-y]
{:height tabs-height {:height tabs-height
:backgroundColor color-white :backgroundColor color-white
:marginBottom offset-y}) :marginBottom (if (or hidden? animation?)
(- tabs-height) 0)
:transform [{:translateY (if animation? offset-y 1)}]})
(def top-gradient (def top-gradient
{:flexDirection :row {:flexDirection :row

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

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

3
src/status_im/db.cljs
View File

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