feat(mobile/shop): Adds feedback when add new card from backlog

This commit is contained in:
sovanna 2020-01-22 15:47:10 +01:00
parent a27c7370d6
commit 9d03f68ec6
2 changed files with 69 additions and 9 deletions

View File

@ -8,6 +8,10 @@
z-index: 10;
}
.feedback-add-success {
display: none;
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
@ -171,6 +175,19 @@
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
.feedback-add-success {
background-color: green;
display: block;
position: fixed;
top: 20px;
right: 20px;
padding: 1em;
z-index: 100000;
color: white;
border-radius: 10px;
box-shadow: 0 0 5px 3px;
}
.dropdown-item {
font-size: .75em;
}
@ -306,7 +323,7 @@
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, .3);
top: 0;
bottom: 0;
z-index: 10;
@ -355,6 +372,19 @@
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
.feedback-add-success {
background-color: green;
display: block;
position: fixed;
top: 20px;
right: 20px;
padding: 1em;
z-index: 100000;
color: white;
border-radius: 10px;
box-shadow: 0 0 5px 3px;
}
.dropdown-item {
font-size: .75em;
}
@ -409,7 +439,7 @@
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, .3);
top: 0;
bottom: 0;
}

View File

@ -137,6 +137,8 @@ class Layout extends React.PureComponent {
aside: PropTypes.any,
main: PropTypes.any,
mobileSideMenuShouldOpen: PropTypes.bool,
isMobile: PropTypes.bool,
newCardJustAdded: PropTypes.bool,
onClickToggleMobileSideMenu: PropTypes.func,
};
}
@ -152,6 +154,8 @@ class Layout extends React.PureComponent {
aside,
main,
mobileSideMenuShouldOpen,
isMobile,
newCardJustAdded,
onClickToggleMobileSideMenu
} = this.props;
@ -166,6 +170,12 @@ class Layout extends React.PureComponent {
<section className="main">{main}</section>
)}
{isMobile && newCardJustAdded ? (
<div className="feedback-add-success">
added
</div>
) : null}
</div>
);
}
@ -196,9 +206,9 @@ class ProductItem extends React.PureComponent {
this.handleOnClickAddItem = this.handleOnClickAddItem.bind(this);
}
handleOnClickAddItem(index, e) {
handleOnClickAddItem(index, tap, e) {
if (this.props.onClickAddItem) {
this.props.onClickAddItem(index);
this.props.onClickAddItem(index, tap);
}
e.preventDefault();
}
@ -235,7 +245,7 @@ class ProductItem extends React.PureComponent {
<div className="content">
<button onClick={this.handleOnClickAddItem.bind(this, index)}>
<button onClick={this.handleOnClickAddItem.bind(this, index, true)}>
<img src="/images/shop/icon-add.svg" alt="add" />
</button>
@ -1158,6 +1168,8 @@ class Shop extends React.PureComponent {
this.handleClickSubmit = this.handleClickSubmit.bind(this);
this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
this.timer = null;
}
componentDidMount() {
@ -1195,6 +1207,18 @@ class Shop extends React.PureComponent {
prevState.columns.cart.items,
this.state.columns.cart.items);
}
if (this.state.newCardJustAdded) {
this.timer = setTimeout(() => {
this.setState({
newCardJustAdded: false,
});
}, 2000);
}
}
componentWillUnmount() {
clearTimeout(this.timer);
}
handleCrateModeChange(mode) {
@ -1245,7 +1269,7 @@ class Shop extends React.PureComponent {
});
}
handleClickAddItem(index) {
handleClickAddItem(index, tap) {
const source = {
droppableId: 'backlog',
index: index,
@ -1258,8 +1282,8 @@ class Shop extends React.PureComponent {
this.handleOnDragEnd({
source,
destination,
draggableId: null,
});
draggableId: null
}, tap);
}
handleToggleItemProgress(index, show) {
@ -1374,7 +1398,7 @@ class Shop extends React.PureComponent {
a.click();
}
handleOnDragEnd(result) {
handleOnDragEnd(result, newAdded) {
const {
source,
destination,
@ -1385,6 +1409,7 @@ class Shop extends React.PureComponent {
if (source.droppableId === 'cart') {
this.setState({
...this.state,
newCardJustAdded: false,
columns: {
...this.state.columns,
[source.droppableId]: {
@ -1406,6 +1431,7 @@ class Shop extends React.PureComponent {
case 'backlog':
this.setState({
...this.state,
newCardJustAdded: newAdded ? true : false,
columns: {
...this.state.columns,
[destination.droppableId]: {
@ -1425,6 +1451,7 @@ class Shop extends React.PureComponent {
case destination.droppableId:
this.setState({
...this.state,
newCardJustAdded: false,
columns: {
...this.state.columns,
[destination.droppableId]: {
@ -1735,6 +1762,7 @@ class Shop extends React.PureComponent {
columns,
rules,
mobileSideMenuShouldOpen,
newCardJustAdded,
} = this.state;
const isMobile = window.deviceIsMobile();
@ -1745,6 +1773,8 @@ class Shop extends React.PureComponent {
<Layout
className="shop"
mobileSideMenuShouldOpen={mobileSideMenuShouldOpen}
isMobile={isMobile}
newCardJustAdded={newCardJustAdded}
onClickToggleMobileSideMenu={this.handleClickToggleMobileSideMenu}
aside={
<Backlog