about summary refs log tree commit diff
path: root/app/javascript/mastodon/features/compose/components/warning.js
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2017-10-01 12:20:00 +0200
committerGitHub <noreply@github.com>2017-10-01 12:20:00 +0200
commitcdad7977fc94cd6a1a97841ed0f25e8504cb80d6 (patch)
treeba164d7ea8a1528708beda57f3fe13dc7334ef10 /app/javascript/mastodon/features/compose/components/warning.js
parent0b3f1ec62a08ab2aad2b7c1ab8f88bdac5e8a3c6 (diff)
Improve privacy dropdown, remove react-simple-dropdown dependency (#5140)
* Improve privacy dropdown, remove react-simple-dropdown dependency

* Animate privacy warning

* Fix react-router-scroll
Diffstat (limited to 'app/javascript/mastodon/features/compose/components/warning.js')
-rw-r--r--app/javascript/mastodon/features/compose/components/warning.js11
1 files changed, 8 insertions, 3 deletions
diff --git a/app/javascript/mastodon/features/compose/components/warning.js b/app/javascript/mastodon/features/compose/components/warning.js
index 75f36b840..dc902f33b 100644
--- a/app/javascript/mastodon/features/compose/components/warning.js
+++ b/app/javascript/mastodon/features/compose/components/warning.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Motion, spring } from 'react-motion';
 
 export default class Warning extends React.PureComponent {
 
@@ -11,9 +12,13 @@ export default class Warning extends React.PureComponent {
     const { message } = this.props;
 
     return (
-      <div className='compose-form__warning'>
-        {message}
-      </div>
+      <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
+        {({ opacity, scaleX, scaleY }) => (
+          <div className='compose-form__warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
+            {message}
+          </div>
+        )}
+      </Motion>
     );
   }