🎨 Affichage des composantes plus humain
Et colorisation plus simple des mécanismes, dans un nouveau fichier au lieu d'être caché dans un CSS sans finpull/400/head
Mael
parent
b84f2f0a13
commit
bd97129210
|
|
@ -59,12 +59,19 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0.2em 1em;
|
||||
display: block;
|
||||
background: #34495e;
|
||||
}
|
||||
.inlineMecanism .name,
|
||||
.mecanism > .nodeHead .name {
|
||||
padding: 0.2em 0.8em;
|
||||
display: inline-block;
|
||||
color: white !important;
|
||||
font-weight: 500;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
.inlineMecanism .name {
|
||||
margin: 0 0.1em;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.mecanism > .nodeHead .name::first-letter {
|
||||
text-transform: capitalize;
|
||||
|
|
@ -88,12 +95,6 @@
|
|||
[data-term-definition]:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.ruleProp > .nodeHead .name {
|
||||
background: #9b59b6;
|
||||
}
|
||||
.mecanism.ruleProp {
|
||||
border-color: #9b59b6;
|
||||
}
|
||||
|
||||
.mecanism .properties .key {
|
||||
display: inline-block;
|
||||
|
|
@ -101,12 +102,6 @@
|
|||
margin-right: 0.8em;
|
||||
}
|
||||
|
||||
.multiplication > .nodeHead .name {
|
||||
background: #2ecc71;
|
||||
}
|
||||
.mecanism.multiplication {
|
||||
border-color: #2ecc71;
|
||||
}
|
||||
.mecanism.multiplication .key {
|
||||
color: #2ecc71;
|
||||
}
|
||||
|
|
@ -122,13 +117,6 @@
|
|||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.mecanism.conditions > .nodeHead .name {
|
||||
background: #3498db;
|
||||
}
|
||||
.mecanism.conditions {
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
.mecanism .conditions > ul > li {
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
|
@ -171,12 +159,6 @@
|
|||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.composantes > .nodeHead .name {
|
||||
background: #3498db;
|
||||
}
|
||||
.mecanism.composantes {
|
||||
border-color: #3498db;
|
||||
}
|
||||
.composantes .composanteName::first-letter {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
|
@ -190,7 +172,6 @@
|
|||
.mecanism {
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
border-color: #34495e;
|
||||
padding: 1em;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 2em;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
.composantes > ol {
|
||||
list-style: none;
|
||||
counter-reset: li;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.composantes > ol > li.composante::before {
|
||||
counter-increment: li;
|
||||
}
|
||||
.composantes > ol > li.composante::before {
|
||||
content: counter(li) ')';
|
||||
color: grey;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-left: -1em;
|
||||
}
|
||||
|
||||
.composantes .composanteAttributes {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import React from 'react'
|
||||
import { Node, InlineMecanism } from './common'
|
||||
import { makeJsx } from '../evaluation'
|
||||
import './Composantes.css'
|
||||
import { Trans } from 'react-i18next'
|
||||
import { toPairs } from 'ramda'
|
||||
|
||||
export default function Variations(nodeValue, explanation) {
|
||||
return (
|
||||
<Node
|
||||
classes="mecanism composantes"
|
||||
value={nodeValue}
|
||||
child={
|
||||
<>
|
||||
<p>
|
||||
Cette règle est la somme de deux{' '}
|
||||
<InlineMecanism name="composantes" /> :
|
||||
</p>
|
||||
<ol>
|
||||
{explanation.map(c => [
|
||||
<li className="composante" key={JSON.stringify(c.composante)}>
|
||||
<ul className="composanteAttributes">
|
||||
{toPairs(c.composante).map(([k, v]) => (
|
||||
<li key={k} className="composanteName">
|
||||
<span>
|
||||
<Trans>{k}</Trans>:{' '}
|
||||
</span>
|
||||
<span>
|
||||
<Trans>{v}</Trans>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="content">{makeJsx(c)}</div>
|
||||
</li>
|
||||
])}
|
||||
</ol>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
let colours = {
|
||||
ruleProp: '#9b59b6',
|
||||
'applicable si': '#9b59b6',
|
||||
'non applicable si': '#9b59b6',
|
||||
multiplication: '#2ecc71',
|
||||
conditions: '#3498db',
|
||||
composantes: '#3498db',
|
||||
variations: '#FF9800',
|
||||
complément: '#795548',
|
||||
barème: '#607D8B',
|
||||
barèmeLinéaire: '#AD1457'
|
||||
}
|
||||
|
||||
export default name => colours[name] || '#34495e'
|
||||
|
|
@ -9,6 +9,7 @@ import { flatRulesSelector } from 'Selectors/analyseSelectors'
|
|||
import { LinkButton } from 'Ui/Button'
|
||||
import { capitalise0 } from '../../utils'
|
||||
import { encodeRuleName, findRuleByDottedName } from '../rules'
|
||||
import mecanismColours from './colours'
|
||||
|
||||
let treatValue = (data, language) =>
|
||||
data == null
|
||||
|
|
@ -40,10 +41,17 @@ export class Node extends Component {
|
|||
termDefinition = contains('mecanism', classes) && name
|
||||
|
||||
return (
|
||||
<div className={classNames(classes, 'node')}>
|
||||
<div
|
||||
className={classNames(classes, 'node')}
|
||||
style={termDefinition ? { borderColor: mecanismColours(name) } : {}}>
|
||||
{name && (
|
||||
<span className="nodeHead">
|
||||
<LinkButton className="name" data-term-definition={termDefinition}>
|
||||
<LinkButton
|
||||
className="name"
|
||||
style={
|
||||
termDefinition ? { background: mecanismColours(name) } : {}
|
||||
}
|
||||
data-term-definition={termDefinition}>
|
||||
<Trans>{name}</Trans>
|
||||
</LinkButton>
|
||||
<NodeValuePointer data={value} />
|
||||
|
|
@ -56,6 +64,19 @@ export class Node extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export function InlineMecanism({ name }) {
|
||||
return (
|
||||
<span className="inlineMecanism">
|
||||
<LinkButton
|
||||
className="name"
|
||||
data-term-definition={name}
|
||||
style={{ background: mecanismColours(name) }}>
|
||||
<Trans>{name}</Trans>
|
||||
</LinkButton>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// Un élément du graphe de calcul qui a une valeur interprétée (à afficher)
|
||||
@connect(state => ({ flatRules: flatRulesSelector(state) }))
|
||||
export class Leaf extends Component {
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ import Barème from './mecanismViews/Barème'
|
|||
import Variations from './mecanismViews/Variations'
|
||||
import BarèmeLinéaire from './mecanismViews/BarèmeLinéaire'
|
||||
import Allègement from './mecanismViews/Allègement'
|
||||
import Composantes from './mecanismViews/Composantes'
|
||||
import { trancheValue } from './mecanisms/barème'
|
||||
import buildSelectionView from './mecanismViews/Selection'
|
||||
import uniroot from './uniroot'
|
||||
|
|
@ -80,35 +81,6 @@ let decompose = (recurse, k, v) => {
|
|||
composante: c.nom ? { nom: c.nom } : c.attributs
|
||||
}))
|
||||
|
||||
let jsx = (nodeValue, explanation) => (
|
||||
<Node
|
||||
classes="mecanism composantes"
|
||||
name="composantes"
|
||||
value={nodeValue}
|
||||
child={
|
||||
<ul>
|
||||
{explanation.map(c => [
|
||||
<li className="composante" key={JSON.stringify(c.composante)}>
|
||||
<ul className="composanteAttributes">
|
||||
{toPairs(c.composante).map(([k, v]) => (
|
||||
<li key={k} className="composanteName">
|
||||
<span>
|
||||
<Trans>{k}</Trans>:{' '}
|
||||
</span>
|
||||
<span>
|
||||
<Trans>{v}</Trans>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="content">{makeJsx(c)}</div>
|
||||
</li>
|
||||
])}
|
||||
</ul>
|
||||
}
|
||||
/>
|
||||
)
|
||||
|
||||
let filter = situationGate => c =>
|
||||
!situationGate('sys.filter') ||
|
||||
!c.composante ||
|
||||
|
|
@ -119,7 +91,7 @@ let decompose = (recurse, k, v) => {
|
|||
|
||||
return {
|
||||
explanation,
|
||||
jsx,
|
||||
jsx: Composantes,
|
||||
evaluate: evaluateArrayWithFilter(filter, add, 0),
|
||||
category: 'mecanism',
|
||||
name: 'composantes',
|
||||
|
|
|
|||
Loading…
Reference in New Issue