kitchen-simulator 5.0.0-test.4 → 5.0.0-test.5

package/src/components/footerbar/button/ControlButton.jsx

@@ -1,43 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as S from './styles';
-import { Tooltip } from '@material-ui/core/index';
-
-export default class ControlButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = { hover: false };
-  }
-
-  render() {
-    let { state, props } = this;
-    let overlayStyle = {};
-    if (state.hover) overlayStyle = { ...overlayStyle, display: 'block' };
-
-    return (
-      <Tooltip title={props.tooltip ? props.tooltip : ''} placement="top">
-        <S.Control
-          onMouseOver={event => this.setState({ hover: true })}
-          onMouseOut={event => this.setState({ hover: false })}
-          onClick={props.onClick}
-        >
-          {[
-            props.title !== undefined ? (
-              <S.ControlTitle key={props.title}>{props.title}</S.ControlTitle>
-            ) : null,
-            props.icon !== undefined ? (
-              <S.ControlIcon key={props.icon}>{props.icon}</S.ControlIcon>
-            ) : null
-          ]}
-        </S.Control>
-      </Tooltip>
-    );
-  }
-}
-
-ControlButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/footerbar/button/DirectionButton.jsx

@@ -1,54 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../../shared-style';
-import * as S from './styles';
-import { Tooltip } from '@material-ui/core/index';
-
-export default class DirectionButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  render() {
-    let { props } = this;
-    let overlayStyle = {};
-    // overlayStyle = props.active ? {...overlayStyle,'background': SharedStyle.TOOLBAR_COLOR.active}:{...overlayStyle};
-    let title, placement;
-    switch (props.tooltip) {
-      case 'Right':
-        title = 'Right';
-        placement = 'right';
-        break;
-      case 'Left':
-        title = 'Left';
-        placement = 'left';
-        break;
-      case 'Top':
-        title = 'Up';
-        placement = 'top';
-        break;
-      default: // Bottom
-        title = 'Down';
-        placement = 'bottom';
-        break;
-    }
-    return (
-      <Tooltip title={title} placement={placement}>
-        <S.DirectionIcon
-          style={props.style}
-          onMouseDown={props.onClick}
-          key={props.icon}
-        >
-          {props.icon}
-        </S.DirectionIcon>
-      </Tooltip>
-    );
-  }
-}
-
-DirectionButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/footerbar/button/DirectionPanSpinButton.jsx

@@ -1,36 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../../shared-style';
-import * as S from './styles';
-import { Tooltip } from '@material-ui/core/index';
-
-export default class DirectionPanSpinButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  render() {
-    let { props } = this;
-    let overlayStyle = {};
-    // overlayStyle = props.active ? {...overlayStyle,'background': SharedStyle.TOOLBAR_COLOR.active}:{...overlayStyle};
-    return (
-      <Tooltip title={props.tooltip ? props.tooltip : ''} placement="top">
-        <S.DirectionSpinIcon
-          style={props.style}
-          onMouseDown={props.onMouseDown}
-          onMouseUp={props.onMouseUp}
-          key={props.icon}
-        >
-          {props.icon}
-        </S.DirectionSpinIcon>
-      </Tooltip>
-    );
-  }
-}
-
-DirectionPanSpinButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/footerbar/button/ToggleButton.jsx

@@ -1,58 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ARRAY_3D_MODES } from '../../../constants';
-import * as S from './styles';
-import { Tooltip } from '@material-ui/core/index';
-
-export default class ToggleButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  render() {
-    let { props } = this;
-    let overlayStyle = {};
-    // let activeStyle = {}
-    let activeStyle = ARRAY_3D_MODES.includes(props.settingMode)
-      ? { position: 'absolute', left: 32, top: -2 }
-      : { position: 'absolute', left: 2, top: 14 };
-    return (
-      <Tooltip
-        title={
-          ARRAY_3D_MODES.includes(props.settingMode)
-            ? 'To 2D view'
-            : 'To 3D view'
-        }
-        placement="top"
-      >
-        <S.Toggle
-          id="toggle_2d_3d"
-          style={{ ...overlayStyle, color: 'black' }}
-          onClick={props.onClick}
-        >
-          {props.backgroundImage}
-          <span style={{ position: 'absolute', left: 10 }}>
-            <strong>2D</strong>
-          </span>
-          <span style={{ position: 'absolute', left: 38 }}>
-            <strong>3D</strong>
-          </span>
-          {[
-            props.icon !== undefined ? (
-              <S.ToggleIcon style={{ ...activeStyle }} key={props.icon}>
-                {props.icon}
-              </S.ToggleIcon>
-            ) : null
-          ]}
-        </S.Toggle>
-      </Tooltip>
-    );
-  }
-}
-
-ToggleButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/footerbar/button/ToggleConvertButton.jsx

@@ -1,48 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { MODE_IDLE_3D } from '../../../constants';
-import * as S from './styles';
-
-export default class ToggleConvertButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  render() {
-    let { props } = this;
-    let overlayStyle = {};
-    // let activeStyle = {}
-    let activeStyle =
-      props.settingMode === 'in'
-        ? { position: 'absolute', left: 285, top: 14 }
-        : { position: 'absolute', left: 317, top: 14 };
-    return (
-      <S.Toggle
-        style={{ ...overlayStyle, color: 'black' }}
-        onClick={props.onClick}
-      >
-        {props.backgroundImage}
-        <span style={{ position: 'absolute', top: 19, left: 295 }}>
-          <strong>in</strong>
-        </span>
-        <span style={{ position: 'absolute', top: 19, left: 322 }}>
-          <strong>cm</strong>
-        </span>
-        {[
-          props.icon !== undefined ? (
-            <S.ToggleConvertIcon style={{ ...activeStyle }} key={props.icon}>
-              {props.icon}
-            </S.ToggleConvertIcon>
-          ) : null
-        ]}
-      </S.Toggle>
-    );
-  }
-}
-
-ToggleConvertButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/footerbar/button/ToggleMeasureButton.jsx

