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

Add shadows

This commit is contained in:
virvar 2016-06-20 12:21:57 +03:00
parent e223fcbf9e
commit 383602200e
2 changed files with 99 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/status_im/contacts/screen.cljs
View File

@ -1,9 +1,11 @@
(ns status-im.contacts.screen (ns status-im.contacts.screen
(: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]]
[reagent.core :as r]
[status-im.components.react :refer [view text [status-im.components.react :refer [view text
image image
touchable-highlight touchable-highlight
linear-gradient
scroll-view scroll-view
list-view list-view
list-item]] list-item]]
@ -14,7 +16,6 @@
[status-im.components.drawer.view :refer [drawer-view open-drawer]] [status-im.components.drawer.view :refer [drawer-view open-drawer]]
[status-im.components.icons.ionicons :refer [icon]] [status-im.components.icons.ionicons :refer [icon]]
[status-im.components.styles :refer [color-blue [status-im.components.styles :refer [color-blue
flex
hamburger-icon hamburger-icon
icon-search icon-search
create-icon create-icon
@ -32,20 +33,22 @@
:handler open-drawer} :handler open-drawer}
:title (label :t/contacts) :title (label :t/contacts)
:background-color toolbar-background2 :background-color toolbar-background2
:style {:elevation 0}
:action {:image {:source {:uri :icon_search} :action {:image {:source {:uri :icon_search}
:style icon-search} :style icon-search}
:handler (fn [])}}]) :handler (fn [])}}])
(defview contact-list [] (defn contact-group [contacts title group top?]
[contacts [:get-contacts]]
[drawer-view
[view st/contacts-list-container
[contact-list-toolbar]
[scroll-view {:style flex}
;; TODO not implemented: dapps and persons separation
[view st/contact-group [view st/contact-group
[text {:style st/contact-group-text} (label :contacs-group-dapps)] [view st/contact-group-header
(when-not top?
[linear-gradient {:style st/contact-group-header-gradient-top
:colors st/contact-group-header-gradient-top-colors}])
[view st/contact-group-header-inner
[text {:style st/contact-group-text} title]
[text {:style st/contact-group-size-text} (str (count contacts))]] [text {:style st/contact-group-size-text} (str (count contacts))]]
[linear-gradient {:style st/contact-group-header-gradient-bottom
:colors st/contact-group-header-gradient-bottom-colors}]]
;; todo what if there is no contacts, should we show some information ;; todo what if there is no contacts, should we show some information
;; about this? ;; about this?
(when contacts (when contacts
@ -53,18 +56,27 @@
(for [contact (take 4 contacts)] (for [contact (take 4 contacts)]
^{:key contact} [contact-view-2 contact])]) ^{:key contact} [contact-view-2 contact])])
[view st/show-all [view st/show-all
[touchable-highlight {:on-press #(dispatch [:show-group-contacts :dapps])} [touchable-highlight {:on-press #(dispatch [:show-group-contacts group])}
[text {:style st/show-all-text} (label :show-all)]]] [text {:style st/show-all-text} (label :show-all)]]]])
[view st/contact-group
[text {:style st/contact-group-text} (label :contacs-group-people)] (defn contact-list []
[text {:style st/contact-group-size-text} (str (count contacts))]] (let [contacts (subscribe [:get-contacts])
(when contacts show-toolbar-shadow? (r/atom false)]
[view {:flexDirection :column} (fn []
(for [contact (take 4 contacts)] [drawer-view
^{:key contact} [contact-view-2 contact])]) [view st/contacts-list-container
[view st/show-all [contact-list-toolbar]
[touchable-highlight {:on-press #(dispatch [:show-group-contacts :people])} [view {:style st/toolbar-shadow}
[text {:style st/show-all-text} (label :show-all)]]]] (when @show-toolbar-shadow?
[linear-gradient {:style st/contact-group-header-gradient-bottom
:colors st/contact-group-header-gradient-bottom-colors}])]
[scroll-view {:style st/contact-groups
:onScroll (fn [e]
(let [offset (.. e -nativeEvent -contentOffset -y)]
(reset! show-toolbar-shadow? (<= st/contact-group-header-height offset))))}
;; TODO not implemented: dapps and persons separation
[contact-group @contacts (label :contacs-group-dapps) :dapps true]
[contact-group @contacts (label :contacs-group-people) :people false]]
[action-button {:buttonColor color-blue [action-button {:buttonColor color-blue
:offsetY 16 :offsetY 16
:offsetX 16} :offsetX 16}
@ -73,4 +85,4 @@
: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}]]]]])))

45
src/status_im/contacts/styles.cljs
View File

@ -14,13 +14,28 @@
{:flex 1 {:flex 1
:backgroundColor :white}) :backgroundColor :white})
(def toolbar-shadow
{:height 2
:backgroundColor toolbar-background2})
(def contact-groups
{:flex 1
:backgroundColor toolbar-background2})
(def contacts-list (def contacts-list
{:backgroundColor :white}) {:backgroundColor :white})
(def contact-group (def contact-group
{:flexDirection :column})
(def contact-group-header
{:flexDirection :column
:backgroundColor toolbar-background2})
(def contact-group-header-inner
{:flexDirection :row {:flexDirection :row
:alignItems :center :alignItems :center
:height 52 :height 48
:backgroundColor toolbar-background2}) :backgroundColor toolbar-background2})
(def contact-group-text (def contact-group-text
@ -36,10 +51,33 @@
:fontFamily font :fontFamily font
:color text2-color}) :color text2-color})
(def contact-group-header-gradient-top
{:flexDirection :row
:height 3
:backgroundColor toolbar-background2})
(def contact-group-header-gradient-top-colors
["rgba(24, 52, 76, 0.165)"
"rgba(24, 52, 76, 0.03)"
"rgba(24, 52, 76, 0.01)"])
(def contact-group-header-gradient-bottom
{:flexDirection :row
:height 2
:backgroundColor toolbar-background2})
(def contact-group-header-gradient-bottom-colors
["rgba(24, 52, 76, 0.01)"
"rgba(24, 52, 76, 0.05)"])
(def contact-group-header-height (+ (:height contact-group-header-inner)
(:height contact-group-header-gradient-bottom)))
(def show-all (def show-all
{:flexDirection :row {:flexDirection :row
:alignItems :center :alignItems :center
:height 56}) :height 56
:backgroundColor color-white})
(def show-all-text (def show-all-text
{:marginLeft 72 {:marginLeft 72
@ -65,7 +103,8 @@
(def contact-container (def contact-container
{:flexDirection :row {:flexDirection :row
:height 56}) :height 56
:backgroundColor color-white})
(def name-container (def name-container
{:flex 1 {:flex 1