From 41bf43495eee24692f7d260f6380ea9c1f730116 Mon Sep 17 00:00:00 2001
From: sayuri <smr17@inf.ufpr.br>
Date: Thu, 4 Jul 2019 15:22:29 -0300
Subject: [PATCH] =?UTF-8?q?Card=20Recurso,=20sem=20anima=C3=A7=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package-lock.json | 48 ++++++-
package.json | 5 +-
src/Components/AreasSubPages.js | 15 ++-
src/Components/Card.js | 47 +++++--
src/Components/CardOptions.js | 64 ++++++++++
src/Components/CollectionCard.js | 0
src/Components/UserCard.js | 0
src/Components/carousel.css | 14 ++
src/Components/stars.js | 212 +++++++++++++++++++++++++++++++
9 files changed, 378 insertions(+), 27 deletions(-)
create mode 100644 src/Components/CardOptions.js
create mode 100644 src/Components/CollectionCard.js
create mode 100644 src/Components/UserCard.js
create mode 100644 src/Components/carousel.css
create mode 100644 src/Components/stars.js
diff --git a/package-lock.json b/package-lock.json
index 54e05c3d..03405114 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1914,12 +1914,40 @@
"integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
},
"axios": {
- "version": "0.18.0",
- "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
- "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+ "version": "0.19.0",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+ "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
"requires": {
- "follow-redirects": "^1.3.0",
- "is-buffer": "^1.1.5"
+ "follow-redirects": "1.5.10",
+ "is-buffer": "^2.0.2"
+ },
+ "dependencies": {
+ "debug": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+ "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+ "requires": {
+ "ms": "2.0.0"
+ }
+ },
+ "follow-redirects": {
+ "version": "1.5.10",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+ "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+ "requires": {
+ "debug": "=3.1.0"
+ }
+ },
+ "is-buffer": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
+ "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
+ },
+ "ms": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+ "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+ }
}
},
"axobject-query": {
@@ -14577,6 +14605,16 @@
"workbox-webpack-plugin": "3.6.3"
}
},
+ "react-star-ratings": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/react-star-ratings/-/react-star-ratings-2.3.0.tgz",
+ "integrity": "sha512-34Z/oFNDRRn4ZcX7F3t9ccnpo7SQ32gD/vsusQOBc6B6vlqaGR6tke1/Yx3jTDjemKRSmXqhKgpPTR7/JAXq6A==",
+ "requires": {
+ "classnames": "^2.2.1",
+ "prop-types": "^15.6.0",
+ "react": "^16.1.0"
+ }
+ },
"react-transition-group": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
diff --git a/package.json b/package.json
index b1567621..785fa9f4 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^4.0.0",
"@material-ui/styles": "^4.0.0",
- "axios": "^0.18.0",
+ "axios": "^0.19.0",
"binary-extensions": "^2.0.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
@@ -14,7 +14,8 @@
"react-icons": "^3.6.1",
"react-responsive-carousel": "^3.1.47",
"react-router-dom": "^5.0.0",
- "react-scripts": "2.1.3"
+ "react-scripts": "2.1.3",
+ "react-star-ratings": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index 34a8f9ed..0b1d43a2 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -1,7 +1,7 @@
import React, {Component} from 'react';
import axios from 'axios';
import {apiUrl} from '../env';
-import '../App.css';
+import './carousel.css';
import {Col,Row, Container, Hidden, Visible} from 'react-grid-system';
import MediaCard from './Card';
import "react-responsive-carousel/lib/styles/carousel.min.css";
@@ -38,10 +38,11 @@ class ReqCards extends Component{
resources: [],
};
}
- componentWillMount(){
+ componentDidMount(){
axios.get(`${apiUrl}/learning_objects?limit=12&sort=["published_at", "desc"]`)
.then(res=> {
this.setState({resources: res.data});
+
});
}
render(){
@@ -49,15 +50,15 @@ class ReqCards extends Component{
var row2 = this.state.resources.slice(4, 8);
var row3 = this.state.resources.slice(8, 13);
return(
- <Carousel showThumbs={false} autoPlay infiniteLoop={true} showStatus={false}>
- <Row>
- {row1.map(card => <Col md={3} sm={6} key={card.id}><MediaCard name={card.name} type={card.object_type} description={card.description}/></Col>)}
+ <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ <Row style={{paddingBottom: "5px"}}>
+ {row1.map(card => <Col md={3} sm={6} key={card.id}><MediaCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></Col>)}
</Row>
<Row>
- {row2.map(card => <Col md={3} sm={6} key={card.id}><MediaCard name={card.name} type={card.object_type} description={card.description}/></Col>)}
+ {row2.map(card => <Col md={3} sm={6} key={card.id}><MediaCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></Col>)}
</Row>
<Row>
- {row3.map(card => <Col md={3} sm={6} key={card.id}><MediaCard name={card.name} type={card.object_type} description={card.description}/></Col>)}
+ {row3.map(card => <Col md={3} sm={6} key={card.id}><MediaCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></Col>)}
</Row>
</Carousel>
)
diff --git a/src/Components/Card.js b/src/Components/Card.js
index 788a534c..84b6cb78 100644
--- a/src/Components/Card.js
+++ b/src/Components/Card.js
@@ -1,4 +1,5 @@
import React from 'react';
+import {Container} from 'react-grid-system';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
@@ -6,6 +7,7 @@ import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import FavoriteIcon from '@material-ui/icons/Favorite';
import ShareIcon from '@material-ui/icons/Share';
+import StarRatings from 'react-star-ratings';
import animacao from "../img/laranja/ANIMACAO_SIMULACAO.jpg";
import apresentacao from "../img/laranja/APRESENTACAO.jpg";
import aplicativo from "../img/laranja/APP.jpg";
@@ -21,32 +23,51 @@ import software from "../img/laranja/SOFTWARE.jpg";
import texto from "../img/laranja/TEXTO.jpg";
import video from "../img/laranja/VIDEO.jpg";
+import AddIcon from '@material-ui/icons/CreateNewFolder';
+import Options from './CardOptions'
+import Video from '@material-ui/icons/OndemandVideo';
+
var types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao},
{label: "Aplicativo" , thumb: aplicativo}, {label: "Ãudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "VÃdeo", thumb:video}]
function RecipeReviewCard(props){
var thumbnail = props.thumbnail;
-if (thumbnail == null) {
- thumbnail = types.find(function(element){ return element.label == props.type});
+if (!thumbnail) {
+ thumbnail = types.find(function(element){ return element.label === props.type});
}
-thumbnail = thumbnail.thumb
+thumbnail = thumbnail.thumb;
+var isvideo = false;
+(props.type == "VÃdeo")? isvideo=true : isvideo=false;
return (
<Card>
<img src={thumbnail} alt="thumbnail do recurso"/>
- <CardContent style={{height: "200px"}}>
- <Typography variant="body1" color="textPrimary" component="p">
+ <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
+ <Typography variant="body2" color="textSecondary" component="p" style={{height:"45px", overflow: "hidden", fontSize: "0.8em"}}>
{props.name}
</Typography>
- <Typography variant="caption" color="textSecondary" component="p">
- {props.description}
- </Typography>
</CardContent>
- <CardActions>
- <IconButton aria-label="Add to favorites">
+ <Container style={{textAlign: "left"}}>
+ <StarRatings
+ rating={props.rating*100}
+ starRatedColor="orange"
+ starDimension="20px"
+ starSpacing="2px"
+ starHoverColor="red"
+ />
+ </Container>
+ <CardActions style={{justifyContent: "space-between"}}>
+ { isvideo
+ ? <Video style={{color:"#ff7f00"}} />
+ : <br/>}
+ <IconButton aria-label="Favoritar" size="small">
<FavoriteIcon />
</IconButton>
- <IconButton aria-label="Share">
- <ShareIcon />
- </IconButton>
+ </CardActions>
+ <CardActions style={{borderTop:"1px solid #e5e5e5", justifyContent: "space-between"}}>
+
+ <IconButton aria-label="Guardar" size="small">
+ <AddIcon />
+ </IconButton>
+ <Options/>
</CardActions>
</Card>
);
diff --git a/src/Components/CardOptions.js b/src/Components/CardOptions.js
new file mode 100644
index 00000000..ad82e333
--- /dev/null
+++ b/src/Components/CardOptions.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import MenuItem from '@material-ui/core/MenuItem';
+import IconButton from '@material-ui/core/IconButton';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import OpenIcon from '@material-ui/icons/OpenInNew';
+import DownloadIcon from '@material-ui/icons/CloudDownload';
+import ShareIcon from '@material-ui/icons/Share';
+import AddIcon from '@material-ui/icons/CreateNewFolder';
+import ReportIcon from '@material-ui/icons/Error';
+export default function SimpleMenu() {
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
+ function handleClick(event) {
+ setAnchorEl(event.currentTarget);
+ }
+
+ function handleClose() {
+ setAnchorEl(null);
+ }
+
+ return (
+ <div style={{fontSize: "12px"}}>
+ <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
+ OPÇÕES <MoreVertIcon/>
+ </Button>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <MenuItem onClick={handleClose}>
+ <ListItemIcon>
+ <OpenIcon />
+ </ListItemIcon>
+ Abrir</MenuItem>
+ <MenuItem onClick={handleClose}>
+ <ListItemIcon>
+ <DownloadIcon />
+ </ListItemIcon>
+ Baixar</MenuItem>
+ <MenuItem onClick={handleClose}>
+ <ListItemIcon>
+ <ShareIcon />
+ </ListItemIcon>
+ Compartilhar</MenuItem>
+ <MenuItem onClick={handleClose}>
+ <ListItemIcon>
+ <AddIcon />
+ </ListItemIcon>
+ Guardar</MenuItem>
+ <MenuItem onClick={handleClose}>
+ <ListItemIcon>
+ <ReportIcon />
+ </ListItemIcon>
+ Reportar</MenuItem>
+ </Menu>
+ </div>
+ );
+}
diff --git a/src/Components/CollectionCard.js b/src/Components/CollectionCard.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/Components/UserCard.js b/src/Components/UserCard.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/Components/carousel.css b/src/Components/carousel.css
new file mode 100644
index 00000000..4228d8ed
--- /dev/null
+++ b/src/Components/carousel.css
@@ -0,0 +1,14 @@
+.carousel .control-dots{
+ position: inherit !important;
+}
+.carousel .control-arrow {
+ background: orange !important;
+ position: relative !impontant;
+}
+.carousel.carousel-slider .control-arrow {
+ top: 40% !important;
+ bottom: 50% !important;
+ border-radius: 100% !important;
+ opacity: 0.8 !important;
+ padding: -10px !important;
+}
diff --git a/src/Components/stars.js b/src/Components/stars.js
new file mode 100644
index 00000000..3aa9373d
--- /dev/null
+++ b/src/Components/stars.js
@@ -0,0 +1,212 @@
+import { randomNumber } from './app';
+
+import Widget from 'widget';
+
+class WidgetRatings extends React.Component {
+ constructor(props) {
+ super(props);
+ this.fillId = `widgetGrad${randomNumber()}`;
+ this.state = {
+ highestWidgetHovered: -Infinity
+ }
+ }
+ static Widget = Widget
+
+ get
+ widgetRatingsStyle() {
+ const widgetRatingsStyle = {
+ position: 'relative',
+ boxSizing: 'border-box',
+ display: 'inline-block'
+ };
+ return this.props.ignoreInlineStyles ? {} : widgetRatingsStyle;
+ }
+
+ get
+ widgetGradientStyle() {
+ const widgetGradientStyle = {
+ position: 'absolute',
+ zIndex: '0',
+ width: '0',
+ height: '0',
+ visibility: 'hidden'
+ };
+ return this.props.ignoreInlineStyles ? {} : widgetGradientStyle;
+ }
+
+ stopColorStyle(color) {
+ const stopColorStyle = {
+ stopColor: color,
+ stopOpacity: '1'
+ };
+ return this.props.ignoreInlineStyles ? {} : stopColorStyle;
+ }
+
+ get
+ titleText() {
+ const {
+ typeOfWidget,
+ rating: selectedRating
+ } = this.props;
+ const hoveredRating = this.state.highestWidgetHovered;
+ const currentRating = hoveredRating > 0 ? hoveredRating : selectedRating;
+ // fix it at 2 decimal places and remove trailing 0s
+ let formattedRating = parseFloat(currentRating.toFixed(2)).toString();
+ if (Number.isInteger(currentRating)) {
+ formattedRating = String(currentRating);
+ }
+ let widgetText = `${typeOfWidget}s`;
+ if (formattedRating === '1') {
+ widgetText = typeOfWidget;
+ }
+ return `${formattedRating} ${widgetText}`;
+ }
+
+ get
+ offsetValue() {
+ const rating = this.props.rating;
+ const ratingIsInteger = Number.isInteger(rating);
+ let offsetValue = '0%';
+ if (!ratingIsInteger) {
+ const firstTwoDecimals = rating.toFixed(2).split('.')[1].slice(0, 2);
+ offsetValue = `${firstTwoDecimals}%`;
+ }
+ return offsetValue;
+ }
+
+ unHoverOverWidget = () => {
+ this.setState({
+ highestWidgetHovered: -Infinity
+ })
+ }
+
+ hoverOverWidget = (rating) => {
+ return () => {
+ this.setState({
+ highestWidgetHovered: rating
+ })
+ }
+ }
+
+ get
+ childrenWithRatingState() {
+ const {
+ changeRating,
+ rating: selectedRating,
+ children,
+ ignoreInlineStyles,
+ gradientPathName,
+ widgetEmptyColors,
+ widgetHoverColors,
+ widgetRatedColors,
+ widgetDimensions,
+ widgetSpacings,
+ svgIconPaths,
+ svgIconViewBoxes,
+ svgs
+ } = this.props;
+ const { highestWidgetHovered } = this.state;
+
+ const numberOfWidgets = children.length;
+ return React.Children.map(children, (child, index) => {
+ const {
+ svgIconPath,
+ svgIconViewBox,
+ widgetHoverColor,
+ widgetEmptyColor,
+ widgetRatedColor,
+ widgetDimension,
+ widgetSpacing,
+ svg
+ } = child.props;
+
+ const widgetRating = index + 1;
+ const isSelected = widgetRating <= selectedRating;
+
+ // hovered only matters when changeRating is true
+ const hoverMode = highestWidgetHovered > 0;
+ const isHovered = widgetRating <= highestWidgetHovered;
+ const isCurrentHoveredWidget = widgetRating === highestWidgetHovered;
+
+ // only matters when changeRating is false
+ // given widget 5 and rating 4.2: 5 > 4.2 && 4 < 4.2;
+ const isPartiallyFullWidget = widgetRating > selectedRating && widgetRating - 1 < selectedRating
+
+ const isFirstWidget = widgetRating === 1;
+ const isLastWidget = widgetRating === numberOfWidgets;
+
+ return React.cloneElement(child, {
+ selectedRating: selectedRating,
+ ignoreInlineStyles,
+ gradientPathName,
+ changeRating: changeRating ? () => changeRating(widgetRating) : null,
+ hoverOverWidget: changeRating ? this.hoverOverWidget(widgetRating) : null,
+ unHoverOverWidget: changeRating ? this.unHoverOverWidget : null,
+ inheritFillId: this.fillId,
+ isSelected,
+ isHovered,
+ isCurrentHoveredWidget,
+ isPartiallyFullWidget,
+ isFirstWidget,
+ isLastWidget,
+ hoverMode,
+ hasCustomGradientColor: (widgetRatedColor || widgetEmptyColor) && isPartiallyFullWidget,
+ svgIconPath: svgIconPath || svgIconPaths,
+ svgIconViewBox: svgIconViewBox || svgIconViewBoxes,
+ widgetHoverColor: widgetHoverColor || widgetHoverColors,
+ widgetEmptyColor: widgetEmptyColor || widgetEmptyColors,
+ widgetRatedColor: widgetRatedColor || widgetRatedColors,
+ widgetDimension: widgetDimension || widgetDimensions,
+ widgetSpacing: widgetSpacing || widgetSpacings,
+ svg: svg || svgs
+ });
+ });
+ }
+
+ render() {
+ const {
+ widgetEmptyColors,
+ widgetRatedColors
+ } = this.props;
+
+ return (
+ <div
+ className="widget-ratings"
+ title={this.titleText}
+ style={this.widgetRatingsStyle}
+ >
+ <svg
+ className="widget-grad"
+ style={this.widgetGradientStyle}
+ >
+ <defs>
+ <linearGradient id={this.fillId} x1="0%" y1="0%" x2="100%" y2="0%">
+ <stop offset="0%" className="stop-color-first" style={this.stopColorStyle(widgetRatedColors)} />
+ <stop offset={this.offsetValue} className="stop-color-first" style={this.stopColorStyle(widgetRatedColors)} />
+ <stop offset={this.offsetValue} className="stop-color-final" style={this.stopColorStyle(widgetEmptyColors)} />
+ <stop offset="100%" className="stop-color-final" style={this.stopColorStyle(widgetEmptyColors)} />
+ </linearGradient>
+ </defs>
+ </svg>
+ {this.childrenWithRatingState}
+ </div>
+ );
+ }
+}
+
+WidgetRatings.defaultProps = {
+ rating: 0,
+ typeOfWidget: 'Star',
+ changeRating: null,
+ ignoreInlineStyles: false,
+ gradientPathName: '',
+ svgIconPaths: 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z',
+ svgIconViewBoxes: '0 0 51 48',
+ widgetRatedColors: 'rgb(109, 122, 130)',
+ widgetEmptyColors: 'rgb(203, 211, 227)',
+ widgetHoverColors: 'rgb(230, 67, 47)',
+ widgetDimensions: '50px',
+ widgetSpacings: '7px',
+};
+
+export default WidgetRatings;
--
GitLab