repair activity icon (#3015)

frontend/src/css/files-activities.css

@@ -1,6 +1,6 @@
 table tr .activity-date {
   border-top: 0;
 }
-table td .created-files-detail {
+table td .activity-detail {
-  display: inline-block;
+  display: inline;
 }

frontend/src/pages/dashboard/files-activities.js

@@ -31,7 +31,18 @@ class FileActivitiesContent extends Component {
             <col width="37%" />
             <col width="20%" />
           </colgroup>
-          <TableBody items={items} />
+          <tbody>
+            {items.map((item, index) => {
+              return (
+                <ActivityItem 
+                  key={index}
+                  item={item}
+                  index={index}
+                  items={items}
+                />
+              );
+            })}
+          </tbody>
         </table>
         {isLoadingMore ? <span className="loading-icon loading-tip"></span> : ''}
       </Fragment>
@@ -41,30 +52,42 @@ class FileActivitiesContent extends Component {
 
 FileActivitiesContent.propTypes = contentPropTypes;
 
-
+const activityPropTypes = {
-const tablePropTypes = {
+  item: PropTypes.object.isRequired,
+  index: PropTypes.number.isRequired,
   items: PropTypes.array.isRequired,
 };
 
-class TableBody extends Component {
+class ActivityItem extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
       isListCreatedFiles: false,
-      activity: '',
+      active: false,
     };
   }
 
-  onListCreatedFilesToggle = (activity) => {
+  onMouseEnter = () => {
+    this.setState({
+      active: true
+    });
+  }
+
+  onMouseLeave = () => {
+    this.setState({
+      active: false
+    });
+  }
+
+  onListCreatedFilesToggle = () => {
     this.setState({
       isListCreatedFiles: !this.state.isListCreatedFiles,
-      activity: activity,
     });
   }
 
   render() {
-    let listFilesActivities = this.props.items.map(function(item, index) {
+    let {item, index, items} = this.props;
     let op, details;
     let userProfileURL = `${siteRoot}profile/${encodeURIComponent(item.author_email)}/`;
 
@@ -126,8 +149,8 @@ class TableBody extends Component {
       op = gettext('Created {n} files').replace('{n}', item.createdFilesCount);
       details =
         <td>
-            <div className="created-files-detail" dangerouslySetInnerHTML={{__html: firstLine}}></div>
+          <div className="activity-detail" dangerouslySetInnerHTML={{__html: firstLine}}></div>{' '}
-            {' '}<i className="fas fa-eye" onClick={this.onListCreatedFilesToggle.bind(this, item)}></i>
+          {this.state.active && <i className="attr-action-icon fas fa-eye" onClick={this.onListCreatedFilesToggle}></i>}
           <br />{smallLibLink}
         </td>;
     } else if (item.obj_type == 'file') {
@@ -205,18 +228,18 @@ class TableBody extends Component {
 
     let isShowDate = true;
     if (index > 0) {
-        let lastEventTime = this.props.items[index - 1].time;
+      let lastEventTime = items[index - 1].time;
       isShowDate = moment(item.time).isSame(lastEventTime, 'day') ? false : true;
     }
 
     return (
-        <Fragment key={index}>
+      <Fragment>
         { isShowDate &&
           <tr>
             <td colSpan='5' className="activity-date">{moment(item.time).format('YYYY-MM-DD')}</td>
           </tr>
         }
-          <tr>
+        <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
           <td className="text-center">
             <img src={item.avatar_url} alt="" width="36px" height="36px" className="avatar" />
           </td>
@@ -229,17 +252,10 @@ class TableBody extends Component {
             <time datetime={item.time} is="relative-time" title={moment(item.time).format('llll')}>{moment(item.time).fromNow()}</time>
           </td>
         </tr>
-        </Fragment>
-      );
-    }, this);
-
-    return (
-      <Fragment>
-        <tbody>{listFilesActivities}</tbody>
         {this.state.isListCreatedFiles &&
           <ModalPortal>
             <ListCreatedFileDialog
-              activity={this.state.activity}
+              activity={item}
               toggleCancel={this.onListCreatedFilesToggle}
             />
           </ModalPortal>
@@ -249,7 +265,7 @@ class TableBody extends Component {
   }
 }
 
-TableBody.propTypes = tablePropTypes;
+ActivityItem.propTypes = activityPropTypes;
 
 class FilesActivities extends Component {
   constructor(props) {