01 basic change

haiwen · Jul 11, 2024 · d9b15ca · d9b15ca
1 parent 4e16703
commit d9b15ca
Show file tree

Hide file tree

Showing 28 changed files with 207 additions and 194 deletions.
diff --git a/frontend/src/app.js b/frontend/src/app.js
@@ -3,13 +3,15 @@ import ReactDom from 'react-dom';
 import { Router, navigate } from '@gatsbyjs/reach-router';
 import MediaQuery from 'react-responsive';
 import { Modal } from 'reactstrap';
+
 import { siteRoot } from './utils/constants';
 import { Utils } from './utils/utils';
+
 import SystemNotification from './components/system-notification';
-//import Header from './components/header';
-import Logo from './components/logo';
+import Header from './components/header';
 import SidePanel from './components/side-panel';
 import MainPanel from './components/main-panel';
+
 import FilesActivities from './pages/dashboard/files-activities';
 import MyFileActivities from './pages/dashboard/my-file-activities';
 import Starred from './pages/starred/starred';
@@ -30,22 +32,12 @@ import Group from './pages/groups/group-view';
 import InvitationsView from './pages/invitations/invitations-view';
 import Wikis from './pages/wikis/wikis';
 import Libraries from './pages/libraries';
-import MainContentWrapper from './components/main-content-wrapper';
+import EventBus from './components/common/event-bus';
 
 import './css/layout.css';
 import './css/toolbar.css';
 import './css/search.css';
 
