From 965df58c6ceb7af4ad486bb8661f84d61cd0fc66 Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Wed, 3 Jun 2020 10:34:31 -0300
Subject: [PATCH] responsiveness fix
---
.../ResourcePageComponents/Footer.js | 217 ++++++++++++++----
1 file changed, 171 insertions(+), 46 deletions(-)
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index 2f6adf91..83a932f6 100644
--- a/src/Components/ResourcePageComponents/Footer.js
+++ b/src/Components/ResourcePageComponents/Footer.js
@@ -32,6 +32,56 @@ import ReportRecursoForm from '../ReportRecursoForm.js'
import ShareModal from '../ShareModal.js'
import GuardarModal from '../GuardarModal.js'
import RedirectModal from '../RedirectModal'
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+function ReportButton (props) {
+ return (
+ !props.complained ?
+ (
+ <ButtonGrey onClick={props.userLoggedIn ? props.toggleReport : props.openLogin}>
+ <span className="button-text">
+ <ErrorIcon className="icon"/> Reportar abuso ou erro
+ </span>
+ </ButtonGrey>
+ )
+ :
+ (
+ <ButtonGrey>
+ <span className="button-text-report">
+ <ErrorIcon className="icon"/> Você já reportou este recurso
+ </span>
+ </ButtonGrey>
+ )
+ )
+}
+
+function DownloadButton (props) {
+ return (
+ props.downloadableLink ?
+ (
+ <ButtonOrange onClick={props.enableDownload}>
+ <span className="text">
+ <GetAppIcon className="icon"/> Baixar Recurso
+ </span>
+ </ButtonOrange>
+ )
+ :
+ props.link ?
+ (
+ <ButtonOrange onClick={props.toggleRedirect}>
+ <span className="text">
+ <CallMadeIcon className="icon"/> Abrir Recurso
+ </span>
+ </ButtonOrange>
+ )
+ :
+ (
+ <React.Fragment/>
+ )
+ )
+}
export default function Footer (props) {
const {state} = useContext(Store)
@@ -40,14 +90,25 @@ export default function Footer (props) {
window.open(url, '_blank');
props.handleSnackbar(0)
}
-
+ let windowWidth = window.innerWidth
const [reportOpen, toggleReport] = useState(false)
const [shareOpen, toggleShare] = useState(false)
const [saveToCol, toggleSave] = useState(false)
const [redirectOpen, toggleRedirect] = useState(false)
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
+ function handleClick(event) {
+ setAnchorEl(event.currentTarget);
+ }
+
+ function handleClose() {
+ setAnchorEl(null);
+ }
+
return (
<React.Fragment>
+ {/*-------------------------------MODALS---------------------------------------*/}
<ReportModal open={reportOpen} handleClose={() => {toggleReport(false)}}
form="recurso"
complainableId={props.recursoId}
@@ -64,57 +125,107 @@ export default function Footer (props) {
<RedirectModal open={redirectOpen} handleClose={() => {toggleRedirect(false)}}
link={props.link}
/>
+ {/*----------------------------------------------------------------------------*/}
+
+ {/*-----------------------------BUTTONS----------------------------------------*/}
<OpcoesDiv>
<StyledGrid container>
+ {
+ windowWidth > 990 ?
+ (
+ <React.Fragment>
+ {/*Botao Reportar*/}
+ <Grid item xs={3}>
+ <ReportButton
+ userLoggedIn={state.currentUser.id === '' ? false : true}
+ toggleReport={() => {toggleReport(true)}}
+ openLogin={() => console.log('abrir login modal')}
+ complained={props.complained}
+ />
+ </Grid>
- {/*Botao Reportar*/}
- <Grid item xs={3}>
- <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleReport(true)}>
- <span className="button-text">
- <ErrorIcon className="icon"/> Reportar abuso ou erro
- </span>
- </ButtonGrey>
- </Grid>
-
- {/*Botao Compartilhar*/}
- <Grid item xs={3}>
- <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleShare(true)}>
- <span className="button-text">
- <ShareIcon className="icon"/> Compartilhar
- </span>
- </ButtonGrey>
- </Grid>
-
- {/*Botao Guardar*/}
- <Grid item xs={3}>
- <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleSave(true)}>
- <span className="button-text">
- <FolderIcon className="icon"/>Guardar
- </span>
- </ButtonGrey>
- </Grid>
+ {/*Botao Compartilhar*/}
+ <Grid item xs={3}>
+ <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleShare(true)}>
+ <span className="button-text">
+ <ShareIcon className="icon"/> Compartilhar
+ </span>
+ </ButtonGrey>
+ </Grid>
- {
- props.downloadableLink &&
- <Grid item xs={3} style={{justifyContent : "right !important"}}>
- <ButtonOrange onClick={() => {enableDownload()}}>
- <span className="text">
- <GetAppIcon className="icon"/> Baixar Recurso
+ {/*Botao Guardar*/}
+ <Grid item xs={3}>
+ <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleSave(true)}>
+ <span className="button-text">
+ <FolderIcon className="icon"/>Guardar
</span>
- </ButtonOrange>
- </Grid>
- }
- {
- (!props.downloadableLink && props.link ) &&
- <Grid item xs={3} style={{justifyContent : "right !important"}}>
- <ButtonOrange onClick={() => {toggleRedirect(true)}}>
- <span className="text">
- <CallMadeIcon className="icon"/> Abrir Recurso
+ </ButtonGrey>
+ </Grid>
+
+ <Grid item xs={3} style={{justifyContent : "right !important"}}>
+ <DownloadButton
+ downloadableLink={props.downloadableLink}
+ link={props.link}
+ enableDownload={enableDownload}
+ toggleRedirect={() => {toggleRedirect(true)}}
+ />
+ </Grid>
+ </React.Fragment>
+ )
+ :
+ (
+ <React.Fragment>
+ {/*Botao Guardar*/}
+ <Grid item xs={4}>
+ <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleSave(true)}>
+ <span className="button-text">
+ <FolderIcon className="icon"/>Guardar
</span>
- </ButtonOrange>
- </Grid>
+ </ButtonGrey>
+ </Grid>
+
+ <Grid item xs={7}>
+ <DownloadButton
+ downloadableLink={props.downloadableLink}
+ link={props.link}
+ enableDownload={enableDownload}
+ toggleRedirect={() => {toggleRedirect(true)}}
+ />
+ </Grid>
+
+ <Grid item xs={1}>
+ <Button aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+ <MoreVertIcon/>
+ </Button>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <MenuItem>
+ <ReportButton
+ userLoggedIn={state.currentUser.id === '' ? false : true}
+ toggleReport={() => {toggleReport(true)}}
+ openLogin={() => console.log('abrir login modal')}
+ complained={props.complained}
+ />
+ </MenuItem>
+ <MenuItem>
+ <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleShare(true)}>
+ <span className="button-text">
+ <ShareIcon className="icon"/> Compartilhar
+ </span>
+ </ButtonGrey>
+ </MenuItem>
+ </Menu>
+ </Grid>
+ </React.Fragment>
+ )
}
+
</StyledGrid>
</OpcoesDiv>
</React.Fragment>
@@ -129,8 +240,9 @@ const OpcoesDiv = styled.div`
`
const StyledGrid = styled(Grid)`
- padding-right : 15px;
- padding-left : 15px;
+ @media screen and (min-width: 990px) {
+ padding-left : 15px !important;
+ }
.MuiGrid-item {
padding-right : 15px;
@@ -163,6 +275,7 @@ const ButtonGrey = styled(Button)`
word-wrap : normal !important;
direction : ltr !important;
padding-right : 2px;
+ color : inherit !important;
}
.button-text {
@@ -177,6 +290,18 @@ const ButtonGrey = styled(Button)`
font-style : inherit;
font-variant : inherit;
}
+ .button-text-report {
+ cursor : pointer;
+ line-height : 36px;
+ text-align : center;
+ color : red !important;
+ white-space : nowrap;
+ text-transform : uppercase;
+ font-weight : 600;
+ font-size : 14px;
+ font-style : inherit;
+ font-variant : inherit;
+ }
`
const ButtonOrange = styled(Button)`
--
GitLab