@@ -1,33 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as S from './styles';
-
-export default class ToggleMeasureButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  render() {
-    let { props } = this;
-    let activeStyle = props.showMeasure === 0 ? { right: 0 } : { left: 0 };
-    return (
-      <S.Toggle onClick={props.onClick} style={{ ...props.style }}>
-        {props.backgroundImage}
-        {[
-          props.icon !== undefined ? (
-            <S.ToggleIcon style={{ ...activeStyle }} key={props.icon}>
-              {props.icon}
-            </S.ToggleIcon>
-          ) : null
-        ]}
-      </S.Toggle>
-    );
-  }
-}
-
-ToggleMeasureButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

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

@@ -1,217 +0,0 @@
-import {
-  DEFAULT_FONT_FAMILY,
-  SECONDARY_PURPLE_COLOR,
-  TEXT_COLOR_NEUTRAL_5
-} from '../../../constants';
-import styled from 'styled-components';
-
-export const Toggle_2D_3D = styled.div`
-  width: 50px;
-  margin-left: 10px;
-  border-radius: 5px;
-  height: 50px;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  user-select: none;
-  :hover {
-    background-color: ${TEXT_COLOR_NEUTRAL_5};
-  }
-`;
-
-export const FooterTitle = styled.span`
-  color: ${SECONDARY_PURPLE_COLOR};
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 18px;
-  text-align: left;
-  user-select: none;
-`;
-
-export const Direction_Up_Down = styled.div`
-  width: 50px;
-  margin-left: 5px;
-  border-radius: 5px;
-  height: 25px;
-  align-items: center;
-  display: flex;
-  :hover {
-    background-color: ${TEXT_COLOR_NEUTRAL_5};
-  }
-`;
-
-export const Direction_Left_Right = styled.div`
-  width: 50px;
-  margin-left: 5px;
-  border-radius: 5px;
-  height: 50px;
-  align-items: center;
-  display: flex;
-  :hover {
-    background-color: ${TEXT_COLOR_NEUTRAL_5};
-  }
-`;
-
-export const ArrowIcon = styled.img`
-  height: 10px;
-  width: 12px;
-  margin: auto;
-  user-select: none;
-`;
-
-export const ZoomButton = styled.div`
-  width: 50px;
-  margin-left: 10px;
-  border-radius: 5px;
-  height: 50px;
-  align-items: center;
-  display: flex;
-  :hover {
-    background-color: ${TEXT_COLOR_NEUTRAL_5};
-  }
-`;
-
-export const ZoomIcon = styled.img`
-  height: 10px;
-  width: 12px;
-  margin: auto;
-  user-select: none;
-`;
-
-export const ZoomInput = styled.input`
-  color: #4c12a1;
-  width: 50px;
-  margin-left: 5px;
-  border-radius: 5px;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 18px;
-  text-align: center;
-  height: 50px;
-  align-items: center;
-  display: flex;
-`;
-
-export const Control = styled.div`
-  width: 28px;
-  height: 28px;
-  display: flex;
-  justify-content: center;
-  font-size: 15px;
-  cursor: pointer;
-  background-color: #fff;
-  color: white;
-  border-radius: 20px;
-  margin-right: 15px;
-  margin-top: 16px;
-  right: 260px;
-  bottom: 25px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-`;
-export const ControlTitle = styled.span`
-  margin: 10px;
-  font-size: 12px;
-`;
-export const ControlIcon = styled.div`
-  img {
-    font-size: 1.4rem;
-    box-sizing: border-box;
-    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);
-
-    border-radius: 50%;
-  }
-
-  :hover {
-    img {
-      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.39),
-        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-    }
-  }
-`;
-export const Direction = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 15px;
-  cursor: pointer;
-  color: white;
-  border-radius: 32px;
-  margin-right: 15px;
-  right: 260px;
-  bottom: 25px;
-`;
-export const DirectionIcon = styled.div`
-  position: absolute;
-  color: #494949;
-  :hover {
-    color: #2c38de;
-  }
-`;
-export const DirectionSpinIcon = styled.div`
-  position: absolute;
-  color: #494949;
-  img {
-    font-size: 1.4rem;
-    box-sizing: border-box;
-    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);
-  }
-  :hover {
-    height: 40px;
-    margin-bottom: 5px;
-    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-      0px 6px 10px 0px rgba(0, 0, 0, 0.39), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-  }
-`;
-
-export const Toggle = styled.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 36px;
-  margin-left: 20px;
-  justify-content: center;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  :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);\
-    border-radius: 18px;
-  }
-`;
-export const ToggleIcon = styled.div`
-  ${'' /* transition-duration: .3s; */}
-  position: absolute;
-  top: 0px;
-  img {
-    font-size: 1.4rem;
-    box-sizing: border-box;
-    border-radius: 50%;
-  }
-`;
-export const ToggleConvertIcon = styled.div`
-  margin: 5px;
-  transition-duration: 0.3s;
-  :hover {
-    img {
-      font-size: 1.4rem;
-      box-sizing: border-box;
-      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.39),
-        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-      border-radius: 50%;
-    }
-  }
-`;

package/src/components/footerbar/export.js

@@ -1,9 +0,0 @@
-import FooterToggleButton from './footer-toggle-button';
-import FooterContentButton from './footer-content-button';
-import FooterBar from './footerbar';
-
-export default {
-  FooterToggleButton,
-  FooterContentButton,
-  FooterBar
-};

package/src/components/footerbar/footer-content-button.jsx

@@ -1,198 +0,0 @@
-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
-};