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

['dir view'] fixup for sdoc's 'sub-menu'; fixup & improvement for the (#6711)

Browse Source 
'Display files' in the file tree panel

* fixup for sdoc: when hover the other menu options in the first-level menu,
  hide the sub-menu
* for 'Display files': refactored the memu option and removed the bad effect on the other menus & menu
  options
This commit is contained in:
llj
2024-09-06 13:51:26 +08:00
committed by GitHub
parent d1bd309be5
commit 0655d7a774
3 changed files with 23 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/context-menu/context-menu.js
View File

@@ -189,7 +189,7 @@ class ContextMenu extends React.Component {
}; };
onDropDownMouseMove = (e) => { onDropDownMouseMove = (e) => {
if (this.state.isSubMenuShown && e.target && e.target.className === 'dropdown-item') { if (this.state.isSubMenuShown) {
this.setState({ this.setState({
isSubMenuShown: false isSubMenuShown: false
}); });
@@ -256,6 +256,7 @@ class ContextMenu extends React.Component {
data-operation={menuItem.key} data-operation={menuItem.key}
onClick={this.onMenuItemClick} onClick={this.onMenuItemClick}
onContextMenu={this.onContextMenu} onContextMenu={this.onContextMenu}
onMouseMove={this.onDropDownMouseMove}
> >
{menuItem.value} {menuItem.value}
</button> </button>

34
frontend/src/components/dropdown-menu/item-dropdown-menu.js
View File

@@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import listener from '../context-menu/globalEventListener'; import classnames from 'classnames';
import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap'; import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
import listener from '../context-menu/globalEventListener';
import { gettext } from '../../utils/constants'; import { gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import ModalPortal from '../modal-portal'; import ModalPortal from '../modal-portal';
@@ -114,8 +115,8 @@ class ItemDropdownMenu extends React.Component {
this.props.onMenuItemClick(operation, event, item); this.props.onMenuItemClick(operation, event, item);
}; };
onDropDownMouseMove = (e) => { onDropDownMouseMove = () => {
if (this.state.isSubMenuShown && e.target && e.target.className === 'dropdown-item') { if (this.state.isSubMenuShown) {
this.setState({ this.setState({
isSubMenuShown: false isSubMenuShown: false
}); });
@@ -191,7 +192,6 @@ class ItemDropdownMenu extends React.Component {
<ModalPortal> <ModalPortal>
<DropdownMenu <DropdownMenu
style={menuStyle} style={menuStyle}
onMouseMove={this.onDropDownMouseMove}
> >
{menuList.map((menuItem, index) => { {menuList.map((menuItem, index) => {
if (menuItem === 'Divider') { if (menuItem === 'Divider') {
@@ -208,7 +208,7 @@ class ItemDropdownMenu extends React.Component {
> >
<DropdownToggle <DropdownToggle
tag='div' tag='div'
className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center pl-5" className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center"
onMouseEnter={this.toggleSubMenuShown.bind(this, menuItem)} onMouseEnter={this.toggleSubMenuShown.bind(this, menuItem)}
> >
<span className="mr-auto">{menuItem.value}</span> <span className="mr-auto">{menuItem.value}</span>
@@ -229,15 +229,21 @@ class ItemDropdownMenu extends React.Component {
); );
} else { } else {
return ( return (
<DropdownItem className='p-0' key={index} data-toggle={menuItem.key} onClick={this.onMenuItemClick} onKeyDown={this.onMenuItemKeyDown}> <DropdownItem
<div className='dropdown-item-wrapper'> key={index}
<span className='dropdown-item-tick'> className={classnames({
{menuItem.key === 'Display files' && this.props.isDisplayFiles && ( 'pl-5': this.props.isDisplayFiles != undefined,
<i className="sf2-icon-tick"></i> 'position-relative': this.props.isDisplayFiles
)} })}
</span> data-toggle={menuItem.key}
<span className='dropdown-item-content'>{menuItem.value}</span> onClick={this.onMenuItemClick}
</div> onKeyDown={this.onMenuItemKeyDown}
onMouseMove={this.onDropDownMouseMove}
>
{menuItem.key === 'Display files' && this.props.isDisplayFiles && (
<i className="dropdown-item-tick sf2-icon-tick"></i>
)}
{menuItem.value}
</DropdownItem> </DropdownItem>
); );
} }

11
frontend/src/css/item-dropdown-menu.css
View File

@@ -1,13 +1,4 @@
.dropdown-item-wrapper { .dropdown-item .dropdown-item-tick {
height: 100%;
display: flex;
align-items: center;
position: relative;
padding-left: 1.5rem;
padding-right: 1rem;
}
.dropdown-item-wrapper .dropdown-item-tick {
width: 1.5rem; width: 1.5rem;
height: 100%; height: 100%;
display: flex; display: flex;