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

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

@@ -0,0 +1,60 @@
+import React from 'react';
+
+// import { FaSearch, FaPlus } from 'react-icons/fa';
+
+// import * as S from '../styles';
+import { FloorCategory } from './floor-category';
+import { FloorChooseProduct } from './choose-floor';
+
+import { DoubleToolbarButtonWithPopup } from '../';
+
+const FloorplanToolbarButton = ({
+  props,
+  action,
+  drawAction,
+  dataSource,
+  subData,
+  trigger,
+  categoryCollapse,
+  productCollapse,
+  collapseAction,
+  mode,
+  closeAction,
+  isOpen
+}) => {
+  let content = (
+    <FloorCategory
+      props={props}
+      action={action}
+      dataSource={dataSource.categories}
+    ></FloorCategory>
+  );
+  let content1 = (
+    <FloorChooseProduct
+      drawAction={drawAction}
+      closeAction={closeAction}
+      props={props}
+      dataSource={subData}
+      isExpand={!productCollapse}
+      mode={mode}
+    ></FloorChooseProduct>
+  );
+  return (
+    <DoubleToolbarButtonWithPopup
+      closeAction={closeAction}
+      mode={mode}
+      order={0}
+      isDouble={subData.length || subData === -1 || subData === -2}
+      collapse1={categoryCollapse}
+      collapse2={productCollapse}
+      collapseAction={collapseAction}
+      trigger={trigger}
+      children1={content1}
+      isOpen={isOpen}
+    >
+      {content}
+    </DoubleToolbarButtonWithPopup>
+  );
+};
+
+export default FloorplanToolbarButton;

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

