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

Improve UI avatar and solve delete image bug

Browse Source
This commit is contained in:
Qolzam
2017-08-25 16:04:55 +07:00
parent bca0752535
commit b198717ae9
15 changed files with 51 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/actions/imageGalleryActions.jsx
View File

@@ -94,7 +94,7 @@ export const dbSaveImage = (imageURL,imageFullPath) => {
* Delete an image from database
* @param {string} id of image
*/
export const dbDeleteImage = (fullPath) => {
export const dbDeleteImage = (id) => {
return (dispatch, getState) => {
// Get current user id
@@ -102,11 +102,11 @@ export const dbDeleteImage = (fullPath) => {
// Write the new data simultaneously in the list
var updates = {};
updates[`userFiles/${uid}/files/${fullPath}`] = null;
updates[`userFiles/${uid}/files/images/${id}`] = null;
return firebaseRef.update(updates).then((result) => {
dispatch(deleteImage(fullPath))
console.log('image removed: ', fullPath);
dispatch(deleteImage(id))
console.log('image removed: ', id);
}, (error) => {
console.log(error);
});

2
app/actions/userActions.jsx
View File

@@ -85,7 +85,7 @@ export const dbUpdateUserInfo = (newInfo) => {
let info = getState().user.info[uid]
let updatedInfo = {
avatar: newInfo.avatar || info.avatar || '',
banner: newInfo.banner || info.banner || '',
banner: newInfo.banner || info.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',
email: newInfo.email || info.email || '',
fullName: newInfo.fullName || info.fullName || '',
tagLine: newInfo.tagLine || info.tagLine || ''

4
app/components/Blog.jsx
View File

@@ -208,7 +208,7 @@ export class Blog extends Component {
<ListItem
primaryText={<span style={{ color: grey400, cursor: "text" }}> What's new with you? </span>}
leftAvatar={<UserAvatar fileName={this.props.avatar} size={36} />}
leftAvatar={<UserAvatar fullName={this.props.fullName} fileName={this.props.avatar} size={36} />}
rightIcon={<SvgCamera />}
style={{ padding: "7px 0px", fontWeight: "200" }}
onTouchTap={this.handleOpenPostWrite}
@@ -263,7 +263,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
const mapStateToProps = (state, ownProps) => {
return {
avatar: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].avatar : '',
fullName: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].fullName : ''
}
}

2
app/components/Circle.jsx
View File

@@ -145,7 +145,7 @@ export class Circle extends Component {
style={{backgroundColor: '#e2e2e2'}}
value={2}
primaryText={fullName}
leftAvatar={<UserAvatar fileName={avatar}/>}
leftAvatar={<UserAvatar fullName={fullName} fileName={avatar}/>}
onClick={()=> this.props.goTo(`/${key}`)}
/>)

6
app/components/Comment.jsx
View File

@@ -255,7 +255,7 @@ export class Comment extends Component {
<div className="animate-top" style={styles.comment} key={comment.id}>
<Paper zDepth={0} className="animate2-top10" style={{ position: "relative", padding: "", display: (!this.state.display ? "block" : "none") }}>
<div style={{ marginLeft: "0px", padding: "16px 56px 0px 72px", position: "relative" }}>
<NavLink to={`/${userId}`}><UserAvatar fileName={this.props.avatar} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", position: "absolute", top: "8px", left: "16px" }} size={36} /></NavLink>
<NavLink to={`/${userId}`}><UserAvatar fullName={this.props.fullName} fileName={this.props.avatar} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", position: "absolute", top: "8px", left: "16px" }} size={36} /></NavLink>
<NavLink to={`/${userId}`}> <Author /></NavLink>
{(!this.props.isCommentOwner && !this.props.isPostOwner && this.props.disableComments )? '' : (<RightIconMenu />)}
<div style={{ outline: "none", marginLeft: "16px", flex: "auto", flexGrow: 1 }}>
@@ -300,11 +300,13 @@ const mapDispatchToProps = (dispatch, ownProps) => {
const mapStateToProps = (state, ownProps) => {
const {uid} = state.authorize
const avatar = state.user.info && state.user.info[ownProps.comment.userId] ? state.user.info[ownProps.comment.userId].avatar || '' : ''
const fullName = state.user.info && state.user.info[ownProps.comment.userId] ? state.user.info[ownProps.comment.userId].fullName || '' : ''
return {
uid: uid,
isCommentOwner: (uid === ownProps.comment.userId),
info: state.user.info,
avatar
avatar,
fullName
}

6
app/components/CommentGroup.jsx
View File

@@ -142,9 +142,10 @@ static propTypes = {
const {userInfo} = this.props
const commentAvatar = userInfo && userInfo[comment.userId] ? userInfo[comment.userId].avatar || '' : ''
const commentFullName = userInfo && userInfo[comment.userId] ? userInfo[comment.userId].fullName || '' : ''
return (<ListItem key={index} style={{ height: "60px", position: "", zIndex: "" }} innerDivStyle={{ padding: "6px 16px 16px 72px" }}
leftAvatar={<UserAvatar fileName={commentAvatar} style={{ top: "8px" }} size={36} />}
leftAvatar={<UserAvatar fullName={commentFullName} fileName={commentAvatar} style={{ top: "8px" }} size={36} />}
secondaryText={<div style={{ height: "" }}>
<span style={{
fontSize: "13px",
@@ -209,7 +210,7 @@ static propTypes = {
<Paper zDepth={0} className="animate2-top10" style={{ position: "relative", overflowY: "auto", padding: "12px 16px", display: (this.props.open ? "block" : "none") }}>
<div style={{ display: "flex" }}>
<UserAvatar fileName={this.props.avatar} style={{ flex: "none", margin: "4px 0px" }} size={36} />
<UserAvatar fullName={this.props.fullName} fileName={this.props.avatar} style={{ flex: "none", margin: "4px 0px" }} size={36} />
<div style={{ outline: "none", marginLeft: "16px", flex: "auto", flexGrow: 1 }}>
<TextField
value={this.state.commentText}
@@ -261,6 +262,7 @@ const mapStateToProps = (state, ownProps) => {
return {
comments: state.comment.postComments[ownProps.postId],
avatar: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].avatar || '' : '',
fullName: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].fullName || '' : '',
userInfo: state.user.info
}

4
app/components/EditProfile.jsx
View File

@@ -88,7 +88,7 @@ export class EditProfile extends Component {
/**
* User banner address
*/
banner: this.props.banner || '',
banner: this.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
*/
@@ -348,7 +348,7 @@ export class EditProfile extends Component {
<SvgCamera style={{ fill: 'rgba(255, 255, 255, 0.88)', transform: 'translate(6px, 6px)' }} />
</div>
<UserAvatar fileName={this.state.avatar} size={90} style={styles.avatar} />
<UserAvatar fullName={(this.props.info ? this.props.info.fullName : '')} fileName={this.state.avatar} size={90} style={styles.avatar} />
</div>
<div className='info'>
<div className='fullName'>

2
app/components/HomeHeader.jsx
View File

@@ -231,6 +231,7 @@ export class HomeHeader extends Component {
{/* User avatar*/}
<UserAvatar
onTouchTap={this.handleAvatarTouchTap}
fullName={this.props.fullName}
fileName={this.props.avatar}
size={32}
style={styles.avatarStyle}
@@ -276,6 +277,7 @@ const mapStateToProps = (state, ownProps) => {
: 0
return {
avatar: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].avatar : '',
fullName: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].fullName : '',
title: state.global.headerTitle,
notifyCount
}

17
app/components/ImageGallery.jsx
View File

@@ -68,8 +68,8 @@ export class ImageGallery extends Component {
* @param {event} evt passed by on click event on delete image
* @param {integer} id is the image identifier which selected to delete
*/
handleDeleteImage = (evt, fullPath) => {
this.props.deleteImage(fullPath)
handleDeleteImage = (evt, id) => {
this.props.deleteImage(id)
}
componentDidMount() {
@@ -88,12 +88,10 @@ export class ImageGallery extends Component {
handleSendResizedImage = (event) => {
const { resizedImage, fileName } = event.detail
const {saveImageGallery} = this.props
const {saveImageGallery, progressChange} = this.props
FileAPI.uploadImage(resizedImage, fileName, (percent, status) => {
console.log('============= Upload progress ===============');
console.log(percent);
console.log('====================================');
progressChange(percent,status)
}).then((result) => {
/* Add image to image gallery */
@@ -126,7 +124,7 @@ export class ImageGallery extends Component {
return (<GridTile
key={image.id}
title={<SvgDelete hoverColor={grey200} color="white" color="white" style={{ marginLeft: "5px", cursor: "pointer" }} onClick={evt => this.handleDeleteImage(evt, image.fullPath)} />}
title={<SvgDelete hoverColor={grey200} color="white" color="white" style={{ marginLeft: "5px", cursor: "pointer" }} onClick={evt => this.handleDeleteImage(evt, image.id)} />}
subtitle={<span></span>}
actionIcon={<SvgAddImage hoverColor={grey200} color="white" style={{ marginRight: "5px", cursor: "pointer" }} onClick={evt => this.handleSetImage(evt, image.URL,image.fullPath)} />}
>
@@ -225,7 +223,8 @@ export class ImageGallery extends Component {
const mapDispatchToProps = (dispatch, ownProps) => {
return {
saveImageGallery: (imageURL,imageFullPath) => dispatch(imageGalleryActions.dbSaveImage(imageURL,imageFullPath)),
deleteImage: (fullPath) => dispatch(imageGalleryActions.dbDeleteImage(fullPath))
deleteImage: (id) => dispatch(imageGalleryActions.dbDeleteImage(id)),
progressChange : (percent,status) => dispatch(globalActions.progressChange(percent, status))
}
}

2
app/components/NotifyItem.jsx
View File

@@ -101,7 +101,7 @@ export class NotifyItem extends Component {
goTo(`/${notifierUserId}`)
}}
>
<UserAvatar fileName={avatar} />
<UserAvatar fullName={fullName} fileName={avatar} />
</NavLink>
</div>
<div className='info'>

5
app/components/Post.jsx
View File

@@ -349,14 +349,14 @@ static propTypes = {
</IconMenu>
)
const {ownerUserId,setHomeTitle, goTo, ownerDisplayName,creationDate, avatar, isPostOwner,image, body} = this.props
const {ownerUserId,setHomeTitle, goTo, ownerDisplayName,creationDate, avatar, fullName, isPostOwner,image, body} = this.props
// Define variables
return (
<Card>
<CardHeader
title={<NavLink to={`/${ownerUserId}`}>{ownerDisplayName}</NavLink>}
subtitle={moment.unix(creationDate).fromNow() + " | public"}
avatar={<NavLink to={`/${ownerUserId}`}><UserAvatar fileName={avatar} size={36} /></NavLink>}
avatar={<NavLink to={`/${ownerUserId}`}><UserAvatar fullName={fullName} fileName={avatar} size={36} /></NavLink>}
>
{isPostOwner ? ( <div style={styles.rightIconMenu}><RightIconMenu /></div>) : ''}
</CardHeader>
@@ -482,6 +482,7 @@ const mapStateToProps = (state, ownProps) => {
return {
avatar: state.user.info && state.user.info[ownProps.ownerUserId] ? state.user.info[ownProps.ownerUserId].avatar || '' : '',
fullName: state.user.info && state.user.info[ownProps.ownerUserId] ? state.user.info[ownProps.ownerUserId].fullName || '' : '',
commentCount: state.comment.postComments[ownProps.id] ? Object.keys(state.comment.postComments[ownProps.id]).length : 0,
voteCount: state.vote.postVotes[ownProps.id] ? Object.keys(state.vote.postVotes[ownProps.id]).length : 0,
userVoteStatus: votes && Object.keys(votes).filter((key) => votes[key].userId === state.authorize.uid)[0] ? true : false,

2
app/components/PostWrite.jsx
View File

@@ -329,7 +329,7 @@ export class PostWrite extends Component {
<MenuItem onClick={this.handleToggleSharing} style={{ fontSize: "14px" }}>{!this.state.disableSharing ? 'Disable sharing' : 'Enable sharing'}</MenuItem>
</IconMenu>
)
var postAvatar = <UserAvatar fileName={this.props.avatar} style={{ top: "8px" }} size={40} />
var postAvatar = <UserAvatar fullName={this.props.name} fileName={this.props.avatar} style={{ top: "8px" }} size={40} />
var author = (
<div>

5
app/components/ProfileHead.jsx
View File

@@ -181,7 +181,8 @@ export class ProfileHead extends Component {
<div>
<Parallax strength={500} className="profile__parallax" bgStyle={{ position: 'relative' }}>
<Background>
<ImgCover width='100%' height='510px' borderRadius='2px' fileName={this.props.banner || "a955488e-4a78-4bfb-8e8d-e0eb345386cd.jpeg"} />
<ImgCover width='100%' height='510px' borderRadius='2px'
fileName={this.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"} />
</Background>
</Parallax>
@@ -192,7 +193,7 @@ export class ProfileHead extends Component {
/>
<div className='left'>
{/* User avatar*/}
<div style={{ display: 'flex', justifyContent: 'center' }}><UserAvatar fileName={this.props.avatar} size={60} style={styles.avatar} /></div>
<div style={{ display: 'flex', justifyContent: 'center' }}><UserAvatar fullName={this.props.fullName} fileName={this.props.avatar} size={60} style={styles.avatar} /></div>
<div className='info'>
<div className='fullName'>
{this.props.fullName}

17
app/components/UserAvatar.jsx
View File

@@ -16,7 +16,7 @@ import * as imageGalleryActions from 'imageGalleryActions'
/**
* Create component class
*/
export class ImgCover extends Component {
export class UserAvatar extends Component {
static propTypes = {
@@ -24,6 +24,10 @@ export class ImgCover extends Component {
* Use for getting url address from server
*/
fileName: PropTypes.string.isRequired,
/**
* User full name
*/
fullName: PropTypes.string.isRequired,
/**
* Avatar style
*/
@@ -62,11 +66,14 @@ export class ImgCover extends Component {
* @return {react element} return the DOM which rendered by component
*/
render() {
let { fileName, style, size, onTouchTap } = this.props
let { fileName, fullName, style, size, onTouchTap } = this.props
return (
<Avatar src={fileName || ''} size={size || 36} style={style} onTouchTap={onTouchTap} />
<div style={{display: 'inherit'}}>
{(fileName && fileName !== '' && fileName !== 'noImage' )
? ( <Avatar backgroundColor='#ffffff' src={fileName} size={size || 36} style={style} onTouchTap={onTouchTap} />)
: (<Avatar backgroundColor='#00bcd4' size={size || 36} style={style} onTouchTap={onTouchTap}>{fullName.slice(0, 1)}</Avatar>) }
</div>
)
}
}
@@ -99,4 +106,4 @@ const mapStateToProps = (state, ownProps) => {
}
// - Connect component to redux store
export default connect(mapStateToProps, mapDispatchToProps)(ImgCover)
export default connect(mapStateToProps, mapDispatchToProps)(UserAvatar)

4
app/components/UserBox.jsx
View File

@@ -200,6 +200,7 @@ export class UserBox extends Component {
}}>
<div onClick={() => this.props.goTo(`/${this.props.userId}`)} style={{cursor:'pointer'}}>
<UserAvatar
fullName={this.props.fullName}
fileName={this.props.avatar}
size={90}
/>
@@ -285,7 +286,8 @@ const mapStateToProps = (state, ownProps) => {
userBelongCircles: userBelongCircles || [],
belongCirclesCount: userBelongCircles.length || 0,
firstBelongCircle: userBelongCircles ? (circles ? circles[userBelongCircles[0]] : {}) : {},
avatar: state.user.info && state.user.info[ownProps.userId] ? state.user.info[ownProps.userId].avatar || '' : ''
avatar: state.user.info && state.user.info[ownProps.userId] ? state.user.info[ownProps.userId].avatar || '' : '',
fullName: state.user.info && state.user.info[ownProps.userId] ? state.user.info[ownProps.userId].fullName || '' : ''
}
}