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; z-index: 10;
} }
.feedback-add-success {
display: none;
}
/* /*
##Device = Tablets, Ipads (portrait) ##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px ##Screen = B/w 768px to 1024px
@ -171,6 +175,19 @@
##Screen = B/w 481px to 767px ##Screen = B/w 481px to 767px
*/ */
@media (min-width: 481px) and (max-width: 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 { .dropdown-item {
font-size: .75em; font-size: .75em;
} }
@ -306,7 +323,7 @@
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, .3);
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
@ -355,6 +372,19 @@
##Screen = B/w 320px to 479px ##Screen = B/w 320px to 479px
*/ */
@media (min-width: 320px) and (max-width: 480px) { @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 { .dropdown-item {
font-size: .75em; font-size: .75em;
} }
@ -409,7 +439,7 @@
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, .3);
top: 0; top: 0;
bottom: 0; bottom: 0;
} }

View File

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