Skip to content
Snippets Groups Projects
Commit 9980da60 authored by Nicolas PAGNY's avatar Nicolas PAGNY
Browse files

Add icons in ecogesture buttons

parent 1b3050de
No related branches found
No related tags found
2 merge requests!15Merge Dev to Master,!13Features/add news icons
Showing
with 154 additions and 39 deletions
import { EcogesturesIcon } from 'enum/ecogestureIcon.enum'
import AccelerateurSVG from 'assets/icons/eco/picto/accelerateur.svg'
import CasqueSVG from 'assets/icons/eco/picto/casque.svg'
import CymbalSVG from 'assets/icons/eco/picto/cymbal.svg'
import ElectroSVG from 'assets/icons/eco/picto/electro.svg'
import FrerotsSVG from 'assets/icons/eco/picto/frerots.svg'
import HibernationSVG from 'assets/icons/eco/picto/hibernation.svg'
import PoingsSVG from 'assets/icons/eco/picto/poings.svg'
import VaisselleSVG from 'assets/icons/eco/picto/vaisselle.svg'
export const getEcogestureIconSVG = (iconName: string) => {
switch (iconName) {
case EcogesturesIcon.ACCELEREATEUR:
return AccelerateurSVG
case EcogesturesIcon.CASQUE:
return CasqueSVG
case EcogesturesIcon.CYMBAL:
return CymbalSVG
case EcogesturesIcon.ELECTRO:
return ElectroSVG
case EcogesturesIcon.FREROTS:
return FrerotsSVG
case EcogesturesIcon.HIBERNATION:
return HibernationSVG
case EcogesturesIcon.POINGS:
return PoingsSVG
case EcogesturesIcon.VAISSELLE:
return VaisselleSVG
default:
return null
}
}
......@@ -2,6 +2,8 @@ import React from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { EcogestureType } from 'services/dataChallengeContracts'
import StyledEcogestureCard from 'components/CommonKit/Card/StyledEcogestureCard'
import Icon from 'cozy-ui/react/Icon'
import { getEcogestureIconSVG } from '../../CommonKit/SVG/EcogesturesSVG'
interface EcogestureCardProps {
ecogesture: EcogestureType
......@@ -19,11 +21,21 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
const handleCardclick = () => {
handleClick && ecogesture ? handleClick(ecogesture) : null
}
return (
<>
{challengeEcogesture ? (
<div className={`cp-eg-${challengeEcogesture}`}>
<StyledEcogestureCard border={true} onClick={handleCardclick}>
{ecogesture.iconName && (
<div>
<Icon
className="Icon"
icon={getEcogestureIconSVG(ecogesture.iconName)}
size={64}
/>
</div>
)}
<div className="challenge-eg">
{ecogesture.shortName}
{/* {`${t('CHALLENGE.ECOGESTURE')} ${challengeEcogesture}`} */}
......@@ -37,6 +49,15 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
>
<div className="ec">
<div className="ec-content">
{ecogesture.iconName && (
<div>
<Icon
className="Icon"
icon={getEcogestureIconSVG(ecogesture.iconName)}
size={64}
/>
</div>
)}
<div className="ec-content-short-name text-16-bold">
{ecogesture.shortName}
</div>
......
......@@ -4,6 +4,8 @@ import Modal from 'components/CommonKit/Modal/Modal'
import { getPicto } from 'utils/utils'
import { EcogestureType } from 'services/dataChallengeContracts'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Icon from 'cozy-ui/react/Icon'
import { getEcogestureIconSVG } from 'components/CommonKit/SVG/EcogesturesSVG'
interface EcogestureModalProps {
opened: boolean
......@@ -32,6 +34,15 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
</div>
<div className="em-content-box">
<div className="em-content-box-text">
{ecogesture.iconName !== '' && (
<div>
<Icon
className="icon"
icon={getEcogestureIconSVG(ecogesture.iconName)}
size={100}
/>
</div>
)}
<div className="em-title text-24-bold ">
{ecogesture.shortName}
</div>
......
......@@ -8,7 +8,8 @@
"usage": "Eau chaude sanitaire",
"fluidTypes": [0],
"pack": 8,
"nwh": 6
"nwh": 6,
"iconName" : ""
},
{
"_id": "0034",
......@@ -19,7 +20,8 @@
"usage": "Eau chaude sanitaire",
"fluidTypes": [1],
"pack": 6,
"nwh": 5
"nwh": 5,
"iconName" : ""
},
{
"_id": "0037",
......@@ -30,7 +32,8 @@
"usage": "Eau chaude sanitaire",
"fluidTypes": [1],
"pack": 0,
"nwh": 4
"nwh": 4,
"iconName" : ""
},
{
"_id": "0038",
......@@ -41,7 +44,8 @@
"usage": "Eau chaude sanitaire",
"fluidTypes": [0, 2],
"pack": 0,
"nwh": 2
"nwh": 2,
"iconName" : ""
},
{
"_id": "0040",
......@@ -52,7 +56,8 @@
"usage": "Eau chaude sanitaire",
"fluidTypes": [0],
"pack": 0,
"nwh": 6
"nwh": 6,
"iconName" : ""
},
{
"_id": "0041",
......@@ -63,7 +68,8 @@
"usage": "Eau chaude sanitaire",
"fluidTypes": [1],
"pack": 7,
"nwh": 6
"nwh": 6,
"iconName" : ""
},
{
"_id": "0042",
......@@ -74,7 +80,8 @@
"usage": "Eau chaude sanitaire",
"fluidTypes": [1],
"pack": 5,
"nwh": 5
"nwh": 5,
"iconName" : ""
},
{
"_id": "0043",
......@@ -85,7 +92,8 @@
"usage": "Eau chaude sanitaire",
"fluidTypes": [0, 2],
"pack": 3,
"nwh": 3
"nwh": 3,
"iconName" : "poings"
},
{
"_id": "0044",
......@@ -96,7 +104,8 @@
"usage": "Eau chaude sanitaire",
"fluidTypes": [1],
"pack": 0,
"nwh": 3
"nwh": 3,
"iconName" : ""
},
{
"_id": "0045",
......@@ -107,7 +116,8 @@
"usage": "Eau chaude sanitaire",
"fluidTypes": [0, 2],
"pack": 2,
"nwh": 3
"nwh": 3,
"iconName" : "vaisselle"
},
{
"_id": "0046",
......@@ -118,7 +128,8 @@
"usage": "Eau froide",
"fluidTypes": [1],
"pack": 0,
"nwh": 6
"nwh": 6,
"iconName" : ""
},
{
"_id": "0048",
......@@ -129,7 +140,8 @@
"usage": "Eau froide",
"fluidTypes": [1],
"pack": 0,
"nwh": 6
"nwh": 6,
"iconName" : ""
},
{
"_id": "0050",
......@@ -140,7 +152,8 @@
"usage": "Froid",
"fluidTypes": [0],
"pack": 4,
"nwh": 3
"nwh": 3,
"iconName" : ""
},
{
"_id": "0052",
......@@ -151,7 +164,8 @@
"usage": "Froid",
"fluidTypes": [0],
"pack": 0,
"nwh": 2
"nwh": 2,
"iconName" : ""
},
{
"_id": "0053",
......@@ -162,7 +176,8 @@
"usage": "Froid",
"fluidTypes": [0],
"pack": 0,
"nwh": 1
"nwh": 1,
"iconName" : ""
},
{
"_id": "0054",
......@@ -173,7 +188,8 @@
"usage": "Froid",
"fluidTypes": [0],
"pack": 0,
"nwh": 1
"nwh": 1,
"iconName" : ""
},
{
"_id": "0055",
......@@ -184,7 +200,8 @@
"usage": "Froid",
"fluidTypes": [0],
"pack": 0,
"nwh": 1
"nwh": 1,
"iconName" : ""
},
{
"_id": "0056",
......@@ -195,7 +212,8 @@
"usage": "Froid",
"fluidTypes": [0],
"pack": 0,
"nwh": 1
"nwh": 1,
"iconName" : ""
},
{
"_id": "0057",
......@@ -206,7 +224,8 @@
"usage": "Froid",
"fluidTypes": [0],
"pack": 0,
"nwh": 1
"nwh": 1,
"iconName" : ""
},
{
"_id": "0058",
......@@ -217,7 +236,8 @@
"usage": "Froid",
"fluidTypes": [0],
"pack": 5,
"nwh": 2
"nwh": 2,
"iconName" : ""
},
{
"_id": "0059",
......@@ -228,7 +248,8 @@
"usage": "Froid",
"fluidTypes": [0],
"pack": 0,
"nwh": 1
"nwh": 1,
"iconName" : ""
},
{
"_id": "0061",
......@@ -239,7 +260,8 @@
"usage": "Froid",
"fluidTypes": [0],
"pack": 0,
"nwh": 1
"nwh": 1,
"iconName" : ""
},
{
"_id": "0064",
......@@ -250,7 +272,8 @@
"usage": "Audiovisuel, Petit électroménager, Hi-Fi, Informatique",
"fluidTypes": [0],
"pack": 2,
"nwh": 3
"nwh": 3,
"iconName" : "electro"
},
{
"_id": "0065",
......@@ -261,7 +284,8 @@
"usage": "Audiovisuel, Petit électroménager, Hi-Fi, Informatique",
"fluidTypes": [0],
"pack": 0,
"nwh": 1
"nwh": 1,
"iconName" : ""
},
{
"_id": "0066",
......@@ -272,7 +296,8 @@
"usage": "Audiovisuel, Petit électroménager, Hi-Fi, Informatique",
"fluidTypes": [0],
"pack": 6,
"nwh": 3
"nwh": 3,
"iconName" : ""
},
{
"_id": "0068",
......@@ -283,7 +308,8 @@
"usage": "Audiovisuel, Petit électroménager, Hi-Fi, Informatique",
"fluidTypes": [0],
"pack": 0,
"nwh": 1
"nwh": 1,
"iconName" : ""
},
{
"_id": "0071",
......@@ -294,7 +320,8 @@
"usage": "Lavage",
"fluidTypes": [0, 1],
"pack": 3,
"nwh": 2
"nwh": 2,
"iconName" : ""
},
{
"_id": "0072",
......@@ -305,7 +332,8 @@
"usage": "Lavage",
"fluidTypes": [0, 1],
"pack": 0,
"nwh": 2
"nwh": 2,
"iconName" : ""
},
{
"_id": "0074",
......@@ -316,7 +344,8 @@
"usage": "Lavage",
"fluidTypes": [0, 1],
"pack": 0,
"nwh": 1
"nwh": 1,
"iconName" : ""
},
{
"_id": "0077",
......@@ -327,7 +356,8 @@
"usage": "Lavage",
"fluidTypes": [0],
"pack": 0,
"nwh": 1
"nwh": 1,
"iconName" : ""
},
{
"_id": "0078",
......@@ -338,7 +368,8 @@
"usage": "Lavage",
"fluidTypes": [0],
"pack": 8,
"nwh": 3
"nwh": 3,
"iconName" : ""
},
{
"_id": "0082",
......@@ -349,7 +380,8 @@
"usage": "Eclairage",
"fluidTypes": [0],
"pack": 7,
"nwh": 3
"nwh": 3,
"iconName" : ""
},
{
"_id": "0085",
......@@ -360,7 +392,8 @@
"usage": "Eclairage",
"fluidTypes": [0],
"pack": 1,
"nwh": 2
"nwh": 2,
"iconName" : "frerots"
},
{
"_id": "0086",
......@@ -371,7 +404,8 @@
"usage": "Eclairage",
"fluidTypes": [0],
"pack": 0,
"nwh": 1
"nwh": 1,
"iconName" : ""
},
{
"_id": "0087",
......@@ -382,7 +416,8 @@
"usage": "Eclairage",
"fluidTypes": [0],
"pack": 0,
"nwh": 1
"nwh": 1,
"iconName" : ""
},
{
"_id": "0092",
......@@ -393,7 +428,8 @@
"usage": "Cuisson",
"fluidTypes": [0, 2],
"pack": 1,
"nwh": 3
"nwh": 3,
"iconName" : "cymbal"
},
{
"_id": "0093",
......@@ -404,7 +440,8 @@
"usage": "Cuisson",
"fluidTypes": [0],
"pack": 4,
"nwh": 3
"nwh": 3,
"iconName" : "casque"
},
{
"_id": "0097",
......@@ -415,6 +452,7 @@
"usage": "Cuisson",
"fluidTypes": [0],
"pack": 0,
"nwh": 2
"nwh": 2,
"iconName" : ""
}
]
]
\ No newline at end of file
export enum EcogesturesIcon {
ACCELEREATEUR = 'accelerateur',
CASQUE = 'casque',
CYMBAL = 'cymbal',
ELECTRO = 'electro',
FREROTS = 'frerots',
HIBERNATION = 'hibernation',
POINGS = 'poings',
VAISSELLE = 'vaisselle',
}
......@@ -47,6 +47,7 @@ export class EcogestureType {
fluidTypes: FluidType[]
nwh: number
pack: number
iconName: string
unlocked?: boolean
constructor(
......@@ -59,6 +60,7 @@ export class EcogestureType {
fluidTypes: FluidType[],
nwh: number,
pack: number,
iconName: string,
unlocked?: boolean
) {
this.id = id
......@@ -70,6 +72,7 @@ export class EcogestureType {
this.fluidTypes = fluidTypes
this.nwh = nwh
this.pack = pack
this.iconName = iconName
this.unlocked = unlocked
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment