[Задача 12799] Добавил кнопку редактирования исправленного текста

parent 9bdb5a56
import React, {Component} from 'react'; import React, {Component} from 'react';
import FaCheckCircle from 'react-icons/lib/fa/check-circle'; import FaCheckCircle from 'react-icons/lib/fa/check-circle';
import FaTimesCircle from 'react-icons/lib/fa/times-circle'; import FaTimesCircle from 'react-icons/lib/fa/times-circle';
import FaEdit from 'react-icons/lib/fa/edit';
import './style.css' import './style.css'
...@@ -41,11 +42,11 @@ export default class EditableText extends Component { ...@@ -41,11 +42,11 @@ export default class EditableText extends Component {
} }
return ( return (
<span onClick={this.enableEditing.bind(this)}>{this.text}</span> <span>{this.text} <FaEdit className="text-editable-button" onClick={this.enableEditing} /></span>
); );
} }
enableEditing() { enableEditing = () => {
this.setState({ this.setState({
isEditable: true isEditable: true
}); });
......
...@@ -14,10 +14,29 @@ ...@@ -14,10 +14,29 @@
} }
.text-editable-button:hover { .text-editable-button:hover {
background-color: rgba(0, 0, 0, 0.2); -webkit-animation: pulse 800ms linear infinite;
-o-animation: pulse 800ms linear infinite;
animation: pulse 800ms linear infinite;
} }
.text-editable-wrapper .button-wrapper { .text-editable-wrapper .button-wrapper {
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
}
/* Pulsating animation */
@keyframes pulse {
50% {transform: scale(1.1, 1.1);}
100% {transform: scale(1, 1)}
}
@-moz-keyframes pulse {
50% {-moz-transform: scale(1.1, 1.1);}
100% {-moz-transform: scale(1, 1)}
}
@-webkit-keyframes pulse {
50% {-webkit-transform: scale(1.1, 1.1);}
100% {-webkit-transform: scale(1, 1)}
} }
\ No newline at end of file
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