kitchen-simulator 5.0.0-test.18 → 5.0.0-test.19

package/src/components/configurator/custom-configurator.jsx

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  ContentTitle,
+  ContentContainer,
+  FormLabel,
+  FormBlock,
+  FormNumberInput,
+  FormSubmitButton,
+  CancelButton
+} from '../style/export';
+import SnackBar from '../atoms/Snackbar/index';
+
+export default class CustomConfigurator extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    let scene = props.state.scene;
+
+    this.state = {
+      dataWidth: scene.width,
+      dataHeight: scene.height,
+      isSnackBarOpen: false,
+      message: ''
+    };
+  }
+
+  onSubmit(event) {
+    event.preventDefault();
+
+    let { projectActions } = this.context;
+
+    let { dataWidth, dataHeight } = this.state;
+    dataWidth = parseInt(dataWidth);
+    dataHeight = parseInt(dataHeight);
+    if (dataWidth <= 100 || dataHeight <= 100) {
+      this.setState({
+        isSnackBarOpen: true,
+        snackBarMessage: 'Scene size too small'
+      });
+    } else {
+      projectActions.setProjectProperties({
+        width: dataWidth,
+        height: dataHeight
+      });
+    }
+  }
+
+  render() {
+    let { width, height } = this.props;
+    let { dataWidth, dataHeight } = this.state;
+    let { projectActions, translator } = this.context;
+
+    return (
+      <ContentContainer width={width} height={height}>
+        <SnackBar
+          isOpen={this.state.isSnackBarOpen}
+          message={this.state.snackBarMessage}
+          handleClose={() =>
+            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
+          }
+        />
+      </ContentContainer>
+    );
+  }
+}
+
+CustomConfigurator.propTypes = {
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  state: PropTypes.object.isRequired
+};
+
+CustomConfigurator.contextTypes = {
+  projectActions: PropTypes.object.isRequired,
+  translator: PropTypes.object.isRequired
+};

package/src/components/configurator/project-configurator.jsx

@@ -0,0 +1,120 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  ContentTitle,
+  ContentContainer,
+  FormLabel,
+  FormBlock,
+  FormNumberInput,
+  FormSubmitButton,
+  CancelButton
+} from '../style/export';
+import SnackBar from '../atoms/Snackbar/index';
+
+export default class ProjectConfigurator extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    let scene = props.state.scene;
+
+    this.state = {
+      dataWidth: scene.width,
+      dataHeight: scene.height,
+      isSnackBarOpen: false,
+      snackBarMessage: ''
+    };
+  }
+
+  onSubmit(event) {
+    event.preventDefault();
+
+    let { projectActions } = this.context;
+
+    let { dataWidth, dataHeight } = this.state;
+    dataWidth = parseInt(dataWidth);
+    dataHeight = parseInt(dataHeight);
+    if (dataWidth <= 100 || dataHeight <= 100) {
+      this.setState({
+        snackBarMessage: 'Scene size too small',
+        isSnackBarOpen: true
+      });
+    } else {
+      projectActions.setProjectProperties({
+        width: dataWidth,
+        height: dataHeight
+      });
+    }
+  }
+
+  render() {
+    let { width, height } = this.props;
+    let { dataWidth, dataHeight } = this.state;
+    let { projectActions, translator } = this.context;
+
+    return (
+      <ContentContainer width={width} height={height}>
+        <SnackBar
+          isOpen={this.state.isSnackBarOpen}
+          message={this.state.snackBarMessage}
+          handleClose={() =>
+            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
+          }
+        />
+        <ContentTitle>{translator.t('Project config')}</ContentTitle>
+
+        <form onSubmit={e => this.onSubmit(e)}>
+          <FormBlock>
+            <FormLabel htmlFor="width">{translator.t('width')}</FormLabel>
+            <FormNumberInput
+              id="width"
+              placeholder="width"
+              value={dataWidth}
+              onChange={e => this.setState({ dataWidth: e.target.value })}
+            />
+          </FormBlock>
+
+          <FormBlock>
+            <FormLabel htmlFor="height">{translator.t('height')}</FormLabel>
+            <FormNumberInput
+              id="height"
+              placeholder="height"
+              value={dataHeight}
+              onChange={e => this.setState({ dataHeight: e.target.value })}
+            />
+          </FormBlock>
+
+          <table style={{ float: 'right' }}>
+            <tbody>
+              <tr>
+                <td>
+                  <CancelButton
+                    size="large"
+                    onClick={e => projectActions.rollback()}
+                  >
+                    {translator.t('Cancel')}
+                  </CancelButton>
+                </td>
+                <td>
+                  <FormSubmitButton size="large">
+                    {translator.t('Save')}
+                  </FormSubmitButton>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </form>
+      </ContentContainer>
+    );
+  }
+}
+
+ProjectConfigurator.propTypes = {
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  state: PropTypes.object.isRequired
+};
+
+ProjectConfigurator.contextTypes = {
+  projectActions: PropTypes.object.isRequired,
+  translator: PropTypes.object.isRequired
+};

