Wiki coding style improve (#2380)

frontend/src/components/tree-dir-view/tree-dir-list.js

@@ -5,10 +5,23 @@ class TreeDirList extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isMourseEnter: false
+      isMourseEnter: false,
+      highlight: '',
     }
   }
 
+  onMouseEnter = () => {
+    this.setState({
+      highlight: 'tr-highlight'
+    });
+  }
+
+  onMouseLeave = () => {
+    this.setState({
+      highlight: '',
+    });
+  }
+
   onMainNodeClick = () => {
     this.props.onMainNodeClick(this.props.node);
   }
@@ -16,14 +29,12 @@ class TreeDirList extends React.Component {
   render() {
     let node = this.props.node;
     return (
-      <tr className='row' onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td className="dirent-icon" style={{width: "5%"}}>
+      <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td className="icon" style={{width: "4%"}}>
           <img src={node.type === "dir" ? serviceUrl + "/media/img/folder-192.png" : serviceUrl + "/media/img/file/192/txt.png"}></img>
         </td>
-        <td style={{width: "60%"}}>
-          <a className="custom-link" onClick={this.onMainNodeClick}>{node.name}</a>
-        </td>
-        <td style={{width: "15%"}}>{node.size}</td>
+        <td className="name a-simulate" style={{width: "60%"}} onClick={this.onMainNodeClick}>{node.name}</td>
+        <td style={{width: "16%"}}>{node.size}</td>
         <td style={{width: "20%"}} title={node.last_update_time}>{node.last_update_time}</td>
       </tr>
     )

frontend/src/components/tree-dir-view/tree-dir-view.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import TreeDirList from './tree-dir-list'
-import "../../css/tree-dir-view.css";
+import "../../css/common.css";
 const gettext = window.gettext;
 
 class TreeDirView extends React.Component {
@@ -9,16 +9,16 @@ class TreeDirView extends React.Component {
     let children = node.hasChildren() ? node.children : null;
 
     return (
-      <table className="doc-view-container">
-        <thead className="doc-view-header">
-          <tr className="row">
-            <th style={{width: "5%"}}></th>
+      <table>
+        <thead>
+          <tr>
+            <th style={{width: "4%"}}></th>
             <th style={{width: "60%"}}>{gettext('Name')}</th>
-            <th style={{width: "15%"}}>{gettext('Size')}</th>
+            <th style={{width: "16%"}}>{gettext('Size')}</th>
             <th style={{width: "20%"}}>{gettext('Last Update')}</th>
           </tr>
         </thead>
-        <tbody className="doc-view-body">
+        <tbody>
           {children && children.map((node, index) => {
             return (
               <TreeDirList key={index} node={node} onMainNodeClick={this.props.onMainNodeClick}></TreeDirList>