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 {
-  display: inline-block;
+table td .activity-detail {
+  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,205 +52,210 @@ class FileActivitiesContent extends Component {
 
 FileActivitiesContent.propTypes = contentPropTypes;
 
-
-const tablePropTypes = {
+const activityPropTypes = {
+  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 op, details;
-      let userProfileURL = `${siteRoot}profile/${encodeURIComponent(item.author_email)}/`;
+    let {item, index, items} = this.props;
+    let op, details;
+    let userProfileURL = `${siteRoot}profile/${encodeURIComponent(item.author_email)}/`;
 
-      let libURL = siteRoot + 'library/' + item.repo_id + '/' + encodeURIComponent(item.repo_name) + '/';
-      let libLink = <a href={libURL}>{item.repo_name}</a>;
-      let smallLibLink = <a className="small text-secondary" href={libURL}>{item.repo_name}</a>;
+    let libURL = siteRoot + 'library/' + item.repo_id + '/' + encodeURIComponent(item.repo_name) + '/';
+    let libLink = <a href={libURL}>{item.repo_name}</a>;
+    let smallLibLink = <a className="small text-secondary" href={libURL}>{item.repo_name}</a>;
 
-      if (item.obj_type == 'repo') {
-        switch(item.op_type) {
-          case 'create':
-            op = gettext('Created library');
-            details = <td>{libLink}</td>;
-            break;
-          case 'rename':
-            op = gettext('Renamed library');
-            details = <td>{item.old_repo_name} => {libLink}</td>;
-            break;
-          case 'delete':
-            op = gettext('Deleted library');
-            details = <td>{item.repo_name}</td>;
-            break;
-          case 'recover':
-            op = gettext('Restored library');
-            details = <td>{libLink}</td>;
-            break;
-          case 'clean-up-trash':
-            if (item.days == 0) {
-              op = gettext('Removed all items from trash.');
-            } else {
-              op = gettext('Removed items older than {n} days from trash.').replace('{n}', item.days);
-            }
-            details = <td>{libLink}</td>;
-            break;
-        }
-      } else if (item.obj_type == 'review') {
-        let fileURL = `${siteRoot}drafts/review/${item.review_id}`;
-        let fileLink = <a href={fileURL} target="_blank">{item.name}</a>;
-        switch(item.op_type) {
-          case 'open':
-            op = gettext('Open review');
-            details = <td>{fileLink}<br />{smallLibLink}</td>;
-            break;
-          case 'closed':
-            op = gettext('Close review');
-            details = <td>{fileLink}<br />{smallLibLink}</td>;
-            break;
-          case 'finished':
-            op = gettext('Publish draft');
-            details = <td>{fileLink}<br />{smallLibLink}</td>;
-            break;
-        }
-      } else if (item.obj_type == 'files') {
-        let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
-        let fileLink = `<a href=${fileURL} target="_blank">${item.name}</a>`;
-        let fileCount = item.createdFilesCount - 1;
-        let firstLine = gettext('{file} and {n} other files');
-        firstLine = firstLine.replace('{file}', fileLink);
-        firstLine = firstLine.replace('{n}', fileCount);
-        op = gettext('Created {n} files').replace('{n}', item.createdFilesCount);
-        details =
-          <td>
-            <div className="created-files-detail" dangerouslySetInnerHTML={{__html: firstLine}}></div>
-            {' '}<i className="fas fa-eye" onClick={this.onListCreatedFilesToggle.bind(this, item)}></i>
-            <br />{smallLibLink}
-          </td>;
-      } else if (item.obj_type == 'file') {
-        let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
-        let fileLink = <a href={fileURL} target="_blank">{item.name}</a>;
-        switch(item.op_type) {
-          case 'create':
-            if (item.name.endsWith('(draft).md')) {
-              op = gettext('Created draft');
-              details = <td>{fileLink}<br />{smallLibLink}</td>;
-              break;
-            }
-            op = gettext('Created file');
-            details = <td>{fileLink}<br />{smallLibLink}</td>;
-            break;
-          case 'delete':
-            if (item.name.endsWith('(draft).md')) {
-              op = gettext('Deleted draft');
-              details = <td>{item.name}<br />{smallLibLink}</td>;
-              break;
-            }
-            op = gettext('Deleted file');
-            details = <td>{item.name}<br />{smallLibLink}</td>;
-            break;
-          case 'recover':
-            op = gettext('Restored file');
-            details = <td>{fileLink}<br />{smallLibLink}</td>;
-            break;
-          case 'rename':
-            op = gettext('Renamed file');
-            details = <td>{item.old_name} => {fileLink}<br />{smallLibLink}</td>;
-            break;
-          case 'move':
-            var filePathLink = <a href={fileURL}>{item.path}</a>;
-            op = gettext('Moved file');
-            details = <td>{item.old_path} => {filePathLink}<br />{smallLibLink}</td>;
-            break;
-          case 'edit': // update
-            if (item.name.endsWith('(draft).md')) {
-              op = gettext('Updated draft');
-              details = <td>{fileLink}<br />{smallLibLink}</td>;
-              break;
-            }
-            op = gettext('Updated file');
-            details = <td>{fileLink}<br />{smallLibLink}</td>;
-            break;
-        }
-      } else { // dir
-        let dirURL = siteRoot + 'library/' + item.repo_id + '/' + encodeURIComponent(item.repo_name) + Utils.encodePath(item.path);
-        let dirLink = <a href={dirURL} target="_blank">{item.name}</a>;
-        switch(item.op_type) {
-          case 'create':
-            op = gettext('Created folder');
-            details = <td>{dirLink}<br />{smallLibLink}</td>;
-            break;
-          case 'delete':
-            op = gettext('Deleted folder');
-            details = <td>{item.name}<br />{smallLibLink}</td>;
-            break;
-          case 'recover':
-            op = gettext('Restored folder');
-            details = <td>{dirLink}<br />{smallLibLink}</td>;
-            break;
-          case 'rename':
-            op = gettext('Renamed folder');
-            details = <td>{item.old_name} => {dirLink}<br />{smallLibLink}</td>;
-            break;
-          case 'move':
-            var dirPathLink = <a href={dirURL}>{item.path}</a>;
-            op = gettext('Moved folder');
-            details = <td>{item.old_path} => {dirPathLink}<br />{smallLibLink}</td>;
-            break;
-        }
-      }
-
-      let isShowDate = true;
-      if (index > 0) {
-        let lastEventTime = this.props.items[index - 1].time;
-        isShowDate = moment(item.time).isSame(lastEventTime, 'day') ? false : true;
-      }
-
-      return (
-        <Fragment key={index}>
-          { isShowDate &&
-            <tr>
-              <td colSpan='5' className="activity-date">{moment(item.time).format('YYYY-MM-DD')}</td>
-            </tr>
+    if (item.obj_type == 'repo') {
+      switch(item.op_type) {
+        case 'create':
+          op = gettext('Created library');
+          details = <td>{libLink}</td>;
+          break;
+        case 'rename':
+          op = gettext('Renamed library');
+          details = <td>{item.old_repo_name} => {libLink}</td>;
+          break;
+        case 'delete':
+          op = gettext('Deleted library');
+          details = <td>{item.repo_name}</td>;
+          break;
+        case 'recover':
+          op = gettext('Restored library');
+          details = <td>{libLink}</td>;
+          break;
+        case 'clean-up-trash':
+          if (item.days == 0) {
+            op = gettext('Removed all items from trash.');
+          } else {
+            op = gettext('Removed items older than {n} days from trash.').replace('{n}', item.days);
           }
-          <tr>
-            <td className="text-center">
-              <img src={item.avatar_url} alt="" width="36px" height="36px" className="avatar" />
-            </td>
-            <td>
-              <a href={userProfileURL}>{item.author_name}</a>
-            </td>
-            <td><span className="activity-op">{op}</span></td>
-            {details}
-            <td className="text-secondary">
-              <time datetime={item.time} is="relative-time" title={moment(item.time).format('llll')}>{moment(item.time).fromNow()}</time>
-            </td>
-          </tr>
-        </Fragment>
-      );
-    }, this);
+          details = <td>{libLink}</td>;
+          break;
+      }
+    } else if (item.obj_type == 'review') {
+      let fileURL = `${siteRoot}drafts/review/${item.review_id}`;
+      let fileLink = <a href={fileURL} target="_blank">{item.name}</a>;
+      switch(item.op_type) {
+        case 'open':
+          op = gettext('Open review');
+          details = <td>{fileLink}<br />{smallLibLink}</td>;
+          break;
+        case 'closed':
+          op = gettext('Close review');
+          details = <td>{fileLink}<br />{smallLibLink}</td>;
+          break;
+        case 'finished':
+          op = gettext('Publish draft');
+          details = <td>{fileLink}<br />{smallLibLink}</td>;
+          break;
+      }
+    } else if (item.obj_type == 'files') {
+      let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
+      let fileLink = `<a href=${fileURL} target="_blank">${item.name}</a>`;
+      let fileCount = item.createdFilesCount - 1;
+      let firstLine = gettext('{file} and {n} other files');
+      firstLine = firstLine.replace('{file}', fileLink);
+      firstLine = firstLine.replace('{n}', fileCount);
+      op = gettext('Created {n} files').replace('{n}', item.createdFilesCount);
+      details =
+        <td>
+          <div className="activity-detail" dangerouslySetInnerHTML={{__html: firstLine}}></div>{' '}
+          {this.state.active && <i className="attr-action-icon fas fa-eye" onClick={this.onListCreatedFilesToggle}></i>}
+          <br />{smallLibLink}
+        </td>;
+    } else if (item.obj_type == 'file') {
+      let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
+      let fileLink = <a href={fileURL} target="_blank">{item.name}</a>;
+      switch(item.op_type) {
+        case 'create':
+          if (item.name.endsWith('(draft).md')) {
+            op = gettext('Created draft');
+            details = <td>{fileLink}<br />{smallLibLink}</td>;
+            break;
+          }
+          op = gettext('Created file');
+          details = <td>{fileLink}<br />{smallLibLink}</td>;
+          break;
+        case 'delete':
+          if (item.name.endsWith('(draft).md')) {
+            op = gettext('Deleted draft');
+            details = <td>{item.name}<br />{smallLibLink}</td>;
+            break;
+          }
+          op = gettext('Deleted file');
+          details = <td>{item.name}<br />{smallLibLink}</td>;
+          break;
+        case 'recover':
+          op = gettext('Restored file');
+          details = <td>{fileLink}<br />{smallLibLink}</td>;
+          break;
+        case 'rename':
+          op = gettext('Renamed file');
+          details = <td>{item.old_name} => {fileLink}<br />{smallLibLink}</td>;
+          break;
+        case 'move':
+          var filePathLink = <a href={fileURL}>{item.path}</a>;
+          op = gettext('Moved file');
+          details = <td>{item.old_path} => {filePathLink}<br />{smallLibLink}</td>;
+          break;
+        case 'edit': // update
+          if (item.name.endsWith('(draft).md')) {
+            op = gettext('Updated draft');
+            details = <td>{fileLink}<br />{smallLibLink}</td>;
+            break;
+          }
+          op = gettext('Updated file');
+          details = <td>{fileLink}<br />{smallLibLink}</td>;
+          break;
+      }
+    } else { // dir
+      let dirURL = siteRoot + 'library/' + item.repo_id + '/' + encodeURIComponent(item.repo_name) + Utils.encodePath(item.path);
+      let dirLink = <a href={dirURL} target="_blank">{item.name}</a>;
+      switch(item.op_type) {
+        case 'create':
+          op = gettext('Created folder');
+          details = <td>{dirLink}<br />{smallLibLink}</td>;
+          break;
+        case 'delete':
+          op = gettext('Deleted folder');
+          details = <td>{item.name}<br />{smallLibLink}</td>;
+          break;
+        case 'recover':
+          op = gettext('Restored folder');
+          details = <td>{dirLink}<br />{smallLibLink}</td>;
+          break;
+        case 'rename':
+          op = gettext('Renamed folder');
+          details = <td>{item.old_name} => {dirLink}<br />{smallLibLink}</td>;
+          break;
+        case 'move':
+          var dirPathLink = <a href={dirURL}>{item.path}</a>;
+          op = gettext('Moved folder');
+          details = <td>{item.old_path} => {dirPathLink}<br />{smallLibLink}</td>;
+          break;
+      }
+    }
+
+    let isShowDate = true;
+    if (index > 0) {
+      let lastEventTime = items[index - 1].time;
+      isShowDate = moment(item.time).isSame(lastEventTime, 'day') ? false : true;
+    }
 
     return (
       <Fragment>
-        <tbody>{listFilesActivities}</tbody>
+        { isShowDate &&
+          <tr>
+            <td colSpan='5' className="activity-date">{moment(item.time).format('YYYY-MM-DD')}</td>
+          </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>
+          <td>
+            <a href={userProfileURL}>{item.author_name}</a>
+          </td>
+          <td><span className="activity-op">{op}</span></td>
+          {details}
+          <td className="text-secondary">
+            <time datetime={item.time} is="relative-time" title={moment(item.time).format('llll')}>{moment(item.time).fromNow()}</time>
+          </td>
+        </tr>
         {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) {