add animations
Change-Id: I55d77e10e680d9d72f7fefd4a3e4e2b193fad11d
diff --git a/client/src/App.js b/client/src/App.js
index 6d2284c..3687dcc 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -10,7 +10,7 @@
import './App.scss'
import SignInPage from "./pages/loginDialog.jsx"
-import JamiMessenger from "./pages/messenger.jsx"
+import JamiMessenger from "./pages/JamiMessenger.jsx"
import AccountSettings from "./pages/accountSettings.jsx"
import AccountSelection from "./pages/accountSelection.jsx"
import ServerSetup from "./pages/serverSetup.jsx"
@@ -18,6 +18,7 @@
import NotFoundPage from "./pages/404.jsx"
import LoadingPage from './components/loading'
import JamiAccountDialog from './pages/jamiAccountCreation.jsx'
+import { AnimatePresence } from 'framer-motion'
import WelcomeAnimation from './components/welcome'
const App = (props) => {
@@ -29,7 +30,7 @@
useEffect(() => {
authManager.init(auth => {
- setState({ loaded: true, auth })
+ setState({ loaded: false, auth })
})
return () => authManager.deinit()
}, []);
@@ -44,18 +45,24 @@
</Switch>
}
return <React.Fragment>
- <Switch>
- <Route exact path="/"><Redirect to="/account" /></Route>
- <Route path="/account/:accountId/settings" component={AccountSettings} />
- <Route path="/account/:accountId/addContact/:contactId" component={JamiMessenger} />
- <Route path="/account/:accountId/conversation/:conversationId" component={JamiMessenger} />
- <Route path="/account/:accountId" component={JamiMessenger} />
- <Route path="/account" component={AccountSelection} />
- <Route path="/newAccount/jami" component={JamiAccountDialog} />
- <Route path="/newAccount" component={AccountCreationDialog} />
- <Route component={NotFoundPage} />
- </Switch>
- {!state.auth.authenticated && <SignInPage open={!state.auth.authenticated}/>}
+ <Route
+ render={({ location }) => {
+ console.log("App render location")
+
+ return <AnimatePresence exitBeforeEnter initial={false}>
+ <Switch location={location} key={location.pathname}>
+ <Route exact path="/"><Redirect to="/account" /></Route>
+ <Route path="/account/:accountId/settings" component={AccountSettings} />
+ <Route path="/account/:accountId" component={JamiMessenger} />
+ <Route path="/account" component={AccountSelection} />
+ <Route path="/newAccount/jami" component={JamiAccountDialog} />
+ <Route path="/newAccount" component={AccountCreationDialog} />
+ <Route path="/setup"><Redirect to="/account" /></Route>
+ <Route component={NotFoundPage} />
+ </Switch>
+ {!state.auth.authenticated && <SignInPage open={!state.auth.authenticated}/>}
+ </AnimatePresence>}}
+ />
</React.Fragment>
}
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>)
}
diff --git a/client/src/pages/JamiMessenger.jsx b/client/src/pages/JamiMessenger.jsx
new file mode 100644
index 0000000..13c8d48
--- /dev/null
+++ b/client/src/pages/JamiMessenger.jsx
@@ -0,0 +1,14 @@
+import { Route, Switch, useRouteMatch } from "react-router";
+import Messenger from "./messenger.jsx"
+
+export default function JamiMessenger(props) {
+ const { path, url } = useRouteMatch();
+
+ console.log("JamiMessenger render")
+
+ return <Switch>
+ <Route path={`${path}/addContact/:contactId`} component={Messenger} />
+ <Route path={`${path}/conversation/:conversationId`} component={Messenger} />
+ <Route path={`${path}`} component={Messenger} />
+ </Switch>
+}
\ No newline at end of file
diff --git a/client/src/pages/accountSelection.jsx b/client/src/pages/accountSelection.jsx
index c95b02b..6c52af4 100644
--- a/client/src/pages/accountSelection.jsx
+++ b/client/src/pages/accountSelection.jsx
@@ -8,6 +8,12 @@
import ConversationAvatar from '../components/ConversationAvatar';
import { AddRounded } from '@material-ui/icons';
import { useHistory } from 'react-router';
+import { motion } from 'framer-motion';
+
+const variants = {
+ enter: { opacity: 1, y: 0 },
+ exit: { opacity: 0, y: "-50px" },
+}
const AccountSelection = (props) => {
const history = useHistory()
@@ -47,6 +53,7 @@
<React.Fragment>
<Header />
<Container maxWidth="sm" style={{paddingBottom:32}}>
+ <motion.div drag="x" initial="exit" animate="enter" exit="exit" variants={variants}>
<Card style={{marginTop:32, marginBottom:32}}>
<CardHeader title="Choose an account" />
<List>
@@ -61,6 +68,7 @@
primary="Create new account" />
</List>
</Card>
+ </motion.div>
</Container>
</React.Fragment>
)
diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index 9b825f9..3833956 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -12,7 +12,7 @@
import LoadingPage from '../components/loading';
import { useParams } from 'react-router';
-const JamiMessenger = (props) => {
+const Messenger = (props) => {
const [conversations, setConversations] = useState(undefined)
const [searchQuery, setSearchQuery] = useState('')
const [searchResult, setSearchResults] = useState(undefined)
@@ -55,6 +55,7 @@
return () => controller.abort()
}, [accountId, searchQuery])
+ console.log("Messenger render")
return (
<div className="app" >
<Header />
@@ -68,4 +69,4 @@
)
}
-export default JamiMessenger
\ No newline at end of file
+export default Messenger
\ No newline at end of file