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

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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,217 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -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
+};