Add shadows

Former-commit-id: 383602200e

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
@@ -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 []
+(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
-       [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])}
+    [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
                         :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}]]]]])))

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})
+   :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