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

tooltip animation with native driver

This commit is contained in:
Roman Volosovskyi 2019-06-23 18:46:47 +03:00
parent 453fe60c46
commit fd2c37df71
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
8 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/ui/components/list_item/styles.cljs
View File

@ -31,4 +31,4 @@
(def error
{:bottom-value 0
:color colors/red-light
:font-size 12})
:font-size 12})

2
src/status_im/ui/components/text_input/styles.cljs
View File

@ -25,6 +25,6 @@
:desktop {:height 52}})
(defn error [label?]
{:bottom-value (if label? -20 0)
{:bottom-value (if label? 20 0)
:color colors/red-light
:font-size 12})

12
src/status_im/ui/components/tooltip/animations.cljs
View File

@ -5,8 +5,10 @@
(fn []
(animation/start
(animation/parallel
[(animation/timing opacity-value {:toValue 1
:duration 500})
(animation/timing bottom-anim-value {:toValue (- bottom-value delta)
:easing (.bezier (animation/easing) 0.685, 0.000, 0.025, 1.185)
:duration 500})]))))
[(animation/timing opacity-value {:toValue 1
:duration 500
:useNativeDriver true})
(animation/timing bottom-anim-value {:toValue (- bottom-value delta)
:easing (.bezier (animation/easing) 0.685, 0.000, 0.025, 1.185)
:duration 500
:useNativeDriver true})]))))

3
src/status_im/ui/components/tooltip/styles.cljs
View File

@ -23,7 +23,8 @@
:align-items :center
:left 0
:right 0
:bottom bottom-value
:bottom 0
:transform [{:translateY bottom-value}]
:opacity opacity-value})
(defn tooltip-text-container [color]

8
src/status_im/ui/components/tooltip/views.cljs
View File

@ -9,10 +9,10 @@
[reagent.core :as reagent]))
(views/defview tooltip [label & [{:keys [bottom-value color font-size container-style]
:or {bottom-value -30 color :white font-size 15}}]]
:or {bottom-value 30 color :white font-size 15}}]]
(views/letsubs [bottom-anim-value (animation/create-value bottom-value)
opacity-value (animation/create-value 0)]
{:component-did-mount (animations/animate-tooltip bottom-value bottom-anim-value opacity-value 10)}
{:component-did-mount (animations/animate-tooltip bottom-value bottom-anim-value opacity-value -10)}
[react/view (merge styles/tooltip-container container-style)
[react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)}
[react/view (styles/tooltip-text-container color)
@ -22,9 +22,9 @@
:color color)]]]))
(views/defview bottom-tooltip-info [label on-close]
(views/letsubs [bottom-anim-value (animation/create-value -150)
(views/letsubs [bottom-anim-value (animation/create-value 150)
opacity-value (animation/create-value 0)]
{:component-did-mount (animations/animate-tooltip -150 bottom-anim-value opacity-value -10)}
{:component-did-mount (animations/animate-tooltip 150 bottom-anim-value opacity-value 10)}
[react/view styles/bottom-tooltip-container
[react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)}
[vector-icons/icon :icons/tooltip-triangle (assoc

2
src/status_im/ui/screens/add_new/new_public_chat/styles.cljs
View File

@ -45,6 +45,6 @@
:background-color nil})
(def tooltip
{:bottom-value -15
{:bottom-value 15
:color colors/red-light
:font-size 12})

2
src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs
View File

@ -71,7 +71,7 @@
{:format (i18n/label :t/bootnode-format)})
{:color colors/red-light
:font-size 12
:bottom-value -25}])]
:bottom-value 25}])]
(when id
[delete-button id])]]
[react/view styles/bottom-container

2
src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs
View File

@ -80,7 +80,7 @@
{:format (i18n/label :t/mailserver-format)})
{:color colors/red-light
:font-size 12
:bottom-value -25}])]
:bottom-value 25}])]
(when (and id
(not connected?))
[react/view