allow avatar removal

css/base.css

@@ -868,6 +868,7 @@ i.search {
 /* Styling of avatar upload control */
 .avatar-upload {
   display: flex;
+  position: relative;
   flex-direction: column;
   flex-shrink: 0;
   width: 7rem;
@@ -877,6 +878,19 @@ i.search {
   padding: 0;
 }
 
+.avatar-upload .clear-avatar {
+  position: absolute;
+  font-size: 1rem;
+  top: 0;
+  right: 0;
+  opacity: 0;
+  background-image: radial-gradient(#fff 40%, transparent 75%);
+}
+
+.avatar-upload:hover .clear-avatar {
+  opacity: 1;
+}
+
 .avatar-upload .avatar-box {
   position: relative;
   width: 7rem;

src/widgets/avatar-upload.jsx

@@ -14,6 +14,7 @@ export default class AvatarUpload extends React.Component {
     };
 
     this.handleFileUpload = this.handleFileUpload.bind(this);
+    this.handleClear = this.handleClear.bind(this);
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -41,12 +42,21 @@ export default class AvatarUpload extends React.Component {
     e.target.value = '';
   }
 
+  handleClear() {
+    this.props.onImageChanged(null);
+  }
+
   render() {
     // Randomize id value in case more than one AvatarUpload is shown
     // at the same time.
     var randId = "file-input-avatar-" + (Math.random() + '').substr(2);
     return (
       <div className="avatar-upload">
+        {this.props.readOnly || !this.state.dataUrl ?
+          null :
+          <a href="javascript:;" className="clear-avatar" onClick={this.handleClear}>
+            <i className="material-icons">clear</i>
+          </a>}
         {this.state.dataUrl ?
           <img src={this.state.dataUrl} className="preview" /> :
           this.props.readOnly && this.props.uid ?