@@ -0,0 +1,241 @@
+import React, { useState } from 'react';
+import { Popup as BasePopup } from 'reactjs-popup';
+import { ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
+import {
+  FaAngleDoubleLeft,
+  FaTimes,
+  FaTrash,
+  FaCopy,
+  FaExpand
+} from 'react-icons/fa';
+import {
+  // API_SERVER,
+  ARRAY_3D_MODES
+} from '../../../constants';
+
+import MaterialEdit from './finishingtouch/material-edit';
+import * as S from './styles';
+
+const Popup = ({
+  mode,
+  trigger,
+  children,
+  collapse,
+  collapseAction,
+  order,
+  isOpened,
+  closeAction
+}) => {
+  let title = trigger.props.title;
+  return (
+    <BasePopup
+      onClose={closeAction}
+      open={isOpened}
+      closeOnDocumentClick
+      trigger={<div>{trigger}</div>}
+      position="right top"
+      offsetX={!ARRAY_3D_MODES.includes(mode) ? 99 : 10}
+      offsetY={-90.15 * order}
+      on={['click']}
+      mouseLeaveDelay={100}
+      arrow={false}
+    >
+      {closePopup => (
+        <S.Wrapper style={{ background: '#3e3e3f' }}>
+          <S.TitleBar>
+            <S.Title>{title}</S.Title>
+            <S.TitleBarIconButton onClick={closePopup}>
+              <S.IconButton>
+                <FaTimes />
+              </S.IconButton>
+            </S.TitleBarIconButton>
+          </S.TitleBar>
+          <S.ContentWrapper>{children}</S.ContentWrapper>
+        </S.Wrapper>
+      )}
+    </BasePopup>
+  );
+};
+
+const DoublePopup = ({
+  mode,
+  isDouble,
+  trigger,
+  children,
+  children1,
+  collapse1,
+  collapse2,
+  order,
+  isExpand,
+  expandAction,
+  isOpen,
+  closeAction,
+  applyMaterial
+}) => {
+  function capitalize(s) {
+    return s.toLowerCase().replace(/\b./g, function (a) {
+      return a.toUpperCase();
+    });
+  }
+  let pathTitle1 = trigger.props.title1;
+  let pathTitle2 = trigger.props.title2;
+  let title1 = trigger.props.title;
+  let title2 = trigger.props.title;
+  if (pathTitle1.length > 0 && collapse1) {
+    title1 = '';
+    for (let i = 0; i < pathTitle1.length; i++) {
+      pathTitle1[i] = capitalize(pathTitle1[i]);
+      title1 += pathTitle1[i];
+      title1 += '/';
+    }
+  }
+  if (pathTitle2.length > 0 && collapse2) {
+    title2 = '';
+    for (let i = 0; i < pathTitle2.length; i++) {
+      title2 += pathTitle2[i];
+      title2 += '/';
+    }
+  }
+
+  return (
+    <BasePopup
+      closeOnDocumentClick
+      trigger={<div>{trigger}</div>}
+      position="right top"
+      offsetX={!ARRAY_3D_MODES.includes(mode) ? 99 : 10}
+      offsetY={-90.15 * order}
+      on={['click']}
+      mouseLeaveDelay={100}
+      arrow={false}
+      contentStyle={{ top: '110px!important' }}
+      open={isOpen}
+      onClose={closeAction}
+    >
+      {closePopup => (
+        <S.Wrapper>
+          <S.TitlesRow>
+            <S.TitleBar>
+              <S.Title>{title1}</S.Title>
+              <S.TitleBarIconButton
+                className={'popup-exit'}
+                onClick={closePopup}
+              >
+                <S.IconButton>
+                  <FaTimes />
+                </S.IconButton>
+              </S.TitleBarIconButton>
+              {isExpand > -1 && (
+                <S.TitleBarIconButton>
+                  <S.IconButton onClick={() => expandAction()}>
+                    {title1 === 'Select Door Style' ? (
+                      isExpand === 1 ? (
+                        <ZoomOutOutlined style={{ fontSize: '14px' }} />
+                      ) : (
+                        <ZoomInOutlined style={{ fontSize: '14px' }} />
+                      )
+                    ) : (
+                      <FaAngleDoubleLeft
+                        style={{
+                          transform:
+                            isExpand === 1 ? 'rotate(0deg)' : 'rotate(180deg)'
+                        }}
+                      />
+                    )}
+                  </S.IconButton>
+                </S.TitleBarIconButton>
+              )}
+            </S.TitleBar>
+            <div style={{ display: 'grid', gridAutoFlow: 'column' }}>
+              <section>
+                <div style={{ backgroundColor: '#3e3e3f' }}>
+                  {collapse2 ? children : ''}
+                  <S.ClearFix />
+                </div>
+              </section>
+              <section style={{ display: isDouble ? 'block' : 'none' }}>
+                <div
+                  style={{
+                    backgroundColor: '#3e3e3f',
+                    display: !collapse2 ? 'none' : 'block'
+                  }}
+                >
+                  {collapse2 ? children1 : ''}
+                  <S.ClearFix />
+                  {(title1.includes('Finishing Touch') ||
+                    title1.includes('Appliance')) &&
+                  process.env.MODE == 'staging' ? (
+                    <MaterialEdit applyMaterial={applyMaterial} />
+                  ) : null}
+                </div>
+              </section>
+            </div>
+          </S.TitlesRow>
+        </S.Wrapper>
+      )}
+    </BasePopup>
+  );
+};
+
+export const ToolbarButtonWithPopup = ({
+  mode,
+  order,
+  trigger,
+  children,
+  props,
+  collapseFlag,
+  collapseAction,
+  isOpened,
+  closeAction
+}) => {
+  return (
+    <Popup
+      closeAction={closeAction}
+      mode={mode}
+      trigger={trigger}
+      props={props}
+      collapse1={collapseFlag}
+      collapseAction={collapseAction}
+      order={order}
+      isOpened={isOpened}
+    >
+      {children}
+    </Popup>
+  );
+};
+
+export const DoubleToolbarButtonWithPopup = ({
+  mode,
+  isOpen,
+  isExpand,
+  expandAction,
+  trigger,
+  children,
+  children1,
+  collapse1,
+  collapse2,
+  collapseAction,
+  isDouble,
+  order,
+  closeAction,
+  applyMaterial
+}) => {
+  return (
+    <DoublePopup
+      closeAction={closeAction}
+      mode={mode}
+      isOpen={isOpen}
+      isExpand={isExpand}
+      expandAction={expandAction}
+      isDouble={isDouble}
+      trigger={trigger}
+      children1={children1}
+      collapse1={collapse1}
+      collapse2={collapse2}
+      collapseAction={collapseAction}
+      order={order}
+      applyMaterial={applyMaterial}
+    >
+      {children}
+    </DoublePopup>
+  );
+};

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import * as S from './styles';
+import Dialog from '@material-ui/core/Dialog';
+import styled from 'styled-components';
+
+const StyledDialog = styled(Dialog)`
+  .MuiDialog-paperWidthSm {
+    border-radius: 10px;
+  }
+`;
+class NewProjectPopup extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      asking: sessionStorage.getItem('asking')
+        ? sessionStorage.getItem('asking')
+        : false
+    };
+  }
+
+  _submit() {
+    if (this.state.asking) sessionStorage.setItem('asking', true);
+    this.props.newProject();
+    this.closePanel();
+  }
+  closePanel() {
+    this.props.handleNewProject(false);
+  }
+
+  render() {
+    let { visible } = this.props;
+
+    return (
+      <StyledDialog open={visible} onClose={() => this.closePanel()}>
+        <S.DialogTitle>New Project</S.DialogTitle>
+        <S.DialogContent>
+          Would you like to <strong>start a new project</strong>?
+          {!this.props.isSaved && this.props.areas.size > 0 && (
+            <div>
+              <br />
+              <div>
+                <span>
+                  It seems you have unsaved changes which will be lost if you
+                  start a new project.
+                </span>
+              </div>
+            </div>
+          )}
+        </S.DialogContent>
+        <S.DialogAction>
+          <S.Button onClick={() => this.closePanel()}>Cancel</S.Button>
+          <S.Button onClick={() => this._submit()}>OK</S.Button>
+        </S.DialogAction>
+      </StyledDialog>
+    );
+  }
+}
+
+export default NewProjectPopup;

