Skip to content
Snippets Groups Projects
Commit a941a96d authored by lfr20's avatar lfr20
Browse files

All docs about AppBar of the admin are inside in the AppBar.js

parent b56ca9c9
No related branches found
No related tags found
1 merge request!46Gamefication admin
import React from 'react';
import PropTypes from "prop-types";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import AppBar from "@material-ui/core/AppBar";
import { Tab, Tabs } from "@material-ui/core";
import { Link } from 'react-router-dom'
import { TabsItens } from '../../Pages/AdminLabelTabs/LabelTabs'
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`nav-tabpanel-${index}`}
aria-labelledby={`nav-tab-${index}`}
{...other}
>
{value === index && (
<Box p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};
function a11yProps(index) {
return {
id: `nav-tab-${index}`,
"aria-controls": `nav-tabpanel-${index}`,
};
}
export default function AppBarAdmin() {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<AppBar position="sticky" color="default">
<Tabs
variant="scrollable"
scrollButtons="on"
value={value}
onChange={handleChange}
aria-label="nav tabs example"
>
{
TabsItens.map((label, index) => (
<Tab
key={label.href}
label={label.label}
to={label.href}
icon={label.icon}
component={Link}
{...a11yProps(index)}
/>
))
}
</Tabs>
</AppBar>
)
}
\ No newline at end of file
/*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 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 SportsEsportsRoundedIcon from '@material-ui/icons/SportsEsportsRounded';
import { GiAchievement } from "react-icons/gi"
import { DiRequirejs } from "react-icons/di"
import { FaRegHandPointer } from 'react-icons/fa'
//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 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 }} />,
<SportsEsportsRoundedIcon style={{ fill: orange }} />,
<GiAchievement size={24} style={{ fill: pink }} />,
<DiRequirejs size={24} style={{ fill: purple }} />,
<FaRegHandPointer size={24} 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;
......@@ -18,70 +18,133 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
//This file has the labels of the left menu navigation from admin page
import React from "react";
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 AllOutIcon from "@material-ui/icons/AllOut";
import SportsEsportsRoundedIcon from '@material-ui/icons/SportsEsportsRounded';
import { GiAchievement } from "react-icons/gi"
import { DiRequirejs } from "react-icons/di"
import { FaRegHandPointer } from 'react-icons/fa'
const orange = "#ff7f00";
const pink = "#e81f4f";
const purple = "#673ab7";
const blue = "#00bcd4";
const TabsItens = [
{
label: "Home",
href: '/admin/home'
href: '/admin/home',
icon: <HomeIcon style={{ fill: orange }} />,
},
{
label: 'Coleções',
href: '/admin/Collections',
icon: <PeopleRoundedIcon style={{ fill: pink }} />
},
{
label: "Atividades",
href: '/admin/activities',
icon: <AllOutIcon style={{ fill: purple }} />,
},
{
label: "Dúvidas da comunidade",
href: '/admin/CommunityQuestions'
href: '/admin/CommunityQuestions',
icon: <ContactSupportRoundedIcon style={{ fill: blue }} />,
},
{
label: "Instituições",
href: '/admin/intitutions'
href: '/admin/intitutions',
icon: <AccountBalanceRoundedIcon style={{ fill: orange }} />,
},
{
label: "Linguagens",
href: '/admin/languages',
icon: <LanguageRoundedIcon style={{ fill: pink }} />,
},
{
label: "Objetos educacionais",
href: "/admin/learningObjects",
icon: <MenuBookRoundedIcon style={{ fill: purple }} />,
},
{
label: "Rating",
href : '/admin/Ratings'
href: '/admin/Ratings',
icon: <StarRoundedIcon style={{ fill: blue }} />,
},
{
label: "Permissões do usuário",
href: "/admin/permissions",
icon: <AccountCircleRoundedIcon style={{ fill: orange }} />,
},
{
label: "Variáveis de nota",
href:'/admin/noteVars'
href: '/admin/noteVars',
icon: <TrendingUpRoundedIcon style={{ fill: pink }} />,
},
{
label: "Perguntas curadoria",
href: "/admin/Questions"
href: "/admin/Questions",
icon: <HelpRoundedIcon style={{ fill: purple }} />,
},
{
label: "Aprovação de professores",
href: "/admin/users/teacher_requests"
href: "/admin/users/teacher_requests",
icon: <CheckRoundedIcon style={{ fill: blue }} />,
},
{
label: "Usuários",
href : "/admin/usersList"
href: "/admin/usersList",
icon: <PersonRoundedIcon style={{ fill: orange }} />,
},
{
label: "Usuários bloqueados",
href : "/admin/BlockedUsers"
href: "/admin/BlockedUsers",
icon: <BlockRoundedIcon style={{ fill: pink }} />,
},
{
label: "Denúncias",
href: "/admin/complaints",
icon: <AnnouncementRoundedIcon style={{ fill: purple }} />,
},
{
label: "Enviar email",
href:'/admin/sendEmail/none'
href: '/admin/sendEmail/none',
icon: <EmailRoundedIcon style={{ fill: blue }} />,
},
{
label: "Items",
href: '/admin/gamefication',
icon: <SportsEsportsRoundedIcon style={{ fill: orange }} />,
},
{
label: "Conquistas",
href: '/admin/achievements',
icon: <GiAchievement size={24} style={{ fill: pink }} />,
},
{
label: "Requisitos",
href: '/admin/requirements',
icon: <DiRequirejs size={24} style={{ fill: purple }} />,
},
{
label: "Ações",
href: '/admin/actions',
icon: <FaRegHandPointer size={24} style={{ fill: blue }} />,
},
];
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment