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

['view mode' selector] rewrote the 'view mode' selector(fixup & improvements) and used it in 'Files' & 'dir view' pages (#6215)

Browse Source
This commit is contained in:
llj
2024-06-17 16:52:44 +08:00
committed by GitHub
parent 607f96322b
commit bb6a81e84a
3 changed files with 85 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/components/cur-dir-path/dir-tool.js
View File

@@ -6,6 +6,7 @@ import { Utils } from '../../utils/utils';
import TextTranslation from '../../utils/text-translation';
import SeahubPopover from '../common/seahub-popover';
import ListTagPopover from '../popover/list-tag-popover';
import ViewModes from '../../components/view-modes';
const propTypes = {
repoID: PropTypes.string.isRequired,
@@ -24,7 +25,6 @@ class DirTool extends React.Component {
super(props);
this.state = {
isRepoTagDialogOpen: false,
isSwitchModeDropdownMenuOpen: false,
isDropdownMenuOpen: false
};
}
@@ -35,12 +35,6 @@ class DirTool extends React.Component {
});
};
toggleSwitchModeDropdownMenu = () => {
this.setState({
isSwitchModeDropdownMenuOpen: !this.state.isSwitchModeDropdownMenuOpen
});
};
hidePopover = (e) => {
if (e) {
let dom = e.target;
@@ -123,55 +117,12 @@ class DirTool extends React.Component {
render() {
const menuItems = this.getMenuList();
const { isDropdownMenuOpen, isSwitchModeDropdownMenuOpen } = this.state;
const { repoID } = this.props;
const { isDropdownMenuOpen } = this.state;
const { repoID, currentMode } = this.props;
return (
<React.Fragment>
<div className="d-flex">
<Dropdown
isOpen={isSwitchModeDropdownMenuOpen}
toggle={this.toggleSwitchModeDropdownMenu}
id="cur-view-change-mode-dropdown"
>
<DropdownToggle
tag="i"
children={
<span className='cur-view-path-btn px-1'>
<span className={`sf3-font sf3-font-${this.props.currentMode === 'list' ? 'list-view' : 'grid-view'}`}></span>
<span className={'sf3-font sf3-font-down'}></span>
</span>
}
data-toggle="dropdown"
title={gettext('Change view mode')}
aria-label={gettext('Change view mode')}
aria-expanded={isSwitchModeDropdownMenuOpen}
>
</DropdownToggle>
<DropdownMenu right={true}>
<DropdownItem key={0} onClick={this.props.switchViewMode.bind(this, 'list')}>
<div className="d-flex justify-content-between align-items-center">
<span className="mr-8 d-flex justify-content-between align-items-center">
<span className={'sf3-font-list-view sf3-font mr-2'}></span>
<span>{gettext('List view')}</span>
</span>
<span>
{this.props.currentMode === 'list' && <i className="fas fa-check color-selected"></i>}
</span>
</div>
</DropdownItem>
<DropdownItem key={1} onClick={this.props.switchViewMode.bind(this, 'grid')}>
<div className="d-flex justify-content-between align-items-center">
<span className="mr-8 d-flex justify-content-between align-items-center">
<span className={'sf3-font-grid-view sf3-font mr-2'}></span>
<span>{gettext('Grid view')}</span>
</span>
<span>
{this.props.currentMode === 'grid' && <i className="fas fa-check color-selected"></i>}
</span>
</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<ViewModes currentViewMode={currentMode} switchViewMode={this.props.switchViewMode} />
{menuItems.length > 0 &&
<Dropdown isOpen={isDropdownMenuOpen} toggle={this.toggleDropdownMenu}>
<DropdownToggle