From 404bad790dd2994e1647470d02d7279b087991b8 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Mon, 5 Oct 2020 15:40:41 -0300
Subject: [PATCH] Optimized the way to display the icons of the Drawer
---
.../Components/Components/DisplayIcon.js | 238 +++++-------------
1 file changed, 56 insertions(+), 182 deletions(-)
diff --git a/src/Admin/Components/Components/DisplayIcon.js b/src/Admin/Components/Components/DisplayIcon.js
index 21b70b10..0bb9bf56 100644
--- a/src/Admin/Components/Components/DisplayIcon.js
+++ b/src/Admin/Components/Components/DisplayIcon.js
@@ -16,188 +16,62 @@ 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 ListItemIcon from '@material-ui/core/ListItemIcon';
-import HomeIcon from '@material-ui/icons/Home';
-import PeopleRoundedIcon from '@material-ui/icons/PeopleRounded';
-import ContactSupportRoundedIcon from '@material-ui/icons/ContactSupportRounded';
-import LanguageRoundedIcon from '@material-ui/icons/LanguageRounded';
-import AccountBalanceRoundedIcon from '@material-ui/icons/AccountBalanceRounded';
-import MenuBookRoundedIcon from '@material-ui/icons/MenuBookRounded';
-import StarRoundedIcon from '@material-ui/icons/StarRounded';
-import AccountCircleRoundedIcon from '@material-ui/icons/AccountCircleRounded';
-import TrendingUpRoundedIcon from '@material-ui/icons/TrendingUpRounded';
-import HelpRoundedIcon from '@material-ui/icons/HelpRounded';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
-import PersonRoundedIcon from '@material-ui/icons/PersonRounded';
-import BlockRoundedIcon from '@material-ui/icons/BlockRounded';
-import AnnouncementRoundedIcon from '@material-ui/icons/AnnouncementRounded';
-import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
-import TimelineRoundedIcon from '@material-ui/icons/TimelineRounded';
-import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
-import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded';
-import AllOutIcon from '@material-ui/icons/AllOut';
+import React from "react";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import HomeIcon from "@material-ui/icons/Home";
+import PeopleRoundedIcon from "@material-ui/icons/PeopleRounded";
+import ContactSupportRoundedIcon from "@material-ui/icons/ContactSupportRounded";
+import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
+import AccountBalanceRoundedIcon from "@material-ui/icons/AccountBalanceRounded";
+import MenuBookRoundedIcon from "@material-ui/icons/MenuBookRounded";
+import StarRoundedIcon from "@material-ui/icons/StarRounded";
+import AccountCircleRoundedIcon from "@material-ui/icons/AccountCircleRounded";
+import TrendingUpRoundedIcon from "@material-ui/icons/TrendingUpRounded";
+import HelpRoundedIcon from "@material-ui/icons/HelpRounded";
+import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
+import PersonRoundedIcon from "@material-ui/icons/PersonRounded";
+import BlockRoundedIcon from "@material-ui/icons/BlockRounded";
+import AnnouncementRoundedIcon from "@material-ui/icons/AnnouncementRounded";
+import EmailRoundedIcon from "@material-ui/icons/EmailRounded";
+import TimelineRoundedIcon from "@material-ui/icons/TimelineRounded";
+import SettingsRoundedIcon from "@material-ui/icons/SettingsRounded";
+import ExitToAppRoundedIcon from "@material-ui/icons/ExitToAppRounded";
+import AllOutIcon from "@material-ui/icons/AllOut";
-//This file manipulate the icon that will be displayed in the left navigation menu
+//This file manipulate the icon that will be displayed in the left navigation menu
-const orange = '#ff7f00';
-const pink = '#e81f4f';
-const purple = '#673ab7';
-const blue = '#00bcd4'
+const orange = "#ff7f00";
+const pink = "#e81f4f";
+const purple = "#673ab7";
+const blue = "#00bcd4";
-const DisplayIcon = ( props ) => {
- if(props.label === 'Home'){
- return(
- <ListItemIcon>
- <HomeIcon
- style={{fill : orange}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Atividades'){
- return(
- <ListItemIcon>
- <PeopleRoundedIcon
- style={{fill : pink}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Coleções'){
- return(
- <ListItemIcon>
- <AllOutIcon
- style={{fill : purple}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Dúvidas da comunidade'){
- return(
- <ListItemIcon>
- <ContactSupportRoundedIcon
- style={{fill : blue}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Instituições'){
- return(
- <ListItemIcon>
- <AccountBalanceRoundedIcon
- style={{fill : orange}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Linguagens'){
- return(
- <ListItemIcon>
- <LanguageRoundedIcon
- style={{fill : pink}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Objetos educacionais'){
- return(
- <ListItemIcon>
- <MenuBookRoundedIcon
- style={{fill : purple}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Rating'){
- return(
- <ListItemIcon>
- <StarRoundedIcon
- style={{fill : blue}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Permissões do usuário'){
- return(
- <ListItemIcon>
- <AccountCircleRoundedIcon
- style={{fill : orange}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Variáveis de nota'){
- return(
- <ListItemIcon>
- <TrendingUpRoundedIcon
- style={{fill : pink}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Perguntas curadoria'){
- return(
- <ListItemIcon>
- <HelpRoundedIcon
- style={{fill : purple}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Aprovação de professores'){
- return(
- <ListItemIcon>
- <CheckRoundedIcon
- style={{fill : blue}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Usuários'){
- return(
- <ListItemIcon>
- <PersonRoundedIcon
- style={{fill : orange}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Usuários bloqueados'){
- return(
- <ListItemIcon>
- <BlockRoundedIcon
- style={{fill : pink}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Denúncias'){
- return(
- <ListItemIcon>
- <AnnouncementRoundedIcon
- style={{fill : purple}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Enviar email'){
- return(
- <ListItemIcon>
- <EmailRoundedIcon
- style={{fill : blue}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Métricas'){
- return(
- <ListItemIcon>
- <TimelineRoundedIcon
- style={{fill : orange}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Configurações'){
- return(
- <ListItemIcon>
- <SettingsRoundedIcon
- style={{fill : pink}}
- />
- </ListItemIcon>
- );
- } else if(props.label === 'Sair'){
- return(
- <ListItemIcon>
- <ExitToAppRoundedIcon
- style={{fill : purple}}
- />
- </ListItemIcon>
- );
- }
-}
-export default DisplayIcon;
\ No newline at end of file
+const icons = [
+ <HomeIcon style={{ fill: orange }} />,
+ <PeopleRoundedIcon style={{ fill: pink }} />,
+ <AllOutIcon style={{ fill: purple }} />,
+ <ContactSupportRoundedIcon style={{ fill: blue }} />,
+ <AccountBalanceRoundedIcon style={{ fill: orange }} />,
+ <LanguageRoundedIcon style={{ fill: pink }} />,
+ <MenuBookRoundedIcon style={{ fill: purple }} />,
+ <StarRoundedIcon style={{ fill: blue }} />,
+ <AccountCircleRoundedIcon style={{ fill: orange }} />,
+ <TrendingUpRoundedIcon style={{ fill: pink }} />,
+ <HelpRoundedIcon style={{ fill: purple }} />,
+ <CheckRoundedIcon style={{ fill: blue }} />,
+ <PersonRoundedIcon style={{ fill: orange }} />,
+ <BlockRoundedIcon style={{ fill: pink }} />,
+ <AnnouncementRoundedIcon style={{ fill: purple }} />,
+ <EmailRoundedIcon style={{ fill: blue }} />,
+ <TimelineRoundedIcon style={{ fill: orange }} />,
+ <SettingsRoundedIcon style={{ fill: pink }} />,
+ <ExitToAppRoundedIcon style={{ fill: purple }} />,
+];
+
+const DisplayIcon = (props) => {
+ return(
+ <ListItemIcon>
+ {icons[props.i]}
+ </ListItemIcon>
+ );
+};
+export default DisplayIcon;
--
GitLab