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 React, { Component } from "react";
import { BrowserRouter as Router } from "react-router-dom"; import { Router } from "react-router-dom";
import { createBrowserHistory } from "history"; import { createBrowserHistory } from "history";
import { Provider } from "react-redux"; 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 { withStyles } from "@material-ui/core/styles";
import { fade } from '@material-ui/core/styles/colorManipulator'; import { alpha } from "@material-ui/core/styles";
import Typography from '@material-ui/core/Typography'; import Typography from "@material-ui/core/Typography";
const styles = (theme) => ({ const styles = (theme) => ({
alert: { alert: {
marginBottom: '20px', marginBottom: "20px",
border: `1px solid ${theme.palette.primary.main}`, border: `1px solid ${theme.palette.primary.main}`,
padding: '10px 20px', padding: "10px 20px",
borderRadius: '4px', borderRadius: "4px",
background: fade(theme.palette.primary.main, 0.3), background: alpha(theme.palette.primary.main, 0.3),
color: 'rgb(70,70,70)' color: "rgb(70,70,70)",
} },
}); });
export class Alert extends Component { export class Alert extends Component {
render() {
render(){ return (
return(
<div className={this.props.classes.alert}> <div className={this.props.classes.alert}>
<Typography> <Typography>{this.props.children}</Typography>
{this.props.children}
</Typography>
</div> </div>
); );
} }
} }
export default withStyles(styles, { withTheme: true })(Alert); 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.title}{" "}
{tutorial.review && tutorial.public === false ? ( {tutorial.review && tutorial.public === false ? (
<div> <div>
<FontAwesomeIcon mx={2} icon={faUserCheck} /> <FontAwesomeIcon icon={faUserCheck} />
<FontAwesomeIcon mx={2} icon={faEyeSlash} /> <FontAwesomeIcon icon={faEyeSlash} />
</div> </div>
) : tutorial.public === false ? ( ) : tutorial.public === false ? (
<FontAwesomeIcon mx={2} icon={faEyeSlash} /> <FontAwesomeIcon icon={faEyeSlash} />
) : null} ) : null}
</MenuItem> </MenuItem>
/* ) : tutorial.public === false ? ( /* ) : 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 clsx from "clsx";
import { withRouter, Link } from "react-router-dom"; import { withRouter, Link } from "react-router-dom";
import { alpha } from "@material-ui/core/styles";
import { fade } from "@material-ui/core/styles/colorManipulator";
import { withStyles } from "@material-ui/core/styles"; import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import List from "@material-ui/core/List"; import List from "@material-ui/core/List";
@ -20,18 +19,18 @@ const styles = (theme) => ({
width: "50px", width: "50px",
height: "50px", height: "50px",
position: "absolute", position: "absolute",
color: fade(theme.palette.secondary.main, 0.6), color: alpha(theme.palette.secondary.main, 0.6),
}, },
outerDivError: { outerDivError: {
stroke: fade(theme.palette.error.dark, 0.6), stroke: alpha(theme.palette.error.dark, 0.6),
color: fade(theme.palette.error.dark, 0.6), color: alpha(theme.palette.error.dark, 0.6),
}, },
outerDivSuccess: { outerDivSuccess: {
stroke: fade(theme.palette.primary.main, 0.6), stroke: alpha(theme.palette.primary.main, 0.6),
color: fade(theme.palette.primary.main, 0.6), color: alpha(theme.palette.primary.main, 0.6),
}, },
outerDivOther: { outerDivOther: {
stroke: fade(theme.palette.secondary.main, 0.6), stroke: alpha(theme.palette.secondary.main, 0.6),
}, },
innerDiv: { innerDiv: {
width: "inherit", width: "inherit",
@ -50,7 +49,7 @@ const styles = (theme) => ({
}, },
hoverLink: { hoverLink: {
"&:hover": { "&:hover": {
background: fade(theme.palette.secondary.main, 0.5), background: alpha(theme.palette.secondary.main, 0.5),
borderRadius: "0 25px 25px 0 ", 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 clsx from "clsx";
// import tutorials from '../../data/tutorials'; // 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 { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@material-ui/core/Tooltip";
@ -28,13 +28,13 @@ const styles = (theme) => ({
justifyContent: "space-between", justifyContent: "space-between",
}, },
stepperSuccess: { stepperSuccess: {
backgroundColor: fade(theme.palette.primary.main, 0.6), backgroundColor: alpha(theme.palette.primary.main, 0.6),
}, },
stepperError: { stepperError: {
backgroundColor: fade(theme.palette.error.dark, 0.6), backgroundColor: alpha(theme.palette.error.dark, 0.6),
}, },
stepperOther: { stepperOther: {
backgroundColor: fade(theme.palette.secondary.main, 0.6), backgroundColor: alpha(theme.palette.secondary.main, 0.6),
}, },
color: { color: {
backgroundColor: "transparent ", backgroundColor: "transparent ",

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

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

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

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

2
src/reducers/generalReducer.js
View File

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