haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-17 14:37:58 +00:00
Code Issues Releases Wiki Activity

Merge pull request #7591 from haiwen/fix/dropdown_menu_position

Browse Source 
fix dropdown menu position
This commit is contained in:
Michael An 2025-03-12 12:06:35 +08:00 committed by GitHub
commit 890183fe6c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 65 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/metadata/components/popover/column-popover/dropdown-menu/index.js
View File

@ -189,62 +189,60 @@ const CustomDropdownMenu = ({ column, modifiers, onSelect }) => {
}, [onSelect]); }, [onSelect]);
return ( return (
<ModalPortal> <DropdownMenu className="sf-metadata-column-type-dropdown-menu" modifiers={modifiers} style={{ zIndex: 1061 }}>
<DropdownMenu className="sf-metadata-column-type-dropdown-menu" modifiers={modifiers}> <div className="search-column-container">
<div className="search-column-container"> <Input onChange={onSearchColumn} placeholder={gettext('Search properties')} value={searchValue} onClick={onSearchClick} ref={inputRef} />
<Input onChange={onSearchColumn} placeholder={gettext('Search properties')} value={searchValue} onClick={onSearchClick} ref={inputRef} /> </div>
</div> {displayColumns.length > 0 && predefinedColumns.length > 0 && (
{displayColumns.length > 0 && predefinedColumns.length > 0 && ( <>
<> {predefinedColumns.map(item => (
{predefinedColumns.map(item => ( <DropdownItem
<DropdownItem key={item.key}
key={item.key} className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })} onMouseEnter={() => setCustomPropertiesOpen(false)}
onMouseEnter={() => setCustomPropertiesOpen(false)} onClick={() => handleSelect(item)}
onClick={() => handleSelect(item)} >
<Icon symbol={item.icon} className="sf-metadata-icon" />
<span>{item.name}</span>
</DropdownItem>
))}
{basicsColumns.length > 0 && (
<>
<DropdownItem className="w-100" divider />
<Dropdown
className="w-100"
direction="end"
isOpen={isCustomPropertiesOpen}
toggle={toggleCustomProperties}
onMouseEnter={() => setCustomPropertiesOpen(true)}
onMouseMove={(e) => {e.stopPropagation();}}
> >
<Icon symbol={item.icon} className="sf-metadata-icon" /> <DropdownToggle
<span>{item.name}</span> tag='span'
</DropdownItem> className="column-type-item dropdown-item text-truncate d-flex align-items-center"
))}
{basicsColumns.length > 0 && (
<>
<DropdownItem className="w-100" divider />
<Dropdown
className="w-100"
direction="end"
isOpen={isCustomPropertiesOpen}
toggle={toggleCustomProperties}
onMouseEnter={() => setCustomPropertiesOpen(true)}
onMouseMove={(e) => {e.stopPropagation();}}
> >
<DropdownToggle <Icon symbol="edit" className="sf-metadata-icon" />
tag='span' <span className="mr-auto">{gettext('Custom properties')}</span>
className="column-type-item dropdown-item text-truncate d-flex align-items-center" <i className="sf3-font-down sf3-font rotate-270"></i>
> </DropdownToggle>
<Icon symbol="edit" className="sf-metadata-icon" /> <DropdownMenu>
<span className="mr-auto">{gettext('Custom properties')}</span> {basicsColumns.map((item, index) => (
<i className="sf3-font-down sf3-font rotate-270"></i> <DropdownItem
</DropdownToggle> key={index}
<DropdownMenu container="body" style={{ zIndex: 1061 }}> className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
{basicsColumns.map((item, index) => ( onClick={() => handleSelect(item)}
<DropdownItem >
key={index} <Icon symbol={item.icon} className="sf-metadata-icon" />
className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })} <span>{item.name}</span>
onClick={() => handleSelect(item)} </DropdownItem>
> ))}
<Icon symbol={item.icon} className="sf-metadata-icon" /> </DropdownMenu>
<span>{item.name}</span> </Dropdown>
</DropdownItem> </>
))} )}
</DropdownMenu> </>
</Dropdown> )}
</> </DropdownMenu>
)}
</>
)}
</DropdownMenu>
</ModalPortal>
); );
}; };

23
frontend/src/metadata/components/popover/column-popover/type/index.js
View File

@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { gettext } from '../../../../../utils/constants'; import { gettext } from '../../../../../utils/constants';
import CustomDropdownMenu from '../dropdown-menu'; import CustomDropdownMenu from '../dropdown-menu';
import ModalPortal from '../../../../../components/modal-portal';
import './index.css'; import './index.css';
@ -54,16 +55,18 @@ const Type = forwardRef(({ column, onChange }, ref) => {
<span className="mr-auto">{column.name}</span> <span className="mr-auto">{column.name}</span>
<i className="sf3-font sf3-font-down" aria-hidden="true"></i> <i className="sf3-font sf3-font-down" aria-hidden="true"></i>
</DropdownToggle> </DropdownToggle>
<CustomDropdownMenu <ModalPortal>
column={column} <CustomDropdownMenu
modifiers={[{ column={column}
name: 'offset', modifiers={[{
options: { name: 'offset',
offset: [0, 17], options: {
} offset: [0, 17],
}]} }
onSelect={onChange} }]}
/> onSelect={onChange}
/>
</ModalPortal>
</Dropdown> </Dropdown>
{error && (<FormFeedback>{error}</FormFeedback>)} {error && (<FormFeedback>{error}</FormFeedback>)}
</FormGroup> </FormGroup>