Commit 36d9488a authored by Anton Akhmerov's avatar Anton Akhmerov
Browse files

Merge branch '525-improve-feedback-panel' into 'master'

Improve feedback edit panel

Closes #525 and #500

See merge request zesje/zesje!315
parents 58d711aa 7584046e
import React from 'react'
class ColorInput extends React.Component {
state = {
editing: true
}
onStartEditing = () => this.setState({ editing: true })
onFinishEditing = () => this.setState({ editing: false })
inputColor = (value) => {
if (this.state.editing) {
return ''
} else if (value) {
return 'is-success'
} else {
return 'is-danger'
}
}
render () {
return (
<input className={'input ' + this.inputColor(this.props.value)}
onFocus={this.onStartEditing}
onBlur={this.onFinishEditing}
{...this.props} />
)
}
}
export default ColorInput
......@@ -4,13 +4,12 @@
}
.control.is-score-control {
width: 1.5rem;
width: 3rem;
margin-right: 0;
}
.control.is-score-control > .input {
text-align: center;
margin-top: 0.25rem;
padding-left: 0.1rem;
padding-right: 0.1rem;
}
......@@ -34,4 +33,4 @@
.is-fullwidth {
width: 100%;
}
\ No newline at end of file
}
import React from 'react'
import ConfirmationModal from '../../components/ConfirmationModal.jsx'
import ConfirmationModal from '../ConfirmationModal.jsx'
import ColorInput from '../ColorInput.jsx'
import * as api from '../../api.jsx'
import Notification from 'react-bulma-notification'
......@@ -131,15 +132,24 @@ class EditPanel extends React.Component {
<div className='panel-block attach-bottom'>
<div className='field-body'>
<div className='field no-grow'>
<p className='label'>Score</p>
<div className='control is-score-control'>
<input className='input is-small' placeholder='#'
value={this.state.score} onChange={this.changeScore} onKeyDown={this.key} />
<ColorInput
placeholder='7'
value={this.state.score}
onChange={this.changeScore}
onKeyDown={this.key} />
</div>
</div>
<div className='field grow'>
<p className='label'>Name</p>
<div className='control'>
<input className='input' placeholder='Name' name='name'
value={this.state.name} onChange={this.changeText} onKeyDown={this.key} />
<ColorInput
placeholder='e.g. Correct solution'
name='name'
value={this.state.name}
onChange={this.changeText}
onKeyDown={this.key} />
</div>
</div>
</div>
......@@ -148,8 +158,13 @@ class EditPanel extends React.Component {
<div className='field is-fullwidth'>
<label className='label'>Description</label>
<div className='control has-icons-left'>
<textarea className='input' style={{height: '4rem'}} placeholder='Description' name='description'
value={this.state.description} onChange={this.changeText} onKeyDown={this.key} />
<textarea className='input'
style={{height: '4rem'}}
placeholder='Description'
name='description'
value={this.state.description}
onChange={this.changeText}
onKeyDown={this.key} />
<span className='icon is-small is-left'>
<i className='fa fa-comment-o' />
</span>
......
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