package/src/components/export.js

@@ -0,0 +1,36 @@
+import ToolbarComponents from './toolbar/export';
+import Content from './content';
+import SidebarComponents from './sidebar/export';
+import FooterBarComponents from './footerbar/export';
+import Viewer2DComponents from './viewer2d/export';
+import StyleComponents from './style/export';
+import HeaderComponents from './header/export';
+import WizardStepComponents from './wizardstep/export';
+import SignComponents from './sign/export';
+import MyProjectsComonents from './myprojects/export';
+
+export {
+  ToolbarComponents,
+  Content,
+  SidebarComponents,
+  FooterBarComponents,
+  Viewer2DComponents,
+  StyleComponents,
+  HeaderComponents,
+  WizardStepComponents,
+  SignComponents,
+  MyProjectsComonents
+};
+
+export default {
+  ToolbarComponents,
+  Content,
+  SidebarComponents,
+  FooterBarComponents,
+  WizardStepComponents,
+  Viewer2DComponents,
+  StyleComponents,
+  HeaderComponents,
+  SignComponents,
+  MyProjectsComonents
+};

package/src/components/firstsetting/button/styles.js

@@ -0,0 +1,223 @@
+import styled from 'styled-components';
+
+export const FirstSettingWrapper = styled.div`
+  position: absolute;
+  left: 30px;
+  top: 90px;
+  z-index: 10;
+  flex-flow: column;
+  background-color: rgb(255, 255, 255);
+  box-shadow: 0px 3px 5px -1px rgba(156, 154, 154, 0.2),
+    0px 6px 10px 0px rgba(156, 154, 154, 0.39),
+    0px 1px 18px 0px rgba(156, 154, 154, 0.12);
+  width: 60vw;
+  border-radius: 10px;
+  padding: 30px;
+  user-select: none;
+  max-height: calc(100vh - 110px);
+`;
+
+export const TitleBarWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+`;
+
+export const TitleBar = styled.div`
+  font-size: 28px;
+  font-weight: bold;
+`;
+
+export const TitleBarButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const TitleBarButton = styled.div`
+  display: flex;
+  cursor: pointor;
+  align-items: center;
+  color: #4c12a1;
+  font-size: 16px;
+  font-weight: bold;
+  width: 110px;
+  margin-left: 10px;
+  height: 40px;
+  border: 3px solid;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 5px;
+`;
+
+export const StepBarWrapper = styled.div`
+  align-items: flex-start;
+  flex-direction: row;
+  display: flex;
+  padding: 24px;
+  box-shadow: none;
+  color: rgba(0, 0, 0, 0.87);
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background-color: #fff;
+`;
+
+export const StepBullet = styled.div`
+  flex-direction: column;
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+
+export const StepBulletLabel = styled.span`
+  margin-bottom: 5px;
+  text-align: center;
+  color: rgb(114, 72, 189);
+  display: block;
+  font-size: 16px;
+  font-family: 'Roboto', 'Helvetica', 'Arial', Open Sans;
+  font-weight: bold;
+  line-height: 1.43;
+  letter-spacing: 0.01071em;
+`;
+
+export const StepBulletIcon = styled.img`
+  justify-content: center;
+  display: flex;
+  flex-shrink: 0;
+  width: 25px;
+`;
+
+export const StepBarIcon = styled.img`
+  top: 38px;
+  left: -42%;
+  width: 85%;
+  position: absolute;
+  flex: 1 1 auto;
+  display: block;
+`;
+
+export const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 30px;
+`;
+
+export const ContentWrapper1 = styled.div`
+  display: flex;
+  margin-top: 20px;
+`;
+
+export const ContentItem = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 50px;
+  cursor: pointer;
+  img#check {
+    display: none;
+  }
+  :hover {
+    img#check {
+      display: block;
+      background-color: rgb(217, 232, 255);
+      z-index: 1;
+    }
+  }
+`;
+
+export const RoomContentImage = styled.img`
+  height: 150px;
+  z-index: 2;
+`;
+
+export const ContentCheckImage = styled.img`
+  position: absolute;
+  height: 150px;
+  width: 150px;
+  padding: 60px;
+  z-index: 2;
+`;
+
+export const ColorContentItem = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+`;
+
+export const ColorContentImage = styled.div`
+  height: 80px;
+  background-repeat: no-repeat;
+  border-radius: 50%;
+  border: 1px solid black;
+  width: 80px;
+  background-position: center;
+  cursor: pointer;
+  :hover {
+    box-shadow: 0px 3px 5px -1px rgba(156, 154, 154, 0.2),
+      0px 6px 10px 0px rgba(156, 154, 154, 0.39),
+      0px 1px 18px 0px rgba(156, 154, 154, 0.12);
+  }
+`;
+
+export const DoorStyleContentItem = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+  cursor: pointer;
+  width: 150px;
+  img#check {
+    display: none;
+  }
+  :hover {
+    img#check {
+      display: block;
+      background-color: rgb(217, 232, 255);
+      z-index: 1;
+    }
+  }
+`;
+
+export const DoorStyleContentImage = styled.img`
+  height: 150px;
+  padding: 30px;
+  border-radius: 10px;
+  z-index: 2;
+`;
+
+export const DoorCategoryContentImageWrapper = styled.div`
+  width: 150px;
+  display: flex;
+  justify-content: center;
+  border-radius: 10px;
+  :hover {
+    background-color: rgb(217, 232, 255);
+  }
+`;
+
+export const DoorCategoryContentImage = styled.img`
+  height: 130px;
+  padding: 20px;
+  width: 150px;
+  margin: 10px 0px;
+  z-index: 2;
+`;
+
+export const ContentWrapper2 = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: 80px;
+`;
+
+export const DoorStyleWrapper = styled.div`
+  display: flex;
+  margin-top: 20px;
+  flex-wrap: wrap;
+  overflow-y: scroll;
+  max-height: calc(100vh - 435px);
+`;

package/src/components/firstsetting/export.js

@@ -0,0 +1,9 @@
+import FirstSettingToggleButton from './firstsetting-toggle-button';
+import FirstSettingContentButton from './firstsetting-content-button';
+import FirstSetting from './firstsetting';
+
+export default {
+  FirstSettingToggleButton,
+  FirstSettingContentButton,
+  FirstSetting
+};

package/src/components/firstsetting/firstsetting-content-button.jsx

@@ -0,0 +1,198 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from '../../shared-style';
+import { FaTimes as IconClose } from 'react-icons/fa';
+
+const labelContainerStyle = {
+  width: 'auto',
+  display: 'inline-block',
+  margin: 0,
+  padding: '0px 5px 0px 0px'
+};
+
+const toggleButtonStyle = {
+  color: '#CCC',
+  textAlign: 'center',
+  cursor: 'pointer',
+  userSelect: 'none'
+};
+
+const toggleButtonStyleOver = {
+  ...toggleButtonStyle,
+  color: SharedStyle.COLORS.white
+};
+
+const contentContainerStyleActive = {
+  position: 'fixed',
+  width: 'calc( 100% - 2px )',
+  height: '40%',
+  left: 0,
+  bottom: 20,
+  backgroundColor: SharedStyle.PRIMARY_COLOR.alt,
+  borderTop: SharedStyle.PRIMARY_COLOR.border,
+  zIndex: 0,
+  padding: 0,
+  margin: 0,
+  transition: 'all 300ms ease'
+};
+
+const contentContainerStyleInactive = {
+  ...contentContainerStyleActive,
+  visibility: 'hidden',
+  height: 0
+};
+
+const contentHeaderStyle = {
+  position: 'relative',
+  width: '100%',
+  height: '2em',
+  top: 0,
+  left: 0,
+  borderBottom: SharedStyle.PRIMARY_COLOR.border
+};
+
+const titleStyle = {
+  position: 'relative',
+  height: '2em',
+  lineHeight: '2em',
+  marginLeft: '1em'
+};
+
+const contentAreaStyle = {
+  position: 'relative',
+  width: '100%',
+  height: 'calc( 100% - 2em )',
+  padding: '1em',
+  overflowY: 'auto'
+};
+
+const iconCloseStyleOut = {
+  position: 'absolute',
+  width: '2em',
+  height: '2em',
+  right: 0,
+  top: 0,
+  padding: '0.5em',
+  borderLeft: SharedStyle.PRIMARY_COLOR.border,
+  cursor: 'pointer'
+};
+
+const iconCloseStyleOver = {
+  ...iconCloseStyleOut,
+  color: SharedStyle.COLORS.white,
+  backgroundColor: SharedStyle.SECONDARY_COLOR.alt
+};
+
+const iconStyle = {
+  width: '15px',
+  height: '15px',
+  marginTop: '-2px',
+  marginRight: '2px'
+};
+
+const textStyle = {
+  position: 'relative'
+};
+
+export default class FooterContentButton extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      over: false,
+      closeOver: false,
+      active: this.props.toggleState || false
+    };
+  }
+
+  toggleOver(e) {
+    this.setState({ over: true });
+  }
+  toggleOut(e) {
+    this.setState({ over: false });
+  }
+
+  toggle(e) {
+    let isActive = !this.state.active;
+    this.setState({ active: isActive });
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.state.over != nextState.over) return true;
+    if (this.state.closeOver != nextState.closeOver) return true;
+    if (this.state.active != nextState.active) return true;
+
+    if (this.props.content.length != nextProps.content.length) return true;
+    if (this.props.toggleState != nextProps.toggleState) return true;
+
+    return false;
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.toggleState != this.props.toggleState)
+      this.state.active = nextProps.toggleState;
+  }
+
+  render() {
+    let s = this.state;
+    let p = this.props;
+
+    let LabelIcon = p.icon || null;
+    let labelIconStyle = p.iconStyle || {};
+    let labelTextStyle = p.textStyle || {};
+    let inputTitleStyle = p.titleStyle || {};
+
+    return (
+      <div style={labelContainerStyle}>
+        <div
+          style={s.over || s.active ? toggleButtonStyleOver : toggleButtonStyle}
+          onClick={e => this.toggle(e)}
+          title={p.title}
+        >
+          <LabelIcon style={{ ...labelIconStyle, ...iconStyle }} />
+          <span style={{ ...textStyle, ...labelTextStyle }}>{p.text}</span>
+        </div>
+        <div
+          style={
+            s.active
+              ? contentContainerStyleActive
+              : contentContainerStyleInactive
+          }
+        >
+          <div style={contentHeaderStyle}>
+            <b style={{ ...titleStyle, ...inputTitleStyle }}>{p.title}</b>
+            <IconClose
+              style={s.closeOver ? iconCloseStyleOver : iconCloseStyleOut}
+              onMouseOver={e => this.setState({ closeOver: true })}
+              onMouseOut={e => this.setState({ closeOver: false })}
+              onClick={e => this.toggle(e)}
+            />
+          </div>
+          <div style={contentAreaStyle}>{p.content}</div>
+        </div>
+      </div>
+    );
+  }
+}
+
+FooterContentButton.propTypes = {
+  state: PropTypes.object.isRequired,
+  text: PropTypes.string.isRequired,
+  textStyle: PropTypes.object,
+  icon: PropTypes.func,
+  iconStyle: PropTypes.object,
+  content: PropTypes.array.isRequired,
+  toggleState: PropTypes.bool,
+  title: PropTypes.string,
+  titleStyle: PropTypes.object
+};
+
+FooterContentButton.contextTypes = {
+  projectActions: PropTypes.object.isRequired,
+  viewer2DActions: PropTypes.object.isRequired,
+  viewer3DActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired,
+  holesActions: PropTypes.object.isRequired,
+  itemsActions: PropTypes.object.isRequired,
+  translator: PropTypes.object.isRequired
+};