diff --git a/src/routes/Morph/MorphResults.js b/src/routes/Morph/MorphResults.js index e5ca54b1..2e45c1f2 100644 --- a/src/routes/Morph/MorphResults.js +++ b/src/routes/Morph/MorphResults.js @@ -30,11 +30,21 @@ const MorphResults = props => { } } - // Assign the changed class if the result is different from last run + // Assign the 'different' and 'changed' classes appropriately const classes = result => { - return result.changed && props.showDiff - ? classNames(styles.outText, styles.changed) - : styles.outText + if (props.showDiff && result.diff) { + if (result.input !== result.output) { + return classNames(styles.outText, styles.different, styles.changed) + } else { + return classNames(styles.outText, styles.different) + } + } else { + if (result.input !== result.output) { + return classNames(styles.outText, styles.changed) + } else { + return styles.outText + } + } } // Return the results text @@ -57,7 +67,7 @@ const MorphResults = props => { if (resultsArr[i].input === resultsArr[i].output) { unchangedWords++ } - if (resultsArr[i].changed) { + if (resultsArr[i].diff) { differentWords++ } } @@ -100,7 +110,7 @@ MorphResults.propTypes = { PropTypes.shape({ input: PropTypes.string.isRequired, output: PropTypes.string.isRequired, - changed: PropTypes.bool.isRequired + diff: PropTypes.bool.isRequired }) ).isRequired, PropTypes.arrayOf(PropTypes.string.isRequired).isRequired diff --git a/src/routes/Morph/MorphService.js b/src/routes/Morph/MorphService.js index 9014736c..8c27dc91 100644 --- a/src/routes/Morph/MorphService.js +++ b/src/routes/Morph/MorphService.js @@ -20,7 +20,7 @@ class MorphService { this.rewriteLex = this.rewriteLex.bind(this) this.unrewriteLex = this.unrewriteLex.bind(this) this.applyChanges = this.applyChanges.bind(this) - this.idChanged = this.idChanged.bind(this) + this.idDiff = this.idDiff.bind(this) this.morph = this.morph.bind(this) } @@ -320,7 +320,7 @@ class MorphService { return rwOutput ? this.unrewriteLex(results, rules) : results } - idChanged (data, results) { + idDiff (data, results) { const newResults = JSON.parse(JSON.stringify(results)) if ( @@ -329,13 +329,13 @@ class MorphService { typeof data.results[0] !== 'string' ) { for (let i = 0; i < newResults.length; i++) { - newResults[i].changed = + newResults[i].diff = newResults[i].input !== data.results[i].input && newResults[i].output !== data.results[i].output } } else { for (let i = 0; i < newResults.length; i++) { - newResults[i].changed = true + newResults[i].diff = true } } @@ -372,7 +372,7 @@ class MorphService { newData.rewriteOutput ) - return this.idChanged(newData, results) + return this.idDiff(newData, results) } } diff --git a/src/routes/Morph/styles.js b/src/routes/Morph/styles.js index 5b3194dd..3a52a887 100644 --- a/src/routes/Morph/styles.js +++ b/src/routes/Morph/styles.js @@ -46,8 +46,11 @@ const styles = { marginBottom: 0 } }, - changed: { + different: { fontWeight: 'bold' + }, + changed: { + fontStyle: 'italic' } }