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

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

@@ -0,0 +1,453 @@
+import styled from 'styled-components';
+import {
+  BG_COLOR_0,
+  BG_COLOR_1,
+  BG_COLOR_HOVER,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR,
+  SHADE_DARK_PURPLE_COLOR,
+  SHADE_LIGHT_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_0,
+  TEXT_COLOR_NEUTRAL_1,
+  TEXT_COLOR_NEUTRAL_2,
+  TEXT_COLOR_NEUTRAL_3
+} from '../../../../constants';
+
+export const DialogTitle = styled.span`
+  color: ${TEXT_COLOR_NEUTRAL_0};
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 30px;
+  text-align: left;
+  word-wrap: break-word;
+`;
+
+export const DialogContent = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+
+  @media screen and (min-width: 1024px) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024px) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366px) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366px) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1920px) {
+    font-size: 12px;
+  }
+  @media screen and (max-width: 1920px) {
+    font-size: 12px;
+  }
+  font-weight: 400;
+  line-height: 15px;
+  text-align: left;
+  width: 100%;
+  word-wrap: break-word;
+`;
+export const DialogContents = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 10px 0px;
+  margin-left: 10px;
+
+  @media screen and (min-width: 1024px) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024px) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366px) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366px) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1920px) {
+    font-size: 12px;
+  }
+  @media screen and (max-width: 1920px) {
+    font-size: 12px;
+  }
+  font-weight: 400;
+  line-height: 15px;
+  text-align: left;
+  word-wrap: break-word;
+`;
+
+export const DialogContentSelection = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 10px 30px;
+  max-height: calc(100vh - 300px);
+  overflow-y: scroll;
+`;
+
+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};
+  }
+`;
+
+export const DialogTextArea = styled.textarea`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  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: 15px;
+  width: 15px;
+  transform: rotate(45deg);
+  right: 15px;
+  cursor: pointer;
+  background-color: ${TEXT_COLOR_NEUTRAL_3};
+  -webkit-mask-image: url(${props => props.maskImage});
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+`;
+
+export const StyledInput = styled.input`
+  width: 100%;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 15px;
+  height: 50px;
+  text-align: left;
+  padding: 10px 60px 10px 10px;
+  color: ${TEXT_COLOR_NEUTRAL_2};
+  border: 1px solid;
+  border-radius: 5px;
+  outline: 0;
+  word-wrap: break-word;
+
+  :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: 12px;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+  position: absolute;
+  left: 12px;
+  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});
+  -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});
+  -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 ReviewQuoteTable = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ReviewQuoteThead = styled.div`
+  background-color: ${BG_COLOR_0};
+  display: flex;
+  align-items: center;
+`;
+
+export const ReviewQuoteTh = styled.div`
+  font-family: ${DEFAULT_FONT_FAMILY};
+
+  @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: 13px;
+  text-align: center;
+  font-weight: 600;
+  margin: 5px;
+  line-height: normal;
+  color: ${TEXT_COLOR_NEUTRAL_3};
+`;
+
+export const ReviewQuoteItem = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: center;
+`;
+
+export const DownloadPopupContainer = styled.div`
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+export const DownloadPopupHeaderStyle = styled.div`
+  margin-top: 20px;
+  padding: 15px 0;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid gray;
+`;
+export const DownloadPopupBaseFontStyle = styled.div`
+  color: rgba(10, 10, 10, 0.692);
+  /* font-size: 12px; */
+  font-family: Open Sans;
+  /* font-weight: 600; */
+`;
+export const SaveBox = styled.button`
+  cursor: pointer;
+  position: relative;
+  //margin-top : 20px;
+  border: 3px solid ${SECONDARY_PURPLE_COLOR};
+  border-radius: 6px;
+  padding: 7px 16px;
+  display: flex;
+  align-items: center;
+  background-color: ${SECONDARY_PURPLE_COLOR};
+  outline: 0;
+
+  :hover {
+    background-color: ${SHADE_LIGHT_PURPLE_COLOR};
+    border-color: ${SHADE_LIGHT_PURPLE_COLOR};
+  }
+
+  :active {
+    background-color: ${SHADE_DARK_PURPLE_COLOR};
+    border-color: ${SHADE_DARK_PURPLE_COLOR};
+  }
+
+  // :focus{
+  //   box-shadow: 0px 0px 8px 2px ${SECONDARY_PURPLE_COLOR};
+  // }
+`;
+
+export const SelectTitle = styled.span`
+  color: ${SECONDARY_PURPLE_COLOR};
+  padding-left: 10px;
+  margin: auto;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+  word-wrap: break-word;
+`;
+
+export const previewPan = styled.div`
+  height: 100%;
+  border-radius: 5px;
+
+  ::-webkit-scrollbar {
+    width: 4px;
+    position: absolute;
+    margin-left: 2px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: rgb(193, 202, 228);
+    position: absolute;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgb(193, 202, 228);
+    border-radius: 5px;
+    transition: all 0.3s;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(193, 202, 228);
+    border-radius: 5px;
+    transition: all 0.3s;
+  }
+`;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import ToolbarPanel from '../../../../sidebar/toolbar-panel';
+import * as S from '../../styles';
+
+export const FinishingCategory = ({ action, props, dataSource, isExpand }) => {
+  let miHeight = 0;
+  let nonHeight = 495 - miHeight + 'px';
+  let height = window.innerHeight * 0.6 - miHeight + 'px';
+  var result = [];
+  dataSource.map((el, key) => {
+    result.push(
+      <S.ItemWrapper key={key.toString()}>
+        <ToolbarPanel
+          key={key}
+          onClose={() => {
+            action(el.name);
+          }}
+          onOpen={() => {
+            action(el.name);
+          }}
+          isUrl={true}
+          name={el.name}
+          url={el.thumbnail}
+        />
+      </S.ItemWrapper>
+    );
+  });
+
+  return (
+    <S.CategoryContentWrapper style={{ height: isExpand ? height : nonHeight }}>
+      {result}
+    </S.CategoryContentWrapper>
+  );
+};

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { FinishingCategory } from './category';
+import { FinishingProduct } from './product';
+
+import { ToolbarButtonWithPopup, DoubleToolbarButtonWithPopup } from '../';
+
+const FinishingTouchToolbarButton = ({
+  dataSource,
+  action,
+  chooseAction,
+  subData,
+  props,
+  productCollapse,
+  isOpen,
+  trigger,
+  categoryCollapse,
+  collapseAction,
+  mode,
+  closeAction,
+  applyMaterial
+}) => {
+  let content = (
+    <FinishingCategory
+      action={action}
+      dataSource={dataSource}
+      isExpand={!categoryCollapse}
+      props={props}
+    />
+  );
+  let content1 = (
+    <FinishingProduct
+      chooseAction={chooseAction}
+      props={props}
+      dataSource={subData}
+      isExpand={!productCollapse}
+      mode={mode}
+    ></FinishingProduct>
+  );
+  return (
+    <DoubleToolbarButtonWithPopup
+      closeAction={closeAction}
+      isOpen={isOpen}
+      mode={mode}
+      order={4}
+      isDouble={subData.length}
+      collapse1={categoryCollapse}
+      collapse2={productCollapse}
+      collapseAction={collapseAction}
+      trigger={trigger}
+      children1={content1}
+      applyMaterial={applyMaterial}
+    >
+      {content}
+    </DoubleToolbarButtonWithPopup>
+  );
+};
+
+export default FinishingTouchToolbarButton;

package/src/components/toolbar/popup/finishingtouch/material-edit.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Input, Form, Row, Col, Select } from 'antd';
+import * as S from '../product/styles';
+import * as MS from '../styles';
+
+const FormItem = Form.Item;
+const { Option } = Select;
+const formItemLayout = {
+  labelCol: { span: 9 },
+  wrapperCol: { span: 12 }
+};
+
+const msButtonTitleStyle = {
+  top: '39%',
+  fontSize: '12'
+};
+
+export default class MaterialEdit extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      category: 'handle',
+      metalness: 0.1,
+      roughness: 0.1
+    };
+  }
+
+  handleCategoryChange(e) {
+    this.setState({ category: e.target.value });
+  }
+  handleMetalnessChange(e) {
+    this.setState({ metalness: e.target.value });
+  }
+  handleRoughnessChange(e) {
+    this.setState({ roughness: e.target.value });
+  }
+  handleClick(e) {
+    const { category, metalness, roughness } = this.state;
+    this.props.applyMaterial(category, metalness, roughness);
+  }
+  render() {
+    const { category, metalness, roughness } = this.state;
+
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          backgroundColor: 'rgba(255, 255, 255, 100)',
+          border: '1px solid white'
+        }}
+      >
+        <S.Control
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-end'
+          }}
+        >
+          <S.MEditLine>
+            <span>{'Category: '}</span>
+            <select
+              value={category}
+              style={{ width: '65%', marginRight: '3%' }}
+              onChange={e => this.handleCategoryChange(e)}
+            >
+              <option value={'handle'}> Handle </option>
+              <option value={'floor_style'}> Floor Style </option>
+              <option value={'backsplash'}> Backsplash </option>
+              <option value={'counter_top'}> Countertop </option>
+              <option value={'appliance'}> Appliance </option>
+            </select>
+          </S.MEditLine>
+          <S.MEditLine>
+            <span>{'Metalness: '}</span>
+            <input
+              type="text"
+              value={metalness}
+              onChange={e => this.handleMetalnessChange(e)}
+              style={{ width: '65%', marginRight: '3%' }}
+            />
+          </S.MEditLine>
+          <S.MEditLine>
+            <span>{'Roughness: '}</span>
+            <input
+              type="text"
+              value={roughness}
+              onChange={e => this.handleRoughnessChange(e)}
+              style={{ width: '65%', marginRight: '3%' }}
+            />
+          </S.MEditLine>
+
+          <S.ControlIconMEdit
+            style={{
+              height: '25px',
+              display: 'flex',
+              justifyContent: 'space-around'
+            }}
+            onClick={e => this.handleClick(e)}
+          >
+            <img
+              width={'72px'}
+              src={'/assets/img/svg/toolbar/use_button.svg'}
+            />
+            <MS.ButtonTitle style={{ ...msButtonTitleStyle }}>
+              {'APPLY'}
+            </MS.ButtonTitle>
+          </S.ControlIconMEdit>
+        </S.Control>
+      </div>
+    );
+  }
+}