fix tab bottom gradient

This commit is contained in:
Adrian Tiberius 2016-07-26 11:06:55 +03:00
parent 88fdbcc35b
commit 1d460333a1
6 changed files with 23 additions and 8 deletions

View File

@ -21,6 +21,7 @@
[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.bottom-gradient :refer [bottom-gradient]]
[status-im.components.tabs.styles :refer [tabs-height]])) [status-im.components.tabs.styles :refer [tabs-height]]))
(defview chats-list-toolbar [] (defview chats-list-toolbar []
@ -82,4 +83,5 @@
:buttonColor :#1abc9c :buttonColor :#1abc9c
:onPress #(dispatch [:show-group-new])} :onPress #(dispatch [:show-group-new])}
[icon {:name :person-stalker [icon {:name :person-stalker
:style st/person-stalker-icon}]]]]]))) :style st/person-stalker-icon}]]]]
[bottom-gradient]])))

View File

@ -0,0 +1,8 @@
(ns status-im.components.tabs.bottom-gradient
(:require [status-im.components.tabs.styles :as st]
[status-im.components.react :refer [linear-gradient]]))
(defn bottom-gradient []
[linear-gradient {:locations [0 0.8 1]
:colors ["rgba(24, 52, 76, 0)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"]
:style st/bottom-gradient}])

View File

@ -24,9 +24,12 @@
(- tabs-height) 0) (- tabs-height) 0)
:transform [{:translateY (if animation? offset-y 1)}]}) :transform [{:translateY (if animation? offset-y 1)}]})
(def top-gradient (def bottom-gradient
{:flexDirection :row {:position :absolute
:height 3}) :bottom 0
:left 0
:right 0
:height 4})
(def tabs-inner-container (def tabs-inner-container
{:flexDirection :row {:flexDirection :row

View File

@ -55,7 +55,5 @@
(defn tabs [{:keys [tab-list selected-view-id]}] (defn tabs [{:keys [tab-list selected-view-id]}]
[tabs-container [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 [view st/tabs-inner-container
(doall (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))]]) (doall (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))]])

View File

@ -20,6 +20,7 @@
icon-search icon-search
create-icon create-icon
toolbar-background2]] toolbar-background2]]
[status-im.components.tabs.bottom-gradient :refer [bottom-gradient]]
[status-im.contacts.styles :as st] [status-im.contacts.styles :as st]
[status-im.i18n :refer [label]])) [status-im.i18n :refer [label]]))
@ -97,4 +98,5 @@
:buttonColor :#9b59b6 :buttonColor :#9b59b6
:onPress #(dispatch [:navigate-to :new-contact])} :onPress #(dispatch [:navigate-to :new-contact])}
[icon {:name :android-create [icon {:name :android-create
:style create-icon}]]]]]))) :style create-icon}]]]]
[bottom-gradient]])))

View File

@ -10,6 +10,7 @@
[status-im.discovery.views.popular :refer [popular]] [status-im.discovery.views.popular :refer [popular]]
[status-im.discovery.views.recent :refer [discovery-recent]] [status-im.discovery.views.recent :refer [discovery-recent]]
[status-im.discovery.styles :as st] [status-im.discovery.styles :as st]
[status-im.components.tabs.bottom-gradient :refer [bottom-gradient]]
[status-im.i18n :refer [label]])) [status-im.i18n :refer [label]]))
(defn get-hashtags [status] (defn get-hashtags [status]
@ -50,4 +51,5 @@
[popular] [popular]
[view st/section-spacing [view st/section-spacing
[text {:style st/discovery-subtitle} (label :t/recent)]] [text {:style st/discovery-subtitle} (label :t/recent)]]
[discovery-recent]]]) [discovery-recent]]
[bottom-gradient]])