Skip to content
Snippets Groups Projects
Commit f5d8e55e authored by vgm18's avatar vgm18
Browse files

Commit before merge, implementing contrast and fixing comments pagination

parent 165f1f2b
No related branches found
No related tags found
4 merge requests!100Changed recaptcha key to the production one, removed console.logs and fixed...,!99Changed recaptcha key to the production one, removed console.logs and fixed...,!98Changed recaptcha key to the production one, removed console.logs and fixed...,!88Vinicius accessibility
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 884 additions and 848 deletions
src/Components/AreasSubPagesFunction.js
+ 318
− 298
View file @ f5d8e55e
......@@ -74,7 +74,7 @@ function ReqResources(props) {
var aux = []
var resources_per_page = objectsPerPage()
for (let i = 0; i < 12 / resources_per_page; i++) {
aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
}
setRows(aux)
setIsLoading(false)
......@@ -91,7 +91,7 @@ function ReqResources(props) {
isLoading ?
<Grid container justify="center" alignItems="center" style={{ margin: "2em" }} >
<Grid item>
<CircularProgress size={24} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow" }} />
<CircularProgress size={24} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow" }} />
</Grid>
</Grid>
:
......@@ -124,9 +124,9 @@ function ReqResources(props) {
))
:
<Grid container justify="center" alignItems="center">
<Grid item>
<img src={RecursoVazio} alt="Não há recursos" />
</Grid>
<Grid item>
<img src={RecursoVazio} alt="Não há recursos" />
</Grid>
</Grid>
}
</Carousel>
......@@ -142,7 +142,7 @@ function ReqCollections(props) {
var aux = []
var collections_per_page = objectsPerPage()
for (let i = 0; i < 12 / collections_per_page; i++) {
aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
}
setIsLoading(false)
setRows(aux)
......@@ -159,43 +159,44 @@ function ReqCollections(props) {
isLoading ?
<Grid container justify="center" alignItems="center" style={{ marginTop: "2em" }}>
<Grid item>
<CircularProgress size={24} style={props.contrast === "" ? { color: "#673ab7" } : { color: "yellow" }} />
<CircularProgress size={24} style={props.contrast === "" ? { color: "#673ab7" } : { color: "yellow" }} />
</Grid>
</Grid>
:
rows.length >= 1 ?
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
{
rows.map((row, index) => (
<Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
{row.map((card) => (
<div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
<CollectionCardFunction
contrast={props.contrast}
name={card.name}
tags={card.tags}
rating={card.score}
id={card.id}
author={card.owner ? card.owner.name : ""}
description={card.description}
thumbnails={card.items_thumbnails}
avatar={card.owner ? card.owner.avatar : ""}
likeCount={card.likes_count}
followed={card.followed}
liked={card.liked}
collections={card.collection_items}
authorID={card.owner ? card.owner.id : ""}
/>
</div>
))}
</Row>
))}
{
rows.map((row, index) => (
<Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
{row.map((card) => (
<div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
<CollectionCardFunction
contrast={props.contrast}
name={card.name}
tags={card.tags}
rating={card.score}
id={card.id}
author={card.owner ? card.owner.name : ""}
description={card.description}
thumbnails={card.items_thumbnails}
avatar={card.owner ? card.owner.avatar : ""}
likeCount={card.likes_count}
followed={card.followed}
liked={card.liked}
collections={card.collection_items}
authorID={card.owner ? card.owner.id : ""}
/>
</div>
))}
</Row>
))
}
</Carousel>
:
<Grid container justify="center" alignItems="center">
<Grid item>
<img src={ColecaoVazia} alt="Não há coleções" />
</Grid>
<Grid item>
<img src={ColecaoVazia} alt="Não há coleções" />
</Grid>
</Grid>
)
}
......@@ -216,103 +217,105 @@ function TabRecurso({ contrast }) {
return (
<React.Fragment>
<div style={{ backgroundColor: contrast === "" ? "#ff7f00" : "black", position: "relative" }}>
<StyledTab container contrast={contrast}>
<Grid item md={3} xs={12}>
<img
src={recursos}
alt="aba recursos"
style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
</Grid>
{
window.innerWidth <= 501 &&
<h4>
Recursos Educacionais Digitais
</h4>
}
<Grid item md={6} xs={12}>
<p>
{text}
</p>
</Grid>
{
window.innerWidth <= 501 &&
<div style={{ display: "flex", justifyContent: "center" }}>
<Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
</div>
}
</StyledTab>
</div>
{
window.innerWidth > 501 &&
<div className={`${contrast}BackColor`}>
<Container style={{ padding: "20px" }}>
<Grid
container
direction="row"
justify="space-between"
alignItems="center"
style={{
paddingBottom: "5px",
borderBottom: contrast === "" ? "1px solid #ff7f00" : "1px solid white",
color: contrast === "" ? "#ff7f00" : "white",
}}
>
<Grid item>
<p
style={{ margin: 0, padding: 0 }}
>
<div style={{ backgroundColor: contrast === "" ? "#ff7f00" : "black", position: "relative" }}>
<StyledTab container contrast={contrast}>
<Grid item md={3} xs={12}>
<img
src={recursos}
alt="aba recursos"
style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
</Grid>
{
`Recursos ${currOrder}`
window.innerWidth <= 501 &&
<h4>
Recursos Educacionais Digitais
</h4>
}
</p>
</Grid>
<Grid item>
<Grid container direction="row" alignItems="center" spacing={1}>
<Grid item>
<p style={{ margin: 0, padding: 0 }}>
Ordenar por:
</p>
</Grid>
<Grid item>
<TextField
select
fullWidth
value={currValue}
variant="outlined"
className={contrast === "Contrast" && classes.contrastTextField}
>
{ordenar.map((option) => (
<MenuItem
key={option.value}
value={option.value}
name={option.value}
onClick={() => {
setCurrOrder(option.label)
setCurrValue(option.value)
}}
>
<span style={currValue === option.value ? { color: contrast === "" ? "#ff7f00" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
{option.label}
</span>
</MenuItem>
))}
</TextField>
</Grid>
<Grid item md={6} xs={12}>
<p>
{text}
</p>
</Grid>
</Grid>
</Grid>
<Hidden sm xs>
<ReqResources order={currValue} contrast={contrast} />
</Hidden>
<Visible sm xs>
<ReqResources order={currValue} contrast={contrast} />
</Visible>
</Container>
{
window.innerWidth <= 501 &&
<div style={{ display: "flex", justifyContent: "center" }}>
<Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
</div>
}
</StyledTab>
</div>
}
{
window.innerWidth > 501 &&
<div className={`${contrast}BackColor`}>
<Container style={{ padding: "20px" }}>
<Grid
container
direction="row"
justify="space-between"
alignItems="center"
style={{
paddingBottom: "5px",
borderBottom: contrast === "" ? "1px solid #ff7f00" : "1px solid white",
color: contrast === "" ? "#ff7f00" : "white",
}}
>
<Grid item>
<p
style={{ margin: 0, padding: 0 }}
>
{
`Recursos ${currOrder}`
}
</p>
</Grid>
<Grid item>
<Grid container direction="row" alignItems="center" spacing={1}>
<Grid item>
<p style={{ margin: 0, padding: 0 }}>
Ordenar por:
</p>
</Grid>
<Grid item>
<StyledTextField
contrast={contrast}
select
fullWidth
value={currValue}
variant="outlined"
className={contrast === "Contrast" && classes.contrastTextField}
>
{ordenar.map((option) => (
<StyledMenuItem
contrast={contrast}
key={option.value}
value={option.value}
name={option.value}
onClick={() => {
setCurrOrder(option.label)
setCurrValue(option.value)
}}
>
<span style={currValue === option.value ? { color: contrast === "" ? "#ff7f00" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
{option.label}
</span>
</StyledMenuItem>
))}
</StyledTextField>
</Grid>
</Grid>
</Grid>
</Grid>
<Hidden sm xs>
<ReqResources order={currValue} contrast={contrast} />
</Hidden>
<Visible sm xs>
<ReqResources order={currValue} contrast={contrast} />
</Visible>
</Container>
</div>
}
</React.Fragment>
)
}
......@@ -333,99 +336,101 @@ function TabColecoes({ contrast }) {
return (
<React.Fragment>
<div style={{ backgroundColor: "#673ab7", position: "relative" }}>
<StyledTab container contrast={contrast}>
<Grid item md={3} xs={12}>
<img
src={colecoes}
alt="aba recursos"
style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
</Grid>
{
window.innerWidth <= 501 &&
<h4>
Coleções dos Usuários
</h4>
}
<Grid item md={6} xs={12}>
<p>
{text}
</p>
</Grid>
{
window.innerWidth <= 501 &&
<div style={{ display: "flex", justifyContent: "center" }}>
<Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
</div>
}
</StyledTab>
</div>
{
window.innerWidth > 501 &&
<div className={`${contrast}BackColor`}>
<Container style={{ padding: "20px" }}>
<Grid
container
direction="row"
justify="space-between"
alignItems="center"
style={{
paddingBottom: "5px",
borderBottom: contrast === "" ? "1px solid #673ab7" : "1px solid white",
color: contrast === "" ? "#673ab7" : "white",
}}
>
<Grid item>
<p
style={{ margin: 0, padding: 0 }}
>
<div style={{ backgroundColor: "#673ab7", position: "relative" }}>
<StyledTab container contrast={contrast}>
<Grid item md={3} xs={12}>
<img
src={colecoes}
alt="aba recursos"
style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
</Grid>
{
`Coleções ${currOrder}`
window.innerWidth <= 501 &&
<h4>
Coleções dos Usuários
</h4>
}
</p>
</Grid>
<Grid item>
<Grid container direction="row" alignItems="center" spacing={1}>
<Grid item>
<p style={{ margin: 0, padding: 0 }}>
Ordenar por:
</p>
<Grid item md={6} xs={12}>
<p>
{ text}
</p>
</Grid>
<Grid item>
<TextField
select
fullWidth
value={currValue}
variant="outlined"
className={contrast === "Contrast" && classes.contrastTextField}
>
{ordenar.map((option) => (
<MenuItem
key={option.value}
value={option.value}
name={option.value}
style={contrast === "" ? {} : { backgroundColor: "black" }}
onClick={() => {
setCurrOrder(option.label)
setCurrValue(option.value)
}}
>
<span style={currValue === option.value ? { color: contrast === "" ? "#673ab7" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
{option.label}
</span>
</MenuItem>
))}
</TextField>
</Grid>
</Grid>
</Grid>
</Grid>
<ReqCollections order={currValue} contrast={contrast} />
</Container>
{
window.innerWidth <= 501 &&
<div style={{ display: "flex", justifyContent: "center" }}>
<Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
</div>
}
</StyledTab>
</div>
}
{
window.innerWidth > 501 &&
<div className={`${contrast}BackColor`}>
<Container style={{ padding: "20px" }}>
<Grid
container
direction="row"
justify="space-between"
alignItems="center"
style={{
paddingBottom: "5px",
borderBottom: contrast === "" ? "1px solid #673ab7" : "1px solid white",
color: contrast === "" ? "#673ab7" : "white",
}}
>
<Grid item>
<p
style={{ margin: 0, padding: 0 }}
>
{
`Coleções ${currOrder}`
}
</p>
</Grid>
<Grid item>
<Grid container direction="row" alignItems="center" spacing={1}>
<Grid item>
<p style={{ margin: 0, padding: 0 }}>
Ordenar por:
</p>
</Grid>
<Grid item>
<StyledTextField
contrast={contrast}
select
fullWidth
value={currValue}
variant="outlined"
className={contrast === "Contrast" && classes.contrastTextField}
>
{ordenar.map((option) => (
<StyledMenuItem
contrast={contrast}
key={option.value}
value={option.value}
name={option.value}
style={contrast === "" ? {} : { backgroundColor: "black" }}
onClick={() => {
setCurrOrder(option.label)
setCurrValue(option.value)
}}
>
<span style={currValue === option.value ? { color: contrast === "" ? "#673ab7" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
{option.label}
</span>
</StyledMenuItem>
))}
</StyledTextField>
</Grid>
</Grid>
</Grid>
</Grid>
<ReqCollections order={currValue} contrast={contrast} />
</Container>
</div>
}
</React.Fragment>
)
}
......@@ -442,96 +447,96 @@ function TabMateriais({ contrast }) {
const handleExpandMaterial = (id) => {
if (id !== currMaterial.material.id)
setCurrMaterial({
open: true,
material: { ...materials[id] }
})
setCurrMaterial({
open: true,
material: { ...materials[id] }
})
else {
setCurrMaterial({
open: false,
material: {}
})
setCurrMaterial({
open: false,
material: {}
})
}
}
return (
<React.Fragment>
<div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
<StyledTab container contrast={contrast}>
<Grid item md={3} xs={12}>
<img
src={materiais}
alt="aba recursos"
style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
</Grid>
{
window.innerWidth <= 501 &&
<h4>
Materiais de formação
</h4>
}
<Grid item md={6} xs={12}>
<p>
{text}
</p>
</Grid>
{
window.innerWidth <= 501 &&
<div style={{ display: "flex", justifyContent: "center" }}>
<Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
</div>
}
</StyledTab>
</div>
{
window.innerWidth > 501 &&
<div className={`${contrast}BackColor`}>
<Container style={{ padding: "20px" }}>
<p
style={{
paddingBottom: "5px",
borderBottom: contrast === "" ? "1px solid #e81f4f" : "1px solid white",
color: contrast === "" ? "#e81f4f" : "white",
}}
>
Materiais mais recentes{" "}
</p>
<Carousel
style={{ padding: "20px" }}
showThumbs={false}
infiniteLoop={true}
showStatus={false}
>
<Row>
<div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
<StyledTab container contrast={contrast}>
<Grid item md={3} xs={12}>
<img
src={materiais}
alt="aba recursos"
style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
</Grid>
{
materials.map((material, index) => {
return (
<Col md={3} key={index}>
<MaterialCard
contrast={contrast}
name={material.name}
thumb={material.img}
score={material.score}
modules={material.topics}
handleExpand={handleExpandMaterial}
id={index}
/>
</Col>
)
})
window.innerWidth <= 501 &&
<h4>
Materiais de formação
</h4>
}
</Row>
</Carousel>
{
currMaterial.open ?
<ExpandedMaterial contrast={contrast} material={currMaterial.material} />
:
null
}
</Container>
<Grid item md={6} xs={12}>
<p>
{text}
</p>
</Grid>
{
window.innerWidth <= 501 &&
<div style={{ display: "flex", justifyContent: "center" }}>
<Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
</div>
}
</StyledTab>
</div>
}
{
window.innerWidth > 501 &&
<div className={`${contrast}BackColor`}>
<Container style={{ padding: "20px" }}>
<p
style={{
paddingBottom: "5px",
borderBottom: contrast === "" ? "1px solid #e81f4f" : "1px solid white",
color: contrast === "" ? "#e81f4f" : "white",
}}
>
Materiais mais recentes{" "}
</p>
<Carousel
style={{ padding: "20px" }}
showThumbs={false}
infiniteLoop={true}
showStatus={false}
>
<Row>
{
materials.map((material, index) => {
return (
<Col md={3} key={index}>
<MaterialCard
contrast={contrast}
name={material.name}
thumb={material.img}
score={material.score}
modules={material.topics}
handleExpand={handleExpandMaterial}
id={index}
/>
</Col>
)
})
}
</Row>
</Carousel>
{
currMaterial.open ?
<ExpandedMaterial contrast={contrast} material={currMaterial.material} />
:
null
}
</Container>
</div>
}
</React.Fragment >
)
}
......@@ -614,3 +619,18 @@ const StyledTab = styled(Grid)`
}
`
const StyledMenuItem = styled(MenuItem)`
background-color: ${props => props.contrast === "" ? "" : "black !important"};
`
const StyledTextField = styled(TextField)`
.MuiOutlinedInput-root {
&.Mui-focused fieldset {
border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
fieldset {
border-color: ${props => props.contrast === "" ? "#666" : "white"};
}
}
`
\ No newline at end of file
src/Components/CollectionCommentSection.js
+ 6
− 3
View file @ f5d8e55e
......@@ -41,7 +41,7 @@ import { Comentarios } from "ImportImages.js";
export default function CollectionCommentSection(props) {
const [post_snack_open, setPostSnackOpen] = useState(false);
const [delete_snack_open, setDeleteSnackOpen] = useState(false);
const [render_state, setRenderState] = useState(false);
const [render_state, setRenderState] = useState(0);
const [sign_up_open, setSignUpOpen] = useState(false);
const [log_in_open, setLoginOpen] = useState(false);
const [is_loading, setIsLoading] = useState(false);
......@@ -56,7 +56,7 @@ export default function CollectionCommentSection(props) {
const [currPageReviews, setCurrPageReviews] = useState(0);
const comment_ref = useRef(null);
const forceUpdate = () => { setRenderState(!render_state); }
const forceUpdate = () => { setCurrPageReviews(0); setRenderState(render_state + 1); }
const handlePostSnackbar = () => {
setPostSnackOpen(!post_snack_open);
......@@ -192,7 +192,10 @@ export default function CollectionCommentSection(props) {
}
function handleSuccessGet(data, headers) {
setReviews((previousState) => previousState.concat(data));
if (currPageReviews !== 0)
setReviews((previousState) => previousState.concat(data));
else
setReviews(data);
if (headers.has('X-Total-Count'))
setTotalReviews(headers.get('X-Total-Count'))
setIsLoading(false);
......
src/Components/Comment.js
+ 372
− 384
View file @ f5d8e55e
This diff is collapsed.
src/Components/CriarColecaoForm.js
+ 4
− 4
View file @ f5d8e55e
......@@ -138,15 +138,15 @@ export const ButtonCancelar = styled(Button)`
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
color: ${props => props.contrast === "" ? "#666" : "white"} !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
`
export const ButtonEnviar = styled(Button)`
background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
background-color: ${props => props.contrast === "" ? "#673ab7" : "black"} !important;
color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
......@@ -158,7 +158,7 @@ export const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
:hover{
background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
......
src/Components/CriarColecaoModal.js
+ 1
− 0
View file @ f5d8e55e
......@@ -111,6 +111,7 @@ const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
background-color: ${props => props.contrast === "" ? "white" : "black"};
border: ${props => props.contrast === "" ? "" : "1px solid white"};
align-items : center;
display : flex;
flex-direction : column;
......
src/Components/ModalExcluirComentario.js
+ 42
− 20
View file @ f5d8e55e
......@@ -4,6 +4,7 @@ import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import { Button } from '@material-ui/core';
import Backdrop from '@material-ui/core/Backdrop';
import CloseIcon from '@material-ui/icons/Close';
const StyledModal = styled(Modal)`
margin : 0 !important;
......@@ -29,7 +30,9 @@ const HeaderDiv = styled.div`
`
const ContentContainer = styled.div`
box-sizing : border-box;
background-color : white;
background-color: ${props => props.contrast === "" ? "white" : "black"};
border: ${props => props.contrast === "" ? "" : "1px solid white"};
color: ${props => props.contrast === "" ? "#666" : "white"};
max-width : none;
min-wdith : 240px;
align : center;
......@@ -38,9 +41,8 @@ const ContentContainer = styled.div`
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12)!important;
`
const ButtonCancelar = styled(Button)`
background-color : rgba(158,158,158,0.2) !important;
color : #666 !important;
text-decoration : none !important;
color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
outline : none !important;
text-align : center !important;
margin : 0 8px !important;
......@@ -48,13 +50,32 @@ const ButtonCancelar = styled(Button)`
`
const ButtonConfirmar = styled(Button)`
background-color : #ff7f00 !important;
color : #fff !important;
background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
border-radius : 3px !important;
margin : 0 8px !important;
font-weight : 600 !important;
`
const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
margin-right : -8px !important;
background : transparent !important;
min-width: 0 !important;
width : 40px;
`
function CloseModalButton(props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
<CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
</StyledCloseModalButton>
)
}
export default function ModalExcluir (props) {
const text = {
header : "Tem certeza que deseja excluir este comentário?",
......@@ -63,32 +84,33 @@ export default function ModalExcluir (props) {
return (
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
centered="true"
onClose={props.handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
centered="true"
onClose={props.handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={props.open}>
<ContentContainer>
<ContentContainer contrast={props.contrast}>
<HeaderDiv>
<h3 style={{fontSize : "24px", margin : "20px 15px 10px", fontWeight : "normal"}}>
{text.header}
</h3>
<CloseModalButton handleClose={props.handleClose} contrast={props.contrast} />
</HeaderDiv>
<div style={{display : "flex", flexDirection : "column", padding : "20px 30px"}}>
<div style={{marginTop : "0", textAlign : "center", marginBottom : "20px"}}>
<span style={{fontSize : "14px", color : "#666"}}>{text.explanation}</span>
<span style={{fontSize : "14px"}}>{text.explanation}</span>
</div>
<div style={{display : "flex", flexDirection : "row", justifyContent: "center"}}>
<ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
<ButtonConfirmar onClick={props.handleConfirm}> EXCLUIR </ButtonConfirmar>
<ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
<ButtonConfirmar contrast={props.contrast} onClick={props.handleConfirm}> EXCLUIR </ButtonConfirmar>
</div>
</div>
</ContentContainer>
......
src/Components/ResourcePageComponents/CommentsArea.js
+ 6
− 3
View file @ f5d8e55e
......@@ -49,7 +49,7 @@ export default function CommentsArea(props) {
const [totalReviews, setTotalReviews] = useState(0);
const [currPageReviews, setCurrPageReviews] = useState(0);
const [gambiarra, setState] = useState(0)
const forceUpdate = () => { setState(gambiarra + 1) }
const forceUpdate = () => { setCurrPageReviews(0); setState(gambiarra + 1); }
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
......@@ -112,7 +112,10 @@ export default function CommentsArea(props) {
function handleSuccess(data, headers) {
setIsLoading(false)
setComentarios((previous) => previous.concat(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1)))
if (currPageReviews !== 0)
setComentarios((previous) => previous.concat(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1)))
else
setComentarios(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1))
if (headers.has('X-Total-Count'))
setTotalReviews(headers.get('X-Total-Count'))
}
......@@ -326,7 +329,7 @@ const LogInToComment = styled.div`
`
const GrayContainer = styled.div`
background-color: ${props => props.contrast === "" ? "#fafafa" : "black"};
background-color: ${props => props.contrast === "" ? "white" : "black"};
font-weight : 400;
font-size : 14px;
padding-bottom : 20px;
......
src/Components/SearchPageComponents/HeaderFilters.js
+ 135
− 136
View file @ f5d8e55e
......@@ -6,156 +6,155 @@ import TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';
export default function HeaderFilters({ options, contrast, orders, currOption, currOrder, handleChangeOption, handleChangeOrder }) {
if (currOption !== 'User')
return (
<FiltersPaper contrast={contrast} elevation={4} square>
<Grid className="gridStyle" container direction='row' alignItems='center'>
<Grid item xs={12} sm={6}>
<Grid container alignItems='center'>
<Grid item xs={12} md={2}>
<Label contrast={contrast}>
Buscar por:
</Label>
</Grid>
<Grid item xs={12} md={10}>
<StyledTextField
contrast={contrast}
select
fullWidth
value={currOption}
onChange={handleChangeOption}
variant="outlined"
>
{options.map((option) => (
<StyledMenuItem
contrast={contrast}
key={option.value}
value={option.name}
name={option.value}
>
<span style={currOption === option.name ? { color: option.color, textDecoration: "underline", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
{option.value}
</span>
</StyledMenuItem>
))}
</StyledTextField>
</Grid>
</Grid>
</Grid>
if (currOption !== 'User')
return (
<FiltersPaper contrast={contrast} elevation={4} square>
<Grid className="gridStyle" container direction='row' alignItems='center'>
<Grid item xs={12} sm={6}>
<Grid container alignItems='center'>
<Grid item xs={12} md={2}>
<Label contrast={contrast}>
Buscar por:
</Label>
</Grid>
<Grid item xs={12} md={10}>
<StyledTextField
contrast={contrast}
select
fullWidth
value={currOption}
onChange={handleChangeOption}
variant="outlined"
>
{options.map((option) => (
<StyledMenuItem
contrast={contrast}
key={option.value}
value={option.name}
name={option.value}
>
<span style={currOption === option.name ? { color: option.color, textDecoration: "none", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
{option.value}
</span>
</StyledMenuItem>
))}
</StyledTextField>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} sm={6}>
<Grid container alignItems='center'>
<Grid item xs={12} md={2}>
<Label contrast={contrast}>
Ordenar por:
</Label>
</Grid>
<Grid item xs={12} md={10}>
<StyledTextField
contrast={contrast}
select
fullWidth
value={currOrder}
onChange={handleChangeOrder}
variant="outlined"
>
{orders.map((option) => (
<StyledMenuItem
contrast={contrast}
color={option.color}
key={option.value}
value={option.name}
name={option.value}
>
<span style={currOrder === option.name ? { color: option.color, textDecoration: "none", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
{option.value}
</span>
</StyledMenuItem>
))}
</StyledTextField>
</Grid>
</Grid>
</Grid>
</Grid >
</FiltersPaper >
)
else
return (
<FiltersPaper contrast={contrast} elevation={4} square>
<Grid className="gridStyle" container direction='row' alignItems='center'>
<Grid item xs={12}>
<Grid container alignItems='center'>
<Grid item xs={12} md={2}>
<Label contrast={contrast}>
Buscar por:
</Label>
</Grid>
<Grid item xs={12} md={10}>
<StyledTextField
contrast={contrast}
select
fullWidth
value={currOption}
onChange={handleChangeOption}
variant="outlined"
>
{options.map((option) => (
<StyledMenuItem
contrast={contrast}
color={option.color}
key={option.value}
value={option.name}
name={option.value}
>
<span style={currOption === option.name ? { color: option.color, textDecoration: "none", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
{option.value}
</span>
</StyledMenuItem>
))}
</StyledTextField>
</Grid>
</Grid>
</Grid>
</Grid>
</FiltersPaper >
)
<Grid item xs={12} sm={6}>
<Grid container alignItems='center'>
<Grid item xs={12} md={2}>
<Label contrast={contrast}>
Ordenar por:
</Label>
</Grid>
<Grid item xs={12} md={10}>
<StyledTextField
contrast={contrast}
select
fullWidth
value={currOrder}
onChange={handleChangeOrder}
variant="outlined"
>
{orders.map((option) => (
<StyledMenuItem
contrast={contrast}
color={option.color}
key={option.value}
value={option.name}
name={option.value}
>
<span style={currOrder === option.name ? { color: option.color, textDecoration: "underline", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
{option.value}
</span>
</StyledMenuItem>
))}
</StyledTextField>
</Grid>
</Grid>
</Grid>
</Grid >
</FiltersPaper >
)
else
return (
<FiltersPaper contrast={contrast} elevation={4} square>
<Grid className="gridStyle" container direction='row' alignItems='center'>
<Grid item xs={12}>
<Grid container alignItems='center'>
<Grid item xs={12} md={2}>
<Label contrast={contrast}>
Buscar por:
</Label>
</Grid>
<Grid item xs={12} md={10}>
<StyledTextField
contrast={contrast}
select
fullWidth
value={currOption}
onChange={handleChangeOption}
variant="outlined"
>
{options.map((option) => (
<StyledMenuItem
contrast={contrast}
color={option.color}
key={option.value}
value={option.name}
name={option.value}
>
<span style={currOption === option.name ? { color: option.color, textDecoration: "underline", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
{option.value}
</span>
</StyledMenuItem>
))}
</StyledTextField>
</Grid>
</Grid>
</Grid>
</Grid>
</FiltersPaper >
)
}
const Label = styled.p`
text-align: center;
font-weight: 600;
color: ${props => props.contrast === "" ? "" : "white"};
text-align: center;
font-weight: 600;
color: ${props => props.contrast === "" ? "" : "white"};
`
const StyledTextField = styled(TextField)`
.MuiOutlinedInput-root {
&.Mui-focused fieldset {
border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
fieldset {
border-color: ${props => props.contrast === "" ? "#666" : "white"};
}
.MuiOutlinedInput-root {
&.Mui-focused fieldset {
border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
fieldset {
border-color: ${props => props.contrast === "" ? "#666" : "white"};
}
}
`
const StyledMenuItem = styled(MenuItem)`
background: ${props => props.contrast === "" ? "" : "black !important"};
background-color: ${props => props.contrast === "" ? "" : "black !important"};
`
const FiltersPaper = styled(Paper)`
text-align: center;
margin-top: 5px;
margin-bottom: 30px;
color: ${props => props.contrast === "" ? "#666" : "white"};
border: ${props => props.contrast === "" ? 0 : "1px solid white"};
text-align: center;
margin-top: 5px;
margin-bottom: 30px;
color: ${props => props.contrast === "" ? "#666" : "white"};
border: ${props => props.contrast === "" ? 0 : "1px solid white"};
.textInfo{
text-align: start;
}
.textInfo{
text-align: start;
}
.gridStyle{
padding: 0.5em 1em;
background: ${props => props.contrast === "" ? "#fff" : "black"};
}
.gridStyle{
padding: 0.5em 1em;
background: ${props => props.contrast === "" ? "#fff" : "black"};
}
`;
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment