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

[dir view] redesigned the 'view modes' UI (#6103)

Browse Source
This commit is contained in:
llj
2024-05-22 14:33:03 +08:00
committed by GitHub
parent e599ef3d51
commit 21e8443964
2 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,10 +34,6 @@ class DirTool extends React.Component {
}); });
}; };
onMouseDown = (e) => {
e.stopPropagation();
};
hidePopover = (e) => { hidePopover = (e) => {
if (e) { if (e) {
let dom = e.target; let dom = e.target;
@@ -85,13 +81,13 @@ class DirTool extends React.Component {
}; };
onMenuItemClick = (item) => { onMenuItemClick = (item) => {
const { key: operation, href } = item; const { key, href } = item;
switch (operation) { switch (key) {
case 'Properties': case 'Properties':
this.props.switchViewMode('detail'); this.props.switchViewMode('detail');
break; break;
case 'Tags': case 'Tags':
this.setState({ isRepoTagDialogOpen: !this.state.isRepoTagDialogOpen }); this.setState({isRepoTagDialogOpen: !this.state.isRepoTagDialogOpen});
break; break;
case 'Trash': case 'Trash':
location.href = href; location.href = href;
@@ -112,9 +108,9 @@ class DirTool extends React.Component {
return list.concat(list2); return list.concat(list2);
}; };
onMenuItemKeyDown = (e) => { onMenuItemKeyDown = (e, item) => {
if (e.key == 'Enter' || e.key == 'Space') { if (e.key == 'Enter' || e.key == 'Space') {
this.onMenuItemClick(e); this.onMenuItemClick(item);
} }
}; };
@@ -125,8 +121,8 @@ class DirTool extends React.Component {
const { repoID } = this.props; const { repoID } = this.props;
return ( return (
<React.Fragment> <React.Fragment>
<div> <div className="d-flex">
<div className="view-mode btn-group"> <div className="view-modes">
<button className={`${baseClass} sf3-font-list-view sf3-font ${this.props.currentMode === 'list' ? 'current-mode' : ''}`} id='list' title={gettext('List')} aria-label={gettext('List')} onClick={this.props.switchViewMode.bind(this, 'list')}></button> <button className={`${baseClass} sf3-font-list-view sf3-font ${this.props.currentMode === 'list' ? 'current-mode' : ''}`} id='list' title={gettext('List')} aria-label={gettext('List')} onClick={this.props.switchViewMode.bind(this, 'list')}></button>
<button className={`${baseClass} sf3-font-grid-view sf3-font ${this.props.currentMode === 'grid' ? 'current-mode' : ''}`} id='grid' title={gettext('Grid')} aria-label={gettext('Grid')} onClick={this.props.switchViewMode.bind(this, 'grid')}></button> <button className={`${baseClass} sf3-font-grid-view sf3-font ${this.props.currentMode === 'grid' ? 'current-mode' : ''}`} id='grid' title={gettext('Grid')} aria-label={gettext('Grid')} onClick={this.props.switchViewMode.bind(this, 'grid')}></button>
</div> </div>
@@ -148,7 +144,7 @@ class DirTool extends React.Component {
return <DropdownItem key={index} divider />; return <DropdownItem key={index} divider />;
} else { } else {
return ( return (
<DropdownItem key={index} onClick={this.onMenuItemClick.bind(this, menuItem)} onKeyDown={this.onMenuItemKeyDown}>{menuItem.value}</DropdownItem> <DropdownItem key={index} onClick={this.onMenuItemClick.bind(this, menuItem)} onKeyDown={this.onMenuItemKeyDown.bind(this, menuItem)}>{menuItem.value}</DropdownItem>
); );
} }
})} })}

16
frontend/src/css/toolbar.css
View File

@@ -51,16 +51,22 @@
/* end file-operation toolbar */ /* end file-operation toolbar */
/* begin view-mode toolbar */ /* begin view-mode toolbar */
.view-modes {
padding: 2px;
background-color: #e5e6e7;
border-radius: 3px;
height: 32px;
}
.sf-view-mode-btn { .sf-view-mode-btn {
width: 44px; width: 44px;
height: 32px; height: 28px;
padding: 0; padding: 0;
background-color: #e5e6e7; background-color: transparent;
color: #444; color: #444;
font-size: 14px; font-size: 14px;
line-height: 30px; line-height: 2;
border: 1px solid #ccc; border: 0;
border-radius: 3px; border-radius: 2px;
} }
.sf-view-mode-btn:hover { .sf-view-mode-btn:hover {