diff options
Diffstat (limited to 'front/odiparpack/app/components/CardPaper')
9 files changed, 887 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/CardPaper/GeneralCard.js b/front/odiparpack/app/components/CardPaper/GeneralCard.js new file mode 100644 index 0000000..85f7787 --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/GeneralCard.js @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import ShareIcon from '@material-ui/icons/Share'; +import Comment from '@material-ui/icons/Comment'; +import { Card, CardActions, CardContent, IconButton } from '@material-ui/core'; +import styles from './cardStyle-jss'; + + +class GeneralCard extends React.Component { + render() { + const { + classes, + children, + liked, + shared, + commented + } = this.props; + return ( + <Card className={classes.card}> + <CardContent> + {children} + </CardContent> + <CardActions className={classes.actions}> + <IconButton aria-label="Add to favorites" className={classes.button}> + <FavoriteIcon className={liked > 0 && classes.liked} /> + <span className={classes.num}>{liked}</span> + </IconButton> + <IconButton aria-label="Share" className={classes.button}> + <ShareIcon className={shared > 0 && classes.shared} /> + <span className={classes.num}>{shared}</span> + </IconButton> + <IconButton aria-label="Comment" className={classes.rightIcon}> + <Comment /> + <span className={classes.num}>{commented}</span> + </IconButton> + </CardActions> + </Card> + ); + } +} + +GeneralCard.propTypes = { + classes: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, + liked: PropTypes.number.isRequired, + shared: PropTypes.number.isRequired, + commented: PropTypes.number.isRequired, +}; + +export default withStyles(styles)(GeneralCard); diff --git a/front/odiparpack/app/components/CardPaper/IdentityCard.js b/front/odiparpack/app/components/CardPaper/IdentityCard.js new file mode 100644 index 0000000..4f4bd6c --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/IdentityCard.js @@ -0,0 +1,70 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import LocalPhone from '@material-ui/icons/LocalPhone'; +import LocationOn from '@material-ui/icons/LocationOn'; +import { + Card, Typography, CardContent, + ListItem, ListItemText, ListItemAvatar, + Avatar, Divider +} from '@material-ui/core'; +import styles from './cardStyle-jss'; + + +class IdentityCard extends React.Component { + render() { + const { + classes, + title, + name, + avatar, + phone, + address, + } = this.props; + return ( + <Card className={classes.card}> + <CardContent> + <Typography variant="subtitle1">{title}</Typography> + <Divider className={classes.divider} /> + <ListItem> + <ListItemAvatar> + <Avatar + alt={name} + src={avatar} + className={classes.avatar} + /> + </ListItemAvatar> + <ListItemText primary="Name" secondary={name} /> + </ListItem> + <ListItem> + <ListItemAvatar> + <Avatar> + <LocalPhone /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Phone" secondary={phone} /> + </ListItem> + <ListItem> + <ListItemAvatar> + <Avatar> + <LocationOn /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Address" secondary={address} /> + </ListItem> + </CardContent> + </Card> + ); + } +} + +IdentityCard.propTypes = { + classes: PropTypes.object.isRequired, + title: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + avatar: PropTypes.string.isRequired, + phone: PropTypes.string.isRequired, + address: PropTypes.string.isRequired, +}; + +export default withStyles(styles)(IdentityCard); diff --git a/front/odiparpack/app/components/CardPaper/NewsCard.js b/front/odiparpack/app/components/CardPaper/NewsCard.js new file mode 100644 index 0000000..f9994d8 --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/NewsCard.js @@ -0,0 +1,46 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Card, CardMedia, CardActions, CardContent, Button } from '@material-ui/core'; +import styles from './cardStyle-jss'; + + +class NewsCard extends React.Component { + render() { + const { + classes, + children, + title, + image, + } = this.props; + return ( + <Card className={classes.cardMedia}> + <CardMedia + className={classes.media} + image={image} + title={title} + /> + <CardContent> + {children} + </CardContent> + <CardActions> + <Button size="small" color="primary"> + Share + </Button> + <Button size="small" color="primary"> + Learn More + </Button> + </CardActions> + </Card> + ); + } +} + +NewsCard.propTypes = { + classes: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + image: PropTypes.string.isRequired, +}; + +export default withStyles(styles)(NewsCard); diff --git a/front/odiparpack/app/components/CardPaper/PlayerCard.js b/front/odiparpack/app/components/CardPaper/PlayerCard.js new file mode 100644 index 0000000..eabbb3a --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/PlayerCard.js @@ -0,0 +1,66 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import SkipPreviousIcon from '@material-ui/icons/SkipPrevious'; +import PlayArrowIcon from '@material-ui/icons/PlayArrow'; +import SkipNextIcon from '@material-ui/icons/SkipNext'; +import { Typography, Card, CardMedia, CardContent, IconButton } from '@material-ui/core'; +import styles from './cardStyle-jss'; + + +class PlayerCard extends React.Component { + state = { expanded: false }; + + handleExpandClick = () => { + this.setState({ expanded: !this.state.expanded }); + }; + + render() { + const { + classes, + theme, + title, + artist, + cover, + } = this.props; + + return ( + <Card className={classes.cardPlayer}> + <div className={classes.details}> + <CardContent className={classes.content}> + <Typography variant="h5">{title}</Typography> + <Typography variant="subtitle1" color="textSecondary"> + {artist} + </Typography> + </CardContent> + <div className={classes.controls}> + <IconButton aria-label="Previous"> + {theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />} + </IconButton> + <IconButton aria-label="Play/pause"> + <PlayArrowIcon className={classes.playIcon} /> + </IconButton> + <IconButton aria-label="Next"> + {theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />} + </IconButton> + </div> + </div> + <CardMedia + className={classes.cover} + image={cover} + title={title} + /> + </Card> + ); + } +} + +PlayerCard.propTypes = { + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, + title: PropTypes.string.isRequired, + artist: PropTypes.string.isRequired, + cover: PropTypes.string.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(PlayerCard); diff --git a/front/odiparpack/app/components/CardPaper/PostCard.js b/front/odiparpack/app/components/CardPaper/PostCard.js new file mode 100644 index 0000000..9c8f05b --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/PostCard.js @@ -0,0 +1,142 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import ShareIcon from '@material-ui/icons/Share'; +import Comment from '@material-ui/icons/Comment'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +import { + Typography, + Card, + Menu, + MenuItem, + CardHeader, + CardMedia, + CardContent, + CardActions, + IconButton, + Avatar, +} from '@material-ui/core'; +import styles from './cardStyle-jss'; + + +const optionsOpt = [ + 'Report this post', + 'Hide this post', + 'Copy link', +]; + +const ITEM_HEIGHT = 48; + +class PostCard extends React.Component { + state = { anchorElOpt: null }; + + handleClickOpt = event => { + this.setState({ anchorElOpt: event.currentTarget }); + }; + + handleCloseOpt = () => { + this.setState({ anchorElOpt: null }); + }; + + render() { + const { + classes, + avatar, + name, + date, + image, + content, + liked, + shared, + commented + } = this.props; + const { anchorElOpt } = this.state; + return ( + <Card className={classes.cardSocmed}> + <CardHeader + avatar={ + <Avatar alt="avatar" src={avatar} className={classes.avatar} /> + } + action={( + <IconButton + aria-label="More" + aria-owns={anchorElOpt ? 'long-menu' : null} + aria-haspopup="true" + className={classes.button} + onClick={this.handleClickOpt} + > + <MoreVertIcon /> + </IconButton> + )} + title={name} + subheader={date} + /> + <Menu + id="long-menu" + anchorEl={anchorElOpt} + open={Boolean(anchorElOpt)} + onClose={this.handleCloseOpt} + PaperProps={{ + style: { + maxHeight: ITEM_HEIGHT * 4.5, + width: 200, + }, + }} + > + {optionsOpt.map(option => ( + <MenuItem key={option} selected={option === 'Edit Profile'} onClick={this.handleCloseOpt}> + {option} + </MenuItem> + ))} + </Menu> + { image !== '' + && ( + <CardMedia + className={classes.media} + image={image} + title="Contemplative Reptile" + /> + ) + } + <CardContent> + <Typography component="p"> + {content} + </Typography> + </CardContent> + <CardActions className={classes.actions}> + <IconButton aria-label="Add to favorites" className={classes.button}> + <FavoriteIcon className={liked > 0 && classes.liked} /> + <span className={classes.num}>{liked}</span> + </IconButton> + <IconButton aria-label="Share" className={classes.button}> + <ShareIcon className={shared > 0 && classes.shared} /> + <span className={classes.num}>{shared}</span> + </IconButton> + <IconButton aria-label="Comment" className={classes.rightIcon}> + <Comment /> + <span className={classes.num}>{commented}</span> + </IconButton> + </CardActions> + </Card> + ); + } +} + +PostCard.propTypes = { + classes: PropTypes.object.isRequired, + avatar: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + date: PropTypes.string.isRequired, + image: PropTypes.string, + content: PropTypes.string.isRequired, + liked: PropTypes.number.isRequired, + shared: PropTypes.number.isRequired, + commented: PropTypes.number.isRequired, +}; + +PostCard.defaultProps = { + image: '' +}; + +export default withStyles(styles)(PostCard); diff --git a/front/odiparpack/app/components/CardPaper/ProductCard.js b/front/odiparpack/app/components/CardPaper/ProductCard.js new file mode 100644 index 0000000..967e2fd --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/ProductCard.js @@ -0,0 +1,134 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { isWidthUp } from '@material-ui/core/withWidth'; +import classNames from 'classnames'; +import AddShoppingCart from '@material-ui/icons/AddShoppingCart'; +import Type from 'ba-styles/Typography.scss'; +import { + Typography, + withWidth, + Card, + IconButton, + Tooltip, + CardMedia, + CardActions, + CardContent, + Chip, + Fab, + Button, +} from '@material-ui/core'; +import Rating from '../Rating/Rating'; +import styles from './cardStyle-jss'; + + +class ProductCard extends React.Component { + render() { + const { + classes, + discount, + soldout, + thumbnail, + name, + desc, + ratting, + price, + prevPrice, + list, + detailOpen, + addToCart, + width, + } = this.props; + return ( + <Card className={classNames(classes.cardProduct, isWidthUp('sm', width) && list ? classes.cardList : '')}> + <div className={classes.status}> + {discount !== '' && ( + <Chip label={'Discount ' + discount} className={classes.chipDiscount} /> + )} + {soldout && ( + <Chip label="Sold Out" className={classes.chipSold} /> + )} + </div> + <CardMedia + className={classes.mediaProduct} + image={thumbnail} + title={name} + /> + <CardContent className={classes.floatingButtonWrap}> + {!soldout && ( + <Tooltip title="Add to cart" placement="top"> + <Fab onClick={addToCart} size="small" color="secondary" aria-label="add" className={classes.buttonAdd}> + <AddShoppingCart /> + </Fab> + </Tooltip> + )} + <Typography noWrap gutterBottom variant="h5" className={classes.title} component="h2"> + {name} + </Typography> + <Typography component="p" className={classes.desc}> + {desc} + </Typography> + <div className={classes.ratting}> + <Rating value={ratting} max={5} readOnly /> + </div> + </CardContent> + <CardActions className={classes.price}> + <Typography variant="h5"> + <span> +$ + {price} + </span> + </Typography> + {prevPrice > 0 && ( + <Typography variant="caption" component="h5"> + <span className={Type.lineThrought}> +$ + {prevPrice} + </span> + </Typography> + )} + <div className={classes.rightAction}> + <Button size="small" variant="outlined" color="secondary" onClick={detailOpen}> + See Detail + </Button> + {!soldout && ( + <Tooltip title="Add to cart" placement="top"> + <IconButton color="secondary" onClick={addToCart} className={classes.buttonAddList}> + <AddShoppingCart /> + </IconButton> + </Tooltip> + )} + </div> + </CardActions> + </Card> + ); + } +} + +ProductCard.propTypes = { + classes: PropTypes.object.isRequired, + discount: PropTypes.string, + width: PropTypes.string.isRequired, + soldout: PropTypes.bool, + thumbnail: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + desc: PropTypes.string.isRequired, + ratting: PropTypes.number.isRequired, + price: PropTypes.number.isRequired, + prevPrice: PropTypes.number, + list: PropTypes.bool, + detailOpen: PropTypes.func, + addToCart: PropTypes.func, +}; + +ProductCard.defaultProps = { + discount: '', + soldout: false, + prevPrice: 0, + list: false, + detailOpen: () => (false), + addToCart: () => (false), +}; + +const ProductCardResponsive = withWidth()(ProductCard); +export default withStyles(styles)(ProductCardResponsive); diff --git a/front/odiparpack/app/components/CardPaper/ProfileCard.js b/front/odiparpack/app/components/CardPaper/ProfileCard.js new file mode 100644 index 0000000..7827941 --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/ProfileCard.js @@ -0,0 +1,99 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Type from 'ba-styles/Typography.scss'; +import VerifiedUser from '@material-ui/icons/VerifiedUser'; +import SupervisorAccount from '@material-ui/icons/SupervisorAccount'; +import Favorite from '@material-ui/icons/Favorite'; +import PhotoLibrary from '@material-ui/icons/PhotoLibrary'; +import { + Typography, + Card, + CardMedia, + CardContent, + CardActions, + Button, + Avatar, + BottomNavigation, + BottomNavigationAction, + Divider, +} from '@material-ui/core'; +import styles from './cardStyle-jss'; + + +class ProfileCard extends React.Component { + state = { expanded: false }; + + handleExpandClick = () => { + this.setState({ expanded: !this.state.expanded }); + }; + + render() { + const { + classes, + cover, + avatar, + name, + title, + connection, + isVerified, + btnText + } = this.props; + + return ( + <Card className={classes.cardSocmed}> + <CardMedia + className={classes.mediaProfile} + image={cover} + title="cover" + /> + <CardContent className={classes.contentProfile}> + <Avatar alt="avatar" src={avatar} className={classes.avatarBig} /> + <Typography variant="h6" className={classes.name} gutterBottom> + {name} + {isVerified && <VerifiedUser className={classes.verified} />} + </Typography> + <Typography className={classes.subheading} gutterBottom> + <span className={Type.regular}>{title}</span> + </Typography> + <Typography variant="caption" component="p"> + {connection} + {' '} +connection + </Typography> + <Button className={classes.buttonProfile} size="large" variant="outlined" color="secondary"> + {btnText} + </Button> + </CardContent> + <Divider /> + <CardActions> + <BottomNavigation + showLabels + className={classes.bottomLink} + > + <BottomNavigationAction label="20 Connection" icon={<SupervisorAccount />} /> + <BottomNavigationAction label="10 Favorites" icon={<Favorite />} /> + <BottomNavigationAction label="5 Albums" icon={<PhotoLibrary />} /> + </BottomNavigation> + </CardActions> + </Card> + ); + } +} + +ProfileCard.propTypes = { + classes: PropTypes.object.isRequired, + cover: PropTypes.string.isRequired, + avatar: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + connection: PropTypes.number.isRequired, + btnText: PropTypes.string.isRequired, + isVerified: PropTypes.bool +}; + +ProfileCard.defaultProps = { + isVerified: false +}; + +export default withStyles(styles)(ProfileCard); diff --git a/front/odiparpack/app/components/CardPaper/VideoCard.js b/front/odiparpack/app/components/CardPaper/VideoCard.js new file mode 100644 index 0000000..69aa60c --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/VideoCard.js @@ -0,0 +1,90 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import PlayArrowIcon from '@material-ui/icons/PlayArrow'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +import { red } from '@material-ui/core/colors'; + +import { Card, CardHeader, CardMedia, IconButton, Avatar } from '@material-ui/core'; + +const styles = theme => ({ + playIcon: { + height: 38, + width: 38, + }, + cardSocmed: { + maxWidth: 400, + }, + media: { + height: 0, + paddingTop: '56.25%', // 16:9 + position: 'relative', + }, + avatar: { + backgroundColor: red[500], + }, + playBtn: { + position: 'absolute', + top: '50%', + left: '50%', + width: 64, + height: 64, + transform: 'translate(-50%, -50%)', + '& svg': { + color: theme.palette.common.white, + fontSize: 64 + } + } +}); + +class VideoCard extends React.Component { + state = { expanded: false }; + + handleExpandClick = () => { + this.setState({ expanded: !this.state.expanded }); + }; + + render() { + const { + classes, + title, + cover, + date + } = this.props; + + return ( + <Card className={classes.cardSocmed}> + <CardMedia + className={classes.media} + image={cover} + title={title} + > + <IconButton className={classes.playBtn}><PlayArrowIcon /></IconButton> + </CardMedia> + <CardHeader + avatar={( + <Avatar aria-label="Recipe" className={classes.avatar}> + R + </Avatar> + )} + action={( + <IconButton> + <MoreVertIcon /> + </IconButton> + )} + title={title} + subheader={date} + /> + </Card> + ); + } +} + +VideoCard.propTypes = { + classes: PropTypes.object.isRequired, + title: PropTypes.string.isRequired, + cover: PropTypes.string.isRequired, + date: PropTypes.string.isRequired, +}; + +export default withStyles(styles)(VideoCard); diff --git a/front/odiparpack/app/components/CardPaper/cardStyle-jss.js b/front/odiparpack/app/components/CardPaper/cardStyle-jss.js new file mode 100644 index 0000000..df367a0 --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/cardStyle-jss.js @@ -0,0 +1,188 @@ +import { pink, lightGreen, blueGrey as dark } from '@material-ui/core/colors'; + +const styles = theme => ({ + divider: { + margin: `${theme.spacing(3)}px 0` + }, + card: { + minWidth: 275, + }, + liked: { + color: pink[500] + }, + shared: { + color: lightGreen[500] + }, + num: { + fontSize: 14, + marginLeft: 5 + }, + rightIcon: { + marginLeft: 'auto', + display: 'flex', + alignItems: 'center' + }, + button: { + marginRight: theme.spacing(1) + }, + media: { + height: 0, + paddingTop: '56.25%', // 16:9 + }, + cardPlayer: { + display: 'flex', + justifyContent: 'space-between' + }, + details: { + display: 'flex', + flexDirection: 'column', + }, + content: { + flex: '1 0 auto', + }, + cover: { + width: 150, + height: 150, + }, + controls: { + display: 'flex', + alignItems: 'center', + paddingLeft: theme.spacing(1), + paddingBottom: theme.spacing(1), + }, + playIcon: { + height: 38, + width: 38, + }, + cardSocmed: { + minWidth: 275, + }, + cardProduct: { + position: 'relative' + }, + mediaProduct: { + height: 0, + paddingTop: '60.25%', // 16:9 + }, + rightAction: { + '&:not(:first-child)': { + marginLeft: 'auto', + display: 'flex', + alignItems: 'center' + } + }, + floatingButtonWrap: { + position: 'relative', + paddingTop: 50 + }, + buttonAdd: { + position: 'absolute', + right: 20, + top: -20, + }, + buttonAddList: { + display: 'none', + marginLeft: 10 + }, + title: { + fontSize: 20, + height: 30, + }, + ratting: { + margin: '10px 0', + '& button': { + width: 24, + height: 24 + } + }, + status: { + position: 'absolute', + right: 0, + top: 0, + padding: 10, + '& > *': { + margin: 5 + } + }, + desc: { + height: 45, + overflow: 'hidden' + }, + chipDiscount: { + background: theme.palette.primary.light, + color: theme.palette.primary.dark, + }, + chipSold: { + background: dark[500], + color: theme.palette.getContrastText(dark[500]), + }, + contentProfle: { + flex: '1 0 auto', + textAlign: 'center' + }, + mediaProfile: { + height: 0, + paddingTop: '36.25%', // 16:9 + }, + actions: { + display: 'flex', + }, + avatarBig: { + width: 80, + height: 80, + margin: '-56px auto 10px', + background: theme.palette.secondary.dark + }, + name: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center' + }, + buttonProfile: { + margin: 20 + }, + bottomLink: { + width: '100%', + }, + price: { + padding: theme.spacing(2), + paddingBottom: 20 + }, + contentProfile: { + textAlign: 'center' + }, + verified: { + fontSize: 16, + color: theme.palette.primary.main + }, + cardList: { + display: 'flex', + justifyContent: 'space-between', + '& $buttonAddList': { + display: 'inline-block' + }, + '& $floatingButtonWrap': { + flex: 1, + }, + '& $buttonAdd': { + display: 'none' + }, + '& $status': { + right: 'auto', + left: 0, + }, + '& $mediaProduct': { + width: 300, + paddingTop: '21.25%' + }, + '& $price': { + flexDirection: 'column', + justifyContent: 'center', + '& button': { + marginTop: 20 + } + } + }, +}); + +export default styles; |