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

Grey action bar. Hide navbar on chat list scroll.

This commit is contained in:
virvar 2016-06-15 16:41:08 +03:00
parent 7459b63251
commit 9ed4cc03e3
3 changed files with 76 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
(ns status-im.chats-list.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]]
[status-im.components.react :refer [list-view
list-item
@ -13,33 +14,55 @@
action-button-item]]
[status-im.components.drawer.view :refer [drawer-view open-drawer]]
[status-im.components.styles :refer [color-blue
toolbar-background1
toolbar-background2]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.icons.ionicons :refer [icon]]
[status-im.i18n :refer [label]]
[status-im.chats-list.styles :as st]))
[status-im.chats-list.styles :as st]
[status-im.components.tabs.styles :refer [tabs-height]]))
(defn chats-list-toolbar []
(defview chats-list-toolbar []
[chats-scrolled? [:get :chats-scrolled?]]
[toolbar {:nav-action {:image {:source {:uri :icon_hamburger}
:style st/hamburger-icon}
:handler open-drawer}
:title (label :t/chats)
:background-color toolbar-background2
:background-color (if chats-scrolled?
toolbar-background1
toolbar-background2)
;; TODO implement search
:action {:image {:source {:uri :icon_search}
:style st/search-icon}
:handler (fn [])}}])
(defn chats-list []
(let [chats (subscribe [:get :chats])]
(let [chats (subscribe [:get :chats])
chat-scrolled? (subscribe [:get :chats-scrolled?])
container-height (r/atom 0)
content-height (r/atom 0)]
(dispatch [:set :chats-scrolled? false])
(fn []
[drawer-view
[view st/chats-container
[chats-list-toolbar]
[list-view {:dataSource (to-datasource @chats)
:renderRow (fn [row _ _]
(list-item [chat-list-item row]))
:style st/list-container}]
[list-view {:dataSource (to-datasource @chats)
:renderRow (fn [row _ _]
(list-item [chat-list-item row]))
:style st/list-container
;;; if "maximazing" chat list will make scroll to 0,
;;; then disable maximazing
:onLayout (fn [event]
(when-not @chat-scrolled?
(let [height (.. event -nativeEvent -layout -height)]
(reset! container-height height))))
:onContentSizeChange (fn [width height]
(reset! content-height height))
:onScroll (fn [e]
(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}

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

@ -10,21 +10,19 @@
text2-color
toolbar-background1]]))
(def tabs-height 59)
(def tab-height 56)
(def tabs
{:flex 1
:position :absolute
:bottom 0
:right 0
:left 0
})
(defn tabs-container [offset-y]
{:height tabs-height
:backgroundColor color-white
:marginBottom offset-y})
(def top-gradient
{:flexDirection :row
:height 3})
(def tabs-container
(def tabs-inner-container
{:flexDirection :row
:height tab-height
:opacity 1
@ -55,10 +53,9 @@
:alignItems :center})
(defn tab-view-container [offset-x]
{:flex 1
:position :absolute
{:position :absolute
:top 0
:left 0
:right 0
:bottom tab-height
:bottom 0
:transform [{:translateX offset-x}]})

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

@ -2,6 +2,7 @@
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view
animated-view
text-input
text
image
@ -9,7 +10,8 @@
linear-gradient]]
[reagent.core :as r]
[status-im.components.tabs.styles :as st]
[status-im.components.tabs.tab :refer [tab]]))
[status-im.components.tabs.tab :refer [tab]]
[status-im.components.animation :as anim]))
(defn create-tab [index data selected-view-id]
(let [data (merge data {:key index
@ -17,10 +19,37 @@
:selected-view-id selected-view-id})]
[tab data]))
(defview tabs [{:keys [style tab-list selected-view-id]}]
(let [style (merge st/tabs style)]
[view {:style style}
[linear-gradient {:colors ["rgba(24, 52, 76, 0.01)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"]
:style st/top-gradient}]
[view st/tabs-container
(doall (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))]]))
(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))))))
(defn tabs-container [& children]
(let [chats-scrolled? (subscribe [:get :chats-scrolled?])
anim-value (anim/create-value 0)
context {:hidden? chats-scrolled?
:val anim-value}
on-update (animation-logic context)]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:reagent-render
(fn [& children]
@chats-scrolled?
(into [animated-view {:style (st/tabs-container anim-value)
:pointerEvents (if @chats-scrolled? :none :auto)}]
children))})))
(defn tabs [{:keys [tab-list selected-view-id]}]
[tabs-container
[linear-gradient {:colors ["rgba(24, 52, 76, 0.01)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"]
:style st/top-gradient}]
[view st/tabs-inner-container
(doall (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))]])