bamarty/Site-Proximo
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge branch 'master' of https://git.etud.insa-toulouse.fr/bamarty/Site-Proximo into master

Browse source
This commit is contained in:
Florian Ehr 2021-02-19 13:02:25 +01:00
commit e64c3ca948
3 changed files with 85 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/css/Components/selected.css
View file

@ -16,4 +16,48 @@
#selectedActions{
display: flex;
flex-direction:row;
}
}
#confirmationDelete{
display: flex;
height:5vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
#confirmationDeleteTxt{
color:white;
text-align: center;
font-family: 'Wellfleet',cursive;
font-size : 1.5vw
}
#choiceDelete{
margin-top:0.5vh;
display:flex;
justify-content: center;
align-items: center;
font-family: 'Wellfleet', cursive;
font-size:1.3vw;
}
#yesDelete{
background-color:white;
padding:10% 15% 10% 15%;
border-radius: 1.2vw;
cursor: pointer;
border: 2px solid black;
color:black;
margin-right:1vw;
}
#noDelete{
background-color: #0036C1;
padding:10% 15% 10% 15%;
border-radius: 15px;
cursor: pointer;
border: 2px solid black;
color:white;
margin-left:1vw
}

58
src/js/Components/Selected.js
View file

@ -10,7 +10,7 @@ class Selected extends Component {
constructor(props){
super(props)
this.state = {
redirect:false
onDeleteConfirmation:false
}
}
@ -22,31 +22,49 @@ class Selected extends Component {
this.props.updateArticles(1)
}
handleDeleteConfirmation = () => {
this.setState({onDeleteConfirmation:true})
}
handleNoDelete = () => {
this.setState({onDeleteConfirmation:false})
}
render() {
return (
<div id="selectedBox">
{this.props.counter ?
<>
<p id="selectedTxt">Vous avez sélectionné {this.props.counter} articles</p>
<div id = "selectedActions">
<Tooltip title="Enlever" TransitionComponent={Zoom} aria-label="Enlever">
<div>
<Icon onClick={this.minusQuantitySelected} icon={minusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
{this.props.counter ?
this.state.onDeleteConfirmation ?
<div id="confirmationDelete">
{this.props.counter === 1 ?
<div id="confirmationDeleteTxt">Tu veux vraiment supprimer cet article ?</div>
: <div id="confirmationDeleteTxt">Tu veux vraiment supprimer ces {this.props.counter} articles ?</div>}
<div id="choiceDelete">
<div id="yesDelete" onClick={this.props.delete}>Oui</div>
<div id="noDelete" onClick={this.handleNoDelete}>Non</div>
</div>
</Tooltip>
<Tooltip title="Ajouter" TransitionComponent={Zoom} aria-label="Ajouter">
<div>
<Icon onClick={this.plusQuantitySelected} icon={plusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
</div>
: <>
<p id="selectedTxt">Vous avez sélectionné {this.props.counter} articles</p>
<div id = "selectedActions">
<Tooltip title="Enlever" TransitionComponent={Zoom} aria-label="Enlever">
<div>
<Icon onClick={this.minusQuantitySelected} icon={minusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
</div>
</Tooltip>
<Tooltip title="Ajouter" TransitionComponent={Zoom} aria-label="Ajouter">
<div>
<Icon onClick={this.plusQuantitySelected} icon={plusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
</div>
</Tooltip>
<Tooltip title="Supprimer" TransitionComponent={Zoom} aria-label="Supprimer">
<div>
<Icon onClick={this.handleDeleteConfirmation} icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
</div>
</Tooltip>
</div>
</Tooltip>
<Tooltip title="Supprimer" TransitionComponent={Zoom} aria-label="Supprimer">
<div>
<Icon onClick={this.props.delete} icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
</div>
</Tooltip>
</div>
</>
</>
: null}
</div>
);

4
src/js/Views/Stock.js
View file

@ -73,7 +73,7 @@ export default class Stock extends React.Component {
selectArticles = (e,id) => {
let currentElement = e.target;
let iconElement;
let iconElement = e.target;
if (e.target.tagName === "path"){
currentElement = e.target.parentElement
iconElement = currentElement
@ -127,7 +127,7 @@ export default class Stock extends React.Component {
element.style.cssText = "background-color:rgba(255, 21, 21, 0.28);"
break;
case "red&white" :
element.style.cssText = "background-color:rgba(255, 107, 107, 0.28);"
element.style.cssText = "background-color:rgba(255, 139, 139, 0.60);"
break;
default :
break;