-
- {!this.props.assessment ?
+
+ {!this.props.assessment & !this.props.multiple ?
: null}
+ {!this.props.assessment ? (
- : null}
+ ) : null}
- {this.props.assessment ?
+ {this.props.assessment ? (
- : !this.props.multiple ?
-
- : null}
+ ) : !this.props.multiple ? (
+
+ ) : null}
- {!this.props.multiple ?
-
- : null}
+ {!this.props.multiple ?
: null}
-
- {this.props.user && !this.props.multiple ?
+ {this.props.user && !this.props.multiple ? (
- : null}
+ ) : null}
- {!this.props.multiple ?
-
- : null}
+ {!this.props.multiple ? (
+
+ ) : null}
-
- {!this.props.assessment && !this.props.multiple ?
+ {!this.props.assessment && !this.props.multiple ? (
- : null}
+ ) : null}
- {!this.props.assessment && !this.props.multiple ?
-
- : null}
+ {!this.props.assessment && !this.props.multiple ? (
+
+ ) : null}
- {this.props.projectType !== 'gallery' && !this.props.assessment ?
+ {this.props.projectType !== "gallery" && !this.props.assessment ? (
- : null}
+ ) : null}
- {!this.props.multiple ?
-
- : null}
+ ) : null}
- {!this.props.assessment && (this.props.projectType === 'project' || this.props.projectType === 'gallery') && this.props.user && this.props.user.email === this.props.project.creator ?
+ {!this.props.assessment &&
+ (this.props.projectType === "project" ||
+ this.props.projectType === "gallery") &&
+ this.props.user &&
+ this.props.user.email === this.props.project.creator ? (
- : null}
-
+ ) : null}
);
- };
+ }
}
WorkspaceFunc.propTypes = {
- user: PropTypes.object
+ user: PropTypes.object,
+ autosave: PropTypes.bool.isRequired,
};
-const mapStateToProps = state => ({
- user: state.auth.user
+const mapStateToProps = (state) => ({
+ user: state.auth.user,
+ autosave: state.workspace.autosave,
});
export default connect(mapStateToProps, null)(WorkspaceFunc);
diff --git a/src/components/Workspace/WorkspaceName.js b/src/components/Workspace/WorkspaceName.js
index 0437f9a..d53c027 100644
--- a/src/components/Workspace/WorkspaceName.js
+++ b/src/components/Workspace/WorkspaceName.js
@@ -1,51 +1,50 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { workspaceName } from '../../actions/workspaceActions';
-import { setDescription, updateProject } from '../../actions/projectActions';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { workspaceName } from "../../actions/workspaceActions";
+import { setDescription, updateProject } from "../../actions/projectActions";
-import Snackbar from '../Snackbar';
-import Dialog from '../Dialog';
+import Snackbar from "../Snackbar";
+import Dialog from "../Dialog";
-import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
-import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import Tooltip from '@material-ui/core/Tooltip';
-import TextField from '@material-ui/core/TextField';
-import Typography from '@material-ui/core/Typography';
+import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
+import { withStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+import Tooltip from "@material-ui/core/Tooltip";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
import { faPen } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import * as Blockly from 'blockly/core'
+import * as Blockly from "blockly/core";
const styles = (theme) => ({
workspaceName: {
+ minHeight: "40px",
backgroundColor: theme.palette.secondary.main,
- borderRadius: '25px',
- display: 'inline-flex',
- cursor: 'pointer',
- '&:hover': {
+ borderRadius: "25px",
+ display: "inline-flex",
+ cursor: "pointer",
+ "&:hover": {
color: theme.palette.primary.main,
- }
- }
+ },
+ },
});
-
class WorkspaceName extends Component {
-
constructor(props) {
super(props);
this.inputRef = React.createRef();
this.state = {
- title: '',
- content: '',
+ title: "",
+ content: "",
open: false,
name: props.name,
description: props.description,
snackbar: false,
- type: '',
- key: '',
- message: ''
+ type: "",
+ key: "",
+ message: "",
};
}
@@ -59,47 +58,100 @@ class WorkspaceName extends Component {
}
toggleDialog = () => {
- this.setState({ open: !this.state, title: '', content: '' });
- }
+ this.setState({ open: !this.state, title: "", content: "" });
+ };
setFileName = (e) => {
this.setState({ name: e.target.value });
- }
+ };
setDescription = (e) => {
this.setState({ description: e.target.value });
- }
+ };
renameWorkspace = () => {
this.props.workspaceName(this.state.name);
this.toggleDialog();
- if (this.props.projectType === 'project' || this.props.projectType === 'gallery' || this.state.projectType === 'gallery') {
- if (this.props.projectType === 'gallery' || this.state.projectType === 'gallery') {
+ if (
+ this.props.projectType === "project" ||
+ this.props.projectType === "gallery" ||
+ this.state.projectType === "gallery"
+ ) {
+ if (
+ this.props.projectType === "gallery" ||
+ this.state.projectType === "gallery"
+ ) {
this.props.setDescription(this.state.description);
}
- if (this.state.projectType === 'gallery') {
+ if (this.state.projectType === "gallery") {
this.saveGallery();
} else {
- this.props.updateProject(this.props.projectType, this.props.project._id);
+ this.props.updateProject(
+ this.props.projectType,
+ this.props.project._id
+ );
}
} else {
- this.setState({ snackbar: true, type: 'success', key: Date.now(), message: `${Blockly.Msg.messages_rename_success_01} ${this.state.name} ${Blockly.Msg.messages_rename_success_02}` });
+ this.setState({
+ snackbar: true,
+ type: "success",
+ key: Date.now(),
+ message: `${Blockly.Msg.messages_rename_success_01} ${this.state.name} ${Blockly.Msg.messages_rename_success_02}`,
+ });
}
- }
+ };
render() {
return (
-
+
{ if (this.props.multiple) { this.props.workspaceName(this.props.project.title); if (this.props.projectType === 'gallery') { this.props.setDescription(this.props.project.description); } } this.setState({ open: true, title: this.props.projectType === 'gallery' ? 'Projektdaten ändern' : this.props.projectType === 'project' ? 'Projekt umbenennen' : 'Projekt benennen', content: this.props.projectType === 'gallery' ? 'Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf \'Eingabe\'.' : 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}
+ onClick={() => {
+ if (this.props.multiple) {
+ this.props.workspaceName(this.props.project.title);
+ if (this.props.projectType === "gallery") {
+ this.props.setDescription(this.props.project.description);
+ }
+ }
+ this.setState({
+ open: true,
+ title:
+ this.props.projectType === "gallery"
+ ? "Projektdaten ändern"
+ : this.props.projectType === "project"
+ ? "Projekt umbenennen"
+ : "Projekt benennen",
+ content:
+ this.props.projectType === "gallery"
+ ? "Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf 'Eingabe'."
+ : "Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Eingabe'.",
+ });
+ }}
>
- {this.props.name && !isWidthDown(this.props.projectType === 'project' || this.props.projectType === 'gallery' ? 'xl' : 'xs', this.props.width) ?
-
{this.props.name}
- : null}
-
-
+ {this.props.name &&
+ !isWidthDown(
+ this.props.projectType === "project" ||
+ this.props.projectType === "gallery"
+ ? "xl"
+ : "xs",
+ this.props.width
+ ) ? (
+
+ {this.props.name}
+
+ ) : null}
+
+
@@ -114,38 +166,88 @@ class WorkspaceName extends Component {
open={this.state.open}
title={this.state.title}
content={this.state.content}
- onClose={() => { this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description }); }}
- onClick={() => { this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description }); }}
- button={'Abbrechen'}
+ onClose={() => {
+ this.toggleDialog();
+ this.setState({
+ name: this.props.name,
+ description: this.props.description,
+ });
+ }}
+ onClick={() => {
+ this.toggleDialog();
+ this.setState({
+ name: this.props.name,
+ description: this.props.description,
+ });
+ }}
+ button={"Abbrechen"}
>
-
- {this.props.projectType === 'gallery' || this.state.projectType === 'gallery' ?
+
+ {this.props.projectType === "gallery" ||
+ this.state.projectType === "gallery" ? (
-
-
+
+
- :
}
-
+ ) : (
+
+ )}
+
);
- };
+ }
}
WorkspaceName.propTypes = {
workspaceName: PropTypes.func.isRequired,
setDescription: PropTypes.func.isRequired,
updateProject: PropTypes.func.isRequired,
- name: PropTypes.string.isRequired,
+ name: PropTypes.string,
description: PropTypes.string.isRequired,
message: PropTypes.object.isRequired,
};
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
name: state.workspace.name,
description: state.project.description,
message: state.message,
});
-export default connect(mapStateToProps, { workspaceName, setDescription, updateProject })(withStyles(styles, { withTheme: true })(withWidth()(WorkspaceName)));
+export default connect(mapStateToProps, {
+ workspaceName,
+ setDescription,
+ updateProject,
+})(withStyles(styles, { withTheme: true })(withWidth()(WorkspaceName)));
diff --git a/src/components/copy.svg b/src/components/copy.svg
index f09e27b..ca6a708 100644
--- a/src/components/copy.svg
+++ b/src/components/copy.svg
@@ -1,53 +1,48 @@
-
-
+