occheung
/
web2019
forked from M-Labs/web2019
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(issue19/UI): Allows to show configuration

Browse Source
master
sovanna 3 years ago
parent 2825779c96
commit 413703fd96
3 changed files with 88 additions and 29 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 22
      sass/css/_shop.scss
  2. 12
      static/css/order-hardware.css
  3. 83
      static/js/shop.jsx

22
sass/css/_shop.scss
Unescape View File

@ -17,14 +17,14 @@ button {
align-items: center;
padding: 2rem 3rem;
text-align: center;
position: absolute;
width: 350px;
/*position: absolute;
width: 350px;*/
background: white;
left: calc(100%/2 - 350px/2);
/*left: calc(100%/2 - 350px/2);*/
-webkit-box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75);
box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75);
top: calc(50% - 50px);
/*top: calc(50% - 50px);*/
border: 1px solid $brand-color;
font-size: .9rem;
@ -280,6 +280,7 @@ button {
width: 90%;
input:not([type="submit"]),
input:not(.submit),
textarea {
border: 1px solid $color-secondary;
border-radius: 3px;
@ -288,11 +289,11 @@ button {
outline: none;
}
input[type="submit"] {
background-color: $btn-primary-2;
input[type="submit"],
.btn-cla {
/*background-color: $btn-primary-2;*/
font-weight: 700;
color: white;
padding: .7rem;
border: 0;
border-radius: 3px;
outline: none;
@ -306,6 +307,13 @@ button {
.errorField {
border: 1px solid #e53e3e !important;
}
.btn-outline-primary,
.btn-outline-primary:hover {
color: $btn-primary-2;
border-color: $btn-primary-2;
background-color: inherit;
}
}
}
}

12
static/css/order-hardware.css
Unescape View File

@ -171,9 +171,9 @@
font-size: .85rem;
}
#root-shop .panel .summary>.summary-form form input[type="submit"] {
/*#root-shop .panel .summary>.summary-form form input[type="submit"] {
margin-bottom: 1em;
}
}*/
#root-shop .panel .summary>.summary-price,
#root-shop .panel .summary>.summary-form {
width: 100%;
@ -278,9 +278,9 @@
font-size: .85rem;
}
#root-shop .panel .summary>.summary-form form input[type="submit"] {
/*#root-shop .panel .summary>.summary-form form input[type="submit"] {
margin-bottom: 1em;
}
}*/
#root-shop .mobileBtnDisplaySideMenu {
background-color: #0d3547;
@ -532,9 +532,9 @@
font-size: .85rem;
}
#root-shop .panel .summary>.summary-form form input[type="submit"] {
/*#root-shop .panel .summary>.summary-form form input[type="submit"] {
margin-bottom: 1em;
}
}*/
#root-shop .mobileBtnDisplaySideMenu {
background-color: #0d3547;

83
static/js/shop.jsx
Unescape View File

