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

96
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
@ -27,50 +28,61 @@
(list-item [contact-view-2 row])) (list-item [contact-view-2 row]))
(defn contact-list-toolbar [] (defn contact-list-toolbar []
[toolbar {:nav-action {:image {:source {:uri :icon_hamburger} [toolbar {:nav-action {:image {:source {:uri :icon_hamburger}
:style hamburger-icon} :style hamburger-icon}
: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]] [view st/contact-group
[drawer-view [view st/contact-group-header
[view st/contacts-list-container (when-not top?
[contact-list-toolbar] [linear-gradient {:style st/contact-group-header-gradient-top
[scroll-view {:style flex} :colors st/contact-group-header-gradient-top-colors}])
;; TODO not implemented: dapps and persons separation [view st/contact-group-header-inner
[view st/contact-group [text {:style st/contact-group-text} title]
[text {:style st/contact-group-text} (label :contacs-group-dapps)] [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
;; todo what if there is no contacts, should we show some information :colors st/contact-group-header-gradient-bottom-colors}]]
;; about this? ;; todo what if there is no contacts, should we show some information
(when contacts ;; about this?
[view {:flexDirection :column} (when contacts
(for [contact (take 4 contacts)] [view {:flexDirection :column}
^{:key contact} [contact-view-2 contact])]) (for [contact (take 4 contacts)]
[view st/show-all ^{:key contact} [contact-view-2 contact])])
[touchable-highlight {:on-press #(dispatch [:show-group-contacts :dapps])} [view st/show-all
[text {:style st/show-all-text} (label :show-all)]]] [touchable-highlight {:on-press #(dispatch [:show-group-contacts group])}
[view st/contact-group [text {:style st/show-all-text} (label :show-all)]]]])
[text {:style st/contact-group-text} (label :contacs-group-people)]
[text {:style st/contact-group-size-text} (str (count contacts))]] (defn contact-list []
(when contacts (let [contacts (subscribe [:get-contacts])
[view {:flexDirection :column} show-toolbar-shadow? (r/atom false)]
(for [contact (take 4 contacts)] (fn []
^{:key contact} [contact-view-2 contact])]) [drawer-view
[view st/show-all [view st/contacts-list-container
[touchable-highlight {:on-press #(dispatch [:show-group-contacts :people])} [contact-list-toolbar]
[text {:style st/show-all-text} (label :show-all)]]]] [view {:style st/toolbar-shadow}
[action-button {:buttonColor color-blue (when @show-toolbar-shadow?
:offsetY 16 [linear-gradient {:style st/contact-group-header-gradient-bottom
:offsetX 16} :colors st/contact-group-header-gradient-bottom-colors}])]
[action-button-item [scroll-view {:style st/contact-groups
{:title (label :t/new-contact) :onScroll (fn [e]
:buttonColor :#9b59b6 (let [offset (.. e -nativeEvent -contentOffset -y)]
:onPress #(dispatch [:navigate-to :new-contact])} (reset! show-toolbar-shadow? (<= st/contact-group-header-height offset))))}
[icon {:name :android-create ;; TODO not implemented: dapps and persons separation
:style create-icon}]]]]]) [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}
[action-button-item
{:title (label :t/new-contact)
:buttonColor :#9b59b6
:onPress #(dispatch [:navigate-to :new-contact])}
[icon {:name :android-create
:style create-icon}]]]]])))

51
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
@ -64,8 +102,9 @@
:marginLeft 12}) :marginLeft 12})
(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