From bd971292100fc04e9c316b482dfd2d6caf131007 Mon Sep 17 00:00:00 2001 From: Mael Date: Fri, 12 Oct 2018 08:30:26 +0000 Subject: [PATCH] :art: Affichage des composantes plus humain MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Et colorisation plus simple des mécanismes, dans un nouveau fichier au lieu d'être caché dans un CSS sans fin --- source/components/rule/Algorithm.css | 41 ++++++-------------- source/engine/mecanismViews/Composantes.css | 20 ++++++++++ source/engine/mecanismViews/Composantes.js | 42 +++++++++++++++++++++ source/engine/mecanismViews/colours.js | 14 +++++++ source/engine/mecanismViews/common.js | 25 +++++++++++- source/engine/mecanisms.js | 32 +--------------- 6 files changed, 112 insertions(+), 62 deletions(-) create mode 100644 source/engine/mecanismViews/Composantes.css create mode 100644 source/engine/mecanismViews/Composantes.js create mode 100644 source/engine/mecanismViews/colours.js diff --git a/source/components/rule/Algorithm.css b/source/components/rule/Algorithm.css index cfaab73d5..f89e142da 100644 --- a/source/components/rule/Algorithm.css +++ b/source/components/rule/Algorithm.css @@ -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; diff --git a/source/engine/mecanismViews/Composantes.css b/source/engine/mecanismViews/Composantes.css new file mode 100644 index 000000000..575aae937 --- /dev/null +++ b/source/engine/mecanismViews/Composantes.css @@ -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; +} diff --git a/source/engine/mecanismViews/Composantes.js b/source/engine/mecanismViews/Composantes.js new file mode 100644 index 000000000..ded5559c0 --- /dev/null +++ b/source/engine/mecanismViews/Composantes.js @@ -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 ( + +

+ Cette règle est la somme de deux{' '} + : +

+
    + {explanation.map(c => [ +
  1. +
      + {toPairs(c.composante).map(([k, v]) => ( +
    • + + {k}:{' '} + + + {v} + +
      • + ))} +
    +
    {makeJsx(c)}
    +
    2. + ])} +
+ + } + /> + ) +} diff --git a/source/engine/mecanismViews/colours.js b/source/engine/mecanismViews/colours.js new file mode 100644 index 000000000..339367148 --- /dev/null +++ b/source/engine/mecanismViews/colours.js @@ -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' diff --git a/source/engine/mecanismViews/common.js b/source/engine/mecanismViews/common.js index c9ee0c59a..77426bc0d 100644 --- a/source/engine/mecanismViews/common.js +++ b/source/engine/mecanismViews/common.js @@ -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 ( -
+
{name && ( - + {name} @@ -56,6 +64,19 @@ export class Node extends Component { } } +export function InlineMecanism({ name }) { + return ( + + + {name} + + + ) +} + // 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 { diff --git a/source/engine/mecanisms.js b/source/engine/mecanisms.js index 6ef16b5de..c3e285cdb 100644 --- a/source/engine/mecanisms.js +++ b/source/engine/mecanisms.js @@ -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) => ( - - {explanation.map(c => [ -
  • -
      - {toPairs(c.composante).map(([k, v]) => ( -
    • - - {k}:{' '} - - - {v} - -
      • - ))} -
    -
    {makeJsx(c)}
    -
    • - ])} - - } - /> - ) - 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',