diff --git a/src/App.css b/src/App.css index 8457170..e9d7fc2 100644 --- a/src/App.css +++ b/src/App.css @@ -62,3 +62,13 @@ td { flex-direction: column; align-items: center; } + +:root { + --url: url('./data/mcu_opacity.png'); +} + +.blocklySvg { + background-image: var(--url); + background-position: center; + background-repeat: no-repeat; +} \ No newline at end of file diff --git a/src/components/DeviceSelection.js b/src/components/DeviceSelection.js index 858e270..4f0768f 100644 --- a/src/components/DeviceSelection.js +++ b/src/components/DeviceSelection.js @@ -4,11 +4,11 @@ import { connect } from "react-redux"; import Dialog from "./Dialog"; import { withStyles } from "@material-ui/core/styles"; -import Checkbox from "@material-ui/core/Checkbox"; -import FormControlLabel from "@material-ui/core/FormControlLabel"; import * as Blockly from "blockly"; import { IconButton, Grid, Avatar, Typography } from "@material-ui/core"; import { setBoard } from "../actions/boardAction"; +import mini_opacity from "../data/mini_opacity.png" +import mcu_opacity from "../data/mcu_opacity.png" const styles = (theme) => ({ link: { @@ -27,15 +27,9 @@ const styles = (theme) => ({ class DeviceSeclection extends Component { constructor(props) { - var previousPageWasAnotherDomain = props.pageVisits === 0; - var userWantToKeepBoard = window.localStorage.getItem("board") - ? true - : false; super(props); this.state = { - open: userWantToKeepBoard - ? !userWantToKeepBoard - : previousPageWasAnotherDomain, + open: true, selectedBoard : "", saveSettings: false, @@ -43,10 +37,7 @@ class DeviceSeclection extends Component { } toggleDialog = () => { - this.setState({ open: !this.state }); - if(this.state.saveSettings){ - window.localStorage.setItem("board", this.state.selectedBoard) - } + this.props.setBoard(this.state.selectedBoard) }; @@ -61,7 +52,14 @@ class DeviceSeclection extends Component { onclick = (e, value) => { console.log(e, value) + const root = document.querySelector(':root'); + root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity })`); this.setState({selectedBoard: value}) + this.props.setBoard(value) + this.setState({ open: !this.state }); + + + }; render() { @@ -74,7 +72,6 @@ class DeviceSeclection extends Component { title={Blockly.Msg.deviceselection_head} content={""} onClick={this.toggleDialog} - button={Blockly.Msg.button_accept} disabled={this.state.selectedBoard===""} >