add colors for mentions

pull/4/head
Clement G 5 years ago committed by guhur
parent f1b59a7613
commit 0af41557bf

@ -23,7 +23,15 @@ import {faPlus, faTrashAlt, faCheck } from '@fortawesome/free-solid-svg-icons';
//TODO : variable de config dans un fichier à part (avec les mentions, le min/max de mentions, le nombre max de candidats, les maxlength,l'url api, etc ...)
const mentions = ["Excellent","Trés Bien","Bien","Assez Bien","Passable","Insuffisant","A Rejeter"];
const mentions = [
{label:"Excellent", color:"#015411"},
{label:"Trés Bien", color:"#019812"},
{label:"Bien", color:"#6bca24"},
{label:"Assez Bien", color:"#ffb200"},
{label:"Passable", color:"#ff5d00"},
{label:"Insuffisant", color:"#b20616"},
{label:"A Rejeter", color:"#6f0214"},
];
const DragHandle = sortableHandle(({children}) => <span className="input-group-text indexNumber">{children}</span>);
@ -230,7 +238,7 @@ class CreateElection extends Component {
</Col>
<Col xs="12" md="" >
{ mentions.map((mention,i) => {
return <span className="badge badge-light mr-2 mt-2" style={{opacity:(i<this.state.nbMentions)?1:0.3}}>{mention}</span>
return <span className="badge badge-light mr-2 mt-2" style={{backgroundColor:mention.color,color:"#fff",opacity:(i<this.state.nbMentions)?1:0.3}} >{mention.label}</span>
})
}
</Col>
@ -261,7 +269,7 @@ class CreateElection extends Component {
</ul></div>
<div className="text-white bg-primary p-1">Mentions :</div>
<div className="p-1 pl-3">{ mentions.map((mention,i) => {
return (i<this.state.nbMentions)?<span key={i} className="badge badge-light mr-2 mt-2">{mention}</span>:<span key={i}/>
return (i<this.state.nbMentions)?<span key={i} className="badge badge-light mr-2 mt-2" style={{backgroundColor:mention.color,color:"#fff"}}>{mention.label}</span>:<span key={i}/>
})
}</div>
</div>

@ -1,12 +1,22 @@
import React, {Component} from "react";
import {Button, Col, Container, Row} from "reactstrap";
import {ToastContainer} from "react-toastify";
import {toast, ToastContainer} from "react-toastify";
import ButtonWithConfirm from "../form/ButtonWithConfirm";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faCheck} from "@fortawesome/free-solid-svg-icons";
//TODO : variable de config dans un fichier à part (avec les mentions, le min/max de mentions, le nombre max de candidats, les maxlength,l'url api, etc ...)
const mentions = ["Excellent","Trés Bien","Bien","Assez Bien","Passable","Insuffisant","A Rejeter"];
const mentions = [
{label:"Excellent", color:"#015411"},
{label:"Trés Bien", color:"#019812"},
{label:"Bien", color:"#6bca24"},
{label:"Assez Bien", color:"#ffb200"},
{label:"Passable", color:"#ff5d00"},
{label:"Insuffisant", color:"#b20616"},
{label:"A Rejeter", color:"#6f0214"},
];
class Vote extends Component {
@ -64,10 +74,24 @@ class Vote extends Component {
}
handleMentionClick= (event) => {
let data={
id:parseInt(event.currentTarget.getAttribute("data-id")),
value:parseInt(event.currentTarget.value)
};
//remove candidate
let ratedCandidates = this.state.ratedCandidates.filter(ratedCandidate => ratedCandidate.id !== data.id);
ratedCandidates.push(data);
this.setState({ratedCandidates:ratedCandidates});
};
handleSubmit= (event) => {
handleSubmitWithoutAllRate = () => {
toast.error("Vous devez évaluer l'ensemble des propositions/candidats !", {
position: toast.POSITION.TOP_CENTER
});
};
handleSubmit= (event) => {
event.preventDefault();
};
@ -83,7 +107,7 @@ handleSubmit= (event) => {
<Row className="cardVote d-none d-lg-flex" >
<Col xs={this.state.colSizeCandidateXs} md={this.state.colSizeCandidateMd} lg={this.state.colSizeCandidateLg} ><h5 >&nbsp;</h5></Col>
{ mentions.map((mention,j) => {
return (j<this.state.nbMentions)?<Col xs={this.state.colSizeMentionXs} md={this.state.colSizeMentionMd} lg={this.state.colSizeMentionLg} key={j} className="text-center"><h6><small className="nowrap">{mention}</small></h6></Col>:null
return (j<this.state.nbMentions)?<Col xs={this.state.colSizeMentionXs} md={this.state.colSizeMentionMd} lg={this.state.colSizeMentionLg} key={j} className="text-center" style={{lineHeight:2}}><small className="nowrap bold badge" style={{backgroundColor:mention.color,color:"#fff"}}>{mention.label}</small></Col>:null
})
}
</Row>
@ -92,12 +116,30 @@ handleSubmit= (event) => {
this.state.candidates.map((candidate,i) => {
return <Row key={i} className="cardVote">
<Col xs={this.state.colSizeCandidateXs} md={this.state.colSizeCandidateMd} lg={this.state.colSizeCandidateLg} ><h5 >{candidate.label}</h5><hr className="d-lg-none" /></Col>
<Col xs={this.state.colSizeCandidateXs} md={this.state.colSizeCandidateMd} lg={this.state.colSizeCandidateLg} >
<h5 className="m-0">{candidate.label}</h5><hr className="d-lg-none" /></Col>
{ mentions.map((mention,j) => {
return (j<this.state.nbMentions)?<Col xs={this.state.colSizeMentionXs} md={this.state.colSizeMentionMd} lg={this.state.colSizeMentionLg} key={j} className="text-lg-center"><input type="radio" name={"candidate"+i} id={"candidateMention"+i+"-"+j} /><label
htmlFor={"candidateMention"+i+"-"+j}>
<small className="nowrap d-lg-none ml-2">{mention}</small>
</label></Col>:null
return (j<this.state.nbMentions)?<Col
xs={this.state.colSizeMentionXs} md={this.state.colSizeMentionMd} lg={this.state.colSizeMentionLg} key={j}
className="text-lg-center"
>
<label htmlFor={"candidateMention"+i+"-"+j} className="check"
>
<small className="nowrap d-lg-none ml-2 bold badge"
style={
this.state.ratedCandidates.find(function(ratedCandidat){return JSON.stringify(ratedCandidat) === JSON.stringify({id:candidate.id,value:j})})?
{backgroundColor:mention.color,color:"#fff"}:{backgroundColor:'transparent',color:"#000"}
}
>{mention.label}</small>
<input type="radio" name={"candidate"+i} id={"candidateMention"+i+"-"+j} data-index={i} data-id={candidate.id} value={j} onClick={this.handleMentionClick} defaultChecked={this.state.ratedCandidates.find(function(element) { return JSON.stringify(element) === JSON.stringify({id:candidate.id,value:j})})} />
<span className="checkmark" style={
this.state.ratedCandidates.find(function(ratedCandidat){return JSON.stringify(ratedCandidat) === JSON.stringify({id:candidate.id,value:j})})?
{backgroundColor:mention.color,color:"#fff"}:{backgroundColor:'transparent',color:"#000"}
}/>
</label></Col>:null
})
}
</Row>
@ -106,7 +148,9 @@ handleSubmit= (event) => {
}
<Row>
<Col className="text-center" ><Button type="button" className="btn btn-dark "><FontAwesomeIcon icon={faCheck} className="mr-2" />Valider</Button></Col>
<Col className="text-center" >
{(this.state.ratedCandidates.length!==this.state.candidates.length)?<Button type="button" onClick={this.handleSubmitWithoutAllRate} className="btn btn-dark "><FontAwesomeIcon icon={faCheck} className="mr-2" />Valider</Button>:<Button type="submit" className="btn btn-success "><FontAwesomeIcon icon={faCheck} className="mr-2" />Valider</Button>}
</Col>
</Row>
</form>

@ -27,6 +27,10 @@ $theme-colors: (
line-height:1;
}
.bold{
font-weight:bold;
}
.logo-text > h1 > small{
display:block;
letter-spacing: 0.09em;
@ -105,3 +109,169 @@ li.sortable{
margin:10px 0;
}
.cardVote.row:hover{
background-color:$mv-light-color-hover;
}
/* checkbox */
/* The radio */
.radio {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 12px;
cursor: pointer;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
/* Hide the browser's default radio button */
.radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkround {
position: absolute;
top: 6px;
left: 0;
height: 20px;
width: 20px;
background-color: #fff ;
border-color:$mv-blue-color;
border-style:solid;
border-width:2px;
border-radius: 50%;
}
/* When the radio button is checked, add a blue background */
.radio input:checked ~ .checkround {
background-color: #fff;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkround:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.radio input:checked ~ .checkround:after {
display: block;
}
/* Style the indicator (dot/circle) */
.radio .checkround:after {
left: 2px;
top: 2px;
width: 12px;
height: 12px;
border-radius: 50%;
background:$mv-blue-color;
}
/* The check */
.check {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
padding-right: 15px;
cursor: pointer;
font-size: 18px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.check input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
margin-left: calc( 50% - 12px);
top: 0;
left: 0;
height: 24px;
width: 24px;
background-color: #fff ;
border-color:$mv-blue-color;
border-style:solid;
border-width:2px;
}
@include media-breakpoint-down(md) {
.checkmark {
position: absolute;
margin-left: 0;
top: 3px;
}
}
/* When the checkbox is checked, add a blue background */
.check input:checked ~ .checkmark {
background-color: #fff ;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.check input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.check .checkmark:after {
left: 5px;
top: 1px;
width: 10px;
height: 15px;
border: solid ;
border-color:#fff;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
cursor:pointer;
}
.cust-btn{
margin-bottom: 10px;
background-color: $mv-blue-color;
border-width: 2px;
border-color: $mv-blue-color;
color: #fff;
}
.cust-btn:hover{
border-color: $mv-blue-color;
background-color: #fff;
color: $mv-blue-color;
border-radius: 20px;
transform-style: 2s;
}

@ -2,6 +2,7 @@
$mv-blue-color: #2A43A0;
$mv-red-color: #EE455B;
$mv-light-color: #efefff;
$mv-light-color-hover:rgba(#efefff, .8);
$mv-dark-color: #333;
// Override default variables before the import bootstrap

Loading…
Cancel
Save