status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #176 from status-im/bug/accounts-list-scroll 

attempt to fix scroll in account's list

Former-commit-id: 398ce6927e
This commit is contained in:
adrian-tiberius 2016-07-26 11:16:16 +03:00 committed by GitHub
parent f8489262cf beb7002bea
commit 4713385aa3
3 changed files with 73 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/status_im/accounts/screen.cljs
View File

@ -2,6 +2,7 @@
(: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]]
[status-im.components.react :refer [view [status-im.components.react :refer [view
scroll-view
text text
list-view list-view
list-item list-item
@ -55,26 +56,24 @@
:start [0, 0] :start [0, 0]
:end [0.5, 1] :end [0.5, 1]
:locations [0, 0.8, 1] :locations [0, 0.8, 1]
:style st/gradient-background}] :style st/gradient-background}
[toolbar {:background-color :transparent [toolbar {:background-color :transparent
:nav-action {:image {:source (if show-back? {:uri :icon_back_white} nil) :nav-action {:image {:source (if show-back? {:uri :icon_back_white} nil)
:style icon-back} :style icon-back}
:handler (if show-back? #(dispatch [:navigate-back]) nil)} :handler (if show-back? #(dispatch [:navigate-back]) nil)}
:custom-content toolbar-title :custom-content toolbar-title
:action {:image {:style icon-search} :action {:image {:style icon-search}
:handler #()}}] :handler #()}
[view st/accounts-container :style st/toolbar}]
[view st/account-list-view-container [list-view {:dataSource (lw/to-datasource accounts)
[list-view {:dataSource (lw/to-datasource accounts) :enableEmptySections true
:enableEmptySections true :renderRow render-row
:renderRow render-row :style st/account-list
;:renderSeparator render-separator :contentContainerStyle (st/account-list-content (count accounts))}]
:style st/account-list}]]] [view st/add-account-button-container
[view st/add-account-button-container [touchable-highlight {:on-press create-account
[touchable-highlight {:on-press create-account} :accessibility-label :create-account}
[view st/add-account-button [view st/add-account-button
[image {:source {:uri :icon_add} [image {:source {:uri :icon_add}
:style st/icon-plus}] :style st/icon-plus}]
[text {:style st/add-account-text} (label :t/add-account)]]]]])) [text {:style st/add-account-text} (label :t/add-account)]]]]]]))
;(re-frame.core/dispatch [:set :view-id :users])

107
src/status_im/accounts/styles.cljs
View File

@ -4,7 +4,8 @@
text1-color text1-color
color-white color-white
toolbar-background2 toolbar-background2
online-color]])) online-color]]
[status-im.components.react :as r]))
(def screen-container (def screen-container
@ -12,59 +13,49 @@
:color :white}) :color :white})
(def gradient-background (def gradient-background
{:position :absolute {:position :absolute
:top 0 :top 0
:right 0 :bottom 0
:bottom 0 :left 0
:left 0}) :right 0
:padding-bottom 84})
(def account-list-container1 (defn account-list-content [cnt]
{:position :absolute (merge {:justifyContent :center}
:top 56 ;; todo this will not work with landscape and looks bad
:right 0 (when (< (* 69 (+ 2 cnt)) (:height (r/get-dimensions "window")))
:bottom 0 {:flex 1})))
: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})
(def account-list (def account-list
{}) {:margin-top 56
:height 100})
(def row-separator (def row-separator
{:borderBottomWidth 1 {:borderBottomWidth 1
:borderBottomColor "#bababa"}) :borderBottomColor "#bababa"})
(def account-container (def account-container
{:flex 1 {:flex 1
:flexDirection :row :flexDirection :row
:height 69 :height 69
:backgroundColor "rgba(255, 255, 255, 0.1)" :backgroundColor "rgba(255, 255, 255, 0.1)"
:alignItems :center :alignItems :center
:justifyContent :center}) :justifyContent :center})
(def photo-container (def photo-container
{:flex 0.2 {:flex 0.2
:flexDirection :column :flexDirection :column
:alignItems :center :alignItems :center
:justifyContent :center}) :justifyContent :center})
(def account-photo-container (def account-photo-container
{:flex 1 {:flex 1
:backgroundColor "rgba(255, 255, 255, 0.2)" :backgroundColor "rgba(255, 255, 255, 0.2)"
:borderRadius 50 :borderRadius 50
:width 36 :width 36
:height 36 :height 36
:alignItems :center :alignItems :center
:justifyContent :center}) :justifyContent :center})
(def photo-image (def photo-image
{:borderRadius 50 {:borderRadius 50
@ -72,43 +63,49 @@
:height 36}) :height 36})
(def name-container (def name-container
{:flex 1 {:flex 1
:flexDirection :column}) :flexDirection :column})
(def name-text (def name-text
{:color color-white {:color color-white
:fontSize 16}) :fontSize 16})
(def address-text (def address-text
{:color color-white {:color color-white
:fontSize 12}) :fontSize 12})
(def online-container (def online-container
{:flex 0.2 {:flex 0.2
:flexDirection :column :flexDirection :column
:alignItems :center :alignItems :center
:justifyContent :center}) :justifyContent :center})
(def add-account-button-container (def add-account-button-container
{:position :absolute {:position :absolute
:bottom 16 :bottom 16
:height 50 :height 50
:left 100 :left 100
:right 100 :right 100
:justifyContent :center :justifyContent :center
:alignItems :center}) :alignItems :center})
(def add-account-button (def add-account-button
{:flexDirection :row}) {:flexDirection :row})
(def icon-plus (def icon-plus
{:flexDirection :column {:flexDirection :column
:paddingTop 2 :paddingTop 2
:width 20 :width 20
:height 20}) :height 20})
(def add-account-text (def add-account-text
{:flexDirection :column {:flexDirection :column
:color :white :color :white
:fontSize 16 :fontSize 16
:marginLeft 8}) :marginLeft 8})
(def toolbar
{:position :absolute
:top 0
:left 0
:right 0})

9
src/status_im/components/react.cljs
View File

@ -67,10 +67,11 @@
[image {:source {:uri (keyword (str "icon_" (name n)))} [image {:source {:uri (keyword (str "icon_" (name n)))}
:style style}])) :style style}]))
(def linear-gradient-class (u/require "react-native-linear-gradient")) (def linear-gradient-class
(defn linear-gradient [props] (r/adapt-react-class (u/require "react-native-linear-gradient")))
(r/create-element linear-gradient-class (defn linear-gradient
(clj->js (merge {:inverted true} props)))) [props & children]
(vec (concat [linear-gradient-class (merge {:inverted true} props)] children)))
(def platform (def platform