schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style navbar items

Browse Source
This commit is contained in:
fbruc03 2023-01-12 22:30:41 +01:00
parent d05eede14f
commit 2c1594227e
1 changed files with 144 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
src/components/Navbar.js
View File

@ -38,8 +38,10 @@ import {
faCode, faCode,
faPuzzlePiece, faPuzzlePiece,
faUser, faUser,
faFlag,
faMicrochip, faMicrochip,
faEarthEurope,
faEarthAmericas,
faCaretDown
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
@ -48,7 +50,6 @@ import MenuItem from '@mui/material/MenuItem'
import Menu from '@mui/material/Menu' import Menu from '@mui/material/Menu'
import { setLanguage } from "../actions/generalActions"; import { setLanguage } from "../actions/generalActions";
import { setBoard } from "../actions/boardAction"; import { setBoard } from "../actions/boardAction";
import { Redirect } from "react-router-dom";
const styles = (theme) => ({ const styles = (theme) => ({
drawerWidth: { drawerWidth: {
@ -138,92 +139,150 @@ class Navbar extends Component {
<img src={senseboxLogo} alt="senseBox-Logo" width="30" /> <img src={senseboxLogo} alt="senseBox-Logo" width="30" />
</Link> </Link>
<div style={{ margin: "0 0 0 auto", display: "flex", alignItems: 'center', justifyContent: 'center' }} sx={{ display: 'none' }}> <div style={{ margin: "0 0 0 auto", display: "flex", alignItems: 'center', justifyContent: 'center' }} sx={{ display: 'none' }}>
{<IconButton <div>
color="inherit" {
onClick={(event) => { this.setState({ anchorElLang: event.target }) }} this.props.selectedBoard === "mcu" ?
style={{ margin: "0 30px 0 auto" }} (
size="large" <button
sx={{ display: { xs: 'none', md: 'block' } }} style={{ display: "flex", cursor: "pointer", alignItems: "center", alignContent: "center", paddingInline: "11px 7px", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
> onClick={(event) => { this.setState({ anchorElBoard: event.target }) }}
<FontAwesomeIcon icon={faFlag} /> sx={{ display: { xs: 'none', md: 'block' } }}
</IconButton>} >
<Menu <FontAwesomeIcon
anchorEl={this.state.anchorElLang} icon={faMicrochip}
anchorOrigin={{ style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }}
vertical: 'bottom', />
horizontal: 'center', <span>MCU</span>
}} <FontAwesomeIcon
keepMounted icon={faCaretDown}
transformOrigin={{ style={{ blockSize: "24px", inlineSize: "24px" }}
vertical: 'top', />
horizontal: 'center', </button>
}} ) : (
open={Boolean(this.state.anchorElLang)} <button
onClose={() => { style={{ display: "flex", cursor: "pointer", alignItems: "center", alignContent: "center", paddingInline: "11px 7px", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
this.setState({ anchorElLang: null }); onClick={(event) => { this.setState({ anchorElBoard: event.target }) }}
}} >
> <FontAwesomeIcon
<MenuItem icon={faMicrochip}
value="de_DE" style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }}
onClick={(event) => { />
this.props.setLanguage(event.currentTarget.getAttribute("value")); <span>mini</span>
this.setState({ anchorElLang: null }); <FontAwesomeIcon
icon={faCaretDown}
style={{ blockSize: "24px", inlineSize: "24px" }} />
</button>
)
}
<Menu
anchorEl={this.state.anchorElBoard}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}} }}
> keepMounted
DE transformOrigin={{
</MenuItem> vertical: 'top',
<MenuItem horizontal: 'center',
value="en_US"
onClick={(event) => {
this.props.setLanguage(event.currentTarget.getAttribute("value"));
this.setState({ anchorElLang: null });
}} }}
> open={Boolean(this.state.anchorElBoard)}
EN onClose={() => {
</MenuItem>
</Menu>
{<IconButton
color="inherit"
onClick={(event) => { this.setState({ anchorElBoard: event.target }) }}
style={{ margin: "0 30px 0 auto" }}
size="large"
sx={{ display: { xs: 'none', md: 'block' } }}
>
<FontAwesomeIcon icon={faMicrochip} />
</IconButton>}
<Menu
anchorEl={this.state.anchorElBoard}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
open={Boolean(this.state.anchorElBoard)}
onClose={() => { this.setState({ anchorElBoard: null }); }}
>
<MenuItem
value="mcu"
onClick={(event) => {
this.props.setBoard(event.currentTarget.getAttribute("value"));
this.setState({ anchorElBoard: null }); this.setState({ anchorElBoard: null });
}} }}
> >
MCU <MenuItem
</MenuItem> value="mcu"
<MenuItem onClick={(event) => {
value="mini" this.props.setBoard(event.currentTarget.getAttribute("value"));
onClick={(event) => { this.setState({ anchorElBoard: null });
this.props.setBoard(event.currentTarget.getAttribute("value")); }}
this.setState({ anchorElBoard: null }); >
MCU
</MenuItem>
<MenuItem
value="mini"
onClick={(event) => {
this.props.setBoard(event.currentTarget.getAttribute("value"));
this.setState({ anchorElBoard: null });
}}
>
mini
</MenuItem>
</Menu>
</div>
<div>
{
this.props.language === "en_US" ?
(
<button
style={{ display: "flex", cursor: "pointer", alignItems: "center", alignContent: "center", paddingInline: "11px 7px", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
onClick={(event) => { this.setState({ anchorElLang: event.target }) }}
sx={{ display: { xs: 'none', md: 'block' } }}
>
<FontAwesomeIcon
icon={faEarthAmericas}
style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }}
/>
<span>English</span>
<FontAwesomeIcon
icon={faCaretDown}
style={{ blockSize: "24px", inlineSize: "24px" }}
/>
</button>
) : (
<button
style={{ display: "flex", cursor: "pointer", alignItems: "center", alignContent: "center", paddingInline: "11px 7px", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
onClick={(event) => { this.setState({ anchorElLang: event.target }) }}
>
<FontAwesomeIcon
icon={faEarthEurope}
style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }}
/>
<span>Deutsch</span>
<FontAwesomeIcon
icon={faCaretDown}
style={{ blockSize: "24px", inlineSize: "24px" }} />
</button>
)
}
<Menu
anchorEl={this.state.anchorElLang}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
open={Boolean(this.state.anchorElLang)}
onClose={() => {
this.setState({ anchorElLang: null });
}} }}
> >
MINI <MenuItem
</MenuItem> value="de_DE"
</Menu> onClick={(event) => {
this.props.setLanguage(event.currentTarget.getAttribute("value"));
this.setState({ anchorElLang: null });
}}
>
Deutsch
</MenuItem>
<MenuItem
value="en_US"
onClick={(event) => {
this.props.setLanguage(event.currentTarget.getAttribute("value"));
this.setState({ anchorElLang: null });
}}
>
English
</MenuItem>
</Menu>
</div>
{isHome ? ( {isHome ? (
<Tooltip title={'Start Tour'} arrow> <Tooltip title={'Start Tour'} arrow>
<IconButton <IconButton
@ -232,7 +291,6 @@ class Navbar extends Component {
onClick={() => { onClick={() => {
this.openTour(); this.openTour();
}} }}
style={{ margin: "0 30px 0 auto" }}
size="large"> size="large">
<FontAwesomeIcon icon={faQuestionCircle} /> <FontAwesomeIcon icon={faQuestionCircle} />
</IconButton> </IconButton>
@ -246,7 +304,6 @@ class Navbar extends Component {
onClick={() => { onClick={() => {
this.openTour(); this.openTour();
}} }}
style={{ margin: "0 30px 0 auto" }}
size="large"> size="large">
<FontAwesomeIcon icon={faQuestionCircle} /> <FontAwesomeIcon icon={faQuestionCircle} />
</IconButton> </IconButton>
@ -294,9 +351,9 @@ class Navbar extends Component {
</div> </div>
<hr style={{ borderTop: "3px solid #bbb", marginLeft: "5px", marginRight: "5px" }} /> <hr style={{ borderTop: "3px solid #bbb", marginLeft: "5px", marginRight: "5px" }} />
<MenuItem> <MenuItem>
<Link to={"/settings"} style={{ textDecoration: 'none', color: "black" }}> <Link to={"/settings"} style={{ textDecoration: 'none', color: "black" }}>
{Blockly.Msg.navbar_settings} {Blockly.Msg.navbar_settings}
</Link> </Link>
</MenuItem> </MenuItem>
<MenuItem <MenuItem
onClick={() => { onClick={() => {
@ -312,7 +369,7 @@ class Navbar extends Component {
(<Link to={"/user/login"} style={{ textDecoration: 'none', color: "white" }}> (<Link to={"/user/login"} style={{ textDecoration: 'none', color: "white" }}>
<IconButton <IconButton
color="inherit" color="inherit"
style={{ margin: "0 30px 0 auto" }} style={{ margin: "0 0 0 auto" }}
> >
<FontAwesomeIcon icon={faUser} /> <FontAwesomeIcon icon={faUser} />
</IconButton> </IconButton>