@ -143,6 +143,7 @@ class Layout extends React.PureComponent {
onClickToggleMobileSideMenu: PropTypes.func,
onClickCloseRFQFeedback: PropTypes.func,
RFQBodyType: PropTypes.string,
RFQBodyOrder: PropTypes.string,
};
}
@ -163,6 +164,7 @@ class Layout extends React.PureComponent {
onClickCloseRFQFeedback,
showRFQFeedback,
RFQBodyType,
RFQBodyOrder,
} = this.props;
return (
@ -188,32 +190,42 @@ class Layout extends React.PureComponent {
<div class="modal-content">
<div class="modal-body rfqFeedback">
{RFQBodyType === 'email' ? (
<div className="d-flex">
<div className="d-flex">
<div>
<img width="30px" src="/images/shop/icon-done.svg" alt="close" />
</div>
{RFQBodyType === 'email' ? (
<div className="d-flex">
<div style={{'padding': '0 .5em'}}>
We've received your request and will be in contact soon.
</div>
<div>
<img width="30px" src="/images/shop/icon-done.svg" alt="close" />
</div>
<div style={{'padding': '0 .5em'}}>
We've received your request and will be in contact soon.
</div>
<div>
<button onClick={onClickCloseRFQFeedback}>
<img src="/images/shop/icon-close.svg" alt="close" />
</button>
</div>
) : null }
{RFQBodyType === 'show' ? (
<p>
{RFQBodyOrder}
</p>
) : null}
<div>
<button onClick={onClickCloseRFQFeedback}>
<img src="/images/shop/icon-close.svg" alt="close" />
</button>
</div>
) : null }
</div>
</div>
</div>
</div>
</div>
<div className={`modal-backdrop fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'initial':'none'}}></div>
<div onClick={onClickCloseRFQFeedback} className={`modal-backdrop fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'initial':'none'}}></div>
</div>
);
@ -999,6 +1011,10 @@ class OrderForm extends React.PureComponent {
handleSubmit,
} = this;
const {
onClickShow,
} = this.props;
const {
email,
note,
@ -1040,7 +1056,17 @@ class OrderForm extends React.PureComponent {
rows="5"
placeholder="Additional notes" />
<input style={{'backgroundColor': `${isProcessingComplete ? 'gray':'#715ec7'}`}} disabled={isProcessingComplete} type="submit" value={`${isProcessing ? 'Processing ...' : 'Request quote'}`} />
<div className="d-flex flex-column flex-sm-row justify-content-between">
<input
className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 mr-sm-2"
style={{'cursor': 'pointer', 'fontWeight': '700'}}
value="Show configurations"
onClick={onClickShow} />
<input className="btn btn-primary w-100 m-0 ml-sm-2" style={Object.assign({}, isProcessingComplete ? {
'backgroundColor': 'gray',
} : {})} disabled={isProcessingComplete} type="submit" value={`${isProcessing ? 'Processing ...' : 'Request quote'}`} />
</div>
{/*This will open an email window. Send the email to make your request.*/}
</form>
@ -1368,6 +1394,7 @@ class Shop extends React.PureComponent {
this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this);
this.handleClickShowOrder = this.handleClickShowOrder.bind(this);
this.timer = null;
}
@ -1569,6 +1596,27 @@ class Shop extends React.PureComponent {
});
}
handleClickShowOrder() {
const crate = {
items: [],
type: this.state.currentMode,
};
const clonedCart = Array.from(this.state.columns.cart.items);
for (const i in clonedCart) {
const item = clonedCart[i];
crate.items.push({
'pn': item.name_number,
});
}
this.setState({
isProcessing: false,
shouldShowRFQFeedback: true,
RFQBodyType: 'show',
RFQBodyOrder: JSON.stringify(crate),
});
}
handleClickSubmit(note, email) {
const crate = {
items: [],
@ -2028,6 +2076,7 @@ class Shop extends React.PureComponent {
isProcessing,
shouldShowRFQFeedback,
RFQBodyType,
RFQBodyOrder,
isProcessingComplete,
} = this.state;
@ -2039,6 +2088,7 @@ class Shop extends React.PureComponent {
<Layout
showRFQFeedback={shouldShowRFQFeedback}
RFQBodyType={RFQBodyType}
RFQBodyOrder={RFQBodyOrder}
className="shop"
mobileSideMenuShouldOpen={mobileSideMenuShouldOpen}
isMobile={isMobile}
@ -2104,7 +2154,8 @@ class Shop extends React.PureComponent {
isProcessingComplete={isProcessingComplete}
processingComplete={this.handleProcessingComplete}
isProcessing={isProcessing}
onClickSubmit={this.handleClickSubmit}>
onClickSubmit={this.handleClickSubmit}
onClickShow={this.handleClickShowOrder}>
</OrderForm>
}>
</OrderPanel>

Write Preview
Loading…
Cancel
Save