psmattas/resolver
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Mobile] Improve show dialog in mobile size & some small improvements

Browse Source
This commit is contained in:
Qolzam
2018-02-24 21:22:24 +07:00
parent fa251e6fa4
commit 082653a33d
15 changed files with 432 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/circle/CircleComponent.tsx
View File

@@ -61,6 +61,14 @@ const styles = (theme: any) => ({
},
dialogPaper: {
minWidth: 400
},
fullPageXs: {
[theme.breakpoints.down('xs')]: {
width: '100%',
height: '100%',
margin: 0,
overflowY: 'auto'
}
}
})
@@ -306,6 +314,7 @@ export class CircleComponent extends Component<ICircleComponentProps, ICircleCom
</List>
</Collapse>
<Dialog
PaperProps={{className: classes.fullPageXs}}
key={this.props.id}
open={this.props.openSetting!}
onClose={this.props.closeCircleSettings}

11
src/components/editProfile/EditProfileComponent.tsx
View File

@@ -47,6 +47,14 @@ import { Profile } from 'core/domain/users'
const styles = (theme: any) => ({
dialogTitle: {
padding: 0
},
fullPageXs: {
[theme.breakpoints.down('xs')]: {
width: '100%',
height: '100%',
margin: 0,
overflowY: 'auto'
}
}
})
@@ -314,6 +322,7 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
<div>
{/* Edit profile dialog */}
<Dialog
PaperProps={{className: classes.fullPageXs}}
key='Edit-Profile'
open={this.props.open!}
onClose={this.props.onRequestClose}
@@ -388,6 +397,7 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
{/* Image gallery for banner*/}
<Dialog
PaperProps={{className: classes.fullPageXs}}
open={this.state.openBanner}
onClose={this.handleCloseBannerGallery}
@@ -400,6 +410,7 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
{/* Image gallery for avatar */}
<Dialog
PaperProps={{className: classes.fullPageXs}}
open={this.state.openAvatar}
onClose={this.handleCloseAvatarGallery}
>

102
src/components/emailVerification/EmailVerificationComponent.tsx
View File

@@ -8,12 +8,33 @@ import TextField from 'material-ui/TextField'
import RaisedButton from 'material-ui/Button'
import Button from 'material-ui/Button'
import config from 'src/config'
import { withStyles } from 'material-ui/styles'
import { getTranslate, getActiveLanguage } from 'react-localize-redux'
// - Import actions
import * as authorizeActions from 'actions/authorizeActions'
import { IEmailVerificationComponentProps } from './IEmailVerificationComponentProps'
import { IEmailVerificationComponentState } from './IEmailVerificationComponentState'
import { Grid } from 'material-ui'
const styles = (theme: any) => ({
textField: {
minWidth: 280,
marginTop: 20
},
contain: {
margin: '0 auto'
},
paper: {
minHeight: 370,
maxWidth: 450,
minWidth: 337,
textAlign: 'center',
display: 'block',
margin: 'auto'
}
})
/**
* Create component class
@@ -22,7 +43,7 @@ import { IEmailVerificationComponentState } from './IEmailVerificationComponentS
* @class EmailVerificationComponent
* @extends {Component}
*/
export class EmailVerificationComponent extends Component<IEmailVerificationComponentProps,IEmailVerificationComponentState> {
export class EmailVerificationComponent extends Component<IEmailVerificationComponentProps, IEmailVerificationComponentState> {
styles = {
message: {
@@ -32,7 +53,18 @@ export class EmailVerificationComponent extends Component<IEmailVerificationComp
marginTop: 60
},
homeButton: {
marginRight: 10
marginRight: 10
},
contain: {
margin: '0 auto'
},
paper: {
minHeight: 370,
maxWidth: 450,
minWidth: 337,
textAlign: 'center',
display: 'block',
margin: 'auto'
}
}
@@ -41,7 +73,7 @@ export class EmailVerificationComponent extends Component<IEmailVerificationComp
* Component constructor
* @param {object} props is an object properties of component
*/
constructor (props: IEmailVerificationComponentProps) {
constructor(props: IEmailVerificationComponentProps) {
super(props)
// Binding function to `this`
@@ -52,47 +84,26 @@ export class EmailVerificationComponent extends Component<IEmailVerificationComp
* Reneder component DOM
* @return {react element} return the DOM which rendered by component
*/
render () {
const {translate} = this.props
const paperStyle = {
minHeight: 370,
width: 450,
textAlign: 'center',
display: 'block',
margin: 'auto'
}
render() {
const { translate, classes } = this.props
return (
<div>
<Grid container spacing={24}>
<Grid item xs={12} className={classes.contain}>
<h1 style={{
textAlign: 'center',
padding: '20px',
fontSize: '30px',
fontWeight: 500,
lineHeight: '32px',
margin: 'auto',
color: 'rgba(138, 148, 138, 0.2)'
}}>{config.settings.appName}</h1>
<h1 className='g__app-name'>{config.settings.appName}</h1>
<div className='animate-bottom'>
<Paper style={paperStyle} elevation={1} >
<div style={{ padding: '48px 40px 36px' }}>
<div style={{
paddingLeft: '40px',
paddingRight: '40px'
}}>
<div className='animate-bottom'>
<Paper className={classes.paper} elevation={1} >
<div style={{ padding: '48px 40px 36px' }}>
<div style={{
paddingLeft: '40px',
paddingRight: '40px'
}}>
<h2 style={{
textAlign: 'left',
paddingTop: '16px',
fontSize: '24px',
fontWeight: 400,
lineHeight: '32px',
margin: 0
}} className='zoomOutLCorner animated'>{translate!('emailVerification.title')}</h2>
</div>
<p style={this.styles.message as any}>
{translate!('emailVerification.description')}
<h2 className='zoomOutLCorner animated g__paper-title'>{translate!('emailVerification.title')}</h2>
</div>
<p style={this.styles.message as any}>
{translate!('emailVerification.description')}
</p>
<div style={this.styles.buttons}>
<Button variant='raised' style={this.styles.homeButton} color='primary' onClick={() => this.props.homePage()}> {translate!('emailVerification.homeButton')} </Button>
@@ -101,10 +112,11 @@ export class EmailVerificationComponent extends Component<IEmailVerificationComp
<div>
</div>
</div>
</Paper>
</div>
</div>
</div>
</Paper>
</div>
</Grid>
</Grid>
)
}
}
@@ -137,4 +149,4 @@ const mapStateToProps = (state: any, ownProps: IEmailVerificationComponentProps)
}
// - Connect component to redux store
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(EmailVerificationComponent as any) as any)
export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(EmailVerificationComponent as any) as any)) as typeof EmailVerificationComponent

5
src/components/emailVerification/IEmailVerificationComponentProps.ts
View File

@@ -10,6 +10,11 @@ export interface IEmailVerificationComponentProps {
*/
homePage: () => any
/**
* Styles
*/
classes?: any
/**
* Translate to locale string
*/

5
src/components/imageGallery/IImageGalleryComponentProps.ts
View File

@@ -39,6 +39,11 @@ export interface IImageGalleryComponentProps {
*/
images?: Image[]
/**
* Styles
*/
classes?: any
/**
* Translate to locale string
*/

14
src/components/imageGallery/ImageGalleryComponent.tsx
View File

@@ -10,6 +10,7 @@ import SvgUpload from 'material-ui-icons/CloudUpload'
import SvgAddImage from 'material-ui-icons/AddAPhoto'
import SvgDelete from 'material-ui-icons/Delete'
import { grey } from 'material-ui/colors'
import { withStyles } from 'material-ui/styles'
import uuid from 'uuid'
import { getTranslate, getActiveLanguage } from 'react-localize-redux'
@@ -26,6 +27,17 @@ import { IImageGalleryComponentProps } from './IImageGalleryComponentProps'
import { IImageGalleryComponentState } from './IImageGalleryComponentState'
import { Image } from 'core/domain/imageGallery'
const styles = (theme: any) => ({
fullPageXs: {
[theme.breakpoints.down('xs')]: {
width: '100%',
height: '100%',
margin: 0,
overflowY: 'auto'
}
}
})
/**
* Create ImageGallery component class
*/
@@ -252,4 +264,4 @@ const mapStateToProps = (state: any) => {
}
// - Connect component to redux store
export default connect(mapStateToProps, mapDispatchToProps)(ImageGalleryComponent as any)
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles as any)(ImageGalleryComponent as any) as any)

185
src/components/login/LoginComponent.tsx
View File

