From 3401b0f00e7e9541f6a09396901c3de365efca04 Mon Sep 17 00:00:00 2001
From: Roosted7 <thomasroos@live.nl>
Date: Mon, 26 Mar 2018 13:36:55 +0200
Subject: [PATCH] Improved visuals feedback block
---
client/views/grade/FeedbackBlock.jsx | 29 +++++++++++++++++++++++---
client/views/grade/ProblemSelector.jsx | 2 +-
2 files changed, 27 insertions(+), 4 deletions(-)
diff --git a/client/views/grade/FeedbackBlock.jsx b/client/views/grade/FeedbackBlock.jsx
index 4b467c8eb..a18b3b266 100644
--- a/client/views/grade/FeedbackBlock.jsx
+++ b/client/views/grade/FeedbackBlock.jsx
@@ -2,17 +2,40 @@ import React from 'react';
class FeedbackBlock extends React.Component {
+ state = {
+ hover: false
+ }
+ leave = () => {
+ this.setState({
+ hover: false
+ })
+ }
+ enter = () => {
+ this.setState({
+ hover: true
+ })
+ }
+
render() {
+ const score = this.props.feedback.score;
+
return (
- <a className="panel-block is-active" onClick={this.props.onClick} >
+ <a className="panel-block is-active" onClick={() => !this.state.hover && console.log('a click')} >
<span className="panel-icon">
<i className={"fa fa-" + (this.props.checked ? "check-square-o" : "square-o")}></i>
</span>
- <div style={{ width: '80%' }}>
+ <span style={{ width: '80%' }}>
{this.props.feedback.name}
+ </span>
+ <div className="field is-grouped">
+ <div className="control" onMouseEnter={this.enter} onMouseLeave={this.leave} >
+ <div className="tags has-addons">
+ {score ? <span className="tag is-link">{this.props.feedback.score}</span> : null}
+ <span className={"tag" + (this.state.hover ? " is-white" : "")} onClick={() => console.log('pencil click')}> <i className="fa fa-pencil"></i></span>
+ </div>
+ </div>
</div>
- <i>{this.props.feedback.score}</i>
</a>
)
}
diff --git a/client/views/grade/ProblemSelector.jsx b/client/views/grade/ProblemSelector.jsx
index 3614c932b..a4b170f30 100644
--- a/client/views/grade/ProblemSelector.jsx
+++ b/client/views/grade/ProblemSelector.jsx
@@ -21,7 +21,7 @@ class ProblemSelector extends React.Component {
render() {
return (
<div className="field">
- <label className="label">Problem:</label>
+ <label className="label">Problem</label>
<div className="control has-icons-left">
<div className="select is-fullwidth">
<select value={this.props.name}
--
GitLab