shop: remove animation from backlog #83
@ -4,7 +4,7 @@
|
||||
padding: 1em 1em 0;
|
||||
}
|
||||
|
||||
.simu-clone {
|
||||
.simclone {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -2,7 +2,7 @@
|
||||
|
||||
import React from "react";
|
||||
import axios from "axios";
|
||||
import ReactDOM from "react-dom";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import PropTypes from "prop-types";
|
||||
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
@ -10,12 +10,18 @@ import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
const data = window.shop_data;
|
||||
|
||||
const productStyle = (style, snapshot, removeAnim, hovered, selected) => {
|
||||
const productStyle = (style, snapshot, removeAnim, hovered, selected, cart=false) => {
|
||||
const custom = {
|
||||
opacity: snapshot.isDragging ? .7 : 1,
|
||||
backgroundColor: (hovered || selected) ? '#eae7f7' : 'initial',
|
||||
};
|
||||
|
||||
if (!cart && snapshot.draggingOver == null && // hack for backlog
|
||||
((!snapshot.isDragging) // prevent next elements from animation
|
||||
|| (snapshot.isDragging && snapshot.isDropAnimating))) { // prevent dragged element from weird animation
|
||||
style.transform = "none";
|
||||
}
|
||||
|
||||
if (!snapshot.isDropAnimating) {
|
||||
return { ...style, ...custom};
|
||||
}
|
||||
@ -314,10 +320,10 @@ class Layout extends React.PureComponent {
|
||||
) : null}
|
||||
|
||||
|
||||
<div class={`modal fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'block':'none'}} id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body rfqFeedback">
|
||||
<div className={`modal fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'block':'none'}} id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<div className="modal-body rfqFeedback">
|
||||
|
||||
<div className="d-flex w-100">
|
||||
|
||||
@ -344,8 +350,8 @@ class Layout extends React.PureComponent {
|
||||
{RFQBodyType === 'import' ? (
|
||||
<div className="w-100">
|
||||
|
||||
<form className="form w-100">
|
||||
<div className="form-group">
|
||||
<form className="w-100">
|
||||
<div className="mb-3">
|
||||
<p className="small">
|
||||
Input the JSON description below. Should be something like:
|
||||
<br />
|
||||
@ -353,7 +359,7 @@ class Layout extends React.PureComponent {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="form-group w-100">
|
||||
<div className="mb-3 w-100">
|
||||
<textarea
|
||||
onChange={this.handleCustomConfig}
|
||||
value={this.state.customconf}
|
||||
@ -362,15 +368,15 @@ class Layout extends React.PureComponent {
|
||||
placeholder="Input JSON description here." />
|
||||
</div>
|
||||
{this.state.error ? (
|
||||
<div className="form-group">
|
||||
<div className="mb-3">
|
||||
<p className="text-danger">{this.state.error}</p>
|
||||
</div>
|
||||
) : null}
|
||||
</form>
|
||||
|
||||
<div className="d-flex flex-column flex-sm-row justify-content-end">
|
||||
<a type="button" onClick={onClickCloseRFQFeedback} class="btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 me-sm-2">Close</a>
|
||||
<a type="button" onClick={this.handleClickLoad} class={`btn btn-sm btn-primary m-0 ms-sm-2 ${this.state.error ? 'disabled':''}`}>Load configuration</a>
|
||||
<a type="button" onClick={onClickCloseRFQFeedback} className="btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 me-sm-2">Close</a>
|
||||
<a type="button" onClick={this.handleClickLoad} className={`btn btn-sm btn-primary m-0 ms-sm-2 ${this.state.error ? 'disabled':''}`}>Load configuration</a>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
@ -406,6 +412,7 @@ class ProductItem extends React.PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
id: PropTypes.string.isRequired,
|
||||
index: PropTypes.number.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
name_codename: PropTypes.string,
|
||||
price: PropTypes.number.isRequired,
|
||||
@ -433,6 +440,7 @@ class ProductItem extends React.PureComponent {
|
||||
render() {
|
||||
const {
|
||||
id,
|
||||
index,
|
||||
name,
|
||||
name_codename,
|
||||
price,
|
||||
@ -453,7 +461,7 @@ class ProductItem extends React.PureComponent {
|
||||
|
||||
const render_datasheet_link = (datasheet_file && datasheet_name && (
|
||||
<div className="ds">
|
||||
<span class='doc-icon'></span>
|
||||
<span className='doc-icon'></span>
|
||||
<a href={datasheet_file} target="_blank" rel="noopener noreferrer">
|
||||
{datasheet_name}
|
||||
</a>
|
||||
@ -464,7 +472,7 @@ class ProductItem extends React.PureComponent {
|
||||
<section className="productItem">
|
||||
|
||||
<div className="content">
|
||||
<h3 style={{ 'margin-bottom': name_codename ? '5px' : '20px'}}>{name}</h3>
|
||||
<h3 style={{ 'marginBottom': name_codename ? '5px' : '20px'}}>{name}</h3>
|
||||
{name_codename ? (
|
||||
<p>{name_codename}</p>
|
||||
) : null }
|
||||
@ -482,7 +490,7 @@ class ProductItem extends React.PureComponent {
|
||||
<img src="/images/shop/icon-add.svg" alt="add" />
|
||||
</button>
|
||||
|
||||
<Draggable draggableId={id}>
|
||||
<Draggable draggableId={id} index={index}>
|
||||
{(provided, snapshot) => (
|
||||
<React.Fragment>
|
||||
<img
|
||||
@ -678,6 +686,7 @@ class ProductCartItem extends React.PureComponent {
|
||||
true,
|
||||
hovered ? true : false,
|
||||
model.selected ? true : false,
|
||||
true
|
||||
)}}
|
||||
onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
|
||||
onMouseLeave={this.handleOnMouseLeaveRemoveItem.bind(this, index)}
|
||||
@ -1025,11 +1034,10 @@ class OrderPanel extends React.PureComponent {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
<button
|
||||
className="btn btn-sm btn-outline-primary m-0 mb-2"
|
||||
style={{'cursor': 'pointer'}}
|
||||
value="Import JSON"
|
||||
onClick={onClickOpenImport} />
|
||||
onClick={onClickOpenImport}>Import JSON</button>
|
||||
</div>
|
||||
|
||||
{isMobile ? (
|
||||
@ -1255,13 +1263,12 @@ class OrderForm extends React.PureComponent {
|
||||
placeholder="Additional notes" />
|
||||
|
||||
<div className="d-flex flex-column flex-sm-row justify-content-between">
|
||||
<input
|
||||
<button
|
||||
className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
|
||||
style={{'cursor': 'pointer', 'fontWeight': '700'}}
|
||||
value="Show JSON"
|
||||
onClick={onClickShow} />
|
||||
onClick={onClickShow}>Show JSON</button>
|
||||
|
||||
<input className="btn btn-primary w-100 m-0 ms-sm-2" type="submit" value={`${isProcessing ? 'Processing ...' : 'Request quote'}`} />
|
||||
<button className="btn btn-primary w-100 m-0 ms-sm-2" type="submit">{`${isProcessing ? 'Processing ...' : 'Request quote'}`}</button>
|
||||
</div>
|
||||
{/*This will open an email window. Send the email to make your request.*/}
|
||||
</form>
|
||||
@ -1512,9 +1519,10 @@ class Backlog extends React.PureComponent {
|
||||
const ordered_groups = data.categories.map(groupItem => ({ name: groupItem.name,
|
||||
items: groupItem.itemIds.map(itemId => items[itemId])
|
||||
}));
|
||||
let item_index = -1;
|
||||
const groups = ordered_groups.map((group, g_index) => {
|
||||
return (
|
||||
<div className="accordion-item">
|
||||
<div className="accordion-item" key={`${group.name}`}>
|
||||
<h2 className="accordion-header">
|
||||
<button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target={`#collapse${g_index}`} aria-expanded="true" aria-controls={`collapse${g_index}`}>
|
||||
@ -1524,10 +1532,13 @@ class Backlog extends React.PureComponent {
|
||||
<div id={`collapse${g_index}`} className="accordion-collapse collapse" aria-labelledby="headingOne"
|
||||
data-bs-parent="#accordion_categories">
|
||||
<div className="accordion-body">
|
||||
{group.items.map(item => (
|
||||
{group.items.map(item => {
|
||||
item_index++;
|
||||
return (
|
||||
<ProductItem
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
index={item_index}
|
||||
name={`${item.name_number} ${item.name}`}
|
||||
name_codename={item.name_codename}
|
||||
price={item.price}
|
||||
@ -1538,7 +1549,7 @@ class Backlog extends React.PureComponent {
|
||||
datasheet_name={item.datasheet_name}
|
||||
onClickAddItem={onClickAddItem}
|
||||
></ProductItem>
|
||||
))}
|
||||
)})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1961,6 +1972,7 @@ class Shop extends React.PureComponent {
|
||||
switch(source.droppableId) {
|
||||
|
||||
case 'backlog':
|
||||
if (source.droppableId !== destination.droppableId) {
|
||||
this.setState({
|
||||
...this.state,
|
||||
newCardJustAdded: newAdded ? true : false,
|
||||
@ -1978,6 +1990,7 @@ class Shop extends React.PureComponent {
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
case destination.droppableId:
|
||||
@ -2026,7 +2039,7 @@ class Shop extends React.PureComponent {
|
||||
} = this.state;
|
||||
|
||||
const itemsCloned = Array.from(newItems);
|
||||
const itemsData = {};
|
||||
const itemsData = [];
|
||||
const rules = {};
|
||||
|
||||
|
||||
@ -2310,9 +2323,7 @@ class Shop extends React.PureComponent {
|
||||
...this.state.columns,
|
||||
cart: {
|
||||
...this.state.columns.cart,
|
||||
itemsData: {
|
||||
...itemsData,
|
||||
},
|
||||
itemsData: itemsData,
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
@ -2431,8 +2442,4 @@ class Shop extends React.PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ReactDOM.render(
|
||||
<Shop data={data} />,
|
||||
document.querySelector('#root-shop'),
|
||||
);
|
||||
createRoot(document.querySelector('#root-shop')).render(<Shop data={data} />);
|
||||
|
||||
@ -921,7 +921,7 @@ const shop_data = {
|
||||
id: 'cart',
|
||||
title: 'Cart',
|
||||
items: [],
|
||||
itemsData: {},
|
||||
itemsData: [],
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
|
||||
<div class="card-body p-3 p-md-5 card-artiq">
|
||||
|
||||
<div class="col-12 col-md-6 pl-0 pr-0">
|
||||
<div class="col-12 col-md-6 ps-0 pe-0">
|
||||
|
||||
<h5 class="card-title">ARTIQ</h5>
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
|
||||
<div class="card-body p-3 p-md-5 card-jobs">
|
||||
|
||||
<div class="col-12 col-md-6 pl-0 pr-0">
|
||||
<div class="col-12 col-md-6 ps-0 pe-0">
|
||||
|
||||
<h5 class="card-title">Jobs</h5>
|
||||
|
||||
@ -104,7 +104,7 @@
|
||||
|
||||
<div class="card-body p-3 p-md-5 card-gateware">
|
||||
|
||||
<div class="col-12 col-md-6 pl-0 pr-0">
|
||||
<div class="col-12 col-md-6 ps-0 pe-0">
|
||||
|
||||
<h5 class="card-title">Gateware and system-on-chip design</h5>
|
||||
|
||||
|
||||
@ -26,26 +26,12 @@
|
||||
<script>
|
||||
(function () {
|
||||
function deviceIsMobile() {
|
||||
// https://coderwall.com/p/i817wa/one-line-function-to-detect-mobile-devices-with-javascript
|
||||
return (
|
||||
(typeof window.orientation !== 'undefined') ||
|
||||
navigator.userAgent.match(/Android/i) ||
|
||||
navigator.userAgent.match(/webOS/i) ||
|
||||
navigator.userAgent.match(/iPhone/i) ||
|
||||
navigator.userAgent.match(/iPad/i) ||
|
||||
navigator.userAgent.match(/iPod/i) ||
|
||||
navigator.userAgent.match(/BlackBerry/i) ||
|
||||
navigator.userAgent.match(/Windows Phone/i) ||
|
||||
(navigator.userAgent.indexOf('IEMobile') !== -1)
|
||||
);
|
||||
};
|
||||
// Do not rely on User-Agent: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent
|
||||
// Be in sync with css/order-hardware.css
|
||||
return window.innerWidth < 768;
|
||||
}
|
||||
|
||||
window.deviceIsMobile = deviceIsMobile;
|
||||
|
||||
return;
|
||||
if (deviceIsMobile()) {
|
||||
alert('The online crate configuration tool is not available for mobile browsers yet. Please use a desktop computer or email us at sales@m-l****.hk to get a quote.');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
<img src="{{ get_url(path=src, cachebust=true) }}" width="40px" height="40px">
|
||||
|
||||
<p class="pl-3">
|
||||
<p class="pe-3">
|
||||
{{ body | markdown | safe }}
|
||||
</p>
|
||||
|
||||
|
||||
@ -17,6 +17,8 @@ module.exports = {
|
||||
}
|
||||
]
|
||||
},
|
||||
//devtool: "inline-source-map",
|
||||
//mode: "development"
|
||||
devtool: false,
|
||||
mode: "production"
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user