package/src/components/toolbar/popup/newproject/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/newproject/styles.js

@@ -0,0 +1,41 @@
+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;
+`;
+
+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/popup/product/appliance.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import * as S from './styles';
+import * as MS from '../styles';
+
+const lineWrapperStyle = {
+  padding: '5px 15px 8px'
+};
+
+const lineImageStyle = {
+  maxWidth: '100%'
+};
+
+const msButtonTitleStyle = {
+  top: '39%',
+  fontSize: '12'
+};
+
+export default function Appliance({ url, title, selected, onClick, name }) {
+  title = title.charAt(0).toUpperCase() + title.substr(1);
+  let isUrl = true;
+  if (url !== undefined && url.charAt(0) === '#') isUrl = false;
+  return (
+    <S.LineWrapper style={{ ...lineWrapperStyle }}>
+      <S.Control onClick={onClick}>
+        <S.LineImage>
+          {isUrl && (
+            <img
+              name={name}
+              src={url}
+              style={{ width: 75, height: 75, ...lineImageStyle }}
+            />
+          )}
+          {!isUrl && (
+            <div style={{ width: 75, height: 75, backgroundColor: url }}></div>
+          )}
+        </S.LineImage>
+        <div style={{ display: 'grid', marginLeft: '10px' }}>
+          <h4 style={{ width: 104 }}>{title}</h4>
+          <S.ControlIcon key={name}>
+            <img
+              width={'72px'}
+              name={name}
+              src={'/assets/img/svg/toolbar/use_button.svg'}
+            />
+            <MS.ButtonTitle style={{ ...msButtonTitleStyle }}>
+              {selected ? 'APPLIED' : 'USE'}
+            </MS.ButtonTitle>
+          </S.ControlIcon>
+        </div>
+      </S.Control>
+    </S.LineWrapper>
+  );
+}

package/src/components/toolbar/popup/product/cabinetproduct.jsx

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+
+import * as S from './styles';
+
+export default function Product({ url, title, onClick, name }) {
+  const [newstate, setNewstate] = useState(false);
+  return (
+    <S.CabinetWrapper onClick={onClick}>
+      <div>
+        <img name={name} src={url} />
+      </div>
+      <S.Title>{title}</S.Title>
+    </S.CabinetWrapper>
+  );
+}

package/src/components/toolbar/popup/product/doorstyle.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import * as S from './styles';
+import * as SharedStyle from '../../../../shared-style';
+
+const StyledSpan = styled.span`
+  color: ${props =>
+    props.idx === props.selOption && props.selSubOption === props.subOptionIdx
+      ? SharedStyle.SECONDARY_COLOR.main
+      : '#fff'};
+  margin-left: 23px;
+  font-size: 12px;
+`;
+
+export default function DoorStyle({
+  idx,
+  url,
+  onClick,
+  name,
+  selOption,
+  selSubOption,
+  subOptionIdx
+}) {
+  name = name.charAt(0).toUpperCase() + name.substr(1);
+
+  return (
+    <S.PrimayDoorStyleLineWrapper
+      style={{
+        padding: '5px 5px 5px 20px',
+        borderBottom: '1px solid #2f2f2f',
+        height: 90
+      }}
+      onClick={onClick}
+    >
+      <div style={{ width: '100%', marginLeft: '10px', marginTop: '10px' }}>
+        <h4
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            marginTop: '3px',
+            marginBottom: '9px'
+          }}
+        >
+          <img height={'50'} name={name} src={url} />
+          <StyledSpan
+            idx={idx}
+            selOption={selOption}
+            subOptionIdx={subOptionIdx}
+            selSubOption={selSubOption}
+          >
+            {name}
+          </StyledSpan>
+        </h4>
+      </div>
+    </S.PrimayDoorStyleLineWrapper>
+  );
+}

package/src/components/toolbar/popup/product/doorstyleproduct.jsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+
+import * as S from './styles';
+import * as MS from '../styles';
+
+export default function DoorStyleProduct({
+  url,
+  onClick,
+  name,
+  doorId,
+  isExpand,
+  selected,
+  currentTexture
+}) {
+  name = name.charAt(0).toUpperCase() + name.substr(1);
+
+  return (
+    <S.PrimayDoorStyleLineWrapper style={{ padding: '5px 15px 5px' }}>
+      <S.Control onClick={onClick}>
+        <div
+          style={{
+            width: '100%',
+            display: 'grid',
+            justifyItems: isExpand === 1 ? 'center' : 'left'
+          }}
+        >
+          <S.LineImage>
+            <img width={isExpand === 1 ? 196 : 85} name={name} src={url} />
+          </S.LineImage>
+          <h4 style={{ marginTop: '4px', marginBottom: '4px' }}>
+            <span style={{ fontSize: isExpand === 1 ? 18 : 10 }}>{name}</span>
+          </h4>
+          <S.ControlIcon key={name}>
+            <img
+              width={isExpand === 1 ? 100 : 72}
+              name={name}
+              src={'/assets/img/svg/toolbar/apply_button.svg'}
+            />
+            <MS.ButtonTitle style={{ top: '37%', fontSize: 10.5 }}>
+              {selected(doorId) ? 'APPLIED' : 'USE'}
+            </MS.ButtonTitle>
+          </S.ControlIcon>
+        </div>
+      </S.Control>
+    </S.PrimayDoorStyleLineWrapper>
+  );
+}

package/src/components/toolbar/popup/product/floor.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+import * as S from './styles';
+
+const STYLE_TITLE = {
+  fontSize: '12px',
+  color: '#fff',
+  padding: '10px',
+  // backgroundColor: '#3e3e3f',
+  margin: '0px',
+  cursor: 'pointer',
+  display: 'flex',
+  height: '85px',
+  justifyContent: 'start',
+  alignItems: 'center'
+};
+// const STYLE_CONTENT = {
+//   fontSize: '10px',
+//   color: 'rgba(222, 222, 222, 1)',
+//   padding: '0px',
+//   backgroundColor: '#28292d',
+// };
+// const STYLE_ARROW = {
+//   float: 'right'
+// };
+
+export default function Floor({ url, title, onClick, name }) {
+  return (
+    <S.PlanWraper onClick={onClick}>
+      <h3 style={{ ...STYLE_TITLE, paddingLeft: url ? 15 : 0 }}>
+        {url !== null && <img name={name} src={url} height={48} />}
+        <span style={{ marginLeft: 23 }}> {title} </span>
+      </h3>
+    </S.PlanWraper>
+  );
+}