allow HTML in topics, fix headers in practice mode, localizations

client/components/AnnotationBox/AnnotationsHiddenView.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
 import { Icon, Popup } from 'semantic-ui-react'
-import { FormattedMessage, useIntl } from 'react-intl'
+import { FormattedHTMLMessage, FormattedMessage, useIntl } from 'react-intl'
 import { setAnnotationsVisibility } from 'Utilities/redux/annotationsReducer'
 
 const AnnotationsHiddenView = () => {
@@ -16,13 +16,13 @@ const AnnotationsHiddenView = () => {
       tabIndex={0}
       data-cy="annotations-visibility-button"
     >
-      <div className="header-3">
+      <div className="header-3" style={{ fontWeight: '500' }}>
         <Popup
           position="top center"
-          content={intl.formatMessage({ id: 'annotations-popup-info-text' })}
+          content={<FormattedHTMLMessage id={'annotations-popup-info-text'} />}
           trigger={<Icon name="info circle" size="small" color="grey" />}
         />{' '}
-        <FormattedMessage id="notes" />
+        <FormattedMessage id="notes-header" />
       </div>
       <Icon name="angle down" size="large" />
     </div>

client/components/AnnotationBox/ListView.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Icon, Popup } from 'semantic-ui-react'
 import { Button } from 'react-bootstrap'
-import { FormattedMessage, useIntl } from 'react-intl'
+import { FormattedHTMLMessage, FormattedMessage, useIntl } from 'react-intl'
 import { setFocusedSpan, setHighlightRange } from 'Utilities/redux/annotationsReducer'
 
 const ListView = ({ handleAnnotationBoxCollapse }) => {
@@ -25,13 +25,13 @@ const ListView = ({ handleAnnotationBoxCollapse }) => {
         tabIndex={0}
       >
         <div>
-          <div className="header-3">
+          <div className="header-3" style={{ fontWeight: '500' }}>
             <Popup
               position="top center"
-              content={intl.formatMessage({ id: 'annotations-popup-info-text' })}
+              content={<FormattedHTMLMessage id={'annotations-popup-info-text'} />}
               trigger={<Icon name="info circle" size="small" color="grey" />}
             />{' '}
-            <FormattedMessage id="notes" />
+            <FormattedMessage id="notes-header" />
           </div>
         </div>
         <Icon name="angle up" size="large" />

client/components/AnnotationBox/NoAnnotationsView.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, Popup } from 'semantic-ui-react'
 import { useHistory } from 'react-router-dom'
-import { FormattedMessage, useIntl } from 'react-intl'
+import { FormattedHTMLMessage, FormattedMessage, useIntl } from 'react-intl'
 
 const NoAnnotationsView = ({ handleAnnotationBoxCollapse }) => {
   const intl = useIntl()
@@ -19,13 +19,13 @@ const NoAnnotationsView = ({ handleAnnotationBoxCollapse }) => {
         tabIndex={0}
       >
         <div>
-          <div className="header-3">
+          <div className="header-3" style={{ fontWeight: '500' }}>
             <Popup
-              position="top center"
-              content={intl.formatMessage({ id: 'annotations-popup-info-text' })}
-              trigger={<Icon name="info circle" size="small" color="grey" />}
+                position="top center"
+                content={<FormattedHTMLMessage id={'annotations-popup-info-text'} />}
+                trigger={<Icon name="info circle" size="small" color="grey" />}
             />{' '}
-            <FormattedMessage id="notes" />
+            <FormattedMessage id="notes-header" />
           </div>
         </div>
         <Icon name="angle up" size="large" />

client/components/CommonStoryTextComponents/PreviousSnippets/Word/PreviousExerciseWord.js

@@ -215,7 +215,7 @@ const PreviousExerciseWord = ({ word, answer, tiedAnswer, focusedConcept, snippe
 
       {isPreviewMode && word.concepts?.length > 0 && (
         <div style={{ textAlign: 'left' }}>
-          <FormattedMessage id="topics" />:
+          <FormattedMessage id="topics-header" />:
           <ul className="mb-0">
             {word.concepts.map(concept => (
               <li key={concept.concept}>{concept.concept}</li>

client/components/ControlledStoryEditView/ControlledStoryWord.js

@@ -276,7 +276,7 @@ const ControlledStoryWord = ({ word, snippet, focusedConcept }) => {
 
       {word.concepts?.length > 0 && (
         <div style={{ textAlign: 'left' }}>
-          <FormattedMessage id="topics" />:
+          <FormattedMessage id="topics-header" />:
           <ul className="mb-0">
             {word.concepts.map(concept => (
               <li>{concept.concept}</li>

client/components/DictionaryHelp/index.js

@@ -304,7 +304,15 @@ const DictionaryHelp = ({ minimized, inWordNestModal }) => {
           <div className="flex space-between">
             <div style={{ marginBottom: '.5em' }}>
               <div className="header-3" style={{ fontWeight: '500' }}>
-                <FormattedMessage id="story-top-dict" />
+                  <Popup
+                      content={<FormattedHTMLMessage id={'click-on-words-near-the-exercises-to-explore-their-meaning'} />}
+                      trigger={<Icon style={{ paddingRight: '0.5em' }}
+                                     name="info circle"
+                                     size="small"
+                                     color="grey"
+                               />}
+                  />{' '}
+                  <FormattedMessage id="dictionary-header" />
               </div>
             </div>
             <div
@@ -386,11 +394,11 @@ const DictionaryHelp = ({ minimized, inWordNestModal }) => {
           ) : (
             <div style={{ width: '100%' }}>
               <div className="header-3" style={{ fontWeight: '500' }}>
-                <FormattedMessage id="notes" />
+                <FormattedMessage id="notes-header" />
               </div>
               <FocusedView focusedSpan={focusedSpan} />
             </div>
-          )}
+          ) /* ??? WHAT IS THIS? why NOTES ??? */}
 
           {smallWindow && !inWordNestModal ? (
             <div className="flex align-self-end">

client/components/Lessons/LessonPracticeView/LessonPracticeTopicsHelp.js

@@ -115,7 +115,7 @@ const LessonPracticeTopicsHelp = ({selectedTopics, always_show=false, }) => {
                             alignItems: 'center',
                         }}
                     >
-                        <FormattedMessage id={'topics'} />
+                        <FormattedMessage id={'topics-header'} />
                         <Icon
                             name={collapsed ? 'chevron down' : 'chevron up'}
                             onClick={toggleCollapse}

client/components/StoryView/StoryTopics.js

@@ -1,14 +1,15 @@
 import React, { useState, useEffect } from 'react'
 import useWindowDimensions from 'Utilities/windowDimensions'
-import { Icon, Segment } from 'semantic-ui-react'
+import { Icon, Popup, Segment } from 'semantic-ui-react'
 import { Form } from 'react-bootstrap'
 import { skillLevels, hiddenFeatures } from 'Utilities/common'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, FormattedHTMLMessage, useIntl } from 'react-intl'
 import { useSelector, useDispatch } from 'react-redux'
 import BatchExerciseControl from 'Components/ControlledStoryEditView/BatchExerciseControl'
 
 const StoryTopics = ({ conceptCount, focusedConcept, setFocusedConcept, isControlledStoryEditor = false }) => {
   const dispatch = useDispatch()
+  const intl = useIntl()
   const [topTopics, setTopTopics] = useState([])
   const { width } = useWindowDimensions()
   const showTopicsBox = useSelector((state) => state.topicsBox.showTopicsBox)
@@ -87,7 +88,17 @@ const StoryTopics = ({ conceptCount, focusedConcept, setFocusedConcept, isContro
         <div style={{ backgroundColor: '#FFFFFF' }}>
           <div className="flex space-between">
             <div style={{ marginBottom: '.5em' }}>
-              <FormattedMessage id="story-top-topics" />:
+              <div className="header-3" style={{ fontWeight: '500' }}>
+                  <Popup
+                      content={<FormattedHTMLMessage id={'story-top-topics-explain'} />}
+                      trigger={<Icon style={{ paddingRight: '0.5em' }}
+                                     name="info circle"
+                                     size="small"
+                                     color="grey"
+                               />}
+                  />{' '}
+                  <FormattedMessage id="topics-header" />
+              </div>
             </div>
             <div
               onClick={() => {
@@ -152,7 +163,10 @@ const StoryTopics = ({ conceptCount, focusedConcept, setFocusedConcept, isContro
                         }}
                         onChange={() => toggleExerciseTopic(topic[0], topic[1].freq)}
                       />}
-                      {topic[0]}
+                        { /* topic[0] */
+                            <span dangerouslySetInnerHTML={{ __html: topic[0].split('—')[0].trim() }}
+                            />
+                        }
                     </span>
                     <span style={{ marginRight: '.5em', marginLeft: '8px' }}>
                       {topic[1].freq}

client/util/translations/revita/en/LC_MESSAGES/messages.json

@@ -697,7 +697,7 @@
     "currently-anyone-can-share-stories-with-you-automatically-you-can-modify-this-in-your-profile-prefer": "",
     "PROFILE": "Profile",
     "unfamiliar-word": "Unfamiliar word?",
-    "click-on-words-near-the-exercises-to-explore-their-meaning": "Click any <u>unfamiliar</u> word to see its translations.\n<br/><br/>\nRevita will assume you are learning these words &mdash;\nthey will appear as <span style=\"font-weight: 500; color: red\">RED</span> in your <a href=\"/profile/progress/flashcards\">Vocabulary Progress</a> View.\n<br/><br/>\nPractice your words with <a href=\"/flashcards\">Flashcards</a>!\n<br/>\nOnce you have learned them, words turn from <span style=\"font-weight: 500; color: red\">RED</span> to <span style=\"font-weight: 500; color: green\">GREEN</span>.",
+    "click-on-words-near-the-exercises-to-explore-their-meaning": "Click any <u>unfamiliar</u> word to see its translations.\n<br/><br/>\nRevita will display the words you are learning &mdash;\nas <span style=\"font-weight: 500; color: red\">RED</span> \nin your <a href=\"/profile/progress/flashcards\">Vocabulary Progress</a> View.\n<br/><br/>\nPractice your words with <a href=\"/flashcards\">Flashcards</a>!\n<br/>\nOnce you have learned them, words turn from <span style=\"font-weight: 500; color: red\">RED</span> to <span style=\"font-weight: 500; color: green\">GREEN</span>.",
     "translate-to": "Translate to",
     "translation-temporarily-unavailable-please-try-again-later": "",
     "not-accessible": "",
@@ -1064,7 +1064,7 @@
     "note-delete-failure": "Deleting note failed. Please try again.",
     "log-in-to-create-own-notes": "Log in to create your own notes",
     "notes-popup-info-text": "You can add notes to any word — something important or interesting about how the language works.",
-    "annotations-popup-info-text": "Click any word to add your own notes. \nYou can add notes to any word or phrase in the story — something important or something interesting about how the language works.",
+    "annotations-popup-info-text": "Click any word to add your own notes!\n<br/>\n<br/>\nYou can add notes to any word or phrase in the story — something important or something interesting about how the language works.",
     "notes-added-to-history-appear-here": "Notes added to words in completed snippets will appear here.",
     "click-any-word-in-history-to-create-note": "Click any word before the exercise snippet to add a note.",
     "click-any-word-in-history-to-add-new": "",
@@ -1076,7 +1076,7 @@
     "show-feedback": "Show feedback",
     "upload-from-web-instructions": "Revita will try to find the story from the URL. If it fails, or if the result contains unwanted text, please use the \"Paste a text\" box below to enter the story manually.",
     "word-not-in-note-yet": "No notes yet for this word.",
-    "click-arrow-buttons-to-expand-shrink": "Click the arrow buttons «  »  to expand/shrink the selection.",
+    "click-arrow-buttons-to-expand-shrink": "Click the arrow buttons « and »  to expand/shrink the selection.",
     "words-not-in-note-yet": "No notes yet for these words.",
     "exercise-density": "Exercise density",
     "custom": "Customize learning settings",
@@ -1706,5 +1706,10 @@
     "correct-first-attempts-CONTROL": "Number of correct answers on first attempt",
     "first-attempt-correct-rate-CONTROL": "Correct rate on first attempt",
     "overall-correct-rate-CONTROL": "Rate of correct answers of all answers",
-    "story-top-dict": "Dictionary"
+    "story-top-dict": "Dictionary",
+    "topics-header": "Topics",
+    "notes-header": "Notes",
+    "story-top-topics-explain": "Working with this story helps you master especially these topics.\n<br/>\n<br/>\nNB: When you practice, only topics suitable for <b>your level</b> will be selected for exercises.",
+    "click-on-words-near-the-exercises-to-explore-their-meaning-SHORT": "Click any <u>unfamiliar</u> word to see its translations!",
+    "dictionary-header": "Dictionary"
 }

client/util/translations/revita/fi/LC_MESSAGES/messages.json

@@ -1063,7 +1063,7 @@
     "note-delete-failure": "Poistaminen epäonnistui. Yritä uudestaan.",
     "log-in-to-create-own-notes": "Kirjaudu sisään luodaksesi muistiinpanoja",
     "notes-popup-info-text": "Voit lisätä muistiinpanoja mille vain sanalle — mitä tahansa tärkeää tai mielenkiintoista kielen toimintaan liittyvää.",
-    "annotations-popup-info-text": "Klikkaa mitä tahansa sanaa tekstissä luodaksesi uuden muistiinpanon.\nVoit lisätä muistiinpanoja haluamaasi osaan tekstiä — mitä tahansa tärkeää tai mielenkiintoista kielen toimintaan liittyvää.",
+    "annotations-popup-info-text": "Klikkaa mitä tahansa sanaa tekstissä luodaksesi uuden muistiinpanon!\n<br/>\n<br/>\nVoit lisätä muistiinpanoja haluamaasi osaan tekstiä — mitä tahansa tärkeää tai mielenkiintoista kielen toimintaan liittyvää.",
     "notes-added-to-history-appear-here": "Muistiinpanot, jotka on lisätty tekstiin ennen tehtäväosaa, näkyvät tässä.",
     "click-any-word-in-history-to-create-note": "Click any word before the exercise snippet to add a note.",
     "click-any-word-in-history-to-add-new": "",
@@ -1075,7 +1075,7 @@
     "show-feedback": "Näytä palaute",
     "upload-from-web-instructions": "Syötä alla olevaan kenttään esimerkiksi jonkin uutisen tai lyhyen kertomuksen URL-osoite. Revita yrittää noutaa tekstin.  Jos noutaminen ei kuitenkaan onnistu, voit käyttää myös alla olevaa \"Liitä teksti\"-vaihtoehtoa, ja kopioida itse tekstin. (Varmista, että tekstin kieli on sama kuin valitsemasi opiskelukieli.)",
     "word-not-in-note-yet": "Valittu sana ei kuulu vielä yhteenkään muistiinpanoon.",
-    "click-arrow-buttons-to-expand-shrink": "Käytä nuolipainikkeita «  »  laajentaaksesi/pienentääksesi valintaa.",
+    "click-arrow-buttons-to-expand-shrink": "Käytä nuolipainikkeita « ja »  laajentaaksesi/pienentääksesi valintaa.",
     "words-not-in-note-yet": "Valitut sanat eivät kuulu vielä yhteenkään muistiinpanoon.",
     "exercise-density": "Tehtävien tiheystaso",
     "custom": "Mukauta oppimisasetuksia",
@@ -1705,5 +1705,10 @@
     "correct-first-attempts-CONTROL": "Oikeiden vastausten määrä ensimmäisellä yrityksellä (ilman vinkkejä)",
     "first-attempt-correct-rate-CONTROL": "Oikeiden vastausten osuus ensimmäisellä yrityksellä (ilman vinkkejä)",
     "overall-correct-rate-CONTROL": "Oikeiden vastausten osuus kaikista vastauksista (ml. vinkkien avulla)",
-    "story-top-dict": "Dictionary"
+    "story-top-dict": "Dictionary",
+    "topics-header": "Aiheet",
+    "notes-header": "Muistiinpanot",
+    "story-top-topics-explain": "Tämän tarinan avulla harjoittelet erityisesti näitä kielioppiasioita.\n<br/>\n<br/>\nHUOM: Kun harjoittelet, vain <b>tasosi</b> sopivat aiheet valitaan harjoituksiin.",
+    "click-on-words-near-the-exercises-to-explore-their-meaning-SHORT": "Klikkaa niitä tarinan sanoja, joita et tunne — saat niihin käännökset!",
+    "dictionary-header": "Sanasto"
 }

client/util/translations/revita/it/LC_MESSAGES/messages.json

@@ -1064,7 +1064,7 @@
     "note-delete-failure": "Eliminazione degli appunti fallita. Ritenta.",
     "log-in-to-create-own-notes": "Fai il Log in per creare i tuoi appunti",
     "notes-popup-info-text": "Puoi aggiungere degli appunti su ogni parola — qualcosa importante o interessante su come funziona questa lingua.",
-    "annotations-popup-info-text": "Clicca su qualsiasi parola per aggiungerla agli appunti. \nPuoi aggiungere degli appunti su qualsiasi parola o frase — qualcosa di importante o di interessante su come funziona questa lingua.",
+    "annotations-popup-info-text": "Clicca su qualsiasi parola per aggiungerla agli appunti! \n<br/>\n<br/>\nPuoi aggiungere degli appunti su qualsiasi parola o frase — qualcosa di importante o di interessante su come funziona questa lingua.",
     "notes-added-to-history-appear-here": "Gli appunti aggiunti alle parole appartenenti agli snippet completati appaiono qui.",
     "click-any-word-in-history-to-create-note": "Click any word before the exercise snippet to add a note.",
     "click-any-word-in-history-to-add-new": "",
@@ -1076,7 +1076,7 @@
     "show-feedback": "Mostra il feedback",
     "upload-from-web-instructions": "Revita tenterà di estrarre il testo dalla tua pagina web. Se il risultato non sarà ben riuscito, copialo manualmente e incollalo nella casella per il caricamento dei file (opzione \"Copia un testo\").",
     "word-not-in-note-yet": "La parola selezionata non ha nessuna appunto al momento.",
-    "click-arrow-buttons-to-expand-shrink": "Clicca sul pulsante freccia «  »  per estendere/rimpicciolire la selezione.",
+    "click-arrow-buttons-to-expand-shrink": "Clicca sul pulsante freccia « e »  per estendere/rimpicciolire la selezione.",
     "words-not-in-note-yet": "Le parole selezionate non sono collegate a nessun appunto al momento.",
     "exercise-density": "Densità degli esercizi",
     "custom": "Personalizza le impostazioni di apprendimento",
@@ -1704,5 +1704,10 @@
     "correct-first-attempts-CONTROL": "Number of correct answers on first attempt",
     "first-attempt-correct-rate-CONTROL": "Correct rate on first attempt",
     "overall-correct-rate-CONTROL": "Rate of correct answers of all answers",
-    "story-top-dict": "Dictionary"
+    "story-top-dict": "Dictionary",
+    "topics-header": "Argomenti",
+    "notes-header": "Appunti",
+    "story-top-topics-explain": "Praticare con questa storia ti aiuta ad apprendere questi argomenti.\n<br/>\n<br/>\nNB: Durante la pratica verranno selezionati per gli esercizi solo gli argomenti adatti al <b>tuo livello</b>.",
+    "click-on-words-near-the-exercises-to-explore-their-meaning-SHORT": "Clicca sulle parole sconosciute per ottenerne la traduzione!",
+    "dictionary-header": "Dizionario"
 }