Added help icon support also to sections. Also support multiline help…

… texts.
kbss-cvut · Dec 8, 2016 · 60aa31f · 60aa31f
1 parent 6555357
commit 60aa31f
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git a/css/semforms.css b/css/semforms.css
@@ -33,7 +33,16 @@
     margin-top: 12px;
 }
 
+.help-icon-section {
+    margin-left: 0.5em;
+    margin-bottom: -0.3em;
+}
+
 .has-unit-label {
     margin-top: 30px;
     font-weight: bold;
 }
+
+.tooltip-content {
+    white-space: pre-wrap;
+}
diff --git a/src/components/HelpIcon.js b/src/components/HelpIcon.js
@@ -4,9 +4,10 @@ import React from 'react';
 import {Glyphicon, OverlayTrigger, Tooltip} from 'react-bootstrap';
 
 const HelpIcon = (props) => {
-    var tooltip = <Tooltip id='help-tooltip'>{props.text}</Tooltip>;
+    const tooltip = <Tooltip id='help-tooltip' className='tooltip-content'>{props.text}</Tooltip>;
+
     return <OverlayTrigger placement='right' overlay={tooltip}>
-        <Glyphicon glyph={props.glyph ? props.glyph : 'question-sign'} className={props.iconClass}/>
+        <Glyphicon glyph={props.glyph} className={props.iconClass}/>
     </OverlayTrigger>;
 };
 
@@ -17,7 +18,8 @@ HelpIcon.propTypes = {
 };
 
 HelpIcon.defaultProps = {
-    iconClass: ''
+    iconClass: '',
+    glyph: 'question-sign'
 };
 
 export default HelpIcon;
diff --git a/src/components/Question.js b/src/components/Question.js
@@ -87,7 +87,7 @@ export default class Question extends React.Component {
                 </div>;
             } else {
                 const label = JsonLdUtils.getLocalized(question[JsonLdUtils.RDFS_LABEL], Configuration.intl);
-                return <Panel header={<h5>{label}</h5>} bsStyle='info'>
+                return <Panel header={<div><h5>{label}{this._renderQuestionHelp()}</h5></div>} bsStyle='info'>
                     {this._renderQuestionContent()}
                 </Panel>;
             }
@@ -153,12 +153,14 @@ export default class Question extends React.Component {
     }
 
     _renderQuestionHelp() {
-        const question = this.props.question,
-            helpClass = FormUtils.isCheckbox(question) ? 'help-icon-checkbox' : 'help-icon-text-input';
+        const question = this.props.question;
+        let helpClass = FormUtils.isCheckbox(question) ? 'help-icon-checkbox' : 'help-icon-text-input';
+        if (FormUtils.isSection(question)) {
+            helpClass = 'help-icon-section';
+        }
         return question[Constants.HELP_DESCRIPTION] ?
-            <HelpIcon
-                text={JsonLdUtils.getLocalized(question[Constants.HELP_DESCRIPTION], Configuration.intl)}
-                iconClass={helpClass}/> : null;
+            <HelpIcon text={JsonLdUtils.getLocalized(question[Constants.HELP_DESCRIPTION], Configuration.intl)}
+                      iconClass={helpClass}/> : null;
     }
 
     _renderUnits() {

diff --git a/test/rendering/form.json b/test/rendering/form.json
@@ -18249,6 +18249,7 @@
         "http://vfn.cz/ontologies/fss-form/primary-treatment--chemotherapy--adjuvant-q"
       ],
       "has-layout-class": "section",
+      "http://purl.org/dc/elements/1.1/description": "Test help on section header\nWith newline",
       "label": "Chemotherapy"
     },
     {