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

package/src/components/toolbar/popup/submitforquote/styles.css

@@ -0,0 +1,105 @@
+/**
+ * Styles for submit for quote panel
+ */
+
+.submit-for-quote {
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+
+.submit-for-quote-header {
+  background-color: #1183b7;
+  height: 30px;
+  padding-right: 6px;
+}
+
+.submit-for-quote-header-icon {
+  float: right;
+  margin-top: 4px;
+}
+
+.submit-for-quote-desc {
+  font-size: 14px;
+  margin-top: 20px;
+  margin-left: 40px;
+}
+
+.submit-for-quote-form {
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.submit-for-quote-form-item {
+  width: 345px;
+  margin-top: 20px;
+}
+
+.submit-for-quote-footer {
+  width: 70px;
+  margin-left: 350px;
+  margin-top: 15px;
+  cursor: pointer;
+}
+
+.submit-for-quote-form-item-label {
+  padding-left: 3px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.submit-for-quote-form-item-span {
+  display: inline-block;
+  width: 92px;
+  padding-left: 3px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.submit-for-quote-form-item-checkbox {
+  position: relative;
+  margin-right: 4px;
+  top: 2px;
+}
+
+.submit-for-quote-form-item-input {
+  width: 250px;
+  margin-left: 5px;
+}
+
+.submit-for-quote-form-item-button {
+  width: 230px;
+  height: 23px;
+  margin-left: 20px;
+  color: white !important;
+}
+
+.submit-for-quote-form-item-button > .MuiSelect-icon {
+  color: white !important;
+}
+
+.submit-for-quote-form-item-button-icon {
+  width: 45px;
+  display: inline-block;
+}
+
+.submit-for-quote-form-item-button-img {
+  display: block;
+  margin: auto;
+}
+
+.submit-for-quote-form-item-textarea {
+  width: 100%;
+  height: 100%;
+  margin-top: 10px;
+  resize: none;
+}

package/src/components/toolbar/popup/submitforquote/styles.js

@@ -0,0 +1,294 @@
+import styled from 'styled-components';
+import {
+  BG_COLOR_1,
+  BG_COLOR_HOVER,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_1,
+  TEXT_COLOR_NEUTRAL_2,
+  TEXT_COLOR_NEUTRAL_3,
+  TEXT_COLOR_NEUTRAL_0
+} from '../../../../constants';
+
+export const DialogTitle = styled.span`
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 30px;
+  text-align: left;
+  margin-bottom: 1rem;
+`;
+
+export const DialogContent = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+
+  @media screen and (min-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1440) {
+    font-size: 16px;
+  }
+  @media screen and (max-width: 1440) {
+    font-size: 16px;
+  }
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+  width: 100%;
+`;
+export const DialogContents = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 10px 0px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+`;
+
+export const DialogContentSelection = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 300px);
+`;
+
+export const DialogAction = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 2rem;
+`;
+
+export const Button = styled.div`
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-right: 10px;
+  color: ${SECONDARY_PURPLE_COLOR};
+  font-weight: bold;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  border-radius: 20px;
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+  }
+`;
+
+export const DialogTextArea = styled.textarea`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  text-align: left;
+  padding: 10px;
+  resize: none;
+  height: 140px;
+  width: 100%;
+  outline: 0;
+  border-radius: 5px;
+  :hover {
+    border: 2px solid ${SECONDARY_PURPLE_COLOR};
+  }
+  :focus {
+    border: 2px solid ${SECONDARY_PURPLE_COLOR};
+  }
+`;
+
+export const StyledInputWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 10px 0px;
+`;
+
+export const PlusImage = styled.img`
+  position: absolute;
+  height: 25px;
+  width: 25px;
+  transform: rotate(45deg);
+  right: 15px;
+  cursor: pointer;
+  background-color: ${TEXT_COLOR_NEUTRAL_3};
+  -webkit-mask-image: url(${props => props.maskImage + '?nocache=2025'});
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+`;
+
+export const StyledInput = styled.input`
+  width: 100%;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  height: 50px;
+  text-align: left;
+  padding: 10px;
+  padding-right: 60px;
+  color: ${TEXT_COLOR_NEUTRAL_2};
+  border: 1px solid;
+  border-radius: 5px;
+  outline: 0;
+  :focus {
+    border: 2px solid ${SECONDARY_PURPLE_COLOR};
+  }
+  :hover {
+    border: 2px solid ${SECONDARY_PURPLE_COLOR};
+  }
+`;
+
+export const StyledInputLabel = styled.span`
+  font-size: 16px;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-weight: 400;
+  line-height: 22px;
+  text-align: left;
+  position: absolute;
+  left: 47px;
+  color: ${TEXT_COLOR_NEUTRAL_2};
+  user-select: none;
+`;
+
+export const StyledInputHeadLabel = styled.span`
+  font-size: 13px;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+  position: absolute;
+  left: 37px;
+  top: -9px;
+  background-color: ${BG_COLOR_1};
+  padding: 0px 7px;
+  color: ${SECONDARY_PURPLE_COLOR};
+  user-select: none;
+`;
+
+export const StyledSelectLabel = styled.span`
+  position: absolute;
+  left: 8px;
+
+  @media screen and (min-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1440) {
+    font-size: 16px;
+  }
+  @media screen and (max-width: 1440) {
+    font-size: 16px;
+  }
+  line-height: 18px;
+  padding: 0px 8px;
+  top: -9px;
+  font-weight: 400;
+  background-color: ${BG_COLOR_1};
+  color: ${TEXT_COLOR_NEUTRAL_2};
+  font-family: ${DEFAULT_FONT_FAMILY};
+`;
+
+export const StyledSelect = styled.div`
+  cursor: pointer;
+  padding: 10px;
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 22px;
+  text-align: left;
+  height: 35px;
+  border-radius: 5px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border: 2px solid ${TEXT_COLOR_NEUTRAL_3};
+  :hover {
+    border-color: ${SECONDARY_PURPLE_COLOR};
+  }
+`;
+
+export const StyledSelectOption = styled.div`
+  padding: 12px 20px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  cursor: pointer;
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+  }
+`;
+
+export const SelectArrow = styled.img`
+  position: absolute;
+  right: 15px;
+  cursor: pointer;
+  width: 15px;
+  height: 9px;
+  background-color: ${TEXT_COLOR_NEUTRAL_3};
+  -webkit-mask-image: url(${props => props.maskImage + '?nocache=2025'});
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+`;
+
+export const StyledSelectWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 10px 0px;
+`;
+
+export const DoorCategoryImage = styled.img`
+  width: 22px;
+  height: 22px;
+  margin-left: 5px;
+  margin-right: 10px;
+  background-color: ${SECONDARY_PURPLE_COLOR};
+  -webkit-mask-image: url(${props => props.maskImage + '?nocache=2025'});
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+`;
+
+export const StyledCheck = styled.div`
+  border: 1px solid;
+  margin-right: 10px;
+  color: ${TEXT_COLOR_NEUTRAL_2};
+  height: 20px;
+  border-radius: 50%;
+  width: 20px;
+  padding: 2px;
+  cursor: pointer;
+  background-size: 16px 16px;
+  background-position: center;
+  background-clip: content-box;
+  :hover {
+    color: ${SECONDARY_PURPLE_COLOR};
+  }
+`;
+
+export const StyledPhoneMethod = styled.div`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  display: flex;
+  font-size: 14px;
+  align-items: center;
+`;

package/src/components/toolbar/popup/submitprompt/index.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import * as S from './styles';
+import Dialog from '@material-ui/core/Dialog';
+import { withStyles } from '@material-ui/core/styles';
+import styled from 'styled-components';
+import {
+  TEXT_COLOR_NEUTRAL_2,
+  SECONDARY_PURPLE_COLOR,
+  DEFAULT_FONT_FAMILY,
+  TEXT_COLOR_NEUTRAL_1,
+  SUBMIT_ADD_CART
+} from '../../../../constants';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+
+const StyledDialog = styled(Dialog)`
+  .MuiDialog-paperWidthSm {
+    border-radius: 10px;
+  }
+`;
+
+const StyledMuiCheckbox = withStyles({
+  root: {
+    color: TEXT_COLOR_NEUTRAL_2,
+    '&$checked': {
+      color: SECONDARY_PURPLE_COLOR
+    }
+  },
+  checked: {}
+})(props => <Checkbox color="default" {...props} />);
+
+const DialogContents = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 10px 0px;
+
+  @media screen and (min-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1440) {
+    font-size: 16px;
+  }
+  @media screen and (max-width: 1440) {
+    font-size: 16px;
+  }
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+`;
+class SubmitPromptPopup extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { visible, submitType } = this.props;
+    return (
+      <StyledDialog open={visible} onClose={() => this.props.handleClose()}>
+        {submitType === SUBMIT_ADD_CART ? (
+          <S.DialogContent>
+            You must first save your project before adding to cart. <br />
+            Do you want to save it now?
+          </S.DialogContent>
+        ) : (
+          <S.DialogContent>
+            You must first save your project before submitting the design.
+            <br />
+            Do you want to save it now?
+          </S.DialogContent>
+        )}
+        <S.DialogAction>
+          <S.Button onClick={() => this.props.handleOk(true)}>Yes</S.Button>
+          <S.Button onClick={() => this.props.handleClose()}>No</S.Button>
+        </S.DialogAction>
+      </StyledDialog>
+    );
+  }
+}
+
+export default SubmitPromptPopup;

package/src/components/toolbar/popup/submitprompt/styles.css

@@ -0,0 +1,64 @@
+.container {
+  width: 60px;
+  position: relative;
+  padding-left: 20px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Hide the browser's default checkbox */
+.container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* Create a custom checkbox */
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 13px;
+  width: 13px;
+  background-color: #eee;
+}
+
+/* On mouse-over, add a grey background color */
+.container:hover input ~ .checkmark {
+  background-color: #ccc;
+}
+
+/* When the checkbox is checked, add a blue background */
+.container input:checked ~ .checkmark {
+  background-color: #2196f3;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+  content: '';
+  position: absolute;
+  display: none;
+}
+
+/* Show the checkmark when checked */
+.container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the checkmark/indicator */
+.container .checkmark:after {
+  left: 4px;
+  top: 1px;
+  width: 3px;
+  height: 7px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}

package/src/components/toolbar/popup/submitprompt/styles.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import {
+  BG_COLOR_HOVER,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_1
+} from '../../../../constants';
+
+export const DialogTitle = styled.span`
+  font-weight: bold;
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 26px;
+  padding: 25px 30px;
+`;
+
+export const DialogContent = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 10px 30px;
+  padding-top: 30px;
+`;
+
+export const DialogAction = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px 30px 25px;
+`;
+
+export const Button = styled.div`
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-right: 10px;
+  color: ${SECONDARY_PURPLE_COLOR};
+  font-weight: bold;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  border-radius: 20px;
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+  }
+`;

package/src/components/toolbar/toolbar-button.jsx

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from '../../shared-style';
+
+//http://www.cssportal.com/css-tooltip-generator/
+
+const STYLE = {
+  width: '30px',
+  height: '30px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginBottom: '5px',
+  fontSize: '25px',
+  position: 'relative',
+  cursor: 'pointer'
+};
+
+const STYLE_TOOLTIP = {
+  position: 'absolute',
+  width: '140px',
+  color: SharedStyle.COLORS.white,
+  background: SharedStyle.COLORS.black,
+  height: '30px',
+  lineHeight: '30px',
+  textAlign: 'center',
+  visibility: 'visible',
+  borderRadius: '6px',
+  opacity: '0.8',
+  left: '100%',
+  top: '50%',
+  marginTop: '-15px',
+  marginLeft: '15px',
+  zIndex: '999',
+  fontSize: '12px'
+};
+
+const STYLE_TOOLTIP_PIN = {
+  position: 'absolute',
+  top: '50%',
+  right: '100%',
+  marginTop: '-8px',
+  width: '0',
+  height: '0',
+  borderRight: '8px solid #000000',
+  borderTop: '8px solid transparent',
+  borderBottom: '8px solid transparent'
+};
+
+export default class ToolbarButton extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = { active: false };
+  }
+
+  render() {
+    let { state, props } = this;
+    let color =
+      props.active || state.active
+        ? SharedStyle.SECONDARY_COLOR.icon
+        : SharedStyle.PRIMARY_COLOR.icon;
+
+    return (
+      <div
+        style={STYLE}
+        onMouseOver={event => this.setState({ active: true })}
+        onMouseOut={event => this.setState({ active: false })}
+      >
+        <div style={{ color }} onClick={props.onClick}>
+          {props.children}
+        </div>
+
+        {/* {
+          state.active ?
+          <div style={STYLE_TOOLTIP}>
+            <span style={STYLE_TOOLTIP_PIN} />
+            {props.tooltip}
+          </div>
+          : null
+        } */}
+      </div>
+    );
+  }
+}
+
+ToolbarButton.propTypes = {
+  active: PropTypes.bool.isRequired,
+  tooltip: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+};

package/src/components/toolbar/toolbar-load-button.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FaFolderOpen as IconLoad } from 'react-icons/fa';
+import ToolbarButton from './toolbar-button';
+import { browserUpload } from '../../utils/browser';
+
+export default function ToolbarLoadButton(
+  { state },
+  { translator, projectActions }
+) {
+  let loadProjectFromFile = event => {
+    event.preventDefault();
+    browserUpload().then(data => {
+      projectActions.loadProject(JSON.parse(data));
+    });
+  };
+
+  return (
+    <ToolbarButton
+      active={false}
+      tooltip={translator.t('Load project')}
+      onClick={loadProjectFromFile}
+    >
+      <IconLoad />
+    </ToolbarButton>
+  );
+}
+
+ToolbarLoadButton.propTypes = {
+  state: PropTypes.object.isRequired
+};
+
+ToolbarLoadButton.contextTypes = {
+  projectActions: PropTypes.object.isRequired,
+  translator: PropTypes.object.isRequired
+};