kitchen-simulator 5.0.0-test.6 → 5.0.0-test.8

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

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

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

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

@@ -1,112 +0,0 @@
-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>
-    );
-  }
-}