Wiki coding style improve (#2380)

frontend/src/components/constants.js

@@ -16,8 +16,7 @@ export const slug = window.wiki ? window.wiki.config.slug : '';
 export const repoID = window.wiki ? window.wiki.config.repoId : '';
 export const serviceUrl = window.wiki ? window.wiki.config.serviceUrl : '';
 export const initialFilePath = window.wiki ? window.wiki.config.initial_file_path : '';
-export const permission = window.wiki ? window.wiki.config.permission : '';
-
+export const permission = window.wiki ? window.wiki.config.permission === 'True' : '';
 
 // file history
 export const PER_PAGE = 25;

frontend/src/components/search/search-result-item.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 class SearchResultItem extends React.Component {
 

frontend/src/components/search/search.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import { gettext, repoID } from './constants';
+import { gettext, repoID } from '../constants';
 import SearchResultItem from './search-result-item';
-import editorUtilities from '../utils/editor-utilties';
+import editorUtilities from '../../utils/editor-utilties';
 
 class Search extends Component {
 
@@ -192,10 +192,11 @@ class Search extends Component {
       <div className="search">
         <div className={`search-mask ${this.state.isMaskShow ? "" : "hide"}`} onClick={this.onCloseHandler}></div>
         <div className="search-container">
-          <div className="search-input-container">
+          <div className="input-icon">
+            <i className="search-icon-left input-icon-addon fas fa-search"></i>
             <input 
               type="text" 
-              className="search-input" 
+              className="form-control search-input" 
               name="query"
               placeholder={this.props.placeholder}
               style={style}
@@ -204,8 +205,7 @@ class Search extends Component {
               onChange={this.onChangeHandler}
               autoComplete="off"
             />
-            <a className="search-icon fas fa-search"></a>
-            <a className={`search-icon sf2-icon-x3 ${this.state.isCloseShow ? "" : "hide"}`} onClick={this.onCloseHandler}></a>
+            <i className={`search-icon-right input-icon-addon sf2-icon-close ${this.state.isCloseShow ? "" : "hide"}`} onClick={this.onCloseHandler}></i>
           </div>
           <div className="search-result-container">
             {this.renderSearchResult()}

frontend/src/components/toolbar/path-toolbar.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { gettext, repoID, permission, siteRoot, initialFilePath } from '../constants';
+
+function PathToolbar() {
+
+  let trashUrl = '';
+  let historyUrl = '';
+  if (initialFilePath === '/' && permission) {
+    trashUrl = siteRoot + 'repo/recycle/' + repoID + '/?referer=' + encodeURIComponent(location.href);
+    historyUrl = siteRoot + 'repo/history/' + repoID + '/?referer=' + encodeURIComponent(location.href);
+    return (
+      <ul className="path-toolbar">
+        <li className="toolbar-item"><a className="op-link sf2-icon-trash" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a></li>
+        <li className="toolbar-item"><a className="op-link sf2-icon-history" href={historyUrl} title={gettext('History')} aria-label={gettext('History')}></a></li>
+      </ul>
+    );
+  } else if (permission) {
+    trashUrl = siteRoot + 'dir/recycle/' + repoID + '/?dir_path=' + encodeURIComponent(initialFilePath);
+    return (
+      <ul className="path-toolbar">
+        <li className="toolbar-item"><a className="op-link sf2-icon-trash" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a></li>
+      </ul>
+    );
+  }
+  return '';
+
+}
+
+export default PathToolbar;

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>

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

@@ -124,7 +124,7 @@ class TreeNodeView extends React.Component {
   }
 
   renderMenuController() {
-    if (permission === "True") {
+    if (permission) {
       let isShow = (this.props.node.path === this.props.currentFilePath);
       return (
         <div className="right-icon">