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

Chats/Discover/Contacts tabs menu animation iOS (#488)

This commit is contained in:
Alexander Pantyukhov 2016-11-23 15:02:24 +03:00 committed by Roman Volosovskyi
parent 4c876587ed
commit 730bbc4cb3
3 changed files with 19 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/status_im/components/main_tabs.cljs
View File

@ -20,9 +20,8 @@
[status-im.components.tabs.tabs :refer [tabs]]
[status-im.components.tabs.styles :as st]
[status-im.components.styles :as common-st]
[status-im.i18n :refer [label]]))
(def window-width (:width (get-dimensions "window")))
[status-im.i18n :refer [label]]
[taoensso.timbre :as log]))
(def tab-list
[{:view-id :chat-list
@ -71,17 +70,20 @@
n (get-tab-index view-id)]
(- n p)))
(defn on-scroll-end [swiped?]
(defn on-scroll-end [swiped? dragging?]
(fn [_ state]
(let [{:strs [index]} (js->clj state)]
(reset! swiped? true)
(dispatch [:navigate-to-tab (index->tab index)]))))
(when @dragging?
(reset! dragging? false)
(let [{:strs [index]} (js->clj state)]
(reset! swiped? true)
(dispatch [:navigate-to-tab (index->tab index)])))))
(defn main-tabs []
(let [view-id (subscribe [:get :view-id])
prev-view-id (subscribe [:get :prev-view-id])
main-swiper (atom nil)
swiped? (atom false)]
main-swiper (r/atom nil)
swiped? (r/atom false)
dragging? (r/atom false)]
(r/create-class
{:component-will-update
(fn []
@ -102,7 +104,8 @@
{:index (get-tab-index @view-id)
:loop false
:ref #(reset! main-swiper %)
:on-momentum-scroll-end (on-scroll-end swiped?)})
:onScrollBeginDrag #(reset! dragging? true)
:on-momentum-scroll-end (on-scroll-end swiped? dragging?)})
[chats-list]
[discovery]
[contact-list]]

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

@ -4,16 +4,15 @@
(def tabs-height 60)
(def tab-height 58)
(defn tabs-container [hidden? animation? offset-y]
(defn tabs-container [hidden?]
{:position :absolute
:bottom 0
:left 0
:right 0
:height tabs-height
:backgroundColor color-white
:marginBottom (if (or hidden? animation?)
(- tabs-height) 0)
:transform [{:translateY (if animation? offset-y 1)}]})
:marginBottom (if hidden? (- tabs-height) 0)
:transform [{:translateY 1}]})
(def bottom-gradient
{:position :absolute

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

@ -28,15 +28,10 @@
(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])))))))))
:duration 300})))))))
(defn tabs-container [& children]
(let [chats-scrolled? (subscribe [:get :chats-scrolled?])
animation? (subscribe [:animations :tabs-bar-animation?])
tabs-bar-value (subscribe [:animations :tabs-bar-value])
context {:hidden? chats-scrolled?
:val @tabs-bar-value}
@ -50,11 +45,11 @@
:reagent-render
(fn [& children]
@chats-scrolled?
(into [animated-view {:style (st/tabs-container @chats-scrolled? @animation? @tabs-bar-value)
(into [animated-view {:style (st/tabs-container @chats-scrolled?)
:pointerEvents (if @chats-scrolled? :none :auto)}]
children))})))
(defn tabs [{:keys [tab-list selected-view-id prev-view-id]}]
(defn tabs [{:keys [tab-list selected-view-id prev-view-id swiper]}]
[tabs-container
[view st/tabs-inner-container
(doall (map-indexed #(create-tab %1 %2 selected-view-id prev-view-id) tab-list))]])