Commit 7584046e authored by Adrià Labay's avatar Adrià Labay
Browse files

include labels in inputs and dynamic colour in feedback panel edit

parent 58d711aa
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