['file history' page] redesigned it for markdown file; fixed UI for common files in production environment (#5725)

frontend/src/css/file-history.css

@@ -7,6 +7,12 @@
   font-size: 1rem;
   padding: 0.5rem 1rem;
 }
+
+.file-history-header { /* for markdown file history */
+  background-color: #fff;
+  height: 50px;
+}
+
 .history-header .title {
   font-size: 1.25rem;
   line-height: 1rem;
@@ -95,7 +101,7 @@
   line-height: 50px;
   font-size: 1rem;
   padding: 0 10px;
-  background-color: rgb(250,250,249);
+  /*background-color: rgb(250,250,249);*/
   font-weight: bolder;
 }
 

frontend/src/file-history-old.js

@@ -216,22 +216,22 @@ class FileHistory extends React.Component {
     Utils.handleSearchedItemClick(searchedItem);
   };
 
+  goBack = (e) => {
+    e.preventDefault();
+    window.history.back();
+  }
+
   render() {
     return (
       <Fragment>
         <div id="header" className="old-history-header">
-          <div className="logo">
+          <Logo showCloseSidePanelIcon={false} />
-            <Logo showCloseSidePanelIcon={false}/>
-          </div>
-          <div className='toolbar'>
           <CommonToolbar onSearchedClick={this.onSearchedClick} />
         </div>
-        </div>
         <div id="main" onScroll={this.onScrollHandler}>
           <div className="old-history-main">
             <Fragment>
-              {/* eslint-disable-next-line */}
+              <a href="#" className="go-back" title="Back" onClick={this.goBack}>
-              <a href="javascript:window.history.back()" className="go-back" title="Back">
                 <span className="fas fa-chevron-left"></span>
               </a>
               <h2><span className="file-name">{fileName}</span>{' '}{gettext('History Versions')}</h2>

frontend/src/file-history.js

@@ -1,17 +1,13 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import ReactDom from 'react-dom';
 import axios from 'axios';
 import { fileName, historyRepoID } from './utils/constants';
-import { Utils } from './utils/utils';
-import CommonToolbar from './components/toolbar/common-toolbar';
 import SidePanel from './pages/file-history/side-panel';
 import MainPanel from './pages/file-history/main-panel';
 import { seafileAPI } from './utils/seafile-api';
 
 import './css/layout.css';
 import './css/file-history.css';
-import './css/toolbar.css';
-import './css/search.css';
 
 class FileHistory extends React.Component {
 
@@ -24,10 +20,6 @@ class FileHistory extends React.Component {
     };
   }
 
-  onSearchedClick = (searchedItem) => {
-    Utils.handleSearchedItemClick(searchedItem);
-  };
-
   setDiffContent = (newMarkdownContent, oldMarkdownContent)=> {
     this.setState({
       renderingContent: false,
@@ -68,28 +60,25 @@ class FileHistory extends React.Component {
   };
 
   render() {
-    return(
+    return (
-      <Fragment>
+      <div className="history-content flex-fill d-flex">
-        <div id="header" className="history-header">
+        <div className="flex-fill d-flex flex-column">
+          <div className="history-header file-history-header">
             <div className="title">
               <a href="#" className="go-back" title="Back" onClick={this.onBackClick}>
                 <span className="fas fa-chevron-left"></span>
               </a>
               <span className="name">{fileName}</span>
             </div>
-          <div className='toolbar'>
-            <CommonToolbar onSearchedClick={this.onSearchedClick} />
           </div>
-        </div>
-        <div id="main" className="history-content">
           <MainPanel
             newMarkdownContent={this.state.newMarkdownContent}
             oldMarkdownContent={this.state.oldMarkdownContent}
             renderingContent={this.state.renderingContent}
           />
+        </div>
         <SidePanel onItemClick={this.onHistoryItemClick}/>
       </div>
-      </Fragment>
     );
   }
 }

frontend/src/pages/file-history/main-panel.js

@@ -25,11 +25,9 @@ class MainPanel extends React.Component {
 
   render() {
     return (
-      <div className="main-panel">
+      <div className="content-viewer flex-fill">
-        <div className="main-panel-center content-viewer">
         <div className={contentClass}>
-            {
+          {this.props.renderingContent ?
-              this.props.renderingContent ?
             (<Loading />) :
             (<div className="diff-view article">
               <DiffViewer
@@ -37,9 +35,7 @@ class MainPanel extends React.Component {
                 newMarkdownContent={this.props.newMarkdownContent}
                 oldMarkdownContent={this.props.oldMarkdownContent}
               />
-                </div>)
+            </div>)}
-            }
-          </div>
         </div>
       </div>
     );