haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-18 16:36:15 +00:00
Code Issues Releases Wiki Activity

['Files'] redesigned the side nav & the main content (#6044)

Browse Source
This commit is contained in:
llj
2024-04-26 21:51:50 +08:00
committed by GitHub
parent f7f40231aa
commit 3581712e1a
18 changed files with 145 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app.js
View File

@@ -231,7 +231,6 @@ class App extends Component {
path={siteRoot + 'group/:groupID'}
onShowSidePanel={this.onShowSidePanel}
onSearchedClick={this.onSearchedClick}
onTabNavClick={this.tabItemClick}
onGroupChanged={this.onGroupChanged}
/>
<Wikis path={siteRoot + 'published'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>

51
frontend/src/components/main-side-nav.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from '@gatsbyjs/reach-router';
import { gettext, siteRoot, canAddRepo, canGenerateShareLink, canGenerateUploadLink, canInvitePeople, enableOCM, enableOCMViaWebdav } from '../utils/constants';
import { gettext, siteRoot, canAddRepo, canGenerateShareLink, canGenerateUploadLink, canInvitePeople } from '../utils/constants';
import { seafileAPI } from '../utils/seafile-api';
import { Utils } from '../utils/utils';
import toaster from './toast';
@@ -19,24 +19,15 @@ class MainSideNav extends React.Component {
super(props);
this.state = {
FilesNavUnfolded: false,
groupsExtended: false,
sharedExtended: false,
closeSideBar:false,
groupItems: [],
};
this.listHeight = 24; //for caculate tabheight
this.groupsHeight = 0;
this.adminHeight = 0;
}
grpsExtend = () => {
this.setState({
groupsExtended: !this.state.groupsExtended,
});
this.loadGroups();
};
shExtend = () => {
this.setState({
sharedExtended: !this.state.sharedExtended,
@@ -51,7 +42,6 @@ class MainSideNav extends React.Component {
return group;
});
this.groupsHeight = (groupList.length + 1) * _this.listHeight;
_this.setState({
groupItems: groupList.sort((a, b) => {
return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
@@ -81,23 +71,13 @@ class MainSideNav extends React.Component {
};
renderSharedGroups() {
let style = {height: 0};
if (this.state.groupsExtended) {
style = {height: this.groupsHeight};
}
return (
<ul className={`nav sub-nav nav-pills flex-column grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
<li className="nav-item">
<Link to={siteRoot + 'groups/'} className={`nav-link ellipsis ${this.getActiveClass('groups')}`} onClick={(e) => this.tabItemClick(e, 'groups')}>
<span className="sharp" aria-hidden="true">#</span>
<span className="nav-text">{gettext('All Groups')}</span>
</Link>
</li>
<ul className={'nav sub-nav nav-pills flex-column grp-list'}>
{this.state.groupItems.map(item => {
return (
<li key={item.id} className="nav-item">
<Link to={siteRoot + 'group/' + item.id + '/'} className={`nav-link ellipsis ${this.getActiveClass(item.name)}`} onClick={(e) => this.tabItemClick(e, item.name, item.id)}>
<span className="sharp" aria-hidden="true">#</span>
<span className="sf3-font-group sf3-font nav-icon" aria-hidden="true"></span>
<span className="nav-text">{item.name}</span>
</Link>
</li>
@@ -178,6 +158,10 @@ class MainSideNav extends React.Component {
e.stopPropagation();
this.setState({
FilesNavUnfolded: !this.state.FilesNavUnfolded
}, () => {
if (this.state.FilesNavUnfolded) {
this.loadGroups();
}
});
};
@@ -198,43 +182,28 @@ class MainSideNav extends React.Component {
{canAddRepo && (
<li className="nav-item">
<Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={(e) => this.tabItemClick(e, 'my-libs')}>
<span className="sf3-font-mine sf3-font nav-icon" aria-hidden="true"></span>
<span className="nav-text">{gettext('My Libraries')}</span>
</Link>
</li>
)}
<li className="nav-item">
<Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={(e) => this.tabItemClick(e, 'shared-libs')}>
<span className="sf3-font-share-with-me sf3-font nav-icon" aria-hidden="true"></span>
<span className="nav-text">{gettext('Shared with me')}</span>
</Link>
</li>
{canViewOrg &&
<li className="nav-item" onClick={(e) => this.tabItemClick(e, 'org')}>
<Link to={ siteRoot + 'org/' } className={`nav-link ellipsis ${this.getActiveClass('org')}`} title={gettext('Shared with all')}>
<span className="sf3-font-share-with-all sf3-font nav-icon" aria-hidden="true"></span>
<span className="nav-text">{gettext('Shared with all')}</span>
</Link>
</li>
}
<li className="nav-item flex-column" id="group-nav">
<a className="nav-link ellipsis d-flex pr-1" title={gettext('Shared with groups')} onClick={this.grpsExtend}>
<span className="nav-text">{gettext('Shared with groups')}</span>
<span className={`toggle-icon fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
</a>
{this.renderSharedGroups()}
</li>
{enableOCM &&
<li className="nav-item">
<Link to={siteRoot + 'shared-with-ocm/'} className={`nav-link ellipsis ${this.getActiveClass('shared-with-ocm')}`} title={gettext('Shared from other servers')} onClick={(e) => this.tabItemClick(e, 'shared-with-ocm')}>
<span className="nav-text">{gettext('Shared from other servers')}</span>
</Link>
</li>
}
{enableOCMViaWebdav &&
<li className="nav-item">
<Link to={siteRoot + 'ocm-via-webdav/'} className={`nav-link ellipsis ${this.getActiveClass('ocm-via-webdav')}`} title={gettext('Shared from other servers')} onClick={(e) => this.tabItemClick(e, 'ocm-via-webdav')}>
<span className="nav-text">{gettext('Shared from other servers')}</span>
</Link>
</li>
}
</ul>
</li>

13
frontend/src/components/shared-repo-list-view/shared-repo-list-view.js
View File

@@ -20,6 +20,7 @@ const propTypes = {
onItemRename: PropTypes.func,
hasNextPage: PropTypes.bool,
onMonitorRepo: PropTypes.func,
theadHidden: PropTypes.bool,
};
class SharedRepoListView extends React.Component {
@@ -115,12 +116,12 @@ class SharedRepoListView extends React.Component {
<thead>
<tr>
<th width="4%"></th>
<th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
<th width="36%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
<th width="12%"><span className="sr-only">{gettext('Actions')}</span></th>
<th width={'14%'}><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
<th width={'14%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
<th width="16%">{gettext('Owner')}</th>
<th width="3%"><span className="sr-only">{gettext('Library Type')}</span></th>
<th width="35%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
<th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
<th width="14%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
<th width="17%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
<th width="17%">{gettext('Owner')}</th>
</tr>
</thead>
<tbody>

2
frontend/src/components/toolbar/groups-toolbar.js
View File

@@ -29,7 +29,7 @@ class GroupsToolbar extends React.Component {
{Utils.isDesktop() ? (
<div className="operation">
<button className="btn btn-secondary operation-item" onClick={this.toggleDialog}>
<i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Group')}
<i className="sf3-font-new-group1 sf3-font text-secondary mr-1"></i>{gettext('New Group')}
</button>
</div>
) : (

11
frontend/src/pages/groups/group-item.js
View File

@@ -73,10 +73,13 @@ class GroupItem extends React.Component {
const { group } = this.props;
const emptyTip = <p className="group-item-empty-tip">{gettext('No libraries')}</p>;
return (
<div className="group-list-panel">
<h4 className="group-item-heading ellipsis">
<a href={`${siteRoot}group/${group.id}/`} title={group.name}>{group.name}</a>
</h4>
<div className="pb-3">
<div className="d-flex justify-content-between mt-3 p-1 border-bottom">
<h4 className="sf-heading m-0 ellipsis">
<span className="sf3-font-group sf3-font nav-icon" aria-hidden="true"></span>
<a href={`${siteRoot}group/${group.id}/`} title={group.name}>{group.name}</a>
</h4>
</div>
{group.repos.length === 0 ?
emptyTip :
<SharedRepoListView

10
frontend/src/pages/groups/group-view.js
View File

@@ -1,8 +1,7 @@
import React,{ Fragment } from 'react';
import PropTypes from 'prop-types';
import cookie from 'react-cookies';
import { gettext, siteRoot, username, canAddRepo } from '../../utils/constants';
import { Link } from '@gatsbyjs/reach-router';
import { gettext, username, canAddRepo } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
import Loading from '../../components/loading';
@@ -29,7 +28,6 @@ const propTypes = {
onShowSidePanel: PropTypes.func.isRequired,
onSearchedClick: PropTypes.func.isRequired,
onGroupChanged: PropTypes.func.isRequired,
onTabNavClick: PropTypes.func.isRequired,
groupID: PropTypes.string,
};
@@ -259,10 +257,6 @@ class GroupView extends React.Component {
this.setState({repoList: repoList});
};
onTabNavClick = (tabName) => {
this.props.onTabNavClick(tabName);
};
toggleGroupDropdown = () => {
this.setState({
showGroupDropdown: !this.state.showGroupDropdown
@@ -432,8 +426,6 @@ class GroupView extends React.Component {
{currentGroup && (
<Fragment>
<div className="path-container">
<Link to={`${siteRoot}groups/`} onClick={() => this.onTabNavClick('groups')}>{gettext('Groups')}</Link>
<span className="path-split">/</span>
<span>{currentGroup.name}</span>
{isDepartmentGroup && (
<Fragment>

33
frontend/src/pages/libraries/index.js
View File

@@ -225,10 +225,28 @@ class Libraries extends Component {
<h3 className="sf-heading m-0">{gettext('Files')}</h3>
</div>
<div className="cur-view-content">
<table aria-hidden={true} className="my-3">
<thead>
<tr>
<th width="4%"></th>
<th width="3%"><span className="sr-only">{gettext('Library Type')}</span></th>
<th width="35%">{gettext('Name')}</th>
<th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
<th width="14%">{gettext('Size')}</th>
<th width="17%">{gettext('Last Update')}</th>
<th width="17%">{gettext('Owner')}</th>
</tr>
</thead>
</table>
{canAddRepo && (
<div className="pb-4">
<div className="pb-3">
<div className="d-flex justify-content-between mt-3 p-1 border-bottom">
<h4 className="sf-heading m-0">{gettext('My Libraries')}</h4>
<h4 className="sf-heading m-0">
<span className="sf3-font-mine sf3-font nav-icon" aria-hidden="true"></span>
{gettext('My Libraries')}
</h4>
{(!Utils.isDesktop() && this.state.repoList.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
</div>
{this.state.isLoading ? <Loading /> : (
@@ -244,26 +262,23 @@ class Libraries extends Component {
onMonitorRepo={this.onMonitorRepo}
onRepoClick={this.onRepoClick}
sortRepoList={this.sortRepoList}
theadHidden={true}
inAllLibs={true}
/>
)))}
</div>
)}
<div className="pb-4">
<div className="pb-3">
<SharedLibs inAllLibs={true} />
</div>
{canViewOrg && (
<div className="pb-4">
<div className="pb-3">
<SharedWithAll inAllLibs={true} />
</div>
)}
<div className="pb-4">
<div className="d-flex justify-content-between mt-3 p-1 border-bottom">
<h4 className="sf-heading m-0">{gettext('Shared with groups')}</h4>
</div>
<div className="group-list-panel">
{this.state.isGroupsLoading? <Loading /> : (
this.state.groupsErrorMsg ? <p className="error text-center mt-8">{this.state.groupsErrorMsg}</p> : (
this.state.groupList.length === 0 ? groupsEmptyTip : (

21
frontend/src/pages/my-libs/mylib-repo-list-view.js
View File

@@ -14,7 +14,7 @@ const propTypes = {
onDeleteRepo: PropTypes.func.isRequired,
onTransferRepo: PropTypes.func.isRequired,
onMonitorRepo: PropTypes.func.isRequired,
theadHidden : PropTypes.bool, // for 'My Libraries' in 'Files' page
inAllLibs: PropTypes.bool, // for 'My Libraries' in 'Files' page
};
class MylibRepoListView extends React.Component {
@@ -78,20 +78,21 @@ class MylibRepoListView extends React.Component {
};
renderPCUI = () => {
const { theadHidden } = this.props;
const showStorageBackend = storages.length > 0;
const { inAllLibs } = this.props;
const showStorageBackend = !inAllLibs && storages.length > 0;
const sortIcon = this.props.sortOrder === 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
return (
<table className={theadHidden ? 'table-thead-hidden' : ''}>
<table className={inAllLibs ? 'table-thead-hidden' : ''}>
<thead>
<tr>
<th width="4%"></th>
<th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
<th width={showStorageBackend ? '33%' : '38%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {this.props.sortBy === 'name' && sortIcon}</a></th>
<th width="14%"><span className="sr-only">{gettext('Actions')}</span></th>
<th width={showStorageBackend ? '15%' : '20%'}><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {this.props.sortBy === 'size' && sortIcon}</a></th>
{showStorageBackend ? <th width="15%">{gettext('Storage Backend')}</th> : null}
<th width={showStorageBackend ? '15%' : '20%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {this.props.sortBy === 'time' && sortIcon}</a></th>
<th width="3%"><span className="sr-only">{gettext('Library Type')}</span></th>
<th width={showStorageBackend ? '36%' : '35%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {this.props.sortBy === 'name' && sortIcon}</a></th>
<th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
<th width={showStorageBackend ? '15%' : '14%'}><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {this.props.sortBy === 'size' && sortIcon}</a></th>
{showStorageBackend ? <th width="17%">{gettext('Storage Backend')}</th> : null}
<th width={showStorageBackend ? '15%' : '34%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {this.props.sortBy === 'time' && sortIcon}</a></th>
</tr>
</thead>
<tbody>

13
frontend/src/pages/shared-libs/shared-libs.js
View File

@@ -78,12 +78,12 @@ class Content extends Component {
<thead>
<tr>
<th width="4%"></th>
<th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
<th width="34%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
<th width="3%"><span className="sr-only">{gettext('Library Type')}</span></th>
<th width="35%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
<th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
<th width="14%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
<th width="18%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
<th width="16%">{gettext('Owner')}</th>
<th width="17%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
<th width="17%">{gettext('Owner')}</th>
</tr>
</thead>
);
@@ -479,7 +479,10 @@ class SharedLibraries extends Component {
{inAllLibs ? (
<>
<div className="d-flex justify-content-between mt-3 p-1 border-bottom">
<h4 className="sf-heading m-0">{gettext('Shared with me')}</h4>
<h4 className="sf-heading m-0">
{inAllLibs && <span className="sf3-font-share-with-me sf3-font nav-icon" aria-hidden="true"></span>}
{gettext('Shared with me')}
</h4>
{this.renderSortIconInMobile()}
</div>
{this.renderContent()}

5
frontend/src/pages/shared-with-all/index.js
View File

@@ -155,7 +155,10 @@ class PublicSharedView extends React.Component {
return (
<>
<div className="d-flex justify-content-between mt-3 p-1 border-bottom">
<h4 className="sf-heading m-0">{gettext('Shared with all')}</h4>
<h4 className="sf-heading m-0">
<span className="sf3-font-share-with-all sf3-font nav-icon" aria-hidden="true"></span>
{gettext('Shared with all')}
</h4>
{this.renderSortIconInMobile()}
</div>
{this.renderContent()}