mirror of
https://github.com/haiwen/seahub.git
synced 2025-08-02 07:47:32 +00:00
Improve move and copy dialog ui components (#6467)
* implement catalog view in move dialog * update move dialog ui components * improve move dialog ui * remove debug info * improve copy dialog ui * improve search view ui in move and copy dialog, refactor part of file-chooser.js and file-chooser.css * handle cases where repo_name is too long, truncate text with an ellipsis, remove search container border * handle cases where repo_name too long in search result item * update move and dialog ui details * add radius to repo list item
This commit is contained in:
Aries
GitHub
parent
044124e2d8
commit
8623e01e99
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert } from 'reactstrap';
|
||||
import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert, Row, Col } from 'reactstrap';
|
||||
import { gettext } from '../../utils/constants';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import FileChooser from '../file-chooser/file-chooser';
|
||||
@ -25,17 +25,11 @@ class CopyDirent extends React.Component {
|
||||
this.state = {
|
||||
repo: { repo_id: this.props.repoID },
|
||||
selectedPath: this.props.path,
|
||||
errMessage: ''
|
||||
errMessage: '',
|
||||
mode: 'only_current_library',
|
||||
};
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
if (this.state.errMessage === nextState.errMessage) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
handleSubmit = () => {
|
||||
if (this.props.isMultipleOperation) {
|
||||
this.copyItems();
|
||||
@ -137,34 +131,64 @@ class CopyDirent extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
onSelectedMode = (mode) => {
|
||||
this.setState({ mode: mode });
|
||||
};
|
||||
|
||||
renderTitle = () => {
|
||||
const { dirent, isMultipleOperation } = this.props;
|
||||
let title = gettext('Copy {placeholder} to');
|
||||
if (!this.props.isMultipleOperation) {
|
||||
title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
|
||||
|
||||
if (isMultipleOperation) {
|
||||
return gettext('Copy selected item(s) to:');
|
||||
} else {
|
||||
title = gettext('Copy selected item(s) to:');
|
||||
return title.replace('{placeholder}', `<span class="op-target text-truncate mx-1">${Utils.HTMLescape(dirent.name)}</span>`);
|
||||
}
|
||||
let mode = 'current_repo_and_other_repos';
|
||||
const { isMultipleOperation } = this.props;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dirent, selectedDirentList, isMultipleOperation, repoID, path } = this.props;
|
||||
const { mode, errMessage } = this.state;
|
||||
|
||||
const copiedDirent = dirent || selectedDirentList[0];
|
||||
const { permission } = copiedDirent;
|
||||
const { isCustomPermission } = Utils.getUserPermission(permission);
|
||||
|
||||
const LibraryOption = ({ mode, label }) => (
|
||||
<div className={`repo-list-item ${this.state.mode === mode ? 'active' : ''}`} onClick={() => this.onSelectedMode(mode)}>
|
||||
<span className='library'>{label}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal isOpen={true} toggle={this.toggle}>
|
||||
<Modal className='custom-modal' isOpen={true} toggle={this.toggle}>
|
||||
<ModalHeader toggle={this.toggle}>
|
||||
{isMultipleOperation ? title : <div dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></div>}
|
||||
{isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className="d-flex mw-100"></div>}
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<FileChooser
|
||||
repoID={this.props.repoID}
|
||||
currentPath={this.props.path}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
mode={mode}
|
||||
/>
|
||||
{this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
|
||||
<Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
|
||||
</ModalFooter>
|
||||
<Row>
|
||||
<Col className='repo-list-col border-right'>
|
||||
<LibraryOption mode='only_current_library' label={gettext('Current Library')} />
|
||||
{!isCustomPermission && <LibraryOption mode='only_other_libraries' label={gettext('Other Libraries')} />}
|
||||
<LibraryOption mode='recently_used' label={gettext('Recently Used')} />
|
||||
</Col>
|
||||
<Col className='file-list-col'>
|
||||
<ModalBody>
|
||||
<FileChooser
|
||||
repoID={repoID}
|
||||
currentPath={path}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
mode={mode}
|
||||
hideLibraryName={false}
|
||||
/>
|
||||
{errMessage && <Alert color="danger" className="mt-2">{errMessage}</Alert>}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
|
||||
<Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
|
||||
</ModalFooter>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert } from 'reactstrap';
|
||||
import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert, Row, Col } from 'reactstrap';
|
||||
import { gettext } from '../../utils/constants';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import FileChooser from '../file-chooser/file-chooser';
|
||||
@ -25,17 +25,11 @@ class MoveDirent extends React.Component {
|
||||
this.state = {
|
||||
repo: { repo_id: this.props.repoID },
|
||||
selectedPath: this.props.path,
|
||||
errMessage: ''
|
||||
errMessage: '',
|
||||
mode: 'only_current_library',
|
||||
};
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
if (this.state.errMessage === nextState.errMessage) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
handleSubmit = () => {
|
||||
if (this.props.isMultipleOperation) {
|
||||
this.moveItems();
|
||||
@ -151,40 +145,64 @@ class MoveDirent extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
onSelectedMode = (mode) => {
|
||||
this.setState({ mode: mode });
|
||||
};
|
||||
|
||||
renderTitle = () => {
|
||||
const { dirent, isMultipleOperation } = this.props;
|
||||
let title = gettext('Move {placeholder} to');
|
||||
if (!this.props.isMultipleOperation) {
|
||||
title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
|
||||
|
||||
if (isMultipleOperation) {
|
||||
return gettext('Move selected item(s) to:');
|
||||
} else {
|
||||
title = gettext('Move selected item(s) to:');
|
||||
return title.replace('{placeholder}', `<span class="op-target text-truncate mx-1">${Utils.HTMLescape(dirent.name)}</span>`);
|
||||
}
|
||||
let mode = 'current_repo_and_other_repos';
|
||||
const { dirent, selectedDirentList, isMultipleOperation } = this.props;
|
||||
const movedDirent = dirent ? dirent : selectedDirentList[0];
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dirent, selectedDirentList, isMultipleOperation, repoID, path } = this.props;
|
||||
const { mode, errMessage } = this.state;
|
||||
|
||||
const movedDirent = dirent || selectedDirentList[0];
|
||||
const { permission } = movedDirent;
|
||||
const { isCustomPermission } = Utils.getUserPermission(permission);
|
||||
if (isCustomPermission) {
|
||||
mode = 'only_current_library';
|
||||
}
|
||||
|
||||
const LibraryOption = ({ mode, label }) => (
|
||||
<div className={`repo-list-item ${this.state.mode === mode ? 'active' : ''}`} onClick={() => this.onSelectedMode(mode)}>
|
||||
<span className='library'>{label}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal isOpen={true} toggle={this.toggle}>
|
||||
<Modal className='custom-modal' isOpen={true} toggle={this.toggle}>
|
||||
<ModalHeader toggle={this.toggle}>
|
||||
{isMultipleOperation ? title : <div dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></div>}
|
||||
{isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className='d-flex mw-100'></div>}
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<FileChooser
|
||||
repoID={this.props.repoID}
|
||||
currentPath={this.props.path}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
mode={mode}
|
||||
/>
|
||||
{this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
|
||||
<Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
|
||||
</ModalFooter>
|
||||
<Row>
|
||||
<Col className='repo-list-col border-right' >
|
||||
<LibraryOption mode='only_current_library' label={gettext('Current Library')} />
|
||||
{!isCustomPermission && <LibraryOption mode='only_other_libraries' label={gettext('Other Libraries')} />}
|
||||
<LibraryOption mode='recently_used' label={gettext('Recently Used')} />
|
||||
</Col>
|
||||
<Col className='file-list-col'>
|
||||
<ModalBody>
|
||||
<FileChooser
|
||||
repoID={repoID}
|
||||
currentPath={path}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
mode={mode}
|
||||
hideLibraryName={false}
|
||||
/>
|
||||
{errMessage && <Alert color="danger" className="alert-message">{errMessage}</Alert>}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
|
||||
<Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
|
||||
</ModalFooter>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
@ -821,6 +821,7 @@ class DirentGridView extends React.Component {
|
||||
repoEncrypted={this.props.currentRepoInfo.encrypted}
|
||||
isMultipleOperation={this.state.isMultipleOperation}
|
||||
selectedDirentList={selectedDirentList}
|
||||
onItemMove={this.props.onItemMove}
|
||||
onItemsMove={this.props.onItemsMove}
|
||||
onCancelMove={this.onMoveToggle}
|
||||
dirent={this.state.activeDirent}
|
||||
|
||||
@ -18,11 +18,27 @@ const propTypes = {
|
||||
repoID: PropTypes.string,
|
||||
onDirentItemClick: PropTypes.func,
|
||||
onRepoItemClick: PropTypes.func,
|
||||
mode: PropTypes.oneOf(['current_repo_and_other_repos', 'only_all_repos', 'only_current_library']),
|
||||
fileSuffixes: PropTypes.array,
|
||||
mode: PropTypes.oneOf([
|
||||
'current_repo_and_other_repos',
|
||||
'only_all_repos',
|
||||
'only_current_library',
|
||||
'only_other_libraries',
|
||||
'recently_used'
|
||||
]).isRequired,
|
||||
fileSuffixes: PropTypes.arrayOf(PropTypes.string),
|
||||
currentPath: PropTypes.string,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
isShowFile: false,
|
||||
hideLibraryName: false,
|
||||
repoID: '',
|
||||
onDirentItemClick: () => {},
|
||||
onRepoItemClick: () => {},
|
||||
fileSuffixes: [],
|
||||
currentPath: '',
|
||||
};
|
||||
|
||||
class FileChooser extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
@ -46,71 +62,95 @@ class FileChooser extends React.Component {
|
||||
this.source = null;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.repoID) { // current_repo_and_other_repos, only_current_library
|
||||
let repoID = this.props.repoID;
|
||||
seafileAPI.getRepoInfo(repoID).then(res => {
|
||||
// need to optimized
|
||||
let repoInfo = new RepoInfo(res.data);
|
||||
async componentDidMount() {
|
||||
const { repoID } = this.props;
|
||||
|
||||
const fetchRepoInfo = async (repoID) => {
|
||||
try {
|
||||
const res = await seafileAPI.getRepoInfo(repoID);
|
||||
const repoInfo = new RepoInfo(res.data);
|
||||
this.setState({
|
||||
currentRepoInfo: repoInfo,
|
||||
selectedRepo: repoInfo
|
||||
selectedRepo: repoInfo,
|
||||
});
|
||||
}).catch(error => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
} catch (error) {
|
||||
const errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
} else { // only_all_repos
|
||||
seafileAPI.listRepos().then(res => {
|
||||
let repos = res.data.repos;
|
||||
let repoList = [];
|
||||
let repoIdList = [];
|
||||
for (let i = 0; i < repos.length; i++) {
|
||||
if (repos[i].permission !== 'rw') {
|
||||
continue;
|
||||
}
|
||||
};
|
||||
|
||||
const fetchRepoList = async () => {
|
||||
try {
|
||||
const res = await seafileAPI.listRepos();
|
||||
const repos = res.data.repos;
|
||||
const repoList = [];
|
||||
const repoIdList = [];
|
||||
|
||||
repos.forEach(repo => {
|
||||
if (repo.permission !== 'rw' || repoIdList.includes(repo.repo_id)) {
|
||||
return;
|
||||
}
|
||||
if (repoIdList.indexOf(repos[i].repo_id) > -1) {
|
||||
continue;
|
||||
}
|
||||
repoList.push(repos[i]);
|
||||
repoIdList.push(repos[i].repo_id);
|
||||
}
|
||||
repoList = Utils.sortRepos(repoList, 'name', 'asc');
|
||||
this.setState({ repoList: repoList });
|
||||
});
|
||||
repoList.push(repo);
|
||||
repoIdList.push(repo.repo_id);
|
||||
});
|
||||
|
||||
const sortedRepoList = Utils.sortRepos(repoList, 'name', 'asc');
|
||||
this.setState({ repoList: sortedRepoList });
|
||||
} catch (error) {
|
||||
const errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
}
|
||||
};
|
||||
|
||||
if (repoID) {
|
||||
await fetchRepoInfo(repoID);
|
||||
} else {
|
||||
await fetchRepoList();
|
||||
}
|
||||
}
|
||||
|
||||
onOtherRepoToggle = () => {
|
||||
if (!this.state.hasRequest) {
|
||||
let that = this;
|
||||
seafileAPI.listRepos().then(res => {
|
||||
// todo optimized code
|
||||
let repos = res.data.repos;
|
||||
let repoList = [];
|
||||
let repoIdList = [];
|
||||
for (let i = 0; i < repos.length; i++) {
|
||||
if (repos[i].permission !== 'rw') {
|
||||
continue;
|
||||
}
|
||||
if (that.props.repoID && (repos[i].repo_name === that.state.currentRepoInfo.repo_name)) {
|
||||
continue;
|
||||
}
|
||||
if (repoIdList.indexOf(repos[i].repo_id) > -1) {
|
||||
continue;
|
||||
}
|
||||
repoList.push(repos[i]);
|
||||
repoIdList.push(repos[i].repo_id);
|
||||
}
|
||||
repoList = Utils.sortRepos(repoList, 'name', 'asc');
|
||||
this.setState({
|
||||
repoList: repoList,
|
||||
isOtherRepoShow: !this.state.isOtherRepoShow,
|
||||
selectedItemInfo: {}
|
||||
});
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevProps.mode !== this.props.mode) {
|
||||
this.setState({
|
||||
isSearching: false,
|
||||
isResultGot: false,
|
||||
searchInfo: '',
|
||||
searchResults: [],
|
||||
});
|
||||
if (this.props.mode === 'only_other_libraries') {
|
||||
this.onOtherRepoToggle();
|
||||
}
|
||||
}
|
||||
else {
|
||||
}
|
||||
|
||||
onOtherRepoToggle = async () => {
|
||||
if (!this.state.hasRequest) {
|
||||
try {
|
||||
const res = await seafileAPI.listRepos();
|
||||
const repos = res.data.repos;
|
||||
const repoList = [];
|
||||
const repoIdList = [];
|
||||
|
||||
repos.forEach(repo => {
|
||||
if (repo.permission !== 'rw') return;
|
||||
if (this.props.repoID && repo.repo_name === this.state.currentRepoInfo.repo_name) return;
|
||||
if (repoIdList.includes(repo.repo_id)) return;
|
||||
|
||||
repoList.push(repo);
|
||||
repoIdList.push(repo.repo_id);
|
||||
});
|
||||
|
||||
const sortedRepoList = Utils.sortRepos(repoList, 'name', 'asc');
|
||||
this.setState({
|
||||
repoList: sortedRepoList,
|
||||
isOtherRepoShow: !this.state.isOtherRepoShow,
|
||||
selectedItemInfo: {},
|
||||
});
|
||||
} catch (error) {
|
||||
const errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
}
|
||||
} else {
|
||||
this.setState({ isOtherRepoShow: !this.state.isOtherRepoShow });
|
||||
}
|
||||
};
|
||||
@ -151,32 +191,22 @@ class FileChooser extends React.Component {
|
||||
|
||||
onSearchInfoChanged = (event) => {
|
||||
let searchInfo = event.target.value.trim();
|
||||
|
||||
this.setState({ searchInfo: searchInfo });
|
||||
|
||||
if (this.inputValue === searchInfo) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.inputValue = searchInfo;
|
||||
|
||||
if (searchInfo.length === 0) {
|
||||
this.setState({
|
||||
isSearching: false,
|
||||
searchResults: [],
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.state.searchResults.length && searchInfo.length > 0) {
|
||||
this.setState({
|
||||
isSearching: true,
|
||||
isResultGot: false,
|
||||
});
|
||||
}
|
||||
this.setState({ searchInfo: searchInfo });
|
||||
if (this.inputValue === searchInfo) {
|
||||
return false;
|
||||
}
|
||||
this.inputValue = searchInfo;
|
||||
|
||||
if (this.inputValue === '' || this.getValueLength(this.inputValue) < 3) {
|
||||
this.setState({ isResultGot: false });
|
||||
this.setState({
|
||||
isResultGot: false,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -297,205 +327,248 @@ class FileChooser extends React.Component {
|
||||
}
|
||||
};
|
||||
|
||||
onSearchedItemDoubleClick = (item) => {
|
||||
onSearchedItemDoubleClick = async (item) => {
|
||||
if (item.type !== 'dir') {
|
||||
return;
|
||||
}
|
||||
|
||||
let selectedItemInfo = {
|
||||
const { repoID } = this.props;
|
||||
const { hasRequest, currentRepoInfo } = this.state;
|
||||
|
||||
const selectedItemInfo = {
|
||||
repoID: item.repo_id,
|
||||
filePath: item.path,
|
||||
};
|
||||
|
||||
this.setState({
|
||||
selectedItemInfo: selectedItemInfo
|
||||
});
|
||||
this.setState({ selectedItemInfo });
|
||||
|
||||
if (this.props.repoID && item.repo_id === this.props.repoID) {
|
||||
seafileAPI.getRepoInfo(this.props.repoID).then(res => {
|
||||
// need to optimized
|
||||
let repoInfo = new RepoInfo(res.data);
|
||||
let path = item.path.substring(0, (item.path.length - 1));
|
||||
const updateStateForRepo = (repoInfo, path) => {
|
||||
this.setState({
|
||||
selectedRepo: repoInfo,
|
||||
selectedPath: path,
|
||||
isCurrentRepoShow: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleError = (error) => {
|
||||
const errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
};
|
||||
|
||||
const fetchRepoInfo = async () => {
|
||||
try {
|
||||
const res = await seafileAPI.getRepoInfo(repoID);
|
||||
const repoInfo = new RepoInfo(res.data);
|
||||
const path = item.path.substring(0, item.path.length - 1);
|
||||
updateStateForRepo(repoInfo, path);
|
||||
} catch (error) {
|
||||
handleError(error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchRepoList = async () => {
|
||||
try {
|
||||
const res = await seafileAPI.listRepos();
|
||||
const repos = res.data.repos;
|
||||
const repoList = [];
|
||||
const repoIdList = [];
|
||||
|
||||
repos.forEach(repo => {
|
||||
if (repo.permission !== 'rw') return;
|
||||
if (repoID && repo.repo_name === currentRepoInfo.repo_name) return;
|
||||
if (repoIdList.includes(repo.repo_id)) return;
|
||||
|
||||
repoList.push(repo);
|
||||
repoIdList.push(repo.repo_id);
|
||||
});
|
||||
|
||||
const sortedRepoList = Utils.sortRepos(repoList, 'name', 'asc');
|
||||
const selectedRepo = sortedRepoList.find(repo => repo.repo_id === item.repo_id);
|
||||
const path = item.path.substring(0, item.path.length - 1);
|
||||
|
||||
this.setState({
|
||||
selectedRepo: repoInfo,
|
||||
repoList: sortedRepoList,
|
||||
isOtherRepoShow: true,
|
||||
selectedPath: path,
|
||||
isCurrentRepoShow: true,
|
||||
});
|
||||
}).catch(error => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
} else {
|
||||
if (!this.state.hasRequest) {
|
||||
let that = this;
|
||||
seafileAPI.listRepos().then(res => {
|
||||
// todo optimized code
|
||||
let repos = res.data.repos;
|
||||
let repoList = [];
|
||||
let repoIdList = [];
|
||||
for (let i = 0; i < repos.length; i++) {
|
||||
if (repos[i].permission !== 'rw') {
|
||||
continue;
|
||||
}
|
||||
if (that.props.repoID && (repos[i].repo_name === that.state.currentRepoInfo.repo_name)) {
|
||||
continue;
|
||||
}
|
||||
if (repoIdList.indexOf(repos[i].repo_id) > -1) {
|
||||
continue;
|
||||
}
|
||||
repoList.push(repos[i]);
|
||||
repoIdList.push(repos[i].repo_id);
|
||||
}
|
||||
repoList = Utils.sortRepos(repoList, 'name', 'asc');
|
||||
let repo = repoList.filter(repoItem => repoItem.repo_id === item.repo_id);
|
||||
let path = item.path.substring(0, (item.path.length - 1));
|
||||
|
||||
let selectRepo = repo[0];
|
||||
this.setState({
|
||||
repoList: repoList,
|
||||
isOtherRepoShow: true,
|
||||
selectedPath: path,
|
||||
selectedRepo: selectRepo,
|
||||
});
|
||||
selectedRepo,
|
||||
});
|
||||
} catch (error) {
|
||||
handleError(error);
|
||||
}
|
||||
else {
|
||||
this.setState({ isOtherRepoShow: !this.state.isOtherRepoShow });
|
||||
};
|
||||
|
||||
if (repoID && item.repo_id === repoID) {
|
||||
await fetchRepoInfo();
|
||||
} else {
|
||||
if (!hasRequest) {
|
||||
await fetchRepoList();
|
||||
} else {
|
||||
this.setState(prevState => ({ isOtherRepoShow: !prevState.isOtherRepoShow }));
|
||||
}
|
||||
}
|
||||
|
||||
this.onCloseSearching();
|
||||
};
|
||||
|
||||
onScroll = (event) => {
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
renderRepoListView = () => {
|
||||
const { mode, currentPath, isShowFile, fileSuffixes } = this.props;
|
||||
const { isCurrentRepoShow, isOtherRepoShow, currentRepoInfo, repoList, selectedRepo, selectedPath, selectedItemInfo } = this.state;
|
||||
const recentlyUsedRepos = JSON.parse(localStorage.getItem('recently-used-repos')) || [];
|
||||
|
||||
return (
|
||||
<div className="file-chooser-container user-select-none" onScroll={this.onScroll}>
|
||||
{this.props.mode === 'current_repo_and_other_repos' && (
|
||||
<Fragment>
|
||||
<div className="list-view">
|
||||
<div className="list-view-header">
|
||||
<span className={`item-toggle sf3-font ${this.state.isCurrentRepoShow ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onCurrentRepoToggle}></span>
|
||||
<span className="library">{gettext('Current Library')}</span>
|
||||
<div className='scroll-wrapper' onScroll={this.onScroll}>
|
||||
<div className="file-chooser-container user-select-none" >
|
||||
{mode === 'current_repo_and_other_repos' && (
|
||||
<Fragment>
|
||||
<div className="list-view">
|
||||
<div className="list-view-header">
|
||||
<span className={`item-toggle sf3-font ${isCurrentRepoShow ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onCurrentRepoToggle}></span>
|
||||
<span className="library">{gettext('Current Library')}</span>
|
||||
</div>
|
||||
{
|
||||
isCurrentRepoShow && currentRepoInfo &&
|
||||
<RepoListView
|
||||
initToShowChildren={true}
|
||||
currentRepoInfo={currentRepoInfo}
|
||||
currentPath={currentPath}
|
||||
selectedRepo={selectedRepo}
|
||||
selectedPath={selectedPath}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
isShowFile={isShowFile}
|
||||
fileSuffixes={fileSuffixes}
|
||||
selectedItemInfo={selectedItemInfo}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
{
|
||||
this.state.isCurrentRepoShow && this.state.currentRepoInfo &&
|
||||
<RepoListView
|
||||
initToShowChildren={true}
|
||||
currentRepoInfo={this.state.currentRepoInfo}
|
||||
currentPath={this.props.currentPath}
|
||||
selectedRepo={this.state.selectedRepo}
|
||||
selectedPath={this.state.selectedPath}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
isShowFile={this.props.isShowFile}
|
||||
fileSuffixes={this.props.fileSuffixes}
|
||||
selectedItemInfo={this.state.selectedItemInfo}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<div className="list-view">
|
||||
<div className="list-view-header">
|
||||
<span className={`item-toggle sf3-font ${this.state.isOtherRepoShow ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onOtherRepoToggle}></span>
|
||||
<span className="library">{gettext('Other Libraries')}</span>
|
||||
<div className="list-view">
|
||||
<div className="list-view-header">
|
||||
<span className={`item-toggle sf3-font ${isOtherRepoShow ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onOtherRepoToggle}></span>
|
||||
<span className="library">{gettext('Other Libraries')}</span>
|
||||
</div>
|
||||
{
|
||||
isOtherRepoShow &&
|
||||
<RepoListView
|
||||
initToShowChildren={false}
|
||||
repoList={repoList}
|
||||
selectedRepo={selectedRepo}
|
||||
selectedPath={selectedPath}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
isShowFile={isShowFile}
|
||||
fileSuffixes={fileSuffixes}
|
||||
selectedItemInfo={selectedItemInfo}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
{
|
||||
this.state.isOtherRepoShow &&
|
||||
<RepoListView
|
||||
initToShowChildren={false}
|
||||
repoList={this.state.repoList}
|
||||
selectedRepo={this.state.selectedRepo}
|
||||
selectedPath={this.state.selectedPath}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
isShowFile={this.props.isShowFile}
|
||||
fileSuffixes={this.props.fileSuffixes}
|
||||
selectedItemInfo={this.state.selectedItemInfo}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</Fragment>
|
||||
)}
|
||||
{this.props.mode === 'only_current_library' && (
|
||||
<div className="list-view">
|
||||
{!this.props.hideLibraryName &&
|
||||
<div className="list-view-header">
|
||||
<span className={`item-toggle sf3-font ${this.state.isCurrentRepoShow ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onCurrentRepoToggle}></span>
|
||||
<span className="library">{gettext('Current Library')}</span>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
this.state.isCurrentRepoShow && this.state.currentRepoInfo &&
|
||||
</Fragment>
|
||||
)}
|
||||
{mode === 'only_current_library' && (
|
||||
<div className="list-view">
|
||||
<RepoListView
|
||||
initToShowChildren={true}
|
||||
currentRepoInfo={this.state.currentRepoInfo}
|
||||
currentPath={this.props.currentPath}
|
||||
selectedRepo={this.state.selectedRepo}
|
||||
selectedPath={this.state.selectedPath}
|
||||
currentRepoInfo={currentRepoInfo}
|
||||
currentPath={currentPath}
|
||||
selectedRepo={selectedRepo}
|
||||
selectedPath={selectedPath}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
isShowFile={this.props.isShowFile}
|
||||
fileSuffixes={this.props.fileSuffixes}
|
||||
selectedItemInfo={this.state.selectedItemInfo}
|
||||
hideLibraryName={this.props.hideLibraryName}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
{this.props.mode === 'only_all_repos' && (
|
||||
<div className="file-chooser-container">
|
||||
<div className="list-view">
|
||||
<div className="list-view-header">
|
||||
<span className="item-toggle sf3-font sf3-font-down"></span>
|
||||
<span className="library">{gettext('Libraries')}</span>
|
||||
</div>
|
||||
<RepoListView
|
||||
initToShowChildren={false}
|
||||
repoList={this.state.repoList}
|
||||
selectedRepo={this.state.selectedRepo}
|
||||
selectedPath={this.state.selectedPath}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
isShowFile={this.props.isShowFile}
|
||||
fileSuffixes={this.props.fileSuffixes}
|
||||
selectedItemInfo={this.state.selectedItemInfo}
|
||||
isShowFile={isShowFile}
|
||||
fileSuffixes={fileSuffixes}
|
||||
selectedItemInfo={selectedItemInfo}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
{mode === 'only_all_repos' && (
|
||||
<div className="file-chooser-container">
|
||||
<div className="list-view">
|
||||
<div className="list-view-header">
|
||||
<span className="item-toggle sf3-font sf3-font-down"></span>
|
||||
<span className="library">{gettext('Libraries')}</span>
|
||||
</div>
|
||||
<RepoListView
|
||||
initToShowChildren={false}
|
||||
repoList={repoList}
|
||||
selectedRepo={selectedRepo}
|
||||
selectedPath={selectedPath}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
isShowFile={isShowFile}
|
||||
fileSuffixes={fileSuffixes}
|
||||
selectedItemInfo={selectedItemInfo}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{mode === 'only_other_libraries' && (
|
||||
<div className="list-view">
|
||||
<RepoListView
|
||||
initToShowChildren={false}
|
||||
repoList={repoList}
|
||||
selectedRepo={selectedRepo}
|
||||
selectedPath={selectedPath}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
isShowFile={isShowFile}
|
||||
fileSuffixes={fileSuffixes}
|
||||
selectedItemInfo={selectedItemInfo}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{mode === 'recently_used' && (
|
||||
<div className="list-view">
|
||||
<RepoListView
|
||||
initToShowChildren={false}
|
||||
repoList={recentlyUsedRepos}
|
||||
selectedRepo={selectedRepo}
|
||||
selectedPath={selectedPath}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
isShowFile={isShowFile}
|
||||
fileSuffixes={fileSuffixes}
|
||||
selectedItemInfo={selectedItemInfo}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
if (!this.state.selectedRepo && this.props.repoID) {
|
||||
const { repoID } = this.props;
|
||||
const { selectedRepo, searchInfo, isSearching } = this.state;
|
||||
|
||||
if (!selectedRepo && repoID) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{isPro && (
|
||||
{isPro && this.props.mode !== 'recently_used' && (
|
||||
<div className="file-chooser-search-input">
|
||||
<Input className="search-input mb-2" placeholder={gettext('Search')} type='text' value={this.state.searchInfo} onChange={this.onSearchInfoChanged}></Input>
|
||||
{this.state.searchInfo.length !== 0 && (
|
||||
<Input className="search-input" placeholder={gettext('Search')} type='text' value={searchInfo} onChange={this.onSearchInfoChanged}></Input>
|
||||
{searchInfo.length !== 0 && (
|
||||
<span className="search-control attr-action-icon sf3-font sf3-font-x-01" onClick={this.onCloseSearching}></span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{this.state.isSearching && (
|
||||
{isSearching ? (
|
||||
<div className="file-chooser-search-container">
|
||||
{this.renderSearchedView()}
|
||||
</div>
|
||||
) : (
|
||||
this.renderRepoListView()
|
||||
)}
|
||||
{!this.state.isSearching && this.renderRepoListView()}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
FileChooser.propTypes = propTypes;
|
||||
FileChooser.defaultProps = defaultProps;
|
||||
|
||||
export default FileChooser;
|
||||
|
||||
@ -31,10 +31,12 @@ class RepoListItem extends React.Component {
|
||||
isShowChildren: this.props.initToShowChildren,
|
||||
treeData: treeHelper.buildTree(),
|
||||
hasLoaded: false,
|
||||
isMounted: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({ isMounted: true });
|
||||
const { isCurrentRepo, currentPath, repo, selectedItemInfo } = this.props;
|
||||
|
||||
// render search result
|
||||
@ -61,27 +63,31 @@ class RepoListItem extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
loadRepoDirentList = (repo) => {
|
||||
componentWillUnmount() {
|
||||
this.setState({ isMounted: false });
|
||||
}
|
||||
|
||||
loadRepoDirentList = async (repo) => {
|
||||
const { hasLoaded } = this.state;
|
||||
if (hasLoaded) return;
|
||||
|
||||
const repoID = repo.repo_id;
|
||||
|
||||
seafileAPI.listDir(repoID, '/').then(res => {
|
||||
try {
|
||||
const res = await seafileAPI.listDir(repoID, '/');
|
||||
if (!this.state.isMounted) return;
|
||||
|
||||
let tree = this.state.treeData.clone();
|
||||
let direntList = [];
|
||||
if (this.props.isShowFile === true) {
|
||||
direntList = res.data.dirent_list;
|
||||
} else {
|
||||
direntList = res.data.dirent_list.filter(item => item.type === 'dir');
|
||||
}
|
||||
let direntList = this.props.isShowFile ? res.data.dirent_list : res.data.dirent_list.filter(item => item.type === 'dir');
|
||||
|
||||
this.addResponseListToNode(direntList, tree.root);
|
||||
this.setState({ treeData: tree, hasLoaded: true });
|
||||
}).catch(error => {
|
||||
} catch (error) {
|
||||
if (!this.state.isMounted) return;
|
||||
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
addResponseListToNode = (list, node) => {
|
||||
@ -201,15 +207,15 @@ class RepoListItem extends React.Component {
|
||||
<li>
|
||||
{!this.props.hideLibraryName &&
|
||||
<div className={`${repoActive ? 'item-active' : ''} item-info`} onClick={this.onRepoItemClick}>
|
||||
<div className="item-text">
|
||||
<span className="name user-select-none ellipsis" title={this.props.repo.repo_name}>{this.props.repo.repo_name}</span>
|
||||
</div>
|
||||
<div className="item-left-icon">
|
||||
<span className={`item-toggle icon sf3-font ${this.state.isShowChildren ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onToggleClick}></span>
|
||||
<i className="tree-node-icon">
|
||||
<span className="icon sf3-font sf3-font-folder tree-node-icon"></span>
|
||||
</i>
|
||||
</div>
|
||||
<div className="item-text">
|
||||
<span className="name user-select-none ellipsis" title={this.props.repo.repo_name}>{this.props.repo.repo_name}</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{this.state.isShowChildren && (
|
||||
|
||||
@ -15,7 +15,6 @@ const propTypes = {
|
||||
fileSuffixes: PropTypes.array,
|
||||
selectedItemInfo: PropTypes.object,
|
||||
currentPath: PropTypes.string,
|
||||
hideLibraryName: PropTypes.bool,
|
||||
};
|
||||
|
||||
class RepoListView extends React.Component {
|
||||
@ -26,12 +25,9 @@ class RepoListView extends React.Component {
|
||||
repoList = [];
|
||||
repoList.push(currentRepoInfo);
|
||||
}
|
||||
let style = {};
|
||||
if (this.props.hideLibraryName) {
|
||||
style = { marginLeft: '-44px' };
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="list-view-content file-chooser-item" style={style}>
|
||||
<ul className="list-view-content file-chooser-item" >
|
||||
{repoList.length > 0 && repoList.map((repoItem, index) => {
|
||||
return (
|
||||
<RepoListItem
|
||||
@ -47,7 +43,6 @@ class RepoListView extends React.Component {
|
||||
isShowFile={this.props.isShowFile}
|
||||
fileSuffixes={this.props.fileSuffixes}
|
||||
selectedItemInfo={this.props.selectedItemInfo}
|
||||
hideLibraryName={this.props.hideLibraryName}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -11,13 +11,22 @@ const propTypes = {
|
||||
onNodeExpanded: PropTypes.func.isRequired,
|
||||
filePath: PropTypes.string,
|
||||
fileSuffixes: PropTypes.array,
|
||||
level: PropTypes.number,
|
||||
};
|
||||
|
||||
class TreeViewItem extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
let filePath = this.props.filePath ? this.props.filePath + '/' + this.props.node.object.name : this.props.node.path;
|
||||
let filePath;
|
||||
|
||||
if (this.props.filePath === '/') {
|
||||
filePath = '/' + this.props.node.object.name;
|
||||
} else if (this.props.filePath) {
|
||||
filePath = this.props.filePath + '/' + this.props.node.object.name;
|
||||
} else {
|
||||
filePath = this.props.node.path;
|
||||
}
|
||||
|
||||
this.state = {
|
||||
filePath: filePath,
|
||||
@ -73,6 +82,8 @@ class TreeViewItem extends React.Component {
|
||||
selectedRepo={this.props.selectedRepo}
|
||||
selectedPath={this.props.selectedPath}
|
||||
fileSuffixes={this.props.fileSuffixes}
|
||||
filePath={this.state.filePath}
|
||||
level={(this.props.level || 0) + 1}
|
||||
/>);
|
||||
})}
|
||||
</div>
|
||||
@ -97,13 +108,15 @@ class TreeViewItem extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
const paddingLeft = `${this.props.level * 20}px`;
|
||||
return (
|
||||
<div className="file-chooser-item">
|
||||
<div className={`${node.path === '/' ? 'hide' : ''}`}>
|
||||
<div className={`${(isCurrentRepo && isCurrentPath) ? 'item-active' : ''} item-info`} onClick={this.onItemClick}>
|
||||
<div className="item-text">
|
||||
<span className="name user-select-none ellipsis" title={node.object && node.object.name}>{node.object && node.object.name}</span>
|
||||
</div>
|
||||
<div
|
||||
className={`${(isCurrentRepo && isCurrentPath) ? 'item-active' : ''} item-info`}
|
||||
onClick={this.onItemClick}
|
||||
style={{ paddingLeft }}
|
||||
>
|
||||
<div className="item-left-icon">
|
||||
{
|
||||
node.object.type !== 'file' &&
|
||||
@ -113,6 +126,9 @@ class TreeViewItem extends React.Component {
|
||||
<span className={`icon sf3-font ${node.object.type === 'dir' ? 'sf3-font-folder' : 'sf3-font-file'}`}></span>
|
||||
</i>
|
||||
</div>
|
||||
<div className="item-text">
|
||||
<span className="name user-select-none ellipsis" title={node.object && node.object.name}>{node.object && node.object.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{node.isExpanded && this.renderChildren()}
|
||||
|
||||
@ -17,7 +17,7 @@ class TreeListView extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="list-view-content" style={{ 'marginLeft': '-1.5rem' }}>
|
||||
<div className="list-view-content">
|
||||
<TreeListItem
|
||||
node={this.props.treeData.root}
|
||||
onNodeCollapse={this.props.onNodeCollapse}
|
||||
@ -27,6 +27,7 @@ class TreeListView extends React.Component {
|
||||
selectedRepo={this.props.selectedRepo}
|
||||
selectedPath={this.props.selectedPath}
|
||||
fileSuffixes={this.props.fileSuffixes}
|
||||
level={0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,78 +1,97 @@
|
||||
.file-chooser-container {
|
||||
padding: 0.5rem;
|
||||
height: 20rem;
|
||||
border: 1px solid rgba(0, 40, 100, 0.12);
|
||||
border-radius: 3px;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
overflow: auto;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.item-toggle{
|
||||
position: absolute;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
line-height: 1.5rem !important;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #c0c0c0;
|
||||
}
|
||||
|
||||
.file-chooser-container .list-view {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.list-view-header {
|
||||
position: relative;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.list-view-header:hover {
|
||||
background-color: #FDEFB9;
|
||||
}
|
||||
|
||||
.list-view-header .name {
|
||||
color: #eb8205;
|
||||
}
|
||||
|
||||
.list-view-content {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
height: 20rem;
|
||||
border-radius: 3px;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.file-chooser-item {
|
||||
position: relative;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.file-chooser-item .item-info {
|
||||
height: 1.5rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
line-height: 1.625;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-chooser-item .item-active {
|
||||
background: #F3AF7D !important;
|
||||
background: #f2f4f6 !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.file-chooser-item .item-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: -8px;
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background-color: #ff8000;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 1px #999;
|
||||
color: #fff;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.file-chooser-item .item-info:hover {
|
||||
background: #FDEFB9;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 1px #999;
|
||||
.file-chooser-item .item-info {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 1.75rem;
|
||||
line-height: 1.625;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.file-chooser-item .item-info .name {
|
||||
flex: 1;
|
||||
.file-chooser-item .item-info:hover {
|
||||
background: #f5f5f5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.file-chooser-item .item-active .icon {
|
||||
color: #fff !important;
|
||||
.file-chooser-item .item-info .item-left-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.file-chooser-item .item-info .item-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
padding-left: 0.25rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.file-chooser-search-close {
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
right: -0.5rem;
|
||||
}
|
||||
|
||||
.file-chooser-search-container {
|
||||
position: relative;
|
||||
height: 20rem;
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.file-chooser-search-container td {
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.file-chooser-search-container td .span {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.file-chooser-search-container .tr-highlight {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.file-chooser-search-input {
|
||||
@ -82,67 +101,64 @@
|
||||
.file-chooser-search-input .search-control {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.7rem;
|
||||
right: 1.5rem;
|
||||
}
|
||||
|
||||
.file-chooser-search-input .search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-chooser-search-container {
|
||||
height: 20rem;
|
||||
.file-chooser-table td {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.item-toggle {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem !important;
|
||||
color: #c0c0c0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-view-content {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list-view-header {
|
||||
position: relative;
|
||||
border: 1px solid #eee;
|
||||
padding: 10px;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.list-view-header:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.list-view-header .name {
|
||||
color: #eb8205;
|
||||
}
|
||||
|
||||
.scroll-wrapper {
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.file-chooser-search-close {
|
||||
position: absolute;
|
||||
right: -0.5rem;
|
||||
top: -0.5rem;
|
||||
}
|
||||
|
||||
.searched-active {
|
||||
background: #F3AF7D !important;
|
||||
background: #f3af7d !important;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 1px #999;
|
||||
}
|
||||
|
||||
.searched-active td {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.searched-active .icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.searched-active td {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.select-open-repo {
|
||||
background: #FDEFB9;
|
||||
background: #fdefb9;
|
||||
}
|
||||
|
||||
.file-chooser-table td {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.file-chooser-item .item-info .item-text {
|
||||
padding-left: 2.8rem;
|
||||
font-size: 15px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.file-chooser-item .item-info .item-left-icon {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -289,3 +289,92 @@
|
||||
.dir-view-path .path-split {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.custom-modal {
|
||||
box-sizing: border-box;
|
||||
font-size: 1rem;
|
||||
max-width: 740px;
|
||||
}
|
||||
|
||||
.custom-modal .row {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.custom-modal .modal-content {
|
||||
min-height: 534px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.custom-modal .modal-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-modal .modal-body .alert-message {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.custom-modal .repo-list-col {
|
||||
max-width: 240px;
|
||||
padding: 1rem;
|
||||
line-height: 24px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.custom-modal .repo-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, font-weight 0.3s ease;
|
||||
}
|
||||
|
||||
.custom-modal .repo-list-item.active {
|
||||
background-color: #f5f5f5;
|
||||
font-weight: 500;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.custom-modal .repo-list-item:hover{
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.custom-modal .repo-list-item.active::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: -8px;
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background-color: #ff8000;
|
||||
border-radius: 2px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.custom-modal .file-list-col {
|
||||
max-width: 500px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.custom-modal .file-list-col .file-chooser-container,
|
||||
.custom-modal .file-list-col .file-chooser-search-input {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
}
|
||||
|
||||
.search-input {
|
||||
height: 1.875rem;
|
||||
height: 2.375rem;
|
||||
width: 15rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
@ -715,6 +715,27 @@ class LibContentView extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
updateRecentlyUsedRepos = (destRepo) => {
|
||||
const recentlyUsed = JSON.parse(localStorage.getItem('recently-used-repos')) || [];
|
||||
const updatedRecentlyUsed = [destRepo, ...recentlyUsed.filter(repo => repo.repo_id !== destRepo.repo_id)];
|
||||
|
||||
const seen = new Set();
|
||||
const filteredRecentlyUsed = updatedRecentlyUsed.filter(repo => {
|
||||
if (seen.has(repo.repo_id)) {
|
||||
return false;
|
||||
} else {
|
||||
seen.add(repo.repo_id);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
if (filteredRecentlyUsed.length > 10) {
|
||||
updatedRecentlyUsed.pop(); // Limit to 10 recent directories
|
||||
}
|
||||
|
||||
localStorage.setItem('recently-used-repos', JSON.stringify(filteredRecentlyUsed));
|
||||
};
|
||||
|
||||
// toolbar operations
|
||||
onMoveItems = (destRepo, destDirentPath) => {
|
||||
let repoID = this.props.repoID;
|
||||
@ -722,6 +743,7 @@ class LibContentView extends React.Component {
|
||||
|
||||
let dirNames = this.getSelectedDirentNames();
|
||||
let direntPaths = this.getSelectedDirentPaths();
|
||||
|
||||
seafileAPI.moveDir(repoID, destRepo.repo_id, destDirentPath, this.state.path, dirNames).then(res => {
|
||||
if (repoID !== destRepo.repo_id) {
|
||||
this.setState({
|
||||
@ -753,6 +775,8 @@ class LibContentView extends React.Component {
|
||||
toaster.success(message);
|
||||
}
|
||||
|
||||
this.updateRecentlyUsedRepos(destRepo);
|
||||
|
||||
}).catch((error) => {
|
||||
if (!error.response.data.lib_need_decrypt) {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
@ -1222,6 +1246,9 @@ class LibContentView extends React.Component {
|
||||
message = message.replace('{name}', dirName);
|
||||
toaster.success(message);
|
||||
}
|
||||
|
||||
this.updateRecentlyUsedRepos(destRepo);
|
||||
|
||||
}).catch((error) => {
|
||||
if (!error.response.data.lib_need_decrypt) {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user