From 774932e45a03b7964b2b418c7fb53e452d20380a Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Mon, 1 Feb 2021 12:17:51 -0300
Subject: [PATCH] Fixed the menu of the card
---
src/Components/ResourceCardOptions.js | 178 +++++++++++++++++---------
1 file changed, 114 insertions(+), 64 deletions(-)
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index 7503fec2..44bc52df 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -16,8 +16,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useContext, useState} from 'react';
-import {Store} from '../Store.js'
+import React, { useContext, useState } from 'react';
+import { Store } from '../Store.js'
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
@@ -27,16 +27,22 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
import OpenIcon from '@material-ui/icons/OpenInNew';
import ReportIcon from '@material-ui/icons/Error';
import ReportModal from './ReportModal.js'
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
import DownloadIcon from '@material-ui/icons/CloudDownload';
import ShareIcon from '@material-ui/icons/Share';
import AddIcon from '@material-ui/icons/CreateNewFolder';
import GuardarModal from './GuardarModal'
import ShareModal from './ShareModal'
import SnackbarComponent from './SnackbarComponent'
-
-export default function ResourceCardOptions (props) {
- const {state} = useContext(Store)
+import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
+import Tooltip from '@material-ui/core/Tooltip';
+import SignUpModal from './SignUpModal'
+import LoginModal from './LoginModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
+
+export default function ResourceCardOptions(props) {
+ const { state } = useContext(Store)
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
@@ -60,8 +66,8 @@ export default function ResourceCardOptions (props) {
const [saveToCol, toggleSave] = useState(false)
const handleGuardar = () => {
- if(state.currentUser.id === '') {
- console.log('abrir login modal');
+ if (!state.currentUser.id) {
+ handleLogin();
}
else {
toggleSave(true);
@@ -78,8 +84,8 @@ export default function ResourceCardOptions (props) {
const [shareOpen, toggleShare] = useState(false)
const handleShare = () => {
- if(state.currentUser.id === '') {
- console.log('abrir login modal');
+ if (!state.currentUser.id) {
+ handleLogin()
}
else {
toggleShare(true);
@@ -87,65 +93,109 @@ export default function ResourceCardOptions (props) {
handleClose()
}
const getShareablePageLink = () => {
- return (window.location.href + "/recurso/" + props.learningObjectId)
+ return (window.origin + "/recurso/" + props.learningObjectId)
+ }
+
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
+
+ function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+ }
+
+ function toggleLoginSnackbar(reason) {
+ if (reason === 'clickaway') {
+ return;
+ }
+ handleSuccessfulLogin(false);
}
const [snackbarOpen, toggleSnackbar] = useState(false)
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
return (
- <React.Fragment>
- <ReportModal open={reportModal} handleClose={() => handleModalReportar(false)}
- form="recurso" complainableId={props.learningObjectId}
- complainableType={"LearningObject"}
- {...props}
- />
- <GuardarModal open={saveToCol} handleClose={() => {toggleSave(false)}}
- thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
- />
- <ShareModal open={shareOpen} handleClose={() => {toggleShare(false)}}
- thumb={props.thumb} title={props.title} link={getShareablePageLink()}
- />
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
- />
- <div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
- <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
- <MoreVertIcon style={{color : "#666"}}/>
- </ButtonNoWidth>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- >
- <StyledMenuItem onClick={handleClose}>
- <Link to={"/recurso/" + props.learningObjectId}>
- <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
- </Link>
- </StyledMenuItem>
-
- {
- props.downloadableLink &&
- <StyledMenuItem onClick={() => {enableDownload(); handleClose()}}>
- <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar
- </StyledMenuItem>
- }
-
- <StyledMenuItem onClick={handleShare}>
- <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar
- </StyledMenuItem>
-
- <StyledMenuItem onClick={handleGuardar}>
- <ListItemIcon><AddIcon /></ListItemIcon>Guardar
- </StyledMenuItem>
-
- <StyledMenuItem onClick={() => {handleModalReportar(true); handleClose()}}>
- <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
- </StyledMenuItem>
- </Menu>
- </div>
- </React.Fragment>
- );
+ <>
+
+ <React.Fragment>
+ <ReportModal open={reportModal} handleClose={() => handleModalReportar(false)}
+ form="recurso" complainableId={props.learningObjectId}
+ complainableType={"LearningObject"}
+ {...props}
+ />
+ <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+ thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
+ />
+ <ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }}
+ thumb={props.thumb} title={props.title} link={getShareablePageLink()}
+ />
+ <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
+ />
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ />
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+ <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+ </Snackbar>
+ <div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
+ <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}>
+ <MoreVertIcon style={{ color: "#666" }} />
+ </ButtonNoWidth>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <Tooltip title="Não preserva filtro" arrow>
+ <StyledMenuItem onClick={handleClose}>
+ <Link to={"/recurso/" + props.learningObjectId}>
+ <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+ </Link>
+ </StyledMenuItem>
+ </Tooltip>
+
+ <Tooltip title="Preserva filtro" arrow>
+ <StyledMenuItem onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
+ <ListItemIcon><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
+ </StyledMenuItem>
+ </Tooltip>
+
+ {
+ props.downloadableLink &&
+ <StyledMenuItem onClick={() => { enableDownload(); handleClose() }}>
+ <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar
+ </StyledMenuItem>
+ }
+
+ <StyledMenuItem onClick={handleShare}>
+ <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar
+ </StyledMenuItem>
+
+ <StyledMenuItem onClick={handleGuardar}>
+ <ListItemIcon><AddIcon /></ListItemIcon>Guardar
+ </StyledMenuItem>
+
+ <StyledMenuItem onClick={() => { handleModalReportar(true); handleClose() }}>
+ <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+ </StyledMenuItem>
+
+ </Menu>
+ </div>
+ </React.Fragment>
+ </>
+ );
}
const ButtonNoWidth = styled(Button)`
--
GitLab