dapp permissions sheet animation with native driver
This commit is contained in:
parent
cd968cc507
commit
b172d60f1d
|
@ -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
|
||||||
(anim/timing alpha-value {:toValue 0
|
:useNativeDriver true})
|
||||||
:duration 500})])))
|
(anim/timing alpha-value {:toValue 0
|
||||||
|
: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
|
||||||
(anim/timing alpha-value {:toValue 0.6
|
:useNativeDriver true})
|
||||||
:duration 500})])))
|
(anim/timing alpha-value {:toValue 0.6
|
||||||
|
: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)]
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue