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

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

@@ -0,0 +1,151 @@
+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
+} 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};
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+  width: 100%;
+  margin-bottom: 32px;
+`;
+
+export const DialogContents = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 10px 0px;
+  font-size: 14px;
+`;
+
+export const DialogContentSelection = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 300px);
+  overflow-y: scroll;
+`;
+
+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: 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: 25px;
+  width: 25px;
+  transform: rotate(45deg);
+  right: 10px;
+  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: 16px;
+  font-weight: 400;
+  line-height: 22px;
+  height: 44px;
+  text-align: left;
+  padding: 10px;
+  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: 12px;
+  color: ${TEXT_COLOR_NEUTRAL_2};
+`;
+
+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};
+`;

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import Dialog from '@material-ui/core/Dialog';
+import styled from 'styled-components';
+import {
+  TEXT_COLOR_NEUTRAL_1,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR,
+  BG_COLOR_HOVER
+} from '../../../../constants';
+
+const StyledDialog = styled(Dialog)`
+  .MuiDialog-paperWidthSm {
+    border-radius: 10px;
+  }
+`;
+
+const StyledDialogContent = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 25px 30px;
+  padding-bottom: 10px;
+`;
+
+const StyledDialogAction = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+  padding: 10px 30px 25px;
+`;
+
+const StyledButton = 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};
+  }
+`;
+
+const DoorStyleOption = props => {
+  return (
+    <StyledDialog
+      open={props.visible}
+      onClose={() => props.setVisible(!props.visible)}
+    >
+      <StyledDialogContent>{props.content}</StyledDialogContent>
+      <StyledDialogAction>
+        <StyledButton onClick={() => props.handle(true)}>All</StyledButton>
+        <StyledButton onClick={() => props.handle(false)}>Current</StyledButton>
+      </StyledDialogAction>
+    </StyledDialog>
+    // <div style={{ width: '100%', height: '100%', userSelect: 'none' }}>
+    //   <Div>
+    //     <div style={{ backgroundColor: '#1183B7', height: '30px', paddingRight: '6px' }}>
+    //       <div style={{ float: 'right', marginTop: '4px' }} onClick={() => props.handle(false)}>
+    //         <IconButton><FaTimes /></IconButton>
+    //       </div>
+    //     </div>
+    //     <div style={{ fontSize: 14, marginTop: 20 }}>
+    //       <span style={{ margin: 20 }}>{props.content}</span>
+    //     </div>
+    //     <div style={{ fontSize: 12, display: 'flex', flexDirection: 'column', position: 'relative' }}>
+    //     </div>
+    //     <div style={{ display: 'flex', position: 'relative', marginTop: '20px', justifyContent: 'space-evenly' }}>
+    //       <div style={{ width: '70px', marginTop: '15px', cursor: 'pointer' }} onClick={() => props.handle(true)}>
+    //         <img width={'80px'} style={{ float: 'right' }} src={'/assets/img/svg/toolbar/use_button.svg'} />
+    //         <ButtonTitle1>
+    //           {'All'}
+    //         </ButtonTitle1>
+    //       </div>
+    //       <div style={{ width: '70px', marginTop: '15px', cursor: 'pointer' }} onClick={() => props.handle(false)}>
+    //         <img width={'80px'} style={{ float: 'right' }} src={'/assets/img/svg/toolbar/cancel_button.svg'} />
+    //         <ButtonTitle2>
+    //           {'Current'}
+    //         </ButtonTitle2>
+    //       </div>
+    //     </div>
+    //   </Div>
+    // </div>
+  );
+};
+
+export default DoorStyleOption;