Grey action bar. Hide navbar on chat list scroll.

Former-commit-id: 9ed4cc03e3
This commit is contained in:
virvar 2016-06-15 16:41:08 +03:00
parent 65d93b5e2a
commit b9e3e213a1
3 changed files with 76 additions and 27 deletions

View File

@ -1,4 +1,5 @@
(ns status-im.chats-list.screen (ns status-im.chats-list.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]] (:require [re-frame.core :refer [subscribe dispatch]]
[status-im.components.react :refer [list-view [status-im.components.react :refer [list-view
list-item list-item
@ -13,33 +14,55 @@
action-button-item]] action-button-item]]
[status-im.components.drawer.view :refer [drawer-view open-drawer]] [status-im.components.drawer.view :refer [drawer-view open-drawer]]
[status-im.components.styles :refer [color-blue [status-im.components.styles :refer [color-blue
toolbar-background1
toolbar-background2]] toolbar-background2]]
[status-im.components.toolbar :refer [toolbar]] [status-im.components.toolbar :refer [toolbar]]
[status-im.components.icons.ionicons :refer [icon]] [status-im.components.icons.ionicons :refer [icon]]
[status-im.i18n :refer [label]] [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} [toolbar {:nav-action {:image {:source {:uri :icon_hamburger}
:style st/hamburger-icon} :style st/hamburger-icon}
:handler open-drawer} :handler open-drawer}
:title (label :t/chats) :title (label :t/chats)
:background-color toolbar-background2 :background-color (if chats-scrolled?
toolbar-background1
toolbar-background2)
;; TODO implement search ;; TODO implement search
:action {:image {:source {:uri :icon_search} :action {:image {:source {:uri :icon_search}
:style st/search-icon} :style st/search-icon}
:handler (fn [])}}]) :handler (fn [])}}])
(defn chats-list [] (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 [] (fn []
[drawer-view [drawer-view
[view st/chats-container [view st/chats-container
[chats-list-toolbar] [chats-list-toolbar]
[list-view {:dataSource (to-datasource @chats) [list-view {:dataSource (to-datasource @chats)
:renderRow (fn [row _ _] :renderRow (fn [row _ _]
(list-item [chat-list-item row])) (list-item [chat-list-item row]))
:style st/list-container}] :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 [action-button {:buttonColor color-blue
:offsetY 16 :offsetY 16
:offsetX 16} :offsetX 16}

View File

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

View File

@ -2,6 +2,7 @@
(:require-macros [status-im.utils.views :refer [defview]]) (:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view [status-im.components.react :refer [view
animated-view
text-input text-input
text text
image image
@ -9,7 +10,8 @@
linear-gradient]] linear-gradient]]
[reagent.core :as r] [reagent.core :as r]
[status-im.components.tabs.styles :as st] [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] (defn create-tab [index data selected-view-id]
(let [data (merge data {:key index (let [data (merge data {:key index
@ -17,10 +19,37 @@
:selected-view-id selected-view-id})] :selected-view-id selected-view-id})]
[tab data])) [tab data]))
(defview tabs [{:keys [style tab-list selected-view-id]}] (defn animation-logic [{:keys [hidden? val]}]
(let [style (merge st/tabs style)] (fn [_]
[view {:style style} (let [to-value (if @hidden? (- st/tab-height) 0)]
[linear-gradient {:colors ["rgba(24, 52, 76, 0.01)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"] (anim/start
:style st/top-gradient}] (anim/timing val {:toValue to-value
[view st/tabs-container :duration 300})
(doall (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))]])) (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))]])