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

[dir view] redesigned it: removed the 'column' mode icon; always display (#6054)

Browse Source 
the left side 'tree' panel; let the 'list' & 'grid' column mode icon
only control the right side main content
This commit is contained in:
llj
2024-05-07 16:45:51 +08:00
committed by GitHub
parent 797fbb9737
commit 96f43f6afc
4 changed files with 129 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/components/dir-view-mode/dir-column-view.js
View File

@@ -3,8 +3,10 @@ import PropTypes from 'prop-types';
import DirColumnNav from './dir-column-nav'; import DirColumnNav from './dir-column-nav';
import DirColumnFile from './dir-column-file'; import DirColumnFile from './dir-column-file';
import DirListView from './dir-list-view'; import DirListView from './dir-list-view';
import DirGridView from './dir-grid-view';
const propTypes = { const propTypes = {
currentMode: PropTypes.string.isRequired,
path: PropTypes.string.isRequired, path: PropTypes.string.isRequired,
repoID: PropTypes.string.isRequired, repoID: PropTypes.string.isRequired,
// repoinfo // repoinfo
@@ -64,7 +66,8 @@ const propTypes = {
onFileTagChanged: PropTypes.func, onFileTagChanged: PropTypes.func,
showDirentDetail: PropTypes.func.isRequired, showDirentDetail: PropTypes.func.isRequired,
fullDirentList: PropTypes.array, fullDirentList: PropTypes.array,
onItemsScroll: PropTypes.func.isRequired onItemsScroll: PropTypes.func.isRequired,
isDirentDetailShow: PropTypes.bool.isRequired
}; };
class DirColumnView extends React.Component { class DirColumnView extends React.Component {
@@ -143,6 +146,7 @@ class DirColumnView extends React.Component {
} }
render() { render() {
const { currentMode } = this.props;
const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null; const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
const select = this.state.inResizing ? 'none' : ''; const select = this.state.inResizing ? 'none' : '';
const mainFlex = '1 0 ' + (1 - this.state.navRate - 0.05) * 100 + '%'; const mainFlex = '1 0 ' + (1 - this.state.navRate - 0.05) * 100 + '%';
@@ -185,7 +189,7 @@ class DirColumnView extends React.Component {
latestContributor={this.props.latestContributor} latestContributor={this.props.latestContributor}
onLinkClick={this.props.onLinkClick} onLinkClick={this.props.onLinkClick}
/> />
) : ( ) : (currentMode == 'list' ?
<DirListView <DirListView
path={this.props.path} path={this.props.path}
repoID={this.props.repoID} repoID={this.props.repoID}
@@ -222,6 +226,35 @@ class DirColumnView extends React.Component {
repoTags={this.props.repoTags} repoTags={this.props.repoTags}
onFileTagChanged={this.props.onFileTagChanged} onFileTagChanged={this.props.onFileTagChanged}
showDirentDetail={this.props.showDirentDetail} showDirentDetail={this.props.showDirentDetail}
/> :
<DirGridView
path={this.props.path}
repoID={this.props.repoID}
currentRepoInfo={this.props.currentRepoInfo}
isGroupOwnedRepo={this.props.isGroupOwnedRepo}
userPerm={this.props.userPerm}
enableDirPrivateShare={this.props.enableDirPrivateShare}
onRenameNode={this.props.onRenameNode}
isRepoInfoBarShow={this.props.isRepoInfoBarShow}
repoTags={this.props.repoTags}
usedRepoTags={this.props.usedRepoTags}
updateUsedRepoTags={this.props.updateUsedRepoTags}
isDirentListLoading={this.props.isDirentListLoading}
direntList={this.props.direntList}
fullDirentList={this.props.fullDirentList}
onAddFile={this.props.onAddFile}
onItemClick={this.props.onItemClick}
onItemDelete={this.props.onItemDelete}
onItemMove={this.props.onItemMove}
onItemCopy={this.props.onItemCopy}
onItemConvert={this.props.onItemConvert}
updateDirent={this.props.updateDirent}
onAddFolder={this.props.onAddFolder}
showDirentDetail={this.props.showDirentDetail}
onGridItemClick={this.props.onDirentClick}
isDirentDetailShow={this.props.isDirentDetailShow}
onItemRename={this.props.onItemRename}
onFileTagChanged={this.props.onFileTagChanged}
/> />
)} )}
</div> </div>

1
frontend/src/components/toolbar/view-mode-toolbar.js
View File

@@ -30,7 +30,6 @@ class ViewModeToolbar extends React.Component {
<div className="view-mode btn-group"> <div className="view-mode btn-group">
<button className={`${baseClass} sf2-icon-list-view ${this.props.currentMode === 'list' ? 'current-mode' : ''}`} id='list' title={gettext('List')} aria-label={gettext('List')} onClick={this.switchViewMode}></button> <button className={`${baseClass} sf2-icon-list-view ${this.props.currentMode === 'list' ? 'current-mode' : ''}`} id='list' title={gettext('List')} aria-label={gettext('List')} onClick={this.switchViewMode}></button>
<button className={`${baseClass} sf2-icon-grid-view ${this.props.currentMode === 'grid' ? 'current-mode' : ''}`} id='grid' title={gettext('Grid')} aria-label={gettext('Grid')} onClick={this.switchViewMode}></button> <button className={`${baseClass} sf2-icon-grid-view ${this.props.currentMode === 'grid' ? 'current-mode' : ''}`} id='grid' title={gettext('Grid')} aria-label={gettext('Grid')} onClick={this.switchViewMode}></button>
<button className={`${baseClass} sf2-icon-two-columns ${this.props.currentMode === 'column' ? 'current-mode' : ''}`} id='column' title={gettext('Column')} aria-label={gettext('Column')} onClick={this.switchViewMode}></button>
</div> </div>
{!this.props.isCustomPermission && ( {!this.props.isCustomPermission && (
<div className="detail-btn btn-group"> <div className="detail-btn btn-group">

202
frontend/src/pages/lib-content-view/lib-content-container.js
View File

@@ -4,14 +4,13 @@ import { gettext } from '../../utils/constants';
import CurDirPath from '../../components/cur-dir-path'; import CurDirPath from '../../components/cur-dir-path';
import DirentDetail from '../../components/dirent-detail/dirent-details'; import DirentDetail from '../../components/dirent-detail/dirent-details';
import LibDetail from '../../components/dirent-detail/lib-details'; import LibDetail from '../../components/dirent-detail/lib-details';
import DirListView from '../../components/dir-view-mode/dir-list-view';
import DirGridView from '../../components/dir-view-mode/dir-grid-view';
import DirColumnView from '../../components/dir-view-mode/dir-column-view'; import DirColumnView from '../../components/dir-view-mode/dir-column-view';
import '../../css/lib-content-view.css'; import '../../css/lib-content-view.css';
const propTypes = { const propTypes = {
pathPrefix: PropTypes.array.isRequired, pathPrefix: PropTypes.array.isRequired,
isTreePanelShown: PropTypes.bool.isRequired,
currentMode: PropTypes.string.isRequired, currentMode: PropTypes.string.isRequired,
path: PropTypes.string.isRequired, path: PropTypes.string.isRequired,
pathExist: PropTypes.bool.isRequired, pathExist: PropTypes.bool.isRequired,
@@ -114,12 +113,6 @@ class LibContentContainer extends React.Component {
this.props.closeDirentDetail(); this.props.closeDirentDetail();
}; };
onGridItemClick = (dirent) => {
this.setState({currentDirent: dirent});
this.props.onDirentClick(dirent);
};
// on '<tr>'
onDirentClick = (dirent) => { onDirentClick = (dirent) => {
this.setState({currentDirent: dirent}); this.setState({currentDirent: dirent});
this.props.onDirentClick(dirent); this.props.onDirentClick(dirent);
@@ -195,141 +188,68 @@ class LibContentContainer extends React.Component {
sortItems={this.props.sortItems} sortItems={this.props.sortItems}
/> />
</div> </div>
<div className={`cur-view-content lib-content-container ${this.props.currentMode === 'column' ? 'view-mode-container' : ''}`} onScroll={this.onItemsScroll}> <div className={`cur-view-content lib-content-container ${this.props.isTreePanelShown ? 'view-mode-container' : ''}`} onScroll={this.onItemsScroll}>
{!this.props.pathExist && this.errMessage} {!this.props.pathExist && this.errMessage}
{this.props.pathExist && ( {this.props.pathExist && (
<Fragment> <DirColumnView
{this.props.currentMode === 'list' && ( currentMode={this.props.currentMode}
<DirListView path={this.props.path}
path={this.props.path} repoID={repoID}
repoID={repoID} currentRepoInfo={this.props.currentRepoInfo}
currentRepoInfo={this.props.currentRepoInfo} isGroupOwnedRepo={this.props.isGroupOwnedRepo}
isGroupOwnedRepo={this.props.isGroupOwnedRepo} userPerm={this.props.userPerm}
userPerm={this.props.userPerm} enableDirPrivateShare={this.props.enableDirPrivateShare}
enableDirPrivateShare={this.props.enableDirPrivateShare} isTreeDataLoading={this.props.isTreeDataLoading}
isRepoInfoBarShow={isRepoInfoBarShow} treeData={this.props.treeData}
repoTags={this.props.repoTags} currentNode={this.props.currentNode}
usedRepoTags={this.props.usedRepoTags} onNodeClick={this.props.onNodeClick}
updateUsedRepoTags={this.props.updateUsedRepoTags} onNodeCollapse={this.props.onNodeCollapse}
isDirentListLoading={this.props.isDirentListLoading} onNodeExpanded={this.props.onNodeExpanded}
direntList={this.props.direntList} onAddFolderNode={this.props.onAddFolder}
fullDirentList={this.props.fullDirentList} onAddFileNode={this.props.onAddFile}
sortBy={this.props.sortBy} onRenameNode={this.props.onRenameNode}
sortOrder={this.props.sortOrder} onDeleteNode={this.props.onDeleteNode}
sortItems={this.props.sortItems} isViewFile={this.props.isViewFile}
onAddFolder={this.props.onAddFolder} isFileLoading={this.props.isFileLoading}
onAddFile={this.props.onAddFile} isFileLoadedErr={this.props.isFileLoadedErr}
onItemClick={this.onItemClick} hash={this.props.hash}
onItemSelected={this.onItemSelected} filePermission={this.props.filePermission}
onItemDelete={this.onItemDelete} content={this.props.content}
onItemRename={this.props.onItemRename} lastModified={this.props.lastModified}
onItemMove={this.onItemMove} latestContributor={this.props.latestContributor}
onItemCopy={this.props.onItemCopy} onLinkClick={this.props.onLinkClick}
onItemConvert={this.props.onItemConvert} isRepoInfoBarShow={isRepoInfoBarShow}
onDirentClick={this.onDirentClick} repoTags={this.props.repoTags}
updateDirent={this.props.updateDirent} usedRepoTags={this.props.usedRepoTags}
isAllItemSelected={this.props.isAllDirentSelected} updateUsedRepoTags={this.props.updateUsedRepoTags}
onAllItemSelected={this.props.onAllDirentSelected} isDirentListLoading={this.props.isDirentListLoading}
selectedDirentList={this.props.selectedDirentList} direntList={this.props.direntList}
onItemsMove={this.props.onItemsMove} fullDirentList={this.props.fullDirentList}
onItemsCopy={this.props.onItemsCopy} sortBy={this.props.sortBy}
onItemsDelete={this.props.onItemsDelete} sortOrder={this.props.sortOrder}
onFileTagChanged={this.props.onFileTagChanged} sortItems={this.props.sortItems}
showDirentDetail={this.props.showDirentDetail} onAddFolder={this.props.onAddFolder}
loadDirentList={this.props.loadDirentList} onAddFile={this.props.onAddFile}
/> onItemClick={this.onItemClick}
)} onItemSelected={this.onItemSelected}
{this.props.currentMode === 'grid' && ( onItemDelete={this.onItemDelete}
<DirGridView onItemRename={this.props.onItemRename}
path={this.props.path} onItemMove={this.onItemMove}
repoID={repoID} onItemCopy={this.props.onItemCopy}
currentRepoInfo={this.props.currentRepoInfo} onItemConvert={this.props.onItemConvert}
isGroupOwnedRepo={this.props.isGroupOwnedRepo} onDirentClick={this.onDirentClick}
userPerm={this.props.userPerm} updateDirent={this.props.updateDirent}
enableDirPrivateShare={this.props.enableDirPrivateShare} isAllItemSelected={this.props.isAllDirentSelected}
onRenameNode={this.props.onRenameNode} onAllItemSelected={this.props.onAllDirentSelected}
isRepoInfoBarShow={isRepoInfoBarShow} selectedDirentList={this.props.selectedDirentList}
repoTags={this.props.repoTags} onItemsMove={this.props.onItemsMove}
usedRepoTags={this.props.usedRepoTags} onItemsCopy={this.props.onItemsCopy}
updateUsedRepoTags={this.props.updateUsedRepoTags} onItemsDelete={this.props.onItemsDelete}
isDirentListLoading={this.props.isDirentListLoading} onFileTagChanged={this.props.onFileTagChanged}
direntList={this.props.direntList} showDirentDetail={this.props.showDirentDetail}
fullDirentList={this.props.fullDirentList} onItemsScroll={this.onItemsScroll}
onAddFile={this.props.onAddFile} isDirentDetailShow={this.props.isDirentDetailShow}
onItemClick={this.onItemClick} />
onItemDelete={this.props.onItemDelete}
onItemMove={this.onItemMove}
onItemCopy={this.props.onItemCopy}
onItemConvert={this.props.onItemConvert}
updateDirent={this.props.updateDirent}
onAddFolder={this.props.onAddFolder}
showDirentDetail={this.props.showDirentDetail}
onGridItemClick={this.onGridItemClick}
isDirentDetailShow={this.props.isDirentDetailShow}
onItemRename={this.props.onItemRename}
onFileTagChanged={this.props.onFileTagChanged}
/>
)}
{this.props.currentMode === 'column' && (
<DirColumnView
path={this.props.path}
repoID={repoID}
currentRepoInfo={this.props.currentRepoInfo}
isGroupOwnedRepo={this.props.isGroupOwnedRepo}
userPerm={this.props.userPerm}
enableDirPrivateShare={this.props.enableDirPrivateShare}
isTreeDataLoading={this.props.isTreeDataLoading}
treeData={this.props.treeData}
currentNode={this.props.currentNode}
onNodeClick={this.props.onNodeClick}
onNodeCollapse={this.props.onNodeCollapse}
onNodeExpanded={this.props.onNodeExpanded}
onAddFolderNode={this.props.onAddFolder}
onAddFileNode={this.props.onAddFile}
onRenameNode={this.props.onRenameNode}
onDeleteNode={this.props.onDeleteNode}
isViewFile={this.props.isViewFile}
isFileLoading={this.props.isFileLoading}
isFileLoadedErr={this.props.isFileLoadedErr}
hash={this.props.hash}
filePermission={this.props.filePermission}
content={this.props.content}
lastModified={this.props.lastModified}
latestContributor={this.props.latestContributor}
onLinkClick={this.props.onLinkClick}
isRepoInfoBarShow={isRepoInfoBarShow}
repoTags={this.props.repoTags}
usedRepoTags={this.props.usedRepoTags}
updateUsedRepoTags={this.props.updateUsedRepoTags}
isDirentListLoading={this.props.isDirentListLoading}
direntList={this.props.direntList}
fullDirentList={this.props.fullDirentList}
sortBy={this.props.sortBy}
sortOrder={this.props.sortOrder}
sortItems={this.props.sortItems}
onAddFolder={this.props.onAddFolder}
onAddFile={this.props.onAddFile}
onItemClick={this.onItemClick}
onItemSelected={this.onItemSelected}
onItemDelete={this.onItemDelete}
onItemRename={this.props.onItemRename}
onItemMove={this.onItemMove}
onItemCopy={this.props.onItemCopy}
onItemConvert={this.props.onItemConvert}
onDirentClick={this.onDirentClick}
updateDirent={this.props.updateDirent}
isAllItemSelected={this.props.isAllDirentSelected}
onAllItemSelected={this.props.onAllDirentSelected}
selectedDirentList={this.props.selectedDirentList}
onItemsMove={this.props.onItemsMove}
onItemsCopy={this.props.onItemsCopy}
onItemsDelete={this.props.onItemsDelete}
onFileTagChanged={this.props.onFileTagChanged}
showDirentDetail={this.props.showDirentDetail}
onItemsScroll={this.onItemsScroll}
/>
)}
</Fragment>
)} )}
</div> </div>
</div> </div>

61
frontend/src/pages/lib-content-view/lib-content-view.js
View File

@@ -35,6 +35,7 @@ class LibContentView extends React.Component {
super(props); super(props);
this.state = { this.state = {
currentMode: cookie.load('seafile_view_mode') || 'list', currentMode: cookie.load('seafile_view_mode') || 'list',
isTreePanelShown: true, // display the 'dirent tree' side panel
path: '', path: '',
pathExist: true, pathExist: true,
isViewFile: false, isViewFile: false,
@@ -213,7 +214,7 @@ class LibContentView extends React.Component {
} }
} else if (event.state && event.state.path) { // file path } else if (event.state && event.state.path) { // file path
let path = event.state.path; let path = event.state.path;
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
if (Utils.isMarkdownFile(path)) { // Judging not strict if (Utils.isMarkdownFile(path)) { // Judging not strict
this.showFile(path); this.showFile(path);
return; return;
@@ -235,7 +236,7 @@ class LibContentView extends React.Component {
let repoID = this.props.repoID; let repoID = this.props.repoID;
let { path, dirID } = this.state; let { path, dirID } = this.state;
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
if (this.state.isViewFile) { if (this.state.isViewFile) {
this.updateColumnMarkdownData(path); this.updateColumnMarkdownData(path);
} else { } else {
@@ -328,14 +329,16 @@ class LibContentView extends React.Component {
if (Utils.isMarkdownFile(path)) { if (Utils.isMarkdownFile(path)) {
seafileAPI.getFileInfo(this.props.repoID, path).then(() => { seafileAPI.getFileInfo(this.props.repoID, path).then(() => {
/*
if (this.state.currentMode !== 'column') { if (this.state.currentMode !== 'column') {
cookie.save('seafile_view_mode', 'column'); cookie.save('seafile_view_mode', 'column');
this.setState({currentMode: 'column'}); this.setState({currentMode: 'column'});
} }
*/
this.loadSidePanel(path); this.loadSidePanel(path);
this.showFile(path); this.showFile(path);
}).catch(() => { }).catch(() => {
if (this.state.currentMode === 'column') { // After an error occurs, follow dir if (this.state.isTreePanelShown) { // After an error occurs, follow dir
this.loadSidePanel(path); this.loadSidePanel(path);
this.showDir(path); this.showDir(path);
} else { } else {
@@ -343,7 +346,7 @@ class LibContentView extends React.Component {
} }
}); });
} else { } else {
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.loadSidePanel(path); this.loadSidePanel(path);
this.showDir(path); this.showDir(path);
} else { } else {
@@ -401,7 +404,7 @@ class LibContentView extends React.Component {
showFile = (filePath) => { showFile = (filePath) => {
let repoID = this.props.repoID; let repoID = this.props.repoID;
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
seafileAPI.listFileTags(repoID, filePath).then(res => { seafileAPI.listFileTags(repoID, filePath).then(res => {
let fileTags = res.data.file_tags.map(item => { let fileTags = res.data.file_tags.map(item => {
return new FileTag(item); return new FileTag(item);
@@ -607,14 +610,14 @@ class LibContentView extends React.Component {
if (data.successful) { if (data.successful) {
if (asyncOperationType === 'move') { if (asyncOperationType === 'move') {
if (this.currentMoveItemName && this.currentMoveItemPath) { if (this.currentMoveItemName && this.currentMoveItemPath) {
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.deleteTreeNode(this.currentMoveItemPath); this.deleteTreeNode(this.currentMoveItemPath);
} }
this.moveDirent(this.currentMoveItemName); this.moveDirent(this.currentMoveItemName);
this.currentMoveItemName = ''; this.currentMoveItemName = '';
this.currentMoveItemPath = ''; this.currentMoveItemPath = '';
} else { } else {
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
let direntPaths = this.getSelectedDirentPaths(); let direntPaths = this.getSelectedDirentPaths();
this.deleteTreeNodes(direntPaths); this.deleteTreeNodes(direntPaths);
} }
@@ -688,14 +691,14 @@ class LibContentView extends React.Component {
} }
if (repoID === destRepo.repo_id) { if (repoID === destRepo.repo_id) {
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.deleteTreeNodes(direntPaths); this.deleteTreeNodes(direntPaths);
} }
this.moveDirents(dirNames); this.moveDirents(dirNames);
// 2. tow columns mode need update left tree // 2. tow columns mode need update left tree
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.updateMoveCopyTreeNode(destDirentPath); this.updateMoveCopyTreeNode(destDirentPath);
} }
@@ -740,7 +743,7 @@ class LibContentView extends React.Component {
} }
if (repoID === destRepo.repo_id) { if (repoID === destRepo.repo_id) {
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.updateMoveCopyTreeNode(destDirentPath); this.updateMoveCopyTreeNode(destDirentPath);
} }
@@ -779,14 +782,14 @@ class LibContentView extends React.Component {
let name = Utils.getFileName(dirent.path); let name = Utils.getFileName(dirent.path);
let parentPath = Utils.getDirName(dirent.path); let parentPath = Utils.getDirName(dirent.path);
if (!dirent.is_dir) { if (!dirent.is_dir) {
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.addNodeToTree(name, parentPath, 'file'); this.addNodeToTree(name, parentPath, 'file');
} }
if (parentPath === this.state.path && !this.state.isViewFile) { if (parentPath === this.state.path && !this.state.isViewFile) {
this.addDirent(name, 'file'); this.addDirent(name, 'file');
} }
} else { } else {
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.addNodeToTree(name, parentPath, 'dir'); this.addNodeToTree(name, parentPath, 'dir');
} }
if (parentPath === this.state.path && !this.state.isViewFile) { if (parentPath === this.state.path && !this.state.isViewFile) {
@@ -823,7 +826,7 @@ class LibContentView extends React.Component {
this.setState({updateDetail: !this.state.updateDetail}); this.setState({updateDetail: !this.state.updateDetail});
seafileAPI.deleteMutipleDirents(repoID, this.state.path, dirNames).then(res => { seafileAPI.deleteMutipleDirents(repoID, this.state.path, dirNames).then(res => {
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.deleteTreeNodes(direntPaths); this.deleteTreeNodes(direntPaths);
} }
@@ -862,7 +865,7 @@ class LibContentView extends React.Component {
let name = Utils.getFileName(dirPath); let name = Utils.getFileName(dirPath);
let parentPath = Utils.getDirName(dirPath); let parentPath = Utils.getDirName(dirPath);
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.addNodeToTree(name, parentPath, 'dir'); this.addNodeToTree(name, parentPath, 'dir');
} }
@@ -880,7 +883,7 @@ class LibContentView extends React.Component {
seafileAPI.createFile(repoID, filePath).then(res => { seafileAPI.createFile(repoID, filePath).then(res => {
let name = Utils.getFileName(filePath); let name = Utils.getFileName(filePath);
let parentPath = Utils.getDirName(filePath); let parentPath = Utils.getDirName(filePath);
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.addNodeToTree(name, parentPath, 'file'); this.addNodeToTree(name, parentPath, 'file');
} }
if (parentPath === this.state.path && !this.state.isViewFile) { if (parentPath === this.state.path && !this.state.isViewFile) {
@@ -902,7 +905,7 @@ class LibContentView extends React.Component {
} }
cookie.save('seafile_view_mode', mode); cookie.save('seafile_view_mode', mode);
let path = this.state.path; let path = this.state.path;
if (this.state.currentMode === 'column' && this.state.isViewFile) { if (this.state.isTreePanelShown && this.state.isViewFile) {
path = Utils.getDirName(path); path = Utils.getDirName(path);
this.setState({ this.setState({
path: path, path: path,
@@ -914,7 +917,7 @@ class LibContentView extends React.Component {
window.history.pushState({url: url, path: path}, path, url); window.history.pushState({url: url, path: path}, path, url);
} }
if (mode === 'column') { if (this.state.isTreePanelShown) {
this.loadSidePanel(this.state.path); this.loadSidePanel(this.state.path);
} }
this.isNeedUpdateHistoryState = false; this.isNeedUpdateHistoryState = false;
@@ -927,7 +930,7 @@ class LibContentView extends React.Component {
if (this.state.currentPath === path) { if (this.state.currentPath === path) {
return; return;
} }
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
// load sidePanel // load sidePanel
let index = -1; let index = -1;
let paths = Utils.getPaths(path); let paths = Utils.getPaths(path);
@@ -982,7 +985,7 @@ class LibContentView extends React.Component {
onMainNavBarClick = (nodePath) => { onMainNavBarClick = (nodePath) => {
//just for dir //just for dir
this.resetSelected(); this.resetSelected();
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
let tree = this.state.treeData.clone(); let tree = this.state.treeData.clone();
let node = tree.getNodeByPath(nodePath); let node = tree.getNodeByPath(nodePath);
tree.expandNode(node); tree.expandNode(node);
@@ -1058,7 +1061,7 @@ class LibContentView extends React.Component {
}; };
renameItemAjaxCallback(path, newName) { renameItemAjaxCallback(path, newName) {
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.renameTreeNode(path, newName); this.renameTreeNode(path, newName);
} }
this.renameDirent(path, newName); this.renameDirent(path, newName);
@@ -1122,7 +1125,7 @@ class LibContentView extends React.Component {
} }
deleteItemAjaxCallback(path) { deleteItemAjaxCallback(path) {
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.deleteTreeNode(path); this.deleteTreeNode(path);
} }
this.deleteDirent(path); this.deleteDirent(path);
@@ -1153,13 +1156,14 @@ class LibContentView extends React.Component {
}); });
} }
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.deleteTreeNode(direntPath); this.deleteTreeNode(direntPath);
} }
// 1. move to current repo // 1. move to current repo
// 2. tow columns mode need update left tree // 2. tow columns mode need update left tree
if (repoID === destRepo.repo_id && this.state.currentMode === 'column') { if (repoID === destRepo.repo_id &&
this.state.isTreePanelShown) {
this.updateMoveCopyTreeNode(moveToDirentPath); this.updateMoveCopyTreeNode(moveToDirentPath);
} }
@@ -1215,7 +1219,7 @@ class LibContentView extends React.Component {
} }
if (repoID === destRepo.repo_id) { if (repoID === destRepo.repo_id) {
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.updateMoveCopyTreeNode(copyToDirentPath); this.updateMoveCopyTreeNode(copyToDirentPath);
} }
@@ -1258,7 +1262,7 @@ class LibContentView extends React.Component {
let new_path = parentDir + '/' + newFileName; let new_path = parentDir + '/' + newFileName;
let parentPath = Utils.getDirName(new_path); let parentPath = Utils.getDirName(new_path);
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.addNodeToTree(newFileName, parentPath, 'file'); this.addNodeToTree(newFileName, parentPath, 'file');
} }
@@ -1303,12 +1307,12 @@ class LibContentView extends React.Component {
let repoID = this.props.repoID; let repoID = this.props.repoID;
let direntPath = Utils.joinPath(this.state.path, dirent.name); let direntPath = Utils.joinPath(this.state.path, dirent.name);
if (dirent.isDir()) { // is dir if (dirent.isDir()) { // is dir
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.loadTreeNodeByPath(direntPath); this.loadTreeNodeByPath(direntPath);
} }
this.showDir(direntPath); this.showDir(direntPath);
} else { // is file } else { // is file
if (this.state.currentMode === 'column' && Utils.isMarkdownFile(direntPath)) { if (this.state.isTreePanelShown && Utils.isMarkdownFile(direntPath)) {
this.showColumnMarkdownFile(direntPath); this.showColumnMarkdownFile(direntPath);
} else { } else {
let url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(direntPath); let url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(direntPath);
@@ -1426,7 +1430,7 @@ class LibContentView extends React.Component {
// use current dirent parent's permission as it's permission // use current dirent parent's permission as it's permission
direntObject.permission = this.state.userPerm; direntObject.permission = this.state.userPerm;
let dirent = new Dirent(direntObject); let dirent = new Dirent(direntObject);
if (this.state.currentMode === 'column') { if (this.state.isTreePanelShown) {
this.addNodeToTree(dirent.name, this.state.path, dirent.type); this.addNodeToTree(dirent.name, this.state.path, dirent.type);
} }
if (direntObject.type === 'dir') { if (direntObject.type === 'dir') {
@@ -2041,6 +2045,7 @@ class LibContentView extends React.Component {
<div className="main-panel-center flex-row"> <div className="main-panel-center flex-row">
<LibContentContainer <LibContentContainer
pathPrefix={this.props.pathPrefix} pathPrefix={this.props.pathPrefix}
isTreePanelShown={this.state.isTreePanelShown}
currentMode={this.state.currentMode} currentMode={this.state.currentMode}
path={this.state.path} path={this.state.path}
pathExist={this.state.pathExist} pathExist={this.state.pathExist}