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

complete MUI migration

Browse Source
This commit is contained in:
fbruc03 2022-12-05 12:01:51 +01:00
parent 8716649be7
commit ae61d2b11b
30 changed files with 59 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.css
View File

@ -53,7 +53,7 @@ td {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4eaf47;
border-color: #4eaf47;
color: white;
}

6
src/App.js
View File

@ -9,11 +9,11 @@ import { loadUser } from "./actions/authActions";
import "./App.css";
import { ThemeProvider, StyledEngineProvider, createTheme, adaptV4Theme } from "@mui/material/styles";
import { ThemeProvider, StyledEngineProvider, createTheme } from "@mui/material/styles";
import Content from "./components/Content";
const theme = createTheme(adaptV4Theme({
const theme = createTheme({
palette: {
primary: {
main: "#4EAF47",
@ -26,7 +26,7 @@ const theme = createTheme(adaptV4Theme({
compile: "#e27136",
},
},
}));
});
class App extends Component {
componentDidMount() {

2
src/components/Breadcrumbs.js
View File

@ -30,7 +30,7 @@ class Breadcrumbs extends Component {
this.props.content && this.props.content.length > 0 ?
<MaterialUIBreadcrumbs separator="›" style={{marginBottom: '20px'}}>
<Link to={'/'} style={{textDecoration: 'none'}}>
<FontAwesomeIcon className={clsx(this.props.classes.home, this.props.classes.hover)} icon={faHome} size="xs"/>
<FontAwesomeIcon className={clsx(this.props.classes.home, this.props.classes.hover)} icon={faHome} size="xs"/>
</Link>
{this.props.content.splice(0, this.props.content.length-1).map((content, i) => (
<Link to={content.link} style={{textDecoration: 'none'}} key={i}>

4
src/components/CodeEditor/Compile.js
View File

@ -189,7 +189,7 @@ class Compile extends Component {
className={`compileBlocks ${this.props.classes.iconButton}`}
onClick={() => this.compile()}
size="large">
<FontAwesomeIcon icon={faClipboardCheck} size="xs" />
<FontAwesomeIcon icon={faClipboardCheck} size="xs" />
</IconButton>
</Tooltip>
) : (
@ -201,6 +201,7 @@ class Compile extends Component {
>
<FontAwesomeIcon
icon={faClipboardCheck}
style={{ marginRight: "5px" }}
/>{" "}
Kompilieren
@ -301,6 +302,7 @@ class Compile extends Component {
>
<FontAwesomeIcon
icon={faClipboardCheck}
style={{ marginRight: "5px" }}
/>{" "}
Starte Übertragung

2
src/components/CodeEditor/SaveIcon.js
View File

@ -17,6 +17,7 @@ const SaveIcon = ({ loading }) => (
<FontAwesomeIcon
style={{ position: "absolute" }}
icon={faCircleNotch}
spin={true}
size="2x"
color="grey"
@ -30,6 +31,7 @@ const SaveIcon = ({ loading }) => (
transform: "translate(-50%,-50%)",
}}
icon={faSave}
color={loading ? "grey" : "green"}
size={loading ? "1x" : "lg"}
/>

2
src/components/Home.js
View File

@ -161,7 +161,7 @@ class Home extends Component {
}}
onClick={() => this.onChange()}
size="large">
<FontAwesomeIcon icon={faCode} size="xs" />
<FontAwesomeIcon icon={faCode} size="xs" />
</IconButton>
</Tooltip>

16
src/components/Navbar.js
View File

@ -214,11 +214,11 @@ class Navbar extends Component {
</div>
<List>
{[
{
text: Blockly.Msg.navbar_blockly,
icon: faPuzzlePiece,
link: "/",
},
{
text: Blockly.Msg.navbar_blockly,
icon: faPuzzlePiece,
link: "/",
},
{
text: Blockly.Msg.navbar_tutorials,
icon: faChalkboardTeacher,
@ -329,9 +329,9 @@ class Navbar extends Component {
onClick={
item.function
? () => {
item.function();
this.toggleDrawer();
}
item.function();
this.toggleDrawer();
}
: this.toggleDrawer
}
>

2
src/components/Snackbar.js
View File

@ -70,7 +70,7 @@ class Snackbar extends Component {
className={this.props.type === 'error' ? this.props.classes.error : this.props.classes.success}
action={
<IconButton onClick={this.onClose} style={{color: 'inherit'}} size="large">
<FontAwesomeIcon icon={faTimes} size="xs"/>
<FontAwesomeIcon icon={faTimes} size="xs" />
</IconButton>
}
message={this.props.message}

2
src/components/Tutorial/Assessment.js
View File

@ -116,7 +116,7 @@ class Assessment extends Component {
}}
onClick={() => this.onChange()}
size="large">
<FontAwesomeIcon icon={faCode} size="xs" />
<FontAwesomeIcon icon={faCode} size="xs" />
</IconButton>
</Tooltip>
<BlocklyWindow

1
src/components/Tutorial/Builder/BlocklyExample.js
View File

@ -139,7 +139,6 @@ class BlocklyExample extends Component {
<Switch
checked={this.state.checked}
onChange={(e) => this.onChange(e.target.checked)}
color="primary"
/>
}
/>

6
src/components/Tutorial/Builder/Builder.js
View File

@ -407,7 +407,7 @@ class Builder extends Component {
<FormControlLabel
style={{ color: "black" }}
value="new"
control={<Radio color="primary" />}
control={<Radio />}
label={Blockly.Msg.builder_createNew}
labelPlacement="end"
/>
@ -417,7 +417,7 @@ class Builder extends Component {
style={{ color: "black" }}
disabled={this.props.index === 0}
value="change"
control={<Radio color="primary" />}
control={<Radio />}
label={Blockly.Msg.builder_changeExisting}
labelPlacement="end"
/>
@ -425,7 +425,7 @@ class Builder extends Component {
style={{ color: "black" }}
disabled={this.props.index === 0}
value="delete"
control={<Radio color="primary" />}
control={<Radio />}
label={Blockly.Msg.builder_deleteExisting}
labelPlacement="end"
/>

5
src/components/Tutorial/Builder/Media.js
View File

@ -97,7 +97,6 @@ class Media extends Component {
<Switch
checked={this.state.checked}
onChange={(e) => this.onChangeSwitch(e.target.checked)}
color="primary"
/>
}
/>
@ -106,13 +105,13 @@ class Media extends Component {
<RadioGroup row value={this.state.radioValue} onChange={(e) => {this.onChangeRadio(e.target.value);}}>
<FormControlLabel style={{color: 'black'}}
value="picture"
control={<Radio color="primary" />}
control={<Radio />}
label="Bild"
labelPlacement="end"
/>
<FormControlLabel style={{color: 'black'}}
value="youtube"
control={<Radio color="primary" />}
control={<Radio />}
label="Youtube-Video"
labelPlacement="end"
/>

1
src/components/Tutorial/Builder/Public.js
View File

@ -63,7 +63,6 @@ class Public extends Component {
<Checkbox
checked={this.props.value}
onChange={this.handleChange}
color="primary"
name="checkedA"
inputProps={{ "aria-label": "secondary checkbox" }}
/>

1
src/components/Tutorial/Builder/Requirements.js
View File

@ -41,7 +41,6 @@ class Requirements extends Component {
checked={this.props.value.filter(id => id === tutorial._id).length > 0}
onChange={(e) => this.onChange(e)}
name="requirements"
color="primary"
/>
}
label={tutorial.title}

1
src/components/Tutorial/Builder/Review.js
View File

@ -64,7 +64,6 @@ class Review extends Component {
<Checkbox
checked={this.props.value}
onChange={this.handleChange}
color="primary"
name="checkedA"
inputProps={{ "aria-label": "secondary checkbox" }}
/>

8
src/components/Tutorial/Builder/Step.js
View File

@ -86,7 +86,7 @@ class Step extends Component {
style={index === 0 ? {} : { marginBottom: "5px" }}
onClick={() => this.props.addStep(index + 1)}
size="large">
<FontAwesomeIcon icon={faPlus} size="xs" />
<FontAwesomeIcon icon={faPlus} size="xs" />
</IconButton>
</Tooltip>
{index !== 0 ? (
@ -101,7 +101,7 @@ class Step extends Component {
style={{ marginBottom: "5px" }}
onClick={() => this.props.changeStepIndex(index, index - 1)}
size="large">
<FontAwesomeIcon icon={faAngleDoubleUp} size="xs" />
<FontAwesomeIcon icon={faAngleDoubleUp} size="xs" />
</IconButton>
</Tooltip>
<Tooltip
@ -114,7 +114,7 @@ class Step extends Component {
style={{ marginBottom: "5px" }}
onClick={() => this.props.changeStepIndex(index, index + 1)}
size="large">
<FontAwesomeIcon icon={faAngleDoubleDown} size="xs" />
<FontAwesomeIcon icon={faAngleDoubleDown} size="xs" />
</IconButton>
</Tooltip>
<Tooltip title={`Schritt ${index + 1} löschen`} arrow>
@ -126,7 +126,7 @@ class Step extends Component {
)}
onClick={() => this.props.removeStep(index)}
size="large">
<FontAwesomeIcon icon={faTrash} size="xs" />
<FontAwesomeIcon icon={faTrash} size="xs" />
</IconButton>
</Tooltip>
</div>

4
src/components/Tutorial/Builder/StepType.js
View File

@ -23,14 +23,14 @@ class StepType extends Component {
<RadioGroup row value={this.props.value === 'task' ? 'task' : 'instruction'} onChange={(e) => this.onChange(e.target.value)}>
<FormControlLabel style={{color: 'black'}}
value="instruction"
control={<Radio color="primary" />}
control={<Radio />}
label="Anleitung"
labelPlacement="end"
/>
<FormControlLabel style={{color: 'black'}}
disabled={this.props.index === 0}
value="task"
control={<Radio color="primary" />}
control={<Radio />}
label="Aufgabe"
labelPlacement="end"
/>

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

@ -98,7 +98,7 @@ class Hardware extends Component {
aria-label="Vollbild"
onClick={() => this.handleClickOpen(hardwareInfo)}
size="large">
<FontAwesomeIcon icon={faExpandAlt} size="xs" />
<FontAwesomeIcon icon={faExpandAlt} size="xs" />
</IconButton>
}
/>

1
src/components/Tutorial/HintTutorialExists.js
View File

@ -78,7 +78,6 @@ class HintTutorialExists extends Component {
checked={this.state.checked}
onChange={(e) => this.onChange(e)}
name="dialog"
color="primary"
/>
}
label={Blockly.Msg.labels_donotshowagain}

1
src/components/Tutorial/Requirement.js
View File

@ -166,6 +166,7 @@ class Requirement extends Component {
icon={
tutorialStatus === "Success" ? faCheck : faTimes
}
/>
) : (
<Typography

2
src/components/Tutorial/SolutionCheck.js
View File

@ -63,7 +63,7 @@ class SolutionCheck extends Component {
style={{ width: "40px", height: "40px", marginRight: "5px" }}
onClick={() => this.check()}
size="large">
<FontAwesomeIcon icon={faClipboardCheck} size="xs" />
<FontAwesomeIcon icon={faClipboardCheck} size="xs" />
</IconButton>
</Tooltip>

1
src/components/Tutorial/StepperHorizontal.js
View File

@ -127,6 +127,7 @@ class StepperHorizontal extends Component {
<FontAwesomeIcon
className={this.props.classes.icon}
icon={tutorialStatus === "Success" ? faCheck : faTimes}
/>
</div>
) : null}

5
src/components/Tutorial/TutorialHome.js
View File

@ -287,6 +287,7 @@ class TutorialHome extends Component {
icon={
tutorialStatus === "Success" ? faCheck : faTimes
}
/>
) : (
<Typography
@ -380,7 +381,7 @@ class TutorialHome extends Component {
});
}}
size="large">
<FontAwesomeIcon icon={faShareAlt} size="xs" />
<FontAwesomeIcon icon={faShareAlt} size="xs" />
</IconButton>
</Tooltip>
<Tooltip
@ -391,7 +392,7 @@ class TutorialHome extends Component {
className={`publicTutorial ${this.props.classes.button}`}
disabled={!tutorial.public}
size="large">
<FontAwesomeIcon icon={faEye} size="xs" />
<FontAwesomeIcon icon={faEye} size="xs" />
</IconButton>
</Tooltip>
{tutorial.review ? (

12
src/components/User/Account.js
View File

@ -42,7 +42,7 @@ export class Account extends Component {
<ListItem>
<Tooltip title='Nutzername'>
<ListItemIcon>
<FontAwesomeIcon icon={faUser} />
<FontAwesomeIcon icon={faUser} />
</ListItemIcon>
</Tooltip>
<ListItemText primary={`Name: ${user.name}`} />
@ -50,14 +50,14 @@ export class Account extends Component {
<ListItem>
<Tooltip title='Email'>
<ListItemIcon>
<FontAwesomeIcon icon={faAt} />
<FontAwesomeIcon icon={faAt} />
</ListItemIcon>
</Tooltip>
<ListItemText primary={`Email: ${user.email}`} />
</ListItem>
<ListItem>
<ListItemIcon>
<FontAwesomeIcon icon={faUserTag} />
<FontAwesomeIcon icon={faUserTag} />
</ListItemIcon>
<ListItemText primary={`Userrolle: ${user.blocklyRole}`} />
</ListItem>
@ -98,7 +98,7 @@ export class Account extends Component {
<ListItem>
<Tooltip title='Modell'>
<ListItemIcon>
<FontAwesomeIcon icon={faBox} />
<FontAwesomeIcon icon={faBox} />
</ListItemIcon>
</Tooltip>
<div>
@ -109,7 +109,7 @@ export class Account extends Component {
<ListItem>
<Tooltip title='Standort'>
<ListItemIcon>
<FontAwesomeIcon icon={faMapMarkerAlt} />
<FontAwesomeIcon icon={faMapMarkerAlt} />
</ListItemIcon>
</Tooltip>
<div>
@ -120,7 +120,7 @@ export class Account extends Component {
<ListItem>
<Tooltip title='Sensoren'>
<ListItemIcon>
<FontAwesomeIcon icon={faCloudSunRain} />
<FontAwesomeIcon icon={faCloudSunRain} />
</ListItemIcon>
</Tooltip>
<div>

1
src/components/User/Login.js
View File

@ -165,6 +165,7 @@ export class Login extends Component {
<FontAwesomeIcon
size="xs"
icon={this.state.showPassword ? faEyeSlash : faEye}
/>
</IconButton>
</InputAdornment>

4
src/components/Workspace/Compile.js
View File

@ -189,7 +189,7 @@ class Compile extends Component {
className={`compileBlocks ${this.props.classes.iconButton}`}
onClick={() => this.compile()}
size="large">
<FontAwesomeIcon icon={faClipboardCheck} size="xs" />
<FontAwesomeIcon icon={faClipboardCheck} size="xs" />
</IconButton>
</Tooltip>
) : (
@ -202,6 +202,7 @@ class Compile extends Component {
<FontAwesomeIcon
icon={faClipboardCheck}
style={{ marginRight: "5px" }}
/>{" "}
Kompilieren
</Button>
@ -302,6 +303,7 @@ class Compile extends Component {
<FontAwesomeIcon
icon={faClipboardCheck}
style={{ marginRight: "5px" }}
/>{" "}
Starte Übertragung
</Button>

2
src/components/Workspace/DeleteProject.js
View File

@ -62,7 +62,7 @@ class DeleteProject extends Component {
className={this.props.classes.buttonTrash}
onClick={() => this.props.deleteProject(this.props.projectType, this.props.project._id)}
size="large">
<FontAwesomeIcon icon={faTrashAlt} size="xs" />
<FontAwesomeIcon icon={faTrashAlt} size="xs" />
</IconButton>
</Tooltip>

2
src/components/Workspace/DownloadProject.js
View File

@ -47,7 +47,7 @@ class DownloadProject extends Component {
className={`saveBlocks ${this.props.classes.button}`}
onClick={() => this.downloadXmlFile()}
size="large">
<FontAwesomeIcon icon={faFileDownload} size="xs" />
<FontAwesomeIcon icon={faFileDownload} size="xs" />
</IconButton>
</Tooltip>
</div>

14
src/components/Workspace/ResetWorkspace.js
View File

@ -49,11 +49,11 @@ class ResetWorkspace extends Component {
}
toggleDialog = () => {
this.setState({ open: !this.state});
this.setState({ open: !this.state });
}
openDialog = () => {
this.setState({open: true});
this.setState({ open: true });
}
resetWorkspace = () => {
@ -82,7 +82,7 @@ class ResetWorkspace extends Component {
className={this.props.classes.button}
onClick={() => this.openDialog()}
size="large">
<FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' />
<FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' />
</IconButton>
</Tooltip>
@ -92,7 +92,7 @@ class ResetWorkspace extends Component {
type={this.state.type}
key={this.state.key}
/>
<Dialog
<Dialog
open={this.state.open}
title={Blockly.Msg.resetDialog_headline}
content={Blockly.Msg.resetDialog_text}
@ -100,9 +100,9 @@ class ResetWorkspace extends Component {
onClick={() => { this.toggleDialog(); }}
button={Blockly.Msg.button_cancel}
> <div style={{ marginTop: '10px' }}>
<Button variant='contained' color='primary' onClick={() => { this.resetWorkspace(); this.toggleDialog(); }}>Zurücksetzen</Button>
</div></Dialog>
<Button variant='contained' color='primary' onClick={() => { this.resetWorkspace(); this.toggleDialog(); }}>Zurücksetzen</Button>
</div></Dialog>
</div>
);
};

1
src/components/Workspace/WorkspaceName.js
View File

@ -152,6 +152,7 @@ class WorkspaceName extends Component {
<div style={{ width: "40px", display: "flex" }}>
<FontAwesomeIcon
icon={faPen}
style={{ height: "18px", width: "18px", margin: "auto" }}
/>
</div>