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

replace fade with alpha

Browse Source
This commit is contained in:
Mario Pesch 2022-03-01 10:25:56 +01:00
parent 0414d2043d
commit ab1a46ab0e
9 changed files with 133 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -1,6 +1,6 @@
import React, { Component } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { Router } from "react-router-dom";
import { createBrowserHistory } from "history";
import { Provider } from "react-redux";

31
src/components/Alert.js
View File

@ -1,34 +1,29 @@
import React, { Component } from 'react';
import React, { Component } from "react";
import { withStyles } from '@material-ui/core/styles';
import { fade } from '@material-ui/core/styles/colorManipulator';
import { withStyles } from "@material-ui/core/styles";
import { alpha } from "@material-ui/core/styles";
import Typography from '@material-ui/core/Typography';
import Typography from "@material-ui/core/Typography";
const styles = (theme) => ({
alert: {
marginBottom: '20px',
marginBottom: "20px",
border: `1px solid ${theme.palette.primary.main}`,
padding: '10px 20px',
borderRadius: '4px',
background: fade(theme.palette.primary.main, 0.3),
color: 'rgb(70,70,70)'
}
padding: "10px 20px",
borderRadius: "4px",
background: alpha(theme.palette.primary.main, 0.3),
color: "rgb(70,70,70)",
},
});
export class Alert extends Component {
render(){
return(
render() {
return (
<div className={this.props.classes.alert}>
<Typography>
{this.props.children}
</Typography>
<Typography>{this.props.children}</Typography>
</div>
);
}
}
export default withStyles(styles, { withTheme: true })(Alert);

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

@ -482,11 +482,11 @@ class Builder extends Component {
{tutorial.title}{" "}
{tutorial.review && tutorial.public === false ? (
<div>
<FontAwesomeIcon mx={2} icon={faUserCheck} />
<FontAwesomeIcon mx={2} icon={faEyeSlash} />
<FontAwesomeIcon icon={faUserCheck} />
<FontAwesomeIcon icon={faEyeSlash} />
</div>
) : tutorial.public === false ? (
<FontAwesomeIcon mx={2} icon={faEyeSlash} />
<FontAwesomeIcon icon={faEyeSlash} />
) : null}
</MenuItem>
/* ) : tutorial.public === false ? (

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

@ -4,8 +4,7 @@ import { connect } from "react-redux";
import clsx from "clsx";
import { withRouter, Link } from "react-router-dom";
import { fade } from "@material-ui/core/styles/colorManipulator";
import { alpha } from "@material-ui/core/styles";
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import List from "@material-ui/core/List";
@ -20,18 +19,18 @@ const styles = (theme) => ({
width: "50px",
height: "50px",
position: "absolute",
color: fade(theme.palette.secondary.main, 0.6),
color: alpha(theme.palette.secondary.main, 0.6),
},
outerDivError: {
stroke: fade(theme.palette.error.dark, 0.6),
color: fade(theme.palette.error.dark, 0.6),
stroke: alpha(theme.palette.error.dark, 0.6),
color: alpha(theme.palette.error.dark, 0.6),
},
outerDivSuccess: {
stroke: fade(theme.palette.primary.main, 0.6),
color: fade(theme.palette.primary.main, 0.6),
stroke: alpha(theme.palette.primary.main, 0.6),
color: alpha(theme.palette.primary.main, 0.6),
},
outerDivOther: {
stroke: fade(theme.palette.secondary.main, 0.6),
stroke: alpha(theme.palette.secondary.main, 0.6),
},
innerDiv: {
width: "inherit",
@ -50,7 +49,7 @@ const styles = (theme) => ({
},
hoverLink: {
"&:hover": {
background: fade(theme.palette.secondary.main, 0.5),
background: alpha(theme.palette.secondary.main, 0.5),
borderRadius: "0 25px 25px 0 ",
},
},

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

@ -7,8 +7,8 @@ import { withRouter } from "react-router-dom";
import clsx from "clsx";
// import tutorials from '../../data/tutorials';
import { alpha } from "@material-ui/core/styles";
import { fade } from "@material-ui/core/styles/colorManipulator";
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Tooltip from "@material-ui/core/Tooltip";
@ -28,13 +28,13 @@ const styles = (theme) => ({
justifyContent: "space-between",
},
stepperSuccess: {
backgroundColor: fade(theme.palette.primary.main, 0.6),
backgroundColor: alpha(theme.palette.primary.main, 0.6),
},
stepperError: {
backgroundColor: fade(theme.palette.error.dark, 0.6),
backgroundColor: alpha(theme.palette.error.dark, 0.6),
},
stepperOther: {
backgroundColor: fade(theme.palette.secondary.main, 0.6),
backgroundColor: alpha(theme.palette.secondary.main, 0.6),
},
color: {
backgroundColor: "transparent ",

153
src/components/Tutorial/StepperVertical.js
View File

@ -1,36 +1,35 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { tutorialStep } from '../../actions/tutorialActions';
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { tutorialStep } from "../../actions/tutorialActions";
import { withRouter } from 'react-router-dom';
import { withRouter } from "react-router-dom";
import clsx from 'clsx';
import { fade } from '@material-ui/core/styles/colorManipulator';
import { withStyles } from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import Tooltip from '@material-ui/core/Tooltip';
import clsx from "clsx";
import { alpha } from "@material-ui/core/styles";
import { withStyles } from "@material-ui/core/styles";
import Stepper from "@material-ui/core/Stepper";
import Step from "@material-ui/core/Step";
import StepLabel from "@material-ui/core/StepLabel";
import Tooltip from "@material-ui/core/Tooltip";
const styles = (theme) => ({
verticalStepper: {
padding: 0,
width: '30px',
width: "30px",
},
stepIcon: {
borderStyle: `solid`,
// borderWidth: '2px',
borderRadius: '50%',
borderRadius: "50%",
borderColor: theme.palette.secondary.main,
width: '12px',
height: '12px',
margin: '0 auto',
width: "12px",
height: "12px",
margin: "0 auto",
},
stepIconLarge: {
width: '24px',
height: '24px'
width: "24px",
height: "24px",
},
stepIconLargeSuccess: {
borderColor: theme.palette.primary.main,
@ -39,28 +38,27 @@ const styles = (theme) => ({
borderColor: theme.palette.error.dark,
},
stepIconActiveOther: {
backgroundColor: theme.palette.secondary.main
backgroundColor: theme.palette.secondary.main,
},
stepIconActiveSuccess: {
backgroundColor: fade(theme.palette.primary.main, 0.6)
backgroundColor: alpha(theme.palette.primary.main, 0.6),
},
stepIconActiveError: {
backgroundColor: fade(theme.palette.error.dark, 0.6)
backgroundColor: alpha(theme.palette.error.dark, 0.6),
},
connector: {
height: '10px',
height: "10px",
borderLeft: `2px solid black`,
margin: 'auto'
}
margin: "auto",
},
});
class StepperVertical extends Component {
componentDidMount(){
componentDidMount() {
this.props.tutorialStep(0);
}
componentDidUpdate(props){
componentDidUpdate(props) {
if (props.tutorial._id !== this.props.match.params.tutorialId) {
this.props.tutorialStep(0);
}
@ -69,60 +67,103 @@ class StepperVertical extends Component {
render() {
var steps = this.props.steps;
var activeStep = this.props.activeStep;
var tutorialStatus = this.props.status.filter(status => status._id === this.props.tutorial._id)[0];
var tutorialStatus = this.props.status.filter(
(status) => status._id === this.props.tutorial._id
)[0];
return (
<div style={{marginRight: '10px'}}>
<div style={{ marginRight: "10px" }}>
<Stepper
activeStep={activeStep}
orientation="vertical"
connector={<div className={this.props.classes.connector}></div>}
classes={{root: this.props.classes.verticalStepper}}
classes={{ root: this.props.classes.verticalStepper }}
>
{steps.map((step, i) => {
var tasksIndex = tutorialStatus.tasks.findIndex(task => task._id === step._id);
var taskType = tasksIndex > -1 ? tutorialStatus.tasks[tasksIndex].type : null;
var taskStatus = taskType === 'success' ? 'Success' : taskType === 'error' ? 'Error' : 'Other';
var tasksIndex = tutorialStatus.tasks.findIndex(
(task) => task._id === step._id
);
var taskType =
tasksIndex > -1 ? tutorialStatus.tasks[tasksIndex].type : null;
var taskStatus =
taskType === "success"
? "Success"
: taskType === "error"
? "Error"
: "Other";
return (
<Step key={i}>
<Tooltip title={step.headline} placement='right' arrow >
<div style={i === activeStep ? {padding: '5px 0'} : {padding: '5px 0', cursor: 'pointer'}} onClick={i === activeStep ? null : () => { this.props.tutorialStep(i)}}>
<StepLabel
StepIconComponent={'div'}
classes={{
root: step.type === 'task' ?
i === activeStep ?
clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge, this.props.classes['stepIconLarge'+taskStatus], this.props.classes['stepIconActive'+taskStatus])
: clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge, this.props.classes['stepIconLarge'+taskStatus])
: i === activeStep ?
clsx(this.props.classes.stepIcon, this.props.classes.stepIconActiveOther)
: clsx(this.props.classes.stepIcon)
}}
<Tooltip title={step.headline} placement="right" arrow>
<div
style={
i === activeStep
? { padding: "5px 0" }
: { padding: "5px 0", cursor: "pointer" }
}
onClick={
i === activeStep
? null
: () => {
this.props.tutorialStep(i);
}
}
>
</StepLabel>
<StepLabel
StepIconComponent={"div"}
classes={{
root:
step.type === "task"
? i === activeStep
? clsx(
this.props.classes.stepIcon,
this.props.classes.stepIconLarge,
this.props.classes[
"stepIconLarge" + taskStatus
],
this.props.classes[
"stepIconActive" + taskStatus
]
)
: clsx(
this.props.classes.stepIcon,
this.props.classes.stepIconLarge,
this.props.classes[
"stepIconLarge" + taskStatus
]
)
: i === activeStep
? clsx(
this.props.classes.stepIcon,
this.props.classes.stepIconActiveOther
)
: clsx(this.props.classes.stepIcon),
}}
></StepLabel>
</div>
</Tooltip>
</Step>
)})}
);
})}
</Stepper>
</div>
);
};
}
}
StepperVertical.propTypes = {
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
activeStep: PropTypes.number.isRequired,
tutorialStep: PropTypes.func.isRequired,
tutorial: PropTypes.object.isRequired
tutorial: PropTypes.object.isRequired,
};
const mapStateToProps = state => ({
const mapStateToProps = (state) => ({
change: state.tutorial.change,
status: state.tutorial.status,
activeStep: state.tutorial.activeStep,
tutorial: state.tutorial.tutorials[0]
tutorial: state.tutorial.tutorials[0],
});
export default connect(mapStateToProps, { tutorialStep })(withRouter(withStyles(styles, {withTheme: true})(StepperVertical)));
export default connect(mapStateToProps, { tutorialStep })(
withRouter(withStyles(styles, { withTheme: true })(StepperVertical))
);

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

@ -17,8 +17,7 @@ import clsx from "clsx";
import Breadcrumbs from "../Breadcrumbs";
import { Link } from "react-router-dom";
import { fade } from "@material-ui/core/styles/colorManipulator";
import { alpha } from "@material-ui/core/styles";
import { withStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
@ -46,18 +45,18 @@ const styles = (theme) => ({
bottom: "-30px",
width: "160px",
height: "160px",
color: fade(theme.palette.secondary.main, 0.6),
color: alpha(theme.palette.secondary.main, 0.6),
},
outerDivError: {
stroke: fade(theme.palette.error.dark, 0.6),
color: fade(theme.palette.error.dark, 0.6),
stroke: alpha(theme.palette.error.dark, 0.6),
color: alpha(theme.palette.error.dark, 0.6),
},
outerDivSuccess: {
stroke: fade(theme.palette.primary.main, 0.6),
color: fade(theme.palette.primary.main, 0.6),
stroke: alpha(theme.palette.primary.main, 0.6),
color: alpha(theme.palette.primary.main, 0.6),
},
outerDivOther: {
stroke: fade(theme.palette.secondary.main, 0.6),
stroke: alpha(theme.palette.secondary.main, 0.6),
},
innerDiv: {
width: "inherit",

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

@ -69,7 +69,7 @@ class CopyCode extends Component {
className={`copyCode ${this.props.classes.iconButton}`}
onClick={() => this.copyCode()}
>
<FontAwesomeIcon icon={faCopy} size="m" />
<FontAwesomeIcon icon={faCopy} size="xs" />
</IconButton>
</Tooltip>
) : (

2
src/reducers/generalReducer.js
View File

@ -25,7 +25,7 @@ const initialSounds = () => {
if (window.localStorage.getItem("sounds")) {
return window.localStorage.getItem("sounds");
} else {
return "off";
return false;
}
};