From 3f2c598b2ba6b4207200598324fda8d08653df7a Mon Sep 17 00:00:00 2001 From: virvar Date: Mon, 20 Jun 2016 12:21:57 +0300 Subject: [PATCH] Add shadows Former-commit-id: 383602200e5714338091c48d87d7e48ef5290dc4 --- src/status_im/contacts/screen.cljs | 96 +++++++++++++++++------------- src/status_im/contacts/styles.cljs | 51 ++++++++++++++-- 2 files changed, 99 insertions(+), 48 deletions(-) diff --git a/src/status_im/contacts/screen.cljs b/src/status_im/contacts/screen.cljs index 2be5a9c2cb..406d85de1d 100644 --- a/src/status_im/contacts/screen.cljs +++ b/src/status_im/contacts/screen.cljs @@ -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 @@ -27,50 +28,61 @@ (list-item [contact-view-2 row])) (defn contact-list-toolbar [] - [toolbar {:nav-action {:image {:source {:uri :icon_hamburger} - :style hamburger-icon} - :handler open-drawer} + [toolbar {:nav-action {:image {:source {:uri :icon_hamburger} + :style hamburger-icon} + :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 - [view st/contact-group - [text {:style st/contact-group-text} (label :contacs-group-dapps)] - [text {:style st/contact-group-size-text} (str (count contacts))]] - ;; todo what if there is no contacts, should we show some information - ;; about this? - (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 :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)]]]] - [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}]]]]]) +(defn contact-group [contacts title group top?] + [view st/contact-group + [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 + [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 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} + [action-button-item + {:title (label :t/new-contact) + :buttonColor :#9b59b6 + :onPress #(dispatch [:navigate-to :new-contact])} + [icon {:name :android-create + :style create-icon}]]]]]))) diff --git a/src/status_im/contacts/styles.cljs b/src/status_im/contacts/styles.cljs index bf0e3499d8..d685191212 100644 --- a/src/status_im/contacts/styles.cljs +++ b/src/status_im/contacts/styles.cljs @@ -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}) + {:flexDirection :row + :alignItems :center + :height 56 + :backgroundColor color-white}) (def show-all-text {:marginLeft 72 @@ -64,8 +102,9 @@ :marginLeft 12}) (def contact-container - {:flexDirection :row - :height 56}) + {:flexDirection :row + :height 56 + :backgroundColor color-white}) (def name-container {:flex 1