From beb7002beacd44f6dfbbc2364b72c8a7aee26266 Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Fri, 22 Jul 2016 17:37:20 +0300 Subject: [PATCH] attempt to fix scroll in account's list Former-commit-id: d16ded0a90a702141cca376ef566c2ef232872d3 --- src/status_im/accounts/screen.cljs | 33 +++++---- src/status_im/accounts/styles.cljs | 107 ++++++++++++++-------------- src/status_im/components/react.cljs | 9 +-- 3 files changed, 73 insertions(+), 76 deletions(-) diff --git a/src/status_im/accounts/screen.cljs b/src/status_im/accounts/screen.cljs index ef847e1748..028ceeeaea 100644 --- a/src/status_im/accounts/screen.cljs +++ b/src/status_im/accounts/screen.cljs @@ -2,6 +2,7 @@ (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [status-im.components.react :refer [view + scroll-view text list-view list-item @@ -55,26 +56,24 @@ :start [0, 0] :end [0.5, 1] :locations [0, 0.8, 1] - :style st/gradient-background}] + :style st/gradient-background} [toolbar {:background-color :transparent :nav-action {:image {:source (if show-back? {:uri :icon_back_white} nil) :style icon-back} :handler (if show-back? #(dispatch [:navigate-back]) nil)} :custom-content toolbar-title :action {:image {:style icon-search} - :handler #()}}] - [view st/accounts-container - [view st/account-list-view-container - [list-view {:dataSource (lw/to-datasource accounts) - :enableEmptySections true - :renderRow render-row - ;:renderSeparator render-separator - :style st/account-list}]]] - [view st/add-account-button-container - [touchable-highlight {:on-press create-account} - [view st/add-account-button - [image {:source {:uri :icon_add} - :style st/icon-plus}] - [text {:style st/add-account-text} (label :t/add-account)]]]]])) - -;(re-frame.core/dispatch [:set :view-id :users]) + :handler #()} + :style st/toolbar}] + [list-view {:dataSource (lw/to-datasource accounts) + :enableEmptySections true + :renderRow render-row + :style st/account-list + :contentContainerStyle (st/account-list-content (count accounts))}] + [view st/add-account-button-container + [touchable-highlight {:on-press create-account + :accessibility-label :create-account} + [view st/add-account-button + [image {:source {:uri :icon_add} + :style st/icon-plus}] + [text {:style st/add-account-text} (label :t/add-account)]]]]]])) diff --git a/src/status_im/accounts/styles.cljs b/src/status_im/accounts/styles.cljs index 6ad1c9c930..52dd53c3c7 100644 --- a/src/status_im/accounts/styles.cljs +++ b/src/status_im/accounts/styles.cljs @@ -4,7 +4,8 @@ text1-color color-white toolbar-background2 - online-color]])) + online-color]] + [status-im.components.react :as r])) (def screen-container @@ -12,59 +13,49 @@ :color :white}) (def gradient-background - {:position :absolute - :top 0 - :right 0 - :bottom 0 - :left 0}) + {:position :absolute + :top 0 + :bottom 0 + :left 0 + :right 0 + :padding-bottom 84}) -(def account-list-container1 - {:position :absolute - :top 56 - :right 0 - :bottom 0 - :left 0 - :justifyContent :center}) - -(def accounts-container - {:flex 1 - :flex-direction :column - :justifyContent :center - :padding-bottom 56}) - -(def account-list-view-container - {:flexDirection :column - :justifyContent :center}) +(defn account-list-content [cnt] + (merge {:justifyContent :center} + ;; todo this will not work with landscape and looks bad + (when (< (* 69 (+ 2 cnt)) (:height (r/get-dimensions "window"))) + {:flex 1}))) (def account-list - {}) + {:margin-top 56 + :height 100}) (def row-separator {:borderBottomWidth 1 :borderBottomColor "#bababa"}) (def account-container - {:flex 1 - :flexDirection :row - :height 69 + {:flex 1 + :flexDirection :row + :height 69 :backgroundColor "rgba(255, 255, 255, 0.1)" - :alignItems :center - :justifyContent :center}) + :alignItems :center + :justifyContent :center}) (def photo-container - {:flex 0.2 - :flexDirection :column + {:flex 0.2 + :flexDirection :column :alignItems :center :justifyContent :center}) (def account-photo-container - {:flex 1 + {:flex 1 :backgroundColor "rgba(255, 255, 255, 0.2)" - :borderRadius 50 - :width 36 - :height 36 - :alignItems :center - :justifyContent :center}) + :borderRadius 50 + :width 36 + :height 36 + :alignItems :center + :justifyContent :center}) (def photo-image {:borderRadius 50 @@ -72,43 +63,49 @@ :height 36}) (def name-container - {:flex 1 + {:flex 1 :flexDirection :column}) (def name-text - {:color color-white + {:color color-white :fontSize 16}) (def address-text - {:color color-white + {:color color-white :fontSize 12}) (def online-container - {:flex 0.2 - :flexDirection :column + {:flex 0.2 + :flexDirection :column :alignItems :center :justifyContent :center}) (def add-account-button-container - {:position :absolute - :bottom 16 - :height 50 - :left 100 - :right 100 - :justifyContent :center - :alignItems :center}) + {:position :absolute + :bottom 16 + :height 50 + :left 100 + :right 100 + :justifyContent :center + :alignItems :center}) (def add-account-button {:flexDirection :row}) (def icon-plus {:flexDirection :column - :paddingTop 2 - :width 20 - :height 20}) + :paddingTop 2 + :width 20 + :height 20}) (def add-account-text {:flexDirection :column - :color :white - :fontSize 16 - :marginLeft 8}) + :color :white + :fontSize 16 + :marginLeft 8}) + +(def toolbar + {:position :absolute + :top 0 + :left 0 + :right 0}) diff --git a/src/status_im/components/react.cljs b/src/status_im/components/react.cljs index 6e8a8ce221..c3096ece0f 100644 --- a/src/status_im/components/react.cljs +++ b/src/status_im/components/react.cljs @@ -67,10 +67,11 @@ [image {:source {:uri (keyword (str "icon_" (name n)))} :style style}])) -(def linear-gradient-class (u/require "react-native-linear-gradient")) -(defn linear-gradient [props] - (r/create-element linear-gradient-class - (clj->js (merge {:inverted true} props)))) +(def linear-gradient-class + (r/adapt-react-class (u/require "react-native-linear-gradient"))) +(defn linear-gradient + [props & children] + (vec (concat [linear-gradient-class (merge {:inverted true} props)] children))) (def platform