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

package/src/components/footerbar/styles.js

@@ -0,0 +1,263 @@
+import {
+  BG_COLOR_HOVER,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_1,
+  TEXT_COLOR_NEUTRAL_5
+} from '../../constants';
+import styled from 'styled-components';
+
+export const Toggle_2D_3D = styled.div`
+  width: 50px;
+  margin-left: 10px;
+  border-radius: 5px;
+  height: 50px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  user-select: none;
+  :hover {
+    background-color: ${TEXT_COLOR_NEUTRAL_5};
+  }
+`;
+
+export const Toggle_2D_3D_Button = styled.div`
+  width: 50px;
+  margin-left: 10px;
+  border-radius: 5px;
+  height: 50px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  background-color: #ffffff;
+  cursor: not-allowed;
+  opacity: 0.5;
+`;
+
+export const FooterTitle = styled.span`
+  color: ${SECONDARY_PURPLE_COLOR};
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+  text-align: left;
+  user-select: none;
+`;
+
+export const Direction_Up_Down = styled.div`
+  width: 50px;
+  margin-left: 5px;
+  border-radius: 5px;
+  height: 25px;
+  align-items: center;
+  display: flex;
+  :hover {
+    background-color: ${TEXT_COLOR_NEUTRAL_5};
+  }
+`;
+
+export const Direction_Left_Right = styled.div`
+  width: 50px;
+  margin-left: 5px;
+  border-radius: 5px;
+  height: 50px;
+  align-items: center;
+  display: flex;
+  :hover {
+    background-color: ${TEXT_COLOR_NEUTRAL_5};
+  }
+`;
+
+export const ArrowIcon = styled.img`
+  height: 10px;
+  width: 12px;
+  margin: auto;
+  user-select: none;
+`;
+export const Rotation_Button = styled.div`
+  width: ${props => (props.isVertical ? '48px' : '56px')};
+  height: ${props => (props.isVertical ? '48px' : '32px')};
+  border-radius: 5px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  :hover {
+    background-color: ${TEXT_COLOR_NEUTRAL_5};
+  }
+`;
+export const Rotation_Icon = styled.img`
+  height: ${props => (props.height ? props.height : '22px')};
+  width: ${props => (props.width ? props.width : '22px')};
+  user-select: none;
+`;
+
+export const ZoomButton = styled.div`
+  width: 50px;
+  margin-left: 10px;
+  border-radius: 5px;
+  height: 50px;
+  align-items: center;
+  display: flex;
+  :hover {
+    background-color: ${TEXT_COLOR_NEUTRAL_5};
+  }
+`;
+
+export const ZoomIcon = styled.img`
+  height: 10px;
+  width: 12px;
+  margin: auto;
+  user-select: none;
+`;
+
+export const ZoomInput = styled.input`
+  color: ${SECONDARY_PURPLE_COLOR};
+  width: 50px;
+  margin-left: 5px;
+  border-radius: 5px;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  text-align: center;
+  height: 50px;
+  align-items: center;
+  display: flex;
+`;
+
+export const Control = styled.div`
+  width: 28px;
+  height: 28px;
+  display: flex;
+  justify-content: center;
+  font-size: 15px;
+  cursor: pointer;
+  background-color: #fff;
+  color: white;
+  border-radius: 20px;
+  margin-right: 15px;
+  margin-top: 16px;
+  right: 260px;
+  bottom: 25px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`;
+export const ControlTitle = styled.span`
+  margin: 10px;
+  font-size: 12px;
+`;
+export const ControlIcon = styled.div`
+  img {
+    font-size: 1.4rem;
+    box-sizing: border-box;
+    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);
+
+    border-radius: 50%;
+  }
+
+  :hover {
+    img {
+      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+        0px 6px 10px 0px rgba(0, 0, 0, 0.39),
+        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+    }
+  }
+`;
+export const Direction = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  cursor: pointer;
+  color: white;
+  border-radius: 32px;
+  margin-right: 15px;
+  right: 260px;
+  bottom: 25px;
+`;
+export const DirectionIcon = styled.div`
+  position: absolute;
+  color: #494949;
+  :hover {
+    color: #2c38de;
+  }
+`;
+export const DirectionSpinIcon = styled.div`
+  position: absolute;
+  color: #494949;
+  img {
+    font-size: 1.4rem;
+    box-sizing: border-box;
+    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);
+  }
+  :hover {
+    height: 40px;
+    margin-bottom: 5px;
+    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+      0px 6px 10px 0px rgba(0, 0, 0, 0.39), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  }
+`;
+
+export const Toggle = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 36px;
+  margin-left: 20px;
+  justify-content: center;
+  font-size: 14px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  :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);
+    border-radius: 18px;
+  }
+`;
+export const ToggleIcon = styled.div`
+  ${'' /* transition-duration: .3s; */}
+  position: absolute;
+  top: 0px;
+  img {
+    font-size: 1.4rem;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+`;
+export const ToggleConvertIcon = styled.div`
+  margin: 5px;
+  transition-duration: 0.3s;
+  :hover {
+    img {
+      font-size: 1.4rem;
+      box-sizing: border-box;
+      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+        0px 6px 10px 0px rgba(0, 0, 0, 0.39),
+        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+      border-radius: 50%;
+    }
+  }
+`;
+
+export const ElevationButton = styled.div`
+  display: flex;
+  align-items: center;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  font-weight: 'bold';
+  padding: 10px;
+  border-radius: 5px;
+  :hover {
+    background-color: ${TEXT_COLOR_NEUTRAL_5};
+  }
+`;

package/src/components/header/button/MenuButton.jsx

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from '../../../shared-style';
+import * as S from './styles';
+
+export default class MenuButton extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = { hover: false };
+  }
+
+  render() {
+    let { state, props } = this;
+    let overlayStyle = {};
+    if (state.hover)
+      overlayStyle = {
+        ...overlayStyle,
+        display: 'block',
+        background: SharedStyle.TOOLBAR_COLOR.focus
+      };
+
+    return (
+      <S.Control
+        onMouseOver={event => this.setState({ hover: true })}
+        onMouseOut={event => this.setState({ hover: false })}
+        onClick={props.onClick}
+      >
+        {[
+          props.title !== undefined ? (
+            <S.ControlTitle key={props.title}>{props.title}</S.ControlTitle>
+          ) : null,
+          props.icon !== undefined ? (
+            <S.ControlIcon key={props.icon}>{props.icon}</S.ControlIcon>
+          ) : null
+        ]}
+      </S.Control>
+    );
+  }
+}
+
+MenuButton.propTypes = {
+  title: PropTypes.string,
+  hover: PropTypes.bool,
+  active: PropTypes.bool.isRequired,
+  onClick: PropTypes.func
+};

package/src/components/header/button/SaveButton.jsx

@@ -0,0 +1,54 @@
+import { Button } from '@material-ui/core';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { SAVE_DESIGN } from '../../../../src/constants';
+import React, { useEffect } from 'react';
+import CheckIcon from '@material-ui/icons/Check';
+
+export const SaveButton = ({ isSaved, handleSaveBtn, isLoading }) => {
+  if (isSaved) {
+    return (
+      <Button
+        variant="outlined"
+        onClick={handleSaveBtn}
+        disabled={isLoading}
+        style={{
+          pointerEvents: isLoading ? 'none' : 'auto',
+          padding: '8px 20px',
+          color: 'rgba(76, 18, 161, 1)',
+          border: '1px solid rgba(76, 18, 161, 1)',
+          marginLeft: '1rem',
+          textTransform: 'none'
+        }}
+        startIcon={isLoading ? <CircularProgress size={20} /> : <CheckIcon />}
+      >
+        Saved
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      variant="outlined"
+      onClick={handleSaveBtn}
+      disabled={isLoading}
+      style={{
+        pointerEvents: isLoading ? 'none' : 'auto',
+        padding: '8px 20px',
+        color: 'white',
+        backgroundColor: 'rgba(76, 18, 161, 1)',
+        border: '1px solid rgba(76, 18, 161, 1)',
+        marginLeft: '1rem',
+        textTransform: 'none'
+      }}
+      startIcon={
+        isLoading ? (
+          <CircularProgress size={20} />
+        ) : (
+          <img src="/assets/img/svg/headerbar/save.svg" />
+        )
+      }
+    >
+      {SAVE_DESIGN}
+    </Button>
+  );
+};

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

@@ -0,0 +1,181 @@
+import styled from 'styled-components';
+import * as SharedStyle from '../../../shared-style';
+
+export const Main = styled.div`
+  width: 81px;
+  height: 81px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  font-size: 0px;
+  position: relative;
+  cursor: pointer;
+  background: #d3e7e5;
+`;
+// export const Main = styled.div`
+//   width: 81px;
+//   height: 81px;
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   margin-bottom: 20px;
+//   margin-left: 20px;
+//   font-size: 25px;
+//   position: relative;
+//   cursor: pointer;
+//   background: #d3e7e5;
+// `
+
+export const Overlay = styled.div`
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+  width: 100%;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+`;
+
+export const Title = styled.span`
+  position: absolute;
+  top: 50%;
+  left: 0px;
+  width: 100%;
+  color: #fff;
+  text-transform: uppercase;
+  transform: translate(0%, -50%);
+  font-size: 12px;
+`;
+
+export const 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'
+};
+
+export const TooltipPin = {
+  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 const Control = styled.div`
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  // position: fixed;
+  cursor: pointer;
+  background-color: #fff;
+  color: white;
+  border-radius: 20px;
+  margin-right: 20px;
+  margin-top: 16px;
+  right: 260px;
+  bottom: 25px;
+  :hover {
+    background-color: ${SharedStyle.TOOLBAR_COLOR.focus};
+  }
+`;
+export const Direction = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  // position: fixed;
+  cursor: pointer;
+  // background-color: #fff;
+  color: white;
+  border-radius: 32px;
+  margin-right: 20px;
+  right: 260px;
+  bottom: 25px;
+  // :hover{
+  //   background-color: ${SharedStyle.TOOLBAR_COLOR.active};
+  // }
+`;
+export const Toggle = styled.div`
+  height: 41px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  // position: fixed;
+  cursor: pointer;
+  background-image: url(/assets/img/Toggle.png);
+  background-repeat: no-repeat;
+  background-color: #fff;
+  color: white;
+  border-radius: 32px;
+  margin-right: 20px;
+  margin-top: 16px;
+  right: 260px;
+  bottom: 25px;
+  // :hover{
+  //   background-color: ${SharedStyle.TOOLBAR_COLOR.active};
+  // }
+`;
+export const Animation = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  border-radius: inherit;
+  -webkit-box-shadow: 0 0 0 0 #1890ff;
+  box-shadow: 0 0 0 0 #1890ff;
+  -webkit-box-shadow: 0 0 0 0 var(--antd-wave-shadow-color);
+  box-shadow: 0 0 0 0 var(--antd-wave-shadow-color);
+  opacity: 0.2;
+  -webkit-animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1),
+    waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
+  animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1),
+    waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  content: '';
+  pointer-events: none;
+`;
+
+export const ControlTitle = styled.span`
+  margin: 10px;
+  font-size: 12px;
+`;
+export const ControlIcon = styled.div`
+  margin: 5px;
+`;
+export const DirectionIcon = styled.div`
+  position: absolute;
+  margin: 5px;
+  color: #494949;
+`;
+export const ToggleIcon = styled.div`
+  margin: 5px;
+  padding-top: 5px;
+  transition-duration: 0.3s;
+`;

package/src/components/header/export.js

@@ -0,0 +1,5 @@
+import Header from './header';
+
+export default {
+  Header
+};