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
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[reagent.core :as r]
[status-im.components.react :refer [view text
image
touchable-highlight
linear-gradient
scroll-view
list-view
list-item]]
@ -14,7 +16,6 @@
[status-im.components.drawer.view :refer [drawer-view open-drawer]]
[status-im.components.icons.ionicons :refer [icon]]
[status-im.components.styles :refer [color-blue
flex
hamburger-icon
icon-search
create-icon
@ -32,20 +33,22 @@
:handler open-drawer}
:title (label :t/contacts)
:background-color toolbar-background2
:style {:elevation 0}
:action {:image {:source {:uri :icon_search}
:style icon-search}
:handler (fn [])}}])
(defview contact-list []
[contacts [:get-contacts]]
[drawer-view
[view st/contacts-list-container
[contact-list-toolbar]
[scroll-view {:style flex}
;; TODO not implemented: dapps and persons separation
(defn contact-group [contacts title group top?]
[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))]]
[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
;; about this?
(when contacts
@ -53,18 +56,27 @@
(for [contact (take 4 contacts)]
^{:key contact} [contact-view-2 contact])])
[view st/show-all
[touchable-highlight {:on-press #(dispatch [:show-group-contacts :dapps])}
[text {:style st/show-all-text} (label :show-all)]]]
[view st/contact-group
[text {:style st/contact-group-text} (label :contacs-group-people)]
[text {:style st/contact-group-size-text} (str (count contacts))]]
(when contacts
[view {:flexDirection :column}
(for [contact (take 4 contacts)]
^{:key contact} [contact-view-2 contact])])
[view st/show-all
[touchable-highlight {:on-press #(dispatch [:show-group-contacts :people])}
[text {:style st/show-all-text} (label :show-all)]]]]
[touchable-highlight {:on-press #(dispatch [:show-group-contacts group])}
[text {:style st/show-all-text} (label :show-all)]]]])
(defn contact-list []
(let [contacts (subscribe [:get-contacts])
show-toolbar-shadow? (r/atom false)]
(fn []
[drawer-view
[view st/contacts-list-container
[contact-list-toolbar]
[view {:style st/toolbar-shadow}
(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
:offsetY 16
:offsetX 16}
@ -73,4 +85,4 @@
:buttonColor :#9b59b6
:onPress #(dispatch [:navigate-to :new-contact])}
[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
:backgroundColor :white})
(def toolbar-shadow
{:height 2
:backgroundColor toolbar-background2})
(def contact-groups
{:flex 1
:backgroundColor toolbar-background2})
(def contacts-list
{:backgroundColor :white})
(def contact-group
{:flexDirection :column})
(def contact-group-header
{:flexDirection :column
:backgroundColor toolbar-background2})
(def contact-group-header-inner
{:flexDirection :row
:alignItems :center
:height 52
:height 48
:backgroundColor toolbar-background2})
(def contact-group-text
@ -36,10 +51,33 @@
:fontFamily font
: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
{:flexDirection :row
:alignItems :center
:height 56})
:height 56
:backgroundColor color-white})
(def show-all-text
{:marginLeft 72
@ -65,7 +103,8 @@
(def contact-container
{:flexDirection :row
:height 56})
:height 56
:backgroundColor color-white})
(def name-container
{:flex 1