kitchen-simulator 5.0.0-test.7 → 5.0.0-test.71

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

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

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

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

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

@@ -1,101 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../shared-style';
-
-const toggleButtonStyle = {
-  width: '5.5em',
-  color: '#CCC',
-  textAlign: 'center',
-  cursor: 'pointer',
-  userSelect: 'none',
-  border: '1px solid transparent',
-  margin: '-1px 5px 0 5px',
-  borderRadius: '2px',
-  display: 'inline-block'
-};
-
-const toggleButtonStyleOver = {
-  ...toggleButtonStyle,
-  backgroundColor: '#1c82c6',
-  border: '1px solid #FFF',
-  color: SharedStyle.COLORS.white
-};
-
-export default class FooterToggleButton extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      over: 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 });
-
-    if (isActive) {
-      this.props.toggleOn();
-    } else {
-      this.props.toggleOff();
-    }
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    if (this.state.over != nextState.over) return true;
-    if (this.state.active != nextState.active) 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() {
-    return (
-      <div
-        style={
-          this.state.over || this.state.active
-            ? toggleButtonStyleOver
-            : toggleButtonStyle
-        }
-        onMouseOver={e => this.toggleOver(e)}
-        onMouseOut={e => this.toggleOut(e)}
-        onClick={e => this.toggle(e)}
-        title={this.props.title}
-      >
-        {this.props.text}
-      </div>
-    );
-  }
-}
-
-FooterToggleButton.propTypes = {
-  state: PropTypes.object.isRequired,
-  toggleOn: PropTypes.func.isRequired,
-  toggleOff: PropTypes.func.isRequired,
-  text: PropTypes.string.isRequired,
-  toggleState: PropTypes.bool,
-  title: PropTypes.string
-};
-
-FooterToggleButton.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
-};