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

fix imageList

Browse Source
This commit is contained in:
Mario Pesch 2022-02-21 12:26:04 +01:00
parent 8fd9eb01ed
commit 115e4acc6c
2 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Tutorial/Builder/Hardware.js
View File

@ -12,19 +12,19 @@ import hardware from "../../../data/hardware.json";
import { withStyles } from "@material-ui/core/styles"; import { withStyles } from "@material-ui/core/styles";
import withWidth, { isWidthDown } from "@material-ui/core/withWidth"; import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
import ImageList from "@material-ui/core/ImageList"; import ImageList from "@material-ui/core/ImageList";
import ImageListTile from "@material-ui/core/ImageListItem"; import ImageListItem from "@material-ui/core/ImageListItem";
import ImageListTileBar from "@material-ui/core/ImageListItemBar"; import ImageListItemBar from "@material-ui/core/ImageListItemBar";
import FormHelperText from "@material-ui/core/FormHelperText"; import FormHelperText from "@material-ui/core/FormHelperText";
import FormLabel from "@material-ui/core/FormLabel"; import FormLabel from "@material-ui/core/FormLabel";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
const styles = (theme) => ({ const styles = (theme) => ({
multiImageListTile: { multiImageListItem: {
background: theme.palette.primary.main, background: theme.palette.primary.main,
opacity: 0.9, opacity: 0.9,
height: "30px", height: "30px",
}, },
multiImageListTileTitle: { multiImageListItemTitle: {
color: theme.palette.text.primary, color: theme.palette.text.primary,
}, },
border: { border: {
@ -104,7 +104,7 @@ class Requirements extends Component {
) : null} ) : null}
<ImageList rowHeight={100} cols={cols} gap={10}> <ImageList rowHeight={100} cols={cols} gap={10}>
{hardware.map((picture, i) => ( {hardware.map((picture, i) => (
<ImageListTile <ImageListItem
key={i} key={i}
onClick={() => this.onChange(picture.id)} onClick={() => this.onChange(picture.id)}
classes={{ classes={{
@ -122,18 +122,18 @@ class Requirements extends Component {
height={100} height={100}
/> />
</div> </div>
<ImageListTileBar <ImageListItemBar
classes={{ root: this.props.classes.multiImageListTile }} classes={{ root: this.props.classes.multiImageListItem }}
title={ title={
<div <div
style={{ overflow: "hidden", textOverflow: "ellipsis" }} style={{ overflow: "hidden", textOverflow: "ellipsis" }}
className={this.props.classes.multiImageListTileTitle} className={this.props.classes.multiImageListItemTitle}
> >
{picture.name} {picture.name}
</div> </div>
} }
/> />
</ImageListTile> </ImageListItem>
))} ))}
</ImageList> </ImageList>
</div> </div>

20
src/components/Tutorial/Hardware.js
View File

@ -10,8 +10,8 @@ import Link from "@material-ui/core/Link";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@material-ui/core/IconButton";
import ImageList from "@material-ui/core/ImageList"; import ImageList from "@material-ui/core/ImageList";
import ImageListTile from "@material-ui/core/ImageList"; import ImageListItem from "@material-ui/core/ImageListItem";
import ImageListTileBar from "@material-ui/core/ImageListItemBar"; import ImageListItemBar from "@material-ui/core/ImageListItemBar";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExpandAlt } from "@fortawesome/free-solid-svg-icons"; import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
@ -26,12 +26,12 @@ const styles = (theme) => ({
}, },
color: theme.palette.text.primary, color: theme.palette.text.primary,
}, },
multiImageListTile: { multiImageListItem: {
background: theme.palette.primary.main, background: theme.palette.primary.main,
opacity: 0.9, opacity: 0.9,
height: "30px", height: "30px",
}, },
multiImageListTileTitle: { multiImageListItemTitle: {
color: theme.palette.text.primary, color: theme.palette.text.primary,
}, },
}); });
@ -62,13 +62,13 @@ class Hardware extends Component {
<div style={{ marginTop: "10px", marginBottom: "5px" }}> <div style={{ marginTop: "10px", marginBottom: "5px" }}>
<Typography>{Blockly.Msg.tutorials_hardware_head}</Typography> <Typography>{Blockly.Msg.tutorials_hardware_head}</Typography>
<ImageList rowHeight={100} cols={cols} spacing={10}> <ImageList rowHeight={100} cols={cols} gap={10}>
{this.props.picture.map((picture, i) => { {this.props.picture.map((picture, i) => {
var hardwareInfo = hardware.filter( var hardwareInfo = hardware.filter(
(hardware) => hardware.id === picture (hardware) => hardware.id === picture
)[0]; )[0];
return ( return (
<ImageListTile key={i}> <ImageListItem key={i}>
<div style={{ margin: "auto", width: "max-content" }}> <div style={{ margin: "auto", width: "max-content" }}>
<img <img
src={`/media/hardware/${hardwareInfo.src}`} src={`/media/hardware/${hardwareInfo.src}`}
@ -78,12 +78,12 @@ class Hardware extends Component {
onClick={() => this.handleClickOpen(hardwareInfo)} onClick={() => this.handleClickOpen(hardwareInfo)}
/> />
</div> </div>
<ImageListTileBar <ImageListItemBar
classes={{ root: this.props.classes.multiImageListTile }} classes={{ root: this.props.classes.multiImageListItem }}
title={ title={
<div <div
style={{ overflow: "hidden", textOverflow: "ellipsis" }} style={{ overflow: "hidden", textOverflow: "ellipsis" }}
className={this.props.classes.multiImageListTileTitle} className={this.props.classes.multiImageListItemTitle}
> >
{hardwareInfo.name} {hardwareInfo.name}
</div> </div>
@ -98,7 +98,7 @@ class Hardware extends Component {
</IconButton> </IconButton>
} }
/> />
</ImageListTile> </ImageListItem>
); );
})} })}
</ImageList> </ImageList>