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

[Improvement] - [x] Verification Home button

Browse Source 
- [x] Notification max frame size
- [x] Max width for dialog ( Edit Profile)
- [x] Edit Profile Buttons show in dialog bottom becomes fixed
- [x] Change progress
- [x] Update material UI to version v1.0.0-beta.32
This commit is contained in:
Qolzam
2018-02-09 14:06:09 +07:00
parent 5b99601fec
commit bad2d31645
20 changed files with 238 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/commentGroup/CommentGroupComponent.tsx
View File

@@ -320,7 +320,7 @@ export class CommentGroupComponent extends Component<ICommentGroupComponentProps
<CommentListComponent comments={comments!} isPostOwner={this.props.isPostOwner} disableComments={this.props.disableComments} />
</Paper>)
: '')
const loadComments = (( getCommentsRequest === undefined || (getCommentsRequest && getCommentsRequest!.status !== ServerRequestStatusType.OK)) ? <LinearProgress style={this.styles.progressbar} mode='indeterminate' /> : showComments)
const loadComments = (( getCommentsRequest === undefined || (getCommentsRequest && getCommentsRequest!.status !== ServerRequestStatusType.OK)) ? <LinearProgress style={this.styles.progressbar} variant='indeterminate' /> : showComments)
/**
* Return Elements
*/

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

@@ -53,21 +53,21 @@ const styles = (theme: any) => ({
/**
* Create component class
*/
export class EditProfileComponent extends Component<IEditProfileComponentProps,IEditProfileComponentState> {
export class EditProfileComponent extends Component<IEditProfileComponentProps, IEditProfileComponentState> {
static propTypes = {
/**
* User avatar address
*/
/**
* User avatar address
*/
avatar: PropTypes.string,
/**
* User avatar address
*/
/**
* User avatar address
*/
banner: PropTypes.string,
/**
* User full name
*/
/**
* User full name
*/
fullName: PropTypes.string.isRequired
}
@@ -117,118 +117,118 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,I
}
/**
* Component constructor
* @param {object} props is an object properties of component
*/
constructor (props: IEditProfileComponentProps) {
/**
* Component constructor
* @param {object} props is an object properties of component
*/
constructor(props: IEditProfileComponentProps) {
super(props)
// Defaul state
// Defaul state
this.state = {
/**
* If it's true the winow is in small size
*/
/**
* If it's true the winow is in small size
*/
isSmall: false,
/**
* User tag line input value
*/
/**
* User tag line input value
*/
tagLineInput: props.info!.tagLine || '',
/**
* User full name input value
*/
/**
* User full name input value
*/
fullNameInput: props.info!.fullName || '',
/**
* Error message of full name input
*/
/**
* Error message of full name input
*/
fullNameInputError: '',
/**
* User banner address
*/
/**
* User banner address
*/
banner: props.banner || 'https://firebasestorage.googleapis.com/v0/b/open-social-33d92.appspot.com/o/images%2F751145a1-9488-46fd-a97e-04018665a6d3.JPG?alt=media&token=1a1d5e21-5101-450e-9054-ea4a20e06c57',
/**
* User avatar address
*/
/**
* User avatar address
*/
avatar: props.avatar || '',
/**
* It's true if the image galley for banner is open
*/
/**
* It's true if the image galley for banner is open
*/
openBanner: false,
/**
* It's true if the image gallery for avatar is open
*/
/**
* It's true if the image gallery for avatar is open
*/
openAvatar: false
}
// Binding functions to `this`
// Binding functions to `this`
this.handleUpdate = this.handleUpdate.bind(this)
this.handleRequestSetAvatar = this.handleRequestSetAvatar.bind(this)
this.handleRequestSetBanner = this.handleRequestSetBanner.bind(this)
}
/**
* Close image gallery of banner
*/
/**
* Close image gallery of banner
*/
handleCloseBannerGallery = () => {
this.setState({
openBanner: false
})
}
/**
* Open image gallery of banner
*/
/**
* Open image gallery of banner
*/
handleOpenBannerGallery = () => {
this.setState({
openBanner: true
})
}
/**
* Close image gallery of avatar
*/
/**
* Close image gallery of avatar
*/
handleCloseAvatarGallery = () => {
this.setState({
openAvatar: false
})
}
/**
* Open image gallery of avatar
*/
/**
* Open image gallery of avatar
*/
handleOpenAvatarGallery = () => {
this.setState({
openAvatar: true
})
}
/**
* Set banner image url
*/
/**
* Set banner image url
*/
handleRequestSetBanner = (url: string) => {
this.setState({
banner: url
})
}
/**
* Set avatar image url
*/
/**
* Set avatar image url
*/
handleRequestSetAvatar = (fileName: string) => {
this.setState({
avatar: fileName
})
}
/**
* Update profile on the server
*
*
* @memberof EditProfile
*/
/**
* Update profile on the server
*
*
* @memberof EditProfile
*/
handleUpdate = () => {
const {fullNameInput, tagLineInput, avatar, banner} = this.state
const { fullNameInput, tagLineInput, avatar, banner } = this.state
if (this.state.fullNameInput.trim() === '') {
this.setState({
@@ -249,10 +249,10 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,I
}
}
/**
* Handle data on input change
* @param {event} evt is an event of inputs of element on change
*/
/**
* Handle data on input change
* @param {event} evt is an event of inputs of element on change
*/
handleInputChange = (event: any) => {
const target = event.target
const value = target.type === 'checkbox' ? target.checked : target.value
@@ -268,7 +268,7 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,I
*/
handleResize = (event: any) => {
// Set initial state
// Set initial state
let width = window.innerWidth
if (width > 900) {
@@ -283,131 +283,133 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,I
}
}
componentDidMount () {
componentDidMount() {
this.handleResize(null)
}
/**
* 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 { classes, translate } = this.props
const iconButtonElement = (
<IconButton style={this.state.isSmall ? this.styles.iconButtonSmall : this.styles.iconButton}>
<MoreVertIcon style={{...(this.state.isSmall ? this.styles.iconButtonSmall : this.styles.iconButton),color: grey[400]}} viewBox='10 0 24 24' />
</IconButton>
)
<IconButton style={this.state.isSmall ? this.styles.iconButtonSmall : this.styles.iconButton}>
<MoreVertIcon style={{ ...(this.state.isSmall ? this.styles.iconButtonSmall : this.styles.iconButton), color: grey[400] }} viewBox='10 0 24 24' />
</IconButton>
)
const RightIconMenu = () => (
<div>
{iconButtonElement}
<MenuItem style={{ fontSize: '14px' }}>Reply</MenuItem>
<MenuItem style={{ fontSize: '14px' }}>Edit</MenuItem>
<MenuItem style={{ fontSize: '14px' }}>Delete</MenuItem>
</div>
)
{iconButtonElement}
<MenuItem style={{ fontSize: '14px' }}>Reply</MenuItem>
<MenuItem style={{ fontSize: '14px' }}>Edit</MenuItem>
<MenuItem style={{ fontSize: '14px' }}>Delete</MenuItem>
</div>
)
return (
<div>
{/* Edit profile dialog */}
<Dialog
key='Edit-Profile'
open={this.props.open!}
onClose={this.props.onRequestClose}
>
<DialogContent>
{/* Banner */}
<div style={{ position: 'relative' }}>
<ImgCover width='100%' height='250px' borderRadius='2px' fileName={this.state.banner} />
<div className='g__circle-black' onClick={this.handleOpenBannerGallery} style={{ position: 'absolute', right: '10px', top: '10px' }}>
<SvgCamera style={{ fill: 'rgba(255, 255, 255, 0.88)', transform: 'translate(6px, 6px)' }} />
</div>
</div>
<div className='profile__edit'>
<EventListener
target='window'
onResize={this.handleResize}
/>
<div className='left'>
<div style={{ display: 'flex', justifyContent: 'center' }}>
{/* Avatar */}
<div className='g__circle-black' onClick={this.handleOpenAvatarGallery} style={{zIndex: 1, position: 'absolute', left: '50%', display: 'inline-block', top: '52px', margin: '-18px' }}>
<SvgCamera style={{ fill: 'rgba(255, 255, 255, 0.88)', transform: 'translate(6px, 6px)' }} />
<div>
{/* Edit profile dialog */}
<Dialog
key='Edit-Profile'
open={this.props.open!}
onClose={this.props.onRequestClose}
maxWidth='sm'
>
<DialogContent>
{/* Banner */}
<div style={{ position: 'relative' }}>
<ImgCover width='100%' height='250px' borderRadius='2px' fileName={this.state.banner} />
<div className='g__circle-black' onClick={this.handleOpenBannerGallery} style={{ position: 'absolute', right: '10px', top: '10px' }}>
<SvgCamera style={{ fill: 'rgba(255, 255, 255, 0.88)', transform: 'translate(6px, 6px)' }} />
</div>
</div>
<div className='profile__edit'>
<EventListener
target='window'
onResize={this.handleResize}
/>
<div className='left'>
<div style={{ display: 'flex', justifyContent: 'center' }}>
{/* Avatar */}
<div className='g__circle-black' onClick={this.handleOpenAvatarGallery} style={{ zIndex: 1, position: 'absolute', left: '50%', display: 'inline-block', top: '52px', margin: '-18px' }}>
<SvgCamera style={{ fill: 'rgba(255, 255, 255, 0.88)', transform: 'translate(6px, 6px)' }} />
</div>
<UserAvatarComponent fullName={(this.props.info ? this.props.info.fullName : '')} fileName={this.state.avatar} size={90} style={this.styles.avatar} />
</div>
<div className='info'>
<div className='fullName'>
{this.props.fullName}
</div>
</div>
<UserAvatarComponent fullName={(this.props.info ? this.props.info.fullName : '')} fileName={this.state.avatar} size={90} style={this.styles.avatar} />
</div>
<div className='info'>
<div className='fullName'>
{this.props.fullName}
</div>
</div>
</div>
</div>
{/* Edit user information box*/}
<Paper style={this.styles.paper} elevation={1}>
<div style={this.styles.title as any}>{translate!('profile.personalInformationLabel')}</div>
<div style={this.styles.box}>
<FormControl aria-describedby='fullNameInputError'>
<InputLabel htmlFor='fullNameInput'>{translate!('profile.fullName')}</InputLabel>
<Input id='fullNameInput'
onChange={this.handleInputChange}
name='fullNameInput'
value={this.state.fullNameInput} />
<FormHelperText id='fullNameInputError'>{this.state.fullNameInputError}</FormHelperText>
</FormControl>
</div>
<br />
<div style={this.styles.box}>
<FormControl aria-describedby='tagLineInputError'>
<InputLabel htmlFor='tagLineInput'>{translate!('profile.tagline')}</InputLabel>
<Input id='tagLineInput'
onChange={this.handleInputChange}
name='tagLineInput'
value={this.state.tagLineInput} />
<FormHelperText id='tagLineInputError'>{this.state.fullNameInputError}</FormHelperText>
</FormControl>
</div>
<br />
<div style={this.styles.actions as any}>
<Button onClick={this.props.onRequestClose} > {translate!('profile.cancelButton')} </Button>
<Button raised color='primary' onClick={this.handleUpdate} style={this.styles.updateButton}> {translate!('profile.updateButton')} </Button>
</div>
</Paper>
<div style={{ height: '16px' }}></div>
</DialogContent>
</Dialog>
{/* Image gallery for banner*/}
<Dialog
open={this.state.openBanner}
onClose={this.handleCloseBannerGallery}
>
<DialogTitle className={classes.dialogTitle}>
<AppDialogTitle title={translate!('profile.chooseBanerDialogTitle')} onRequestClose={this.handleCloseBannerGallery} />
</DialogTitle>
<ImageGallery set={this.handleRequestSetBanner} close={this.handleCloseBannerGallery} />
</Dialog>
{/* Image gallery for avatar */}
<Dialog
open={this.state.openAvatar}
onClose={this.handleCloseAvatarGallery}
>
<DialogTitle className={classes.dialogTitle}>
<AppDialogTitle title={translate!('profile.chooseAvatarDialogTitle')} onRequestClose={this.handleCloseAvatarGallery} />
</DialogTitle>
<ImageGallery set={this.handleRequestSetAvatar} close={this.handleCloseAvatarGallery} />
</Dialog>
</div>
</div>
</div>
{/* Edit user information box*/}
<Paper style={this.styles.paper} elevation={1}>
<div style={this.styles.title as any}>{translate!('profile.personalInformationLabel')}</div>
<div style={this.styles.box}>
<FormControl aria-describedby='fullNameInputError'>
<InputLabel htmlFor='fullNameInput'>{translate!('profile.fullName')}</InputLabel>
<Input id='fullNameInput'
onChange={this.handleInputChange}
name='fullNameInput'
value={this.state.fullNameInput} />
<FormHelperText id='fullNameInputError'>{this.state.fullNameInputError}</FormHelperText>
</FormControl>
</div>
<br />
<div style={this.styles.box}>
<FormControl aria-describedby='tagLineInputError'>
<InputLabel htmlFor='tagLineInput'>{translate!('profile.tagline')}</InputLabel>
<Input id='tagLineInput'
onChange={this.handleInputChange}
name='tagLineInput'
value={this.state.tagLineInput} />
<FormHelperText id='tagLineInputError'>{this.state.fullNameInputError}</FormHelperText>
</FormControl>
</div>
<br />
</Paper>
<div style={{ height: '16px' }}></div>
</DialogContent>
<DialogActions>
<Button onClick={this.props.onRequestClose} > {translate!('profile.cancelButton')} </Button>
<Button variant='raised' color='primary' onClick={this.handleUpdate} style={this.styles.updateButton}> {translate!('profile.updateButton')} </Button>
</DialogActions>
</Dialog>
{/* Image gallery for banner*/}
<Dialog
open={this.state.openBanner}
onClose={this.handleCloseBannerGallery}
>
<DialogTitle className={classes.dialogTitle}>
<AppDialogTitle title={translate!('profile.chooseBanerDialogTitle')} onRequestClose={this.handleCloseBannerGallery} />
</DialogTitle>
<ImageGallery set={this.handleRequestSetBanner} close={this.handleCloseBannerGallery} />
</Dialog>
{/* Image gallery for avatar */}
<Dialog
open={this.state.openAvatar}
onClose={this.handleCloseAvatarGallery}
>
<DialogTitle className={classes.dialogTitle}>
<AppDialogTitle title={translate!('profile.chooseAvatarDialogTitle')} onRequestClose={this.handleCloseAvatarGallery} />
</DialogTitle>
<ImageGallery set={this.handleRequestSetAvatar} close={this.handleCloseAvatarGallery} />
</Dialog>
</div>
)
}
}

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

@@ -95,8 +95,8 @@ export class EmailVerificationComponent extends Component<IEmailVerificationComp
{translate!('emailVerification.description')}
</p>
<div style={this.styles.buttons}>
{/* <Button raised style={this.styles.homeButton} color='primary' onClick={() => this.props.homePage()}> {translate!('emailVerification.homeButton')} </Button> */}
<Button raised color='primary' onClick={() => this.props.sendEmailVerification()}> {translate!('emailVerification.sendButton')} </Button>
<Button variant='raised' style={this.styles.homeButton} color='primary' onClick={() => this.props.homePage()}> {translate!('emailVerification.homeButton')} </Button>
<Button variant='raised' color='primary' onClick={() => this.props.sendEmailVerification()}> {translate!('emailVerification.sendButton')} </Button>
</div>
<div>
</div>

2
src/components/homeHeader/HomeHeaderComponent.tsx
View File

@@ -201,7 +201,7 @@ export class HomeHeaderComponent extends Component<IHomeHeaderComponentProps, IH
<SvgDehaze color='primary' style={{ cursor: 'pointer' }} />
</IconButton>
{/* Header title */}
<Typography type='title' color='primary' style={{ marginLeft: '15px' }} >
<Typography variant='title' color='primary' style={{ marginLeft: '15px' }} >
{config.settings.appName}
</Typography>
<div className='homeHeader__title-root'>

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

@@ -208,7 +208,7 @@ export class ImageGalleryComponent extends Component<IImageGalleryComponentProps
type='file'
/>
<label htmlFor='raised-button-file'>
<Button raised component='span' style={this.styles.uploadButton as any}>
<Button variant='raised' component='span' style={this.styles.uploadButton as any}>
{translate!('imageGallery.uploadButton')}
</Button>
</label>

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

@@ -217,7 +217,7 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
<Button onClick={this.props.signupPage} tabIndex={4}>{translate!('login.createAccountButton')}</Button>
</div>
<div >
<Button raised color='primary' onClick={this.handleForm} tabIndex={3} >{translate!('login.loginButton')}</Button>
<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>

2
src/components/master/MasterComponent.tsx
View File

@@ -132,7 +132,7 @@ export class MasterComponent extends Component<IMasterComponentProps, IMasterCom
<div id='master'>
{sendFeedbackStatus ? <SendFeedback /> : ''}
<div className='master__progress' style={{ display: (progress.visible ? 'block' : 'none') }}>
<LinearProgress mode='determinate' value={progress.percent} />
<LinearProgress variant='determinate' value={progress.percent} />
</div>
<div className='master__loading animate-fading2' style={{ display: (global.showTopLoading ? 'flex' : 'none') }}>
<div className='title'>Loading ... </div>

2
src/components/masterLoading/MasterLoadingComponent.tsx
View File

@@ -26,7 +26,7 @@ export default class MasterLoadingComponent extends Component<IMasterLoadingComp
<CircularProgress
color='secondary'
size={50}
mode='determinate'
variant='determinate'
value={25}
min={0}
max={50}

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

@@ -28,7 +28,8 @@ const styles = (theme: any) => ({
maxWidth: 360,
backgroundColor: '#efefef',
minHeight: 376,
display: 'flex'
maxHeight: '380px',
display: 'flex',
},
noNotify: {
color: '#888888',
@@ -44,6 +45,12 @@ const styles = (theme: any) => ({
zIndex: 1,
maxWidth: 500,
overflowY: 'auto'
},
popper: {
maxHeight: '380px'
},
overflowHidden: {
overflow: 'hidden'
}
})
@@ -131,7 +138,7 @@ export class NotifyComponent extends Component<INotifyComponentProps, INotifyCom
<ClickAwayListener onClickAway={onRequestClose}>
<Grow in={open} style={{ transformOrigin: '0 0 0' }}>
<Paper className={classes.root} elevation={4} >
<Paper className={classNames(classes.root, { [classes.overflowHidden]: !open })} elevation={4} >
{items.length > 0 ? <List>{items}</List> : noNotify}

2
src/components/post/PostComponent.tsx
View File

@@ -468,7 +468,7 @@ export class PostComponent extends Component<IPostComponentProps, IPostComponent
</MenuList>)
: <div>
<TextField autoFocus fullWidth={true} id='text-field-default' defaultValue={`${location.origin}/${post.ownerUserId}/posts/${post.id}`} />
<Typography className={classNames('animate-top', classes.clipboard)} type='headline' component='h2'>
<Typography className={classNames('animate-top', classes.clipboard)} variant='headline' component='h2'>
Link has been copied to clipboard ...
</Typography>
</div>}

2
src/components/profileHeader/ProfileHeaderComponent.tsx
View File

@@ -201,7 +201,7 @@ export class ProfileHeaderComponent extends Component<IProfileHeaderComponentPro
</div>
<div className='right'>
{isAuthedUser ? (<div style={this.state.isSmall ? styles.editButtonSmall : styles.editButton}>
<Button raised onClick={this.props.openEditor}>
<Button variant='raised' onClick={this.props.openEditor}>
{translate!('profile.editProfileButton')}
</Button>
</div>) : ''}

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

@@ -148,10 +148,10 @@ export class ResetPasswordComponent extends Component<IResetPasswordComponentPro
<Button onClick={this.props.loginPage}>{translate!('resetPassword.backButton')}</Button>
</div>
<div>
<Button raised color='primary' onClick={this.handleForm}>{translate!('resetPassword.resetPasswordButton')} </Button>
<Button variant='raised' color='primary' onClick={this.handleForm}>{translate!('resetPassword.resetPasswordButton')} </Button>
</div>
</div>
<Typography className={classes.caption} type='caption' component='p'>
<Typography className={classes.caption} variant='caption' component='p'>
{translate!('resetPassword.description')}
</Typography>
</div>

2
src/components/sendFeedback/SendFeedbackComponent.tsx
View File

@@ -133,7 +133,7 @@ export class SendFeedbackComponent extends Component<ISendFeedbackComponentProps
<CircularProgress
color='secondary'
size={50}
mode='determinate'
variant='determinate'
value={25}
min={0}
max={50}

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

@@ -187,7 +187,7 @@ export class SettingComponent extends Component<ISettingComponentProps,ISettingC
<Button onClick={this.props.homePage} > {translate!('changePassword.homeButton')} </Button>
</div>
<div>
<Button raised color='primary' onClick={this.handleForm}> {translate!('changePassword.changePasswordButton')} </Button>
<Button variant='raised' color='primary' onClick={this.handleForm}> {translate!('changePassword.changePasswordButton')} </Button>
</div>
</div>

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

@@ -251,7 +251,7 @@ export class SignupComponent extends Component<ISignupComponentProps,ISignupComp
<Button onClick={this.props.loginPage}>{translate!('signup.loginButton')}</Button>
</div>
<div>
<Button raised color='primary' onClick={this.handleForm}>{translate!('signup.createButton')}</Button>
<Button variant='raised' color='primary' onClick={this.handleForm}>{translate!('signup.createButton')}</Button>
</div>
</div>

1
src/styles/app.css
View File

@@ -494,7 +494,6 @@ g__input-underline::after {
.master__progress {
position: fixed;
top: 0;
top: 56px;
z-index: 1501;
width: 100%; }

1
src/styles/components/_master.scss
View File

@@ -1,7 +1,6 @@
.master__progress {
position: fixed;
top: 0;
top: 56px;
z-index: 1501;
width: 100%;
}