haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-04-28 03:10:45 +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]);
return (
<ModalPortal>
<DropdownMenu className="sf-metadata-column-type-dropdown-menu" modifiers={modifiers}>
<div className="search-column-container">
<Input onChange={onSearchColumn} placeholder={gettext('Search properties')} value={searchValue} onClick={onSearchClick} ref={inputRef} />
</div>
{displayColumns.length > 0 && predefinedColumns.length > 0 && (
<>
{predefinedColumns.map(item => (
<DropdownItem
key={item.key}
className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
onMouseEnter={() => setCustomPropertiesOpen(false)}
onClick={() => handleSelect(item)}
<DropdownMenu className="sf-metadata-column-type-dropdown-menu" modifiers={modifiers} style={{ zIndex: 1061 }}>
<div className="search-column-container">
<Input onChange={onSearchColumn} placeholder={gettext('Search properties')} value={searchValue} onClick={onSearchClick} ref={inputRef} />
</div>
{displayColumns.length > 0 && predefinedColumns.length > 0 && (
<>
{predefinedColumns.map(item => (
<DropdownItem
key={item.key}
className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
onMouseEnter={() => setCustomPropertiesOpen(false)}
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" />
<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();}}
<DropdownToggle
tag='span'
className="column-type-item dropdown-item text-truncate d-flex align-items-center"
>
<DropdownToggle
tag='span'
className="column-type-item dropdown-item text-truncate d-flex align-items-center"
>
<Icon symbol="edit" className="sf-metadata-icon" />
<span className="mr-auto">{gettext('Custom properties')}</span>
<i className="sf3-font-down sf3-font rotate-270"></i>
</DropdownToggle>
<DropdownMenu container="body" style={{ zIndex: 1061 }}>
{basicsColumns.map((item, index) => (
<DropdownItem
key={index}
className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
onClick={() => handleSelect(item)}
>
<Icon symbol={item.icon} className="sf-metadata-icon" />
<span>{item.name}</span>
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
</>
)}
</>
)}
</DropdownMenu>
</ModalPortal>
<Icon symbol="edit" className="sf-metadata-icon" />
<span className="mr-auto">{gettext('Custom properties')}</span>
<i className="sf3-font-down sf3-font rotate-270"></i>
</DropdownToggle>
<DropdownMenu>
{basicsColumns.map((item, index) => (
<DropdownItem
key={index}
className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
onClick={() => handleSelect(item)}
>
<Icon symbol={item.icon} className="sf-metadata-icon" />
<span>{item.name}</span>
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
</>
)}
</>
)}
</DropdownMenu>
);
};

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