From bae10bdd7b8c260daa8d784884717b4ffa850169 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Tue, 3 Aug 2021 14:56:12 -0300
Subject: [PATCH] Updating components so they can work with the new cards
---
src/Components/ColCardOwnerOptions.js | 19 +++++-----
src/Components/ColCardPublicOptions.js | 38 ++++++++++---------
src/Components/ResourceCardOptions.js | 29 +++++++-------
src/Components/ResourceList.js | 1 +
.../CollectionTemplate.js | 1 +
.../SearchPageComponents/ResourceTemplate.js | 1 +
.../PanelComponents/TemplateColecao.js | 2 +
.../PanelComponents/TemplateCuradoria.js | 1 +
.../PanelComponents/TemplateRecurso.js | 1 +
.../PublicUserPageTabs/LastLearnObj.js | 1 +
.../TabPanels/UserPageTabs/PanelColecoes.js | 1 +
src/Pages/CollectionPage.js | 4 +-
12 files changed, 57 insertions(+), 42 deletions(-)
diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js
index a0757806..3199c61e 100644
--- a/src/Components/ColCardOwnerOptions.js
+++ b/src/Components/ColCardOwnerOptions.js
@@ -57,7 +57,7 @@ export default function ColCardOwnerOptions (props) {
/>
<div style={{fontSize: "12px"}}>
- <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+ <Button className={`${props.contrast}LinkColor`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
OPÇÕES <MoreVertIcon style={{color : "inherit"}}/>
</Button>
<Menu
@@ -67,18 +67,18 @@ export default function ColCardOwnerOptions (props) {
open={Boolean(anchorEl)}
onClose={handleClose}
>
- <StyledMenuItem>
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast}>
<Link to={"/colecao-do-usuario/" + props.id}>
- <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+ <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir
</Link>
</StyledMenuItem>
- <StyledMenuItem onClick={() => {toggleModalEditar(true)}}>
- <ListItemIcon><CreateIcon /></ListItemIcon>Editar
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {toggleModalEditar(true)}}>
+ <ListItemIcon className={`${props.contrast}LinkColor`}><CreateIcon /></ListItemIcon>Editar
</StyledMenuItem>
- <StyledMenuItem onClick={() => {toggleModalExcluir(true)}} >
- <ListItemIcon><DeleteForeverIcon /></ListItemIcon>Excluir
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {toggleModalExcluir(true)}} >
+ <ListItemIcon className={`${props.contrast}LinkColor`}><DeleteForeverIcon /></ListItemIcon>Excluir
</StyledMenuItem>
@@ -89,13 +89,12 @@ export default function ColCardOwnerOptions (props) {
}
export const StyledMenuItem = styled(MenuItem)`
- color : #666 !important;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
.MuiSvgIcon-root {
vertical-align : middle !important;
}
a {
- text-decoration : none !important;
- color : #666 !important;
+ color : inherit !important;
}
`
diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js
index baa6cc80..4e014419 100644
--- a/src/Components/ColCardPublicOptions.js
+++ b/src/Components/ColCardPublicOptions.js
@@ -72,9 +72,9 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
open={Boolean(anchorEl)}
onClose={handleClose}
>
- <StyledMenuItem>
+ <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast}>
<Link to={"/colecao-do-usuario/" + id}>
- <ListItemIcon>
+ <ListItemIcon className={`${contrast}LinkColor`}>
<OpenIcon />
</ListItemIcon>
Abrir
@@ -82,21 +82,23 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
</StyledMenuItem>
<StyledMenuItem
+ className={`${contrast}LinkColor`}
+ contrast={contrast}
onClick={() =>
window.open("/colecao-do-usuario/" + id, "_blank")
}
>
- <ListItemIcon>
+ <ListItemIcon className={`${contrast}LinkColor`}>
<OpenInBrowserIcon />
</ListItemIcon>
Abrir em nova guia
</StyledMenuItem>
- <StyledMenuItem onClick={handleLike}>
- <ListItemIcon>
+ <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast} onClick={handleLike}>
+ <ListItemIcon className={`${contrast}LinkColor`}>
{
liked ?
- <FavoriteIcon style={{ fill: 'red' }} /> : <FavoriteIcon style={{ fill: '#666' }} />
+ <FavoriteIcon /> : <FavoriteIcon />
}
</ListItemIcon>
{
@@ -105,8 +107,8 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
}
</StyledMenuItem>
- <StyledMenuItem onClick={handleFollow}>
- <ListItemIcon>
+ <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast} onClick={handleFollow}>
+ <ListItemIcon className={`${contrast}LinkColor`}>
{
userFollowingCol ?
<ExitToAppIcon /> : <AddIcon />
@@ -119,6 +121,8 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
</StyledMenuItem>
<StyledMenuItem
+ className={`${contrast}LinkColor`}
+ contrast={contrast}
onClick={() => {
if (currentUserId)
handleReportModal(true);
@@ -126,7 +130,7 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
handleLogin()
}}
>
- <ListItemIcon>
+ <ListItemIcon className={`${contrast}LinkColor`}>
<ReportProblemIcon />
</ListItemIcon>
Reportar
@@ -138,13 +142,11 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
}
export const StyledMenuItem = styled(MenuItem)`
- color: #666 !important;
-
- .MuiSvgIcon-root {
- vertical-align: middle !important;
- }
- a {
- text-decoration: none !important;
- color: #666 !important;
- }
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ .MuiSvgIcon-root {
+ vertical-align: middle !important;
+ }
+ a {
+ color: inherit !important;
+ }
`;
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index e8689f0b..00f171ba 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -140,33 +140,33 @@ export default function ResourceCardOptions(props) {
open={Boolean(anchorEl)}
onClose={handleClose}
>
- <StyledMenuItem onClick={handleClose}>
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleClose}>
<Link to={"/recurso/" + props.learningObjectId}>
- <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+ <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir
</Link>
</StyledMenuItem>
- <StyledMenuItem onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
- <ListItemIcon><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
+ <ListItemIcon className={`${props.contrast}LinkColor`}><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
</StyledMenuItem>
{
props.downloadableLink &&
- <StyledMenuItem onClick={() => { enableDownload(); handleClose() }}>
- <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => { enableDownload(); handleClose() }}>
+ <ListItemIcon className={`${props.contrast}LinkColor`}><DownloadIcon /></ListItemIcon>Baixar
</StyledMenuItem>
}
- <StyledMenuItem onClick={handleShare}>
- <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleShare}>
+ <ListItemIcon className={`${props.contrast}LinkColor`}><ShareIcon /></ListItemIcon>Compartilhar
</StyledMenuItem>
- <StyledMenuItem onClick={handleGuardar}>
- <ListItemIcon><AddIcon /></ListItemIcon>Guardar
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleGuardar}>
+ <ListItemIcon className={`${props.contrast}LinkColor`}><AddIcon /></ListItemIcon>Guardar
</StyledMenuItem>
- <StyledMenuItem onClick={() => { handleReport() }}>
- <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => { handleReport() }}>
+ <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar
</StyledMenuItem>
</Menu>
@@ -181,7 +181,6 @@ const ButtonNoWidth = styled(Button)`
min-width : 24px !important;
max-height : 24px !important;
padding : 0 !important;
- color : #a5a5a5 !important;
.MuiButton-root {
width : 24px !important;
@@ -199,7 +198,11 @@ const ButtonNoWidth = styled(Button)`
`
const StyledMenuItem = styled(MenuItem)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
.MuiSvgIcon-root {
vertical-align : middle !important;
}
+ a {
+ color: inherit !important;
+ }
`
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index e32176c7..1abdd387 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -153,6 +153,7 @@ export default function ResourceList(props) {
return (
<ResourceGrid item key={card.title}>
<ResourceCardFunction
+ contrast={props.contrast}
avatar={card.avatar}
id={card.id}
thumbnail={card.thumbnail}
diff --git a/src/Components/SearchPageComponents/CollectionTemplate.js b/src/Components/SearchPageComponents/CollectionTemplate.js
index 923af661..ec0856eb 100644
--- a/src/Components/SearchPageComponents/CollectionTemplate.js
+++ b/src/Components/SearchPageComponents/CollectionTemplate.js
@@ -34,6 +34,7 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
resources.map((card) => {
return <Grid item key={new Date().toISOString() + card.id} >
<CollectionCardFunction
+ contrast={contrast}
name={card.name}
tags={card.tags}
rating={card.review_average}
diff --git a/src/Components/SearchPageComponents/ResourceTemplate.js b/src/Components/SearchPageComponents/ResourceTemplate.js
index 063e6178..ce1057f4 100644
--- a/src/Components/SearchPageComponents/ResourceTemplate.js
+++ b/src/Components/SearchPageComponents/ResourceTemplate.js
@@ -34,6 +34,7 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
resources.map((card) => {
return <Grid item key={new Date().toISOString() + card.id} >
<ResourceCardFunction
+ contrast={contrast}
avatar={card.publisher ? card.publisher.avatar : ""}
id={card.id}
thumbnail={card.thumbnail}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateColecao.js b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
index 2ccdd707..26eb8750 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateColecao.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
@@ -31,6 +31,7 @@ export default function PanelTemplateColecao(props) {
if (followerBoolean) {
return (
<CollectionCardFunction
+ contrast={props.contrast}
name={card.name}
collections={card.followable.collection_items}
rating={card.followable.review_average}
@@ -52,6 +53,7 @@ export default function PanelTemplateColecao(props) {
else {
return (
<CollectionCardFunction
+ contrast={props.contrast}
name={card.name}
tags={card.tags}
rating={card.review_average}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
index 98e2d50e..c6585ef1 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
@@ -58,6 +58,7 @@ export default function Template(props) {
props.sliceArr.map((card) =>
<Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
<ResourceCardFunction
+ contrast={props.contrast}
avatar={card.submitter.avatar}
id={card.learning_object.id}
thumbnail={card.learning_object.thumbnail}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
index dc8f2b75..c7e4cd6e 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -60,6 +60,7 @@ export default function Template(props) {
props.slice.map((card) =>
<Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
<ResourceCardFunction
+ contrast={props.contrast}
key={card.id}
avatar={card.publisher.avatar}
id={card.id}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
index 2a489ac6..d9adc97e 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
@@ -55,6 +55,7 @@ export default function LastLearnObjs(props) {
props.learningObjs.slice(0, 4).map((card) =>
<Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
<ResourceCardFunction
+ contrast={contrast}
avatar={card.publisher.avatar}
id={card.id}
thumbnail={card.thumbnail}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index 79b37059..7db46ecc 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -270,6 +270,7 @@ function Tentativa(props) {
props.sliceArr.map((card) =>
<Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
<CollectionCardFunction
+ contrast={props.contrast}
name={card.name}
tags={card.tags}
rating={card.review_average}
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index 0c60a960..7e093abe 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -123,7 +123,9 @@ export default function CollectionPage(props) {
<Grid container justify="center" style={{ backgroundColor: '#f4f4f4' }}>
{/* <Grid item xs={1}/> */}
<Grid item xs={10}>
- <ResourceList resources={
+ <ResourceList
+ contrast={state.contrast}
+ resources={
collection.collection_items ?
collection.collection_items.map(i => {
return {
--
GitLab