Skip to content

Commit

Permalink
Modified display of answerable sections - show a panel-like backgroun…
Browse files Browse the repository at this point in the history 
…d around the answer.
  • Loading branch information
@ledsoft
ledsoft committed Dec 8, 2016
1 parent b2481b2 commit 6c4fa30
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 23 deletions.
23 changes: 23 additions & 0 deletions css/semforms.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,29 @@
font-weight: bold;
}

.panel-title .checkbox label {
font-weight: normal;
}

.answerable-question {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
border-bottom: 1px solid transparent;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
padding: 0 15px;
}

.answerable-subquestions {
padding-top: 10px;
padding-left: 2em;
border: 1px solid #bce8f1;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
margin-bottom: 18px;
}

.help-icon-text-input {
margin-top: 30px;
}
Expand Down
2 changes: 1 addition & 1 deletion css/semforms.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

56 changes: 35 additions & 21 deletions src/components/Question.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import QuestionAnswerProcessor from "../model/QuestionAnswerProcessor";
import ValidatorFactory from "../model/ValidatorFactory";
import JsonLdObjectUtils from "../util/JsonLdObjectUtils";

// TODO Remove once the pretty layout is tested
const PRETTY_ANSWERABLE_LAYOUT = false;

export default class Question extends React.Component {
static propTypes = {
question: React.PropTypes.object.isRequired,
Expand All @@ -39,10 +42,10 @@ export default class Question extends React.Component {
};

_onChange(att, valueIndex, newValue) {
var newState = assign({}, this.props.question);
let newState = assign({}, this.props.question);
newState[att][valueIndex] = newValue;
if (att === Constants.HAS_ANSWER) {
var result = this.state.validator(newValue);
const result = this.state.validator(newValue);
newState = assign(newState, result);
}

Expand All @@ -51,28 +54,39 @@ export default class Question extends React.Component {
}

render() {
var question = this.props.question;
const question = this.props.question;
if (FormUtils.isHidden(question)) {
return null;
}
if (! FormUtils.isRelevant(question)) {
if (!FormUtils.isRelevant(question)) {
return null;
}
if (FormUtils.isAnswerable(question)) {
return <div>
{this.renderAnswers()}
<div style={{padding: '0 0 0 3em'}}>
{this.renderSubQuestions()}
</div>
</div>
if (PRETTY_ANSWERABLE_LAYOUT) {
return <div>
<div className='panel-title answerable-question'>
{this.renderAnswers()}
</div>
<div className='answerable-subquestions'>
{this.renderSubQuestions()}
</div>
</div>;
} else {
return <div>
{this.renderAnswers()}
<div style={{margin: '0 0 0 2em'}}>
{this.renderSubQuestions()}
</div>
</div>;
}
}
if (FormUtils.isSection(question)) {
if (this.props.withoutPanel) {
return <div>
{this._renderQuestionContent()}
</div>;
} else {
var label = JsonLdUtils.getLocalized(question[JsonLdUtils.RDFS_LABEL], Configuration.intl);
const label = JsonLdUtils.getLocalized(question[JsonLdUtils.RDFS_LABEL], Configuration.intl);
return <Panel header={<h5>{label}</h5>} bsStyle='info'>
{this._renderQuestionContent()}
</Panel>;
Expand All @@ -90,10 +104,10 @@ export default class Question extends React.Component {
}

renderAnswers() {
var question = this.props.question,
children = [], row = [], cls, isTextarea;
var answers = this._getAnswers();
for (var i = 0, len = answers.length; i < len; i++) {
const question = this.props.question,
children = [], answers = this._getAnswers();
let row = [], cls, isTextarea;
for (let i = 0, len = answers.length; i < len; i++) {
isTextarea = FormUtils.isTextarea(this.props.question, FormUtils.resolveValue(answers[i]));
cls = Question._getAnswerClass(isTextarea);
row.push(<div key={'row-item-' + i} className={cls}>
Expand All @@ -119,7 +133,7 @@ export default class Question extends React.Component {
}

_getAnswers() {
var question = this.props.question;
const question = this.props.question;
if (!question[Constants.HAS_ANSWER]) {
if (FormUtils.isSection(question) && !FormUtils.isAnswerable(question) || FormUtils.isWizardStep(question)) {
question[Constants.HAS_ANSWER] = [];
Expand All @@ -139,7 +153,7 @@ export default class Question extends React.Component {
}

_renderQuestionHelp() {
var question = this.props.question,
const question = this.props.question,
helpClass = FormUtils.isCheckbox(question) ? 'help-icon-checkbox' : 'help-icon-text-input';
return question[Constants.HELP_DESCRIPTION] ?
<HelpIcon
Expand All @@ -148,23 +162,23 @@ export default class Question extends React.Component {
}

_renderUnits() {
var question = this.props.question;
const question = this.props.question;
return question[Constants.HAS_UNIT] ?
<div className="has-unit-label">{question[Constants.HAS_UNIT]}</div> : null;
}

renderSubQuestions() {
var children = [],
const children = [],
subQuestions = this._getSubQuestions();
for (var i = 0, len = subQuestions.length; i < len; i++) {
for (let i = 0, len = subQuestions.length; i < len; i++) {
children.push(<Question key={'sub-question-' + i} index={i} question={subQuestions[i]}
onChange={this.onSubQuestionChange}/>);
}
return children;
}

_getSubQuestions() {
var question = this.props.question;
const question = this.props.question;
if (!question[Constants.HAS_SUBQUESTION]) {
question[Constants.HAS_SUBQUESTION] = [];
}
Expand Down
2 changes: 1 addition & 1 deletion test/rendering/TestApp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ class TestApp extends React.Component {
step: null
};
WizardGenerator.createWizard(wizard, null, null, (props) => {
this.setState({step: props.steps[0].data});
this.setState({step: props.steps[5].data});
});
}

Expand Down

0 comments on commit 6c4fa30

Please sign in to comment.