commit 6c93496468709568f8e0b9c1da21214925703953
author Adrien Béraud <adrien.beraud@savoirfairelinux.com> Mon Jun 07 10:13:26 2021 -0400
committer Adrien Béraud <adrien.beraud@savoirfairelinux.com> Tue May 03 15:42:51 2022 -0400
tree 72f0680ade16c7640b1f3205aa7068ff6cbee8a7
parent 2ff41b25882723cd139d576f280b6f6c0b864da4

add animations

Change-Id: I55d77e10e680d9d72f7fefd4a3e4e2b193fad11d

client/src/components/AccountPreferences.js

diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index 7c7298d..363df68 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -9,6 +9,7 @@
 import ConversationsOverviewCard from './ConversationsOverviewCard'
 
 import authManager from '../AuthManager'
+import { motion } from 'framer-motion'
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -31,6 +32,18 @@
   }
 }))
 
+const transition = { duration: 0.3, ease: [0.43, 0.13, 0.23, 0.96] }
+
+const thumbnailVariants = {
+  initial: { scale: 0.9, opacity: 0 },
+  enter: { scale: 1, opacity: 1, transition },
+  exit: {
+    scale: 0.5,
+    opacity: 0,
+    transition: { duration: 1.5, ...transition }
+  }
+}
+
 export default function AccountPreferences(props) {
   const classes = useStyles()
   const account = props.account
@@ -68,17 +81,28 @@
   }
 
   return (
-    <React.Fragment>
-      <Typography variant="h2" component="h2" gutterBottom>{alias}</Typography>
+    <motion.div
+        initial="initial"
+        animate="enter"
+        exit="exit"
+        variants={{
+          enter: { transition: { staggerChildren: 0.05 } },
+          exit: { transition: { staggerChildren: 0.02 } }
+        }}
+      >
+      <motion.div variants={thumbnailVariants}><Typography variant="h2" component="h2" gutterBottom>{alias}</Typography></motion.div>
       <Grid container spacing={3} style={{ marginBottom: 16 }}>
         {isJamiAccount &&
-          <Grid item xs={12}><JamiIdCard account={account} /></Grid>}
+          <Grid item xs={12}><motion.div variants={thumbnailVariants}><JamiIdCard account={account} /></motion.div></Grid>}
 
         <Grid item xs={12} sm={6}>
+        <motion.div variants={thumbnailVariants}>
           <ConversationsOverviewCard accountId={account.getId()} />
+          </motion.div>
         </Grid>
 
         <Grid item xs={12} sm={6}>
+        <motion.div variants={thumbnailVariants}>
           <Card>
             <CardContent>
               <Typography className={classes.title} color="textSecondary" gutterBottom>
@@ -89,10 +113,13 @@
               </Typography>
             </CardContent>
           </Card>
+          </motion.div>
         </Grid>
+
       </Grid>
 
-      <List subheader={<ListSubheader>Settings</ListSubheader>}>
+      <List subheader={<motion.div variants={thumbnailVariants}><ListSubheader>Settings</ListSubheader></motion.div>}>
+      <motion.div variants={thumbnailVariants}>
         <ListItem>
           <ListItemIcon>
             <GroupRounded />
@@ -107,6 +134,8 @@
             />
           </ListItemSecondaryAction>
         </ListItem>
+        </motion.div>
+        <motion.div variants={thumbnailVariants}>
         <ListItem>
           <ListItemIcon>
             <PhoneCallbackRounded />
@@ -121,7 +150,8 @@
             />
           </ListItemSecondaryAction>
         </ListItem>
-
+        </motion.div>
+        <motion.div variants={thumbnailVariants}>
         <Paper className={classes.paper}>
           <Toolbar>
             <Typography className={classes.title} variant="h6">
@@ -157,7 +187,8 @@
               ))}
           </List>
         </Paper>
+        </motion.div>
       </List>
 
-    </React.Fragment>)
+    </motion.div>)
 }