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

Files view mode sort (#6210)

Browse Source 
* ['Files'] added 'view mode' options & added 'grid' mode for 'My Libraries' & 'Shared with me'

* ['Files'] added 'grid' mode for 'Shared with all' & 'department/group'; redesigned the empty tip for 'grid' mode; replaced 'star/unstar/monitored' icons

* ['Files'] added 'sort'(WIP)

* ['Files' page] added 'sort' for all the libraries
This commit is contained in:
llj
2024-06-17 09:32:05 +08:00
committed by GitHub
parent 140fd4856e
commit 2641d89553
11 changed files with 448 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,6 +22,7 @@ import RepoShareAdminDialog from '../dialog/repo-share-admin-dialog';
import RepoMonitoredIcon from '../../components/repo-monitored-icon';
const propTypes = {
currentViewMode: PropTypes.string,
currentGroup: PropTypes.object,
libraryType: PropTypes.string,
repo: PropTypes.object.isRequired,
@@ -140,9 +141,10 @@ class SharedRepoListItem extends React.Component {
};
getRepoComputeParams = () => {
let repo = this.props.repo;
const { repo, currentViewMode } = this.props;
let iconUrl = Utils.getLibIconUrl(repo);
const useBigLibaryIcon = currentViewMode == 'grid';
const iconUrl = Utils.getLibIconUrl(repo, useBigLibaryIcon);
let iconTitle = Utils.getLibIconTitle(repo);
let libPath = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
@@ -630,31 +632,63 @@ class SharedRepoListItem extends React.Component {
renderPCUI = () => {
let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
let { repo } = this.props;
return (
<Fragment>
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
<td className="text-center">
<a href="#" role="button" aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')} onClick={this.onToggleStarRepo}>
<i className={`fa-star ${this.state.isStarred ? 'fas' : 'far star-empty'}`}></i>
</a>
</td>
<td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
<td>
{this.state.isRenaming ?
<Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
<Fragment>
<Link to={libPath}>{repo.repo_name}</Link>
{repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} />}
</Fragment>
}
</td>
<td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
<td>{repo.size}</td>
<td title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</td>
<td title={repo.owner_contact_email}>{repo.owner_name}</td>
</tr>
</Fragment>
const { repo, currentViewMode } = this.props;
return currentViewMode == 'list' ? (
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
<td className="text-center">
<i
role="button"
title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
onClick={this.onToggleStarRepo}
className={`op-icon m-0 ${this.state.isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'} sf3-font`}
>
</i>
</td>
<td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
<td>
{this.state.isRenaming ?
<Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
<Fragment>
<Link to={libPath}>{repo.repo_name}</Link>
{repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} className="ml-1 op-icon" />}
</Fragment>
}
</td>
<td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
<td>{repo.size}</td>
<td title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</td>
<td title={repo.owner_contact_email}>{repo.owner_name}</td>
</tr>
) : (
<div
className="library-grid-item px-3 d-flex justify-content-between align-items-center"
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
onFocus={this.onMouseEnter}
>
<div className="d-flex align-items-center">
<img src={iconUrl} title={iconTitle} alt={iconTitle} width="36" className="mr-2" />
{this.state.isRenaming ?
<Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
<Fragment>
<Link to={libPath}>{repo.repo_name}</Link>
<i
role="button"
title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
onClick={this.onToggleStarRepo}
className={`op-icon library-grid-item-icon ${this.state.isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'} sf3-font`}
>
</i>
{repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} className="op-icon library-grid-item-icon" />}
</Fragment>
}
</div>
<div>
{this.state.isOperationShow && this.generatorPCMenu()}
</div>
</div>
);
};
@@ -677,7 +711,7 @@ class SharedRepoListItem extends React.Component {
<Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> :
<Fragment>
<Link to={libPath}>{repo.repo_name}</Link>
{repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} />}
{repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} className="ml-1 op-icon" />}
</Fragment>
}
<br />