dapp permissions sheet animation with native driver

This commit is contained in:
Roman Volosovskyi 2019-06-22 20:21:19 +03:00
parent cd968cc507
commit b172d60f1d
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
2 changed files with 16 additions and 9 deletions

View File

@ -16,23 +16,27 @@
[bottom-anim-value alpha-value] [bottom-anim-value alpha-value]
(anim/start (anim/start
(anim/parallel (anim/parallel
[(anim/spring bottom-anim-value {:toValue -354}) [(anim/spring bottom-anim-value {:toValue styles/panel-height
:useNativeDriver true})
(anim/timing alpha-value {:toValue 0 (anim/timing alpha-value {:toValue 0
:duration 500})]))) :duration 500
:useNativeDriver true})])))
(defn show-panel-anim (defn show-panel-anim
[bottom-anim-value alpha-value] [bottom-anim-value alpha-value]
(anim/start (anim/start
(anim/parallel (anim/parallel
[(anim/spring bottom-anim-value {:toValue -20}) [(anim/spring bottom-anim-value {:toValue 20
:useNativeDriver true})
(anim/timing alpha-value {:toValue 0.6 (anim/timing alpha-value {:toValue 0.6
:duration 500})]))) :duration 500
:useNativeDriver true})])))
(defn permission-details [requested-permission] (defn permission-details [requested-permission]
(get browser.permissions/supported-permissions requested-permission)) (get browser.permissions/supported-permissions requested-permission))
(views/defview permissions-panel [[dapp? dapp] {:keys [dapp-name]}] (views/defview permissions-panel [[dapp? dapp] {:keys [dapp-name]}]
(views/letsubs [bottom-anim-value (anim/create-value -354) (views/letsubs [bottom-anim-value (anim/create-value styles/panel-height)
alpha-value (anim/create-value 0) alpha-value (anim/create-value 0)
current-permission (reagent/atom nil) current-permission (reagent/atom nil)
update? (reagent/atom nil)] update? (reagent/atom nil)]

View File

@ -93,12 +93,15 @@
:background-color colors/black :background-color colors/black
:opacity alpha-value}) :opacity alpha-value})
(def panel-height 354)
(defn permissions-panel [bottom-anim-value] (defn permissions-panel [bottom-anim-value]
{:height 354 {:height panel-height
:position :absolute :position :absolute
:bottom bottom-anim-value :transform [{:translateY bottom-anim-value}]
:right 0 :right 0
:left 0 :left 0
:bottom 0
:align-items :center :align-items :center
:background-color :white :background-color :white
:border-top-left-radius 8 :border-top-left-radius 8