added transitions between screens

sami616 · Dec 16, 2017 · dfc14e8 · dfc14e8
1 parent 5579485
commit dfc14e8
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 101 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -52,7 +52,6 @@ class App extends Component {
   }
 
 
-
   render() {
     const { section } = this.props.nav;
 

diff --git a/src/components/UI.js b/src/components/UI.js
@@ -1,13 +1,38 @@
 import React from 'react';
 import styled from 'styled-components';
 import ReactLoading from 'react-loading';
+import {Transition} from 'react-transition-group'
 import { colors } from '../utils/global';
 import { darken } from 'polished';
 import folder from '../assets/folder.svg';
 import chevron from '../assets/chevron.svg';
 
-// Wrappers
 
+//Anim
+
+export const SlideIn = props => {
+
+    return (
+        <Transition in appear timeout={0}>
+        	{status => (
+				<SlideInTrans status={status}>
+                {props.children}
+                </SlideInTrans>
+            )}
+        </Transition>
+    )
+}
+export const SlideInTrans = styled.div`
+    opacity: 0;
+    transition: all 250ms ease-in-out;
+    transform: translate3d(0, 10px, 0);
+    ${props=>props.status === 'entered' && `
+        opacity: 1;
+        transform: translate3d(0,0,0);
+    `}
+`
+
+// Wrappers
 export const AppWrap = styled.div`
     background: ${colors.background};
     min-width: 750px;

diff --git a/src/components/screens/End.js b/src/components/screens/End.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
-import { SectionWrap, Msg, SectionHeader, Button, MaxWidth, Flex } from '../UI';
+import { SectionWrap, Msg, SectionHeader, Button, MaxWidth, Flex, SlideIn } from '../UI';
 import killbill from '../../assets/killbill.png';
 const {app} = window.require('electron').remote;
 
@@ -18,22 +18,23 @@ class End extends Component {
 	render() {
 		return (
 
-			<SectionWrap>
+			<SlideIn>
+				<SectionWrap>
 
-				<FlexMaxWidth>
+					<FlexMaxWidth>
 
-					<KillBill src={killbill}/>
-					<SectionHeader>You're all done {this.props.user.name}!</SectionHeader>
-					<Msg>Happy Hacking</Msg>
+						<KillBill src={killbill}/>
+						<SectionHeader>You're all done {this.props.user.name}!</SectionHeader>
+						<Msg>Happy Hacking</Msg>
 
-					<Flex>
-						<EndButton onClick={this.closeApp}>Seeya</EndButton>
-					</Flex>
+						<Flex>
+							<EndButton onClick={this.closeApp}>Seeya</EndButton>
+						</Flex>
 
-				</FlexMaxWidth>
-
-			</SectionWrap>
+					</FlexMaxWidth>
 
+				</SectionWrap>
+			</SlideIn>
 		)
 	}
 

diff --git a/src/components/screens/GitHub.js b/src/components/screens/GitHub.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import RepoList from '../RepoList';
 import * as githubActions from '../../actions/githubActions';
-import { DirSelect, Icon, SectionWrap, Msg, Loader, SectionHeader, Select, Button, Input, Ul, Li, CheckBox, Label, TextLabel, MaxWidth } from '../UI';
+import { DirSelect, Icon, SectionWrap, Msg, Loader, SectionHeader, Select, Button, Input, Ul, Li, CheckBox, Label, TextLabel, MaxWidth, SlideIn } from '../UI';
 import alert from '../../assets/alert.svg';
 
 class GitHub extends Component {
@@ -49,7 +49,7 @@ class GitHub extends Component {
 					{building && this.renderBuilding()}
 					{buildError && this.renderBuildErr()}
 					{dataError && <Msg><Icon src={alert} clickable size={25} margin="0 10px 0 0" onClick={getUserData} />Oops something went wrong. Retry?</Msg>}
-					{dataLoaded && !building && <RepoList filter={filter} setInputVal={setInputVal} searchTerm={searchTerm} checkRepo={checkRepo} repos={repos} />}
+					{dataLoaded && !building && <SlideIn><RepoList filter={filter} setInputVal={setInputVal} searchTerm={searchTerm} checkRepo={checkRepo} repos={repos} /></SlideIn>}
 					{dataLoading && <Loader padding="20px" margin="0 auto" size={65} col="#a5a2a2" />}
 
 					{repoSelected && !building &&
@@ -112,6 +112,7 @@ class GitHub extends Component {
 				</MaxWidth>
 			</SectionWrap>
 
+
 		);
 
 	}

diff --git a/src/components/screens/Login.js b/src/components/screens/Login.js
@@ -2,9 +2,10 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
 import * as loginActions from '../../actions/loginActions';
-import { SectionWrap, Button, Msg, Icon, Loader, MaxWidth, Ul } from '../UI';
+import { SectionWrap, Button, Msg, Icon, Loader, MaxWidth, Ul, SlideIn } from '../UI';
 import githubIcon from '../../assets/github.svg';
 import alert from '../../assets/alert.svg';
+import {Transition} from 'react-transition-group';
 
 let ipcRenderer = window.require('electron').ipcRenderer;
 
@@ -30,24 +31,24 @@ class Login extends Component {
 
 	renderLoginForm = () => {
 		const { authError } = this.props.user;
-
-		return (
-			<Ul>
-				<Auth>
-					{authError && this.renderAuthError()}
-					<Icon margin="0 auto 20px" src={githubIcon} size={60} />
-					<Button onClick={this.props.openAuthWindow} primary>Login with GitHub</Button>
-				</Auth>
-			</Ul>
-		);
-	}
-
-	renderAuthError = () => {
 		return (
-			<Msg margin="0 0 20px 0"><Icon src={alert} size={25} margin="0 10px 0 0" />There was a problem authenticating, please try again</Msg>
+			<SlideIn>
+				<Ul>
+					<Auth>
+						{authError && this.renderAuthError()}
+						<Icon margin="0 auto 20px" src={githubIcon} size={60} />
+						<Button onClick={this.props.openAuthWindow} primary>Login with GitHub</Button>
+					</Auth>
+				</Ul>
+			</SlideIn>
 		)
 	}
 
+	renderAuthError = () => (
+		<Msg margin="0 0 20px 0"><Icon src={alert} size={25} margin="0 10px 0 0" />There was a problem authenticating, please try again</Msg>
+	)
+
+
 	renderUserError = () => {
 		return (
 			<Msg><Icon src={alert} clickable size={25} margin="0 10px 0 0" onClick={this.props.checkSignedIn} />Please check your connection. Retry?</Msg>
@@ -91,6 +92,7 @@ const mapStateToProps = state => ({
 
 export default connect(mapStateToProps, { ...loginActions })(Login);
 
+
 const Auth = styled.div`
 	padding: 20px;
 `
diff --git a/src/components/screens/Plugin.js b/src/components/screens/Plugin.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import * as pluginActions from '../../actions/pluginActions';
-import { SectionWrap, SectionHeader, Button, Ul, MaxWidth } from '../UI';
+import { SectionWrap, SectionHeader, Button, Ul, MaxWidth, SlideIn } from '../UI';
 import PluginRow from './PluginRow';
 
 class Plugin extends Component {
@@ -26,21 +26,23 @@ class Plugin extends Component {
 		const { plugins } = this.props.plugin;
 
 		return (
+			<SlideIn>
 
-			<SectionWrap>
+				<SectionWrap>
 
-				<MaxWidth>
+					<MaxWidth>
 
-					<SectionHeader>Plugins</SectionHeader>
+						<SectionHeader>Plugins</SectionHeader>
 
-					<Ul> {plugins.map(plugin => this.renderRow(plugin))} </Ul>
+						<Ul> {plugins.map(plugin => this.renderRow(plugin))} </Ul>
 
-					{this.renderNext()}
+						{this.renderNext()}
 
-				</MaxWidth>
+					</MaxWidth>
 
-			</SectionWrap>
+				</SectionWrap>
 
+			</SlideIn>
 		)
 	}
 

diff --git a/src/components/screens/Setup.js b/src/components/screens/Setup.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
 import * as setupActions from '../../actions/setupActions';
-import { DirSelect, Button, SectionWrap, MaxWidth } from '../UI';
+import { DirSelect, Button, SectionWrap, MaxWidth, SlideIn } from '../UI';
+import {Transition} from 'react-transition-group';
 
 class Setup extends Component {
 
@@ -19,30 +20,30 @@ class Setup extends Component {
     const { keyDown, onTextChange, selectFolder, createFolders } = this.props;
 
     return (
-      <SectionWrap>
-        <MaxWidth>
-          <Welcome>
-            <p>Konnichiwa {displayName}</p>
-            <span>LAUNCH A NEW &lt;PROJECT&#47;&gt; :)</span>
-          </Welcome>
-
-          {projectPath ? <Path>{projectPath}</Path> : null}
-
-          <DirSelect
-            margin="10px 0 0 0"
-            onKeyDown={keyDown}
-            onChange={onTextChange}
-            value={name}
-            placeholder="Folder name"
-            onClick={selectFolder}
-          />
-
-          {validation ? <Button validation={validation} primary onClick={createFolders}>Next</Button> : null}
-
-        </MaxWidth>
-
-      </SectionWrap>
-
+      <SlideIn>
+        <SectionWrap>
+          <MaxWidth>
+            <Welcome>
+              <p>Konnichiwa {displayName}</p>
+              <span>LAUNCH A NEW &lt;PROJECT&#47;&gt; :)</span>
+            </Welcome>
+
+            {projectPath ? <Path>{projectPath}</Path> : null}
+
+            <DirSelect
+              margin="10px 0 0 0"
+              onKeyDown={keyDown}
+              onChange={onTextChange}
+              value={name}
+              placeholder="Folder name"
+              onClick={selectFolder}
+            />
+
+            {validation ? <Button validation={validation} primary onClick={createFolders}>Next</Button> : null}
+
+          </MaxWidth>
+        </SectionWrap>
+      </SlideIn>
     );
   }
 }

diff --git a/src/components/screens/Wordpress.js b/src/components/screens/Wordpress.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import * as wpActions from '../../actions/wpActions';
-import { SectionWrap, Msg, SectionHeader, Button, Input, Loader, Ul, Li, CheckBox, Label, TextLabel, MaxWidth, Icon } from '../UI';
+import { SectionWrap, Msg, SectionHeader, Button, Input, Loader, Ul, Li, CheckBox, SlideIn, Label, TextLabel, MaxWidth, Icon } from '../UI';
 import alert from '../../assets/alert.svg';
 
 class Wordpress extends Component {
@@ -40,55 +40,58 @@ class Wordpress extends Component {
 
 		return (
 
-			<SectionWrap>
+			<SlideIn>
 
-				<MaxWidth>
+				<SectionWrap>
 
-					<SectionHeader>Wordpress</SectionHeader>
+					<MaxWidth>
 
-					<Ul>
-						<Li>
-							<CheckBox id="renameConfig" onClick={e => { check(e) }} checked={renameConfig} />
-							<Label>Rename wp config</Label>
-						</Li>
+						<SectionHeader>Wordpress</SectionHeader>
 
-						<Li>
-							<CheckBox id="generateAuth" onClick={e => { check(e) } } checked={generateAuth} />
-							<Label>Generate auth keys</Label>
-						</Li>
+						<Ul>
+							<Li>
+								<CheckBox id="renameConfig" onClick={e => { check(e) }} checked={renameConfig} />
+								<Label>Rename wp config</Label>
+							</Li>
 
-						<Li>
-							<TextLabel>Prefix</TextLabel>
-							<Input onChange={(e) => { setInputVal(e) }} id="dbPrefix" grey small type="text" placeholder="Database prefix" value={dbPrefix} />
-						</Li>
+							<Li>
+								<CheckBox id="generateAuth" onClick={e => { check(e) } } checked={generateAuth} />
+								<Label>Generate auth keys</Label>
+							</Li>
 
-						<Li>
-							<TextLabel>Name</TextLabel>
-							<Input onChange={(e) => { setInputVal(e) }} id="dbName" grey small type="text" placeholder="Name" value={dbName} />
-						</Li>
+							<Li>
+								<TextLabel>Prefix</TextLabel>
+								<Input onChange={(e) => { setInputVal(e) }} id="dbPrefix" grey small type="text" placeholder="Database prefix" value={dbPrefix} />
+							</Li>
 
-						<Li>
-							<TextLabel>User</TextLabel>
-							<Input onChange={(e) => { setInputVal(e) }} id="dbUser" grey small type="text" placeholder="User" value={dbUser} />
-						</Li>
+							<Li>
+								<TextLabel>Name</TextLabel>
+								<Input onChange={(e) => { setInputVal(e) }} id="dbName" grey small type="text" placeholder="Name" value={dbName} />
+							</Li>
 
-						<Li>
-							<TextLabel>Password</TextLabel>
-							<Input onChange={(e) => { setInputVal(e) }} id="dbPass" grey small type="text" placeholder="Password" value={dbPass} />
-						</Li>
+							<Li>
+								<TextLabel>User</TextLabel>
+								<Input onChange={(e) => { setInputVal(e) }} id="dbUser" grey small type="text" placeholder="User" value={dbUser} />
+							</Li>
 
-						<Li>
-							<TextLabel>Host</TextLabel>
-							<Input onChange={(e) => { setInputVal(e) }} id="dbHost" grey small type="text" placeholder="Host" value={dbHost} />
-						</Li>
+							<Li>
+								<TextLabel>Password</TextLabel>
+								<Input onChange={(e) => { setInputVal(e) }} id="dbPass" grey small type="text" placeholder="Password" value={dbPass} />
+							</Li>
 
-					</Ul>
+							<Li>
+								<TextLabel>Host</TextLabel>
+								<Input onChange={(e) => { setInputVal(e) }} id="dbHost" grey small type="text" placeholder="Host" value={dbHost} />
+							</Li>
 
-					<Button onClick={() => { downloadWP() }} primary>Install</Button>
+						</Ul>
 
-				</MaxWidth>
+						<Button onClick={() => { downloadWP() }} primary>Install</Button>
 
-			</SectionWrap>
+					</MaxWidth>
+
+				</SectionWrap>
+			</SlideIn>
 
 		);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -52,7 +52,6 @@ class App extends Component {
		}



		render() {
		const { section } = this.props.nav;

Expand Down