-const FilesActivitiesWrapper = MainContentWrapper(FilesActivities);
-const MyFileActivitiesWrapper = MainContentWrapper(MyFileActivities);
-const StarredWrapper = MainContentWrapper(Starred);
-const LinkedDevicesWrapper = MainContentWrapper(LinkedDevices);
-const SharedLibrariesWrapper = MainContentWrapper(SharedLibraries);
-const SharedWithOCMWrapper = MainContentWrapper(ShareWithOCM);
-const OCMViaWebdavWrapper = MainContentWrapper(OCMViaWebdav);
-const InvitationsViewWrapper = MainContentWrapper(InvitationsView);
-const ShareAdminLibrariesWrapper = MainContentWrapper(ShareAdminLibraries);
-const ShareAdminFoldersWrapper = MainContentWrapper(ShareAdminFolders);
 
 class App extends Component {
 
@@ -62,6 +54,8 @@ class App extends Component {
     };
     this.dirViewPanels = ['libraries', 'my-libs', 'shared-libs', 'org']; // and group
     window.onpopstate = this.onpopstate;
+    const eventBus = new EventBus();
+    this.eventBus = eventBus;
   }
 
   onpopstate = (event) => {
@@ -222,15 +216,14 @@ class App extends Component {
     return (
       <React.Fragment>
         <SystemNotification />
-        {/*<Header
+        <Header
           isSidePanelClosed={isSidePanelClosed}
           onCloseSidePanel={this.onCloseSidePanel}
           onShowSidePanel={this.onShowSidePanel}
           onSearchedClick={this.onSearchedClick}
+          eventBus={this.eventBus}
         />
-        */}
         <div id="main" className="user-panel">
-          <Logo onCloseSidePanel={this.onCloseSidePanel} positioned={true} />
           <SidePanel
             isSidePanelClosed={isSidePanelClosed}
             isSidePanelFolded={isSidePanelFolded}
@@ -240,34 +233,88 @@ class App extends Component {
             showLogoOnlyInMobile={true}
             toggleFoldSideNav={this.toggleFoldSideNav}
           />
+          {/* 现在宽度是固定的 MainPanel 78%，SidePanel 22%，未来增加一个拖动工具，支持左右拖动，改变这里的宽度 */}
+          {/* 未来优化一下 commonProps = { onShowSidePanel={this.onShowSidePanel}, onSearchedClick={this.onSearchedClick} } */}
           <MainPanel>
             <Router className="reach-router">
-              <Libraries path={ siteRoot } onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <Libraries path={ siteRoot + 'libraries' } onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <FilesActivitiesWrapper path={siteRoot + 'dashboard'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <MyFileActivitiesWrapper path={siteRoot + 'my-activities'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <StarredWrapper path={siteRoot + 'starred'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <LinkedDevicesWrapper path={siteRoot + 'linked-devices'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <ShareAdminLibrariesWrapper path={siteRoot + 'share-admin-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <ShareAdminFoldersWrapper 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} />
-              <SharedLibrariesWrapper path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <SharedWithOCMWrapper path={siteRoot + 'shared-with-ocm'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <OCMViaWebdavWrapper path={siteRoot + 'ocm-via-webdav'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <MyLibraries path={siteRoot + 'my-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <MyLibDeleted path={siteRoot + 'my-libs/deleted/'} onSearchedClick={this.onSearchedClick} />
-              <LibContentView path={siteRoot + 'library/:repoID/*'} pathPrefix={this.state.pathPrefix} isSidePanelFolded={isSidePanelFolded} onMenuClick={this.onShowSidePanel} onTabNavClick={this.tabItemClick}/>
-              <OCMRepoDir path={siteRoot + 'remote-library/:providerID/:repoID/*'} pathPrefix={this.state.pathPrefix} onMenuClick={this.onShowSidePanel} onTabNavClick={this.tabItemClick}/>
+              <Libraries
+                path={siteRoot}
+                onShowSidePanel={this.onShowSidePanel}
+                onSearchedClick={this.onSearchedClick}
+              />
+              <Libraries
+                path={siteRoot + 'libraries'}
+                onShowSidePanel={this.onShowSidePanel}
+                onSearchedClick={this.onSearchedClick}
+              />
+              <MyLibraries
+                path={siteRoot + 'my-libs'}
+                onShowSidePanel={this.onShowSidePanel}
+                onSearchedClick={this.onSearchedClick}
+              />
+              <MyLibDeleted
+                path={siteRoot + 'my-libs/deleted/'}
+                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}
+              />
+              <PublicSharedView
+                path={siteRoot + 'org/'}
+                // onShowSidePanel={this.onShowSidePanel}
+                // onSearchedClick={this.onSearchedClick}
+                // onTabNavClick={this.tabItemClick}
+              />
               <Group
                 path={siteRoot + 'group/:groupID'}
                 onShowSidePanel={this.onShowSidePanel}
                 onSearchedClick={this.onSearchedClick}
                 onGroupChanged={this.onGroupChanged}
               />
-              <Wikis path={siteRoot + 'published'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
-              <PublicSharedView path={siteRoot + 'org/'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} onTabNavClick={this.tabItemClick}/>
-              <InvitationsViewWrapper path={siteRoot + 'invitations/'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <Wikis
+                path={siteRoot + 'published'}
+                // onShowSidePanel={this.onShowSidePanel}
+                // onSearchedClick={this.onSearchedClick}
+              />
+              <FilesActivities
+                path={siteRoot + 'dashboard'}
+                onShowSidePanel={this.onShowSidePanel}
+                onSearchedClick={this.onSearchedClick}
+              />
+              <MyFileActivities
+                path={siteRoot + 'my-activities'}
+                onShowSidePanel={this.onShowSidePanel}
+                onSearchedClick={this.onSearchedClick}
+              />
+              <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} />
+              <SharedLibraries path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <ShareWithOCM path={siteRoot + 'shared-with-ocm'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <OCMViaWebdav path={siteRoot + 'ocm-via-webdav'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <InvitationsView path={siteRoot + 'invitations/'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <OCMRepoDir
+                path={siteRoot + 'remote-library/:providerID/:repoID/*'}
+                pathPrefix={this.state.pathPrefix}
+                onMenuClick={this.onShowSidePanel}
+                onTabNavClick={this.tabItemClick}
+              />
+              <LibContentView
+                path={siteRoot + 'library/:repoID/*'}
+                pathPrefix={this.state.pathPrefix}
+                isSidePanelFolded={isSidePanelFolded}
+                onMenuClick={this.onShowSidePanel}
+                onTabNavClick={this.tabItemClick}
+                eventBus={this.eventBus}
+              />
             </Router>
           </MainPanel>
           <MediaQuery query="(max-width: 767.8px)">

diff --git a/...metadata-view/constants/event-bus-type.js → ...d/src/components/common/event-bus-type.js b/...metadata-view/constants/event-bus-type.js → ...d/src/components/common/event-bus-type.js
@@ -1,9 +1,6 @@
 export const EVENT_BUS_TYPE = {
-  QUERY_COLLABORATORS: 'query-collaborators',
-  QUERY_COLLABORATOR: 'query-collaborator',
+  // metadata
   UPDATE_TABLE_ROWS: 'update-table-rows',
-
-  // table
   LOCAL_TABLE_CHANGED: 'local-table-changed',
   SERVER_TABLE_CHANGED: 'server-table-changed',
   TABLE_ERROR: 'table-error',
@@ -13,14 +10,11 @@ export const EVENT_BUS_TYPE = {
   SELECT_START: 'select_start',
   SELECT_UPDATE: 'select_update',
   SELECT_END: 'select_end',
-  SELECT_END_WITH_SHIFT: 'select_end_with_shift',
   SELECT_NONE: 'select_none',
   COPY_CELLS: 'copy_cells',
   PASTE_CELLS: 'paste_cells',
   SEARCH_CELLS: 'search-cells',
-  CLOSE_SEARCH_CELLS: 'close-search-cells',
   OPEN_SELECT: 'open-select',
-  UPDATE_LINKED_RECORDS: 'update_linked_records',
   SELECT_COLUMN: 'select_column',
   DRAG_ENTER: 'drag_enter',
   COLLAPSE_ALL_GROUPS: 'collapse_all_groups',
@@ -34,4 +28,7 @@ export const EVENT_BUS_TYPE = {
 
   // change
   VIEW_CHANGED: 'view_changed',
+
+  // library
+  CURRENT_LIBRARY_CHANGED: 'current_library_changed',
 };
diff --git a/...metadata/metadata-view/utils/event-bus.js → frontend/src/components/common/event-bus.js b/...metadata/metadata-view/utils/event-bus.js → frontend/src/components/common/event-bus.js
diff --git a/frontend/src/components/header.css b/frontend/src/components/header.css
@@ -0,0 +1,5 @@
+/* for top bottom layout*/
+#header {
+  background-color: #f8fafd;
+  border-bottom: 1px solid #eee;
+}
diff --git a/frontend/src/components/header.js b/frontend/src/components/header.js
@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import Logo from './logo';
 import CommonToolbar from './toolbar/common-toolbar';
 
+import './header.css';
+
 const propTypes = {
+  children: PropTypes.object,
+  eventBus: PropTypes.object.isRequired,
   isSidePanelClosed: PropTypes.bool,
   onCloseSidePanel: PropTypes.func,
   onShowSidePanel: PropTypes.func,
@@ -15,21 +19,23 @@ const propTypes = {
 class Header extends React.Component {
 
   render() {
-    const { onShowSidePanel, onSearchedClick, showSearch } = this.props;
+    const { onShowSidePanel, onSearchedClick, showSearch, children } = this.props;
     return (
       <div id="header" className="d-flex justify-content-between py-2 px-4">
         <div className={'flex-shrink-0 d-none d-md-flex'}>
           <Logo onCloseSidePanel={this.props.onCloseSidePanel} />
         </div>
-        <div className="flex-shrink-0 d-flex flex-fill">
+        <div className={`flex-shrink-0 d-flex flex-fill ${children ? 'border-left-show' : ''}`}>
           <div className="cur-view-toolbar">
             <span title="Side Nav Menu" onClick={onShowSidePanel} className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none">
             </span>
+            {children}
           </div>
           <CommonToolbar
             showSearch={showSearch}
             searchPlaceholder={this.props.searchPlaceholder}
             onSearchedClick={onSearchedClick}
+            eventBus={this.props.eventBus}
           />
         </div>
       </div>

diff --git a/frontend/src/components/main-content-wrapper.js b/frontend/src/components/main-content-wrapper.js
diff --git a/frontend/src/components/side-panel.js b/frontend/src/components/side-panel.js
@@ -23,12 +23,12 @@ class SidePanel extends React.Component {
     const style = isSidePanelFolded ? { flexBasis: SIDE_PANEL_FOLDED_WIDTH } : {};
     return (
       <div className={classnames('side-panel', { 'side-panel-folded': isSidePanelFolded, 'left-zero': !this.props.isSidePanelClosed })} style={style}>
-        <div className={'side-panel-north'}>
+        {/* <div className={'side-panel-north'}>
           <Logo
             onCloseSidePanel={this.props.onCloseSidePanel}
             showLogoOnlyInMobile={showLogoOnlyInMobile}
           />
-        </div>
+        </div> */}
         <div className="side-panel-center">
           {children ? children : (
             <MainSideNav

diff --git a/frontend/src/components/toolbar/common-toolbar.js b/frontend/src/components/toolbar/common-toolbar.js
@@ -7,6 +7,7 @@ import SearchByName from '../search/search-by-name';
 import Notification from '../common/notification';
 import Account from '../common/account';
 import Logout from '../common/logout';
+import { EVENT_BUS_TYPE } from '../common/event-bus-type';
 
 const propTypes = {
   repoID: PropTypes.string,
@@ -20,10 +21,38 @@ const propTypes = {
   showSearch: PropTypes.bool
 };
 
+// eventBus={this.props.eventBus}
+
 class CommonToolbar extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      repoID: props.repoID,
+      repoName: props.repoName,
+      isLibView: props.isLibView,
+      path: props.path,
+      isViewFile: props.isViewFile,
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.eventBus) {
+      this.unsubscribeLibChange = this.props.eventBus.subscribe(EVENT_BUS_TYPE.CURRENT_LIBRARY_CHANGED, this.onRepoChange);
+    }
+  }
+
+  componentWillUnmount() {
+    this.unsubscribeLibChange && this.unsubscribeLibChange();
+  }
+
+  onRepoChange = ({ repoID, repoName, isLibView, path, isViewFile }) => {
+    this.setState({ repoID, repoName, isLibView, path, isViewFile });
+  };
+
   renderSearch = () => {
-    const { repoID, repoName, isLibView, searchPlaceholder, path, isViewFile } = this.props;
+    const { repoID, repoName, isLibView, path, isViewFile } = this.state;
+    const { searchPlaceholder } = this.props;
     const placeholder = searchPlaceholder || gettext('Search files');
 
     if (isPro) {

diff --git a/frontend/src/components/toolbar/general-toolbar.js b/frontend/src/components/toolbar/general-toolbar.js
diff --git a/frontend/src/components/toolbar/top-toolbar.js b/frontend/src/components/toolbar/top-toolbar.js
@@ -10,6 +10,7 @@ const propTypes = {
   showSearch: PropTypes.bool
 };
 
+// 看有喜爱未来是否删除？
 class TopToolbar extends React.Component {
 
   render() {