Merge pull request #176 from status-im/bug/accounts-list-scroll
attempt to fix scroll in account's list
This commit is contained in:
adrian-tiberius
GitHub
commit
398ce6927e
|
|
@ -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)]]]]]]))
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue