add tour

src/components/Blockly/msg/de.js

@@ -880,7 +880,7 @@ Blockly.Msg.messages_copylink_success = 'Link erfolgreich in Zwischenablage gesp
 Blockly.Msg.messages_rename_success_01 = 'Das Projekt wurde erfolgreich in '
 Blockly.Msg.messages_rename_success_02 = 'umbenannt.'
 Blockly.Msg.messages_newblockly_head = "Willkommen zur neuen Version Blockly für die senseBox"
-Blockly.Msg.messages_newblockly_text = "Die neue Blockly Version befindet sich zurzeit in der Testphase. Alle Neuigkeiten findet ihr hier:"
+Blockly.Msg.messages_newblockly_text = "Die neue Blockly Version befindet sich zurzeit in der Testphase. Alle Neuigkeiten findet ihr hier: "
 Blockly.Msg.messages_GET_TUTORIAL_FAIL = 'Zurück zur Tutorials-Übersicht'
 Blockly.Msg.messages_LOGIN_FAIL = 'Der Benutzername oder das Passwort ist nicht korrekt.'
 /**

src/components/Navbar.js

@@ -20,8 +20,9 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import LinearProgress from '@material-ui/core/LinearProgress';
-
-import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faCog, faChalkboardTeacher, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons";
+import Tour from 'reactour'
+import * as steps from './Tour';
+import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faQuestionCircle, faCog, faChalkboardTeacher, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from 'blockly'
 
@@ -34,6 +35,10 @@ const styles = (theme) => ({
   },
   appBarColor: {
     backgroundColor: theme.palette.primary.main
+  },
+  tourButton: {
+    marginleft: 'auto',
+    marginright: '30px',
   }
 });
 
@@ -43,7 +48,8 @@ class Navbar extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      open: false
+      open: false,
+      isTourOpen: false
     };
   }
 
@@ -51,6 +57,15 @@ class Navbar extends Component {
     this.setState({ open: !this.state.open });
   }
 
+  openTour = () => {
+    this.setState({ isTourOpen: true });
+
+  }
+
+  closeTour = () => {
+    this.setState({ isTourOpen: false });
+  }
+
   render() {
     return (
       <div>
@@ -81,6 +96,19 @@ class Navbar extends Component {
                   Tutorial
                 </Typography>
               </Link> : null}
+            <IconButton
+              color="inherit"
+              className={`openTour ${this.props.classes.button}`}
+              onClick={() => { this.openTour(); }}
+              style={{ margin: '0 30px 0 auto' }}
+            >
+              <FontAwesomeIcon icon={faQuestionCircle} size="s" />
+            </IconButton>
+            <Tour
+              steps={steps.steps}
+              isOpen={this.state.isTourOpen}
+              onRequestClose={() => { this.closeTour(); }}
+            />
           </Toolbar>
         </AppBar>
         <Drawer

src/components/Tour.js

@@ -0,0 +1,22 @@
+export const steps = [
+    {
+        selector: '.workspaceFunc',
+        content: 'Hier findest du alle Buttons um dein Programm zu übertragen, zu speichern oder zu teilen',
+    },
+    {
+        selector: ".blocklyWindow",
+        content: 'Dies ist deine Arbeitsfläche.',
+    },
+    {
+        selector: ".blocklyToolboxDiv",
+        content: 'In der Toolbox befinden sich alle Blöcke. Verbinde diese in der Arbeitsfläche und erstelle dein Programmcode',
+    },
+    {
+        selector: ".saveBlocks",
+        content: 'Speicher deine Blöcke auf dem Computer',
+    },
+    {
+        selector: ".MenuButton",
+        content: 'Im Menü findest du Tutorials und eine Gallery mit verschiedenen Beispiel Programmen.',
+    },
+];