Commit 9df85cf4 authored by Hidde Leistra's avatar Hidde Leistra

Change layout of feedback options

 - Remove panel from EditPanel/FeedbackBlock, must be left to
 implementer to use it where needed (not in Exam.jsx, for example)
 - Removed is-active from feedback option blocks
 - Add text saying that the section below it shows feedback options
parent a2274332
Pipeline #18012 passed with stages
in 2 minutes and 51 seconds
......@@ -343,19 +343,19 @@ class Exams extends React.Component {
props.saveProblemName(e.target.value)
}} />
</div>
<br/>
<label className='label'>Feedback options</label>
</React.Fragment>
)}
</div>
</div>
<div>
{this.isProblemWidget(selectedWidgetId) && (this.state.editActive
? <EditPanel problemID={props.problem.id} feedback={this.state.feedbackToEdit}
goBack={this.backToFeedback} />
: <FeedbackPanel examID={this.props.examID} problem={props.problem}
editFeedback={this.editFeedback} showTooltips={this.state.showTooltips}
grading={false}
/>)}
</div>
{this.isProblemWidget(selectedWidgetId) && (this.state.editActive
? <EditPanel problemID={props.problem.id} feedback={this.state.feedbackToEdit}
goBack={this.backToFeedback} />
: <FeedbackPanel examID={this.props.examID} problem={props.problem}
editFeedback={this.editFeedback} showTooltips={this.state.showTooltips}
grading={false}
/>)}
<div className='panel-block'>
<button
disabled={props.disabledDelete}
......
......@@ -210,17 +210,18 @@ class Grade extends React.Component {
<div className='column is-one-quarter-desktop is-one-third-tablet'>
<ProblemSelector problems={exam.problems} changeProblem={this.changeProblem}
current={this.state.pIndex} showTooltips={this.state.showTooltips} />
{this.state.editActive
? <EditPanel problemID={problem.id} feedback={this.state.feedbackToEdit}
goBack={this.backToFeedback} />
: <FeedbackPanel examID={exam.id} submissionID={submission.id}
problem={problem} solution={solution} graderID={this.props.graderID}
editFeedback={this.editFeedback} showTooltips={this.state.showTooltips}
updateSubmission={() => {
this.props.updateSubmission(this.state.sIndex)
}
} grading />
}
<nav className='panel'>
{this.state.editActive
? <EditPanel problemID={problem.id} feedback={this.state.feedbackToEdit}
goBack={this.backToFeedback} />
: <FeedbackPanel examID={exam.id} submissionID={submission.id}
problem={problem} solution={solution} graderID={this.props.graderID}
editFeedback={this.editFeedback} showTooltips={this.state.showTooltips}
updateSubmission={() => {
this.props.updateSubmission(this.state.sIndex)
}} grading />
}
</nav>
</div>
<div className='column'>
......
......@@ -107,7 +107,7 @@ class EditPanel extends React.Component {
render () {
return (
<nav className='panel'>
<React.Fragment>
<p className='panel-heading'>
Manage feedback
</p>
......@@ -168,7 +168,7 @@ class EditPanel extends React.Component {
onCancel={() => { this.setState({deleting: false}) }}
/>
</div>
</nav>
</React.Fragment>
)
}
}
......
......@@ -32,7 +32,7 @@ class FeedbackBlock extends React.Component {
render () {
const shortcut = (this.props.index < 11 ? '' : 'shift + ') + this.props.index % 10
return (
<a className='panel-block is-active' onClick={this.props.grading ? this.toggle : this.props.editFeedback}
<a className='panel-block' onClick={this.props.grading ? this.toggle : this.props.editFeedback}
style={this.props.selected ? {backgroundColor: '#209cee'} : {}}
>
<span
......
......@@ -101,7 +101,7 @@ class FeedbackPanel extends React.Component {
this.props.problem.feedback[this.state.selectedFeedbackIndex].id
return (
<nav className='panel'>
<React.Fragment>
{this.props.grading &&
<p className='panel-heading'>
Total:&nbsp;<b>{totalScore}</b>
......@@ -126,7 +126,7 @@ class FeedbackPanel extends React.Component {
<span>option</span>
</button>
</div>
</nav>
</React.Fragment>
)
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment