diff --git a/src/App.css b/src/App.css index c8cb4a80e14ae5f66c4f7f4a0466a424679d2da9..8f1f8e1de21279f1e348d26a76a99dfb746f4e58 100644 --- a/src/App.css +++ b/src/App.css @@ -16,3 +16,10 @@ 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/>.*/ +.ContrastBackColor { + background-color: black !important; +} + +.ContrastTextColor { + color: yellow !important; +} diff --git a/src/App.js b/src/App.js index b5a80b2f2b1902af6232cdb5c49b1ca956a4d0c0..479005eec98ac622014f236e16646cb0141c0b62 100644 --- a/src/App.js +++ b/src/App.js @@ -53,6 +53,7 @@ import FormationMaterialPage from "./Pages/FormationMaterialPage.js"; import FormationMaterialIframe from "./Pages/FormationMaterialIframe.js"; import MaterialPage from "./Pages/MaterialPage"; import PageNotFound from "./Pages/PageNotFound.js"; +import ContrastBar from './Components/Acessibility/ContrastBar'; import NoteVariables from "./Admin/Pages/Pages/SubPages/NoteVariables"; import Institution from "./Admin/Pages/Pages/SubPages/Institutions"; @@ -94,6 +95,7 @@ import CreateRole from "./Admin/Components/Components/Inputs/CreateRole"; import BlockedUser from "./Admin/Pages/Pages/SubPages/BlockedUsers"; import AppBarAdmin from './Admin/Components/Components/AppBar' import createBrowserHistory from 'history/createBrowserHistory' +import './App.css'; export default function App() { // eslint-disable-next-line @@ -155,20 +157,20 @@ export default function App() { const AdminTemplate = (props) => { if (CheckUserPermission()) return ( - <div style={{ backgroundColor: " #D3D3D3" }}> - <AppBarAdmin /> - <div style={{ padding: "2em" }}> - {props.inner} - </div> + <div style={{ backgroundColor: " #D3D3D3" }}> + <AppBarAdmin /> + <div style={{ padding: "2em" }}> + {props.inner} </div> - ) + </div> + ) else return ( <div style={{ backgroundColor: " #D3D3D3" }}> - <div style={{ padding: "2em" }}> - <Unauthorized /> - </div> + <div style={{ padding: "2em" }}> + <Unauthorized /> </div> + </div> ) } @@ -176,6 +178,7 @@ export default function App() { // add piwik later // history={piwik.connectToHistory(customHistory)} <BrowserRouter> + <ContrastBar /> <Header /> <div style={{ @@ -224,234 +227,234 @@ export default function App() { <Route path="/topico" component={FormationMaterialPage} /> <Route path="/iframe-colecao" component={FormationMaterialIframe} /> <Route path="/material-formacao" component={MaterialPage} /> - - <Route - path="/admin/home" - exact={true} + + <Route + path="/admin/home" + exact={true} render={() => { - return <AdminTemplate inner={<Inframe/>}/> - }} + return <AdminTemplate inner={<Inframe />} /> + }} /> - <Route - path="/admin/institutions" + <Route + path="/admin/institutions" render={() => { - return <AdminTemplate inner={<Institution />}/> - }} + return <AdminTemplate inner={<Institution />} /> + }} /> - <Route - path="/admin/institution" + <Route + path="/admin/institution" render={() => { - return <AdminTemplate inner={<InstitutionCard />}/> - }} + return <AdminTemplate inner={<InstitutionCard />} /> + }} /> <Route path="/admin/institutionEdit" render={() => { - return <AdminTemplate inner={<InstitutionsInput />}/> + return <AdminTemplate inner={<InstitutionsInput />} /> }} /> <Route path="/admin/InstitutionCreate" render={() => { - return <AdminTemplate inner={<CreateInstitution />}/> + return <AdminTemplate inner={<CreateInstitution />} /> }} /> - <Route - path="/admin/noteVars" + <Route + path="/admin/noteVars" render={() => { - return <AdminTemplate inner={<NoteVariables />}/> - }} + return <AdminTemplate inner={<NoteVariables />} /> + }} /> - <Route - path="/admin/noteVar" + <Route + path="/admin/noteVar" render={() => { - return <AdminTemplate inner={<NoteVarCard />}/> - }} + return <AdminTemplate inner={<NoteVarCard />} /> + }} /> - <Route - path="/admin/noteVarEdit" + <Route + path="/admin/noteVarEdit" render={() => { - return <AdminTemplate inner={<NoteVarInputs />}/> - }} + return <AdminTemplate inner={<NoteVarInputs />} /> + }} /> - <Route - path="/admin/languages" + <Route + path="/admin/languages" render={() => { - return <AdminTemplate inner={<Languages />}/> - }} + return <AdminTemplate inner={<Languages />} /> + }} /> - <Route - path="/admin/languageEdit" + <Route + path="/admin/languageEdit" render={() => { - return <AdminTemplate inner={<EditLanguage />}/> - }} + return <AdminTemplate inner={<EditLanguage />} /> + }} /> - <Route - path="/admin/languageCreate" + <Route + path="/admin/languageCreate" render={() => { - return <AdminTemplate inner={<CreateLanguage />}/> - }} + return <AdminTemplate inner={<CreateLanguage />} /> + }} /> <Route path="/admin/CommunityQuestions" render={() => { - return <AdminTemplate inner={<CommunityQuestions />}/> + return <AdminTemplate inner={<CommunityQuestions />} /> }} /> <Route path="/admin/CommunityQuestion" render={() => { - return <AdminTemplate inner={<CommunityCard />}/> + return <AdminTemplate inner={<CommunityCard />} /> }} /> - <Route - path="/admin/Collections" + <Route + path="/admin/Collections" render={() => { - return <AdminTemplate inner={<Collections />}/> - }} + return <AdminTemplate inner={<Collections />} /> + }} /> - <Route - path="/admin/Collection" + <Route + path="/admin/Collection" render={() => { - return <AdminTemplate inner={<CollectionCard />}/> - }} + return <AdminTemplate inner={<CollectionCard />} /> + }} /> <Route path="/admin/EditCollection" render={() => { - return <AdminTemplate inner={<EditCollection />}/> + return <AdminTemplate inner={<EditCollection />} /> }} /> - <Route - path="/admin/Ratings" + <Route + path="/admin/Ratings" render={() => { - return <AdminTemplate inner={<Ratings />}/> - }} + return <AdminTemplate inner={<Ratings />} /> + }} /> - <Route - path="/admin/Rating" + <Route + path="/admin/Rating" render={() => { - return <AdminTemplate inner={<RatingCard />}/> - }} + return <AdminTemplate inner={<RatingCard />} /> + }} /> - <Route - path="/admin/EditRating" + <Route + path="/admin/EditRating" render={() => { - return <AdminTemplate inner={<EditRating />}/> - }} + return <AdminTemplate inner={<EditRating />} /> + }} /> - <Route - path="/admin/CreateRating" + <Route + path="/admin/CreateRating" render={() => { - return <AdminTemplate inner={<CreateRating />}/> - }} + return <AdminTemplate inner={<CreateRating />} /> + }} /> - <Route - path="/admin/Questions" + <Route + path="/admin/Questions" render={() => { - return <AdminTemplate inner={<Questions />}/> - }} + return <AdminTemplate inner={<Questions />} /> + }} /> - <Route - path="/admin/CreateQuestion" + <Route + path="/admin/CreateQuestion" render={() => { - return <AdminTemplate inner={<CreateQuestions />}/> - }} + return <AdminTemplate inner={<CreateQuestions />} /> + }} /> - <Route - path="/admin/activities" + <Route + path="/admin/activities" render={() => { - return <AdminTemplate inner={<Activity />}/> - }} + return <AdminTemplate inner={<Activity />} /> + }} /> - <Route - path="/admin/activity" + <Route + path="/admin/activity" render={() => { - return <AdminTemplate inner={<ActivityCard />}/> - }} + return <AdminTemplate inner={<ActivityCard />} /> + }} /> <Route path="/admin/learningObjects" render={() => { - return <AdminTemplate inner={<EducationalObject />}/> - }} + return <AdminTemplate inner={<EducationalObject />} /> + }} /> <Route path="/admin/learningObject" render={() => { - return <AdminTemplate inner={<EducationalObjectCard />}/> - }} + return <AdminTemplate inner={<EducationalObjectCard />} /> + }} /> <Route path="/admin/learningObjectEdit" render={() => { - return <AdminTemplate inner={<EducationalObjectEdit />}/> - }} + return <AdminTemplate inner={<EducationalObjectEdit />} /> + }} /> - <Route - path="/admin/complaints" + <Route + path="/admin/complaints" render={() => { - return <AdminTemplate inner={<Complaints />}/> - }} + return <AdminTemplate inner={<Complaints />} /> + }} /> - <Route - path="/admin/complaint" + <Route + path="/admin/complaint" render={() => { - return <AdminTemplate inner={<ComplaintCard />}/> - }} + return <AdminTemplate inner={<ComplaintCard />} /> + }} /> <Route path="/admin/users/teacher_requests" render={() => { - return <AdminTemplate inner={<AproveTeacher />}/> + return <AdminTemplate inner={<AproveTeacher />} /> }} /> - <Route - path="/admin/usersList" + <Route + path="/admin/usersList" render={() => { - return <AdminTemplate inner={<UserList />}/> - }} + return <AdminTemplate inner={<UserList />} /> + }} /> - <Route - path="/admin/user" + <Route + path="/admin/user" render={() => { - return <AdminTemplate inner={<UserCard />}/> - }} + return <AdminTemplate inner={<UserCard />} /> + }} /> - <Route - path="/admin/EditUser" + <Route + path="/admin/EditUser" render={() => { - return <AdminTemplate inner={<EditUser />}/> - }} + return <AdminTemplate inner={<EditUser />} /> + }} /> - <Route - path="/admin/permissions" + <Route + path="/admin/permissions" render={() => { - return <AdminTemplate inner={<UserPermissions />}/> - }} + return <AdminTemplate inner={<UserPermissions />} /> + }} /> - <Route - path="/admin/EditPermissions" + <Route + path="/admin/EditPermissions" render={() => { - return <AdminTemplate inner={<EditRole />}/> - }} + return <AdminTemplate inner={<EditRole />} /> + }} /> - <Route - path="/admin/CreateRole" + <Route + path="/admin/CreateRole" render={() => { - return <AdminTemplate inner={<CreateRole />}/> - }} + return <AdminTemplate inner={<CreateRole />} /> + }} /> - <Route - path="/admin/BlockedUsers" + <Route + path="/admin/BlockedUsers" render={() => { - return <AdminTemplate inner={<BlockedUser />}/> - }} + return <AdminTemplate inner={<BlockedUser />} /> + }} /> - <Route - path="/admin/sendEmail" + <Route + path="/admin/sendEmail" render={() => { - return <AdminTemplate inner={<SendEmail />}/> - }} + return <AdminTemplate inner={<SendEmail />} /> + }} /> <Route path='*' component={PageNotFound} /> diff --git a/src/Components/Acessibility/ContrastBar.css b/src/Components/Acessibility/ContrastBar.css new file mode 100644 index 0000000000000000000000000000000000000000..278dbe0d2b73e15816d2b330fc2c056d7d2fbcb0 --- /dev/null +++ b/src/Components/Acessibility/ContrastBar.css @@ -0,0 +1,79 @@ +/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre +Departamento de Informatica - Universidade Federal do Parana + +This file is part of Plataforma Integrada MEC. + +Plataforma Integrada MEC is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +Plataforma Integrada MEC is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +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/>.*/ + + +.contrastButton{ + border: none; + padding: 0; + background: none; + background-color: white; +} +.contrastButton:active { + border: none; + padding: 0; + background: none; + background-color: white; +} +.bar{ + background-color: white; + width: 100%; + height: 18px; +} + +.Contrastbar{ + background-color: black; + width: 100%; + height: 18px; + border-bottom: 1px solid white; +} + +.text{ + color: grey; + cursor: pointer; + width: 140px; + font-size: 13px; + padding-left: 10px; + padding-right: 10px; + text-align: center; + vertical-align: middle; + overflow: auto; +} + +.Contrasttext{ + color: yellow; + text-decoration: underline; + cursor: pointer; + width: 140px; + font-size: 13px; + padding-left: 10px; + padding-right: 10px; + text-align: center; + vertical-align: middle; +} + +.textRight { + float:right; + height:100%; + display: flex; + font-size: 13px; +} +.textLeft { + float:left; + height:100%; + font-size: 13px; +} \ No newline at end of file diff --git a/src/Components/Acessibility/ContrastBar.js b/src/Components/Acessibility/ContrastBar.js new file mode 100644 index 0000000000000000000000000000000000000000..88040c983496b07d525c94acab701e71c6bbfb99 --- /dev/null +++ b/src/Components/Acessibility/ContrastBar.js @@ -0,0 +1,109 @@ +/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre +Departamento de Informatica - Universidade Federal do Parana + +This file is part of Plataforma Integrada MEC. + +Plataforma Integrada MEC is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +Plataforma Integrada MEC is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +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 from 'react'; +import './ContrastBar.css'; +import ContrastImageOn from '../../img/OnContrastIcon.png'; +import ContrastImageOff from '../../img/OffContrastIcon.png'; +import { Store } from '../../Store'; + +/** + * Bar allowing for the toggle of the high contrast mode on the page. + */ +function ContrastBar() { + /* eslint-disable */ + + // Hook to set contrast context + const { state, dispatch } = React.useContext(Store); + + + const setContrastAction = (newContrast) => { + console.log(newContrast) + return dispatch({ + type: 'SET_CONTRAST', + payload: newContrast + }) + } + + const setFontSizeAction = (newFontSize) => { + return dispatch({ + type: 'SET_FONT_SIZE', + payload: newFontSize + }) + } + + React.useEffect(() => { }, [state]); + + const toggleContrast = () => { + var status = (state.contrast === '' ? 'Contrast' : '') + setContrastAction(status) + } + const incrementFontSize = () => { + document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) + 1) + "px"; + setFontSizeAction(parseInt(state.fontSize, 10) + 1); + } + const decrementFontSize = () => { + document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) - 1) + "px"; + setFontSizeAction(parseInt(state.fontSize, 10) - 1); + } + const defaultFontSize = () => { + setFontSizeAction(15); + document.getElementsByTagName("body")[0].style.fontSize = "15px"; + } + + return ( + <React.Fragment> + <div className={`${state.contrast}bar`}> + <div className='textLeft hide-on-small-and-down'> + <a className={`${state.contrast}text`} accessKey="1" href="#conteudo" title="Ir para o conteúdo alt + 1"> + Conteúdo 1 + </a> + <a className={`${state.contrast}text`} accessKey="2" href="#menu" title="Ir para o menu alt + 2"> + Menu 2 + </a> + <a className={`${state.contrast}text`} accessKey="3" href="#rodape" title="Ir para o rodapé alt + 3"> + Rodapé 3 + </a> + </div> + <div className='textRight'> + <div> + <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte"> + A+ + </a> + <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte"> + A- + </a> + <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte"> + A + </a> + </div> + <div onClick={toggleContrast}> + <a className={`${state.contrast}text`} title="Ativar modo de alto contraste"> + <img src={state.contrast === '' ? ContrastImageOff : ContrastImageOn} style={{ marginRight: 5 }} alt="ContrastIcon" width="11" height="11" /> + Contraste + </a> + </div> + + </div> + </div> + </React.Fragment> + ); + +} + +export default ContrastBar; \ No newline at end of file diff --git a/src/Components/ActivityListItem.js b/src/Components/ActivityListItem.js index 0d249401c851757d490eff07d316748ddad437c0..3a3eb3bda3738b19ef1d94bedf62b625c1614a18 100644 --- a/src/Components/ActivityListItem.js +++ b/src/Components/ActivityListItem.js @@ -115,7 +115,7 @@ export default function ActivityListItem(props) { }, []) return ( - <StyledListItem onMenuBar={props.onMenuBar}> + <StyledListItem onMenuBar={props.onMenuBar} contrast={props.contrast}> { !props.onMenuBar && <> @@ -138,10 +138,10 @@ export default function ActivityListItem(props) { } secondary={ <div> - + <span> <Link to={{ - pathname: props.ownerHref, + pathname: props.ownerHref, state: '0', }} className="owner-name-a" >{props.ownerName}</Link> {activity.text} <Link to={props.recipientHref} className="recipient-name-a">{props.recipientName}</Link> {activity.text2} </span> @@ -167,8 +167,9 @@ const StyledListItem = styled(ListItem)` .time-ago-span { font-size : 12px; - font-family : 'Lato', medium; - color : #787380; + font-family : 'Lato', medium; + color: ${props => props.contrast === '' ? "#787380" : "yellow"}; + color : #787380; } .owner-name-a { diff --git a/src/Components/Dropdown.js b/src/Components/Dropdown.js index cc064489e05b8550c0b787fc7b15a13fa156a758..ed2521323603ac4ab1b6611db5090da37577099e 100644 --- a/src/Components/Dropdown.js +++ b/src/Components/Dropdown.js @@ -73,10 +73,10 @@ export default function PositionedPopper(props) { {({ TransitionProps }) => ( <Fade {...TransitionProps} timeout={350}> <Paper> - <MenuList> + <MenuList className={`${state.contrast}BackColor`}> { props.items.map((item) => - <Link onClick={handleItemClicked} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link> + <Link onClick={handleItemClicked} className={`${state.contrast}TextColor`} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link> ) } </MenuList> @@ -85,7 +85,8 @@ export default function PositionedPopper(props) { )} </Popper> <Button - style={{ textTransform: "none", fontSize: "14px" }} + className={`${state.contrast}TextColor`} + style={{ textTransform: "none" }} aria-controls="menu-list-grow" aria-haspopup="true" onClick={handleClick('bottom')} diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js index c79d52b6f2cefa5ccf8b2e9ab5b65c5db26a5883..436cf2d7f0176c0039cbd8bb087c1772a9810e7c 100644 --- a/src/Components/MenuBar.js +++ b/src/Components/MenuBar.js @@ -158,18 +158,18 @@ export default function MenuBar(props) { const minhaArea = buildMyAreaTabs() return ( - <ContainerStyled fluid={true} > + <ContainerStyled fluid={true} className={`${state.contrast}BackColor`}> <Left> <Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link> <Dropdown name="Sobre" items={menuSobre} /> <Dropdown name="Ajuda" items={menuAjuda} /> <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" > - <ButtonStyled >Educação Conectada</ButtonStyled> + <ButtonStyled className={`${state.contrast}TextColor`} >Educação Conectada</ButtonStyled> </a> {/*<Link to="/loja"> <ButtonStyled>Lojinha</ButtonStyled> </Link>*/} - <ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled> + <ButtonStyled className={`${state.contrast}TextColor`} onClick={props.openSearchBar} ><IconSearchStyled className={`${state.contrast}TextColor`} />Buscar</ButtonStyled> </Left> <Right> @@ -179,9 +179,9 @@ export default function MenuBar(props) { <> <div style={{ boxSizing: "border-box" }}> <Link to="/termos-publicar-recurso"> - <ButtonPublicarRecurso> - <CloudUploadIcon style={{ color: "white", marginLeft: "0" }} /> - <span style={{ color: "#fff", textAlign: "center", alignSelf: "center", fontWeight: "500" }} > + <ButtonPublicarRecurso className={`${state.contrast}BackColor`}> + <CloudUploadIcon className={`${state.contrast}TextColor`} style={{ color: "white", marginLeft: "0" }} /> + <span className={`${state.contrast}TextColor`} style={{ color: "#fff", textAlign: "center", alignSelf: "center", fontWeight: "500" }} > PUBLICAR RECURSO </span> </ButtonPublicarRecurso> @@ -198,9 +198,9 @@ export default function MenuBar(props) { ) : ( <React.Fragment> - <ButtonPubRecursoStyled onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled> - <ButtonStyled onClick={props.openLogin}><ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar</ButtonStyled> - <ButtonStyled onClick={props.openSignUp}>Cadastre-<span style={{textTransform: 'lowercase'}}>se</span></ButtonStyled> + <ButtonPubRecursoStyled className={`${state.contrast}TextColor`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled> + <ButtonStyled className={`${state.contrast}TextColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}TextColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled> + <ButtonStyled className={`${state.contrast}TextColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled> </React.Fragment> ) } diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js index c8fbe2ae21be7c1b7897c603034785e9e345e2b9..16c5071331f1c9fab091322542e4f87d8fd20801 100644 --- a/src/Components/Notifications.js +++ b/src/Components/Notifications.js @@ -15,7 +15,7 @@ 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, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import NotificationsIcon from '@material-ui/icons/Notifications'; import { Button } from '@material-ui/core'; import Badge from '@material-ui/core/Badge'; @@ -28,6 +28,7 @@ import { withStyles } from '@material-ui/core/styles'; import { Link } from 'react-router-dom' import { getRecipientHref } from './Activities/getRecipientHref.js' import SnackBar from '../Components/SnackbarComponent' +import { Store } from '../Store'; const StyledBadge = styled(Badge)` .MuiBadge-dot-45{ @@ -75,6 +76,7 @@ const StyledMenu = withStyles({ export default function Notification(props) { const [anchorEl, setAnchorEl] = React.useState(null); + const { state } = useContext(Store); const [notifications, setNotifications] = useState([]); const [snack, setSnack] = useState({ open: false, @@ -187,7 +189,7 @@ export default function Notification(props) { /> <StyledNotificationButton onClick={handleClick}> <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge"> - <StyledNotificationsIcon /> + <StyledNotificationsIcon className={`${state.contrast}TextColor`} /> </StyledBadge> </StyledNotificationButton> <StyledMenu @@ -196,8 +198,9 @@ export default function Notification(props) { keepMounted open={Boolean(anchorEl)} onClose={handleClose} + contrast={state.contrast} > - <ContainerDiv> + <ContainerDiv contrast={state.contrast}> <div className="cabecalho"> <span style={{ fontSize: "15px" }}>NOTIFICAÇÕES •</span> <span className="cabecalho-marcar" onClick={handleClickNotification}>Marcar todas como lidas</span> @@ -206,6 +209,7 @@ export default function Notification(props) { notifications.map((notification) => (notification.viewed === false) && <ActivityListItem + contrast={state.contrast} onMenuBar={true} avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : null} activity={notification.activity} @@ -247,11 +251,12 @@ const ContainerDiv = styled.div` overflow-y : scroll; padding : 5px 5px 5px 5px; min-width : 160px; - background-color : #f1f1f1; + background-color: ${props => props.contrast === '' ? "#f1f1f1" : "black"}; .cabecalho { border-bottom : 1px solid #dadada; padding : 10px 15px; + color: ${props => props.contrast === '' ? "black" : "yellow"}; .cabecalho-marcar { font-family: Lato,bold; diff --git a/src/Store.js b/src/Store.js index 0cb5c0333ff49866a8125e8eb30e88582a815db9..6b8598b60a56213ce5f355eff17e67ede4370736 100644 --- a/src/Store.js +++ b/src/Store.js @@ -21,158 +21,170 @@ import React from 'react' export const Store = React.createContext() const initialState = { - searchOpen: false, - userIsLoggedIn : false, - userAgreedToPublicationTerms: false, - userAgreedToPublicationPermissions: false, - modalColaborarPlataformaOpen : false, - search: { - query: '*', - class: 'LearningObject' - }, - windowSize: { - width: 0, - height: 0 -}, - currentUser: { - askTeacherQuestion : false, - id : '', - name : '', - email : '', - avatar : '', - cover : '', - uid : '', - follows_count : 0, - collections_count : 0, - submitter_request : 'default', - roles : [] - } + searchOpen: false, + userIsLoggedIn: false, + userAgreedToPublicationTerms: false, + userAgreedToPublicationPermissions: false, + modalColaborarPlataformaOpen: false, + search: { + query: '*', + class: 'LearningObject' + }, + windowSize: { + width: 0, + height: 0 + }, + currentUser: { + askTeacherQuestion: false, + id: '', + name: '', + email: '', + avatar: '', + cover: '', + uid: '', + follows_count: 0, + collections_count: 0, + submitter_request: 'default', + roles: [] + }, + contrast: '', + fontSize: 15, } function reducer(state, action) { - switch (action.type){ - case 'SAVE_SEARCH': - return { - ...state, - search: action.newSearch - } - case 'HANDLE_SEARCH_BAR': - return { - ...state, - searchOpen: action.opened - } - case 'WINDOW_SIZE': - return { - ...state, - windowSize: action.innerWindow - } - case 'USER_LOGGED_IN': - if (action.login.avatar_file_name) { - Object.defineProperty(action.login, 'avatar', - Object.getOwnPropertyDescriptor(action.login, 'avatar_file_name')); - delete action.login['avatar_file_name']; - } - if (action.login.cover_file_name) { - Object.defineProperty(action.login, 'cover', - Object.getOwnPropertyDescriptor(action.login, 'cover_file_name')); - delete action.login['cover_file_name']; - } - return { - ...state, - userIsLoggedIn:action.userLoggedIn, - currentUser:action.login + switch (action.type) { + case 'SET_CONTRAST': + return { + ...state, + contrast: action.payload + }; + case 'SET_FONT_SIZE': + return { + ...state, + fontSize: action.payload + }; + case 'SAVE_SEARCH': + return { + ...state, + search: action.newSearch + } + case 'HANDLE_SEARCH_BAR': + return { + ...state, + searchOpen: action.opened + } + case 'WINDOW_SIZE': + return { + ...state, + windowSize: action.innerWindow + } + case 'USER_LOGGED_IN': + if (action.login.avatar_file_name) { + Object.defineProperty(action.login, 'avatar', + Object.getOwnPropertyDescriptor(action.login, 'avatar_file_name')); + delete action.login['avatar_file_name']; + } + if (action.login.cover_file_name) { + Object.defineProperty(action.login, 'cover', + Object.getOwnPropertyDescriptor(action.login, 'cover_file_name')); + delete action.login['cover_file_name']; + } + return { + ...state, + userIsLoggedIn: action.userLoggedIn, + currentUser: action.login + } + case 'USER_SIGNED_UP': + return { + ...state, + userIsLoggedIn: action.userLoggedIn, + currentUser: action.user + } + case 'USER_LOGGED_OUT': + localStorage.clear() + return { + ...state, + userIsLoggedIn: action.userLoggedOut, + currentUser: { + askTeacherQuestion: false, + id: '', + name: '', + email: '', + avatar_file_name: '', + cover_file_name: '', + uid: '', + follows_count: 0, + collections_count: 0, + submitter_request: 'default', + roles: [] + }, + userAgreedToPublicationTerms: false, + userAgreedToPublicationPermissions: false + } + case 'USER_AGREED_TO_PUBLICATION_TERMS': + return { + ...state, + userAgreedToPublicationTerms: action.userAgreement + } + case 'USER_AGREED_TO_PUBLICATION_PERMISSIONS': + return { + ...state, + userAgreedToPublicationPermissions: action.userAgreement + } + case 'USER_ACCESSED_USER_PAGE': + return { + ...state, + currentUser: action.set + } + case 'USER_CHANGED_COVER': + return { + ...state, + currentUser: action.currUser + } + case 'USER_DELETED_ACCOUNT': + localStorage.clear() + return { + ...state, + userIsLoggedIn: false, + currentUser: { + askTeacherQuestion: false, + id: '', + name: '', + email: '', + avatar_file_name: '', + cover_file_name: '', + uid: '', + follows_count: 0, + collections_count: 0, + submitter_request: 'default', + roles: [] + }, + } + case 'TOGGLE_MODAL_COLABORAR_PLATAFORMA': + return { + ...state, + modalColaborarPlataformaOpen: action.modalColaborarPlataformaOpen + } + case 'GET_USER': + return { + ...state, + currentUser: action.user + } + case 'USER_UPDATED_EMAIL': + return { + ...state, + currentUser: action.currUser + } + default: + return state } - case 'USER_SIGNED_UP': - return { - ...state, - userIsLoggedIn:action.userLoggedIn, - currentUser:action.user - } - case 'USER_LOGGED_OUT': - localStorage.clear() - return { - ...state, - userIsLoggedIn:action.userLoggedOut, - currentUser:{ - askTeacherQuestion : false, - id : '', - name : '', - email : '', - avatar_file_name : '', - cover_file_name : '', - uid : '', - follows_count : 0, - collections_count : 0, - submitter_request : 'default', - roles : [] - }, - userAgreedToPublicationTerms: false, - userAgreedToPublicationPermissions: false - } - case 'USER_AGREED_TO_PUBLICATION_TERMS': - return { - ...state, - userAgreedToPublicationTerms: action.userAgreement - } - case 'USER_AGREED_TO_PUBLICATION_PERMISSIONS': - return { - ...state, - userAgreedToPublicationPermissions : action.userAgreement - } - case 'USER_ACCESSED_USER_PAGE': - return { - ...state, - currentUser : action.set - } - case 'USER_CHANGED_COVER': - return { - ...state, - currentUser : action.currUser - } - case 'USER_DELETED_ACCOUNT': - localStorage.clear() - return { - ...state, - userIsLoggedIn:false, - currentUser: { - askTeacherQuestion : false, - id : '', - name : '', - email : '', - avatar_file_name : '', - cover_file_name : '', - uid : '', - follows_count : 0, - collections_count : 0, - submitter_request : 'default', - roles : [] - }, - } - case 'TOGGLE_MODAL_COLABORAR_PLATAFORMA': - return { - ...state, - modalColaborarPlataformaOpen : action.modalColaborarPlataformaOpen - } - case 'GET_USER': - return { - ...state, - currentUser:action.user - } - case 'USER_UPDATED_EMAIL': - return { - ...state, - currentUser : action.currUser - } - default: - return state - } } export function StoreProvider(props) { const [state, dispatch] = React.useReducer(reducer, initialState); - const value = { state, dispatch }; + const value = { state, dispatch }; return ( <Store.Provider value={value}> {props.children} diff --git a/src/env.js b/src/env.js index 7284c42754e5c679138196c2bae2a2f128779c2b..95815e96e0a4b6d934c32704a85f04284e77d16e 100644 --- a/src/env.js +++ b/src/env.js @@ -17,7 +17,7 @@ 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/>.*/ -var apiDomain = 'https://api.portalmectest.c3sl.ufpr.br', +var apiDomain = 'https://api.portalmec.c3sl.ufpr.br', apiVersion = 'v1', apiUrl = apiDomain + '/' + apiVersion; diff --git a/src/img/OffContrastIcon.png b/src/img/OffContrastIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..f44e653f9499dec5cfc293de994c1081ff9c64ec Binary files /dev/null and b/src/img/OffContrastIcon.png differ diff --git a/src/img/OnContrastIcon.png b/src/img/OnContrastIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..3ae2fd847b997f007110cfb4d85930f639714ab5 Binary files /dev/null and b/src/img/OnContrastIcon.png differ