Repair router compatibility (#2562)

frontend/src/app.js

@@ -79,6 +79,10 @@ class App extends Component {
     });
   }
 
+  onSearchedClick = () => {
+    //todos
+  }
+
   tabItemClick = (param) => {
     this.setState({
       currentTab: param
@@ -92,24 +96,31 @@ class App extends Component {
       <div id="main">
         <SidePanel isSidePanelClosed={this.state.isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick} draftCounts={this.state.draftCounts} />
 
-        <MainPanel onShowSidePanel={this.onShowSidePanel}>
+        <MainPanel>
           <Router>
-            <FilesActivities path={siteRoot + 'dashboard'} />
-            <DraftsView path={siteRoot + 'drafts'}  tabItemClick={this.tabItemClick} currentTab={currentTab}>
-              <DraftContent path='/' getDrafts={this.getDrafts} 
+            <FilesActivities path={siteRoot + 'dashboard'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
+            <DraftsView path={siteRoot + 'drafts'}  
+              currentTab={currentTab} 
+              tabItemClick={this.tabItemClick} 
+              onShowSidePanel={this.onShowSidePanel} 
+              onSearchedClick={this.onSearchedClick} 
+            >
+              <DraftContent 
+                path='/' 
+                getDrafts={this.getDrafts} 
                 isLoadingDraft={this.state.isLoadingDraft}
                 draftList={this.state.draftList}
                 updateDraftsList={this.updateDraftsList}
               />
               <ReviewContent path='reviews' />
             </DraftsView>
-            <Starred path={siteRoot + 'starred'} />
-            <LinkedDevices path={siteRoot + 'linked-devices'} />
-            <ShareAdminLibraries path={siteRoot + 'share-admin-libs'} />
-            <ShareAdminFolders path={siteRoot + 'share-admin-folders'} />
-            <ShareAdminShareLinks path={siteRoot + 'share-admin-share-links'} />
-            <ShareAdminUploadLinks path={siteRoot + 'share-admin-upload-links'} />
-            <SharedLibraries path={siteRoot + 'shared-libs'} />
+            <Starred path={siteRoot + 'starred'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <LinkedDevices path={siteRoot + 'linked-devices'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <ShareAdminLibraries path={siteRoot + 'share-admin-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <ShareAdminFolders path={siteRoot + 'share-admin-folders'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <ShareAdminShareLinks path={siteRoot + 'share-admin-share-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <ShareAdminUploadLinks path={siteRoot + 'share-admin-upload-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <SharedLibraries path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
           </Router>
         </MainPanel>
       </div>

frontend/src/components/main-panel.js

@@ -1,30 +1,16 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import CommonToolbar from './toolbar/common-toolbar';
 
 const propTypes = {
   children: PropTypes.object.isRequired,
-  onShowSidePanel: PropTypes.func.isRequired,
 };
 
 class MainPanel extends Component {
 
-  onSearchedClick = () => {
-    //todos;
-  }
-
   render() {
     return (
       <div className="main-panel o-hidden">
-        <div className="main-panel-north">
-          <div className="cur-view-toolbar">
-            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
-          </div>
-          <CommonToolbar onSearchedClick={this.onSearchedClick} searchPlaceholder={'Search Files'}/>
-        </div>
-        <div className="main-panel-center">
-          {this.props.children}
-        </div>
+        {this.props.children}
       </div>
     );
   }

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

@@ -0,0 +1,35 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import CommonToolbar from './common-toolbar';
+
+const propTypes = {
+  onShowSidePanel: PropTypes.func.isRequired,
+  onSearchedClick: PropTypes.func.isRequired,
+};
+
+class GeneralToolbar extends React.Component {
+
+  render() {
+    let { onShowSidePanel, onSearchedClick } = this.props;
+    let placeHolder = this.props.searchPlaceholder || 'Search files in this library';
+    return (
+      <Fragment>
+        <div className="cur-view-toolbar">
+          <span 
+            className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" 
+            title="Side Nav Menu" 
+            onClick={onShowSidePanel}>
+          </span>
+        </div>
+        <CommonToolbar 
+          searchPlaceholder={placeHolder}
+          onSearchedClick={onSearchedClick} 
+        />
+      </Fragment>
+    );
+  }
+}
+
+GeneralToolbar.propTypes = propTypes;
+
+export default GeneralToolbar;

frontend/src/css/layout.css

@@ -120,6 +120,7 @@
 [role=group] {
   display: flex;
   flex: 1;
+  flex-direction: column;
 }
 
 .header {
@@ -199,3 +200,7 @@
   background-color: #f5d2d2;
   border-color: #f1c1c0;
 }
+
+img[src=""],img:not([src]){ /* for first loading img*/
+  opacity:0;
+}

frontend/src/pages/dashboard/files-activities.js

@@ -1,7 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot } from '../../utils/constants';
+import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 const contentPropTypes = {
   data: PropTypes.object.isRequired,
@@ -244,14 +245,25 @@ class FilesActivities extends Component {
 
   render() {
     return (
-      <div className="cur-view-container" id="activities">
-        <div className="cur-view-path">
-          <h3 className="sf-heading">{gettext('Activities')}</h3>
+      <Fragment>
+        <div className="main-panel-north">
+          <GeneralToolbar 
+            searchPlaceholder={'Search Files'}
+            onShowSidePanel={this.props.onShowSidePanel}
+            onSearchedClick={this.props.onSearchedClick}
+          />
         </div>
-        <div className="cur-view-content" onScroll={this.handleScroll}>
-          <FileActivitiesContent data={this.state} />
+        <div className="main-panel-center">
+          <div className="cur-view-container" id="activities">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext('Activities')}</h3>
+            </div>
+            <div className="cur-view-content" onScroll={this.handleScroll}>
+              <FileActivitiesContent data={this.state} />
+            </div>
+          </div>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

frontend/src/pages/drafts/drafts-view.js

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { siteRoot, gettext } from '../../utils/constants';
 import { Link } from '@reach/router';
+import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 const propTypes = {
   currentTab: PropTypes.string.isRequired,
@@ -20,23 +21,30 @@ class DraftsView extends React.Component {
   
   render() {
     return (
-      <div className="cur-view-container">
-        <div className="cur-view-path">
-          <ul className="tab-tabs-nav">
-            <li className={`tab ${this.props.currentTab === 'drafts' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('drafts')}>
-              <Link  className='a' to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
-                {gettext('Drafts')}
-              </Link>
-            </li>
-            <li className={`tab ${this.props.currentTab === 'reviews' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('reviews')}>
-              <Link  className='a' to={siteRoot + 'drafts/reviews/'} title={gettext('reviews')}>
-                {gettext('Reviews')}
-              </Link>
-            </li>
-          </ul>
+      <Fragment>
+        <div className="main-panel-north">
+          <GeneralToolbar 
+            searchPlaceholder={'Search Files'}
+            onShowSidePanel={this.props.onShowSidePanel}
+            onSearchedClick={this.props.onSearchedClick}
+          />
         </div>
-        {this.props.children}
-      </div>
+        <div className="main-panel-center">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <ul className="tab-tabs-nav">
+                <li className={`tab ${this.props.currentTab === 'drafts' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('drafts')}>
+                  <Link  className='a' to={siteRoot + 'drafts/'} title={gettext('Drafts')}>{gettext('Drafts')}</Link>
+                </li>
+                <li className={`tab ${this.props.currentTab === 'reviews' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('reviews')}>
+                  <Link  className='a' to={siteRoot + 'drafts/reviews/'} title={gettext('reviews')}>{gettext('Reviews')}</Link>
+                </li>
+              </ul>
+            </div>
+            {this.props.children}
+          </div>
+        </div>
+      </Fragment>
     );
   }
 }

frontend/src/pages/linked-devices/linked-devices.js

@@ -1,10 +1,9 @@
+import React, { Component, Fragment } from 'react';
 import moment from 'moment';
-import React, { Component } from 'react';
-import Toast from '../../components/toast';
-
 import { seafileAPI } from '../../utils/seafile-api';
-import { Utils } from '../../utils/utils';
-import { gettext, siteRoot, loginUrl } from '../../utils/constants';
+import { gettext, loginUrl } from '../../utils/constants';
+import GeneralToolbar from '../../components/toolbar/general-toolbar';
+import Toast from '../../components/toast';
 
 class Content extends Component {
 
@@ -196,14 +195,25 @@ class LinkedDevices extends Component {
 
   render() {
     return (
-      <div className="cur-view-container" id="linked-devices">
-        <div className="cur-view-path">
-          <h3 className="sf-heading">{gettext('Linked Devices')}</h3>
+      <Fragment>
+        <div className="main-panel-north">
+          <GeneralToolbar 
+            searchPlaceholder={'Search Files'}
+            onShowSidePanel={this.props.onShowSidePanel}
+            onSearchedClick={this.props.onSearchedClick}
+          />
         </div>
-        <div className="cur-view-content">
-          <Content data={this.state} />
+        <div className="main-panel-center">
+          <div className="cur-view-container" id="linked-devices">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext('Linked Devices')}</h3>
+            </div>
+            <div className="cur-view-content">
+              <Content data={this.state} />
+            </div>
+          </div>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

frontend/src/pages/share-admin/folders.js

@@ -1,7 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
+import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 class Content extends Component {
 
@@ -281,14 +282,25 @@ class ShareAdminFolders extends Component {
 
   render() {
     return (
-      <div className="cur-view-container" id="share-admin-libs">
-        <div className="cur-view-path">
-          <h3 className="sf-heading">{gettext("Folders")}</h3>
+      <Fragment>
+        <div className="main-panel-north">
+          <GeneralToolbar 
+            searchPlaceholder={'Search Files'}
+            onShowSidePanel={this.props.onShowSidePanel}
+            onSearchedClick={this.props.onSearchedClick}
+          />
         </div>
-        <div className="cur-view-content">
-          <Content data={this.state} />
+        <div className="main-panel-center">
+          <div className="cur-view-container" id="share-admin-libs">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext("Folders")}</h3>
+            </div>
+            <div className="cur-view-content">
+              <Content data={this.state} />
+            </div>
+          </div>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

frontend/src/pages/share-admin/libraries.js

@@ -1,7 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
+import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 class Content extends Component {
 
@@ -288,14 +289,25 @@ class ShareAdminLibraries extends Component {
 
   render() {
     return (
-      <div className="cur-view-container" id="share-admin-libs">
-        <div className="cur-view-path">
-          <h3 className="sf-heading">{gettext("Libraries")}</h3>
+      <Fragment>
+        <div className="main-panel-north">
+          <GeneralToolbar 
+            searchPlaceholder={'Search Files'}
+            onShowSidePanel={this.props.onShowSidePanel}
+            onSearchedClick={this.props.onSearchedClick}
+          />
         </div>
-        <div className="cur-view-content">
-          <Content data={this.state} />
+        <div className="main-panel-center">
+          <div className="cur-view-container" id="share-admin-libs">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext("Libraries")}</h3>
+            </div>
+            <div className="cur-view-content">
+              <Content data={this.state} />
+            </div>
+          </div>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

frontend/src/pages/share-admin/share-links.js

@@ -1,10 +1,11 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Link } from '@reach/router';
 import moment from 'moment';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro, canGenerateUploadLink } from '../../utils/constants';
+import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 class Content extends Component {
  constructor(props) {
@@ -237,21 +238,32 @@ class ShareAdminShareLinks extends Component {
 
   render() {
     return (
-      <div className="cur-view-container">
-        <div className="cur-view-path">
-          <ul className="nav">
-            <li className="nav-item">
-              <Link to={`${siteRoot}share-admin-share-links/`} className="nav-link active">{gettext('Share Links')}</Link>
-            </li>
-            { canGenerateUploadLink ?
-              <li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link">{gettext('Upload Links')}</Link></li>
-              : '' }
-          </ul>
+      <Fragment>
+        <div className="main-panel-north">
+          <GeneralToolbar 
+            searchPlaceholder={'Search Files'}
+            onShowSidePanel={this.props.onShowSidePanel}
+            onSearchedClick={this.props.onSearchedClick}
+          />
         </div>
-        <div className="cur-view-content">
-          <Content data={this.state} />
+        <div className="main-panel-cneter">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <ul className="nav">
+                <li className="nav-item">
+                  <Link to={`${siteRoot}share-admin-share-links/`} className="nav-link active">{gettext('Share Links')}</Link>
+                </li>
+                { canGenerateUploadLink ?
+                  <li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link">{gettext('Upload Links')}</Link></li>
+                  : '' }
+              </ul>
+            </div>
+            <div className="cur-view-content">
+              <Content data={this.state} />
+            </div>
+          </div>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

frontend/src/pages/share-admin/upload-links.js

@@ -1,10 +1,11 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Link } from '@reach/router';
 import moment from 'moment';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro, canGenerateShareLink } from '../../utils/constants';
+import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 class Content extends Component {
    constructor(props) {
@@ -226,19 +227,30 @@ class ShareAdminUploadLinks extends Component {
 
   render() {
     return (
-      <div className="cur-view-container">
-        <div className="cur-view-path">
-          <ul className="nav">
-            { canGenerateShareLink ?
-            <li className="nav-item"><Link to={`${siteRoot}share-admin-share-links/`} className="nav-link">{gettext('Share Links')}</Link></li>
-              : '' }
-            <li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link active">{gettext('Upload Links')}</Link></li>
-          </ul>
+      <Fragment>
+        <div className="main-panel-north">
+          <GeneralToolbar 
+            searchPlaceholder={'Search Files'}
+            onShowSidePanel={this.props.onShowSidePanel}
+            onSearchedClick={this.props.onSearchedClick}
+          />
         </div>
-        <div className="cur-view-content">
-          <Content data={this.state} />
+        <div className="main-panel-center">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <ul className="nav">
+                { canGenerateShareLink ?
+                <li className="nav-item"><Link to={`${siteRoot}share-admin-share-links/`} className="nav-link">{gettext('Share Links')}</Link></li>
+                  : '' }
+                <li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link active">{gettext('Upload Links')}</Link></li>
+              </ul>
+            </div>
+            <div className="cur-view-content">
+              <Content data={this.state} />
+            </div>
+          </div>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

frontend/src/pages/shared-libs/shared-libs.js

@@ -1,9 +1,10 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import moment from 'moment';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
 import Loading from '../../components/loading';
+import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 class Content extends Component {
 
@@ -251,14 +252,25 @@ class SharedLibraries extends Component {
 
   render() {
     return (
-      <div className="cur-view-container">
-        <div className="cur-view-path">
-          <h3 className="sf-heading">{gettext("Shared with me")}</h3>
+      <Fragment>
+        <div className="main-panel-north">
+          <GeneralToolbar 
+            searchPlaceholder={'Search Files'}
+            onShowSidePanel={this.props.onShowSidePanel}
+            onSearchedClick={this.props.onSearchedClick}
+          />
         </div>
-        <div className="cur-view-content">
-          <Content data={this.state} />
+        <div className="main-panel-center">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext("Shared with me")}</h3>
+            </div>
+            <div className="cur-view-content">
+              <Content data={this.state} />
+            </div>
+          </div>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

frontend/src/pages/starred/starred.js

@@ -1,7 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl } from '../../utils/constants';
+import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 class Content extends Component {
 
@@ -262,14 +263,25 @@ class Starred extends Component {
 
   render() {
     return (
-      <div className="cur-view-container" id="starred">
-        <div className="cur-view-path">
-          <h3 className="sf-heading">{gettext('Favorites')}</h3>
+      <Fragment>
+        <div className="main-panel-north">
+          <GeneralToolbar 
+            searchPlaceholder={'Search Files'}
+            onShowSidePanel={this.props.onShowSidePanel}
+            onSearchedClick={this.props.onSearchedClick}
+          />
         </div>
-        <div className="cur-view-content">
-          <Content data={this.state} />
+        <div className="main-panel-center">
+          <div className="cur-view-container" id="starred">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext('Favorites')}</h3>
+            </div>
+            <div className="cur-view-content">
+              <Content data={this.state} />
+            </div>
+          </div>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }