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

feat: persistent send/receive action at bottom of asset list 

When the account card is scrolled out of view a send/receive button group
appears at the bottom of the asset list; uses native animation to raise and
lower the button group into and out of view.

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Michael Bradley, Jr 2020-04-28 09:21:44 -05:00 committed by Andrey Shovkoplyas
parent 6aba34b82d
commit 00501f44b9
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
4 changed files with 96 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/mocks/js_dependencies.cljs
View File

@ -42,6 +42,7 @@
:ValueXY (fn [])
:View {}
:FlatList {}
:ScrollView {}
:Text {}}
:Easing {:bezier (fn [])
:poly (fn [])

6
src/status_im/ui/components/react.cljs
View File

@ -68,9 +68,15 @@
(def animated-flat-list-class
(reagent/adapt-react-class (.-FlatList ^js animated)))
(def animated-scroll-view-class
(reagent/adapt-react-class (.-ScrollView ^js animated)))
(defn animated-view [props & content]
(vec (conj content props animated-view-class)))
(defn animated-scroll-view [props & children]
(vec (conj children props animated-scroll-view-class)))
(def dimensions (.-Dimensions react-native))
(def keyboard (.-Keyboard react-native))
(def dismiss-keyboard! #(.dismiss ^js Keyboard))

19
src/status_im/ui/screens/wallet/account/styles.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.ui.screens.wallet.account.styles
(:require [status-im.ui.components.colors :as colors]))
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.animation :as animation]))
(defn card [window-width color]
{:width (- window-width 30)
@ -25,3 +26,19 @@
:shadow-color (if (colors/dark?)
"rgba(0, 0, 0, 0.75)"
"rgba(0, 9, 26, 0.12)")})
(defn bottom-send-recv-buttons-raise [anim-y]
(animation/timing
anim-y
{:toValue 0
:duration 200
:easing (.-ease ^js (animation/easing))
:useNativeDriver true}))
(defn bottom-send-recv-buttons-lower [anim-y y]
(animation/timing
anim-y
{:toValue y
:duration 200
:easing (.-ease ^js (animation/easing))
:useNativeDriver true}))

71
src/status_im/ui/screens/wallet/account/views.cljs
View File

@ -15,7 +15,8 @@
[status-im.ui.components.list-item.views :as list-item]
[status-im.utils.money :as money]
[status-im.wallet.utils :as wallet.utils]
[status-im.ui.components.topbar :as topbar]))
[status-im.ui.components.topbar :as topbar]
[status-im.ui.components.animation :as animation]))
(def state (reagent/atom {:tab :assets}))
@ -28,12 +29,14 @@
{:content sheets/account-settings
:content-height 60}])}]}])
(defn button [label icon handler]
(defn button [label icon color handler]
[react/touchable-highlight {:on-press handler :style {:flex 1}}
[react/view {:flex 1 :align-items :center :justify-content :center}
[react/view {:flex-direction :row :align-items :center}
[icons/icon icon {:color colors/white-persist}]
[react/text {:style {:margin-left 8 :color colors/white-persist}} label]]]])
[icons/icon icon {:color color}]
[react/text {:style {:margin-left 8 :color color}} label]]]])
(def button-group-height 52)
(views/defview account-card [{:keys [address color type] :as account}]
(views/letsubs [currency [:wallet/currency]
@ -57,7 +60,7 @@
[react/touchable-highlight {:on-press #(re-frame/dispatch [:show-popover {:view :share-account :address address}])}
[icons/icon :main-icons/share {:color colors/white-persist
:accessibility-label :share-wallet-address-icon}]]]
[react/view {:height 52 :background-color colors/black-transparent-20
[react/view {:height button-group-height :background-color colors/black-transparent-20
:border-bottom-right-radius 8 :border-bottom-left-radius 8 :flex-direction :row}
(if (= type :watch)
[react/view {:flex 1 :align-items :center :justify-content :center}
@ -66,11 +69,13 @@
[button
(i18n/label :t/wallet-send)
:main-icons/send
colors/white-persist
#(re-frame/dispatch [:wallet/prepare-transaction-from-wallet account])])
[react/view {:style (styles/divider)}]
[button
(i18n/label :t/receive)
:main-icons/receive
colors/white-persist
#(re-frame/dispatch [:show-popover {:view :share-account :address address}])]]]))
(defn render-collectible [address]
@ -119,13 +124,65 @@
(= tab :history)
[transactions address])])))
(views/defview bottom-send-recv-buttons [{:keys [address type] :as account} anim-y]
[react/animated-view {:style {:background-color colors/white
:bottom 0
:flex-direction :row
:height button-group-height
:position :absolute
:shadow-offset {:width 0 :height 1}
:shadow-opacity 0.75
:shadow-radius 1
:transform [{:translateY anim-y}]
:width "100%"}}
(if (= type :watch)
[react/view {:flex 1 :align-items :center :justify-content :center}
[react/text {:style {:margin-left 8 :color colors/blue-persist}}
(i18n/label :t/watch-only)]]
[button
(i18n/label :t/wallet-send)
:main-icons/send
colors/blue-persist
#(re-frame/dispatch [:wallet/prepare-transaction-from-wallet account])])
[button
(i18n/label :t/receive)
:main-icons/receive
colors/blue-persist
#(re-frame/dispatch [:show-popover {:view :share-account :address address}])]])
(defn anim-listener [anim-y scroll-y]
(let [to-show (atom false)]
(animation/add-listener
scroll-y
(fn [anim]
(let [y-trigger 149]
(cond
(and (>= (.-value anim) y-trigger) (not @to-show))
(animation/start
(styles/bottom-send-recv-buttons-raise anim-y)
#(reset! to-show true))
(and (< (.-value anim) y-trigger) @to-show)
(animation/start
(styles/bottom-send-recv-buttons-lower anim-y button-group-height)
#(reset! to-show false))))))))
(views/defview account []
(views/letsubs [{:keys [name address] :as account} [:multiaccount/current-account]]
(let [anim-y (animation/create-value button-group-height)
scroll-y (animation/create-value 0)]
(anim-listener anim-y scroll-y)
[react/view {:flex 1 :background-color colors/white}
[toolbar-view name]
[react/scroll-view
[react/animated-scroll-view
{:contentContainerStyle {:padding-bottom button-group-height}
:on-scroll (animation/event
[{:nativeEvent {:contentOffset {:y scroll-y}}}]
{:useNativeDriver true})
:scrollEventThrottle 1}
[react/view {:padding-left 16}
[react/scroll-view {:horizontal true}
[react/view {:flex-direction :row :padding-top 8 :padding-bottom 12}
[account-card account]]]]
[assets-and-collections address]]]))
[assets-and-collections address]]
[bottom-send-recv-buttons account anim-y]])))