['file history' page] redesigned it for markdown file; fixed UI for c…

…ommon files in production environment (#5725)
haiwen · Oct 31, 2023 · 955c292 · 955c292
1 parent 737eb89
commit 955c292
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 48 deletions.
diff --git a/frontend/src/css/file-history.css b/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;
 }
 

diff --git a/frontend/src/file-history-old.js b/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}/>
-          </div>
-          <div className='toolbar'>
-            <CommonToolbar onSearchedClick={this.onSearchedClick} />
-          </div>
+          <Logo showCloseSidePanelIcon={false} />
+          <CommonToolbar onSearchedClick={this.onSearchedClick} />
         </div>
         <div id="main" onScroll={this.onScrollHandler}>
           <div className="old-history-main">
             <Fragment>
-              {/* eslint-disable-next-line */}
-              <a href="javascript:window.history.back()" className="go-back" title="Back">
+              <a href="#" className="go-back" title="Back" onClick={this.goBack}>
                 <span className="fas fa-chevron-left"></span>
               </a>
               <h2><span className="file-name">{fileName}</span>{' '}{gettext('History Versions')}</h2>

diff --git a/frontend/src/file-history.js b/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(
-      <Fragment>
-        <div id="header" className="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>
+    return (
+      <div className="history-content flex-fill d-flex">
+        <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>
-          <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}
           />
-          <SidePanel onItemClick={this.onHistoryItemClick}/>
         </div>
-      </Fragment>
+        <SidePanel onItemClick={this.onHistoryItemClick}/>
+      </div>
     );
   }
 }

diff --git a/frontend/src/pages/file-history/main-panel.js b/frontend/src/pages/file-history/main-panel.js
@@ -25,21 +25,17 @@ class MainPanel extends React.Component {
 
   render() {
     return (
-      <div className="main-panel">
-        <div className="main-panel-center content-viewer">
-          <div className={contentClass}>
-            {
-              this.props.renderingContent ?
-                (<Loading />) :
-                (<div className="diff-view article">
-                  <DiffViewer
-                    scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
-                    newMarkdownContent={this.props.newMarkdownContent}
-                    oldMarkdownContent={this.props.oldMarkdownContent}
-                  />
-                </div>)
-            }
-          </div>
+      <div className="content-viewer flex-fill">
+        <div className={contentClass}>
+          {this.props.renderingContent ?
+            (<Loading />) :
+            (<div className="diff-view article">
+              <DiffViewer
+                scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
+                newMarkdownContent={this.props.newMarkdownContent}
+                oldMarkdownContent={this.props.oldMarkdownContent}
+              />
+            </div>)}
         </div>
       </div>
     );