@@ -19,17 +19,37 @@ import * as authorizeActions from 'actions/authorizeActions'
import { ILoginComponentProps } from './ILoginComponentProps'
import { ILoginComponentState } from './ILoginComponentState'
import { OAuthType } from 'core/domain/authorize'
import Grid from 'material-ui/Grid/Grid'
const styles = (theme: any) => ({
textField: {
minWidth: 280,
marginTop: 20
},
contain: {
margin: '0 auto'
},
paper: {
minHeight: 370,
maxWidth: 450,
minWidth: 337,
textAlign: 'center',
display: 'block',
margin: 'auto'
},
bottomPaper: {
display: 'inherit',
fontSize: 'small',
marginTop: '50px'
},
link: {
color: '#0095ff',
display: 'inline-block'
}
})
// - Create Login component class
export class LoginComponent extends Component<ILoginComponentProps,ILoginComponentState> {
export class LoginComponent extends Component<ILoginComponentProps, ILoginComponentState> {
styles = {
singinOptions: {
@@ -40,14 +60,6 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
divider: {
marginBottom: 10,
marginTop: 15
},
restPassword: {
lineHeight: 6,
fontWeight: 400,
fontSize: 'small'
},
restPasswordLink: {
color: '#0095ff'
}
}
@@ -55,7 +67,7 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
* Component constructor
* @param {object} props is an object properties of component
*/
constructor (props: ILoginComponentProps) {
constructor(props: ILoginComponentProps) {
super(props)
this.state = {
@@ -105,7 +117,7 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
* Handle register form
*/
handleForm = () => {
const {translate} = this.props
const { translate } = this.props
let error = false
if (this.state.emailInput === '') {
this.setState({
@@ -135,96 +147,77 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
* Reneder component DOM
* @return {react element} return the DOM which rendered by component
*/
render () {
const {classes, loginWithOAuth, translate} = this.props
const paperStyle = {
minHeight: 370,
width: 450,
textAlign: 'center',
display: 'block',
margin: 'auto'
}
render() {
const { classes, loginWithOAuth, translate } = this.props
return (
<form>
<Grid container spacing={24}>
<Grid item xs={12} className={classes.contain}>
<h1 style={{
textAlign: 'center',
padding: '20px',
fontSize: '30px',
fontWeight: 500,
lineHeight: '32px',
margin: 'auto',
color: 'rgba(138, 148, 138, 0.2)'
}}>{config.settings.appName}</h1>
<h1 className='g__app-name'>{config.settings.appName}</h1>
<div className='animate-bottom'>
<Paper style={paperStyle} elevation={1} >
<div style={{ padding: '48px 40px 36px' }}>
<div style={{
paddingLeft: '40px',
paddingRight: '40px'
}}>
<div className='animate-bottom'>
<Paper className={classes.paper} elevation={1} >
<form>
<div style={{ padding: '48px 40px 36px' }}>
<div style={{
paddingLeft: '40px',
paddingRight: '40px'
}}>
<h2 style={{
textAlign: 'left',
paddingTop: '16px',
fontSize: '24px',
fontWeight: 400,
lineHeight: '32px',
margin: 0
}} className='zoomOutLCorner animated'>{translate!('login.title')}</h2>
</div>
<div style={this.styles.singinOptions as any}>
<IconButton
onClick={() => loginWithOAuth!(OAuthType.FACEBOOK)}
><div className='icon-fb icon'></div></IconButton>
<IconButton
onClick={() => loginWithOAuth!(OAuthType.GOOGLE)}
> <div className='icon-google icon'></div> </IconButton>
<IconButton
onClick={() => loginWithOAuth!(OAuthType.GITHUB)}
> <div className='icon-github icon'></div> </IconButton>
<h2 className='zoomOutLCorner animated g__paper-title'>{translate!('login.title')}</h2>
</div>
<div style={this.styles.singinOptions as any}>
<IconButton
onClick={() => loginWithOAuth!(OAuthType.FACEBOOK)}
><div className='icon-fb icon'></div></IconButton>
<IconButton
onClick={() => loginWithOAuth!(OAuthType.GOOGLE)}
> <div className='icon-google icon'></div> </IconButton>
<IconButton
onClick={() => loginWithOAuth!(OAuthType.GITHUB)}
> <div className='icon-github icon'></div> </IconButton>
</div>
<Divider style={this.styles.divider} />
<TextField
className={classes.textField}
autoFocus
onChange={this.handleInputChange}
helperText={this.state.emailInputError}
error={this.state.emailInputError.trim() !== ''}
name='emailInput'
label={translate!('login.emailLabel')}
type='email'
tabIndex={1}
/><br />
<TextField
className={classes.textField}
onChange={this.handleInputChange}
helperText={this.state.passwordInputError}
error={this.state.passwordInputError.trim() !== ''}
name='passwordInput'
label={translate!('login.passwordLabel')}
type='password'
tabIndex={2}
/><br />
<br />
<br />
<div className='login__button-box'>
<div>
<Button onClick={this.props.signupPage} tabIndex={4}>{translate!('login.createAccountButton')}</Button>
</div>
<Divider style={this.styles.divider} />
<TextField
className={classes.textField}
autoFocus
onChange={this.handleInputChange}
helperText={this.state.emailInputError}
error={this.state.emailInputError.trim() !== ''}
name='emailInput'
label={translate!('login.emailLabel')}
type='email'
tabIndex={1}
/><br />
<TextField
className={classes.textField}
onChange={this.handleInputChange}
helperText={this.state.passwordInputError}
error={this.state.passwordInputError.trim() !== ''}
name='passwordInput'
label={translate!('login.passwordLabel')}
type='password'
tabIndex={2}
/><br />
<br />
<br />
<div className='login__button-box'>
<div>
<Button onClick={this.props.signupPage} tabIndex={4}>{translate!('login.createAccountButton')}</Button>
</div>
<div >
<Button variant='raised' color='primary' onClick={this.handleForm} tabIndex={3} >{translate!('login.loginButton')}</Button>
</div>
</div>
<span className={classes.bottomPaper}>{translate!('login.forgetPasswordMessage')} <NavLink to='/resetPassword' className={classes.link}>{translate!('login.resetPasswordLabel')}</NavLink></span>
</div>
<div >
<Button variant='raised' color='primary' onClick={this.handleForm} tabIndex={3} >{translate!('login.loginButton')}</Button>
</div>
</div>
<span style={this.styles.restPassword as any}>{translate!('login.forgetPasswordMessage')} <NavLink to='/resetPassword' style={this.styles.restPasswordLink}>{translate!('login.resetPasswordLabel')}</NavLink></span>
</div>
</Paper>
</div>
</form>
</form>
</Paper>
</div>
</Grid>
</Grid>
)
}
}
@@ -260,4 +253,4 @@ const mapStateToProps = (state: any, ownProps: ILoginComponentProps) => {
}
// - Connect component to redux store
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(LoginComponent as any) as any) as any)
export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(LoginComponent as any) as any)) as typeof LoginComponent

8
src/components/notify/NotifyComponent.tsx
View File

@@ -54,6 +54,14 @@ const styles = (theme: any) => ({
maxHeight: 380,
overflowY: 'auto'
},
fullPageXs: {
[theme.breakpoints.down('xs')]: {
width: '100%',
height: '100%',
margin: 0,
overflowY: 'auto'
}
}
})

73
src/components/postWrite/PostWriteComponent.tsx
View File

@@ -49,8 +49,17 @@ import * as postActions from 'actions/postActions'
import { IPostWriteComponentProps } from './IPostWriteComponentProps'
import { IPostWriteComponentState } from './IPostWriteComponentState'
import { Post } from 'core/domain/posts'
import Grid from 'material-ui/Grid/Grid'
const styles = (theme: any) => ({
fullPageXs: {
[theme.breakpoints.down('xs')]: {
width: '100%',
height: '100%',
margin: 0,
overflowY: 'auto'
}
},
backdrop: {
top: 0,
left: 0,
@@ -62,7 +71,7 @@ const styles = (theme: any) => ({
backgroundColor: 'rgba(251, 249, 249, 0.5)',
WebkitTapHighlightColor: 'transparent'
},
root: {
content: {
padding: 0,
paddingTop: 0
},
@@ -88,7 +97,7 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
* Component constructor
* @param {object} props is an object properties of component
*/
constructor (props: IPostWriteComponentProps) {
constructor(props: IPostWriteComponentProps) {
super(props)
@@ -324,7 +333,7 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
})
}
componentWillReceiveProps (nextProps: IPostWriteComponentProps) {
componentWillReceiveProps(nextProps: IPostWriteComponentProps) {
if (!nextProps.open) {
const { postModel } = this.props
this.setState({
@@ -365,7 +374,7 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
* Reneder component DOM
* @return {react element} return the DOM which rendered by component
*/
render () {
render() {
const { classes, translate } = this.props
const { menuOpen } = this.state
@@ -423,28 +432,28 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
*/
const loadImage = (this.state.image && this.state.image !== '')
? (
<div>
<div style={{ position: 'relative', overflowY: 'hidden', overflowX: 'auto' }}>
<ul style={{ position: 'relative', whiteSpace: 'nowrap', padding: '0 0 0 16px', margin: '8px 0 0 0', paddingRight: '16px', verticalAlign: 'bottom', flexShrink: 0, listStyleType: 'none' }}>
<div style={{ display: 'flex', position: 'relative' }}>
<span onClick={this.handleRemoveImage} style={{
position: 'absolute', width: '28px', backgroundColor: 'rgba(255, 255, 255, 0.22)',
height: '28px', right: 12, top: 4, cursor: 'pointer', borderRadius: '50%',
display: 'flex', alignItems: 'center', justifyContent: 'center'
}}>
<SvgRemoveImage style={{ color: 'rgba(0, 0, 0, 0.53)' }} />
</span>
<div>
<div style={{ position: 'relative', overflowY: 'hidden', overflowX: 'auto' }}>
<ul style={{ position: 'relative', whiteSpace: 'nowrap', padding: '0 0 0 16px', margin: '8px 0 0 0', paddingRight: '16px', verticalAlign: 'bottom', flexShrink: 0, listStyleType: 'none' }}>
<div style={{ display: 'flex', position: 'relative' }}>
<span onClick={this.handleRemoveImage} style={{
position: 'absolute', width: '28px', backgroundColor: 'rgba(255, 255, 255, 0.22)',
height: '28px', right: 12, top: 4, cursor: 'pointer', borderRadius: '50%',
display: 'flex', alignItems: 'center', justifyContent: 'center'
}}>
<SvgRemoveImage style={{ color: 'rgba(0, 0, 0, 0.53)' }} />
</span>
<div style={{ display: 'inline-block', width: '100%', marginRight: '8px', transition: 'transform .25s' }}>
<li style={{ width: '100%', margin: 0, verticalAlign: 'bottom', position: 'static' }}>
<Img fileName={this.state.image} style={{ width: '100%', height: 'auto' }} />
</li>
<div style={{ display: 'inline-block', width: '100%', marginRight: '8px', transition: 'transform .25s' }}>
<li style={{ width: '100%', margin: 0, verticalAlign: 'bottom', position: 'static' }}>
<Img fileName={this.state.image} style={{ width: '100%', height: 'auto' }} />
</li>
</div>
</div>
</div>
</ul>
</ul>
</div>
</div>
</div>
) : ''
const styles = {
@@ -459,14 +468,15 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
<div style={this.props.style}>
{this.props.children}
<Dialog
BackdropProps={{className: classes.backdrop} as any}
BackdropProps={{ className: classes.backdrop } as any}
PaperProps={{className: classes.fullPageXs}}
key={this.props.id || 0}
open={this.props.open}
onClose={this.props.onRequestClose}
>
<DialogContent
className={classes.root}
style={{paddingTop: 0}}
className={classes.content}
style={{ paddingTop: 0 }}
>
@@ -478,10 +488,11 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
>
</CardHeader>
<CardContent>
<Grid item xs={12}>
<div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, overflow: 'hidden' }}>
<div style={{ position: 'relative', flexDirection: 'column', display: 'flex', flexGrow: 1, overflow: 'hidden', overflowY: 'auto', maxHeight: '300px' }}>
<TextField
autoFocus
autoFocus
value={this.state.postText}
onChange={this.handleOnChange}
placeholder={translate!('post.textareaPlaceholder')}
@@ -504,6 +515,7 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
</div>
</div>
</div>
</Grid>
</CardContent>
</Card>
</DialogContent>
@@ -515,8 +527,8 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
onClick={this.props.onRequestClose}
style={{ color: grey[800] }}
>
{translate!('post.cancelButton')}
</Button>
{translate!('post.cancelButton')}
</Button>
<Button
color='primary'
disableFocusRipple={true}
@@ -529,6 +541,7 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
</DialogActions>
</Dialog>
<Dialog
PaperProps={{className: classes.fullPageXs}}
open={this.state.galleryOpen}
onClose={this.handleCloseGallery}
@@ -545,11 +558,11 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
style={{ color: grey[800] }}
>
{translate!('post.cancelButton')}
</Button>
</Button>
</DialogActions>
</Dialog>
</div>
</div >
)
}
}

54
src/components/resetPassword/ResetPasswordComponent.tsx
View File

@@ -3,14 +3,17 @@ import React, { Component } from 'react'
import { connect } from 'react-redux'
import { NavLink, withRouter } from 'react-router-dom'
import { push } from 'react-router-redux'
import config from 'src/config'
import { getTranslate, getActiveLanguage } from 'react-localize-redux'
// - Material UI
import Paper from 'material-ui/Paper'
import TextField from 'material-ui/TextField'
import RaisedButton from 'material-ui/Button'
import Button from 'material-ui/Button'
import { withStyles } from 'material-ui/styles'
import Typography from 'material-ui/Typography'
import config from 'src/config'
import { getTranslate, getActiveLanguage } from 'react-localize-redux'
import { Grid } from 'material-ui'
// - Import actions
import * as authorizeActions from 'actions/authorizeActions'
@@ -25,6 +28,17 @@ const styles = (theme: any) => ({
},
caption: {
marginTop: 30
},
contain: {
margin: '0 auto'
},
paper: {
minHeight: 370,
maxWidth: 450,
minWidth: 337,
textAlign: 'center',
display: 'block',
margin: 'auto'
}
})
@@ -93,42 +107,21 @@ export class ResetPasswordComponent extends Component<IResetPasswordComponentPro
const {classes, translate} = this.props
const paperStyle = {
minHeight: 370,
width: 450,
textAlign: 'center',
display: 'block',
margin: 'auto'
}
return (
<div>
<Grid container spacing={24}>
<Grid item xs={12} className={classes.contain}>
<h1 style={{
textAlign: 'center',
padding: '20px',
fontSize: '30px',
fontWeight: 500,
lineHeight: '32px',
margin: 'auto',
color: 'rgba(138, 148, 138, 0.2)'
}}>{config.settings.appName}</h1>
<h1 className='g__app-name'>{config.settings.appName}</h1>
<div className='animate-bottom'>
<Paper style={paperStyle} elevation={1}>
<Paper style={classes.paper} elevation={1}>
<div style={{ padding: '48px 40px 36px' }}>
<div style={{
paddingLeft: '40px',
paddingRight: '40px'
}}>
<h2 style={{
textAlign: 'left',
paddingTop: '16px',
fontSize: '24px',
fontWeight: 400,
lineHeight: '32px',
margin: 0
}} className='zoomOutLCorner animated'>{translate!('resetPassword.title')}</h2>
<h2 className='zoomOutLCorner animated g__paper-title'>{translate!('resetPassword.title')}</h2>
</div>
<TextField
@@ -157,7 +150,8 @@ export class ResetPasswordComponent extends Component<IResetPasswordComponentPro
</div>
</Paper>
</div>
</div>
</Grid>
</Grid>
)
}
}
@@ -190,4 +184,4 @@ const mapStateToProps = (state: any, ownProps: IResetPasswordComponentProps) =>
}
// - Connect component to redux store
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ResetPasswordComponent as any) as any) as any)
export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ResetPasswordComponent as any) as any)) as typeof ResetPasswordComponent

44
src/components/setting/SettingComponent.tsx
View File

@@ -15,13 +15,25 @@ import { getTranslate, getActiveLanguage } from 'react-localize-redux'
import * as authorizeActions from 'actions/authorizeActions'
import { ISettingComponentProps } from './ISettingComponentProps'
import { ISettingComponentState } from './ISettingComponentState'
import { Grid } from 'material-ui'
const styles = (theme: any) => ({
textField: {
minWidth: 280,
marginTop: 20
}
},
contain: {
margin: '0 auto'
},
paper: {
minHeight: 370,
maxWidth: 450,
minWidth: 337,
textAlign: 'center',
display: 'block',
margin: 'auto'
},
})
/**
* Create component class
@@ -123,28 +135,15 @@ export class SettingComponent extends Component<ISettingComponentProps,ISettingC
render () {
const {classes, translate} = this.props
const paperStyle = {
minHeight: 370,
width: 450,
textAlign: 'center',
display: 'block',
margin: 'auto'
}
return (
<div>
<h1 style={{
textAlign: 'center',
padding: '20px',
fontSize: '30px',
fontWeight: 500,
lineHeight: '32px',
margin: 'auto',
color: 'rgba(138, 148, 138, 0.2)'
}}>{config.settings.appName}</h1>
return (
<Grid container spacing={24}>
<Grid item xs={12} className={classes.contain}>
<h1 className='g__app-name'>{config.settings.appName}</h1>
<div className='animate-bottom'>
<Paper style={paperStyle} elevation={1} >
<Paper className={classes.paper} elevation={1} >
<div style={{ padding: '48px 40px 36px' }}>
<div style={{
paddingLeft: '40px',
@@ -158,7 +157,7 @@ export class SettingComponent extends Component<ISettingComponentProps,ISettingC
fontWeight: 400,
lineHeight: '32px',
margin: 0
}} className='zoomOutLCorner animated'>{translate!('changePassword.title')}</h2>
}} className='zoomOutLCorner animated g__paper-title'>{translate!('changePassword.title')}</h2>
</div>
<TextField
@@ -195,7 +194,8 @@ export class SettingComponent extends Component<ISettingComponentProps,ISettingC
</div>
</Paper>
</div>
</div>
</Grid>
</Grid>
)
}
}

188
src/components/signup/SignupComponent.tsx
View File

@@ -1,5 +1,5 @@
// - Import react components
import React,{ Component } from 'react'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'react-router-redux'
import { NavLink, withRouter } from 'react-router-dom'
@@ -21,23 +21,35 @@ import StringAPI from 'api/StringAPI'
import { ISignupComponentProps } from './ISignupComponentProps'
import { ISignupComponentState } from './ISignupComponentState'
import { UserRegisterModel } from 'models/users/userRegisterModel'
import { Grid } from 'material-ui'
const styles = (theme: any) => ({
textField: {
minWidth: 280,
marginTop: 20
},
contain: {
margin: '0 auto'
},
paper: {
minHeight: 370,
maxWidth: 450,
minWidth: 337,
textAlign: 'center',
display: 'block',
margin: 'auto'
}
})
// - Create Signup component class
export class SignupComponent extends Component<ISignupComponentProps,ISignupComponentState> {
export class SignupComponent extends Component<ISignupComponentProps, ISignupComponentState> {
/**
* Component constructor
* @param {object} props is an object properties of component
*/
constructor (props: ISignupComponentProps) {
constructor(props: ISignupComponentProps) {
super(props)
this.state = {
@@ -105,12 +117,12 @@ export class SignupComponent extends Component<ISignupComponentProps,ISignupComp
*/
handleForm = () => {
const {fullNameInput, emailInput, passwordInput, confirmInput} = this.state
const {register, translate} = this.props
const { fullNameInput, emailInput, passwordInput, confirmInput } = this.state
const { register, translate } = this.props
let error = false
// Validate full name
// Validate full name
let fullNameCheck = fullNameInput.trim().toLowerCase()
if (fullNameCheck.indexOf('test') > -1
@@ -123,7 +135,7 @@ export class SignupComponent extends Component<ISignupComponentProps,ISignupComp
error = true
}
/* Validate email*/
/* Validate email*/
if (!StringAPI.isValidEmail(emailInput)) {
this.setState({
emailInputError: translate!('signup.validEmailError')
@@ -164,102 +176,84 @@ export class SignupComponent extends Component<ISignupComponentProps,ISignupComp
}
/**
* Reneder component DOM
* @return {react element} return the DOM which rendered by component
*/
render () {
/**
* Reneder component DOM
* @return {react element} return the DOM which rendered by component
*/
render() {
const {classes, translate} = this.props
const paperStyle = {
minHeight: 500,
width: 450,
textAlign: 'center',
display: 'block',
margin: 'auto'
}
const { classes, translate } = this.props
return (
<div>
<h1 style={{
textAlign: 'center',
padding: '20px',
fontSize: '30px',
fontWeight: 500,
lineHeight: '32px',
margin: 'auto',
color: 'rgba(138, 148, 138, 0.2)'
}}>{config.settings.appName}</h1>
<Grid container spacing={24}>
<Grid item xs={12} className={classes.contain}>
<h1 className='g__app-name'>{config.settings.appName}</h1>
<div className='animate-bottom'>
<Paper style={paperStyle} elevation={1} >
<div style={{padding: '48px 40px 36px'}}>
<div style={{paddingLeft: '40px',
paddingRight: '40px'}}>
<Paper className={classes.paper} elevation={1} >
<div style={{ padding: '48px 40px 36px' }}>
<div style={{
paddingLeft: '40px',
paddingRight: '40px'
}}>
<h2 style={{
textAlign: 'left',
paddingTop: '16px',
fontSize: '24px',
fontWeight: 400,
lineHeight: '32px',
margin: 0}} className='zoomOutLCorner animated'>{translate!('signup.title')}</h2>
</div>
<h2 className='zoomOutLCorner animated g__paper-title'>{translate!('signup.title')}</h2>
</div>
<TextField
className={classes.textField}
autoFocus
onChange={this.handleInputChange}
helperText={this.state.fullNameInputError}
error={this.state.fullNameInputError.trim() !== ''}
name='fullNameInput'
label={translate!('signup.fullNameLabel')}
type='text'
/><br />
<TextField
className={classes.textField}
onChange={this.handleInputChange}
helperText={this.state.emailInputError}
error={this.state.emailInputError.trim() !== ''}
name='emailInput'
label={translate!('signup.emailLabel')}
type='email'
/><br />
<TextField
className={classes.textField}
onChange={this.handleInputChange}
helperText={this.state.passwordInputError}
error={this.state.passwordInputError.trim() !== ''}
name='passwordInput'
label={translate!('signup.passwordLabel')}
type='password'
/><br />
<TextField
className={classes.textField}
onChange={this.handleInputChange}
helperText={this.state.confirmInputError}
error={this.state.confirmInputError.trim() !== ''}
name='confirmInput'
label={translate!('signup.confirmPasswordLabel')}
type='password'
/><br />
<br />
<div className='signup__button-box'>
<div>
<Button onClick={this.props.loginPage}>{translate!('signup.loginButton')}</Button>
</div>
<div>
<Button variant='raised' color='primary' onClick={this.handleForm}>{translate!('signup.createButton')}</Button>
<TextField
className={classes.textField}
autoFocus
onChange={this.handleInputChange}
helperText={this.state.fullNameInputError}
error={this.state.fullNameInputError.trim() !== ''}
name='fullNameInput'
label={translate!('signup.fullNameLabel')}
type='text'
/><br />
<TextField
className={classes.textField}
onChange={this.handleInputChange}
helperText={this.state.emailInputError}
error={this.state.emailInputError.trim() !== ''}
name='emailInput'
label={translate!('signup.emailLabel')}
type='email'
/><br />
<TextField
className={classes.textField}
onChange={this.handleInputChange}
helperText={this.state.passwordInputError}
error={this.state.passwordInputError.trim() !== ''}
name='passwordInput'
label={translate!('signup.passwordLabel')}
type='password'
/><br />
<TextField
className={classes.textField}
onChange={this.handleInputChange}
helperText={this.state.confirmInputError}
error={this.state.confirmInputError.trim() !== ''}
name='confirmInput'
label={translate!('signup.confirmPasswordLabel')}
type='password'
/><br />
<br />
<div className='signup__button-box'>
<div>
<Button onClick={this.props.loginPage}>{translate!('signup.loginButton')}</Button>
</div>
<div>
<Button variant='raised' color='primary' onClick={this.handleForm}>{translate!('signup.createButton')}</Button>
</div>
</div>
</div>
</div>
</div>
</Paper>
</div>
</div>
</div>
</Paper>
</div>
</Grid>
</Grid>
)
}
@@ -271,7 +265,7 @@ export class SignupComponent extends Component<ISignupComponentProps,ISignupComp
* @param {object} ownProps is the props belong to component
* @return {object} props of component
*/
const mapDispatchToProps = (dispatch: any,ownProps: ISignupComponentProps) => {
const mapDispatchToProps = (dispatch: any, ownProps: ISignupComponentProps) => {
return {
showError: (message: string) => {
dispatch(globalActions.showMessage(message))
@@ -291,11 +285,11 @@ const mapDispatchToProps = (dispatch: any,ownProps: ISignupComponentProps) => {
* @param {object} ownProps is the props belong to component
* @return {object} props of component
*/
const mapStateToProps = (state: any,ownProps: ISignupComponentProps) => {
return{
const mapStateToProps = (state: any, ownProps: ISignupComponentProps) => {
return {
translate: getTranslate(state.locale),
}
}
// - Connect component to redux store
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(withStyles(styles)(SignupComponent as any) as any) as any)
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SignupComponent as any) as any) as any)

27
src/components/userBox/UserBoxComponent.tsx
View File

@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { push } from 'react-router-redux'
import { getTranslate, getActiveLanguage } from 'react-localize-redux'
import classNames from 'classnames'
// - Material UI
import Paper from 'material-ui/Paper'
@@ -51,6 +52,14 @@ const styles = (theme: any) => ({
maxWidth: 360,
backgroundColor: theme.palette.background.paper
},
paper: {
height: 254,
width: 243,
margin: 10,
textAlign: 'center',
minWidth: 230,
maxWidth: '257px'
},
dialogContent: {
paddingTop: '5px',
padding: '0px 5px 5px 5px'
@@ -60,6 +69,14 @@ const styles = (theme: any) => ({
},
space: {
height: 20
},
fullPageXs: {
[theme.breakpoints.down('xs')]: {
width: '100%',
height: '100%',
margin: 0,
overflowY: 'auto'
}
}
})
@@ -83,13 +100,6 @@ export class UserBoxComponent extends Component<IUserBoxComponentProps, IUserBox
}
styles = {
paper: {
height: 254,
width: 243,
margin: 10,
textAlign: 'center',
maxWidth: '257px'
},
followButton: {
position: 'absolute',
bottom: '30px',
@@ -301,7 +311,7 @@ export class UserBoxComponent extends Component<IUserBoxComponentProps, IUserBox
const { isFollowed, followRequest, userId, isSelecteCirclesOpen, addToCircleRequest, deleteFollowingUserRequest, classes, translate } = this.props
return (
<Paper key={userId} style={this.styles.paper} elevation={1} className='grid-cell'>
<Paper key={userId} elevation={1} className={classNames('grid-cell', classes.paper)}>
<div style={{
display: 'flex',
flexDirection: 'column',
@@ -339,6 +349,7 @@ export class UserBoxComponent extends Component<IUserBoxComponentProps, IUserBox
</div>
</div>
<Dialog
PaperProps={{className: classes.fullPageXs}}
key={this.props.userId || 0}
open={isSelecteCirclesOpen === true}
onClose={this.onRequestCloseAddCircle}

17
src/styles/app.css
View File

@@ -491,6 +491,23 @@ g__input-underline::before {
g__input-underline::after {
display: none; }
.g__app-name {
text-align: center;
padding: 20px;
font-size: 30px;
font-weight: 500;
line-height: 32px;
margin: auto;
color: rgba(138, 148, 138, 0.2); }
.g__paper-title {
text-align: left;
padding-top: 16px;
font-size: 24px;
font-weight: 400;
line-height: 32px;
margin: 0; }
.master__progress {
position: fixed;
top: 0;

19
src/styles/components/_global.scss
View File

@@ -209,4 +209,23 @@ g__input-underline {
&::after {
display: none;
}
}
.g__app-name {
text-align: center;
padding: 20px;
font-size: 30px;
font-weight: 500;
line-height: 32px;
margin: auto;
color: rgba(138, 148, 138, 0.2);
}
.g__paper-title {
text-align: left;
padding-top: 16px;
font-size: 24px;
font-weight: 400;
line-height: 32px;
margin: 0
}